.search_box {
        margin: 0px 5px 5px 5px;
    }

    .invalid_input {
        background-color: #EEC6C6;
        color: darkred;
    }

    .id_data_selector {
    }

    .id_store_item1 {
    }

    .id_store_item2 {
    }

    table tr td {
        /* border: 1px solid #C4C4C4; */
    }

    div {
        /* border: 1px solid red; */
    }

    .backcolor_light_red {
        background-color: #EEC6C6;
    }

    .backcolor_light_green {
        background-color: #A3E4BE;
    }

    .date_range_modal {
        width: 360px;
        height: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -180px;
        margin-top: -120px;
        box-shadow: 10px 10px 20px gray;
        background-color: white;
        z-index: 1001;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
        display: none;
    }

    .date_range_modal .form-control {
        width: 180px;
    }

    .modal_box1 {
        width: 800px;
        height: 900px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -400px;
        margin-top: -450px;
        box-shadow: 10px 10px 20px gray;
        background-color: white;
        z-index: 1000;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        display: none;
    }

    .panel_block {
        position: absolute;
        top: 0;
        left: 0;
        width: 5000px;
        height: 5000px;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
    }

    .progress_bar {
        width: 500px;
        height: 100px;
        position: absolute;
        top: 40%;
        left: 35%;
        /* margin-top: -100px;
        margin-left: -175px; */
        box-shadow: 3px 3px 3px darkgray;
        background-color: rgb(196, 255, 245);
        z-index: 1000;
        padding: 50px;
        text-align: center;
        border-radius: 5px;
    }

    .command_button {
        /* border: 1px solid black; */
        padding: 5px 10px;
        text-shadow: 1px 1px 2px gray;
    }

    .command_button_store_dropdown {
        /* border: 1px solid black; */
        padding: 5px 10px;
        text-shadow: 1px 1px 2px gray;
    }

    .box_shadow {
        box-shadow: 1px 1px 2px gray;
    }

    .side_toolbar .command_button {
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
        width: 95%;
        white-space: normal;
        min-width: 150px;
    }

    .value_box_title {
        font-family: "Play";
        width: 120px;
        height: 20px;
        border: 1px solid rgb(200, 200, 200);
        background-color: rgb(240, 240, 240);
        /* padding: 1px; */
        /* font-weight: bold; */
        margin: auto;
        /* display:inline-block; */
    }

    .value_box {
        font-family: "Play";
        width: 120px;
        height: 20px;
        border: 1px solid rgb(200, 200, 200);
        padding: 0px;
        margin: auto;
        margin-top: -1px;
        margin-bottom: 10px;
        /* margin: 0px 10px; */
        /* display:inline-block; */
    }

    .command_button.active {
        text-decoration: underline;
        /* font-weight: bold; */
        /* opacity:1.5; */
        /* filter: brightness(1.5); */
        /* border: 1px solid white; */
        /* background-color: white; */
        /* color: black; */
    }

    body {
        /* font-family: "Calibri"; */
        /* font-family: 'Fontin-Sans', serif; */
        /* font-family: Futura, "Trebuchet MS", Arial, sans-serif; */
        /* font-family: 'Saira', sans-serif; */
        font-family: "Play", "Trebuchet MS", Helvetica, sans-serif;
        font-size: 9pt;
        margin: 0;
        -webkit-text-size-adjust: none;
    }

    * {
        -webkit-text-size-adjust: none;
    }

    a:link,
    a:visited {
        /* text-decoration: none; */
    }

    .id_date_shortcut {
        /* height : 40px; */
    }

    button[id$="DateRange"] {
        cursor: pointer;
        min-width: 160px;
    }

    .main_section {
        /*position: absolute;
            vertical-align: top;
            font-family: 'Play';
            font-size: 10px;
            visibility: hidden;
            width: 98%;
            margin: 0px 5px 5px 5px;
            align-items: center;
            align-content: center;
            align-self: center;
            display: float;*/
        display: none;
        padding: 10px;
    }

    .main_section.visible {
        display: block !important;
    }

    .main_section_title {
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 5px;
        width: auto;
        background-color: rgba(73, 88, 173, 1);
        color: white;
        padding: 5px;
        text-align: center;
        display: none;
        /* font-weight: bold; */
        /* border-top-left-radius: 5px; */
        /* border-top-right-radius: 5px; */
        /* display: none; */
    }

    /* DATA PANEL ************************************************************************************/

    .data_panel_visible {
        width: 100%;
        /* max-width: 500px; */
        vertical-align: middle;
        margin: auto;
        background-color: white;
        padding: 0px 0px;
        box-shadow: 2px 2px 5px #888888;
        border-radius: 3px;
        /* border: 1px solid black; */
    }

    .data_panel {
        width: 100%;
        /* max-width: 500px; */
        margin: auto;
        background-color: white;
        padding: 0px 10px;
        box-shadow: 2px 2px 5px #888888;
        border-radius: 3px;
        display: none;
        /* display: table; */
        /* vertical-align: top; */
        /* border: 1px solid black; */
    }

    data_panel_div {
        /* overflow: scroll; */
    }

    .data_panel_title {
        font-family: "Play", "Trebuchet MS", "Helvetica";
        font-weight: Bold;
        font-size: 12pt;
        /* text-shadow: 1px 1px 3px gray; */
        text-align: center;
        /* text-transform: uppercase; */
        background-color: white;
        color: #3A5DA7;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    .data_panel_chart {
        padding: 10px 10px;
        margin: auto;
    }

    /* .data_table {
        border: 1px solid #C4C4C4;
    } */

    .data_panel_table {
        font-family: "Play", "Trebuchet MS", Helvetica, sans-serif;
        table-layout: auto;
        padding: 10px 10px;
        margin: auto;
        vertical-align: top;
        overflow: hidden;
    }

        .data_panel_table table {
            width: 100%;
        }

        .data_panel_table th {
            text-align: center;
            background-color: #3A5DA7;
            padding: 2px 7px;
            margin: 1px;
            color: white;
            /* white-space: nowrap; */
        }

        .data_panel_table tr {
            /* white-space: nowrap; */
        }

            .data_panel_table tr:nth-child(even) {
                background-color: #B8EFFD;
            }

            .data_panel_table tr:nth-child(odd) {
                background-color: white;
            }

        .data_panel_table td {
            font-family: "Play", "Trebuchet MS", Helvetica, sans-serif;
            padding: 2px 7px;
            /* white-space: nowrap; */
        }

    .navbar_top {
        width: 100%;
        height: 60px;
        background-color: rgb(66, 141, 187);
        color: white;
        text-align: center;
        /* z-index: -1; */
        /* position: absolute; */
        /* margin-bottom: 100px; */
        /* position: fixed; */
    }

    .navbar_top1 {
        width: 15%;
        background-color: rgb(59, 127, 168);
        font-family: "Segoe UI", "Play", "Trebuchet MS", Helvetica, sans-serif;
        font-size: 12pt;
        text-align: center;
        color: white;
        /* min-width: 150px;
        max-width: 150px; */
        width: 200px;
    }

    .navbar_top2 {
        width: 85%;
        background-color: rgb(66, 141, 187);
        color: white;
        padding: 5px;
    }

    .navbar_button_div {
        width: 70px;
        display: inline-block;
        color: white;
        text-decoration: none;
        text-align: center;
    }

    .navbar_button {
        display: inline-block;
        color: white;
        text-decoration: none;
        text-align: center;
        text-shadow: 1px 1px 1px black;
    }

        .navbar_button:active {
            text-decoration: none;
        }

    .navbar_side {
        /* width: 15%; */
        height: 1000px;
        background-color: rgb(34, 45, 50);
        font-weight: bold;
        text-align: center;
        vertical-align: top;
        color: white;
        /* min-width: 200px;
        max-width: 200px; */
        width: 200px;
    }

    .main_content {
        width: 85%;
        height: 100%;
        background-color: rgb(236, 240, 245);
        text-align: center;
        vertical-align: top;
        color: black;
    }

    .section_name {
        font-weight: bold;
        color: white;
        /* color: rgb(0, 153, 51); */
        text-transform: uppercase;
        background-color: rgb(0, 153, 51);
        height: 30px;
        border-radius: 5px;
        margin: 5px;
        padding: 5px;
        text-shadow: 1px 1px 2px black;
    }

    .side_toolbar {
        font-weight: bold;
        color: white;
        /* text-transform: uppercase; */
        background-color: rgba(255, 255, 255, .1);
        border-radius: 5px;
        margin: 5px;
        padding: 5px;
        padding-top: 9px;
        display: none;
        /* position: fixed; */
    }

    .side_toolbar_button {
        width: 95%;
        margin-bottom: 5px;
        padding: 5px 10px;
        text-shadow: 1px 1px 2px gray;
        /* font-weight: bold; */
        /* max-width: 150px; */
        /* white-space: normal; */
    }

    .login_section {
        border: 1px solid rgba(200, 200, 200, .5);
        border-radius: 12px;
        background-color: white;
        width: 100%;
        padding: 36px 40px;
        margin: auto;
        box-shadow: 2px 2px 8px #888888;
    }

    #Login.main_section {
        min-height: 700px;
        padding-top: 30px;
    }

    .login_overlay {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(236, 240, 245);
        z-index: 500;
        justify-content: center;
        align-items: flex-start;
        padding: 60px 20px 20px;
        overflow: auto;
    }

    body.login-mode .login_overlay {
        display: flex !important;
    }

    .login_panel {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .login_panel_title {
        font-family: "Play", "Trebuchet MS", Helvetica, sans-serif;
        font-size: 22pt;
        font-weight: bold;
        color: #3A5DA7;
        text-align: center;
        margin-bottom: 24px;
    }

    .login_form {
        width: 100%;
        padding: 0;
        text-align: left;
    }

    .login_form td {
        padding: 10px 5px;
    }

    .login_input {
        width: 100%;
        box-sizing: border-box;
        font-size: 14pt;
        padding: 12px 14px !important;
        height: auto;
    }

    .login_remember_row {
        text-align: left;
        font-size: 12pt;
    }

    .login_remember_row label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        cursor: pointer;
        line-height: 1;
    }

    .login_remember_row input[type="checkbox"] {
        margin: 0;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }

    .login_button_row {
        text-align: right;
        padding-top: 16px !important;
    }

    .login_button_row .btn {
        font-size: 14pt;
        padding: 10px 32px;
    }

    .login_error {
        color: darkred;
        display: block;
        text-align: center;
        margin-top: 14px;
        min-height: 20px;
        font-size: 11pt;
    }

    body.login-mode .navbar_top2 {
        display: none !important;
    }

    body.login-mode .navbar_side {
        display: none !important;
    }

    body.login-mode .main_content {
        width: 100%;
    }

    label {
        vertical-align: middle;
    }

    #lblDebug {
    }

    .detail_form {
        vertical-align: text-top;
        margin: auto;
    }

        .detail_form tr {
            /* padding-bottom: 2px; */
        }

        .detail_form td {
            padding-left: 5px;
            padding-right: 5px;
            text-shadow: 1px 1px 3px gray;
        }

            .detail_form td:nth-child(even) {
                text-align: left;
            }

            .detail_form td:nth-child(odd) {
                text-align: right;
            }

    .inputbox_display {
        border: 1px solid rgb(191, 195, 204);
        border-radius: 3px;
        padding: 3px;
        margin-bottom: 5px;
    }

    .dropshadow1 {
        box-shadow: 2px 2px 5px #888888;
    }