:root {
    /*--Color-1: rgba(95,55,97,1); /*Green: rgba(0,102,0,1)*/
    /*--Color-2: rgba(150,54,136,1); /*Green: rgba(0,153,51,1)*/
    /*--Color-3: rgba(207,147,247,1); /*Green: rgba(164,215,120,1)*/
    /*--Color-4: rgba(253,216,255,1); /*Green: rgba(213,245,186,1)*/
    /*--Color-5: rgba(253,241,255,1); /*Green: rgba(226,247,208,1)*/

    --Color-1: rgba(255,255,255,1); /*Green: rgba(0,102,0,1)*/
    --Color-2: rgba(255,255,255,1); /*Green: rgba(0,153,51,1)*/
    --Color-3: rgba(255,255,255,1); /*Green: rgba(164,215,120,1)*/
    --Color-4: rgba(255,255,255,1); /*Green: rgba(213,245,186,1)*/
    --Color-5: rgba(255,255,255,1); /*Green: rgba(226,247,208,1)*/
    --Gray-1: rgba(92,89,89,1);
    --Gray-2: rgba(130,130,130,1);
    --Gray-3: rgba(170,170,170,1); /* #aaaaaa */
    --Gray-4: rgba(220,220,220,1);
    --Gray-5: rgba(245,245,245,1);
    --Orange-1: rgba(255,135,1,1);
    --Red-1: rgba(233,30,99,1);
    --Red-2: rgba(248,182,182,1);
    --Red-3: #e6e6e6; /*Check*/
    --Yellow-1: rgba(255,255,100,1);
    --Yellow-2: rgba(250,255,210,1);
    --Yellow-4: #fdffcb; /*Check*/
    --Yellow-5: #feffb0; /*Check*/
    --Sugar-Cane: #ebebe4; /*Check*/
    --Purple-1: #7f2f84; /*Check*/
    --Purple-3: #efc8f5; /*Check*/
    --Purple-6: #f8ccff; /*Check*/
    --White: rgba(255,255,255,1); /* #ffffff */
}

/*================== [Container] ====================*/
div > label, div.Div > span /*Style inside DIV*/ {
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    line-height: 25px;
    margin: 0px 0px 5px 5px;
    text-align: left;
}

.Div_Main {
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    display: inline-block;
    text-align: left;
    width: 98%;
}

.main {
    text-align: center;
}

.Div {
    box-sizing: border-box;
    font: 14px 'Century Gothic';
    padding: 0px;
    margin: 3px;
    text-align: left;
    display: inline-table;
    vertical-align: top;
}

.Div_Display_Only_In_Web {
    padding: 1px;
    display: inline-block;
}

.Div_Box {
    border: 0.5px solid var(--Gray-3) !important;
    margin: 0px -5px 5px 5px !important;
    min-height: 20px !important;
    padding: 3px 5px !important;
}

.Div_Header {
    background-color: var(--Color-4);
    border: 0.5px solid white;
    cursor: pointer;
    margin: 2px 0px 2px 5px;
    padding: 3px;
    position: relative;
}

.Div_Select {
    background-color: var(--Color-4);
    border: 0.5px solid white;
    cursor: pointer;
    margin: 2px 0px 2px 5px;
    padding: 5px;
    position: relative;
}

    .Div_Header:hover, .Div_Select:hover {
        border: 0.5px solid var(--Color-1) !important;
    }

.Div_Row {
    background-color: white;
    border: 0.5px solid var(--Gray-3);
    cursor: pointer;
    margin: -1px 0px 0px 5px;
    padding: 3px;
    position: relative;
}

.Div_Row_Selected {
    background-color: var(--Yellow-5);
}

.Div_Row:hover {
    background-color: lightyellow;
}

.Div_Button {
    padding: 5px;
    border: 1px solid var(--Color-2);
    margin: 3px;
    text-align: center;
}

    .Div_Button:hover {
        background-color: var(--Color-4);
        cursor: pointer;
    }

.Div_NumericUpDownExtender {
    display: inline-block;
    text-align: left;
}

    .Div_NumericUpDownExtender tr {
        font-size: 0;
        padding: 0px;
    }

    .Div_NumericUpDownExtender td:first-child {
        font-size: 0;
        padding: 0px;
        vertical-align: bottom;
    }

    .Div_NumericUpDownExtender td:last-child {
        font-size: 0;
        padding: 0px;
        vertical-align: Sub;
    }

.Box {
    background-color: White;
    border: 0.5px solid var(--Color-2);
    color: var(--Color-2);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    margin: 3px;
    overflow: auto;
    padding: 3px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

    .Box[disabled="disabled"] {
        background-color: var(--Gray-4);
    }

.Box_With_Title {
    background-color: White;
    box-sizing: border-box;
    padding: 5px 5px 0px 0px;
    margin: 3px;
    text-align: left;
}

    .Box_With_Title[disabled="disabled"] {
        background-color: var(--Gray-4);
    }

    .Box_With_Title fieldset {
        border: 0.5px solid var(--Gray-3); /*border-radius: 5px;*/ /*margin: 0px 5px 0px -5px;*/
        min-width: 0;
        padding: 5px;
    }

    .Box_With_Title legend {
        color: var(--Color-1);
        font-family: 'Century Gothic';
        font-size: 14px;
        font-weight: bold;
        height: 14px;
        margin: 0px 0px 0px 5px;
        padding: 0px 5px 5px 5px;
        text-align: left;
    }

.Box_Without_Border {
    background-color: White;
    box-sizing: border-box;
    margin: 2px 2px 0px 2px;
    padding: 2px;
    position: relative;
    text-align: left;
}

.Box_Scroll {
    box-sizing: border-box;
    max-height: 300px;
    min-height: 10px;
    overflow: auto;
    padding: 0px;
    position: static;
    text-align: left;
    vertical-align: top;
}

.TextBox {
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    margin: 3px;
    min-height: 25px;
    padding: 3px;
    vertical-align: top;
}

.TextBox_Portal, .TextBoxWatermark {
    border: 0.5px solid var(--Gray-3);
    box-shadow: var(--Gray-1) 0px 3px 9px;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    min-height: 35px;
    margin: 10px 0px;
    width: 100%;
    max-width: 100%;
}

.box {
    position: relative;
    top: -500px;
    margin: 0 auto;
    background-color: #fff;
    color: #7F7F7F;
    padding: 20px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index: 101;
    width: 380px;
}

    .box .img_title {
        height: 35px;
        margin-bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .box .lbl_msg_error {
        position: relative;
        top: 5px;
        font-size: 11px;
        color: red;
        font-weight: bold;
    }

.Popup_Background, .Background_Popup {
    background: var(--Gray-1);
    height: 100%;
    left: 0px;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100000;
}

.Popup_Body, .Body_Popup {
    background-color: white;
    border: 0px solid var(--Gray-3);
    box-sizing: border-box;
    font-size: 0;
    left: 50% !important;
    margin: 3px;
    max-height: 90%;
    min-width: 200px;
    max-width: 1200px;
    overflow: auto;
    padding: 5px;
    position: fixed;
    text-align: left;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: auto;
    z-index: 100000;
}

.Popup_Header, .Panel_Header {
    background-color: var(--Color-1);
    border-color: var(--Color-1);
    border-width: 1px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: White;
    font-size: 18px;
    min-height: 10px;
    overflow: hidden;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.modal {
    background-color: Black;
    filter: alpha(opacity=80);
    left: 0;
    min-height: 100%;
    opacity: 0.35;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    -moz-opacity: 0.8;
}


.Collapsible_Header {
    background-color: var(--Color-4);
    box-sizing: border-box;
    border: 0.5px solid var(--Color-4);
    color: var(--Color-2);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 20px;
    float: left;
    height: auto;
    margin: 3px 3px 0px 3px;
    padding: 0px;
    text-decoration: none;
    vertical-align: middle;
    width: 650px;
}

.Collapsible_Label {
    color: var(--Color-1);
    float: left;
    font-family: 'Century Gothic';
    font-size: 16px;
    line-height: 12px;
    margin: 3px;
    padding: 1px;
    vertical-align: middle;
    text-align: left;
}

.Collapsible_Panel {
    border: 1px solid var(--Color-4);
    box-sizing: border-box;
    float: left;
    margin: 0px 3px 3px 3px;
    padding: 3px;
    position: static;
    width: 650px;
}

    .Collapsible_Panel[disabled="disabled"] {
        background-color: var(--Gray-4);
    }

.Collapsible_Image {
    float: left;
    height: 20px;
    margin: 3px; /*position: absolute;*/
    vertical-align: middle;
}

.Collapsible_Highlight {
    background-color: var(--Color-4) !important;
}

.Panel {
    background-color: White;
    border: 0px solid var(--Gray-3);
    box-sizing: border-box;
    margin: 3px;
    padding: 5px;
    position: relative;
}

    .Panel[disabled="disabled"] {
        background-color: var(--Gray-4);
    }

.Badge {
    background-color: var(--Color-2);
    border-radius: 10px;
    color: White;
    font-size: 14px;
    margin: 0px 0px 0px 5px;
    padding: 1px 7px 1px 7px; /*text-align: center;*/
    white-space: nowrap;
}

    .Badge[disabled="disabled"] {
        background-color: Gray;
        padding: 1px 7px 1px 7px;
    }

.Badge_Selected {
    background-color: White;
    border-radius: 10px;
    color: var(--Color-2);
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px 0px 5px;
    padding: 1px 7px 1px 7px; /*text-align: center;*/
    white-space: nowrap;
}

.Login {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 50px !important;
}

.login_box {
    position: absolute;
    top: -5px;
    z-index: 800;
    right: 0;
    padding: 11px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: White;
}

    .login_box button {
        color: White;
    }

.Img_Container {
    text-align: center;
    width: 100%;
}

    .Img_Container .Img_View {
        margin: 0;
        max-width: 90%;
        padding: 0;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        cursor: pointer;
    }

.Img_Div {
    display: inline-block;
    position: relative;
}

.Img_Thumbnail {
    margin-right: 5px;
    width: 120px;
}

    .Img_Thumbnail:hover {
        cursor: pointer;
    }

.Img_Delete {
    background-color: Black !important;
    border: none !important;
    border-radius: 10px !important;
    color: White !important;
    height: 20px !important;
    margin: 0 !important;
    opacity: 0.5 !important;
    padding: 2px !important;
    position: absolute !important;
    right: 5px !important;
    text-align: center !important;
    top: 1px !important;
    width: 25px !important;
}

    .Img_Delete:hover {
        background-color: var(--Color-1) !important;
        opacity: 0.5;
    }

img.img_logo {
    height: 25px;
    margin-left: 9px;
    margin-top: 9px;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 999;
}

.menus_bar {
    display: block;
    margin-left: 130px;
    max-height: 45px;
}

a.back {
    width: 256px;
    height: 73px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: #fff url(codrops_back.png) no-repeat top left;
    z-index: 1;
    cursor: pointer;
}

a.boxclose {
    float: right;
    width: 26px;
    height: 26px;
    background: transparent url(../image/cancel.png) repeat top left;
    margin-top: -30px;
    margin-right: -30px;
    cursor: pointer;
}

.overlay {
    background: transparent url(../image/overlay.png) repeat top left;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
}

/*================== [Element] ====================*/
.Button {
    background-color: White;
    border: 0.1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

    .Button:disabled, .Button[disabled]:hover {
        background-color: var(--Gray-4);
        border: 1px solid var(--Gray-3);
        color: var(--Gray-1);
        cursor: auto;
    }

    .Button:hover, .Button_Option:hover {
        background-color: var(--Color-4);
        color: var(--Color-1);
        border: 2px solid var(--Color-4);
    }

.Button_Selected {
    background-color: var(--Color-4) !important;
    border: 1px solid var(--Color-1) !important;
    box-sizing: border-box !important;
    color: var(--Color-1) !important;
    font-family: 'Century Gothic' !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 3px !important;
    vertical-align: top !important;
}

.Button_Option {
    border: 1px solid var(--Gray-2);
    box-sizing: border-box;
    color: var(--Gray-1);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

    .Button_Option:hover {
        border: 2px solid var(--Color-1);
    }

    .Button_Option:disabled, .Button_Option[disabled]:hover {
        background-color: var(--Gray-4);
        border: 1px solid var(--Gray-3);
        color: var(--Gray-1);
        cursor: auto;
    }

.Button_Option_Selected {
    background-color: var(--Color-4) !important;
    color: var(--Color-1) !important;
    font-weight: bold !important;
}

.Button_Sub {
    background-color: White;
    border: 1px solid var(--Gray-1);
    box-sizing: border-box;
    color: Black;
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 2px;
    padding: 0px 5px;
    vertical-align: top;
}

    .Button_Sub:hover {
        border: 2px solid var(--Gray-1);
    }

.Button_Sub_Selected {
    background-color: var(--Gray-1);
    border: 1px solid var(--Gray-1);
    box-sizing: border-box;
    color: White;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 2px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Highlighted {
    background-color: White;
    border: 3px solid var(--Red-1);
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    margin: 0px 0px 5px 5px;
    padding: 0px 5px;
    vertical-align: top;
}

.Btn_Add {
    background-color: transparent !important;
    border: none !important;
    height: auto !important;
    width: auto !important;
}

    .Btn_Add:hover {
        background-color: var(--Color-1) !important;
        border-radius: 15px;
        color: White;
        cursor: pointer;
    }

.Button_Delete {
    border: none !important;
    font-size: 14px !important;
    margin: 0px 5px !important;
    padding: 4px !important;
    width: auto !important;
}

.Btn_Delete {
    background-color: transparent !important;
    border: none !important;
    height: 20px !important;
    padding: 3px !important;
    position: absolute !important;
    top: -2px !important;
    right: 0px !important;
    width: auto !important;
}

    .Btn_Delete:hover {
        background-color: var(--Color-1) !important;
        border-radius: 10px !important;
        color: white !important;
        cursor: pointer !important;
    }

.Btn_X {
    border: none !important;
    font-size: 14px !important;
    margin: 0px 5px !important;
    padding: 0px !important;
    width: auto !important;
}

.Btn_Close {
    background-color: transparent !important;
    border: none !important;
    font-size: 20px;
    height: 20px !important;
    margin: 0 !important;
    position: absolute;
    right: 0px;
    text-align: center !important;
    top: 0px;
    width: 25px !important;
}

    .Btn_Close:hover {
        background-color: var(--Color-4) !important;
    }

.Btn_Link {
    background-color: transparent !important;
    border: none !important;
    margin-right: 5px !important;
    text-decoration: underline !important;
    width: auto !important;
}

    .Btn_Link:hover {
        background-color: var(--Color-5) !important;
        cursor: pointer;
    }

.Btn_Img {
    vertical-align: top;
    width: 30px;
}

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

.ImageButton {
    height: 25px;
    margin: 3px 0px 2px 5px;
    padding: 0px;
    vertical-align: top;
}

    .ImageButton:disabled {
        background-color: Lightgray;
    }

.Button_Portal {
    background-color: var(--Color-4);
    color: White;
    border: 1px solid var(--Color-4);
}

.RadioButton {
    margin: 8px 0px 0px 0px;
}

    .RadioButton input[type=radio] {
        margin: 5px 5px 10px 5px;
    }

    .RadioButton label {
        box-sizing: border-box;
        border: 0.5px solid transparent;
        font-family: 'Century Gothic';
        font-size: 14px;
        height: 26px;
        margin-left: 5px;
        padding: 4px 5px 0px 0px;
        text-align: right;
        vertical-align: top;
    }

.dropbtn {
    background-color: White;
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    padding: 0px 5px 0px 5px;
    border: none;
    cursor: pointer;
}

    .dropbtn:hover, .dropbtn:focus {
        background-color: var(--Color-1);
    }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    background-color: var(--Gray-4);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    min-width: 100px;
    position: relative;
    overflow: auto;
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

.dropdown a:hover {
    background-color: #dddddd;
}

.btn_log_log_out {
    border: 0;
    background: transparent; /*font-size: 15px;             font-weight: bold;*/
    cursor: pointer;
    color: White;
    margin-top: 3px;
}

div.grid input[type=button] {
    width: 100%;
}

select {
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    margin: 3px;
    padding: 4px;
    height: 25px;
    width: 100%;
}

    select option {
        text-align: left;
    }

.Dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

    .Dropdown .Dropdown_Menu {
        position: absolute;
        top: 100%;
        display: none;
        margin: 0;
        width: 100%;
        padding: 0;
        width: 100px;
    }

    .Dropdown:hover .Dropdown_Menu {
        display: block;
    }

    .Dropdown a {
        display: block;
        padding: 0.2em 0.8em;
        text-decoration: none;
        background: #FFFFFF;
        color: var(--Gray-1);
        border: 1px solid var(--Gray-3);
        font-size: 13px;
    }

        .Dropdown a:hover {
            background: #A65AA4;
            color: White;
        }

.DropDownList {
    border: 0.5px solid var(--Gray-3);
    font: 14px 'Century Gothic';
    height: 25px;
    margin: 3px;
    padding: 2px;
}

    .DropDownList:disabled {
        background-color: var(--Gray-4);
    }

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

label {
    font-size: 14px;
    margin: 0px 0px 5px 3px;
}

span {
    font-size: 14px;
    margin: 0px 0px 5px 0px;
}

    span.Input_Text {
        border: 0.5px solid var(--Gray-3);
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        height: 25px;
        margin: 3px;
        padding: 4px;
        vertical-align: top;
        width: 100%;
    }

    span.textarea {
        background-color: white;
        border: 0.5px solid var(--Gray-3);
        display: block;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        line-height: 20px;
        margin: 3px;
        min-height: 20px;
        min-width: 100px;
        padding: 3px;
        overflow: hidden;
        resize: vertical;
    }

        span.textarea[contenteditable]:empty::before {
            color: var(--Gray-1);
            content: '';
            display: inline-block;
        }

    input[type=text], span.Input_Text {
        border: 0.5px solid var(--Gray-3);
        box-sizing: border-box;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        height: 25px;
        margin: 3px;
        padding: 4px;
        vertical-align: top;
        width: 100%;
    }

    input[type=text], input[type=password], span.Input_Text {
        /*background-color: transparent;*/
        border: 0.5px solid var(--Gray-3);
        box-sizing: border-box;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        height: 25px;
        margin: 3px;
        padding: 4px;
        vertical-align: top;
        width: 100%;
    }

input[type=button], input[type=submit], button {
    background-color: White;
    border: 0.1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 2px 8px;
    vertical-align: top;
}

    input[type=button]:hover, input[type=submit]:hover, button:hover {
        background-color: var(--Color-4);
    }

textarea:focus, input[type=text]:focus, input[type=password]:focus, select:focus {
    outline: 1px auto var(--Color-2);
}

input[type=checkbox] {
    margin: 5px 0px 5px 0px;
}

.CheckBox {
    display: inline-block;
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
}

.CheckBox_Big {
    border: 0.1px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    height: 25px;
    margin: 0px 0px 5px 5px;
    vertical-align: middle;
    width: 25px;
}

.CheckBox label {
    font-family: 'Century Gothic';
    font-size: 14px;
    line-height: 25px;
    margin: 0px 0px 0px 5px;
    text-align: left;
    vertical-align: top;
}

.CheckBox input[type=checkbox] {
    margin: 0px;
}

.CheckBoxList {
    border: 1px solid gray;
    display: inline-block;
    text-align: left;
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
    vertical-align: top;
}

    .CheckBoxList label {
        box-sizing: border-box;
        border: 0.5px solid transparent;
        font-family: 'Century Gothic';
        font-size: 14px;
        height: 26px;
        margin: 0px 0px 5px 5px;
        text-align: right;
        vertical-align: top;
    }

    .CheckBoxList input[type=checkbox] {
        margin: 0px 0px 5px 5px;
    }

.Editable {
    background-color: var(--Yellow-2);
}

.Disabled {
    background-color: var(--Gray-4) !important; /*border: 0.5px solid var(--Gray-3) !important;*/
    color: var(--Gray-1) !important;
    cursor: default;
    pointer-events: none;
}

.Invisible {
    display: none !important;
}

.Hidden {
    visibility: hidden !important;
}

.check_this {
    display: inline-block;
    width: 20px;
}

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

.Clickable {
    cursor: pointer;
}

.Title_Main {
    color: var(--Color-1);
    display: inline-block;
    font: 22px 'Century Gothic' !important;
    font-weight: bold !important;
    margin: 0px 5px 5px 5px;
    text-align: left;
    vertical-align: top;
}

.Title_Sub {
    border: 0.5px solid transparent;
    box-sizing: border-box;
    color: var(--Color-1);
    display: inline-block;
    font: 18px 'Century Gothic' !important;
    font-weight: bold !important;
    height: 25px;
    margin: 0px;
    padding: 0;
    text-align: left;
    vertical-align: top;
}

.Page_Title {
    margin: 0px 0px 10px 5px;
}

    .Page_Title span {
        color: var(--Color-1);
        font: 30px 'Century Gothic';
        margin: 0px 0px 0px 0px;
    }

.Label_Title /*, label*/ {
    border: 0.5px solid transparent;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: 30px;
    margin: 3px;
    padding: 0;
    text-align: left;
}

.Label_Title_Portal {
    font-size: 14px;
    margin-top: 5px;
    float: left;
}

.Label_Value {
    background-color: White;
    border: 0.5px solid var(--Gray-3) !important;
    box-sizing: border-box;
    display: block;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: auto;
    margin: 3px;
    min-height: 25px;
    padding: 3px;
    text-align: left;
}

    .Label_Value[disabled="disabled"] {
        background-color: var(--Gray-4);
    }

.Label_Select_Normal {
    border: 1px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    font-family: 'Arial';
    font-size: 14px;
    height: auto;
    margin: 0 0 10px 10px;
    min-height: 30px;
    padding: 6px;
    text-align: left;
}

    .Label_Select_Normal[disabled="disabled"] {
        background-color: var(--Gray-4);
        color: var(--Gray-3);
    }

.Label_Select_Active {
    border: 2px solid var(--Color-3) !important;
    box-sizing: border-box;
    display: inline-block;
    font-family: 'Arial';
    font-size: 14px;
    font-weight: bold;
    height: auto;
    margin: 0 0 10px 10px;
    min-height: 30px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

.Label_Info_1 {
    font-size: 12px !important;
    padding: 4px;
}

.Label_Info_2 {
    font-size: 12px !important;
    color: var(--Gray-1) !important;
}

.Label_Link {
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: Blue;
    font-family: 'Century Gothic';
    margin: 0px 0px 5px 5px;
    padding: 0px 2px;
    text-align: left;
    text-decoration: underline;
}

    .Label_Link:hover {
        cursor: pointer;
    }

.Input_Label_Left {
    position: absolute;
    top: 7px;
    left: 7px;
}

.Input_Label_Right {
    position: absolute;
    top: 7px;
    right: 3px;
}

/* 分页组件 - Start */
.pag_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    font-size: 14px;
    /* --- Sticky 布局 --- */
    position: sticky; /* 粘性定位 */
    bottom: -5px; /* 吸附在底部 */
    background: rgba(255, 255, 255, 0.90);
    border-top: 1px solid #e8e8e8; /* 区分内容与操作区 */
}

.pag_lst {
    display: flex;
    align-items: center;
}

.pag_txt_container {
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.pag_txt {
    font-weight: bold;
    min-width: 120px;
    text-align: center;
    user-select: none;
}

.pag_input {
    width: 45px;
    height: 28px;
    text-align: center;
    border: 1px solid var(--Gray-4);
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    margin-right: 5px;
    outline: none;
    transition: all 0.3s;
}

    .pag_input::-webkit-outer-spin-button,
    .pag_input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .pag_input:focus {
        border-color: rgba(24, 144, 255,1);
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

.pag_slash {
    margin-right: 8px;
    color: var(--Gray-2);
}


.pag_itm {
    margin: 0 4px;
}

.pag_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--Gray-4);
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: bold;
}

    /* 悬停状态 */
    .pag_link:hover {
        border-color: rgba(24, 144, 255,1);
        color: rgba(24, 144, 255,1);
        background-color: rgba(240, 247, 255);
        cursor: pointer;
    }

/* 禁用状态 */
.pag_itm.disabled {
    cursor: not-allowed;
}

    .pag_itm.disabled .pag_link {
        color: rgba(191, 191, 191);
        background-color: var(--Gray-5);
        pointer-events: none;
        opacity: 0.6;
    }
/* 分页组件 - End */

.FileUpload {
    background-color: White;
    border: 1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    display: inline-block;
    font-family: 'Century Gothic';
    font-weight: normal;
    font-size: 14px;
    height: 26px;
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
}

    .FileUpload:hover {
        border: 2px solid var(--Color-1);
    }

    .FileUpload input {
        top: 0;
        left: 0;
        margin: 0;
        font-size: 11px; /* Loses tab index in webkit if width is set to 0 */
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .FileUpload span {
        top: 0;
        left: 0;
        display: inline-block; /* Adjust button text vertical alignment */
    }

.loading {
    background-color: Black;
    opacity: 0.15;
    position: fixed;
    z-index: +999999 !important;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
}

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

.ajax-loader img {
    position: relative;
    top: 0%;
    left: 0%;
}

.loading {
    background-color: Black;
    font-family: 'Century Gothic';
    font-size: 14px;
    left: 0;
    min-height: 100%;
    opacity: 0.15;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 110001;
}

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

.PlaceHolder {
    color: var(--Gray-2);
}

.Error_Field {
    border: 2px solid red !important;
}

Canvas:hover {
    cursor: pointer;
}


/*================== [Table] ====================*/
table {
    border-collapse: collapse;
    border: 0.5px solid var(--Gray-1);
    margin: 3px 3px 3px 3px;
}

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

    table th {
        background-color: var(--Color-4);
        border: 0.1px solid var(--Gray-3);
        color: var(--Color-1);
        font-weight: bold;
        font: 14px 'Century Gothic';
        padding: 3px 5px;
        text-align: center;
    }

.table_item th {
    background-color: var(--Gray-4) !important;
    border: 0.5px solid var(--Gray-3);
    color: Black;
}

table tr {
    background-color: White;
}

    table tr:nth-child(odd) {
        background-color: White;
    }

    table tr:nth-child(even) {
        background-color: White;
    }

    table tr:hover {
        background-color: var(--Color-5);
        cursor: pointer;
    }

table td {
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
    transition: font-size 1s, height 1s;
}

.Freeze_Col {
    border: 0.5px solid var(--Gray-3);
    left: 0px;
    position: sticky;
    white-space: nowrap;
    z-index: 100;
}

table td input {
    border: none;
}

td input[type=text], th select, td select {
    border: 0.5px solid var(--Gray-3);
    height: 28px;
    padding: 3px;
    text-align: left;
    width: auto;
}

td input[type=checkbox] {
    height: 25px;
    margin: 0px 2px;
    padding: 0;
    text-align: center;
}

th span, td span {
    display: inline-block;
    margin: 0px;
    min-height: 15px;
    padding: 4px;
    white-space: nowrap;
}

.invisible:not(tr) {
    display: none !important;
}

.invisible td {
    font-size: 0;
    height: 0;
    transition: font-size 1s, height 1s;
}

.Table_Fixed_Layout {
    table-layout: fixed;
}

.Table_Border_Separate {
    border-collapse: separate !important;
}

/*================== [Color & Font] ====================*/
.Back_Gray_1 {
    background-color: var(--Gray-1) !important;
}

.Back_Gray_2 {
    background-color: var(--Gray-2) !important;
}

.Back_Gray_3 {
    background-color: var(--Gray-3) !important;
}

.Back_Gray_4 {
    background-color: var(--Gray-4) !important;
}

.Back_Gray_5 {
    background-color: var(--Gray-5) !important;
}

.Back_Yellow_1 {
    background-color: var(--Yellow-1) !important;
}

.Back_Yellow_2 {
    background-color: var(--Yellow-2) !important;
}

.Back_Color_1 {
    background-color: var(--Color-1) !important;
}

.Back_Color_2 {
    background-color: var(--Color-2) !important;
}

.Back_Color_3 {
    background-color: var(--Color-3) !important;
}

.Back_Color_4 {
    background-color: var(--Color-4) !important;
}

.Back_Color_5 {
    background-color: var(--Color-5) !important;
}

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

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

.Color_3 {
    color: var(--Color-3) !important;
}

.Color_4 {
    color: var(--Color-4) !important;
}

.Color_5 {
    color: var(--Color-5) !important;
}

.Color_White {
    color: White !important;
}

.Color_Red {
    color: var(--Red-1) !important;
}

.Color_Orange {
    color: var(--Orange-1) !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_Gray_5 {
    color: var(--Gray-5) !important;
}

.Color_Sugar_Cane {
    color: var(--Sugar-Cane) !important;
}

.Font_8px {
    font-size: 8px;
}

.Font_10px {
    font-size: 10px;
}

.Font_12px {
    font-size: 12px;
}

.Font_20px {
    font-size: 20px;
}

.Font_30px {
    font-size: 30px;
}

.Small {
    font-size: small !important;
}

.Normal {
    font-weight: normal;
}

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

.Italic {
    font-style: italic !important;
}


.Underline {
    text-decoration: underline !important;
}

/*================== [Size] ====================*/
.Width_Auto {
    width: auto !important;
}

.Width_5 {
    width: 5% !important;
}

.Width_10 {
    width: 10% !important;
}

.Width_15 {
    width: 15% !important;
}

.Width_20 {
    width: 20% !important;
}

.Width_25 {
    width: 25% !important;
}

.Width_30 {
    width: 30% !important;
}

.Width_40 {
    width: 40% !important;
}

.Width_45 {
    width: 45% !important;
}

.Width_50 {
    width: 50% !important;
}

.Width_60 {
    width: 60% !important;
}

.Width_70 {
    width: 70% !important;
}

.Width_80 {
    width: 80% !important;
}

.Width_90 {
    width: 90% !important;
}

.Width_99 {
    width: 99% !important;
}

.Width_100 {
    width: 100% !important;
}

.Width_20px {
    width: 20px !important;
}

.Width_30px {
    width: 30px !important;
}

.Width_40px {
    width: 40px !important;
}

.Width_50px {
    width: 50px !important;
}

.Width_60px {
    width: 60px !important;
}


.Width_70px {
    width: 70px !important;
}

.Width_80px {
    width: 80px !important;
}

.Width_90px {
    width: 90px !important;
}

.Width_95px {
    width: 95px !important;
}

.Width_100px {
    width: 100px !important;
}

.Width_110px {
    width: 110px !important;
}

.Width_120px {
    width: 120px !important;
}

.Width_130px {
    width: 130px !important;
}

.Width_140px {
    width: 140px !important;
}

.Width_150px {
    width: 150px !important;
}

.Width_160px {
    width: 160px !important;
}

.Width_170px {
    width: 170px !important;
}

.Width_180px {
    width: 180px !important;
}

.Width_190px {
    width: 190px !important;
}

.Width_200px {
    width: 200px !important;
}

.Width_300px {
    width: 300px !important;
}

.Width_400px {
    width: 400px !important;
}

.Min_Width_100px {
    min-width: 100px;
}

.Max_Width_150px {
    max-width: 150px;
}

.Max_Width_200px {
    max-width: 200px;
}

.Max_Width_300px {
    max-width: 300px;
}

.Max_Width_400px {
    max-width: 400px;
}

.Max_Width_500px {
    max-width: 500px;
}

.Height_Auto {
    height: auto !important;
}

.Height_80 {
    height: 80% !important;
}

.Height_90 {
    height: 90% !important;
}

.Height_100 {
    height: 100% !important;
}

.Height_35px {
    height: 35px !important;
}

.Height_40px {
    height: 40px !important;
}

.Height_45px {
    height: 45px !important;
}

.Height_200px {
    height: 200px !important;
}

.Height_300px {
    height: 300px !important;
}

.Height_400px {
    height: 400px !important;
}

.Min_Height_25px {
    min-height: 25px !important;
}

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

.Max_Height_500px {
    max-height: 500px;
}

/*================== [Position] ====================*/
.Pos_Absolute {
    position: absolute !important;
}

.Pos_Relative {
    position: relative !important;
}

.Pos_Sticky_Top {
    background-color: white !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.Pos_Sticky_Bottom {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.Right_0px {
    right: 0px !important;
}

.Right_10px {
    right: 10px !important;
}

.Top_3px {
    top: 3px !important;
}

.Overflow_Auto {
    overflow: auto !important;
}

.Overflow_Scroll {
    overflow: scroll !important;
}

.Z_Idx_1000 {
    z-index: 1000;
}

.Z_Idx_1100 {
    z-index: 1100;
}

.Z_Idx_1200 {
    z-index: 1200;
}

.Z_Idx_2000 {
    z-index: 2000;
}

.Z_Idx_2100 {
    z-index: 2100;
}

.Z_Idx_2200 {
    z-index: 2200;
}

.Z_Idx_3000 {
    z-index: 3000;
}

.Z_Idx_3100 {
    z-index: 3100;
}

.Z_Idx_3200 {
    z-index: 3200;
}

.Z_Idx_4000 {
    z-index: 4000;
}

.Z_Idx_4100 {
    z-index: 4100;
}

.Z_Idx_4200 {
    z-index: 4200;
}

.Z_Idx_4300 {
    z-index: 4300;
}

.Z_Idx_5000 {
    z-index: 5000;
}

.Z_Idx_5100 {
    z-index: 5100;
}

.Z_Idx_5200 {
    z-index: 5200;
}

.Z_Idx_6000 {
    z-index: 6000;
}

.Z_Idx_6100 {
    z-index: 6100;
}

.Z_Idx_6200 {
    z-index: 6200;
}

.Z_Idx_7000 {
    z-index: 7000;
}

.Z_Idx_7100 {
    z-index: 7100;
}

.Z_Idx_7200 {
    z-index: 7200;
}

.Z_Idx_8000 {
    z-index: 8000;
}

.Z_Idx_8100 {
    z-index: 8100;
}

.Z_Idx_8200 {
    z-index: 8200;
}

.Z_Idx_9000 {
    z-index: 9000;
}

.Z_Idx_9100 {
    z-index: 9100;
}

.Z_Idx_9200 {
    z-index: 9200;
}

/*================== [Layout (Margin)] ====================*/
.Margin_0px {
    margin: 0px !important;
}

.Margin_3px {
    margin: 3px !important;
}

.Margin_5px {
    margin: 5px !important;
}

.Margin_Btm_0px {
    margin-bottom: 0px !important;
}

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

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

.Margin_Btm_20px {
    margin-bottom: 20px !important;
}

.Margin_Lft_0px {
    margin-left: 0px !important;
}

.Margin_Lft_2px {
    margin-left: 2px !important;
}

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

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

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

.Margin_Rgt_0px {
    margin-right: 0px !important;
}

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

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

.Margin_Rgt_18px {
    margin-right: 18px !important;
}

.Margin_Top_0px {
    margin-top: 0px !important;
}

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

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

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

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

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

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

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

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

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

/*================== [Layout (Padding)] ====================*/
.Padding_0px {
    padding: 0px !important;
}

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

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

.Padding_4px {
    padding: 4px !important;
}

.Padding_5px {
    padding: 5px !important;
}

.Padding_10px {
    padding: 10px !important;
}

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

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

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

.Padding_Left_12px {
    padding-left: 12px !important;
}

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

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

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

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

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

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

.Padding_Right_20px {
    padding-right: 20px !important;
}

.Padding_Right_25px {
    padding-right: 25px !important;
}

.Line_Height_20px {
    line-height: 20px;
}

.Line_Height_25px {
    line-height: 25px;
}

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

/*================== [Layout (Border)] ====================*/
.Border_None {
    border: none !important;
}

.Border_Top_None {
    border-top: none;
}

.Border_Bottom_None {
    border-bottom: none;
}

.Border_Left_None {
    border-left: none !important;
}

.Border_Right_None {
    border-right: none !important;
}

.Border_1 {
    border: 1px solid var(--Gray-3) !important;
}

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

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

.Border_PhotoBox {
    border: 1px solid #ddd !important;
}

.Border_BottomLine {
    border-bottom: 1px dashed #ccc !important;
}

.Border_Dashed {
    border: 2px dashed #bbb !important;
}

/*================== [Layout (Alignment)] ====================*/
.Align_Left {
    text-align: left !important;
}

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

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

.Align_Top {
    vertical-align: top !important;
}

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

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

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

.WhiteSpc_Normal {
    white-space: normal;
}

.WhiteSpc_NoWrap {
    white-space: nowrap;
}

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


.TextWrap_NoWrap {
    text-wrap-mode: nowrap;
}

/*================== [Layout] ====================*/
html {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-size: 14px;
    margin: 0;
    outline: 0;
    padding: 0;
}

html {
    min-height: 100%;
    padding-bottom: 1px;
}

div::-webkit-scrollbar {
    height: 10px;
    width: 10px; /* width of the entire scrollbar */
}

div::-webkit-scrollbar-track {
    background: var(--Gray-4); /* color of the tracking area */
}

div::-webkit-scrollbar-thumb {
    background-color: var(--Gray-3); /* color of the scroll thumb */
    border-radius: 1px; /* roundness of the scroll thumb */
}

.Wrapper {
    max-width: 100%;
    position: relative;
    margin-top: 45px;
}

.Container_With_Two_Component {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
    grid-gap: 5px;
    padding: 5px 5px 0 0;
}

.show {
    display: block;
}

/*.center
{
    margin: 5px 0px 5px 5px;
}*/

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

.Display_Flex {
    display: flex !important;
    align-items: center !important;
    /*justify-content: center !important;*/
}

.Jstfy_Cntnt_Lft {
    justify-content: center !important;
}

.Flex_Row {
    flex-direction: row !important;
}

.Flex_Column {
    flex-direction: column !important;
}

.grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-column-gap: 5px;
    width: 99%;
}

    .grid .grid_col_1 {
        grid-column: 1 / 2;
    }

    .grid .grid_col_2 {
        grid-column: 2 / 3;
    }

    .grid .grid_col_3 {
        grid-column: 3 / 4;
    }

    .grid .grid_col_4 {
        grid-column: 4 / 5;
    }

    .grid .grid_col_1_2 {
        grid-column: 1 / span 2;
    }

    .grid .grid_col_1_3 {
        grid-column: 1 / 4;
    }

    .grid .grid_col_1_4 {
        grid-column: 1 / span 4;
    }

    .grid .grid_col_2_3 {
        grid-column: 2 / 4;
    }

    .grid .grid_col_2_4 {
        grid-column: 2 / span 3;
    }

    .grid .grid_col_3_4 {
        grid-column: 3 / span 2;
    }

    .grid .grid_col_1hh11_1 {
        grid-column: 1.0 / 2.0;
    }

    .grid .grid_col_1hh11_2 {
        grid-column: 2.0 / 2.5;
    }

    .grid .grid_col_1hh11_3 {
        grid-column: 2.5 / 3.0;
    }

    .grid .grid_col_1hh11_4 {
        grid-column: 3.0 / 4.0;
    }

    .grid .grid_col_1hh11_5 {
        grid-column: 4.0 / 5.0;
    }

.Photo_Grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.New_Line_5px {
    height: 5px;
}

.New_Line_10px {
    height: 10px;
}

.New_Line_20px {
    height: 20px;
}

.Float_Left {
    /*float: left;*/
}

.Float_Right {
    float: right;
}

.Clear {
    clear: both;
}

.Clear_Mobile {
    clear: both;
}

.Clear_Only_In_Web {
    clear: none;
}


/*================== [Layout (Print)] ====================*/
.pdf_export_mode {
    background: White !important;
    color: Black !important;
    width: 700px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: none;
}

    .pdf_export_mode table {
        page-break-inside: auto;
        border-collapse: collapse !important;
    }

        .pdf_export_mode table tr {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        .pdf_export_mode table td {
            word-break: break-word !important;
        }

            .pdf_export_mode table td[rowspan] {
                page-break-inside: avoid !important;
            }

    .pdf_export_mode .pdf_header {
        break-after: avoid;
    }

    .pdf_export_mode .pdf_content {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pdf_export_mode,
    .pdf_export_mode .Bold,
    .pdf_export_mode table,
    .pdf_export_mode table td,
    .pdf_export_mode div,
    .pdf_export_mode span,
    .pdf_export_mode input {
        font-size: 14px !important;
    }

        .pdf_export_mode .Title_Sub {
            color: Black !important;
            font-size: 16px !important;
        }

/*================== [Layout (TreeView)] ====================*/
.TreeView {
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    font: 14px 'Century Gothic';
    margin: 4px;
    padding: 0px 5px 0px 0px;
}

.TreeView_Node {
    color: var(--Color-1);
}

.TreeView_SelectedNode {
    border: solid 3px var(--Color-2);
    display: block;
    text-decoration: none;
}

.TreeView_Root a {
    color: Blue;
    font: 14px 'Century Gothic';
    font-weight: bold;
}

.TreeView_Parent a {
    font: 14px 'Century Gothic';
}

.TreeView_Leaf a {
    color: var(--Color-1);
    font: 14px 'Century Gothic';
}


/*================== [Layout (GridView)] ====================*/

.GridView, .GridView_Data {
    border: 0.5px solid var(--Gray-1);
    margin: 3px;
    text-align: left;
}

    .GridView a, .GridView_Data a {
        color: var(--Color-1);
        font-family: 'Century Gothic';
        text-decoration: none;
    }

    .GridView th, .GridView_Data th {
        background-color: var(--Color-4);
        border: 0.1px solid var(--Color-2);
        color: var(--Color-1);
        font-weight: normal;
        font: 14px 'Century Gothic';
        padding: 3px 5px;
    }

    .GridView td {
        color: var(--Gray-1);
        font: 14px 'Century Gothic';
        height: 20px;
        padding: 0px 0px 0px 0px;
    }


    .GridView_Data td {
        color: var(--Gray-1);
        font: 14px 'Century Gothic';
        padding: 5px 5px 5px 5px;
    }

    .GridView .ajax__calendar_container td {
        font-size: 14px;
    }

.GridView_Header {
    background-color: var(--Color-4);
}

.GridView_Row {
    background-color: White;
    border: 0.1px solid var(--Color-2);
}

.GridView_AlternateRow {
    background-color: White;
    border: 0.1px solid var(--Color-2);
}

.GridView_Footer {
    background-color: var(--Color-2);
}

.GridView_Button {
    background-color: White;
    border: 1px solid var(--Color-1);
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 0px 5px;
    min-height: 25px;
    padding: 0px 5px;
    vertical-align: middle;
}

    .GridView_Button:hover {
        background-color: var(--Color-2);
        color: White;
        cursor: pointer;
    }

    .GridView_Button[disabled="disabled"], .GridView_Button[disabled]:hover {
        background-color: var(--Gray-4);
        border: 1px solid var(--Gray-3);
        color: var(--Gray-1);
        cursor: default;
    }

.GridView_ImageButton {
    color: Black;
    cursor: pointer;
    height: 25px;
    opacity: 0.001;
    padding: 0px;
    vertical-align: middle;
}

.GridView_CheckBox {
    display: inline-block;
}

.GridView_DropDownList {
    border: 0.5px solid var(--Gray-3);
    color: var(--Gray-1);
    font: 14px 'Century Gothic';
    height: 100%;
    min-height: 25px;
    padding: 0px 0px 0px 0.6px;
    text-align: left;
    width: 100%;
    vertical-align: top;
}

.GridView_Label {
    box-sizing: border-box;
    color: var(--Gray-1);
    display: inline-block;
    font-family: 'Century Gothic';
    font-size: 14px;
    padding: 3px;
    background-color: transparent;
    text-align: left;
    vertical-align: top;
}

.GridView_TextBox {
    border: none;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 100%;
    padding: 3px;
    width: auto;
    vertical-align: top;
}

/*================== [Media Query] ====================*/
@media screen and (min-width : 150px) and (max-width :925px) {
    .Div_Main {
        margin-top: 50px;
        max-width: 500px;
        padding-right: 5px;
        padding-left: 5px;
        display: block;
        width: 98%;
    }
}

@media screen and (max-width : 500px) {
    .Popup_Body {
        min-width: 350px;
        max-width: 310px;
    }
}

@media screen and (min-width:500px) and (max-width:769px) {
    .Popup_Body {
        min-width: 350px;
        max-width: 500px;
        top: 290px !important;
    }
}

@media screen and (min-width:769px) {
    .Popup_Body {
        min-width: 350px;
        max-width: 100%;
        top: 290px !important;
    }

    .Div_Main {
        margin-top: 50px;
        min-width: 500px;
        max-width: 800px;
        padding-left: 60px;
        padding-right: 60px;
        width: 98%;
    }

        .Div_Main:after {
            clear: both;
        }
}

@media screen and (min-width:1230px) {
    .Div_Main {
        margin-top: 50px;
        padding-right: 60px;
        padding-left: 60px;
        width: 98%;
    }

        .Div_Main:after, .container {
            content: " ";
            display: table;
        }

        .Div_Main:after {
            clear: both;
        }
}

@media screen and (max-width : 800px) {
    .Header_Center {
        clear: both;
        margin: 0;
        margin-top: -10px;
        margin-left: 6px;
    }
}

@media screen and (max-width : 1200px) {
    .Header_Inner {
        width: 100%;
    }

    .Header_right {
        margin-right: 10px;
    }

    .Header_Left, .Header_Center {
        margin-left: 10px;
    }
}


@media screen and (max-width : 1100px) {
    div.logos {
        display: none;
    }

    .login_box {
        margin-top: -4px;
        margin-right: 35px;
    }
}

@media screen and (max-width : 1230px) {
    .menus_bar {
        height: 80px;
    }
}