/*Variables*/
:root {
    --Color_1: rgba(85,130,50,1);
    --Color_2: rgba(130,190,90,1);
    --Color_3: rgba(225,240,215,1);
    --Color_4: rgba(255,255,234,1);
    --Gray_1: rgba(110,110,110,1);
    --Gray_2: rgba(195,195,195,1);
    --Gray_3: rgba(215,215,215,1);
    --Gray_4: rgba(240,240,240,1);
    --Gray_5: rgba(248,248,248,1);
    --Pink_1: rgba(255,90,175,1);
    --Pink_2: rgba(255,160,210,1);
    --Pink_3: rgba(255,245,250,1);
    --Orange_1: rgba(255,180,40,1);
    --Yellow_1: rgba(255,255,0,1);
    --Yellow_2: rgba(255,255,150,1);
    --Yellow_3: rgba(255,255,205,1);
    --Rating_5: rgba(55,185,40,1);
    --Rating_4: rgba(155,225,100,1);
    --Rating_3: rgba(240,220,10,1);
    --Rating_2: rgba(255,190,75,1);
    --Rating_1: rgba(255,90,90,1);
}

/*Online Status*/
#div_online_status {
    border-radius: 10px;
    font-size: .7em;
    font-weight: bold;
    padding: 2px;
    text-align: center;
    width: 85px;
}

.online_status_on {
    background-color: var(--Color_3) !important;
    color: var(--Color_1) !important;
}

.online_status_off {
    background-color: var(--Pink_3) !important;
    color: var(--Pink_1) !important;
}

/*Page*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Century Gothic';
    font-size: 20px;
}

html {
    height: 100%;
}

body {
}

/*New Line*/
.clear {
    clear: both;
}

.new_line_10px {
    clear: both;
    height: 10px;
}

.new_line_20px {
    clear: both;
    height: 20px;
}

/*Loading*/
.loading {
    font-family: 'Century Gothic';
    font-size: 17px;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    /*background-color: rgba(0, 0, 0, 0.15);*/
    min-height: 100%;
    width: 100%;
}

    .loading img {
        position: fixed;
        width: 100px;
        height: 100px;
        top: 40%;
        left: 46%;
    }

/*Navigator*/
.div_nav {
    display: inline-block;
}

.nav_btn_first, .nav_btn_prev, .nav_btn_next, .nav_btn_last {
    /*width: 40px !important;*/
}

.div_nav .div_pos {
    border: 0.5px solid var(--Gray_3);
    /*display: inline-block;*/
    height: 50px;
    line-height: 50px;
    padding: 0px;
}

/*Progres Bar*/
.progress_bar {
    display: block;
    position: relative;
    width: 100%;
}

    .progress_bar span {
        display: inline-block;
        line-height: 30px;
        position: absolute;
        text-align: center;
        width: 100%;
    }

progress {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 1.5rem;
}

    progress::-webkit-progress-bar {
        background-color: #f0f0f0;
    }

    progress::-webkit-progress-bar,
    progress::-webkit-progress-value {
    }

    progress::-moz-progress-bar {
        border-radius: 10px;
    }

.progress1::-webkit-progress-value {
    background-color: var(--Color_2);
}

/*Rating*/
.rating_5 {
    background-color: var(--Rating_5) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

.rating_4 {
    background-color: var(--Rating_4) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

.rating_3 {
    background-color: var(--Rating_3) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

.rating_2 {
    background-color: var(--Rating_2) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

.rating_1 {
    background-color: var(--Rating_1) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

.rating_no {
    background-color: var(--Gray_2) !important;
    border-radius: 10px;
    color: white;
    padding: 1px 6px 3px 6px;
}

/*Container*/
.wrapper {
    background-color: white;
    /*border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;*/
    margin: auto;
    max-width: 1000px;
}

div {
    box-sizing: border-box;
}

    div.header {
        padding: 5px;
        position: fixed;
        text-align: left;
        top: 0;
        left: 0;
        z-index: 1100;
    }

    div.header_2 {
        padding: 5px;
        position: fixed;
        text-align: left;
        top: 43px;
        left: 0;
        z-index: 1100;
    }

    div.footer {
        padding: 5px;
    }

.div_box {
    border: 0.5px solid var(--Gray_3) !important;
    border-radius: 5px;
    min-height: 50px !important;
    padding: 12px 10px !important;
    position: relative;
    vertical-align: bottom;
}

    .div_box:hover {
        cursor: pointer;
    }

.div_hdr {
    background-color: var(--Color_3);
    /*padding-left: 25px !important;*/
}

.div_hdr, div.div_rec {
    border: 0.5px solid var(--Gray_3);
    border-collapse: collapse;
    font-size: 0px; /*To avoid extra height in div_hdr*/
    margin: -1px 0px 0px 0px;
    min-height: 37px;
    padding: 8px 8px;
    position: relative;
    outline: none;
    text-align: left;
    width: 100%;
}

.div_itm {
    /* Must be inside div with class disp_flex */
    flex: 1;
    border: 0.5px solid var(--Gray_3);
    border-collapse: collapse;
    margin: 5px 5px 0px 0px;
    max-width: 150px;
    /*min-height: 150px;*/
    min-width: 120px;
    padding: 8px 8px 8px 8px;
    position: relative;
    outline: none;
    text-align: left;
}

    div.div_itm div_img {
        height: 80%;
    }

    div.div_itm span {
        flex-wrap: wrap;
        overflow-wrap: break-word;
    }

    div.div_itm .div_qty {
        bottom: 55px;
        position: absolute;
    }

    div.div_itm .div_unit_cost {
        bottom: 8px;
        position: absolute;
    }

    div.div_itm .itm_uom {
        bottom: 8px;
        position: absolute;
        right: 8px;
        text-align: right;
    }

.div_rec span {
    white-space: normal;
}

.div_hdr:hover {
    cursor: pointer;
}

.div_rec:hover, div.div_itm:hover {
    border: 0.5px solid var(--Color_1);
    cursor: pointer;
}

.div_rec_selected {
    background-color: var(--Color_4);
}

.div_rec .btn_delete {
    background-color: transparent;
    color: var(--Color_1);
    font-size: 20px;
    margin: 0px;
    padding: 2px 4px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: auto;
}

    div.div_rec .btn_delete:hover {
        color: var(--Color_1);
        background-color: var(--Color_3);
    }

/*Table*/
table {
    border-collapse: collapse;
    width: 100%;
}

    table thead {
        position: sticky;
        top: 0px;
    }

    table th {
        background-color: var(--Color_3);
        border: 0.5px solid var(--Gray_2);
        font-weight: bold;
        line-height: 30px;
        padding: 10px;
        text-align: center;
    }

    /*table th:first-child {
            border: 0.5px solid var(--Gray_2);
            left: 0px;
            position: sticky;
            z-index: 10;
        }*/

    table tbody tr:hover {
        background-color: var(--Color_3);
        border: 3px solid var(--Color_1);
    }

    table td {
        background-color: white;
        border: 0.5px solid var(--Gray_2);
        min-width: 50px;
        padding: 10px;
        text-align: left;
        white-space: normal;
    }

        table td:first-child {
            border: 0.5px solid var(--Gray_2);
            left: 0px;
            white-space: nowrap;
            z-index: 1000;
        }

        table td:hover {
            background-color: var(--Color_3);
            cursor: pointer;
        }

        table td.selected {
            background-color: var(--Yellow_3) !important;
        }

    table tbody tr td.hdr {
        background-color: var(--Color_3);
        font-weight: bold;
    }

    table span {
        white-space: nowrap;
    }

    table tbody tr td input[type=text] {
        min-width: 50px;
    }

    table tbody tr td textarea {
        min-width: 300px;
    }

.table_no_border td {
    border: none !important;
}

/*table tbody:nth-of-type(1) tr:nth-of-type(1) td {
        border-top: none !important;
    }

    table thead th {
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: inset 0 1px 0 var(--Gray_3), inset 0 -1px 0 var(--Gray_3);
        padding: 1px 0;
    }*/

.table_layout_fixed {
    table-layout: fixed !important;
}

/*Context Menu - ctx_mnu_[popup,btn,body]*/
.ctx_mnu_body {
    background-color: white;
    border: 0px solid white;
    border-radius: 10px;
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
    display: block;
    position: absolute;
    right: 10px;
    top: 5px;
    transition: 0.8s;
    z-index: 1;
}

    .ctx_mnu_body input[type=button]:hover {
        background-color: var(--Color_2);
        color: white
    }

.ctx_mnu_btn {
    background-color: white;
    background-image: url(../../Images/Function.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 35px;
    float: right;
    height: 50px;
    opacity: 1;
    padding-left: 5px;
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
    transition: 0.8s;
    width: 51px;
}

    .ctx_mnu_btn:hover {
        /*box-shadow: 2px 2px 2px 2px rgba(85, 130, 50, 1);*/
        cursor: pointer;
        box-shadow: 0 0 60px 10px rgba(85,130,50,1); /* inner white */
        /*0 0 100px 60px #f0f,/ /* middle magenta */
        /*0 0 140px 90px #0ff;*/ /* outer cyan */
    }

/*.ctx_mnu_popup:hover .ctx_mnu_btn {
    opacity: 0;
}

.ctx_mnu_popup:hover .ctx_mnu_body {
    opacity: 1;
}*/

/*Accordion*/
.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.popup_background {
    background: #404040;
    height: 100%;
    left: 0px;
    opacity: 0.5;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}

.popup_body {
    background-color: white;
    border: 5px solid white;
    border-radius: 12px;
    box-sizing: border-box;
    font-size: 0;
    left: 50% !important;
    max-height: 95%;
    min-width: 350px;
    max-width: 95%;
    overflow: auto;
    padding: 5px;
    position: fixed;
    text-align: left;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 1000;
}

@media screen and (max-width: 500px) {
    .popup_body {
        /*max-width: 95%;
        width: 95%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;*/
        text-align: center;
        margin: 0 auto;
    }
}

@media only screen (max-width: 360px) {
    iframe {
        text-align: center;
        margin: 0 auto;
        max-width: 310px;
    }
}

.popup_body .btn_close {
    height: 40px;
    float: right;
    padding: 0px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 40px;
    z-index: 2000;
}

.required {
    background-color: var(--Pink_3) !important;
    border: 0.5px solid var(--Pink_1) !important;
}

.error {
    background-color: var(--Pink_3) !important;
    border: 3.0px solid var(--Pink_1) !important;
    color: red !important;
}

.highlight {
    background-color: var(--Color_3);
    font-weight: bold;
}

/*Control*/
.invisible {
    display: none !important;
    /*transition: 0.5s;*/
}

.disabled {
    background-color: var(--Gray_5) !important;
    /*border: 0.5px solid var(--Gray_3) !important;*/
    box-shadow: none !important;
    color: var(--Gray_1) !important;
    cursor: default !important;
    pointer-events: none !important;
}

.clickable {
    cursor: pointer;
}

.nonclickable {
    cursor: default !important;
    pointer-events: none !important;
}

.checked {
    background-image: url(../../Resources/Check_This.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

/*Drag Bar (For Resize Purpose)*/
.dragbar {
    background-color: white;
    cursor: col-resize;
    height: 100%;
    position: absolute;
    right: -8px;
    top: 0px;
    width: 8px;
}

div[id$="dragbar_duplicate"] {
    width: 3px;
    background-color: var(--Gray_3);
    opacity: 0.5;
    position: absolute;
    cursor: col-resize;
    z-index: 9999;
}

/*Mark*/
.tick_mark {
    display: inline-block;
    height: 14px;
    margin-left: -5px;
    margin-right: 10px;
    position: absolute;
    left: 0px;
    top: -2px;
    width: 14px;
}

    .tick_mark::before {
        background-color: var(--Orange_1);
        content: "";
        height: 50%;
        left: 0;
        position: absolute;
        top: 49%;
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
        width: 2px;
    }

    .tick_mark::after {
        background-color: var(--Orange_1);
        bottom: 0;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
        width: 100%;
    }

.delete_mark {
    display: inline-block;
    height: 14px;
    margin-left: -5px;
    margin-right: 5px;
    position: absolute;
    width: 14px;
    top: 0px;
    right: 0px;
}

    .delete_mark:hover {
        background-color: rgba(226,240,217,1) !important;
        box-shadow: none !important;
        color: var(--Color_1) !important;
        cursor: pointer;
        transition: 0.5s;
    }

    .delete_mark::before {
        background-color: var(--Color_1);
        content: "";
        height: 100%;
        left: 4px;
        position: absolute;
        top: 6%;
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
        width: 2px;
    }

    .delete_mark::after {
        background-color: var(--Color_1);
        bottom: -4%;
        content: "";
        height: 2px;
        left: -4px;
        position: absolute;
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
        width: 100%;
    }

/*Validation*/
.valid_required_yes {
    border: 0.5px solid red !important;
}

/*Position*/
div.sticky_top {
    background-color: white;
    padding-left: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1100;
}

div.sticky_top_2 {
    background-color: white !important;
    padding-left: 5px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 43px !important;
    z-index: 1100 !important;
}

div.sticky_bottom {
    background-color: white;
    bottom: 0px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1100;
}

/*Link*/
a {
    color: var(--Color_1);
    text-decoration: none;
}

    a:hover {
        cursor: pointer;
    }

/*Span*/

/*Label*/
label {
}

div label.label_div {
    background-color: white;
    border-radius: 3px;
    color: var(--Gray_1);
    font-size: 17px;
    height: auto;
    position: absolute;
    top: -10px;
    z-index: 1;
}

.page_title {
    color: var(--Color_1);
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 10px;
    width: auto;
}

.page_header {
    color: var(--Color_1);
    display: inline-block;
    font-size: 23px;
    font-weight: bold;
    line-height: 44px;
    margin: 0;
    padding: 5px 0px;
    width: auto;
}

.info_1 {
    color: var(--Gray_1);
}

.info_2 {
    color: var(--Gray_1);
    font-size: 17px;
}

/*Text*/
.text_decoration_none {
    text-decoration: none !important;
}

.text_overflow_ellipsis {
    text-overflow: ellipsis !important;
}

.text_wrap {
    text-wrap-mode: wrap;
}

/*Notification*/
.notification {
    background-color: rgb(255,91,173);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    height: 32px;
    /*margin: 10px 0px 0px -10px;*/
    min-width: 12px;
    padding: 3px 8px 3px 8px;
    text-align: center;
}

.record_count {
    background-color: var(--Color_1);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    height: 19px;
    margin: 5px 0px 0px 5px;
    min-width: 12px;
    padding: 3px 6px;
    text-align: center;
}

/*Input (Type=Text/Password/TextArea)*/
input[type=text], .input_text, input[type=password], textarea {
    border: 0.5px solid var(--Gray_3);
    border-collapse: collapse;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0px;
    min-height: 50px;
    padding: 8px;
    outline: none;
    width: 100%;
}

    input[type=button]:disabled, input[type=text]:disabled, .input_text:disabled, input[type=password]:disabled, select:disabled, textarea:disabled, table:disabled {
        background-color: var(--Gray_5) !important;
        box-shadow: none !important;
        color: var(--Gray_1) !important;
        cursor: default !important;
        pointer-events: none !important;
    }

    .input_text:hover, .input_text label:hover {
        cursor: pointer;
    }

.div_input_text, .div_textarea, .div_select {
    position: relative;
    width: 100%;
}

    .div_input_text input[type=text]:focus, .div_input_text input[type=password]:focus, .div_textarea textarea:focus, .div_select select:focus {
        border: 0.5px solid var(--Color_2);
        outline: none;
    }

        .box_title, .div_input_text input[type=text]:focus + label, .div_input_text input[type=text]:disabled + label, .div_input_text input[type=password]:focus + label, .div_input_text input[type=password]:disabled + label, .div_textarea textarea:focus + label, .div_textarea textarea:disabled + label, .div_select select:focus + label {
            background-color: white;
            color: var(--Color_2);
            font-size: 17px;
            height: auto;
            padding: 0px 2px;
            top: -10px;
            width: auto;
        }

    .div_input_text input[type=text]:hover, .div_input_text input[type=password]:hover, .div_textarea textarea:hover, .div_select select:hover {
        border: 0.5px solid var(--Color_1);
        outline: none;
    }

    .div_input_text input[type=text]:valid + label, .div_input_text input[type=text]:disabled + label, .div_input_text input[type=password]:valid + label, .div_input_text input[type=password]:disabled + label, .div_textarea textarea:valid + label, .div_textarea textarea:disabled + label, .div_select select:valid + label, .div_select select:disabled + label {
        background-color: white;
        color: var(--Gray_1);
        font-size: 17px;
        height: auto;
        padding: 0px 2px;
        top: -10px;
    }

    .div_input_text label, .div_textarea label, .div_select label {
        background-color: transparent;
        color: var(--Gray_1);
        cursor: text;
        font-size: 17px;
        height: 25px;
        left: 0px;
        margin: 0px 0px 12px 8px;
        position: absolute;
        top: 15px;
        transition: 0.2s;
        white-space: nowrap;
        width: auto;
    }

    .div_input_text img {
        height: 37px;
        position: absolute;
        right: 5px;
        top: 7px;
    }

        .div_input_text img:hover {
            cursor: pointer;
            box-shadow: 0 0 10px 1px rgba(85,130,50,0.5); /* inner white */
            height: 40px;
        }

/*Input (Type=Button)*/
input[type=button], .btn {
    background-color: var(--Color_3);
    border: 0.5px solid var(--Color_1);
    border-radius: 4px;
    color: var(--Color_1);
    line-height: 25px;
    margin: 0;
    padding: 10px;
    text-align: center;
    width: 100%;
}

div.div_button {
    background-color: var(--Color_3);
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    color: var(--Color_1);
    line-height: 25px;
    margin: 0;
    padding: 12px 12px;
    position: relative;
    text-align: center;
    width: 100%;
}

    input[type=button]:hover, div.div_button:hover, .btn:hover {
        background-color: var(--Color_2);
        box-shadow: 0 2px 2px 0 rgba(26, 101, 200, 0.2);
        color: white;
        cursor: pointer;
        transition: 0.5s;
    }

input[type=button]:focus {
    border: 0.5px solid royalblue;
    outline: none;
}

/*Input (Type=CheckBox)*/
input[type=checkbox] {
    display: none;
    margin: 3px 8px 3px 10px;
    /*transform: scale(2);*/
}

    input[type=checkbox] + label {
        background: url('/Images/CheckBox_UnCheck.png');
        line-height: 37px;
    }

    input[type=checkbox]:checked + label {
        background: url('/Images/CheckBox_Check.png');
    }


/* Customize the label (the container) */
label.checkbox {
    cursor: pointer;
    line-height: 35px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.checkbox span.label {
    margin-left: 10px;
}

/* Create a custom checkbox */
label.checkbox span.checkmark {
    border: 0.5px solid var(--Color_1);
    border-radius: 5px;
    padding: 3px 15px;
}

/* On mouse-over, add a grey background color */
label.checkbox:hover input ~ .checkmark {
    background-color: var(--Color_3);
}

/* When the checkbox is checked, add a background */
label.checkbox input:checked ~ .checkmark {
    background-color: var(--Color_1);
}

/* Create the checkmark/indicator (hidden when not checked) */
label.checkbox span.checkmark:after {
    content: "";
    display: none;
    position: absolute;
}

/* Show the checkmark when checked */
label.checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
label.checkbox .checkmark:after {
    border: solid white;
    border-width: 0 4px 4px 0;
    height: 13px;
    left: 12px;
    top: 0px;
    width: 6px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

div.disp_flex label.checkbox .checkmark:after {
    top: 0px;
}

label .checkbox.disabled {
    background-color: white !important;
    border: 0px !important;
}

    label.checkbox.disabled span.checkmark {
        background-color: var(--Gray_5);
        border: 0.5px solid var(--Gray_3);
    }

        label.checkbox.disabled span.checkmark:after {
            border: solid var(--Gray_2);
            border-width: 0 4px 4px 0;
            height: 13px;
            left: 12px;
            top: 0px;
            width: 6px;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

/*textarea*/
textarea {
    margin-bottom: -3px; /*remove extra spacing at the bottom of textarea box*/
    resize: vertical;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--Gray_2) !important;
    opacity: 1; /* Firefox */
}

/*DatePicker*/
.datepicker .popup_background {
    z-index: 3000 !important;
}

.datepicker .popup_body {
    width: 70%;
    z-index: 3100 !important;
}

.datepicker .dd {
    background-color: var(--Color_3);
    border: 0.5px solid var(--Color_3);
    border-radius: 5px;
    cursor: pointer;
    padding: 6px 0px;
    text-align: center;
    width: 100%;
}

    .datepicker .dd:hover {
        border: 0.5px solid var(--Color_2);
        box-shadow: 0 2px 2px 0 rgba(26, 101, 200, 0.2);
        transition: 0.5s;
    }

.datepicker .dd_selected {
    background-color: var(--Color_2);
    box-shadow: 0 2px 2px 0 var(--Gray_3);
    color: white;
    cursor: pointer;
    transition: 0.5s;
}

/*TimePicker*/
.timepicker .popup_background {
    z-index: 3000 !important;
}

.timepicker .popup_body {
    width: auto;
    z-index: 3100 !important;
}

/*Select*/
select {
    border: 0.5px solid var(--Gray_3);
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0;
    min-height: 37px;
    padding: 12px 12px;
    width: 100%;
}

/*Button*/
div.button {
    align-items: center;
    background-color: white;
    border: 0.5px solid var(--Color_2);
    border-radius: 4px !important;
    box-shadow: 2px 2px 4px 0 var(--Color_3);
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    text-align: center;
}

    div.button:hover {
        background-color: var(--Color_3) !important;
        color: var(--Color_1) !important;
        cursor: pointer;
    }

    div.button img {
        height: auto;
        width: 35px;
    }

.btn_opt {
    background-color: white !important;
    border: 0.5px solid var(--Color_2);
    border-radius: 4px !important;
    box-shadow: 2px 2px 4px 0 var(--Color_3);
    margin: 0;
    padding: 12px 12px;
    text-align: center;
    width: 100%;
}

    .btn_opt.disabled {
        background-color: var(--Gray_5) !important;
        color: var(--Gray_2) !important;
    }

    .btn_opt:hover {
        background-color: var(--Color_3) !important;
        color: var(--Color_1) !important;
        cursor: pointer;
    }

.btn_opt_selected {
    background-color: var(--Color_3) !important;
    color: var(--Color_1);
    cursor: pointer;
    font-weight: bold;
}

.btn_img {
    border: none;
    cursor: pointer;
    background-color: transparent;
    margin: 2px;
    padding: 2px;
    vertical-align: middle;
}

    .btn_img:hover {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
        transition: 0.5s;
    }

    .btn_img img {
        height: 25px;
        margin: 0;
        vertical-align: middle;
    }

.btn_view {
    background-color: var(--Color_3) !important;
    border: none !important;
    border-radius: 4px !important;
    display: inline-block !important;
    color: var(--Color_1) !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

    .btn_view:hover {
        background-color: var(--Color_3);
        cursor: pointer;
    }

.btn_selected, .btn_view_selected {
    background-color: var(--Color_2) !important;
    box-shadow: 0 2px 2px 0 rgba(26, 101, 200, 0.2) !important;
    color: white !important;
    cursor: pointer !important;
    transition: 0.5s !important;
}

.btn_action {
    background-color: transparent !important;
    border: none !important;
    height: auto !important;
    padding: 4px 8px !important;
    text-decoration: underline !important;
    width: auto !important;
}

    .btn_action:hover {
        background-color: rgba(226,240,217,1) !important;
        box-shadow: none !important;
        color: var(--Color_1) !important;
        cursor: pointer;
        transition: 0.5s;
    }

.btn_action_selected {
    background-color: var(--Gray_4) !important;
    font-weight: bold;
}

.btn_menu {
    background-image: url(../../Images/Menu.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    right: 0px !important;
    opacity: 1;
    padding-left: 5px;
    position: absolute !important;
    top: 5px !important;
    transition: 0.8s;
    width: 35px;
}

    .btn_menu:hover {
        cursor: pointer;
    }

.opt_mnu_div_ctnr {
    cursor: pointer;
    display: inline-block;
    position: absolute !important;
    right: -1px !important;
    top: -1px !important;
}

.opt_mnu_div_bar {
    cursor: pointer;
    display: inline-block;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 1000 !important; /*Important: to enable menu bar is clickable*/
}

.opt_mnu_bar_1, .opt_mnu_bar_2, .opt_mnu_bar_3 {
    border-radius: 5px;
    width: 27px;
    height: 4px;
    background-color: var(--Color_1);
    margin: 6px 0;
    transition: 0.5s;
}

.opt_mnu_ul {
    height: auto;
    opacity: 0;
    padding: 37px 0px 5px 5px;
    transition: 0.5s;
    width: auto;
}

    .opt_mnu_ul li {
        background-color: var(--Color_3);
        border: 0.5px solid var(--Color_3);
        color: var(--Color_1);
        cursor: pointer;
        list-style-type: none;
        padding: 5px;
        text-align: center;
        transition: 0.5s;
        width: 100%;
    }

        .opt_mnu_ul li:hover {
            background-color: var(--Color_2);
            color: white;
            cursor: pointer;
            transition: 0.5s;
        }

.opt_mnu_toggle {
    z-index: 10000;
}

    .opt_mnu_toggle .opt_mnu_div_bar {
        z-index: 1010 !important;
    }

    .opt_mnu_toggle .opt_mnu_bar_1 {
        transform: translate(0, 10px) rotate(45deg);
    }

    .opt_mnu_toggle .opt_mnu_bar_2 {
        opacity: 0;
    }

    .opt_mnu_toggle .opt_mnu_bar_3 {
        transform: translate(0, -10px) rotate(-45deg);
    }

    .opt_mnu_toggle .opt_mnu_ul {
        opacity: 1;
    }

/*Image*/
.img_container {
    text-align: center;
    width: 100%
}

    .img_container .img_view {
        /*max-height: 500px;*/
        max-width: 100%;
        margin: 0;
        padding: 0;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        cursor: pointer;
    }

.img_div {
    display: inline-block;
    margin-right: 5px;
    position: relative;
}

.img_thumbnail {
    border: 0.5px solid transparent;
    width: 120px;
}

    .img_thumbnail:hover {
        border: 0.5px solid var(--Color_2);
        cursor: pointer;
    }

.img_itm {
    border: 0.5px solid transparent;
    margin-right: 5px;
    width: 100%;
}

.img_delete {
    background-color: rgba(0,0,0,0.3) !important;
    border: none !important;
    color: White !important;
    font-size: 17px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 2px !important;
    position: absolute !important;
    right: 1px !important;
    text-align: center !important;
    top: 1px !important;
    width: 18px !important;
}

    .img_delete:hover {
        background-color: var(--Color_1) !important;
    }

/*Autocomplete*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    left: 0;
    max-height: 80px;
    overflow: auto;
    /*position the autocomplete items to be the same width as the container:*/
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 3000;
}

    .autocomplete-items div {
        padding: 2px;
        cursor: pointer;
        background-color: white;
        border-bottom: 0.1px solid var(--Gray_3);
        line-height: 25px;
    }
        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: var(--Color_4);
        }
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: red !important;
    color: #ffffff;
}

/*Menu*/
.sidenav {
    background-color: var(--Color_1); /* Black*/
    height: 100%; /* 100% Full-height */
    right: -250px;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 25px; /* Place content from the top */
    position: fixed; /* Stay in place */
    top: 0; /* Stay at the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    width: 250px; /* 0 width - change this with JavaScript */
    z-index: 9000; /* Stay on top */
}
    /* The navigation menu links */
    .sidenav label {
        background-color: var(--Color_4);
        color: var(--Color_1);
        display: block;
        font-size: 20px;
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        transition: 0.3s;
    }

    .sidenav a {
        color: white;
        display: block;
        font-size: 20px;
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        transition: 0.3s;
    }
        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            background-color: rgba(226,240,217,1);
            color: rgba(84,130,53,1);
            transition: 0.5s;
        }
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        height: 38px;
        padding: 0 0 0 5px;
        position: absolute;
        top: -10px;
        right: 0;
        font-size: 36px;
        width: 25px;
    }
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 20px;
        }
}

/* Table, Row */
.table {
    padding: 0px !important;
}

    .table .tr {
        display: grid;
        grid-auto-columns: 1fr;
        padding: 0px !important;
    }

    .table .tc {
    }

/* Slider */
.div_slider {
    border: 0.5px solid var(--Gray_3) !important;
    height: 37px;
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    appearance: none;
    background-color: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    transition: opacity .2s;
    width: 100%; /* Full-width */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    -webkit-appearance: none; /* Override default CSS styles */
}

    /* Mouse-over effects */
    .slider:hover {
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb {
        appearance: none;
        background-color: blue; /* Green background */
        border: 2px solid var(--Gray_3);
        cursor: pointer; /* Cursor on hover */
        height: 36px; /* Slider handle height */
        width: 25px; /* Set a specific slider handle width */
        -webkit-appearance: none; /* Override default look */
    }

    .slider::-moz-range-thumb {
        background-color: #04AA6D; /* Green background */
        border: 3px solid white;
        cursor: pointer; /* Cursor on hover */
        height: 37px; /* Slider handle height */
        width: 25px; /* Set a specific slider handle width */
    }

/* Sortable */
.sortable .hint {
    /*border: 1px solid var(--Gray_3);*/
    background: var(--Gray_4);
}

.sortable .active {
    /*border: 1px solid var(--Color_3);*/
    background: var(--Color_2);
}

/*Layout*/
.grid {
    align-content: center;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-column-gap: 0px;
    justify-content: center;
    text-align: left;
}

    .grid .g1c1 {
        grid-column: 1 / span 420;
        padding: 5px;
    }

    .grid .g2c1 {
        grid-column: 1 / span 210;
        padding: 5px;
    }

    .grid .g2c2 {
        grid-column: 211 / span 210;
        padding: 5px;
    }

    .grid .g3c1 {
        grid-column: 1 / span 140;
        padding: 5px;
    }

    .grid .g3c2 {
        grid-column: 141 / span 140;
        padding: 5px;
    }

    .grid .g3c3 {
        grid-column: 281 / span 140;
        padding: 5px;
    }

    .grid .g4c1 {
        grid-column: 1 / span 105;
        padding: 5px;
    }

    .grid .g4c2 {
        grid-column: 106 / span 105;
        padding: 5px;
    }

    .grid .g4c3 {
        grid-column: 211 / span 105;
        padding: 5px;
    }

    .grid .g4c4 {
        grid-column: 316 / span 105;
        padding: 5px;
    }

    .grid .g5c1 {
        grid-column: 1 / span 84;
        padding: 5px;
    }

    .grid .g5c2 {
        grid-column: 85 / span 84;
        padding: 5px;
    }

    .grid .g5c3 {
        grid-column: 169 / span 84;
        padding: 5px;
    }

    .grid .g5c4 {
        grid-column: 253 / span 84;
        padding: 5px;
    }

    .grid .g5c5 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g6c1 {
        grid-column: 1 / span 70;
        padding: 5px;
    }

    .grid .g6c2 {
        grid-column: 71 / span 70;
        padding: 5px;
    }

    .grid .g6c3 {
        grid-column: 141 / span 70;
        padding: 5px;
    }

    .grid .g6c4 {
        grid-column: 211 / span 70;
        padding: 5px;
    }

    .grid .g6c5 {
        grid-column: 281 / span 70;
        padding: 5px;
    }

    .grid .g6c6 {
        grid-column: 351 / span 70;
        padding: 5px;
    }

    .grid .g7c1 {
        grid-column: 1 / span 60;
        padding: 5px;
    }

    .grid .g7c2 {
        grid-column: 61 / span 60;
        padding: 5px;
    }

    .grid .g7c3 {
        grid-column: 121 / span 60;
        padding: 5px;
    }

    .grid .g7c4 {
        grid-column: 181 / span 60;
        padding: 5px;
    }

    .grid .g7c5 {
        grid-column: 241 / span 60;
        padding: 5px;
    }

    .grid .g7c6 {
        grid-column: 301 / span 60;
        padding: 5px;
    }

    .grid .g7c7 {
        grid-column: 361 / span 60;
        padding: 5px;
    }

    .grid .g2-12-c1 {
        grid-column: 1 / span 140;
        padding: 5px;
    }

    .grid .g2-12-c2 {
        grid-column: 141 / span 280;
        padding: 5px;
    }

    .grid .g2-19-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g2-19-c2 {
        grid-column: 43 / span 378;
        padding: 5px;
    }

    .grid .g2-21-c1 {
        grid-column: 1 / span 280;
        padding: 5px;
    }

    .grid .g2-21-c2 {
        grid-column: 281 / span 140;
        padding: 5px;
    }

    .grid .g2-28-c1 {
        grid-column: 1 / span 84;
        padding: 5px;
    }

    .grid .g2-28-c2 {
        grid-column: 85 / span 336;
        padding: 5px;
    }

    .grid .g2-37-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g2-37-c2 {
        grid-column: 127 / span 294;
        padding: 5px;
    }

    .grid .g2-46-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g2-46-c2 {
        grid-column: 169 / span 252;
        padding: 5px;
    }

    .grid .g2-64-c1 {
        grid-column: 1 / span 252;
        padding: 5px;
    }

    .grid .g2-64-c2 {
        grid-column: 253 / span 168;
        padding: 5px;
    }

    .grid .g2-73-c1 {
        grid-column: 1 / span 294;
        padding: 5px;
    }

    .grid .g2-73-c2 {
        grid-column: 295 / span 126;
        padding: 5px;
    }

    .grid .g2-82-c1 {
        grid-column: 1 / span 336;
        padding: 5px;
    }

    .grid .g2-82-c2 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g2-91-c1 {
        grid-column: 1 / span 378;
        padding: 5px;
    }

    .grid .g2-91-c2 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g3-112-c1 {
        grid-column: 1 / span 105;
        padding: 5px;
    }

    .grid .g3-112-c2 {
        grid-column: 106 / span 105;
        padding: 5px;
    }

    .grid .g3-112-c3 {
        grid-column: 211 / span 210;
        padding: 5px;
    }

    .grid .g3-181-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g3-181-c2 {
        grid-column: 43 / span 336;
        padding: 5px;
    }

    .grid .g3-181-c3 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g3-136-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g3-136-c2 {
        grid-column: 43 / span 126;
        padding: 5px;
    }

    .grid .g3-136-c3 {
        grid-column: 169 / span 252;
        padding: 5px;
    }

    .grid .g3-212-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
        padding: 5px;
    }

    .grid .g3-212-c2 {
        grid-column: 169 / span 84;
        padding: 5px;
    }

    .grid .g3-212-c3 {
        grid-column: 253 / span 168;
        padding: 5px;
    }

    .grid .g3-226-c1 {
        grid-column: 1 / span 84;
        padding: 5px;
        padding: 5px;
    }

    .grid .g3-226-c2 {
        grid-column: 85 / span 84;
        padding: 5px;
    }

    .grid .g3-226-c3 {
        grid-column: 169 / span 252;
        padding: 5px;
    }

    .grid .g3-262-c1 {
        grid-column: 1 / span 84;
        padding: 5px;
        padding: 5px;
    }

    .grid .g3-262-c2 {
        grid-column: 85 / span 252;
        padding: 5px;
    }

    .grid .g3-262-c3 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g3-334-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g3-334-c2 {
        grid-column: 127 / span 126;
        padding: 5px;
    }

    .grid .g3-334-c3 {
        grid-column: 253 / span 168;
        padding: 5px;
    }

    .grid .g3-343-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g3-343-c2 {
        grid-column: 127 / span 168;
        padding: 5px;
    }

    .grid .g3-343-c3 {
        grid-column: 295 / span 126;
        padding: 5px;
    }

    .grid .g3-361-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g3-361-c2 {
        grid-column: 127 / span 252;
        padding: 5px;
    }

    .grid .g3-361-c3 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g3-433-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g3-433-c2 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g3-433-c3 {
        grid-column: 295 / span 126;
        padding: 5px;
    }

    .grid .g3-442-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g3-442-c2 {
        grid-column: 169 / span 168;
        padding: 5px;
    }

    .grid .g3-442-c3 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g3-52h2h-c1 {
        grid-column: 1 / span 210;
        padding: 5px;
    }

    .grid .g3-52h2h-c2 {
        grid-column: 211 / span 105;
        padding: 5px;
    }

    .grid .g3-52h2h-c3 {
        grid-column: 316 / span 105;
        padding: 5px;
    }

    .grid .g3-541-c1 {
        grid-column: 1 / span 210;
        padding: 5px;
    }

    .grid .g3-541-c2 {
        grid-column: 211 / span 168;
        padding: 5px;
    }

    .grid .g3-541-c3 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g3-622-c1 {
        grid-column: 1 / span 252;
        padding: 5px;
    }

    .grid .g3-622-c2 {
        grid-column: 253 / span 84;
        padding: 5px;
    }

    .grid .g3-622-c3 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g3-631-c1 {
        grid-column: 1 / span 252;
        padding: 5px;
    }

    .grid .g3-631-c2 {
        grid-column: 253 / span 126;
        padding: 5px;
    }

    .grid .g3-631-c3 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g3-71h1h-c1 {
        grid-column: 1 / span 294;
        padding: 5px;
    }

    .grid .g3-71h1h-c2 {
        grid-column: 295 / span 63;
        padding: 5px;
    }

    .grid .g3-71h1h-c3 {
        grid-column: 358 / span 63;
        padding: 5px;
    }

    .grid .g3-811-c1 {
        grid-column: 1 / span 336;
        padding: 5px;
    }

    .grid .g3-811-c2 {
        grid-column: 337 / span 42;
        padding: 5px;
    }

    .grid .g3-811-c3 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g4-1221-c1 {
        grid-column: 1 / span 70;
        padding: 5px;
    }

    .grid .g4-1221-c2 {
        grid-column: 71 / span 140;
        padding: 5px;
    }

    .grid .g4-1221-c3 {
        grid-column: 211 / span 140;
        padding: 5px;
    }

    .grid .g4-1221-c4 {
        grid-column: 351 / span 70;
        padding: 5px;
    }

    .grid .g4-1112-c1 {
        grid-column: 1 / span 84;
        padding: 5px;
    }

    .grid .g4-1112-c2 {
        grid-column: 85 / span 84;
        padding: 5px;
    }

    .grid .g4-1112-c3 {
        grid-column: 169 / span 84;
        padding: 5px;
    }

    .grid .g4-1112-c4 {
        grid-column: 253 / span 168;
        padding: 5px;
    }

    .grid .g4-1441-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g4-1441-c2 {
        grid-column: 43 / span 168;
        padding: 5px;
    }

    .grid .g4-1441-c3 {
        grid-column: 211 / span 168;
        padding: 5px;
    }

    .grid .g4-1441-c4 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g4-3322-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g4-3322-c2 {
        grid-column: 127 / span 126;
        padding: 5px;
    }

    .grid .g4-3322-c3 {
        grid-column: 253 / span 84;
        padding: 5px;
    }

    .grid .g4-3322-c4 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g4-3331-c1 {
        grid-column: 1 / span 126;
        padding: 5px;
    }

    .grid .g4-3331-c2 {
        grid-column: 127 / span 126;
        padding: 5px;
    }

    .grid .g4-3331-c3 {
        grid-column: 253 / span 126;
        padding: 5px;
    }

    .grid .g4-3331-c4 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g4-4222-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g4-4222-c2 {
        grid-column: 169 / span 84;
        padding: 5px;
    }

    .grid .g4-4222-c3 {
        grid-column: 253 / span 84;
        padding: 5px;
    }

    .grid .g4-4222-c4 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g4-4321-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g4-4321-c2 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g4-4321-c3 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g4-4321-c4 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g4-5221-c1 {
        grid-column: 1 / span 210;
        padding: 5px;
    }

    .grid .g4-5221-c2 {
        grid-column: 211 / span 84;
        padding: 5px;
    }

    .grid .g4-5221-c3 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g4-5221-c4 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g4-7111-c1 {
        grid-column: 1 / span 294;
        padding: 5px;
    }

    .grid .g4-7111-c2 {
        grid-column: 295 / span 42;
        padding: 5px;
    }

    .grid .g4-7111-c3 {
        grid-column: 337 / span 42;
        padding: 5px;
    }

    .grid .g4-7111-c4 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g5-13321-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g5-13321-c2 {
        grid-column: 43 / span 126;
        padding: 5px;
    }

    .grid .g5-13321-c3 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g5-13321-c4 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g5-13321-c5 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g5-23343-c1 {
        grid-column: 1 / span 56;
        padding: 5px;
    }

    .grid .g5-23343-c2 {
        grid-column: 57 / span 84;
        padding: 5px;
    }

    .grid .g5-23343-c3 {
        grid-column: 141 / span 84;
        padding: 5px;
    }

    .grid .g5-23343-c4 {
        grid-column: 225 / span 112;
        padding: 5px;
    }

    .grid .g5-23343-c5 {
        grid-column: 337 / span 84;
        padding: 5px;
    }

    .grid .g5-2H2H221-c1 {
        grid-column: 1 / span 105;
        padding: 5px;
    }

    .grid .g5-2H2H221-c2 {
        grid-column: 106 / span 105;
        padding: 5px;
    }

    .grid .g5-2H2H221-c3 {
        grid-column: 211 / span 84;
        padding: 5px;
    }

    .grid .g5-2H2H221-c4 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g5-2H2H221-c5 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g5-22322-c1 {
        grid-column: 1 / span 70;
        padding: 5px;
    }

    .grid .g5-22322-c2 {
        grid-column: 71 / span 70;
        padding: 5px;
    }

    .grid .g5-22322-c3 {
        grid-column: 141 / span 140;
        padding: 5px;
    }

    .grid .g5-22322-c4 {
        grid-column: 281 / span 70;
        padding: 5px;
    }

    .grid .g5-22322-c5 {
        grid-column: 351 / span 70;
        padding: 5px;
    }

    .grid .g5-4320h0h-c1 {
        grid-column: 1 / span 168;
        padding: 5px;
    }

    .grid .g5-4320h0h-c2 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g5-4320h0h-c3 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g5-4320h0h-c4 {
        grid-column: 379 / span 21;
        padding: 5px;
    }

    .grid .g5-4320h0h-c5 {
        grid-column: 400 / span 21;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c1 {
        grid-column: 1 / span 21;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c2 {
        grid-column: 22 / span 21;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c3 {
        grid-column: 43 / span 126;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c4 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c5 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g6-0h0h3321-c6 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g6-13320h0h-c1 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g6-13320h0h-c2 {
        grid-column: 43 / span 126;
        padding: 5px;
    }

    .grid .g6-13320h0h-c3 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g6-13320h0h-c4 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g6-13320h0h-c5 {
        grid-column: 379 / span 21;
        padding: 5px;
    }

    .grid .g6-13320h0h-c6 {
        grid-column: 400 / span 21;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c1 {
        grid-column: 1 / span 21;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c2 {
        grid-column: 22 / span 21;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c3 {
        grid-column: 43 / span 126;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c4 {
        grid-column: 169 / span 126;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c5 {
        grid-column: 295 / span 84;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c6 {
        grid-column: 379 / span 21;
        padding: 5px;
    }

    .grid .g7-0h0h3320h0h-c7 {
        grid-column: 400 / span 21;
        padding: 5px;
    }

    .grid .g10c01 {
        grid-column: 1 / span 42;
        padding: 5px;
    }

    .grid .g10c02 {
        grid-column: 43 / span 42;
        padding: 5px;
    }

    .grid .g10c03 {
        grid-column: 85 / span 42;
        padding: 5px;
    }

    .grid .g10c04 {
        grid-column: 127 / span 42;
        padding: 5px;
    }

    .grid .g10c05 {
        grid-column: 169 / span 42;
        padding: 5px;
    }

    .grid .g10c06 {
        grid-column: 211 / span 42;
        padding: 5px;
    }

    .grid .g10c07 {
        grid-column: 253 / span 42;
        padding: 5px;
    }

    .grid .g10c08 {
        grid-column: 295 / span 42;
        padding: 5px;
    }

    .grid .g10c09 {
        grid-column: 337 / span 42;
        padding: 5px;
    }

    .grid .g10c10 {
        grid-column: 379 / span 42;
        padding: 5px;
    }

    .grid .g12c01 {
        grid-column: 1 / span 35;
        padding: 5px;
    }

    .grid .g12c02 {
        grid-column: 36 / span 35;
        padding: 5px;
    }

    .grid .g12c03 {
        grid-column: 71 / span 35;
        padding: 5px;
    }

    .grid .g12c04 {
        grid-column: 106 / span 35;
        padding: 5px;
    }

    .grid .g12c05 {
        grid-column: 141 / span 35;
        padding: 5px;
    }

    .grid .g12c06 {
        grid-column: 176 / span 35;
        padding: 5px;
    }

    .grid .g12c07 {
        grid-column: 211 / span 35;
        padding: 5px;
    }

    .grid .g12c08 {
        grid-column: 246 / span 35;
        padding: 5px;
    }

    .grid .g12c09 {
        grid-column: 281 / span 35;
        padding: 5px;
    }

    .grid .g12c10 {
        grid-column: 316 / span 35;
        padding: 5px;
    }

    .grid .g12c11 {
        grid-column: 351 / span 35;
        padding: 5px;
    }

    .grid .g12c12 {
        grid-column: 386 / span 35;
        padding: 5px;
    }

/*Flexbox*/
/*Properties for the Parent (flex container)*/
.disp_flex {
    display: flex !important;
}

.gap_5px {
    gap: 5px 5px; /* row-gap column gap */
}

/*flex-direction: row | row-reverse | column | column-reverse*/
.flex_row {
    display: flex !important;
    gap: 5px 5px; /* row-gap column gap */
    flex-direction: row;
}

.flex_col {
    display: flex !important;
    gap: 5px 5px; /* row-gap column gap */
    flex-direction: column;
}

/*flex-wrap: nowrap | wrap | wrap-reverse*/
 .flex_wrap {
     flex-wrap: wrap
 }

.flex_nowrap {
    flex-wrap: nowrap
}

/*flex-flow*/
.flex_row_nowrap {
    flex-flow: row nowrap;
}

.flex_row_wrap {
    flex-flow: row wrap;
}

.flex_col_nowrap {
    flex-flow: column nowrap;
}

.flex_col_wrap {
    flex-flow: column wrap;
}

/*justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly*/

.justify_content_flex_start {
    justify-content: flex-start;
}

.justify_content_flex_end {
    justify-content: flex-end;
}

.justify_content_center {
    justify-content: center;
}

.justify_content_space_between {
    justify-content: space-between;
}

.justify_content_space_around {
    justify-content: space-around;
}

.justify_content_space_evenly {
    justify-content: space-evenly;
}

/*align-items: stretch | flex-start | flex-end | center*/

.align_items_stretch {
    align-items: stretch;
}

.align_items_flex_start {
    align-items: flex-start;
}

.align_items_flex_end {
    align-items: flex-end;
}

.align_items_center {
    align-items: center;
}

/*align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch*/

.align_content_flex_start {
    align-content: flex-start;
}

.align_content_flex_end {
    align-content: flex-end;
}

.align_content_center {
    align-content: center;
}

.align_content_space_between {
    align-content: space-between;
}

.align_content_space_around {
    align-content: space-around;
}

.align_content_space_evenly {
    align-content: space-evenly;
}

.align_content_stretch {
    align-content: stretch;
}

/*Properties for the Children (flex items)*/
/*flex-grow: 4; (default 0) */
.flex_grow_0 {
    flex-grow: 0;
}

.flex_grow_1 {
    flex-grow: 1;
}

/*flex-shrink: 3; (default 1) */
.flex_shrink_0 {
    flex-shrink: 0;
}

.flex_shrink_1 {
    flex-shrink: 1;
}

/*flex-basis: auto; (default auto) */
.flex_basis_auto {
    flex-basis: auto;
}

.flex_basis_0 {
    flex-basis: 0;
}

/*flex: flex-grow flex-shrink flex-basis*/
.flex_width_fixed, .flex_height_fixed {
    flex: 0 0 auto; /* fixed width */
}

.flex_width {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
    overflow: auto;
}

.flex_height {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1 1 auto;
    overflow: auto;
}

/*========== [CSS Elements] ==========*/

/*Alignment*/
.align_top_left {
    align-content: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    text-align: center;
}

.align_top_center {
    align-content: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.align_top_right {
}

.align_mid_left {
    align-content: center;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}

.align_mid_center {
    align-content: center;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.align_mid_right {
    align-content: center;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
}

.align_btm_left {
}

.align_btm_center {
}

.align_btm_right {
}

.text_align_center {
    text-align: center !important;
}

.text_align_right {
    text-align: right !important;
}

.text_align_left {
    text-align: left !important;
}

.vertical_align_top {
    display: flex !important;
    align-items: flex-start !important;
}

.vertical_align_middle {
    display: flex !important;
    align-items: center !important;
}

.vertical_align_top {
    display: flex !important;
    align-items: flex-end !important;
}

/*Arrow*/

.arrow_left {
    -ms-transform: rotate(180deg); /*  for IE  */
    /* 	for browsers supporting webkit (such as chrome, firefox, safari etc.). */
    -webkit-transform: rotate(180deg);
    background-color: var(--Color_3);
    border: 0.5px solid var(--Color_3);
    border-radius: 20px;
    display: inline-block;
    font-size: 20px;
    height: 42px;
    line-height: 30px;
    padding: 5px;
    transform: rotate(180deg);
    width: 35px;
}

    .arrow_left:hover {
        background-color: var(--Color_4);
        border: 0.5px solid var(--Color_2);
        cursor: pointer;
    }

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/*Font*/
sup {
    font-size: 0.8em;
}

.font_normal {
    font-weight: normal !important;
}

.font_bold {
    font-weight: bold !important;
}

.color_1 {
    color: var(--Color_1) !important;
}

.color_2 {
    color: var(--Color_2) !important;
}

.color_black {
    color: black !important;
}

.color_blue {
    color: blue !important;
}

.color_gray_1 {
    color: var(--Gray_1) !important;
}

.color_gray_2 {
    color: var(--Gray_2) !important;
}

.color_gray_3 {
    color: var(--Gray_3) !important;
}

.color_gray_4 {
    color: var(--Gray_4) !important;
}

.color_orange_1 {
    color: var(--Orange_1) !important;
}

.color_pink_1 {
    color: var(--Pink_1) !important;
}

.color_red {
    color: red !important;
}

.color_red_1 {
    color: var(--Pink_1) !important;
}

.color_red_2 {
    color: var(--Pink_2) !important;
}

.color_yellow_1 {
    color: var(--Yellow_1) !important;
}

.color_yellow_2 {
    color: var(--Yellow_2) !important;
}

.color_yellow_3 {
    color: var(--Yellow_3) !important;
}

.color_white {
    color: white !important;
}

.font_size_1 {
    font-size: 22px !important;
}

.font_size_2 {
    font-size: 20px !important;
}

.font_size_3 {
    font-size: 17px !important;
}

.font_size_4 {
    font-size: 15px !important;
}

.font_size_5 {
    font-size: 13px !important;
}

.font_size_35px {
    font-size: 35px !important;
}

.font_size_40px {
    font-size: 40px !important;
}

.underline {
    text-decoration: underline;
}

.italic {
    font-style: italic;
}

/*Background*/

.back_color_1 {
    background-color: var(--Color_1);
}

.back_color_2 {
    background-color: var(--Color_2);
}

.back_color_3 {
    background-color: var(--Color_3);
}

.back_color_4 {
    background-color: var(--Color_4);
}

.back_pink_2 {
    background-color: var(--Pink_2);
}

.back_gray_1 {
    background-color: var(--Gray_1);
}

.back_gray_2 {
    background-color: var(--Gray_2);
}

.back_gray_3 {
    background-color: var(--Gray_3);
}

.back_gray_4 {
    background-color: var(--Gray_4);
}

.back_yellow_1 {
    background-color: var(--Yellow_1);
}

.back_yellow_2 {
    background-color: var(--Yellow_2);
}

.back_yellow_3 {
    background-color: var(--Yellow_3);
}

/*Border*/
.border {
    border: 0.5px solid var(--Gray_3);
}

.border_green_3px {
    border: 3px solid var(--Color_1);
}

.border_red_3px {
    border: 3px solid red !important;
}

.border_none {
    border: none !important;
}

.border_btm {
    border-bottom: solid 0.1px var(--Gray_1) !important;
}

.border_radius_5px {
    border-radius: 5px !important;
}

.border_radius_10px {
    border-radius: 10px !important;
}

.border_radius_high {
    border-radius: 15px !important;
}

/*Diplay*/
.disp_none {
    display: none !important;
}

.disp_blk {
    display: block !important;
}

.disp_inline_blk {
    display: inline-block !important;
}

.disp_inline_table {
    display: inline-table !important;
}

.disp_grid {
    display: grid !important;
}

.disp_contents {
    display: contents !important;
}

/*Height*/
.height_100vh {
    height: 100vh;
}

.height_full {
    height: calc(100%) !important;
}

.height_95 {
    height: 95% !important;
}

.height_90 {
    height: 90% !important;
}

.height_84 {
    height: 84% !important;
}

.height_80 {
    height: 80% !important;
}

.height_70 {
    height: 70% !important;
}

.height_60 {
    height: 60% !important;
}

.height_50 {
    height: 50% !important;
}

.height_5px {
    height: 5px !important;
}

.height_10px {
    height: 10px !important;
}

.height_15px {
    height: 15px !important;
}

.height_20px {
    height: 20px !important;
}

.height_25px {
    height: 25px !important;
}

.height_30px {
    height: 30px !important;
}

.height_35px {
    height: 35px !important;
}

.height_40px {
    height: 40px !important;
}

.height_45px {
    height: 45px !important;
}

.height_50px {
    height: 50px !important;
}

.height_100px {
    height: 100px !important;
}

.height_125px {
    height: 125px !important;
}

.height_200px {
    height: 200px !important;
}

.height_300px {
    height: 300px !important;
}

.height_400px {
    height: 400px !important;
}

.height_500px {
    height: 500px !important;
}

.height_600px {
    height: 600px !important;
}

.height_700px {
    height: 700px !important;
}

.height_800px {
    height: 800px !important;
}

.height_900px {
    height: 900px !important;
}

.height_1000px {
    height: 1000px !important;
}

.line_height_13px {
    line-height: 13px !important;
}

.line_height_25px {
    line-height: 25px !important;
}

.line_height_30px {
    line-height: 30px !important;
}

.line_height_35px {
    line-height: 35px !important;
}

.line_height_45px {
    line-height: 45px !important;
}

.line_height_48px {
    line-height: 48px !important;
}

.line_height_50px {
    line-height: 50px !important;
}

.line_height_85px {
    line-height: 85px !important;
}

.max_height_150px {
    max-height: 150px !important;
}

.max_height_600px {
    max-height: 600px !important;
}

.min_height_20px {
    min-height: 20px !important;
}

.min_height_50px {
    min-height: 50px !important;
}

.min_height_200px {
    min-height: 200px !important;
}

.min_height_300px {
    min-height: 300px !important;
}

/*Image*/
.img_collapsible {
    margin: 0px 5px 0px 0px;
    width: 15px;
}

/*Line-Break*/
.line_break_anywhere {
    line-break: anywhere !important;
}

/*Margin*/
.mrgn_5px {
    margin: 5px !important;
}

.mrgn_5px_0px {
    margin: 5px 0px !important;
}

.mrgn_top_5px {
    margin-top: 5px !important;
}

.mrgn_top_-1px {
    margin-top: -1px !important;
}

.mrgn_top_8px {
    margin-top: 8px !important;
}

.mrgn_top_10px {
    margin-top: 10px !important;
}

.mrgn_top_20px {
    margin-top: 20px !important;
}

.mrgn_top_30px {
    margin-top: 30px !important;
}

.mrgn_rgt_5px {
    margin-right: 5px !important;
}

.mrgn_rgt_10px {
    margin-right: 10px !important;
}

.mrgn_rgt_20px {
    margin-right: 20px !important;
}

.mrgn_rgt_25px {
    margin-right: 25px !important;
}

.mrgn_btm_5px {
    margin-bottom: 5px !important;
}

.mrgn_btm_10px {
    margin-bottom: 10px !important;
}

.mrgn_lft_5px {
    margin-left: 5px !important;
}

.mrgn_lft_10px {
    margin-left: 10px !important;
}

.mrgn_lft_18px {
    margin-left: 18px !important;
}

.mrgn_lft_20px {
    margin-left: 20px !important;
}

.mrgn_lft_30px {
    margin-left: 30px !important;
}

/*Opacity*/
.opacity_0 {
    opacity: 0;
}

/*Overflow*/
.overflow_auto {
    overflow: auto !important;
}

.overflow_scroll {
    overflow: scroll !important;
}

.overflow_hidden {
    overflow: hidden !important;
}

.overflow_x_hidden {
    overflow-x: hidden !important;
}

.overflow_y_auto {
    overflow-y: auto;
}

.overflow_wrap_anywhere {
    overflow-wrap: anywhere !important;
}

/*Padding*/
.pddg_0px {
    padding: 0px !important;
}

.pddg_10px {
    padding: 10px !important;
}

.pddg_10_0px {
    padding: 10px 0px !important;
}

.pddg_10_8px {
    padding: 10px 8px !important;
}

.pddg_15_8px {
    padding: 15px 8px !important;
}

.pddg_20_8px {
    padding: 20px 8px !important;
}

.pddg_25_8px {
    padding: 250px 8px !important;
}

.pddg_3px_8px {
    padding: 3px 8px !important;
}

.pddg_30px {
    padding: 30px 8px !important;
}

.pddg_35px {
    padding: 35px 8px !important;
}

.pddg_40px {
    padding: 40px 8px !important;
}

.pddg_45px {
    padding: 45px 8px !important;
}

.pddg_50px {
    padding: 50px 8px !important;
}

.pddg_4px {
    padding: 4px !important;
}

.pddg_4px_0px {
    padding: 4px 0px !important;
}

.pddg_4px_8px {
    padding: 4px 8px !important;
}

.pddg_5px {
    padding: 5px !important;
}

.pddg_5px_0px {
    padding: 5px 0px !important;
}

.pddg_5px_5px_5px_0px {
    padding: 5px 5px 5px 0px !important;
}

.pddg_5px_0px_5px_5px {
    padding: 5px 0px 5px 5px !important;
}


.pddg_8px {
    padding: 8px !important;
}

.pddg_btm_0px {
    padding-bottom: 0px;
}

.pddg_btm_5px {
    padding-bottom: 5px !important;
}

.pddg_btm_10px {
    padding-bottom: 10px !important;
}

.pddg_btm_15px {
    padding-bottom: 15px !important;
}

.pddg_btm_20px {
    padding-bottom: 20px !important;
}

.pddg_btm_25px {
    padding-bottom: 25px !important;
}

.pddg_btm_30px {
    padding-bottom: 30px !important;
}

.pddg_btm_35px {
    padding-bottom: 35px !important;
}

.pddg_btm_40px {
    padding-bottom: 40px !important;
}

.pddg_btm_45px {
    padding-bottom: 45px !important;
}

.pddg_btm_50px {
    padding-bottom: 50px !important;
}

.pddg_btm_55px {
    padding-bottom: 55px !important;
}

.pddg_btm_60px {
    padding-bottom: 60px !important;
}

.pddg_btm_65px {
    padding-bottom: 65px !important;
}

.pddg_btm_70px {
    padding-bottom: 70px !important;
}

.pddg_btm_75px {
    padding-bottom: 75px !important;
}

.pddg_btm_80px {
    padding-bottom: 80px !important;
}

.pddg_btm_85px {
    padding-bottom: 85px !important;
}

.pddg_btm_90px {
    padding-bottom: 90px !important;
}

.pddg_btm_92px {
    padding-bottom: 92px !important;
}

.pddg_btm_95px {
    padding-bottom: 95px !important;
}

.pddg_btm_100px {
    padding-bottom: 100px !important;
}

.pddg_btm_110px {
    padding-bottom: 110px !important;
}

.pddg_btm_115px {
    padding-bottom: 115px !important;
}

.pddg_btm_120px {
    padding-bottom: 120px !important;
}

.pddg_btm_125px {
    padding-bottom: 125px !important;
}

.pddg_btm_130px {
    padding-bottom: 130px !important;
}

.pddg_btm_135px {
    padding-bottom: 135px !important;
}

.pddg_btm_140px {
    padding-bottom: 140px !important;
}

.pddg_btm_145px {
    padding-bottom: 145px !important;
}

.pddg_btm_150px {
    padding-bottom: 150px !important;
}

.pddg_btm_155px {
    padding-bottom: 155px !important;
}

.pddg_btm_160px {
    padding-bottom: 160px !important;
}

.pddg_btm_165px {
    padding-bottom: 165px !important;
}

.pddg_btm_170px {
    padding-bottom: 170px !important;
}

.pddg_btm_175px {
    padding-bottom: 175px !important;
}

.pddg_btm_180px {
    padding-bottom: 180px !important;
}

.pddg_btm_185px {
    padding-bottom: 185px !important;
}

.pddg_btm_190px {
    padding-bottom: 190px !important;
}

.pddg_btm_195px {
    padding-bottom: 195px !important;
}

.pddg_btm_200px {
    padding-bottom: 200px !important;
}

.pddg_btm_205px {
    padding-bottom: 205px !important;
}

.pddg_btm_210px {
    padding-bottom: 210px !important;
}

.pddg_btm_215px {
    padding-bottom: 215px !important;
}

.pddg_btm_220px {
    padding-bottom: 220px !important;
}

.pddg_btm_225px {
    padding-bottom: 225px !important;
}

.pddg_btm_230px {
    padding-bottom: 230px !important;
}

.pddg_btm_235px {
    padding-bottom: 235px !important;
}

.pddg_btm_240px {
    padding-bottom: 240px !important;
}

.pddg_btm_245px {
    padding-bottom: 245px !important;
}

.pddg_btm_250px {
    padding-bottom: 250px !important;
}

.pddg_btm_255px {
    padding-bottom: 255px !important;
}

.pddg_btm_260px {
    padding-bottom: 260px !important;
}

.pddg_btm_265px {
    padding-bottom: 265px !important;
}

.pddg_btm_270px {
    padding-bottom: 270px !important;
}

.pddg_btm_275px {
    padding-bottom: 275px !important;
}

.pddg_btm_280px {
    padding-bottom: 280px !important;
}

.pddg_btm_285px {
    padding-bottom: 285px !important;
}

.pddg_btm_290px {
    padding-bottom: 290px !important;
}

.pddg_btm_295px {
    padding-bottom: 295px !important;
}

.pddg_btm_300px {
    padding-bottom: 300px !important;
}

.pddg_lft_0px {
    padding-left: 0px !important;
}

.pddg_lft_5px {
    padding-left: 5px !important;
}

.pddg_lft_6px {
    padding-left: 6px !important;
}

.pddg_lft_10px {
    padding-left: 10px !important;
}

.pddg_lft_15px {
    padding-left: 15px !important;
}

.pddg_lft_20px {
    padding-left: 20px !important;
}

.pddg_lft_25px {
    padding-left: 25px !important;
}

.pddg_lft_30px {
    padding-left: 30px !important;
}

.pddg_lft_35px {
    padding-left: 35px !important;
}

.pddg_lft_40px {
    padding-left: 40px !important;
}

.pddg_lft_45px {
    padding-left: 45px !important;
}

.pddg_lft_50px {
    padding-left: 50px !important;
}

.pddg_lft_55px {
    padding-left: 55px !important;
}

.pddg_lft_60px {
    padding-left: 60px !important;
}

.pddg_lft_65px {
    padding-left: 6px !important;
}

.pddg_lft_70px {
    padding-left: 70px !important;
}

.pddg_lft_75px {
    padding-left: 75px !important;
}

.pddg_lft_80px {
    padding-left: 80px !important;
}

.pddg_lft_85px {
    padding-left: 85px !important;
}

.pddg_lft_90px {
    padding-left: 90px !important;
}

.pddg_rgt_0px {
    padding-right: 0px !important;
}

.pddg_rgt_10px {
    padding-right: 10px !important;
}

.pddg_rgt_14px {
    padding-right: 14px !important;
}

.pddg_top_0px {
    padding-top: 0px;
}

.pddg_top_5px {
    padding-top: 5px;
}

.pddg_top_10px {
    padding-top: 10px;
}

/*Position*/
.pos_relative {
    position: relative !important;
}

.pos_absolute {
    position: absolute !important;
}

.pos_sticky {
    position: sticky !important;
}

.btm_0px {
    bottom: 0px !important;
}

.btm_5px {
    bottom: 5px !important;
}

.btm_8px {
    bottom: 8px !important;
}

.btm_10px {
    bottom: 10px !important;
}

.btm_40px {
    bottom: 40px !important;
}

.btm_55px {
    bottom: 55px !important;
}

.btm_60px {
    bottom: 60px !important;
}

.btm_65px {
    bottom: 65px !important;
}

.btm_70px {
    bottom: 70px !important;
}

.btm_75px {
    bottom: 75px !important;
}

.btm_80px {
    bottom: 80px !important;
}

.btm_85px {
    bottom: 85px !important;
}

.btm_90px {
    bottom: 90px !important;
}

.btm_95px {
    bottom: 95px !important;
}

.btm_100px {
    bottom: 100px !important;
}

.btm_105px {
    bottom: 105px !important;
}

.btm_110px {
    bottom: 110px !important;
}

.btm_115px {
    bottom: 115px !important;
}

.btm_120px {
    bottom: 120px !important;
}

.btm_125px {
    bottom: 125px !important;
}

.btm_130px {
    bottom: 130px !important;
}

.btm_135px {
    bottom: 135px !important;
}

.btm_140px {
    bottom: 140px !important;
}

.btm_145px {
    bottom: 145px !important;
}

.btm_150px {
    bottom: 150px !important;
}

.btm_155px {
    bottom: 155px !important;
}

.btm_160px {
    bottom: 160px !important;
}

.btm_165px {
    bottom: 165px !important;
}

.btm_170px {
    bottom: 170px !important;
}

.btm_175px {
    bottom: 175px !important;
}

.btm_180px {
    bottom: 180px !important;
}

.btm_185px {
    bottom: 185px !important;
}

.btm_190px {
    bottom: 190px !important;
}

.btm_195px {
    bottom: 195px !important;
}

.btm_200px {
    bottom: 200px !important;
}

.btm_205px {
    bottom: 205px !important;
}

.btm_210px {
    bottom: 210px !important;
}

.btm_215px {
    bottom: 215px !important;
}

.btm_220px {
    bottom: 220px !important;
}

.btm_225px {
    bottom: 225px !important;
}

.btm_230px {
    bottom: 230px !important;
}

.btm_235px {
    bottom: 235px !important;
}

.btm_240px {
    bottom: 240px !important;
}

.btm_245px {
    bottom: 245px !important;
}

.btm_250px {
    bottom: 250px !important;
}

.btm_255px {
    bottom: 255px !important;
}

.btm_260px {
    bottom: 260px !important;
}

.btm_265px {
    bottom: 265px !important;
}

.btm_270px {
    bottom: 270px !important;
}

.btm_275px {
    bottom: 275px !important;
}

.btm_280px {
    bottom: 280px !important;
}

.btm_285px {
    bottom: 285px !important;
}

.btm_290px {
    bottom: 290px !important;
}

.btm_295px {
    bottom: 295px !important;
}

.btm_300px {
    bottom: 300px !important;
}

.top_-5px {
    top: -5px !important;
}

.top_0px {
    top: 0px !important;
}

.top_5px {
    top: 5px !important;
}

.top_7px {
    top: 7px !important;
}

.top_10px {
    top: 10px !important;
}

.top_30px {
    top: 30px !important;
}

.top_50px {
    top: 50px !important;
}

.top_55px {
    top: 55px !important;
}

.top_60px {
    top: 60px !important;
}

.top_65px {
    top: 65px !important;
}

.top_70px {
    top: 70px !important;
}

.top_75px {
    top: 75px !important;
}

.top_80px {
    top: 80px !important;
}

.top_85px {
    top: 85px !important;
}

.top_90px {
    top: 90px !important;
}

.top_95px {
    top: 95px !important;
}

.top_100px {
    top: 100px !important;
}

.top_105px {
    top: 105px !important;
}

.top_110px {
    top: 110px !important;
}

.top_115px {
    top: 115px !important;
}

.top_120px {
    top: 120px !important;
}

.top_125px {
    top: 125px !important;
}

.top_130px {
    top: 130px !important;
}

.top_135px {
    top: 135px !important;
}

.top_140px {
    top: 140px !important;
}

.top_145px {
    top: 145px !important;
}

.top_150px {
    top: 150px !important;
}

.top_155px {
    top: 155px !important;
}

.top_160px {
    top: 160px !important;
}

.top_165px {
    top: 165px !important;
}

.top_170px {
    top: 170px !important;
}

.top_175px {
    top: 175px !important;
}

.top_180px {
    top: 180px !important;
}

.top_185px {
    top: 185px !important;
}

.top_190px {
    top: 190px !important;
}

.top_195px {
    top: 195px !important;
}

.top_200px {
    top: 200px !important;
}

.left_auto {
    left: auto;
}

.left_0px {
    left: 0px !important;
}

.left_5px {
    left: 5px !important;
}

.left_10px {
    left: 10px !important;
}

.right_auto {
    right: auto;
}

.right_-5px {
    right: -5px !important;
}

.right_0px {
    right: 0px !important;
}

.right_5px {
    right: 5px !important;
}

.right_10px {
    right: 10px !important;
}

.aspect_ratio {
    aspect-ratio: 1 / 1 !important;
}

/*Width*/
.width_auto {
    width: auto !important;
}

.width_full {
    width: 100% !important;
}

.width_99 {
    width: 99% !important;
}

.width_95 {
    width: 95% !important;
}

.width_90 {
    width: 90% !important;
}

.width_80 {
    width: 80% !important;
}

.width_70 {
    width: 70% !important;
}

.width_60 {
    width: 60% !important;
}

.width_50 {
    width: 50% !important;
}

.width_40 {
    width: 40% !important;
}

.width_30 {
    width: 30% !important;
}

.width_20 {
    width: 20% !important;
}

.width_0px {
    width: 0px !important;
}

.width_15px {
    width: 15px !important;
}

.width_30px {
    width: 30px !important;
}

.width_40px {
    width: 40px !important;
}

.width_45px {
    width: 45px !important;
}

.width_50px {
    width: 50px !important;
}

.width_60px {
    width: 60px !important;
}

.width_75px {
    width: 75px !important;
}

.width_80px {
    width: 80px !important;
}

.width_90px {
    width: 90px !important;
}

.width_100px {
    width: 100px !important;
}

.width_105px {
    width: 105px !important;
}

.width_110px {
    width: 110px !important;
}

.width_120px {
    width: 120px !important;
}

.width_130px {
    width: 130px !important;
}

.width_135px {
    width: 135px !important;
}

.width_140px {
    width: 140px !important;
}

.width_150px {
    width: 150px !important;
}

.width_200px {
    width: 200px !important;
}

.width_250px {
    width: 250px !important;
}

.width_500px {
    width: 500px !important;
}

.min_width_50px {
    min-width: 50px !important;
}

.min_width_80px {
    min-width: 80px !important;
}

.min_width_100px {
    min-width: 100px !important;
}

.min_width_130px {
    min-width: 130px !important;
}

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

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

.max_width_50px {
    max-width: 50px !important;
}

.max_width_100px {
    max-width: 100px !important;
}

.max_width_200px {
    max-width: 200px !important;
}

.max_width_300px {
    max-width: 300px !important;
}

.max_width_400px {
    max-width: 400px !important;
}

.max_width_450px {
    max-width: 450px !important;
}

.max_width_500px {
    max-width: 500px !important;
}

.max_width_600px {
    max-width: 600px !important;
}

.max_width_700px {
    max-width: 700px !important;
}

.max_width_800px {
    max-width: 800px !important;
}

.max_width_900px {
    max-width: 900px !important;
}

.max_width_1000px {
    max-width: 1000px !important;
}

.max_width_50 {
    max-width: 50% !important;
}

.max_width_70 {
    max-width: 70% !important;
}

.max_width_74 {
    max-width: 74% !important;
}

/*Wrapping*/
.white_spc_normal {
    white-space: normal !important;
}

.white_spc_nowrap {
    white-space: nowrap !important;
}

/*Z-Index*/
.z_idx_1000 {
    z-index: 1000 !important;
}

.z_idx_1010 {
    z-index: 1010 !important;
}

.z_idx_1020 {
    z-index: 1020 !important;
}

.z_idx_2000 {
    z-index: 2000 !important;
}

.z_idx_2010 {
    z-index: 2010 !important;
}

.z_idx_2020 {
    z-index: 2020 !important;
}

.z_idx_2100 {
    z-index: 2100 !important;
}

.z_idx_2110 {
    z-index: 2110 !important;
}

.z_idx_2120 {
    z-index: 2120 !important;
}

.z_idx_2200 {
    z-index: 2200 !important;
}

.z_idx_2210 {
    z-index: 2210 !important;
}

.z_idx_2220 {
    z-index: 2220 !important;
}

.z_idx_2300 {
    z-index: 2300 !important;
}

.z_idx_2310 {
    z-index: 2310 !important;
}

.z_idx_2320 {
    z-index: 2320 !important;
}

.z_idx_2400 {
    z-index: 2400 !important;
}

.z_idx_2410 {
    z-index: 2410 !important;
}

.z_idx_2420 {
    z-index: 2420 !important;
}

.z_idx_2500 {
    z-index: 2500 !important;
}

.z_idx_2510 {
    z-index: 2510 !important;
}

.z_idx_2520 {
    z-index: 2520 !important;
}

.z_idx_2600 {
    z-index: 2600 !important;
}

.z_idx_2610 {
    z-index: 2610 !important;
}

.z_idx_2620 {
    z-index: 2620 !important;
}

.z_idx_2700 {
    z-index: 2700 !important;
}

.z_idx_2710 {
    z-index: 2710 !important;
}

.z_idx_2720 {
    z-index: 2720 !important;
}

.z_idx_2800 {
    z-index: 2800 !important;
}

.z_idx_2810 {
    z-index: 2810 !important;
}

.z_idx_2820 {
    z-index: 2820 !important;
}

.z_idx_2900 {
    z-index: 2900 !important;
}

.z_idx_2910 {
    z-index: 2910 !important;
}

.z_idx_2920 {
    z-index: 2920 !important;
}

.z_idx_3000 {
    z-index: 3000 !important;
}

.z_idx_3010 {
    z-index: 3010 !important;
}

.z_idx_3020 {
    z-index: 3020 !important;
}

.z_idx_3030 {
    z-index: 3030 !important;
}

.z_idx_3040 {
    z-index: 3040 !important;
}

.z_idx_3050 {
    z-index: 3050 !important;
}

.z_idx_9000 {
    z-index: 9000 !important;
}

.z_idx_9010 {
    z-index: 9010 !important;
}

.z_idx_9020 {
    z-index: 9020 !important;
}

.z_idx_9030 {
    z-index: 9030 !important;
}

.z_idx_9040 {
    z-index: 9040 !important;
}

.z_idx_9050 {
    z-index: 9050 !important;
}

.z_idx_9999 {
    z-index: 9999 !important;
}

/*Map*/
/*
The ^ denotes what the id should begin with.
The $ denotes what the id should end with.
*/
div[id$="map_div_body"] {
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
}

div[id$="map_div_canvas"], div[id$="map_div_image"] {
    bottom: 0px;
    left: 0px;
    /*overflow: scroll;*/
    position: absolute;
    right: 0px;
    top: 0px;
}

    div[id$="map_div_canvas"] canvas, div[id$="map_div_image"] img {
        background-color: transparent !important;
        /*border: 0.5px solid var(--Gray_2);*/
        height: 100%;
        position: absolute;
        width: 100%;
    }

span[id$="map_toc_spn_title"], span[id$="map_tool_spn_title"] {
    color: var(--Color_1);
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding: 0px;
    width: auto;
}

    span[id$="map_toc_spn_title"]:hover, span[id$="map_tool_spn_title"]:hover {
        cursor: pointer;
    }

input[id$="map_toc_btn_close"], input[id$="map_tool_btn_close"] {
    height: 30px;
    padding: 0px;
    position: absolute;
    right: -9px;
    top: -9px;
    width: 30px;
    z-index: 2000;
}

div[id$="map_div_toc"] {
    background-color: white;
    border: 8px solid white;
    border-radius: 10px;
    bottom: 2000px;
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
    display: block;
    min-height: 45px;
    left: 10px;
    position: absolute;
    text-align: left;
    top: 10px;
    transition: 0.8s;
    width: 102px;
    z-index: 1;
}

div[id$="map_toc_div_list"] {
    background-color: var(--Color_4);
    border: 0.5px solid var(--Gray_3);
    bottom: 0px;
    position: absolute;
    top: 90px;
    width: 100%;
}

div[id$="map_div_tool"] {
    background-color: white;
    border: 8px solid white;
    border-radius: 10px;
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
    display: block;
    min-height: 45px;
    min-width: 0px;
    max-width: 300px;
    position: absolute;
    right: 10px;
    text-align: left;
    top: 10px;
    transition: 0.8s;
    width: 63px;
    z-index: 1;
}

.map_pin {
    position: absolute;
    top: 10%;
    left: 10%;
    margin-left: 115px;
    border-radius: 50%;
    border: 6px solid red;
    width: 23px;
    height: 23px;
}

    .map_pin::after {
        position: absolute;
        bottom: -26px;
        left: -5px;
        content: '';
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-top: 17px solid red;
    }