@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --as-dark-blue: #113C5B;
    --as-blue: #008CD1;
    --as-light-blue: #E1EEFD;
    --as-steel-blue: #005A90;
    --as-steel-blue-rgb-25: rgb(0, 90, 144, 0.25);
    --as-white-rgb-25: rgb(255, 255, 255, 0.25);
    --as-sky-blue: #51BDE7;
    --as-gray: #777777;
    --as-light-gray: #CBD0D4;
    --as-divider: #DDDDDD;
    --as-red: #E10E0E;
    --as-orange: #FBAD20;
    --as-green: #00FF00;
    --as-white: #FFFFFF;
    --as-black: #000000;
    --as-background: #F8F9FA;
    --as-background-50: rgb(245, 245, 245, 0.5);
    --as-disabled: #D5D6D7;
    --as-tab-backgroud: rgba(6, 142, 190, 0.08);
    --as-complete: #C9DC50;
    --as-pending: #FFA41C;
    --as-improvement: #84BD00;
    --as-status-ok: #C9DC50;
    --as-status-error: #FFB4B3;
    --as-box-shawdow-gray: #A0A5A9;
    --as-success-green: #00C853;
    --as-wo-status-new: #F5D100;
    --as-wo-status-assigned: #FBAD20;
    --as-wo-status-claimed: #113C5B;
    --as-wo-status-fulfilled: #C9DB50;
    --as-wo-sub-status-scheduled: #008CD1;
    --as-wo-sub-status-tentative: #80C5E8;
    --as-wo-sub-status-timeblock: #BABFC5;
    --as-wo-sub-status-reschedule: #FF3C42;
    --as-wo-sub-status-nextcall: #40A9DC;
    --as-search-bar-height: 96px;
    --as-graph-height: 300px;
    --as-bottom-navigation-height: 0rem;
    --as-appbar-height: 56px;
    --as-left-nav-width: 215px;
}


html,
body {
    font-family: 'Poppins', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    /*    background-color: var(--as-background);
*/
    color: var(--as-steel-blue) !important;
    width: 100%;
    height: 100vh;
}

#app {
    height: 100%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.fieldset {
    border: 1px solid var(--as-steel-blue-rgb-25);
    padding: 1px !important;
    border-radius: 0.25rem;
    padding-left: 2px !important;
    padding-bottom: 0.5rem !important;
}

.legend {
    float: none !important;
    width: auto !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mud-palette-primary);
    margin-left: 10px !important;
    padding-left: 5px;
    padding-right: 5px;
}

.as-section-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    border-radius: 0.25rem;
    margin: 16px 0px 12px 0;
    padding: 2px 6px;
    background-color: var(--as-steel-blue);
    color: var(--as-white);
}

.as-mud-label-nowrap {
    text-wrap-mode: nowrap !important;
}

.offcanvas-backdrop {
    pointer-events: none !important;
}

/* start app bar styles */
.as-app-bar {
    min-height: var(--as-appbar-height) !important;
    background-color: var(--as-steel-blue) !important;
}

.as-app-bar-logo {
    width: 7rem !important;
    padding-top: 0.25rem;
}

.as-app-bar-title {
    color: var(--as-white) !important;
}

.as-app-bar-badge {
    color: var(--as-white) !important;
    background-color: var(--as-red) !important;
    cursor: pointer;

    &.hide {
        display: none;
    }

}

.as-app-bar-icon {
    color: var(--as-white) !important;
}

.as-secondary-action {
    box-shadow: none !important;
    color: var(--as-steel-blue) !important;
    border: 1px solid var(--as-steel-blue) !important;
    border-radius: 1rem !important;
    text-transform: inherit !important;
    height: 2.25rem !important;
    min-width: 10.0rem !important;
    width: auto !important;
}

.customer-selected {
    background-color: var(--as-light-blue) !important;
}

.as-secondary-action.small {
    min-width: 8.50rem !important;
}

.as-secondary-action.wider {
    width: 12rem !important
}

.ahu-card-title {
    border-width: 1px;
    border-radius: 10px;
    color: #135890;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    margin-bottom: 0.5rem;
    font-size: 1vw;
}

.ahu-card-title-left {
    border-width: 1px;
    border-radius: 10px;
    color: #135890;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    margin-bottom: 0.5rem;
    font-size: 1vw;
}

.ahu-card-subtitle {
    color: #135890;
    text-align: left;
    padding-left: 0.5rem;
    line-height: 2;
    margin-bottom: 0.5rem;
    text-decoration: underline;
}

.ahu-table table tr {
    line-height: 1.8;
    border-bottom: 1px dotted #ccc;
}

.ahu-table table tr:last-child {
    border-bottom: none;
}

.ahu-table table tr td:nth-child(2) {
    color: #135890;
}

.ahu-table table tr td:nth-child(3) {
    color: #135890;
}

.as-popup-notification-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
}

.as-popup-notification-card.error {
    border-left: 0.35rem solid var(--mud-palette-error);
}

.as-popup-notification-card.warning {
    border-left: 0.35rem solid var(--mud-palette-warning);
}

.as-popup-notification-card.info {
    border-left: 0.35rem solid var(--mud-palette-info);
}

.as-popup-notification-card.success {
    border-left: 0.35rem solid var(--mud-palette-success);
}

.as-popup-notification-card.normal {
    border-left: 0.35rem solid var(--mud-palette-dark);
}

.as-notification-timestamp {
    font-style: italic;
    font-size: 80%;
    font-weight: 500;
    padding-top: 0.5rem;
}

.as-notification-ack.false {
    font-weight: bold;
}

.as-notification-ack.true {
    font-weight: normal;
}

.bypass-summary-card {
    width: 270px;
    height: 140px;
}

.mud-chart-line {
    width: 100% !important;
    height: 100% !important;
}

/*** end app bar styles ***/

/* start navigation menu styles */
.as-nav-menu {
    background-color: var(--as-steel-blue) !important;
    color: var(--as-white) !important;
    width: var(--as-left-nav-width) !important;
    padding: 1rem 0.25rem 0 0.25rem;
}

.as-nav-menu-icon {
    color: var(--as-white) !important;
}

.mud-nav-link {
    padding: 8px 2px 8px 2px;
}

.mud-nav-link.active {
    background: var(--as-white) !important;
    color: var(--as-steel-blue) !important;
    border-radius: 0.5rem;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 700 !important;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: none;
    color: var(--as-white) !important;
    border: none;
}

.mud-nav-link.active:hover:not(.mud-nav-link-disabled) {
    color: var(--as-steel-blue) !important;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--as-steel-blue) !important;
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--as-white) !important;
}

.nav-collapsed {
    width: 60px !important;
    transition: width 0.3s ease;
    overflow: hidden;
}

.nav-expanded {
    transition: width 0.3s ease;
}

.expand-button {
    transform: rotate(180deg);
    color: white;
}

/*** end navigation menu styles ***/

/* start dashboard styles */
.as-dashboard-row {
    height: 50%;
}

.as-dashboard-graph {
    height: var(--as-graph-height) !important;
}

.as-dashboard-metrics-bb {
    border-bottom: 1px solid rgb(0, 90, 144, 0.3) !important;
}

.as-dashboard-metric {
    font-weight: 700;

    &.label {
        font-size: 14px;
    }

    &.value {
        font-size: 20px;
    }

}

.as-dashboard-heading {
    font-size: 1.5rem;
    font-weight: 600 !important;
}

.as-backgroud-gray {
    background-color: var(--as-background);
}

.as-dealer-details-container {
    background-color: var(--as-white);
    border-radius: 0.5rem;
    padding: 1rem 0rem 0 1rem !important;
    min-height: 100%;
}

.as-hide {
    display: none;
}

.unmapped {
    /*background-color: lightcoral !important;
    opacity: 05;*/
}

.as-similar-customer-card {
    width: 100%;
    height: 125px;
    background-color: var(--as-white);
    border-radius: 0.5rem;
    border: 1px solid rgb(0, 90, 144, 0.3) !important;
    padding: 0.5rem;
    cursor: pointer;
}

.as-card {
    width: 100%;
    height: auto;
    background-color: var(--as-white);
    border-radius: 0.5rem;
    border: 1px solid rgb(0, 90, 144, 0.3) !important;
    padding: 0.5rem;

    >* .line-1 {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    >* .line-2 {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    &.sealing {
        height: 215px;
        font-size: 12px;

        &.RES {
            height: 245px;
        }

        &.COMM {
            height: 245px;
        }
    }


    >* .line-item-right {
        min-width: 85px;
        color: var(--as-steel-blue);
        background-color: var(--as-light-gray);
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

        &.Completed {
            color: var(--as-steel-blue);
            background-color: var(--as-complete);
        }

        &.PreSeal,
        &.Sealing,
        &.PostSeal {
            color: var(--as-steel-blue);
            background-color: var(--as-pending);
        }

    }
}

.status-chip {
    padding: 5px 10px;
    border-radius: 16px !important;
    width: 8rem !important;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    display: flex;

    >span {
        color: var(--as-steel-blue) !important;
    }

    &.new {
        background-color: var(--as-wo-status-new);
    }

    &.assigned {
        background-color: var(--as-wo-status-assigned);
    }

    &.claimed {
        background-color: var(--as-wo-status-claimed);

        >span {
            color: var(--as-white) !important;
        }

    }

    &.fulfilled {
        background-color: var(--as-wo-status-fulfilled);

        >span {
            color: var(--as-dark-blue) !important;
        }

    }

    &.scheduled {
        background-color: var(--as-wo-sub-status-scheduled);
        > span
        {
            color: var(--as-white) !important;
        }
    }

    &.tentative {
        background-color: var(--as-wo-sub-status-tentative);
    }

    &.timeblock {
        background-color: var(--as-wo-sub-status-timeblock);
    }

    &.reschedule {
        background-color: var(--as-wo-sub-status-reschedule);
        > span
        {
            color: var(--as-white) !important;
        }
    }

    &.nextcall {
        background-color: var(--as-wo-sub-status-nextcall);
        > span
        {
            color: var(--as-white) !important;
        }
    }

    &.default {
        background-color: var(--as-background);
        color: var(--as-gray);
    }
}

    /*ScheduledSubStatus colors*/

/* For the select input background */
.mud-select.sub-status-scheduled {
    background-color: #008CD1 !important;
    
}

    .mud-select.sub-status-scheduled > div.mud-select .mud-select-input .mud-input-slot {
        color: var(--as-white) !important;
    }

.mud-select.sub-status-tentative {
    background-color: #FFDBA4 !important;
}

.mud-select.sub-status-timeblock {
    background-color: #FDA3A3 !important;
}
.mud-select.sub-status-reschedule {
    background-color: #FFCC00BF !important;
}
.mud-select.sub-status-nextcall {
    background-color: #C9E0F4 !important;
}

/* For dropdown items */
.mud-list-item.sub-status-scheduled {
    background-color: #008CD1 !important;
    color: white !important;
}

.mud-list-item.sub-status-tentative {
    background-color: #FFDBA4 !important;
}

.mud-list-item.sub-status-timeblock {
    background-color: #FDA3A3 !important;
}
.mud-list-item.sub-status-reschedule {
    background-color: #FFCC00BF !important;
}
.mud-list-item.sub-status-nextcall {
    background-color: #C9E0F4 !important;
}

.as-text-nowrap {
    font-size: 14px;
    white-space: nowrap;
}

.as-bypasstabs .mud-chip {
    border: 1px solid;
    border-radius: 4px;
}

.as-config-card {
    border: 1px solid var(--as-blue);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.as-optim-tech-label {
    opacity: 0.9;
    font-weight: 400;
    color: var(--as-success-green);
}

.as-warning-alert {
    color: var(--as-orange);
}

.as-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease-in-out;
    z-index: 1100;
}


.as-popup-box {
    background-color: white;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    border-radius: 0.3125rem;
    text-align: center;
    max-width: 25rem;
    position: relative;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
}

.as-mud-chip-margin .mud-chip {
    margin: 4px 4px 4px 0 !important;
}

.as-label {
    opacity: 0.9;
    font-weight: 400;

    &.lg {
        font-size: 14px;
    }

    &.sm {
        font-size: 12px;
    }

    &.xs {
        font-size: 10px;
    }

}

.as-description {
    color: var(--as-steel-blue);
    font-weight: 700 !important;

    &.f-500 {
        font-weight: 500 !important;
    }

    &.xl {
        font-size: 16px;
    }

    &.lg {
        font-size: 14px;
    }

    &.sm {
        font-size: 12px;
    }

    &.xs {
        font-size: 10px;
    }

}

.mud-tooltip-root {
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.as-dot-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--as-steel-blue);
}

.as-divider {
    height: 60%;
    width: 0px;
    float: left;
    border: 1px inset var(--as-steel-blue);
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    opacity: 0.5;
}

.as-divider-2 {
    align-self: stretch;
    width: 0;
    border-left: 1px solid var(--as-steel-blue);
    margin: 0 0.25rem;
    opacity: 0.5;
}

.as-hr-divider {
    >* {
        margin: 0.25rem 0 !important;
    }

}

.as-action {
    font-size: 0.875rem;
    color: var(--as-blue);
    text-decoration: underline;
    cursor: pointer;
}

.as-small-text {
    font-size: 0.8rem;
    font-weight: 300;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--as-steel-blue);
}

.as-card-border {
    border-bottom: 1px solid rgb(0, 90, 144, 0.2) !important;
    width: 100%;
}

.as-wo-card-border {
    border-bottom: 1px solid rgb(0, 90, 144, 0.2) !important;
}

.as-centurion-image {
    cursor: pointer;
    width: var(--as-graph-height);
    border-radius: 0.5rem;

    &.zoom {
        position: fixed;
        width: 600px;
        height: 600px;
        left: 20%;
        top: 20%;
        z-index: 99;
        background-color: var(--as-white);
        border: 1px solid var(--as-steel-blue-rgb-25);
        transition: transform .2s;
    }

}

/*** end dashboard styles ***/
/* start search bar styles */

.daterangepicker[b-x77lgbiy4z] {
    font-family: 'Poppins', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' !important;
}

.as-search-bar-background {
    background-color: var(--as-white) !important;
}

.as-date-range-picker {
    width: 100%;
    height: 40px;
    border: 1px solid #c4c4c4;
    border-radius: 0.25rem;
    padding-inline-start: 14px;
    color: var(--as-steel-blue) !important;
}

.mud-input>input.mud-input-root,
div.mud-input-slot.mud-input-root {
    color: var(--as-steel-blue) !important;
}

.mud-disabled>input.mud-input-slot,
.mud-disabled>div.mud-input-slot.mud-input-root {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

.as-product-type {
    font-size: 14px !important;
    height: 40px;

    &.active {
        background-color: var(--as-steel-blue) !important;
        color: var(--as-white) !important;

        .mud-button-label {
            color: var(--as-white) !important;
        }

    }
}

.as-underline {
    text-decoration: underline;
}

.as-italics {
    font-style: italic;
    font-size: 11px;
    font-weight: 600;
}

.as-name-bold {
    font-weight: 550;
    font-size: 0.9rem;
}

.as-border-bold {
    border-bottom: 2px solid var(--as-steel-blue);
    opacity: 0.8;
    width: 100%;
}

.as-border-small {
    border-bottom: 1px solid var(--as-steel-blue);
    opacity: 0.5;
    width: 100%;
}

.as-leakage-result-table {
    border: 1px solid var(--as-steel-blue-rgb-25);
    border-radius: 0.25rem;
}

.as-pagination {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
}

.as-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal.no-scroll {
    overflow-y: hidden;
}

.as-wo-th-wo-id {
    left: 0px;
    z-index: 4 !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

.as-wo-th-actions {
    right: 0;
    z-index: 4 !important;
    min-width: 125px !important;
    max-width: 125px !important;
}

.as-wo-wo-id {
    position: sticky;
    left: 0px;
    z-index: 3 !important;
    min-width: 100px !important;
    max-width: 100px !important;
    background-color: var(--ds-muted);
}

.as-wo-status {
    min-width: 150px !important;
    max-width: 150px !important;
}


.as-wo-status.sticky-status {
    position: sticky;
    left: 100px;
    z-index: 3 !important;
    background-color: var(--ds-muted);
}

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.as-wo-customer {
    min-width: 175px !important;
    max-width: 175px !important;
}

.as-wo-customer.sticky-customer {
    position: sticky;
    left: 250px;
    z-index: 3 !important;
    background-color: var(--ds-muted);
}

.as-wo-dealer {
    min-width: 250px !important;
    max-width: 250px !important;
}

.as-wo-address {
    min-width: 350px !important;
    max-width: 350px !important;
}

.as-wo-email {
    min-width: 250px !important;
    max-width: 250px !important;
}

.as-wo-dates {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.as-wo-actions {
    position: sticky;
    right: 0;
    z-index: 3 !important;
    min-width: 160px !important;
    max-width: 160px !important;
    background-color: var(--ds-muted);
}

.as-border-bottom {
    border-bottom: 1px solid var(--as-steel-blue-rgb-25);
    width: 100%;
}

.as-border-top {
    border-top: 1px solid var(--as-steel-blue-rgb-25);
    width: 100%;
}

.as-border-top-w {
    border-top: 1px solid var(--as-white-rgb-25) !important;
    width: 100%;
}

.text-center {
    text-align: center;
}

.mud-expand-panel .mud-expand-panel-header {
    padding: 8px;
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 8px 16px;
}

.mud-table-dense .mud-table-row .mud-table-cell {
    padding: 6px 8px !important;
    padding-inline-start: 8px !important;
    padding-inline-end: 8px !important;
}

.mud-pagination-item>* {
    color: var(--as-steel-blue);
}

.mud-button {
    text-transform: none !important;
}

/*** end search bar styles ***/
/* start seal anomaly dashboard styles */

.highlighted-row {
    background-color: #e6f3fa !important;
}

.as-dashboard-header-cell {
    font-size: clamp(0.55rem, 0.65vw + 0.45rem, 0.85rem);
    line-height: 1.1;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 1600px) {
    .as-dashboard-header-cell {
        font-size: 0.70rem;
        white-space: normal;
    }
}

@media (max-width: 400px) {
    .as-dashboard-header-cell {
        font-size: 0.6rem;
        white-space: normal;
    }
}

/*** end seal anomaly dashboard styles ***/
/* start energy estimation project styles */

.as-energy-heading {
    font-size: 25px;
    font-weight: 700;
}

.as-pricing-card {
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid rgb(0, 90, 144, 0.2);
}

.as-project-height {
    height: calc(100vh - 461px);
}

.as-schedule-card {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(0, 90, 144, 0.2);
}

.as-schedule-heading {
    text-decoration: underline;
    font-style: italic;
}

.as-text-field-small {
    width: 50px !important;
}

.as-bold-underline {
    font-weight: bold;
    text-decoration: underline;
}

.as-ahu-card {
    padding: 5px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgb(0, 90, 144, 0.2);
}

.as-ahu-popup-border {
    border: 1px solid rgb(0, 90, 144, 0.2);
    border-radius: 8px;
}

.as-no-transform {
    text-transform: none !important;
}

.as-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.5rem;

    &.heating {
        background-color: var(--as-sky-blue);
    }

    &.cooling {
        background-color: var(--as-orange);
    }

    &.fan-energy {
        background-color: var(--as-light-gray);
    }

    &.peak-demand {
        background-color: var(--as-green);
    }

}

.as-rounded-summary {
    border: 1px solid var(--as-steel-blue);
    border-radius: 999px;
    max-width: 600px;
}


.as-energy-dashboard-header {
    background-color: var(--as-light-gray) !important;
}


.mud-table-root .mud-table-head .mud-table-cell.as-energy-header {
    color: var(--as-steel-blue) !important;
    font-weight: 600 !important;
    background-color: var(--as-light-gray) !important;
}

.mud-table-root .mud-table-body .mud-table-cell.as-energy-content {
    color: var(--as-steel-blue) !important;
    vertical-align: top !important;
}

.as-table-height {
    height: calc(100vh - 240.5px);
}

.as-status-radio .mud-radio>.mud-radio-content {
    color: var(--as-steel-blue) !important;
}

.as-energy-scope-textfield textarea.mud-input-root-outlined.mud-input-root-margin-dense {
    margin-top: 25.5px !important;
}

.pac-container:after {
    content: none !important;
}

/*** end energy estimation project styles***/

/**start edit seal job details styles **/

.as-active-tab {
    font-weight: 600;
    border: solid 1px;
    border-radius: 30px;
}

.as-leakage-height {
    height: calc(100vh - 191px);
}

.as-leakage .mud-tab-slider.mud-tab-slider-horizontal {
    height: 0px !important;
}

/**end edit seal job details styles **/
/* start common styles */
.as-main-container {
    height: calc(100vh - var(--as-appbar-height));
}

.as-progress-indicator {
    position: absolute;
    height: 56px;
    width: max-content;
    z-index: 99999;
    background-color: var(--as-steel-blue) !important;
    border: var(--as-steel-blue) !important;
    border-radius: 0.5rem;
    opacity: 1.0 !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


.as-scrollbar {
    overflow: auto;
}

.as-vertical-scrollbar {
    overflow-y: auto;
}

.as-scrollbar::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--as-light-gray);
}

.as-scrollbar::-webkit-scrollbar-thumb {
    background: var(--as-gray);
}

.mud-paper {
    color: var(--as-steel-blue) !important;
}

.offcanvas-body {
    padding: 0rem !important;
}

.as-workorders-heading {
    font-size: 1rem;
    color: var(--as-dark-blue);
    padding: 0.5rem;
}

.inherit-fonts * {
    font-family: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.as-work-order-table * tr>th {
    border: 1px solid var(--as-steel-blue-rgb-25);
    background-color: var(--as-steel-blue) !important;

    >.mud-primary-text,
    >* .mud-icon-button {
        font-weight: 600 !important;
        color: var(--as-white) !important;
    }

}

.work-order-row-custom * {
    color: var(--as-steel-blue) !important;
}

.as-popover {
    width: 70% !important;

    &.search {
        height: 100% !important;
        width: 30% !important;
        background-clip: unset;
    }

    &.graph {
        height: 100% !important;
        width: 60% !important;
        background-clip: unset;
    }

    &.sealing-details {
        height: 100% !important;
        width: 40% !important;
        background-clip: unset;
    }

    &.edit {
        height: 100% !important;
        width: 30% !important;
        background-clip: unset;
    }

    &.notifications {
        top: var(--as-appbar-height) !important;
        height: 60% !important;
        width: 30% !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        left: inherit;
    }

    &.work-order-details {
        height: 100% !important;
        width: 50% !important;
        background-clip: unset;
    }

    &.work-order-seal-details {
        height: 100% !important;
        width: 55% !important;
        background-clip: unset;
    }

}

.as-popover-heading {
    font-size: 1.5rem;
    font-weight: 500;
}

.as-mud-dialog {
    max-width: 800px !important;
    height: 700px !important;
}

.as-seal-graph {
    width: 100%;
    height: 60%;
}

.work-order-container {
    width: 175mm !important;
}

.as-icon-clear {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--as-steel-blue) !important;
    width: 24px;
    height: 24px;
    border: 1px solid var(--as-steel-blue);
    border-radius: 50%;
    cursor: pointer;

    &.empty {
        border: none;
    }

}

.as-result-table-bottom {
    font-weight: 700;
    color: var(--as-white);
    background-color: var(--as-improvement);
    border-radius: 0 0 0.5rem 0.5rem;
    padding-top: 0.5rem;
}

iframe {
    width: 100%;
    height: 99%;
    border: none;
}


.mud-nav-link .mud-nav-link-expand-icon {
    color: var(--as-white) !important;
}

.as-activation-code {
    background-color: rgba(0, 140, 209, 0.2);
    border: 1px solid var(--as-blue);
}

/*** end common styles ***/

/*** Date Rage Picker ***/
.as-date-range-picker-popover {
    pointer-events: auto;
    z-index: 1300; /* above app bar/side nav if needed */
    border: 1px solid var(--as-steel-blue-rgb-25) !important;
}

/* Optional: strengthen hover/selected visuals inside this popover */
.as-date-range-picker-popover .mud-list .mud-list-item:hover {
    background-color: var(--as-steel-blue) !important; /* or any */
    color: var(--as-white) !important;
}

.as-date-range-picker-popover .mud-list .mud-list-item.mud-selected-item {
    background-color: var(--as-steel-blue) !important; /* or any */
    color: var(--as-white) !important;
}

.as-date-range-picker-popover .mud-paper{
    border-right: 1px solid var(--as-steel-blue-rgb-25) !important;
    border-bottom: 1px solid var(--as-steel-blue-rgb-25) !important;
}
.as-date-range-picker-popover .mud-day {
    color: var(--as-steel-blue) !important;
}

.as-date-range-picker-popover .mud-day.mud-selected {
    color: var(--as-white) !important;
}

.as-date-range-picker-popover .mud-icon-button:disabled {
    color: var(--mud-palette-action-disabled) !important;
    background-color: rgba(0, 0, 0, 0);
}

.as-search-bar {
    &.text {
        min-width: 300px;
        max-width: 300px;
    }
    &.date-range {
        min-width: 250px;
        /*max-width: 250px;*/
    }
}
/*** end Date Rage Picker ***/
@media screen and (min-width: 1000px) and (max-width: 1250px) {
    .as-description, .as-label {
        font-size: 9pt;
    }

    .as-popover {
        width: 75% !important;

        &.notifications {
            height: 75% !important;
            width: 50% !important;
        }

        &.work-order-details {
            width: 65% !important;
        }

        &.work-order-seal-details {
            width: 70% !important;
        }

    }
}

@media screen and (min-width: 600px) and (max-width: 850px) {
    .as-card {
        >* .line-1 {
            font-size: 12px;
        }

        >* .line-2 {
            font-size: 10px;
        }

    }

    .as-label {
        font-size: 12px;
        opacity: 0.8;
        font-weight: 400;
    }

    .as-action {
        font-size: 11px;
    }

}