body {
    margin: 0;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /*padding: 0 16px;*/
}

div.new_ctrl {
    height: 50px;
}

div.new_head {
    min-height: 52px;
    /*height: 102px;*/ /* In case we have to show tabs we need to have taller head section*/
    min-width: 820px; /*To ensure that the right side menu doesn't slide below the branding */
    border-bottom: 1px solid #e6e6e6;
    font-family: Lato, arial,sans-serif;
    font-size: 1.8em;
    color: #2B2C2B;
    background-color: white;
    z-index: 200;
}

    div.new_head > div {
        float: left;
    }

    div.new_head .image_button_parent {
        margin: 0 3px;
        position: relative;
        /*        width: 34px;
        height: 34px;
        text-align:center;
*/
    }


div.org {
    flex: 1 1 auto;
}

div.page_top_controls {
    /*width: 100%;*/ /*Setting width causes horizontal scroll bar on the page*/
    min-height: 35px;
    position: relative;
}

    div.page_top_controls div.control-header {
        padding-top: 5px;
        padding-right: 5px;
    }

div.new_head div.branding {
    display: block;
    /*    width: 555px;
    max-width: 555px; */
    padding: 5px 0;
    margin-left: 5px;
}

    div.new_head div.branding img {
        position: relative;
        max-height: 36px;
        height: 36px;
        padding: 0 10px 0 5px;
        z-index: 1;
        border-right: 1px solid #e6e6e6;
    }

    div.new_head div.branding img, div.new_head div.branding div.page_titles {
        vertical-align: middle;
        display: inline-block;
    }

div.page_titles span.small {
    color: #9e9795;
    font-size: .6em;
}

div.new_head div.section_right {
    padding: 5px 0;
    float: right;
    font-size: .6em;
    margin-top: 5px; /* to bring the entire div in the middle of the top white bar */
}

    div.new_head div.section_right a {
        text-decoration: none;
    }

    div.new_head div.section_right div.externalLink a span {
        font-size: 16px !important;
    }

    div.new_head div.section_right div.externalLink a img {
        padding-left: 0px;
    }

    div.new_head div.section_right > div {
        float: left;
        padding: 0 5px;
    }

    div.new_head div.section_right img, div.new_head div.section_right input[type=image],
    div.new_head div.section_right a img, div.new_head div.section_right a input[type=image] {
        width: 24px;
    }

    div.new_head div.section_right img, div.new_head div.section_right a, div.new_head div.section_right input[type=image] {
        padding: 5px;
        cursor: pointer;
    }

div.new_head div.image_button_parent a {
    display: inline-block;
    border: 0.5px solid #E2E2E1;
    border-radius: 4px;
    padding: 0 5px 0 0;
}

    div.new_head div.image_button_parent a.day {
        background: #fff;
        filter: brightness(100%) !important;
    }

    div.new_head div.image_button_parent a.night {
        background-color: #f3f6f9;
    }

/* We can't use :disabled for the button because that will prevent sending the postback request. We might want to try making it a CSS class temporarily */
div.new_head div.section_right input[type=image].disabled {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    content: 'updating...';
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: not-allowed;
    transition: background-color 0.5s ease;
}

div.new_head div.section_right a span {
    font-size: 16px !important;
    color: #2B2C2B;
}

div.new_head div.section_right div a img, div.new_head div.section_right div a span,
div.new_head div.section_right div img, div.new_head div.section_right div span {
    vertical-align: middle;
}

div.new_head div.links {
}

div.new_head div.widgets {
}


/*Profile and Profile Display*/

div.new_head div.profile {
    position: relative;
    /*border-right: 1px solid #e6e6e6;*/
}

    div.new_head div.profile div.profile_top {
        display: inline-block;
        padding: 0 10px;
    }

div.profile div.profile_top > span {
    cursor: pointer;
    font-size: 16px !important;
}

div.new_head div.profile:hover div.profile_top {
    display: inline-block;
    border-radius: 4px;
    background: var(--light-background-paper, #FFF);
    /* Elevation/8 */
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 5px 5px -3px rgba(0, 0, 0, 0.20);
}

div.new_head div.profile div.profile_details {
    border-radius: 4px;
    background: var(--light-background-paper, #FFF);
    /* Elevation/8 */
    box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 5px 5px -3px rgba(0, 0, 0, 0.20);
    display: none;
    position: absolute;
    top: 33px;
    right: 0px;
    padding-top: 8px;
    width: 200px;
}

    /*div.profile:hover div.profile_details {*/
    /*inline-grid allows the separator borders to display within the menu div
        Probably, by allowing "align-self: stretch" to work correctly for child elements
        */
    /*display: inline-grid;
    }*/


    /*Menu in Profile*/
    div.new_head div.profile div.profile_details > div {
        display: flex;
    }

        div.new_head div.profile div.profile_details > div span, div.profile div.profile_details > div a {
            font-size: 1.2em;
            padding: 5px 0;
            color: #2B2C2B;
            width: 100%;
        }

            div.new_head div.profile div.profile_details > div span.small {
                font-size: 1em;
            }

        div.new_head div.profile div.profile_details > div img {
            padding-right: 12px;
            cursor: default;
        }

        div.new_head div.profile div.profile_details > div a img {
            padding-right: 12px;
            cursor: pointer;
        }


    div.new_head div.profile div.profile_details div.profile_item {
        padding: 4px 10px;
        align-items: center;
        align-self: stretch;
    }

    div.new_head div.profile div.profile_details div.profile_head {
        display: flex;
        padding: 4px 10px;
        align-items: center;
        align-self: stretch;
        border-bottom: 1px solid #e6e6e6;
        cursor: default;
    }

        div.new_head div.profile div.profile_details div.profile_head div {
            padding: 0 !important;
        }

    div.new_head div.profile div.profile_details > div:not(.profile_head):hover {
        background: #e6e6e6;
    }

    div.new_head div.profile div.profile_details div.profile_foot {
        padding: 4px 10px;
        align-items: flex-start;
        align-self: stretch;
        border-top: 1px solid #e6e6e6;
    }


/* Display CSS differently for display summary */
div.displaySummaryDw {
    /* flow-root works same as inline-block but takes up availabe width so we don't have to specify width for this div*/
    display: flow-root;
    /*Make sure the padding on left and right is always 0. 
        Since the width is 100% of the page, adding padding or margin to right or left 
        will cause the width to grow more than 100% of page and 
        hence we will see a horizontal scroll bar on the page */
    padding: 3px 10px;
    /*background-color: #D9DAFC;*/ /*Maybe use this color for SRIS implementation */
    clear: both;
}

    div.displaySummaryDw fieldset {
        float: left;
        margin: 1px 5px 0 12px;
        border: 1px solid #e6e6e6;
        /*width: 200px;*/
        padding: 3px;
        border-radius: 4px;
        /*font-size: .7em;*/
        font-family: Lato, arial,sans-serif;
        background-color: #fff;
        color: var(--light-text-secondary, #4F515C);
        /* Components/Input Label */
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 100% */
        letter-spacing: 0.15px;
    }

        div.displaySummaryDw fieldset legend {
            margin-left: 10px;
        }

    div.displaySummaryDw div, div.displaySummaryDw fieldset {
        vertical-align: middle;
    }

    div.displaySummaryDw div {
        float: left;
        margin: 7px 5px 0 5px;
        color: var(--light-text-secondary, #4F515C);
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 100% */
        letter-spacing: 0.15px;
    }

        div.displaySummaryDw div:not(.pir):not(.pull_right) {
            border: 1px solid #e6e6e6;
            height: 25px;
            padding: 6px 12px 5px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-family: Lato, arial,sans-serif;
        }

        div.displaySummaryDw div.pir span.title {
            position: absolute;
        }

        div.displaySummaryDw div.pir span.small {
            font-size: 12px;
        }

        div.displaySummaryDw div.pir a {
            text-decoration: none;
            font-size: 16px;
            margin-top: 16px;
            display: inline-block;
            color: inherit;
        }

            div.displaySummaryDw div.pir a img {
                zoom: .8;
            }

            div.displaySummaryDw div.pir a img,
            div.displaySummaryDw div.pir a span {
                display: inline-block;
                vertical-align: middle;
            }

    div.displaySummaryDw > div > label, div.displaySummaryDw > div > span {
        vertical-align: middle;
        font-size: 13px;
        font-family: Lato, arial,sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 138.462% */
        letter-spacing: 0.16px;
    }

    div.displaySummaryDw div.stationStatus {
        background-color: #fff;
    }

    div.displaySummaryDw div.stationOpen {
        background: rgba(34, 201, 147, 0.10);
    }

    div.displaySummaryDw fieldset select {
        border: 1px solid #fff;
        width: 100%;
        padding: 3px 8px;
        font-size: 13px;
        font-family: Lato, arial,sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 138.462% */
        letter-spacing: 0.16px;
    }

        div.displaySummaryDw fieldset select:hover {
            border: 1px solid #e6e6e6;
        }

    /* Toggle button */
    /* The switch - the box around the slider */
    div.displaySummaryDw .switch,
    div.displaySummarySris .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 24px;
        margin: 0px;
        padding: 0px;
    }

        /* Hide default HTML checkbox */
        div.displaySummaryDw .switch input,
        div.displaySummarySris .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    /* The slider */
    div.displaySummaryDw .slider,
    div.displaySummarySris .slider {
        position: absolute;
        cursor: pointer;
        padding: 0px;
        margin: 0px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        div.displaySummaryDw .slider:before,
        div.displaySummarySris .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    div.displaySummaryDw input:checked + .slider,
    div.displaySummarySris input:checked + .slider {
        background-color: #22C993;
    }

    div.displaySummaryDw input:focus + .slider,
    div.displaySummarySris input:focus + .slider {
        box-shadow: 0 0 1px #22C993;
    }

    div.displaySummaryDw input:checked + .slider:before,
    div.displaySummarySris input:checked + .slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }

    /* Rounded sliders */
    div.displaySummaryDw .slider.round,
    div.displaySummarySris .slider.round {
        border-radius: 26px;
    }

        div.displaySummaryDw .slider.round:before,
        div.displaySummarySris .slider.round:before {
            border-radius: 50%;
        }

    div.displaySummaryDw div.pull_right {
        float: right;
        display: inline-block;
        margin-right: 25px;
    }

        div.displaySummaryDw div.pull_right a {
            color: var(--light-text-secondary, #4F515C);
            /* Components/Button Medium */
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px; /* 171.429% */
            letter-spacing: 0.4px;
            text-transform: capitalize;
            text-decoration: none;
            padding: 6px 16px;
            background: #fff;
            margin-left: 10px;
        }

        div.displaySummaryDw div.pull_right input, div.displaySummaryDw div.pull_right a {
            float: left;
        }

    div.displaySummaryDw input.requestTruckButton, tr .InspectVehicle {
        /*Typography*/
        color: var(--light-primary-contrast, #FFF);
        font-style: normal;
        font-weight: 700;
        font-size:14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: 0.4px;
        /* Layout */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 32px; /* So we can have extra space between the icon and text*/
        padding-right: 16px;
        /* Elevation/2 */
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
        background: url('../Images/inspect_white.png') left 5px top 7px no-repeat var(--light-primary-main, #0099EF);
        border-radius: 4px;
        text-decoration: none;
    }

        div.displaySummaryDw input.requestTruckButton:hover, tr .InspectVehicle:hover {
            background: url('../Images/inspect_white.png') left 5px top 7px no-repeat var(--light-primary-main, #007be5);
            cursor: pointer;
        }

tr .InspectVehicle {
    margin-bottom: 3px;
}

div.displaySummaryDw input.truckRequestedButton {
    /*Typography*/
    color: var(--grey-5, #898D8C);
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 171.429% */
    letter-spacing: 0.4px;
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 32px; /* So we can have extra space between the icon and text*/
    padding-right: 16px;
    /* Elevation/2 */
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
    background: url('../Images/inspect_doc_gray.png') left 5px top 7px no-repeat var(--light-grey, #E1E1E2);
    border-radius: 4px;
}


/* ---- Display Summary SRIS ---------*/

div.displaySummarySris {
    /* flow-root works same as inline-block but takes up availabe width so we don't have to specify width for this div*/
    display: flow-root;
    /*Make sure the padding on left and right is always 0. 
        Since the width is 100% of the page, adding padding or margin to right or left 
        will cause the width to grow more than 100% of page and 
        hence we will see a horizontal scroll bar on the page */
    padding: 3px 10px;
    color: #76716e;
    background-color: #D9DAFC;
    clear: left;
    margin-bottom: -5px; /* to prevent a brown line showing between displaySummary and the table header */
}

    div.displaySummarySris div {
        border-radius: 4px;
    }

    div.displaySummarySris > div.pair {
        border: 1px solid #666 !important;
    }

    div.displaySummarySris > div.single {
        border-right: 1px solid #fff;
        margin-right: 10px !important;
        border-radius: 0;
    }

    div.displaySummarySris > div.toplevel {
        float: left;
        margin: 2px;
        font-size: 12px;
        font-family: Lato, arial,sans-serif;
        /*background-color: #fff;*/
        /*color: var(--light-text-secondary, #4F515C);*/
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 100% */
        letter-spacing: 0.15px;
    }

    div.displaySummarySris div.toplevel div.sliderSwitch {
        background-color: #fff;
        padding: 3px 5px;
    }

    div.displaySummarySris div label, div.displaySummarySris div span, div.displaySummarySris div.toplevel div {
        vertical-align: middle;
        font-size: 11px;
        font-family: Lato, arial,sans-serif;
        font-style: normal;
        font-weight: 400;
        display: inline-block;
    }

    div.displaySummarySris div label, div.displaySummarySris div span {
        line-height: 18px; /* 138.462% */
        letter-spacing: 0.16px;
        margin: 3px;
        padding: 5px;
        color: black;
        cursor: default;
    }

        div.displaySummarySris div span.on {
            /*background-color: #B9FAC2;*/ /* Light green */
            border: 1px solid #333;
            text-align: center;
            min-width: 40px;
            border-radius: 4px;
            color: #155724;
            background-color: #B9FAC2;
            /*border: solid 1px #c3e6cb;*/
        }

        div.displaySummarySris div span.off {
            /*background-color: #FAB9C2;*/ /* Light red */
            border: 1px solid #333;
            text-align: center;
            min-width: 45px;
            border-radius: 4px;
            color: #721c24;
            background-color: #FAB9C2;
            /*border: solid 1px #f5c6cb;*/
        }

        div.displaySummarySris div span.half_on {
            /*background-color: #F7F19B;*/ /* Light yellow */
            border: 1px solid #333;
            text-align: center;
            min-width: 40px;
            border-radius: 4px;
            color: #856404;
            background-color: #F7F19B;
            /*border: solid 1px #ffeeba;*/
        }

        div.displaySummarySris div span.link {
            cursor: pointer;
            color: blue;
        }

        div.displaySummarySris div span.nolink {
            cursor: default;
            color: black;
        }


div.new_head .controls {
    font-size: 10px;
}

/*
    Live Summary Table
*/
table.summary tr {
}

    table.summary tr.pullin_vehicle {
        border: 1px solid var(--text-red, #CD2649);
    }

/*Following code is for Tabs*/
div.tabs_menu {
    width: 100%;
    background: white;
    border-top: 1px solid #e6e6e6;
}

    div.tabs_menu ul li {
        float: left;
        font-size: 10pt;
        padding: 0 5px;
        display: flex;
        padding: 9px 16px;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

        div.tabs_menu ul li a {
            color: var(--light-text-secondary, #4F515C);
            text-decoration: none;
            letter-spacing: 0.4px;
            text-transform: capitalize;
        }

        div.tabs_menu ul li:hover a {
            color: var(--light-primary-main, #0099EF);
        }

        div.tabs_menu ul li:hover {
            border-bottom: solid 1px var(--light-primary-main, #0099EF);
        }