.app-bar-green-border {
    border-bottom-color: #79A349;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.highlighted-date-blue {
    color: white;
    border-radius: 50%;
    border: 1px solid #004b73;
    position: relative;
    cursor: pointer;
}

.highlighted-date-green {
    background-color: #79A340;
    color: white !important;
    border-radius: 50%;
    border: none !important;
    position: relative;
    cursor: pointer;
}

    .highlighted-date-green:hover {
        background-color: #B3D388 !important;
    }

.drag-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-drop-icon {
    position: absolute;
}

.drag-drop-input {
    position: relative !important;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.max-width-columns {
    max-width: 150px;
}

.truncateInfoColumn {
    max-width: 25vh;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.truncateOptions {
    max-width: 50px !important;
    min-width: 50px !important;
    overflow: hidden;
}

.truncate-chip-text {
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


.truncate-info-column-min {
    max-width: 15vh;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.template-tables-size {
    height: auto;
    min-height: 400px;
    max-height: 700px;
    overflow-x: scroll;
}

.truncate-options-min {
    max-width: 20px !important;
    min-width: 50px !important;
    overflow: hidden;
}

.text-muted {
    color: #909090 !important;
}

.hide {
    visibility: hidden !important;
    background: transparent !important;
    color: transparent !important;
}

.text-white {
    color: #ffffff !important;
}


.Arro_Primary_BackgroundColor {
    background-color: #004B73;
}

.dropdown300 {
    min-width: 150px !important;
    width: 300px !important;
}

.italicbolded {
    font-weight: bold !important;
    font-style: italic !important;
    color: red !important;
}

.selected {
    background-color: var(--mud-palette-primary) !important;
}

    .selected > td {
        color: white !important;
    }

        .selected > td .mud-input {
            color: white !important;
        }

.default-font-size {
    font-size: var(--mud-typography-default-size);
}

.vertical-align {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.custom-modal .mud-input-control > .mud-input-control-input-container > div.mud-input {
    margin-top: 16px !important;
}

.mud-dialog .mud-dialog-actions {
    justify-content: center !important;
    padding-top: 0rem;
    margin-bottom: 0.5rem;
    gap: 0.5rem !important;
}

.mud-table-pagination-toolbar {
    border-top: 1px solid var(--mud-palette-table-lines);
    height: 62px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-inline-end: 2px;
    padding-inline-start: unset;
    flex-wrap: wrap;
}

/*QuestionListBuilder for chips when a row is selected*/
.selected-inactive {
    background-color: #e1e1e1 !important;
}

/*QuestionListBuilder for node drag and drop*/
.custom-hover:hover {
    background-color: #dadde2 !important;
    transition: background-color 0.3s ease;
}

/* Azure Maps */
.map {
    height: 100vh;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.azure-maps-control {
    height: 100vh;
    width: 100%;
}

.azure-maps-control .map {
    height: 100vh;
    width: 100%;
}

#mainMap {
    width: 100%;
    height: 500px;
}

.pin-blue {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2f80ed;
    border: 3px solid #1b4f9c;
    box-shadow: 0 0 2px rgba(0,0,0,.4);
}

.popup-card {
    width: 320px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 500px;
}

.my-marker {
    font-size: 20px;
    background: white;
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    user-select: none;
}

.map-container {
    width: 100%;
    height: 400px;
}

.truncate-text-max {
    max-width: 11vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.atlas-map .popup-content-container {
    box-shadow: none !important;
}


/* Custom styling for Azure Maps controls with MudBlazor colors */

/* Control container styling */
.atlas-map .azure-maps-control-container {
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

/* Individual control buttons */
.atlas-map .azure-maps-control-button {
    border-radius: var(--mud-default-borderradius) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: all 0.3s ease !important;
    border: 1px solid var(--mud-palette-divider) !important;
    margin: 2px !important;
}

/* Button hover effects */
.atlas-map .azure-maps-control-button:hover {
    background-color: var(--mud-palette-surface) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Button active/pressed state */
.atlas-map .azure-maps-control-button:active {
    background-color: var(--mud-palette-surface) !important;
    transform: scale(0.95) !important;
}

/* Selected/current button state */
.atlas-map .azure-maps-control-button[aria-current="true"] {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Disabled button state */
.atlas-map .azure-maps-control-button:disabled {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-action-disabled) !important;
    opacity: 0.6 !important;
}

.atlas-map .azure-maps-control-button.rotation,
.atlas-map .azure-maps-control-button.pitch,
.atlas-map .azure-maps-control-button.zoom-in,
.atlas-map .azure-maps-control-button.zoom-out,
.atlas-map .azure-maps-control-button.curr-style {
    border-radius: 50% !important;
    padding: 6px !important;
}

/* Dropdown styling */
.atlas-map .azure-maps-control-dropdown {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

/* List button styling */
.atlas-map .azure-maps-control-list-button {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: var(--mud-default-borderradius) !important;
    transition: all 0.3s ease !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

.atlas-map .azure-maps-control-list-button:hover {
    background-color: var(--mud-palette-action-hover) !important;
}

.atlas-map .azure-maps-control-list-button[aria-current="true"] {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Traffic legend styling */
.atlas-map .traffic-legend {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Copyright and logo styling */
.atlas-map .azure-map-copyright {
    color: var(--mud-palette-text-secondary) !important;
}

.atlas-map .map-copyright {
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--mud-default-borderradius) !important;
    backdrop-filter: blur(10px) !important;
    margin: 4px !important;
}

/* Popup styling */
.atlas-map .popup-content-container {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}


/* Tooltip styling */
.atlas-map .tooltiptext {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Focus styles for accessibility */
.atlas-map .azure-maps-control-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}

/* Loading state */
.atlas-map .azure-maps-control-button.loading {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-action-disabled) !important;
    position: relative !important;
}

.atlas-map .azure-maps-control-button.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    border: 2px solid var(--mud-palette-primary) !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.poi-title {
    margin: 0;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.poi-meta, .poi-meta * {
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.poi-meta ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* Agreement List */
.column-title-full {
    display: inline;
}

.column-title-short {
    display: none;
}

@media screen and (max-width: 1280px) {
    .column-title-full {
        display: none;
    }

    .column-title-short {
        display: inline;
    }

    .poc-contact-column {
        min-width: 235px !important;
    }

    .agreement-column {
        min-width: 220px;
    }

    .comments-column {
        min-width: 200px !important;
    }
}

/* Incident List */

@media screen and (max-width: 1280px) {
    .status-column {
        min-width: 155px !important;
    }

    .narrow-column {
        min-width: 165px !important;
    }

    .responsive-table-wrapper {
        overflow-x: auto;
        width: 100%;
    }
}

@media screen and (min-width: 1281px) {
    .responsive-table-wrapper .mud-table,
    .responsive-table-wrapper .mud-table-container {
        min-width: unset !important;
        width: 100% !important;
    }

    .status-column,
    .narrow-column {
        min-width: unset !important;
        width: auto !important;
    }
}

/* Equipment List */

@media screen and (max-width: 1280px) {
    .serial-column {
        min-width: 120px !important;
    }

    .assigned-column {
        min-width: 140px !important;
    }
}

/* Question List Table */

.pagination-question {
    justify-content: space-between;
}

.question-list-table * .mud-table-row .mud-table-cell {
    display: table-cell;
    padding: 16px !important;
    text-align: start;
    line-height: 1.43;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    letter-spacing: .01071em;
    vertical-align: inherit;
}