body {
    font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
    margin: 0px;
    font-size: 10pt;
    background: #F8FFFF;
}

input {
    font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
    font-size: 10pt;
}

textarea {
    font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
    font-size: 10pt;
}

label {
    font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
    font-size: 10pt;
}

.standardfont {
    font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
    font-size: 10pt;
}

select {
    border: 1px solid #8a8a8a;
    border-radius: inherit;
}

.PagePanel_Mobile {
    clear: both;
    margin: 0px 15px 15px 5px;
}

.PagePanel {
    margin: 15px 15px 55px 15px;
}

.MainPanel {
    margin-top: 50px;
}
.Hidden {
    visibility: hidden;
}

.Display_None {
    display: none;
}

.Display_Show {
    display: inline;
}
.DisplayLinkButton{
border:none;
}

/* --------Start of Button ----------*/

.BtnStandard_Fix80 {
    display: block;
    padding: 5px 17px 5px 17px; /* Links */
    width: 70px;
    text-decoration: none;
    font-size: 12px;
    line-height: 120%;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #4F3B30;
    border: 1px solid #A9A4A1;
    background: rgb(220,220,220); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#DCDCDC',GradientType=0 ); /* IE6-9 */
}

.BtnStandard {
    display: block;
    float: left;
    padding: 5px 17px 5px 17px; /* Links */
    margin-right: 10px;
    text-decoration: none;
    font-size: 12px;
    line-height: 120%;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
    color: #4F3B30;
    border: 1px solid #A9A4A1;
    background: rgb(220,220,220); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(220,220,220,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#DCDCDC',GradientType=0 ); /* IE6-9 */
}
.BtnStandard-LightBrown {
    color: #6E3D22;
    border: 1px solid #C9BEB5;
    background: rgb(242,218,201); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(242,218,201,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(242,218,201,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(242,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(242,218,201,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(242,218,201,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(242,218,201,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#F2DAC9',GradientType=0 ); /* IE6-9 */
}


.BtnStandard-Gray {
    color: #404040;
    border: 1px solid #999999;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Yellow {
    color: #B30E11;
    border: 1px solid #FFBB00;
    background: rgb(245,239,86); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(245,239,86,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(245,239,86,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(245,239,86,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(245,239,86,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(245,239,86,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(245,239,86,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#F5EE59',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Blue {
    color: #113E5E;
    border: 1px solid #93BECC;
    background: rgb(157,215,235); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(157,215,235,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(157,215,235,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(157,215,235,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(157,215,235,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(157,215,235,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(157,215,235,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9DD7EB',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Redx {
    color: #990000;
    border: 1px solid #CC9797;
    background: rgb(237,135,135); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(237,135,135,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(237,135,135,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(237,135,135,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(237,135,135,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(237,135,135,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(237,135,135,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ED8787',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Pink {
    color: #990000;
    border: 1px solid #CC9797;
    background: rgb(255,212,212); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(255,212,212,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(255,212,212,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,212,212,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,212,212,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,212,212,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(255,212,212,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFD4D4',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-PaleGreen {
    color: #1F3D0D;
    border: 1px solid #59D428;
    background: rgb(156,214,122); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(156,214,122,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(156,214,122,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(156,214,122,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(156,214,122,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(156,214,122,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(156,214,122,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CD67A',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Green {
    color: #1F3D0D;
    border: 1px solid #59D428;
    background: rgb(211,250,187); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(211,250,187,1) 2%, rgba(70,173,9,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(211,250,187,1)), color-stop(100%,rgba(70,173,9,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(211,250,187,1) 2%,rgba(70,173,9,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(211,250,187,1) 2%,rgba(70,173,9,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(211,250,187,1) 2%,rgba(70,173,9,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(211,250,187,1) 2%,rgba(70,173,9,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2FABB', endColorstr='#46AD09',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-OrangeYellow {
    color: #802721;
    border: 1px solid #E6B6A3;
    background: rgb(255,205,87); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(255,205,87,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(255,205,87,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#E1CD57',GradientType=0 ); /* IE6-9 */
}
.BtnStandard-OrangeYellow2 {
    color: #802721;
    border: 1px solid #E6B6A3;
    background: rgb(255,205,87); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(255,205,87,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(255,205,87,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(255,205,87,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#E1CD57',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Purple {
    color: #30215C;
    border: 1px solid #AD9BDE;
    /*E0A8F0*/
    background: rgb(214,186,222); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(214,186,222,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(214,186,222,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(214,186,222,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(214,186,222,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(214,186,222,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(214,186,222,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D6BADE',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-Wine {
    color: #FFFFFF;
    border: 1px solid #CF3838;
    background: rgb(189,0,0); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(247,168,168,1) 2%, rgba(189,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(247,168,168,1)), color-stop(100%,rgba(189,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(247,168,168,1) 2%,rgba(189,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(247,168,168,1) 2%,rgba(189,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(247,168,168,1) 2%,rgba(189,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(247,168,168,1) 2%,rgba(189,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7A8A8', endColorstr='#BD0000',GradientType=0 ); /* IE6-9 */
}

.BtnStandard-AquaGreen {
    color: #035236;
    border: 1px solid #88BFAC;
    background: rgb(107,232,201); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(107,232,201,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(100%,rgba(107,232,201,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(107,232,201,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(107,232,201,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(107,232,201,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(107,232,201,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6BE8C9',GradientType=0 ); /* IE6-9 */
}

/*=== Login Page ===*/
.DivLoginPage_Title {
    background: #66C3C4; /*#C46670*/
    height: 40px;
    clear: both;
}

.CompanyHeader {
    font-size: 20pt;
    font-weight: bold;
    color: #520909;
}

.DivLoginPage {
    /*mobile ver background*/
    margin-left: auto;
    margin-right: auto;
    padding: 15px 5px 15px 5px;
    width: 100%;
    background: #FFFFD6;
}

.DivLoginPage_WideTitle {
    display: none;
}

.DivHideEmpty_Login {
    display: none;
}

@media screen and (min-width: 500px) {
    .DivLoginPage_Title {
        display: none;
    }

    .DivHideEmpty_Login {
        display: block
    }

    .Login_CompHeade {
        font-size: 20pt;
        font-weight: bold;
        color: #703C85;
    }

    .Login_Title {
        font-size: 12pt;
        font-weight: bold;
        color: #23696A;
    }

    .DivLoginPage_WideTitle {
        display: block;
        background: #CCF2F4;
        width: 100%;
        padding: 15px 0px 15px 0px;
    }

    .DivLoginPage {
        position: relative;
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
        width: 700px;
        box-shadow: 0px 0px 10px 3px #CCF2F4;
        background: #FFFFF0;
        padding: 20px;
        text-align: center;
    }
}

.DivCaptcha {
    width: 90%;
    max-width: 300px;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.DivLoginPage_input {
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
}

.DIvLogin_Lang {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /*background: #FFBE6E;*/
}

.LoginLstBox {
    width: 90%;
    max-width: 400px;
    min-width: 300px;
    padding: 5px;
    font-size: 12pt;
}

.TxtLogin {
    width: 90%;
    max-width: 400px;
    min-width: 300px;
    height: 30px;
    font-size: 12pt;
    padding: 12px 20px;
    margin: 15px 0px 10px 0px;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
}

.LoginButton {
    width: 90%;
    max-width: 400px;
    display: block;
    text-decoration: none;
    /*border: 1px solid #C42D35;*/
    background-color: #85B4B9;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    margin: 15px 0px 10px 0px;
    font-size: 16px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

.lblLoginTitle {
    padding: 5px 15px 5px 0px;
    color:#5f5959;
}

.LnkLogin_Lang {
    text-decoration: none;
    padding: 5px 15px 5px 0px;
    
    color: #853C76;
}
.LnkLogin_Forgetpw {
    text-decoration: none;
    padding: 5px 15px 5px 0px;
    color: #605a76;
    cursor:pointer;
}

.lblLoginPage_Title {
    font-size: 16px;
    font-weight: bold;
    color:#254351;
}

/*=== Login Page ===*/

/***********************************************/
.lblFocus {
    color: #480090;
    font-weight: bold;
    font-size: 11pt;
    line-height: 1.6;
}

.DivSuccess {
    margin-left: auto;
    margin-right: auto;
    width: 550px;
    background-color: #FFE2D6;
    border: 1px solid #A66E35;
    padding: 20px;
    text-align: center;
    -webkit-box-shadow: 0px 0px 15px #E3B7AA;
    box-shadow: 0px 0px 15px #E3B7AA;
}

.DisplayFlex {
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
}
.Flex1{
    flex:1;
}
.FlowLeft{
    float:left;
}
.ClearFloat {
    clear: both;
}
.DivStandard_Row {
    display: flex;
    padding: 3px;
}

.DivStandard_Title {
    flex: 1;
    min-width: 110px;
    max-width: 140px;
}

.DivStandard_Data {
    flex: 3;
}
.TextAlginCenter {
    text-align: Center;
}
.lblErr {
    color: #E8004E;
    font-weight: bold;
}


.DivError {
    width: 90%;
    max-width: 400px;
    display: block;
    text-decoration: none;
    /*border: 1px solid #C42D35;*/
    background-color: #FF7F7F;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    margin: 15px 0px 10px 0px;
    font-size: 16px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}


.HideObject {
    display: none;
}
.lblTitleSpan {
    font-weight: bold;
    color: brown;
}
.Width100pct {
    width: 100%;
}
.lblBoldText {
    font-weight: bold;
}
.lblPointer {
    cursor: pointer;
}
/*==================================================*/
.Div2ColTable_Row {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    display: flex;
    width: 100%;
}
.Div2ColTable_Title {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #ddffbc; /* #EEDC82;*/
    min-width: 125px;
    flex: 1;
}
.Div2ColTable_Title2 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #ddffbc; /* #EEDC82;*/
    min-width: 125px;
    flex: 2;
}
.Div2ColTable_Data {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #feffde; /*FFF8DC;*/
    flex: 5;
}
.Div3ColTable_Title {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #ddffbc; /* #EEDC82;*/
    min-width: 125px;
    flex: 3;
}
.Div3ColTable_Data {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #feffde; /*FFF8DC;*/
    flex: 2;
}
.DivLeaveCalender {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    width:600px;
    
    flex-wrap: wrap;
    display: flex;
    margin:auto;
}
.DivLeaveCalender_Calender {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    margin-right: 20px;
}
.CalenderCtl {
    width: 373px;
    height: 235px;
}
.DivLeaveCalender_Remark {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
}
.DivCalenderRemark {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    flex-wrap: wrap;
    display: flex;
    margin: 5px 0px 5px 5px;
}

.DivCalenderRemark_Gp {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: flex;
    float: left;
    height: 20px;
    
}
.DivCalenderRemark_Color {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    width: 15px;
    height: 100%;
}
.DivCalenderRemark_Remark {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    flex: 1;
    float: left;
    padding: 2px 20px 2px 5px;
    height: 100%;
}
/*==================================================*/
.DivExtraData_EmpNo {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
}
.DivExtraData_EmpDesp {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
}
.DivExtraData_LeaveDetail {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    flex: 1;
}
/*==================================================*/

/*==================================================*/
.CboWidth300px {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 300px;
}
.DivTitleColor {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    width: 10px;
    height: 100%;
    background-color: #ddffbc;
}
.DivLeaveBalance {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 530px;
    margin:auto;
}
.DivApvLeave {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 530px; /*530*/
    margin: auto;
}
.DivALBF {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 700px; /*530*/
    margin: auto;
}
.DivSelectDay {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    padding: 7px;
}
/*==================================================*/

.DivApplyTool_Row {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: flex;
    max-width: 500px;
}
.DivApplyTool_Title {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    flex: 1;
    min-width: 110px;
    max-width: 140px;
    background: #5cd2f2;
    padding: 5px;
}
.DivApplyTool_Data {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    flex: 3;
    background: #bbecfa;
    padding: 5px;
}

.DivApplyTool_Title2 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    background: #a17dca;
}

.DivApplyTool_Data2 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background: #d6b7f8;
}

.Div_Apply {
    float: left;
    text-align: center;
    vertical-align: middle;
    padding: 8px 10px 8px 10px;
    height: 17px;
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.Div_Apply_Title2 {
    float: left;
    background-color: #FFEBC7;
    background: #FFEBC7;
    padding: 8px 10px 8px 10px;
    text-align: left;
    height: 17px;
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
.Div_Apply_SmallScreenTitle {
    -webkit-flex: initial;
    flex: initial;
    width: 120px;
    min-width: 120px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.Div_Apply_SmallScreenTitle2 {
    -webkit-flex: initial;
    flex: initial;
    /*45*/
    width: 70px;
    min-width: 70px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.Div_Apply_SmallScreenDetail {
    text-align: left;
    flex-grow: 1;
    min-width: 30px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
/*==================================================*/
.DivHistoryInfo_Title {
    background-color: #ddffbc;
}
.DivHistoryInfo_Data {

    background-color: #feffde;
}
.DivHistory_inputDate {
    width: 220px;
}
.DivHistory_Status {
     width: 200px;
}
.DivHistory_Approver {
    width: 150px;
}
.DivHistory_LeaveType {
    width: 150px;
}
.DivHistory_Remark {
    width: 200px;
}
.DivHistory_Remark_260 {
    width: 260px;
}
.DivEntitle_LeaveCode {
    width: 60px;
}
.DivEntitle_LeaveDesp {
    width: 200px;
}
.DivEntitle_LeaveDetail {

    width: 120px;
}
.DivEntitle_LeaveDetail_Long {

    width: 200px;
}
.DivEntitle_LeaveDetailGraceNewLine {

    float: left;
    width: 100%;
}
/*==================================================*/

.DivApvList_ChkBox {
    width: 30px;
}
.DivApvList_StaffNo_S {
    width: 80px;
}
.DivApvList_Remark_L {
    width: 120px;
}


.DivApvList_StatusIcon {
    width: 50px;
}
.DivApvList_WorkMin {
    width: 80px;
}
.DivApvList_StaffNo {
    width: 100px;
}
.DivApvList_StaffName {
    width: 200px;
}
.DivApvList_DatePeriod {
    width: 250px;
}
.DivApvList_LeaveType {
    width: 150px;
}
.DivApvList_Remark {
    width: 100px;
}
.DivApvList_Attach {
    width: 70px;
}
/*==================================================*/
.DivApproveListOption {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 700px;
    margin:auto;
}
.DivLeaveListAlert_Small {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #EEE5DE;
    width: 450px;
    margin:auto;
}

.Div450Mid {
    display:block;
    width: 450px;
    margin: auto;
    text-align:center
}

.DivLeaveListAlert_Small300 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-color: #EEE5DE;
    width: 300px;
    margin: auto;
}

.DivClaimStatement {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 500px;
    margin: auto;
}

.DivLeaveListAlert {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 650px;
    background-color: #EEE5DE;
    margin:auto;
}
.DivLeaveList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 850px;
    margin:auto;
}
.DivApplyOTList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 860px;
    margin: auto;
}
.DivALBFList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 800px; /*700*/
    margin: auto;
}
.DivApplyExpenseList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 1110px;
    margin: auto;
}
.DivGPAttendList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 780px;
    margin: auto;
}
.DivGPAttendListDetail {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 970px;
    margin: auto;
}

.DivLeaveList_Title {
    text-align: center;
    vertical-align: middle;
    background-color: #FFE0A9;
}
.DivLeaveList_Data {
    text-align: center;
    vertical-align: middle;
    /*background-color: #ffffff;*/
}
.DivLeaveList_Data_LeftAlign {
    text-align: left;
    vertical-align: middle;
    /*background-color: #ffffff;*/
}
.DivLeaveList_Data_RightAlign {
    text-align: right;
    vertical-align: middle;
    /*background-color: #ffffff;*/
}
.DivLeaveList_Data_CenterAlign {
    text-align: center;
    vertical-align: middle;
    /*background-color: #ffffff;*/
}
.DivLeaveList_Empty {
    float: left;
    text-align: center;
    padding: 8px 11px 8px 10px;
}
.DivLeaveList_RowTitle {
    background-color: #FFEBC7;
    text-align: left;
    flex:1;
}
.DivLeaveList_ChkBx {
    width: 40px;
}
.DivLeaveList_DateRange {
    width: 250px;
}
.DivLeaveList_DayCount {
    width: 50px;
}
.DivLeaveList_LeaveType {
    width: 200px;
}
.DivLeaveList_Status {
    width: 150px;
}
.DivLeaveList_Button {
    width: 80px;
}
.DivLeaveList_DateSt {
    width: 100px;
}
.DivLeaveList_DayBalance {
    width: 70px;
}



.DivGpLeaveList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 830px;
    margin: auto;
}
.DivGpLeaveList_HIdeLeave {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 630px;
    margin: auto;
}

.DivGpLeaveList_Detail {
    min-width: 200px;
}
.DivGpLeaveList_StaffNo {
    min-width: 80px;
}
.DivGpLeaveList_Status {
    min-width: 150px;
}
/*==================================================*/
.GridTable {
    border-collapse: collapse;
    width: 100%;
    font-size: 10pt;
}
    .GridTable_MaxWidth800{
        max-width:800px;
    }

    .GridTable tr th {
        background-color: var(--Grid-header-Bg);
        color: #000000;
        padding: 10px 10px 10px 10px;
        border: 1px solid var(--Grid-header-border);
        font-weight: bold;
        text-transform: capitalize;
        text-align: left;
    }

    .GridTable tr:nth-child(2n+2) {
        background-color: var(--Grid-EvenRow);
    }

    .GridTable tr:nth-child(2n+1) td {
        background-color: var(--Grid-OldRow);
        color: #333333;
    }

    .GridTable tr td {
        padding: 5px 10px 5px 10px;
        color: #333333;
        border: 1px solid var(--Grid-border);
        vertical-align: middle;
        text-align: left;
    }
.GridCodeWidth {
    min-width: 80px;
}

.GridDespWidth {
    min-width: 120px;
}

.GridQtyWidth {
    min-width: 40px;
}

/*=================== Common =====================*/
.lblLeftAlign {
    text-align: left;
}
.DivTest{
    
    width:100%;
    background:rgb(156,214,122);
}
.EvenRowBG {
    background-color: #FFF8E4;
}
.OldRowBG {
    background-color: #FFFEF0;
}
.ApplyRowBG {
    background-color: #fffa86;
}
.ApvedRowBG {
    background-color: #ccffa6;
}


.lblAttachment {
    cursor: pointer;
    color: #104896;
    text-decoration: underline;
}
.lblGridlabel_SmallPadding {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: inline-block;
    padding: 4px 5px 4px 5px;
    min-height: 15px;
}
.lblGridlabelTitle {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    font-weight: bold;
}
.lblGridlabel_TB {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: inline-block;
    padding: 6px 0px 6px 0px;
    min-height: 15px;
}
.lblGridlabel {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: inline-block;
    padding: 6px 10px 6px 10px;
    min-height: 15px;
}
.lblGridlabel_Middle {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: inline-block;
    padding: 8px 0px 8px 0px;
    min-height: 15px;
}
.TxtGridtextbox {
    display: inline-block;
    margin: 6px 10px 3px 10px;
    min-height: 15px;
    min-width:50px;      
}
.TxtGrid_Button {
    display: inline-block;
    margin: 6px 10px 3px 10px;
}
.TxtGrid100Pcttextbox {
    display: inline-block;
    min-height: 15px;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    margin-bottom:3px;
}
.TxtGridDivMargin {
    margin: 6px 10px 0px 10px
}
.TxtEmpEditInfo {
    display: inline-block;
    min-height: 15px;
    width: 300px;
    margin-bottom: 3px;
}

.TxtGridcboBox {
    min-width: 200px;
}
.TxtDateBox {
    padding-left:10px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 90px;
}
.TxtRemark {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
}
.TxtRemarkBox {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    height: 50px;
}

.Div_Row {
    display: flex;
    overflow: hidden;
    clear: both;
}
.DivGridStandardNoborder {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    overflow: visible;
}
.DivGridStandard {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    float: left;
    overflow: visible;
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
}

.TxtApplyRemark {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 70px;
    width:100%;
}

.TxtDate {
    width: 80px;
}

.TxtQty {
    width: 30px;
}
.TxtNum {
    width: 40px;
}

.CboNum {
    width: 50px;
}
.txt100Per {
    width: 99%;
}
.txt90Per {
    width: 90%;
}

.Div_minWidth120 {
    min-width: 140px; /*125*/
}
.DivEmpty {
    clear: both;
    height: 10px;
}
.DivEmptyFlex {
    flex:1px;
    width:10px

}
.DivFloat {
    float: left;
}

.DivClearFloat {
    clear: both;
}
.NoTextDeco {
    text-decoration: none;
}

.overlay {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow: auto;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.4);
}
.DivAlertPanel {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    margin: 10px;
    border: 1px solid #5E4E49;
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.DivAlertPanelTitle {
    background-color: #FF6A6A;
    color: #FFFFFF;
    font-weight: bold;
    text-align: Center;
    width: 100%;
}


.Div_BorderWidth {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    border: 1px solid #5E4E49;
}


.Div_BorderWidth_Top {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    border-top: 1px solid #5E4E49;
}

.Div_BorderWidth_Left {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    border-left: 1px solid #5E4E49;
}

.Div_BorderWidth_Right {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    border-right: 1px solid #5E4E49;
}

.Div_BorderWidth_Bottom {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    border-bottom: 1px solid #5E4E49;
}


.PaddingLR10{
    padding-left:10px;
    padding-right:10px;
}

.DivButton {
    background-color: #f5f5f5;
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 140%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.DivButton_Green {
    background-color: #D9FFBE;
    color: #104E20;
}

.DivButton_Yellow {
    background-color: #FEFFCE;
    color: #6D5D2E;
}
.DivButton_Blue {
    background-color: #A9CEEE;
    color: #37375E;
}

.DivButton_Pink {
    color: #990000;
    background-color: rgb(255,212,212);     
    
}

.StandardButton {
    display: block;
    border: 1px solid #505050;
    background-color: #f5f5f5;
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 5px;
}

.lblErrAlert {
    color: #C42D35;
    font-weight: bold;
}
.lblColor_Blue {
    color: #0066FF;
}
.lblColor_Red {
    color: #9C0300;
}
.lblColor_Green {
    color: #0C5E0B;
}
.DivColor_BrownTitle {
    background-color: #FFE0A9;
    font-weight: bold;
    color: brown;
}
.DivColor_BrownRedTitle {
    background-color: #990000;
    font-weight: bold;
    color: #ffffff;
}
.DivColor_BrownRedShineTitle {
    background-color: #dd3838;
    font-weight: bold;
    color: #ffffff;
}
.DivColor_Blue {
    background-color: #BBE0FF;
    color: #144B61;
}
.DivColor_LightBlue {
    background-color: #D7E6F2;
    color: #144B61;
}
.DivColor_Red {
    background-color: #C8252D;
    color: #FFFFFF;
}
.DivColor_Green {
    background-color: #ACE2AA;
    color: #1C3815;
}
.DivColor_Yellow {
    background-color: #FFF500;
    color: #6A2B07;
}
.DivColor_SharpYellow {
    background-color: #FFFD00;
    color: #D50F5D;
}
.DivColor_SharpGreen {
    background-color: #8AFF2C;
    color: #171E1B;
}
.DivColor_Pink {
    background-color: #FFC6C5;
    color: #4B100F;
}
.Div_TopBorder {
    border-top: 1px solid #5E4E49;
}

.Label_Flashing {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    90% {
        opacity: 0.5;
    }
}

/*=================== Common =====================*/





/*==================================================*/
@media screen and (max-width:500px) {
    html, body {
        overflow-x: hidden;
    }

    body {
        position: relative;
    }
    .CboWidth300px {
        width: 100%;
    }
    .Div_HideNotFullScreen {
        width: 0px;
        border: 0px;
        padding: 0px;
        visibility: collapse;
        display: none;
    }
    .Div_SmallScreen_RightBorder {
        border-right: 1px solid #5E4E49;
    }
    .Div_SmallScreen_BottomBorder{
        border-bottom: 1px solid #5E4E49;
    }
    .Div_SmallScreen_Row {
        clear: both;
        display: flex;
        width:95%;
    }
    .Div_SmallScreen_Row_50pct {
        clear: both;
        display: flex;
        width: 100%;
    }
    .TxtRemarkBox {
        width: 90%;
    }
    .TxtGridtextbox {
        max-width:90%;
    }

    /*---------*/
    .DivCalenderRemark {
        width: 100%;
    }
    /*---------*/
    .DivHistoryInfo_Title {
        min-width: 120px;
        flex: 1;
    }
    .DivHistoryInfo_Data {
        flex: 3;
    }
    /*---------*/
    .DivApproveListOption {
        width: 100%;
    }
    .DivLeaveListAlert_Small{
        width:90%;
    }
    .DivLeaveListAlert {
        width: 100%;
    }
    .DivLeaveList {
        width: 100%;
    }
    .DivGpLeaveList {
        width: 100%;
    }
    .DivGpLeaveList_HIdeLeave {
        width: 100%;
    }
    .DivApplyOTList {
        width: 100%;
    }
    .DivApplyExpenseList {
        width: 100%;
    }
    .DivALBFList {
        width: 100%;
    }
    .DivLeaveCalender {
        width: 100%;
    }
    .DivLeaveCalender_Calender {
        width: 100%;
        margin: 0px;
    }
    .CalenderCtl {
        width: 100%;
    }
    .DivGPAttendList {
        width: 100%;
    }
    .DivGPAttendListDetail{
        width:100%;
    }
    .DivLeaveList_DateRange {
        flex: 3;
    }

    .DivLeaveList_DayCount {
        flex: 2;
    }
    .DivLeaveList_DayBalance {
        flex: 1;
    }
    .DivLeaveList_LeaveType {
        flex: 2;
    }

    .DivLeaveList_Status {
        flex: 2;
    }

    .DivLeaveList_Button {
        flex: 1;
    }
    .DivLeaveList_DateSt {
        flex: 2;
    }
    .DivHistory_inputDate {
        flex: 2;
    }
    .DivHistory_Status {
        flex: 2;
    }
    .DivHistory_Approver {
        flex: 2;
    }
    .DivHistory_LeaveType {
        flex: 2;
    }
    .DivHistory_Remark {
        flex: 2;
    }
    .DivHistory_Remark_260 {
        flex: 2;
    }
    .DivEntitle_LeaveCode {
        flex: 2;
    }
    .DivEntitle_LeaveDetail {
        flex: 2;
    }
    .DivEntitle_LeaveDetail_Long{
        flex:2;
    }
    .DivApvList_StatusIcon {
        flex: 2;
    }
    .DivApvList_StaffNo_S {
        flex: 2;
    }
    .DivApvList_WorkMin {
        flex: 2;
    }
    .DivApvList_StaffNo {
        flex: 2;
    }
    .DivApvList_StaffName {
        flex: 2;
    }
    .DivApvList_DatePeriod {
        flex: 2;
    }
    .DivApvList_LeaveType {
        flex: 2;
    }
    .DivApvList_Remark {
        flex: 2;
    }
    .DivApvList_Remark_L {
        flex: 2;
    }
    .DivApvList_Attach {
        flex: 2;
    }
    .DivGpLeaveList_Detail {
        flex: 2;
    }
    .DivGpLeaveList_StaffNo {
        flex: 2;
    }
    .DivGpLeaveList_Status {
        flex: 2;
    }
    .DivEntitle_LeaveDetailGrace {
        padding-left: 10px;
    }
    /*---------*/
    .DivExtraData_EmpWhoteInfo {
        flex:1;
        min-width:100px;
    }
    .DivExtraData_EmpWholeInfo_Flex3 {
        flex: 1;
        min-width: 100px;
    }
    .DivExtraData_EmpNo {
        width:100%;
    }
    .DivExtraData_EmpDesp {
        width:100%;
    }
    /*---------*/
    .DivLeaveBalance{
        width:100%;
    }
        .DivApvLeave {
        width: 100%;
    }
    .DivSelectDay {
        display: flex;
        width: 100%;
    }

    .DivSelectDayTitle {
        width:40px;
        text-align: right;
        margin-right:5px;
    }
    .DivSelectDayContent {
        flex:3;
    }

    /*---------*/
}
@media screen and (min-width:501px) {
    .DivGridStandard_SameDivHeight {
        padding-bottom: 100%;
        margin-bottom: -100%;
    }
    .Div_FullScreen_Row {
        display: flex;
        overflow: hidden;
        clear: both;
    }
    .Div_SmallScreen_Row_50pct {
        width: 50%;
        display: flex;
    }
    .Div_SmallScreen_Row{
        float:left;
        display:flex;
    }
    .Div_RightBorder {
        border-right: 1px solid #5E4E49;
    }
    .Div_HideFullScreen {
        width: 0px;
        border: 0px;
        padding: 0px;
        visibility: collapse;
        display: none;
    }
    .TxtRemarkBox {
        width: 450px;
    }
    /*---------*/
    .DivEntitle {
        width: 740px;
        margin:auto;
    }
    .DivEntitle_Long {
        width: 900px;
        margin: auto;
    }
    .DivApvList_Batch {
        width: 1420px;
        margin: auto;
    }
    .DivApvList_Batch_TextStatus {
        width: 1480px;
        margin: auto;
    }
    .DivApvList {
        width: 1360px;
        margin: auto;
    }
    .DivApvList_TextStatus {
        width: 1420px;
        margin: auto;
    }

    .DivApvExpenseList {
        width: 1520px;
        margin: auto;
    }
    .DivApvExpenseList_TextStatus {
        width: 1580px;
        margin: auto;
    }
   
    .DivApvCPLList {
        width: 1210px;
        margin: auto;
    }
    .DivApvCPLList_TextStatus {
        width: 1250px;
        margin: auto;
    }
    .DivApvALBFList {
        width: 1180px;
        /*width: 1060px;*/
        margin: auto;
    }
    .DivViewLeaveList {
        width: 1150px;
        margin: auto;
    }
    .DivHistory {
        width: 920px;
        margin: auto;
    }
    .DivHistoryInfo_Title {
        width: 30%;
    }
    .DivHistoryInfo_Data {
        width: 70%;
    }
    .DivEntitle_LeaveDetailGrace {
        float: left;
        width: 100%;
    }
    /*---------*/
    .DivExtraData_EmpWhoteInfo {
        display: flex;
        flex:5;
    }
    .DivExtraData_EmpWholeInfo_Flex3 {
        display: flex;
        flex: 3;
    }
    .DivExtraData_EmpNo {
        min-width:60px;
        flex: 1;
    }
    .DivExtraData_EmpDesp {
        min-width: 100px;
        flex: 2;
    }
    /*---------*/
    .DivSelectDayTitle {
        width: 100%;
        text-align: center;
    }
    .DivSelectDayContent {
        width: 100%;
    }
    /*---------*/
}

/*---- Special -----*/
@media screen and (min-width:651px) {
    .DivLeaveCalender_Remark {
        max-width: 200px;
    }
    .DivCalenderRemark_Gp {
        width: 100%;
    }
}
    /*==================================================*/

/*====================== Attendence Rpt ============================*/
.lbl_SiteControlDetail_Title {
    font-weight: bold;
    color: brown;
}
.DixEmp_EvenRow {
    background-color: #F5F5F3;
}

.DixEmp_OddRow {
    background-color: #E6E0D4;
}

.Div_ViewAttendDetail_FullScreen_B1 {
    width: 1210px;
    margin-left: auto;
    margin-right: auto;
}

.Div_ViewAttendDetail_FullScreen {
    width: 998px;
    margin-left: auto;
    margin-right: auto;
}

.Div_ViewAttendDetail_Small {
    float: left;
    text-align: center;
    vertical-align: middle;
    padding: 6px 3px 6px 7px;
    height: 17px;
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
}

.Div_ViewAttendDetail_Title2 {
    float: left;
    background-color: #FFEBC7;
    padding: 6px 3px 6px 7px;
    text-align: left;
    height: 17px;
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
}

.DivSumTitle_Colour {
    background-color: #FCB794;
}

.DivSumDetail_Colour {
    background-color: #FFD7C3;
}

.Div_ViewAttendDetail_Row {
    display: table-row;
    min-height: 17px;
}

.Div_ViewAttendDetail_Title {
    float: left;
    background-color: #FFEBC7;
    padding: 7px 4px 7px 4px;
    text-align: center;
    vertical-align: central;
    height: 43px;
    display: table-cell;
    /*
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
        */
}

.Div_ViewAttendDetail {
    display: table-cell;
    float: left;
    text-align: center;
    vertical-align: middle;
    vertical-align: central;
    padding: 7px 4px 7px 4px;
    height: 100%;
    /*
    border-top: 1px solid #5E4E49;
    border-left: 1px solid #5E4E49;
        */
}

.Div_ViewAttendDetail_Summary {
    float: left;
    background-color: #FFEBC7;
    padding: 7px 4px 7px 4px;
    text-align: center;
    vertical-align: central;
    height: 17px;
    display: table-cell;
}

.Div_ViewAttend_Title {
    float: left;
    border: 1px solid #B8915C;
    padding: 8px 10px 8px 10px;
    width: 120px;
}

.Div_ViewAttend_Item {
    float: left;
    border: 1px solid #B8915C;
    width: 335px;
    padding: 8px 10px 8px 10px;
}

.Div_ViewAttend_WorkingDaySummary {
    width: 140px;
    text-align: left;
}

.Div_ViewAttend_WeekDay {
    width: 65px;
}

.Div_ViewAttend_Date {
    width: 67px;
}

.Div_ViewAttend_Time {
    width: 80px;
}

.Div_ViewAttend_Min_S {
    width: 32px;
}

.Div_ViewAttend_Min_M {
    width: 38px;
}

.Div_ViewAttend_Min_W {
    width: 54px;
}

.Div_ViewAttend_Remark {
    width: 76px;
}


.Div_ViewAttendDetail_SmallScreenTitle {
    -webkit-flex: initial;
    flex: initial;
    width: 68px;
    min-width: 68px;
}

.Div_ViewAttendDetail_SmallScreenTitle2 {
    -webkit-flex: initial;
    flex: initial;
    width: 107px;
    width: 107px;
}

.Div_ViewAttendDetail_SmallScreenTitle4 {
    -webkit-flex: initial;
    flex: initial;
    width: 100px;
    min-width: 100px;
}

.Div_ViewAttendDetail_SmallScreenTitle3 {
    -webkit-flex: initial;
    flex: initial;
    width: 150px;
    width: 150px;
}

.Div_ViewAttendDetail_SmallScreenTitle5 {
    -webkit-flex: initial;
    flex: initial;
    width: 117px;
    width: 117px;
}

.Div_ViewAttendDetail_SmallScreenTitle6 {
    -webkit-flex: initial;
    flex: initial;
    width: 130px;
    width: 130px;
}

.Div_ViewAttendDetail_SmallScreenDetail {
    text-align: left;
    flex-grow: 1;
    width: 25px;
}


@media screen and (max-width: 500px) {
    
    .Div_ViewAttendDetail_SmallScreenTitle {
        -webkit-flex: initial;
        flex: initial;
        width: 125px;
        min-width: 125px;
    }

    .Div_ViewAttendDetail_SmallScreenTitle2 {
        -webkit-flex: initial;
        flex: initial;
        width: 125px;
        min-width: 125px;
    }

    .Div_ViewAttendDetail_SmallScreenTitle4 {
        -webkit-flex: initial;
        flex: initial;
        width: 125px;
        min-width: 125px;
    }

    .Div_ViewAttendDetail_SmallScreenTitle3 {
        -webkit-flex: initial;
        flex: initial;
        width: 150px;
        min-width: 150px;
    }

    .Div_ViewAttendDetail_SmallScreenTitle5 {
        -webkit-flex: initial;
        flex: initial;
        width: 125px;
        min-width: 125px;
    }

    .Div_ViewAttendDetail_SmallScreenTitle6 {
        -webkit-flex: initial;
        flex: initial;
        width: 150px;
        min-width: 150px;
    }
}
/*====================== Attendence Rpt ============================*/


/*======================Master Page ============================*/

.DivCopyRight {
    text-align: center;
    color: #4D4D4D;
    font-size: 9pt;
}



/*==Wide Menu==*/
.DivMenuWide_Top {
    background: #A4EBF3;
    height: 25px;
    padding-left: 15px;
}

.DivMenuWide_Top_Right {
    position: absolute;
    right: 0px;
    top: 0px;
}

.DivMenuWide_CompName {
    padding: 5px 0px 0px 10px;
}

.DivMenuWide_Main {
    background-color: #CCF2F4;
    width: 100%;
    /*height:38px;*/
}

.DivMenuWide_MainDetail {
    display: table-cell;
}

.LnkLang_Menu {
    display: block;
    float: left;
    color: #063A3A;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 15px 5px 0px;
}

.LnkWideMenu {
    display: table-cell;
    float: left;
    color: #23696A;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 15px 8px 15px;
    border-right: 1px solid #B2AAAA;
}

@media screen and (max-width: 500px) {

    .DivMenuWide_Top {
        display: none;
    }

    .DivMenuWide_CompName {
        display: none;
    }

    .DivMenuWide_Main {
        display: none;
    }
    .br_ForWideMenu {
        display: none;
    }
}
/*==Wide Menu==*/

/*==Mobile Menu==*/
.Image_MobileBackGroup_Top {
    background: #CCF2F4;
    height: 40px;
}

.Image_MobileBackGroup_Side {
    background: #A4EBF3;
}

.DivMenuMobile_Top {
    background: #CCF2F4;
    height: 40px;
    clear: both;
}

.MobileMenuIcon {
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: pointer;
}

.MobileHeader {
    position: absolute;
    top: 0px;
    font-size: 20pt;
    /*top: 5px;
    font-size: 10pt;
        */
    display: table-cell;
    text-align: center;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    padding-left: 5px;
    padding-top: 5px;
    color: #23696A;
}

.MobileLogout {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 3px;
    cursor: pointer;
}

.lblPageHeader {
    font-size: 14pt;
    font-weight: bold;
    color: brown;
    display: block;
    width: 100%;
    text-align: center;
    background: #66C3C4; /*C46670*/
    color: #ffffff;
    padding: 8px 0 8px 0;
}

.DivMenuMoblie_OtherPart {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: #A3A09E;
    opacity: 0.8;
}

.DivMenuMoblie_OtherPart2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: #DEF4F4;
    opacity: 1;
    z-index: 12;
}

.DivMenuMoblie_SideMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: #DEF4F4;
    z-index: 13;
}

.DivMenuMoblie_SideMenuHeader {
    height: 40px;
    background: #A4EBF3;
}

.LnkSideMenuHeader {
    display: block;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    padding: 10px 0px 10px 0px;
    text-decoration: none;
    font-size: 13pt;
    color: #23696A;
    font-weight: bold;
}

.LnkSideMenu {
    display: block;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    font-size: 13pt;
    color: #463A2D;
    background: #f4f9f9;
    border-bottom: 1px solid #9D948C;
}

.LnkSideMenu_Empty {
    display: block;
    height: 35px;
    color: #463A2D;
    border-bottom: 1px solid #9D948C;
}

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

@media screen and (min-width: 501px) {

    .DivMobileHeader {
        display: none;
    }

    .DivMenuMobile_Top {
        display: none;
    }

    .DivMenuMoblie_OtherPart {
        display: none;
    }

    .DivMenuMoblie_OtherPart2 {
        display: none;
    }

    .DivMenuMoblie_SideMenu {
        display: none;
    }
}
/*==Mobile Menu==*/

/*---------Start of Logo/CompanyName Setting ----------*/
.HeaderLogo, .HeaderLogo:link, .HeaderLogo:visited, .HeaderLogo:active, .HeaderLogo:hover {
    text-decoration: none;
    font-size: 20pt;
    font-weight: bold;
    color: #703C85;    
    white-space: nowrap;
    padding-left: 5px;
    padding-top: 5px;
}

.lblPageHeader_NextByCompName {
    font-size: 13pt;
    font-weight: bold;
    padding-left: 25px;
    color: #853C76;
}


.PagePanel_Center {
    max-width: 1400px;
    
    margin:auto;
}


.PagePanel_CenterAuto {
    margin: auto;
}
@media screen and (max-width: 500px) {
    .PagePanel_Center {
        margin-left: 3px;
        margin-right: 3px;
    }
}
    /*---------End of Logo/CompanyName Setting ----------*/

    /*======================Master Page ============================*/