/*-------------------------------------------------------------------*/
body {
    font-size: 12px;
    font-family: "SegoeUI","Tahoma";
    margin: 0;
    padding: 0;
    color: #000;
}

input, select, textarea {
    font-size: 12px;
    font-family: "Tahoma", "SegoeUI";
}

.input-append, .input-prepend {
    margin-bottom: 0;
}

.layout-l {
    float: left;
    width: 48%;
    padding: 0;
}

.layout-r {
    float: right;
    width: 48%;
    padding: 0;
}

.fl_l {
    float: left;
}

.fl_r {
    float: right;
    /*Keneji_phat Modify 2016-03-16*/
    /*margin-left: 5px;
    margin-right: 5px;*/
}

.layout_center {
    margin: 0 auto;
}

.inline {
    display: inline-block;
}
/*Nirun 20200311 ปรับให้รองรับ edge Ie*/
.alert-success {
    background-color: rgba(178, 219, 161, 0.8784313725490196) !important;
    height: 70px;
    color: rgb(2, 62, 3);
    padding-top: 20px !important;
    background-image: none !important;
    font-family: 'thai_sans_literegular';
    font-size: 20px !important;
}

.alert-error {
    background-color: #f5d3d3e0 !important;
    height: 70px;
    padding-top: 20px !important;
    background-image: none !important;
    font-family: 'thai_sans_literegular';
    font-size: 20px !important;
    border: 0px;
}

.clean {
    clear: both;
}

.clean3 {
    clear: both;
    height: 3px;
}

.clean5 {
    clear: both;
    height: 5px;
}

.clean7 {
    clear: both;
    height: 7px;
}

.clean8 {
    clear: both;
    height: 8px;
}

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

.clean15 {
    clear: both;
    height: 15px;
}

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

.clean25 {
    clear: both;
    height: 25px;
}

.clean30 {
    clear: both;
    height: 30px;
}

.clean40 {
    clear: both;
    height: 40px;
}

.clean50 {
    clear: both;
    height: 50px;
}

.clean60 {
    clear: both;
    height: 60px;
}

.clean70 {
    clear: both;
    height: 70px;
}

.clean80 {
    clear: both;
    height: 80px;
}

.clean90 {
    clear: both;
    height: 90px;
}

.clean100 {
    clear: both;
    height: 100px;
}

.clean110 {
    clear: both;
    height: 110px;
}

.clean115 {
    clear: both;
    height: 115px;
}

.clean120 {
    clear: both;
    height: 120px;
}

.clean130 {
    clear: both;
    height: 130px;
}

.clean140 {
    clear: both;
    height: 140px;
}

.clean150 {
    clear: both;
    height: 150px;
}

.clean160 {
    clear: both;
    height: 160px;
}

.clean170 {
    clear: both;
    height: 170px;
}

.clean180 {
    clear: both;
    height: 180px;
}

.clean190 {
    clear: both;
    height: 190px;
}

.clean200 {
    clear: both;
    height: 200px;
}

.v_mid {
    vertical-align: middle;
}

.cursor, .cursor-pointer {
    cursor: pointer;
}

.mar_center {
    margin: 0 auto;
    display: table;
}

.mar_0 {
    margin: 0;
}

.mar_5 {
    margin: 5px;
}

.mar_10 {
    margin: 10px;
}

.mar_15 {
    margin: 15px;
}

.mar_20 {
    margin: 20px;
}

.mar_30 {
    margin: 30px;
}

.mar_t-1 {
    margin-top: -1px;
}

.mar_t1 {
    margin-top: 1px;
}

.mar_t2 {
    margin-top: 2px;
}

.mar_t3 {
    margin-top: 3px;
}

.mar_t4 {
    margin-top: 4px;
}

.mar_t5 {
    margin-top: 5px;
}

.mar_t6 {
    margin-top: 6px;
}

.mar_t7 {
    margin-top: 7px;
}

.mar_t8 {
    margin-top: 8px;
}

.mar_t9 {
    margin-top: 9px;
}

.mar_t10 {
    margin-top: 10px;
}

.mar_t12 {
    margin-top: 12px;
}

.mar_t13 {
    margin-top: 13px;
}

.mar_t15 {
    margin-top: 15px;
}

.mar_t20 {
    margin-top: 20px;
}

.mar_t25 {
    margin-top: 25px;
}

.mar_t30 {
    margin-top: 30px;
}

.mar_t40 {
    margin-top: 40px;
}

.mar_t50 {
    margin-top: 50px;
}

.mar_t60 {
    margin-top: 60px;
}

.mar_t65 {
    margin-top: 65px;
}

.mar_t55 {
    margin-top: 55px;
}

.mar_t57 {
    margin-top: 57px;
}

.mar_t80 {
    margin-top: 80px;
}

.mar_t100 {
    margin-top: 100px;
}

.mar_t110 {
    margin-top: 110px;
}

.mar_t120 {
    margin-top: 120px;
}

.mar_t130 {
    margin-top: 130px;
}

.mar_t140 {
    margin-top: 140px;
}

.mar_t150 {
    margin-top: 150px;
}

.mar_t175 {
    margin-top: 175px;
}

.mar_t200 {
    margin-top: 200px;
}

.mar_t-5 {
    margin-top: -5px;
}

.mar_tl17 {
    margin: 17px 0 0 17px;
}

.mar_tb5 {
    margin: 5px 0;
}

.mar_r2 {
    margin-right: 2px;
}

.mar_r5 {
    margin-right: 5px;
}

.mar_r6 {
    margin-right: 6px;
}

.mar_r7 {
    margin-right: 7px;
}

.mar_r10 {
    margin-right: 10px;
}

.mar_r15 {
    margin-right: 15px;
}

.mar_r25 {
    margin-right: 25px;
}

.mar_r20 {
    margin-right: 20px;
}

.mar_r30 {
    margin-right: 30px;
}

.mar_r40 {
    margin-right: 40px;
}

.mar_r50 {
    margin-right: 50px;
}

.mar_r60 {
    margin-right: 60px;
}

.mar_r100 {
    margin-right: 100px;
}

.mar_l0 {
    margin-left: 0;
}

.mar_l1 {
    margin-left: 1px;
}

.mar_l2 {
    margin-left: 2px;
}

.mar_l3 {
    margin-left: 3px;
}

.mar_l4 {
    margin-left: 4px;
}

.mar_l5 {
    margin-left: 5px;
}

.mar_l6 {
    margin-left: 6px;
}

.mar_l7 {
    margin-left: 7px;
}

.mar_l8 {
    margin-left: 8px;
}

.mar_l9 {
    margin-left: 9px;
}

.mar_l10 {
    margin-left: 10px;
}

.mar_l12 {
    margin-left: 12px;
}

.mar_l13 {
    margin-left: 13px;
}

.mar_l15 {
    margin-left: 15px;
}

.mar_l17 {
    margin-left: 17px;
}

.mar_l20 {
    margin-left: 20px;
}

.mar_l22 {
    margin-left: 22px;
}

.mar_l25 {
    margin-left: 25px;
}

.mar_l27 {
    margin-left: 27px;
}

.mar_l30 {
    margin-left: 30px;
}

.mar_l40 {
    margin-left: 40px;
}

.mar_l50 {
    margin-left: 50px;
}

.mar_l60 {
    margin-left: 60px;
}

.mar_l70 {
    margin-left: 70px;
}

.mar_l75 {
    margin-left: 75px;
}

.mar_l80 {
    margin-left: 80px;
}

.mar_l100 {
    margin-left: 100px;
}

.mar_l110 {
    margin-left: 110px;
}

.mar_l120 {
    margin-left: 120px;
}

.mar_l130 {
    margin-left: 130px;
}

.mar_l150 {
    margin-left: 150px;
}

.mar_l160 {
    margin-left: 160px;
}

.mar_l185 {
    margin-left: 185px;
}

.mar_l205 {
    margin-left: 205px;
}

.mar_l170 {
    margin-left: 170px;
}

.mar_l215 {
    margin-left: 215px;
}

.mar_l250 {
    margin-left: 250px;
}

.mar_l290 {
    margin-left: 290px;
}

.mar_l300 {
    margin-left: 300px;
}

.mar_l450 {
    margin-left: 450px;
}

.mar_l500 {
    margin-left: 500px;
    margin-left: 550px;
}

.mar_rl3 {
    margin: 0 3px;
}

.mar_rl5 {
    margin: 0 5px;
}

.mar_rl10 {
    margin: 0 10px;
}

.mar_tr10 {
    margin: 10px 0 0 10px;
}

.mar_rl20 {
    margin: 0 20px;
}

.mar_rl30 {
    margin: 0 30px;
}

.mar_t8r30 {
    margin: 8px 30px 0 0;
}

.mar_tl10 {
    margin: 10px 0 0 10px;
}

.mar_tb10 {
    margin: 10px 0;
}

.mar_tb15 {
    margin: 15px 0;
}

.mar_tb20 {
    margin: 20px 0;
}

.mar_tbl10 {
    margin: 10px 0 10px 10px;
}

.margin_b10 {
    margin-bottom: 10px;
}

.mar_b0 {
    margin-bottom: 0;
}

.mar_b1 {
    margin-bottom: 1px;
}

.mar_b2 {
    margin-bottom: 2px;
}

.mar_b3 {
    margin-bottom: 3px;
}

.mar_b4 {
    margin-bottom: 4px;
}

.mar_b5 {
    margin-bottom: 5px;
}

.mar_b10 {
    margin-bottom: 10px;
}

.mar_b12 {
    margin-bottom: 12px;
}

.mar_b15 {
    margin-bottom: 15px;
}

.mar_b20 {
    margin-bottom: 20px;
}

.mar_b30 {
    margin-bottom: 30px;
}

.mar_b40 {
    margin-bottom: 40px;
}

.mar_b50 {
    margin-bottom: 50px;
}

.mar_b60 {
    margin-bottom: 60px;
}

.padd0 {
    padding: 0;
}

.padd15 {
    padding: 15px;
}

.padd5 {
    padding: 5px;
}

.padd10 {
    padding: 10px;
}

.padd_t5 {
    padding-top: 5px;
}

.padd_t6 {
    padding-top: 6px;
}

.padd_t7 {
    padding-top: 7px;
}

.padd_t8 {
    padding-top: 8px;
}

.padd_t10 {
    padding-top: 10px;
}

.padd_t15 {
    padding-top: 15px;
}

.padd_t20 {
    padding-top: 20px;
}

.padd_t25 {
    padding-top: 25px;
}

.padd_t30 {
    padding-top: 30px;
}

.padd_t35 {
    padding-top: 35px;
}

.padd_t40 {
    padding-top: 40px;
}

.padd_t4 {
    padding-top: 4px;
}

.padd_l0 {
    padding-left: 0;
}

.padd_l5 {
    padding-left: 5px;
}

.padd_l10 {
    padding-left: 10px;
}

.padd_l15 {
    padding-left: 15px;
}

.padd_l20 {
    padding-left: 20px;
}

.padd_l25 {
    padding-left: 25px;
}

.padd_l30 {
    padding-left: 30px;
}

.padd_l35 {
    padding-left: 35px;
}

.padd_l50 {
    padding-left: 50px;
}

.padd_l75 {
    padding-left: 75px;
}

.padd_r5 {
    padding-right: 5px;
}

.padd_r10 {
    padding-right: 10px;
}

.padd_r20 {
    padding-right: 20px;
}

.padd_r25 {
    padding-right: 25px;
}

.padd_r30 {
    padding-right: 30px;
}

.padd_r35 {
    padding-right: 35px;
}

.padd_t90 {
    padding-top: 90px;
}

.padd_b4 {
    padding-bottom: 4px;
}

.padd_b5 {
    padding-bottom: 5px;
}

.padd_b6 {
    padding-bottom: 6px;
}

.padd_b7 {
    padding-bottom: 7px;
}

.padd_b10 {
    padding-bottom: 10px;
}

.padd_b15 {
    padding-bottom: 15px;
}

.padd_b20 {
    padding-bottom: 20px;
}

.padd_b25 {
    padding-bottom: 25px;
}

.padd_b30 {
    padding-bottom: 30px;
}

.padd_b35 {
    padding-bottom: 35px;
}

.padd_30 {
    padding: 30px;
}

.padd_20 {
    padding: 20px;
}

.padd_10 {
    padding: 10px;
}

.padd_5 {
    padding: 5px;
}

.padd_tb5 {
    padding: 5px 0;
}

.padd_tb10 {
    padding: 10px 0;
}

.padd_tb15 {
    padding: 15px 0;
}

.padd_lr5 {
    padding: 0 5px;
}

.padd_lr10 {
    padding: 0 10px;
}

.padd_lr20 {
    padding: 0 20px;
}

.padd_lr30 {
    padding: 0 30px;
}

.padd_rl5 {
    padding: 0 5px;
}

.padd_rl10 {
    padding: 0 10px;
}

.brdr {
    border: 1px solid #ddd;
}

.br_gray89 {
    border: 1px solid #e3e3e3;
}

.border-red {
    border: 1px solid red;
}

.h12 {
    height: 12px;
}

.h13 {
    height: 13px;
}

.h14 {
    height: 14px;
}

.h15 {
    height: 15px;
}

.h16 {
    height: 16px;
}

.h20 {
    height: 20px;
}

.h25 {
    height: 25px;
}

.h30 {
    height: 30px;
}

.h35 {
    height: 35px;
}

.h45 {
    height: 45px;
}

.h52 {
    height: 52px;
}

.h70 {
    height: 70px;
}

.h150 {
    height: 150px;
}

.hAuto {
    height: auto;
}

.h350 {
    height: 350px;
}

.w10 {
    width: 10px;
}

.w20 {
    width: 20px;
}

.w30 {
    width: 30px;
}

.w40 {
    width: 40px;
}

.w50 {
    width: 50px;
}

.w60 {
    width: 60px;
}

.w70 {
    width: 70px;
}

.w80 {
    width: 80px;
}

.w90 {
    width: 90px;
}

.w95 {
    width: 95px;
}

.w100 {
    width: 100px;
}

.w110 {
    width: 110px;
}

.w120 {
    width: 120px;
}

.w130 {
    width: 130px;
}

.w135 {
    width: 135px;
}

.w140 {
    width: 140px;
}

.w150 {
    width: 150px;
}

.w155 {
    width: 155px;
}

.w170 {
    width: 170px;
}

.w175 {
    width: 175px;
}

.w179 {
    width: 179px;
}

.w180 {
    width: 180px;
}

.w200 {
    width: 200px;
}

.w210 {
    width: 210px;
}

.w220 {
    width: 220px;
}

.w225 {
    width: 225px;
}

.w230 {
    width: 230px;
}

.w238 {
    width: 238px;
}

.w240 {
    width: 240px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w400 {
    width: 400px;
}

.w418 {
    width: 418px;
}

.w450 {
    width: 450px;
}

.w500 {
    width: 500px;
}

.w700 {
    width: 700px;
}

.w720 {
    width: 720px;
}

.w750 {
    width: 750px;
}

.w760 {
    width: 760px;
}

.w780 {
    width: 780px;
}

.w800 {
    width: 800px;
}

.w910 {
    width: 910px;
}

.wAuto {
    width: auto;
}

.opacity-1 {
    opacity: .1;
}

.opacity-2 {
    opacity: .2;
}

.opacity-3 {
    opacity: .3;
}

.opacity-4 {
    opacity: .4;
}

.opacity-5 {
    opacity: .5;
}

.opacity-6 {
    opacity: .6;
}

.opacity-7 {
    opacity: .7;
}

.opacity-8 {
    opacity: .8;
}

.opacity-9 {
    opacity: .9;
}

.font_center, .text_c {
    text-align: center;
}

.font_right, .text_r {
    text-align: right;
}

.font_left, .text_l {
    text-align: left;
}

.font-grid {
    font-size: 12px;
}

.font-ss {
    font-size: 10px;
}

.font-s {
    font-size: 11px;
}

.font-m {
    font-size: 13px;
}

.font-l {
    font-size: 15px;
}

.font-xl {
    font-size: 18px;
}

.font-xxl {
    font-size: 22px;
}

.font-blue {
    color: #2B92F2;
}

.font-black {
    color: #000;
}

.font-midblue {
    color: #2B92F2;
}

.font-warning {
    color: #f0ad4e;
}

.font-red {
    color: #FF1300 !important;
}

.font-red_icon {
    color: #FD2F2F;
}

.font-green {
    color: #099;
}

.font-orange {
    color: #F1B35C;
}

.font-yellow {
    color: #ff0;
}

.font-aqua {
    color: #2AAABB;
}

.font-redlight {
    color: #d9534f;
}

.font-normal {
    font-weight: 400;
}

.font-graylitht {
    color: #999;
}

a.font-black {
    color: #000;
}

a:hover.font-black {
    color: #000;
    text-decoration: underline;
}

a.font-gray {
    color: #666;
}

a:hover.font-gray {
    color: #666;
    text-decoration: underline;
}

.b {
    font-weight: 700;
}

.font-white {
    color: #FFF;
}

.shadow-blue {
    text-shadow: 2px 2px 2px #3f8cb5;
    filter: dropshadow(color=#3f8cb5,offx=1,offy=2);
}

.font-prosoft {
    font-family: 'thai_sans_literegular';
    font-size: 23px;
    color: #0D638E;
}

.bg-gd-blue {
    background: #6dc0f0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYzBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzU4YjRlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MGE1ZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,#6dc0f0 0%,#58b4ea 51%,#40a5e2 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6dc0f0),color-stop(51%,#58b4ea),color-stop(100%,#40a5e2));
    background: -webkit-linear-gradient(top,#6dc0f0 0%,#58b4ea 51%,#40a5e2 100%);
    background: -o-linear-gradient(top,#6dc0f0 0%,#58b4ea 51%,#40a5e2 100%);
    background: -ms-linear-gradient(top,#6dc0f0 0%,#58b4ea 51%,#40a5e2 100%);
    background: linear-gradient(to bottom,#6dc0f0 0%,#58b4ea 51%,#40a5e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc0f0',endColorstr='#40a5e2',GradientType=0);
}

.bg-gd-gray {
    background: #ccc;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,#ccc 0%,#ddd 44%,#f6f6f6 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ccc),color-stop(44%,#ddd),color-stop(100%,#f6f6f6));
    background: -webkit-linear-gradient(top,#ccc 0%,#ddd 44%,#f6f6f6 100%);
    background: -o-linear-gradient(top,#ccc 0%,#ddd 44%,#f6f6f6 100%);
    background: -ms-linear-gradient(top,#ccc 0%,#ddd 44%,#f6f6f6 100%);
    background: linear-gradient(to bottom,#ccc 0%,#ddd 44%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#f6f6f6',GradientType=0);
}

hr.bg-gd-gray {
    border-top: 1px solid #ccc;
    clear: both;
    display: block;
    width: 100%;
    height: 5px;
    margin: 0;
}

.bg-gray-blue {
    background: #ecf1f8;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZjFmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2VjZjFmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2UzZTlmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,#ecf1f8 0%,#ecf1f8 33%,#e3e9f3 99%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ecf1f8),color-stop(33%,#ecf1f8),color-stop(99%,#e3e9f3));
    background: -webkit-linear-gradient(top,#ecf1f8 0%,#ecf1f8 33%,#e3e9f3 99%);
    background: -o-linear-gradient(top,#ecf1f8 0%,#ecf1f8 33%,#e3e9f3 99%);
    background: -ms-linear-gradient(top,#ecf1f8 0%,#ecf1f8 33%,#e3e9f3 99%);
    background: linear-gradient(to bottom,#ecf1f8 0%,#ecf1f8 33%,#e3e9f3 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ecf1f8',endColorstr='#e3e9f3',GradientType=0);
}

.timeset {
    border: 1px solid #DDD;
    width: 100%;
    background: #fff;
}

.btn-for-search {
    float: left;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -moz-border-radius: 0;
    padding: 5px 9px;
    margin-left: 5px;
    text-transform: capitalize;
    border-radius: 3px;
    width: 80px;
    text-align: center;
    cursor: pointer;
    height: 30px;
    font-size: 14px;
    color: #fff !important;
    background-color: #0F7AFD !important;
    border: 1px solid #0F7AFD !important;
}

    .btn-for-search:hover {
        color: #fff !important;
        background-color: #006DE6 !important;
        border: 1px solid #006DE6 !important;
    }

.btn-for-cancel {
    float: left;
    border: 1px solid #D7D7D7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -moz-border-radius: 0;
    color: #515151;
    padding: 5px 9px;
    margin-left: 5px;
    text-transform: capitalize;
    border-radius: 3px;
    background-color: #E4E4E4;
    width: 80px;
    text-align: center;
    cursor: pointer;
    height: 30px;
    font-size: 14px;
}

    .btn-for-cancel:hover {
        background-color: #D7D7D7;
    }

.btn-close-bombox {
    width: 50px;
    text-align: center;
}

.btn-flat {
    display: block;
    border: none;
    padding: 5px 10px;
    background: #ddd;
}

    .btn-flat.btn-flat-green {
        color: #fff;
        background: #94DA2C;
        border: 1px solid #75C71D;
    }

        .btn-flat.btn-flat-green:hover {
            background: #75C71D;
        }

.btn-border-blue {
    background: #fff;
    color: #368EE0;
    border-radius: 10px;
    border: 1px #368EE0 solid;
}

.btn.btn-solid-blue {
    background: #368EE0;
    color: #fff;
    border-radius: 5px;
    border: 1px #368EE0 solid;
}

.btn.btn-border-blue {
    background: #fff;
    color: #368EE0;
    border-radius: 5px;
    border: 1px #368EE0 solid;
}

.btn.btn-solid-blue:hover {
    border: 1px #2B92F2 solid;
    background: #2B92F2;
}

.btn.btn-border-blue:hover {
    color: #fff;
    border: 1px #2B92F2 solid;
}

#user-menu, #user-menu:focus {
    padding: 10px 5px;
    margin-left: 5px;
    background: none;
}

div.header-status-bar {
    height: 65px;
    min-width: 1160px;
    margin-bottom: 0;
    border-bottom: 1px solid #CCC;
    background-color: #F5F5F5;
}

div.header-signin-bar {
    height: 50px;
    min-width: 1160px;
    margin-bottom: 0;
}

.navbar .nav > li > a.head-signin {
    color: #0E467E;
    text-shadow: 0 0 0 #fff;
}

.navbar .nav li.dropdown.open > .head-signin, .navbar .nav li.dropdown.active > .head-signin, .navbar .nav li.dropdown.open.active > .head-signin {
    color: #0E467E;
}

.white-caret {
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}

.dropdown-menu > li > a.head-signin-present:hover {
    color: #000;
    text-decoration: none;
    background-color: #EEE;
}

.logo-hcm {
    display: block;
    width: 159px;
    height: 92px;
    background: url(Images/logo-hcm.png);
}

.logo-org {
    width: 95px;
    height: 45px;
    display: block;
}

.st-num {
    display: block;
    position: absolute;
    margin-left: 5px;
    margin-top: -27px;
    z-index: 10;
}

input, textarea {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 4px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

textarea {
    resize: none !important;
}

.section {
    min-width: 1160px;
    min-height: 400px;
}

table.tb-section {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.icon-warning {
    width: 48px;
    height: 48px;
    background: url(Images/icon_bootbox_warning.png) bottom no-repeat;
    position: absolute;
}

.icon-error {
    width: 16px;
    height: 16px;
    background: url(Images/icon-error.png) bottom no-repeat;
    cursor: pointer;
    margin: 6px;
    margin-left: 1px;
    z-index: 99;
}

.icon-error-s {
    width: 10px;
    height: 10px;
    background: url(Images/icon-error-s.png) bottom no-repeat;
    cursor: pointer;
    margin: 12px 2px;
    z-index: 99;
}

.icon-feed {
    width: 20px;
    height: 20px;
    background: url(Images/icon-feed.png) no-repeat;
}

.icon-delete-gray {
    width: 16px;
    height: 16px;
    background: url(Images/icon-delete-gray-16.png) no-repeat;
    display: block;
    cursor: initial;
}

.icon-edit-gray {
    width: 16px;
    height: 16px;
    background: url(Images/icon-edit-gray-16.png) no-repeat;
    display: block;
}

.icon-magic {
    width: 20px;
    height: 20px;
    background: url(Images/icon-magic.png) no-repeat;
}

.icon-post {
    width: 20px;
    height: 20px;
    background: url(Images/icon-post.png) no-repeat;
}

.icon-clock-green {
    width: 16px;
    height: 16px;
    background: url(Images/icon-clock-green.png) no-repeat;
}

.icon-clock-red {
    width: 16px;
    height: 16px;
    background: url(Images/icon-clock-red.png) no-repeat;
}

.icon-paperclip {
    width: 16px;
    height: 16px;
    margin-top: -7px;
    margin-left: 0;
    background: url(Images/icon-paperclip.png) no-repeat;
}

.icon-user-profile {
    width: 20px;
    height: 20px;
    background: url(Images/ImagesSprite/icon-top-content.png) -114px -346px;
    /*background: url(Images/icon-user-profile.png) no-repeat;*/
}

.icon-user-logout {
    width: 20px;
    height: 20px;
    background: url(Images/ImagesSprite/icon-top-content.png) -302px -262px;
    /*background: url(Images/icon-user-logout.png) no-repeat;*/
}

.icon-circle-orange {
    background: #F60;
    margin-top: 15px;
    margin-right: 17px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.icon-dashboard-home {
    width: 30px;
    height: 30px;
    background: url(images/icon-dashboard2.png);
}

.icon-appraisal {
    width: 30px;
    height: 30px;
    background: url(images/icon-appraisal.png);
}

.icon-approve {
    width: 30px;
    height: 30px;
    background: url(images/icon-approve.png);
}

.icon-compensation {
    width: 30px;
    height: 30px;
    background: url(images/icon-compensation.png);
}

.icon-org {
    width: 30px;
    height: 30px;
    background: url(images/icon-org.png);
}

.icon-setting-m {
    width: 30px;
    height: 30px;
    background: url(images/icon-setting.png);
}

.icon-strategy {
    width: 30px;
    height: 30px;
    background: url(images/icon-strategy.png);
}

.icon-refresh-update {
    margin: auto;
    display: block;
    width: 32px;
    height: 32px;
    background: url(images/icon-refresh-update.png);
}

.icon-menu-active {
    margin: auto;
    display: block;
    width: 32px;
    height: 32px;
    background: url(images/icon-active.png);
}

.icon-menu-downlaod {
    margin: auto;
    display: block;
    width: 32px;
    height: 32px;
    background: url(images/icon-update-download.png);
}

.icon-ess-dropdown-list-plus {
    margin: auto;
    display: block;
    width: 13px;
    height: 13px;
    background: url(images/Icon-Ess-Plus.png);
}

.icon-ess-dropdown-list-dat {
    margin: auto;
    display: block;
    width: 13px;
    height: 13px;
    background: url(images/Icon-Ess.png);
}

.icon-saveresuit {
    display: block;
    width: 30px;
    height: 22px;
    background: url(Images/icon-saverecruit.png) bottom no-repeat;
}

.btn-save-recruit {
    display: block;
    width: 130px;
    height: 40px;
    font-size: 22px;
    line-height: 20px;
    font-family: 'thai_sans_literegular';
    color: #fff;
    border: 0 solid #2B92F2;
    background: url(Images/bg_saverecruit.png) no-repeat center;
}

.fc-btn-prev, .fc-btn-next {
    cursor: pointer;
    width: 26px;
    height: 32px;
}

.btn-next-lineblue {
    display: block;
    width: 12px;
    height: 30px;
    cursor: pointer;
    background: url(images/icon-next-line-blue.png) no-repeat center;
    float: right;
}

.btn-prev-lineblue {
    display: block;
    width: 12px;
    height: 30px;
    background: url(images/icon-prev-line-blue.png) no-repeat center;
}

table.tb-section .toggle {
    width: 10px;
    border-right: 1px solid #CCC;
    cursor: e-resize;
    background: #f8f8f8;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmOGY4ZjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTRlNGU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left,#f8f8f8 30%,#e8e8e8 90%,#e4e4e4 100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(30%,#f8f8f8),color-stop(90%,#e8e8e8),color-stop(100%,#e4e4e4));
    background: -webkit-linear-gradient(left,#f8f8f8 30%,#e8e8e8 90%,#e4e4e4 100%);
    background: -o-linear-gradient(left,#f8f8f8 30%,#e8e8e8 90%,#e4e4e4 100%);
    background: -ms-linear-gradient(left,#f8f8f8 30%,#e8e8e8 90%,#e4e4e4 100%);
    background: linear-gradient(to right,#f8f8f8 30%,#e8e8e8 90%,#e4e4e4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8',endColorstr='#e4e4e4',GradientType=1);
}

table.tb-section .content.full {
    width: 100%;
}

.content {
    vertical-align: top;
}

.main-menu-left {
    display: block;
    width: 234px;
    position: absolute;
    background-color: #F5F5F5;
    height: 100%;
}

.menu-left {
    width: 234px;
    vertical-align: top;
    background-color: #F5F5F5;
    height: 100%;
}

.menu-breadcrumb {
    display: block;
    height: 40px;
    background: #368EE0;
}

.nav-breadcrumb {
    display: inline-block;
    line-height: 28px;
    margin: 6px 0 0 10px;
    font-size: 15px;
    color: #fff;
}

    .nav-breadcrumb a:hover.opacity {
        background: #40A5E2;
        box-shadow: inset 0 0 10px #3EA4E1;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .nav-breadcrumb a {
        color: #fff;
    }

        .nav-breadcrumb a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .nav-breadcrumb .active {
        color: #000;
    }

.border-horizontal-blue {
    float: left;
    border-left: 1px solid #47AAE4;
    border-right: 1px solid #6DC0F0;
    display: block;
    height: 28px;
    margin: 0 5px;
}

#navbar-setting {
    background: #f6f6f6;
    border: none;
    border-bottom: 1px solid #E4E4E4;
    margin-bottom: 0;
    height: 42px;
}

    #navbar-setting .nav > li > a {
        float: none;
        padding: 9px 6px 10px;
        color: #666;
        text-decoration: none;
        text-shadow: 0 0 0 #fff;
    }

.navbar .nav > li > a {
    text-shadow: 0 0 0 #fff;
}

#navbar-setting .nav > li:hover > a {
    background: #EEE;
}

.nav > li > a.menu-page {
    background: #f6f6f6;
    margin-top: 4px;
    padding-top: 6px;
    line-height: 20px;
    height: 20px;
    font-weight: 700;
    color: #000;
}

    .nav > li > a.menu-page:hover {
        background: #f6f6f6;
    }

.icon-home {
    background: url(Images/icon-home.png) no-repeat;
    width: 18px;
    height: 18px;
}

.icon-new {
    background: url(Images/icon-new.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-save {
    background: url(Images/icon-doc-save.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-save-new {
    background: url(Images/icon-doc-save-new.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-save-copy {
    background: url(Images/icon-doc-save-copy.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-save-continue {
    background: url(Images/icon-doc-save-continue.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-save-close {
    background: url(Images/icon-doc-save-close.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-dashboard {
    background: url(Images/icon-dashboard.png) no-repeat;
    width: 23px;
    height: 20px;
}

.icon-info {
    background: url(Images/icon-info.png) no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: 8px 10px;
}

.icon-btn-del {
    background: url(Images/icon-doc-del.png) no-repeat center;
    width: 30px;
    height: 30px;
}
/*Nirun 20200714 [W20200714-013] : Option Delete info*/
.icon-btn-delete {
    background: url(Images/icon-doc-delete.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}
.icon-del-gray {
    background: url(Images/icon-del-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-btn-add {
    background: url(Images/icon-doc-add.png) no-repeat center;
    width: 30px;
    height: 30px;
}

.icon-btn-cog {
    background: url(Images/icon_cog.png) no-repeat center;
    width: 30px;
    height: 30px;
}

.icon-btn-edit {
    background: url(Images/icon-doc-edit.png) no-repeat center;
    width: 30px;
    height: 30px;
}

.icon-edit-gray {
    background: url(Images/icon-edit-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-edit-gray-16 {
    background: url(Images/icon-edit-gray-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
    cursor: initial !important;
}

.icon-btn-copy {
    background: url(Images/icon-doc-copy.png) no-repeat;
    width: 30px;
    height: 32px;
}

.icon-btn-close-32 {
    background: url(Images/icon-doc-close.png) no-repeat center;
    width: 30px;
    height: 30px;
}

.icon-btn-help {
    background: url(Images/icon-help.png) no-repeat;
    width: 20px;
    height: 20px;
}

.icon-btn-cancel {
    background: url(Images/icon-cancel.png) no-repeat;
    width: 20px;
    height: 20px;
}

.icon-btn-setting {
    background: url(Images/sprite-icon-g-plus.png) no-repeat -16px -82px;
    height: 20px;
    width: 20px;
}

.icon-doc-print {
    background: url(Images/icon-doc-print.png) no-repeat;
    width: 30px;
    height: 30px;
}

.icon-btn-back {
    background: url(Images/icon-doc-back.png) no-repeat;
    width: 30px;
    height: 30px;
}

.icon-update {
    background: url(Images/icon-update.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-add {
    background: url(Images/icon-add24.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-add-gray {
    background: url(Images/icon-add24-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
    opacity: .5;
}

.icon-delete {
    background: url(Images/icon-delete24.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-delete-gray-24 {
    background: url(Images/icon-delete-gray-24.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
    opacity: .5;
}

.icon-edit {
    background: url(Images/icon-edit24.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-close {
    background: url(Images/icon-doc-close.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-save-s {
    background: url(Images/icon-save-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-saveas {
    background: url(Images/icon-saveas.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-saveas-gray {
    background: url(Images/icon-saveas-gray.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-update-s {
    background: url(Images/icon-update-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-add-s {
    background: url(Images/icon-add-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-delete-s {
    background: url(Images/icon-delete-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-edit-s {
    background: url(Images/icon-edit-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-close-s {
    background: url(Images/icon-close-16.png) no-repeat center;
    display: block;
    width: 16px;
    height: 16px;
}

.icon-doc-close {
    background: url(Images/icon-doc-close.png) no-repeat center;
    width: 30px;
    height: 30px;
}

.icon-pointer-back {
    background: url(Images/icon-pointer-back.png) no-repeat;
    width: 30px;
    height: 30px;
}
/*Nirun 20211018 [W20211015-018] : icon payslip แสดงผิด */
#MenuAction .icon-payslip {
    background: url(Images/icon-payslip-report.png) no-repeat;
    width: 30px;
    height: 28px;
}



#loading {
    left: 0;
    top: 0;
    width: 100%;
    height: 52px;
    position: fixed;
    z-index: 9999;
    /*Nirun 20191225 [W20191225-041] : ปรับให้รองรับ IE */
    background-color: rgba(187, 187, 187, 0.7333333333333333);
    /*background-color: #bbbb;*/
    /*border-bottom: 10px #bbbb solid;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999; 
    background: url(Images/img-loadingC.gif) 50% 50% no-repeat rgb(249,249,249);*/
}

#imgloading {
    z-index: 10001;
    display: block;
    padding: 15px 45%;
    color: #fff;
    margin: 0 auto;
    width: 0;
    text-align: center;
    font-size: 25px;
    margin-left: 50px;
    font-family: 'thai_sans_literegular';
}

.alert_info {
    display: block;
    width: 98%;
    margin: 0 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #B5E5EF url(images/icon-alert-info.png) no-repeat;
    background-position: 10px 10px;
    border: 1px solid #77BACE;
    font-weight: 400;
    color: #082B33;
    padding: 10px 0;
    text-indent: 40px;
    font-size: 14px;
}

.alert_warning {
    display: block;
    width: 95%;
    margin: 0 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #F5F3BA url(images/icon-alert-warning.png) no-repeat;
    background-position: 10px 10px;
    border: 1px solid #C7A20D;
    color: #796616;
    padding: 10px 0;
    text-indent: 40px;
    font-size: 14px;
}

.alert_error {
    display: block;
    width: 95%;
    margin: 0 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #F3D9D9 url(images/icon-alert-error.png) no-repeat;
    background-position: 10px 10px;
    border: 1px solid #D20009;
    color: #7B040F;
    padding: 10px 0;
    text-indent: 40px;
    font-size: 14px;
}

.alert_success {
    display: block;
    width: 95%;
    margin: 0 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #E2F6C5 url(images/icon-alert-success.png) no-repeat;
    background-position: 10px 10px;
    border: 1px solid #79C20D;
    color: #32510F;
    padding: 10px 0;
    text-indent: 40px;
    font-size: 14px;
}

label.error {
    font-weight: 400;
    color: #B94A48;
    padding: 0;
    margin: 0;
    line-height: 30px;
    margin-left: 0;
}

.lst-pointer {
    line-height: 33px;
    background: url(Images/icon-pointer-return.png) no-repeat;
    padding-left: 34px;
}

.main-menu-head {
    width: 203px;
}

.navbar .nav li.dropdown.open > .dropdown-home, .navbar .nav li.dropdown.active > .dropdown-home, .navbar .nav li.dropdown.open.active > .dropdown-home {
    background-color: #1B67AF;
}

.dropdown-menu-home {
    border: 2px solid #368EE0;
    margin-top: 0;
    border-top: 0;
    padding: 0;
}

.dropdown-menu > li > a.massage-home, .dropdown-menu > li > a.more-messages {
    display: block;
    padding: 10px;
    clear: both;
    font-weight: 400;
    line-height: 20px;
    color: #333;
    white-space: nowrap;
}

.nav > li > a.dropdown-home:hover, a.dropdown-home:hover {
    background-color: #1B67AF;
}

.short-menu {
    float: none;
    padding: 10px 15px;
    color: #777;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
}

.navbar .nav > li > .dropdown-menu-home:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 0 solid transparent;
    border-bottom: 0 solid #ccc;
    border-left: 0 solid transparent;
    border-bottom-color: rgba(0,0,0,0.2);
    content: '';
}

.navbar .nav > li > .dropdown-menu-home:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 0 solid transparent;
    border-bottom: 0 solid #fff;
    border-left: 0 solid transparent;
    content: '';
}

.dropdown-menu > li > a.massage-home:hover, .dropdown-menu > li > a.massage-home:focus, .dropdown-submenu:hover > a.massage-home, .dropdown-submenu:focus > a.massage-home {
    color: #333;
    text-decoration: none;
    background-color: #F3F3F3;
}

.massage-home {
    overflow: hidden;
    padding: 10px;
}

.more-messages {
    background: #e6e6e6;
    text-align: center;
    padding: 8px 15px;
    overflow: hidden;
    padding: 10px;
}

.dropdown-menu > li > a.more-messages:hover, .dropdown-menu > li > a.more-messages:focus, .dropdown-submenu:hover > a.more-messages, .dropdown-submenu:focus > a.more-messages {
    background: #ddd;
    color: #333;
}

.btn, .btn.btn-primary, .btn.btn-choose-item-grid {
    background: #fff;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -moz-border-radius: 0;
    color: #444;
    padding: 4px 9px;
    color: #2B92F2 !important;
    border: 1px solid #2B92F2;
    padding: 5px 9px;
    font-size: 13px;
}

    .btn:hover, .btn:focus, .btn.btn-primary:hover, .btn.btn-primary:hover {
        color: #fff !important;
        background: #2B92F2;
        border: 1px solid #2B92F2;
    }

/*Modify by alongkon 28/11/2561 [W20181128-029] : เพิ่ม btn-login ปรับปุ่มกดให้อยู่กลางและกว้างขึ้น*/
/*Modify by alongkon 25/12/2561 [W20181225-011] : แก้ไขเอา btn-primary เพราะกระทบการแสดงปุ่มในหน้า grid*/
.btn-login {
    background: #fff;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -moz-border-radius: 0;
    color: #444;
    padding: 4px 9px;
    color: #2B92F2 !important;
    border: 1px solid #2B92F2;
    padding: 5px 9px;
    font-size: 13px;
    margin-right: 85px;
    margin-top: 5px;
    width: 120px !important;
}

    .btn-login:hover {
        color: #fff !important;
        background: #2B92F2;
        border: 1px solid #2B92F2;
    }

.btn-primary-blue:hover {
    background: #fff;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -moz-border-radius: 0;
    color: #444;
    padding: 4px 9px;
    color: #2B92F2 !important;
    border: 1px solid #2B92F2;
    padding: 4px 9px;
}

.btn-primary-blue {
    color: #fff !important;
    background: #2B92F2;
    border: 1px solid #2B92F2;
}

.btn.btn-danger {
    background: #E74C3C !important;
    color: #fff;
}

.btn:hover.btn-danger {
    background: #bd362f !important;
}

table.form-search {
    border: 0;
    border-collapse: collapse;
}

td .form-l {
    text-align: right;
    width: 160px;
    padding-left: 10px;
}

td .form-r {
    width: 160px;
}

td .form-Create-l {
    border: 1px solid #E4E4E4;
    width: 166px;
    height: 56px;
    background-color: #F6F6F6;
}

td .form-Create-r {
    border: 1px solid #E4E4E4;
    width: 921px;
    height: 56px;
}

.k-textbox > input, .k-autocomplete .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input, .k-dropdown-wrap .k-input, .k-selectbox .k-input {
    height: 21px;
    line-height: 15px;
    padding: 4px 0 3px;
    text-indent: 10px;
    border: 0;
    margin: 0;
}

.k-picker-wrap .k-select, .k-numeric-wrap .k-select, .k-dropdown-wrap .k-select {
    min-height: 22px;
    line-height: 0;
    vertical-align: middle;
    padding: 3px;
}

.k-grid-content td .k-textbox {
    height: 27px;
    line-height: 20px;
    border: 1px solid #ccc;
}
/*Nirun 20200403 [W20191108-035] : สีทึบ*/
.k-grid-content td .k-readonly {
    background-color: rgb(235, 235, 228);
}
/*Nirun 20200403 [W20191108-035] : 100% */
.k-grid-content td .k-w100p {
    width: 100%;
}

.k-grid-content td a {
    color: #333;
    font-size: 12px;
}

    .k-grid-content td a:hover {
        color: #333;
    }

.k-grid-content > table > tbody > tr:hover {
    background-color: #D8EAFE;
}

.k-grid-content > table > tbody > tr > td .grid-col {
    cursor: pointer;
}

.k-button {
    color: #2B92F2;
    border-color: #2B92F2;
    padding: 4px 9px;
    border-radius: 4px;
}

    .k-button:hover {
        color: #fff;
        border-color: #2B92F2;
        text-decoration: none;
    }

.k-grid .k-button, .k-edit-form-container .k-button {
    margin: 0 .16em;
    padding: 3px 9px;
    border-radius: 4px;
    color: #2B92F2;
    background-color: #fff !important;
}

    .k-grid .k-button:hover, .k-edit-form-container .k-button:hover {
        color: #fff;
        background-color: none;
    }

.k-i-plus, .k-add, .k-grid-edit-row .k-add {
    background-position: -48px -64px;
}

.k-i-pencil, .k-edit, .k-grid-edit-row .k-edit {
    background-position: -48px 0;
}

.k-i-close, .k-delete, .k-group-delete {
    background-position: -48px -16px;
}

.k-grid-header .k-header .k-link {
    text-decoration: none;
    text-decoration: none;
    line-height: 29px;
    background: #eee;
    margin: 0;
}

    .k-grid-header .k-header .k-link .k-i-arrow-n {
        float: right;
        margin-top: 5px;
    }

    .k-grid-header .k-header .k-link .k-i-arrow-s {
        float: right;
        margin-top: 5px;
    }

.k-i-tick, .k-insert, .k-update {
    background-position: -48px -32px;
}

.k-i-cancel, .k-cancel, .k-denied {
    background-position: -48px -48px;
}

.k-link:hover {
    color: #fff;
    background: #368EE0;
    text-decoration: none;
}

.k-state-hover, .k-state-focused, .k-state-active, .k-state-border-up, .k-state-hover:hover {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.k-state-focused, .k-state-active, .k-state-border-up, .k-state-hover {
    color: #787878;
    background-color: #FFF;
    border-color: #DADADA;
}

    .k-state-hover:hover {
        color: #333;
        background-color: #fff;
    }

.k-dropdown .k-state-focused .k-input {
    color: #fff;
}

.k-dropdown .k-state-focused /.k-i-arrow-s*/ {
    background-position: -16px -32px;
}

.box.box-bordered .box-title {
    border: 2px solid #ddd;
}

.box-title-icon {
    margin-top: 3px;
    margin-right: 10px;
}

.box-content {
    background: #fff;
    border: 2px solid #ddd;
    border-top: 0;
    border-color: #59A3E6;
}

.box.box-color .box-title {
    background: #59A3E6;
}

    .box.box-color .box-title h3 {
        color: #fff;
    }

.box.box-bordered.box-color .box-title {
    border-color: #59A3E6;
}

.box .box-title h3 {
    float: left;
    margin: 0;
    line-height: 24px;
    font-weight: 400;
    color: #444;
    font-size: 15px;
}

.box .box-title {
    color: #fff;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    padding: 2px 0 2px 10px;
}

    .box .box-title .actions {
        margin-top: 0;
        float: right;
        margin-right: 10px;
    }

.box.box-color .box-title .actions > a {
    color: #fff;
}

    .box.box-color .box-title .actions > a:hover {
        background: #2B92F2;
    }

.box .box-title .actions .btn {
    background: none;
    color: #333;
    padding: 3px 7px;
}

.box.box-color .box-title .actions > a:hover {
    color: #368ee0;
}

.box.box-bordered .slimScrollDiv {
    border-bottom: 2px solid #ddd;
}

.box.box-bordered.box-color .slimScrollDiv {
    border-bottom: 2px solid #368ee0;
}

.box-fullscreen {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;
}

    .box-fullscreen .box-content {
        height: 100%;
    }

.box .box-title .tabs {
    float: right;
    margin: 5px 10px 0 0;
    padding: 0;
    list-style-type: none;
}

    .box .box-title .tabs > li {
        float: left;
        margin-right: 5px;
    }

.box.box-color .box-title .tabs > li.active > a {
    background: #fff;
    color: #368ee0;
    text-decoration: none;
}

.box .box-title .tabs > li > a:hover {
    background: #2B92F2;
    text-decoration: none;
}

.box .box-title .tabs > li > a {
    color: #fff;
    padding: 4px 8px;
}

.modal {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

div.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 5px;
    width: 300px;
    height: 100px;
    overflow-y: auto;
}

    div.tagsinput span.tag {
        border: 1px solid #a5d24a;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        display: block;
        float: left;
        padding: 5px;
        text-decoration: none;
        background: #cde69c;
        color: #638421;
        margin-right: 5px;
        margin-bottom: 5px;
        font-family: helvetica;
        font-size: 13px;
    }

        div.tagsinput span.tag a {
            font-weight: 700;
            color: #82ad2b;
            text-decoration: none;
            font-size: 11px;
        }

    div.tagsinput input {
        width: 80px;
        margin: 0;
        font-family: helvetica;
        font-size: 13px;
        border: 1px solid transparent;
        padding: 5px;
        background: transparent;
        color: #000;
        outline: 0;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    div.tagsinput div {
        display: block;
        float: left;
    }

.tags_clear {
    clear: both;
    width: 100%;
    height: 0;
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0;
    background: #FFF;
    height: 40px;
    z-index: 10;
}

.navbar .container {
    width: 100%;
}

.k-dropzone {
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}

    .k-dropzone.k-dropzone-active {
        background: #368ee0;
        border-color: #368ee0;
        border: 0;
    }

    .k-dropzone em {
        background: #368ee0;
        width: 150px;
        display: block;
        margin-left: 0;
        z-index: 1000;
        position: absolute;
        color: #fff;
        text-align: center;
        margin-top: -180px;
        padding: 80px 0;
    }

.k-button.k-upload-button {
    width: 150px;
}

.k-upload-files {
    width: 220px;
}

.fc-state-default.fc-corner-left {
    border-radius: 0;
}

.fc-state-down, .fc-state-active {
    box-shadow: 0;
}

.calendar {
    margin-top: 10px;
}

    .calendar .fc-header .fc-header-title h2 {
        font-size: 18px;
        font-weight: 300;
        margin-bottom: 0;
        line-height: 25px;
    }

    .calendar .fc-header .fc-header-right .fc-button {
        position: relative;
        top: 0;
    }

    .calendar .fc-content .fc-event {
        font-size: 12px;
        border: 0 !important;
    }

        .calendar .fc-content .fc-event .fc-event-inner {
            background: #368ee0;
            border: 0 !important;
            margin: 0;
        }

            .calendar .fc-content .fc-event .fc-event-inner .fc-event-title {
                padding: 2px 5px;
            }

            .calendar .fc-content .fc-event .fc-event-inner .fc-event-time {
                padding: 2px 2px 2px 5px;
            }

    .calendar .fc-button {
        background: none;
        border: 0 !important;
        margin-right: 5px;
    }

        .calendar .fc-button.fc-button-next .fc-button-content, .calendar .fc-button.fc-button-prev .fc-button-content {
            padding: 0 9px;
        }

            .calendar .fc-button.fc-button-next .fc-button-content i, .calendar .fc-button.fc-button-prev .fc-button-content i {
                color: #666;
            }

        .calendar .fc-button.fc-button-prev {
            margin-right: 10px;
            margin-left: 0;
        }

        .calendar .fc-button .fc-button-inner {
            background: none;
            border: 0 !important;
        }

.fc-state-default {
    background-color: #f5f5f5;
    background-repeat: repeat-x;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    color: #333;
    text-shadow: none;
    box-shadow: none;
}

    .fc-state-default:hover {
        background: #e6e6e6;
    }

.window-overlay {
    background-color: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    overflow-y: auto;
    width: 100%;
    z-index: 1050;
    display: block;
    overflow-x: hidden;
}

.window {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    padding-bottom: 80px;
}

.window-wrapper {
    padding: 15px;
    background: #f2f2f2;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}

.grid-template {
    border: 0;
}

.k-grid-header .k-header {
    padding: 0;
    border: none;
}

.k-grid-content .k-state-selected a.grid-open-detail {
    color: #fff;
    font-size: 14px;
    border: none;
}

.k-grid .k-header, .k-grid-header {
    background: #eee;
    color: #000;
    font-weight: 700;
}

.k-header .k-link:hover {
    color: #000;
}

.k-grid .k-header a {
    color: #000;
    font-weight: 700;
}

    .k-grid .k-header a:hover {
        background: #ddd;
        color: #000;
    }

.line-left-menu {
    display: block;
    position: absolute;
    width: 1px;
    background: #e4e4e4;
    height: 100%;
    margin-top: 0;
}

#pageslide {
    display: none;
    position: absolute;
    height: 100%;
    z-index: 99;
    width: 1310px;
    padding: 20px;
    background-color: #eee;
    -webkit-box-shadow: inset 0 0 5px 5px #eaeaea;
    -moz-shadow: inset 0 0 5px 5px #eaeaea;
    box-shadow: inset 0 0 5px 5px #eaeaea;
}

#pageslide-wrapper {
    display: none;
}

form {
    margin: 0;
}

table.tb-form {
    width: 100%;
    border: 0 solid #888;
    text-align: left;
    border-collapse: collapse;
}

    table.tb-form .control-label {
        text-align: left;
    }

    table.tb-form th {
        width: 160px;
        padding: 10px;
        border: 1px solid #E4E4E4;
        background: #f5f5f5;
    }

    table.tb-form td {
        padding: 10px;
        border: 1px solid #E4E4E4;
    }

    table.tb-form .controls {
        margin: 0;
    }

.tb-form .valid {
    float: left;
}

.tb-form .controls .error {
    float: left;
    display: block;
    font-weight: 400;
    color: #B94A48;
    margin: 0;
    margin-left: 10px;
    padding: 5px;
}

.tabs.tabs-inline {
    *zoom: 1;
}

    .tabs.tabs-inline:after {
        content: "";
        display: table;
        clear: both;
    }

    .tabs.tabs-inline.tabs-top > li {
        float: left;
        margin-right: 1px;
    }

        .tabs.tabs-inline.tabs-top > li.active > a {
            background: #fff;
            color: #333;
        }

            .tabs.tabs-inline.tabs-top > li.active > a:hover {
                background: #fff;
            }

        .tabs.tabs-inline.tabs-top > li > a {
            overflow: hidden;
            width: 120px;
            text-overflow: ellipsis;
            color: #666;
            background: #ddd;
            padding: 10px 5px;
            text-decoration: none;
            display: block;
        }

            .tabs.tabs-inline.tabs-top > li > a:hover {
                background: #ddd;
                color: #333;
            }

    .tabs.tabs-inline.tabs-left {
        position: absolute;
        background: #eee;
        width: 150px;
    }

        .tabs.tabs-inline.tabs-left > li:first-child > a {
            border-top: 0;
        }

        .tabs.tabs-inline.tabs-left > li:last-child > a {
            border-bottom: 1px solid #bbb;
        }

        .tabs.tabs-inline.tabs-left > li.write > a {
            margin: 10px;
            background: #e63a3a;
            color: #fff;
        }

            .tabs.tabs-inline.tabs-left > li.write > a:hover {
                background: #d21b1b;
                color: #fff;
            }

        .tabs.tabs-inline.tabs-left > li.active > a {
            background: #fff;
            color: #333;
            margin-right: -1px;
        }

            .tabs.tabs-inline.tabs-left > li.active > a:hover {
                background: #fff;
            }

        .tabs.tabs-inline.tabs-left > li > a {
            display: block;
            padding: 10px 20px;
            color: #666;
            background: #ddd;
            text-decoration: none;
            border-top: 1px solid #bbb;
        }

            .tabs.tabs-inline.tabs-left > li > a:hover {
                background: #ddd;
                color: #333;
            }

.tab-content.padding {
    padding: 20px;
}

.tab-content.tab-content-inline {
    border-left: 1px solid #bbb;
    margin-left: 150px;
}

    .tab-content.tab-content-inline.tab-content-bottom {
        border-left: 0;
        margin-left: 0;
    }

.k-link:not(.k-state-disabled):hover > .k-i-arrow-n, .k-state-hover .k-i-arrow-n, .k-button:hover .k-i-arrow-n, .k-textbox:hover .k-i-arrow-n, .k-button:active .k-i-arrow-n {
    background-position: 0 0;
}

.k-link:not(.k-state-disabled):hover > .k-i-arrow-s, .k-state-hover .k-i-arrow-s, .k-button:hover .k-i-arrow-s, .k-textbox:hover .k-i-arrow-s, .k-button:active .k-i-arrow-s {
    background-position: 0 -32px;
}

.tab-paging {
    float: right;
    margin: 2px;
}

    .tab-paging p {
        padding: 5px;
        float: left;
        margin: 0;
        padding-right: 10px;
    }

.change-col {
    padding: 5px 5px 7px 10px;
}

.ddl-change-col li:hover {
    background: #eee;
}

.main-menu-left {
    display: block;
    width: 234px;
    color: #333;
}

.menu-left-list {
    display: block;
    width: 234px;
    background: #F6F6F6;
}

    .menu-left-list.active {
        padding-left: 0;
        border-left: 4px solid #368EE0;
        width: 230px;
    }

        .menu-left-list.active > a, .menu-left-list.active > a:hover {
            background: #eee;
        }

    .menu-left-list.choose > a, .menu-left-list.choose > a:hover {
        position: relative;
        width: 213px;
        background: #368EE0;
        color: #fff;
        z-index: 2;
    }

    .menu-left-list > a > i {
        margin-right: 10px;
    }

    .menu-left-list > a:hover {
        background: #f6f6f6;
    }

    .menu-left-list > a {
        padding: 9px;
        text-decoration: none;
        display: block;
        padding: 10px;
        padding-left: 12px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 400;
        font-size: 15px;
        color: #333;
        background: #f5f5f5;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,#f5f5f5 0%,#efefef 84%,#eee 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f5f5),color-stop(84%,#efefef),color-stop(100%,#eee));
        background: -webkit-linear-gradient(top,#f5f5f5 0%,#efefef 84%,#eee 100%);
        background: -o-linear-gradient(top,#f5f5f5 0%,#efefef 84%,#eee 100%);
        background: -ms-linear-gradient(top,#f5f5f5 0%,#efefef 84%,#eee 100%);
        background: linear-gradient(to bottom,#f5f5f5 0%,#efefef 84%,#eee 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#eeeeee',GradientType=0);
    }

.icon-dot-orange {
    margin-top: 5px;
    margin-right: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    width: 12px;
    height: 12px;
    background: #F60;
}

ul.menu-list {
    overflow-y: auto;
    height: 250px;
    background: #f6f6f6;
    margin: 0;
    padding-top: 10px;
    list-style: none;
    padding-left: 12px;
    border-bottom: 1px solid #ddd;
}

    ul.menu-list > li > a.sub-menu-title {
        padding: 5px 0;
        display: block;
        width: 100%;
        cursor: pointer;
        color: #333;
        font-weight: 700;
        text-decoration: none;
    }

ul.sub-menu-list {
    margin: 5px 0 0;
}

    ul.sub-menu-list > li {
        list-style: none;
    }

        ul.sub-menu-list > li > a {
            font-weight: 400;
            display: block;
            padding: 5px;
            width: 90%;
            color: #333;
        }

            ul.sub-menu-list > li > a.active, ul.sub-menu-list > li > a:hover.active {
                background: #F60;
                color: #fff;
            }

            ul.sub-menu-list > li > a:hover {
                background: #eee;
                text-decoration: none;
            }

            ul.sub-menu-list > li > a > i {
                margin-right: 5px;
            }

#FileUpload {
    position: relative;
}

#BrowserVisible {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#FileField {
    margin-right: 4px;
    font-size: 13px;
    color: #555;
}

#BrowserHidden {
    position: relative;
    margin-left: -67px;
    width: 287px;
    height: 30px;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.shortcut-menu-left {
    width: 39px;
    display: none;
    height: auto;
}

a:hover.btn-shortcut {
    opacity: 1;
}

a.btn-shortcut {
    display: block;
    padding: 5px;
    opacity: .6;
}

.nav-content-top {
    line-height: 42px;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    height: 42px;
    display: block;
    width: 100%;
    padding-left: 25px;
}

.font-nav-title {
    color: green;
    font-weight: 400;
    margin: 0;
    font-size: 15px;
}

.nav-menu-action.active, .nav-menu-action:hover.active {
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    border-bottom: 0;
}

.nav-menu-action:hover {
    background: #eaeaea;
}

.nav-menu-action {
    cursor: pointer;
    padding: 8px 20px;
    position: relative;
    z-index: 10;
    color: #000;
}

.section-content {
    min-height: 600px;
    width: 980px;
    margin: 0 auto;
    margin-top: 15px;
}

.section-content2 {
    min-height: 600px;
    width: 980px;
    margin: 0 auto;
}

.menu-action p {
    margin-bottom: 0;
}

.btn-menu-action {
    padding: 10px;
    display: block;
    width: 50px;
    height: auto;
    line-height: 15px;
    height: auto;
    text-align: center;
    color: #000;
    height: 68px;
}

    .btn-menu-action:hover {
        text-decoration: none;
        background: #eee;
        color: #000;
    }

#page-slide-left {
    display: none;
    position: fixed;
    width: 140px;
    height: 100%;
    top: 0;
    background: #368EE0;
    left: 0;
    z-index: 100;
}

ul.list-page-left, ul.list-page-left li {
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.list-page-left li a {
        margin: 0;
        width: 120px;
        display: block;
        text-align: left;
        padding-left: 20px;
        color: #fff;
        line-height: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

        ul.list-page-left li a:hover {
            color: #fff;
            background: #59A3E6;
            text-decoration: none;
        }

.title-td {
    width: 150px;
    background: #eee;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.btn.btn-success {
    background-color: #51a351;
    color: #fff;
}

    .btn.btn-success:hover {
        background-color: #368e25;
    }

ul.menu-action-manage {
    display: block;
    list-style: none;
    padding: 0;
}

    ul.menu-action-manage li {
        float: left;
        display: block;
    }

        ul.menu-action-manage li p {
            margin: 0;
            margin-top: 5px;
        }

        ul.menu-action-manage li a:hover {
            background: #eee;
        }

        ul.menu-action-manage li a {
            padding: 5px;
            display: block;
            color: #000;
            height: 32px;
        }

.width_125 {
    width: 125px;
}

.width_65 {
    width: 65px;
}

.containner_approve {
    width: 100%;
    margin: 0 auto;
}

.logo-ess {
    display: block;
    width: 130px;
    height: 60px;
    /* background: url(Images/logo-ess.png) left center no-repeat;*/
    /*Nuii 08/04/2564 [W20210408-015] : RFC ให้ลูกค้าสามารถเปลี่ยน logo ได้*/
    background: url(../../Upload/LogoImages/Logo-ess.png) left center no-repeat;
}

.logo-prosoft {
    display: block;
    width: 120px;
    height: 80px;
    background: url(Images/logo-prosoft.png) left center no-repeat;
}

.logo-ess-large {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 50px;
    background: url(Images/icon-prosoft-ess.png) center top no-repeat;
}

.icon-TH {
    /*background: url(Images/icon-TH.png) left bottom no-repeat;*/
    background: url(Images/ImagesSprite/icon-top-content.png) -196px -346px;
    width: 22px;
    height: 18px;
    display: block;
}

.icon-EN {
    /*background: url(Images/icon-EN.png) left bottom no-repeat;*/
    background: url(Images/ImagesSprite/icon-top-content.png) -154px -346px;
    width: 22px;
    height: 18px;
    display: block;
}

.nav-title {
    width: 450px;
    height: 43px;
}

    .nav-title ul {
        padding: 0;
        margin: 0 auto;
    }

        .nav-title ul li {
            display: inline-block;
            list-style: none;
            padding: 0;
            cursor: pointer;
            width: 90px;
            text-align: center;
        }

            .nav-title ul li a div {
                /*padding-top: 32px;*/
            }

            .nav-title ul li a {
                color: #999;
                text-decoration: none;
            }

                .nav-title ul li a:hover {
                    color: #2B92F2;
                }
                .nav-title ul li a.icon-set-report:hover span {
                    background: url(Images/icon-set-report-hover.png) top center no-repeat;
                }

.containner_approve a, .status-content div, .userchannel {
    color: #0E467E;
}

.data-notice {
    color: #ff1300;
    text-decoration: none;
}

.containner_approve .select2-choice:hover {
    color: #000;
    text-decoration: none;
}

.containner_approve select, .containner_approve input {
    height: 30px;
}

.labelselect {
    position: relative;
}

    .labelselect:after {
        content: '';
        font: 15px Consolas,monospace;
        color: #aaa;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        right: -5px;
        top: 5px;
        position: absolute;
        pointer-events: none;
    }

.bg_gray {
    background: url(Images/bg_gray.png) bottom repeat-x;
    border-bottom: 1px solid #C9D9E9;
}

.menu-action ul, .content-left ul, .content-right ul {
    margin: 0;
    padding: 0;
}

    .menu-action ul li {
        list-style: none;
        display: inline-block;
        text-transform: capitalize;
        width: 27px;
        margin-left: 5px;
    }

        .menu-action ul li a {
            margin: 0 auto;
            display: block;
            color: #000;
            height: 30px;
        }

.menu-content {
    border-radius: 4px 4px 0 0;
}

.menu-action ul li a div {
    margin: 1px 19px;
}

.status-content {
    -webkit-box-shadow: 0 4px 2px -2px #eee;
    -moz-box-shadow: 0 4px 2px -2px #eee;
    box-shadow: 0 4px 2px -2px #eee;
    font-size: 13px;
    padding: 7px 10px;
}

.insection-content {
    background: #fff;
}

/*Chidchanupong Modify 2016-10-14 : แก้ค่า top เพื่อให้เมนูหน้าหลักแสดงได้สวยงาม*/
.border-popover {
    left: 0;
    top: 60px;
    position: absolute;
    min-width: 100% !important;
    display: none;
    z-index: 101;
    opacity: .95;
}

.rotate-top, .rotate-bottom {
    display: inline-block;
    border-width: 0;
    background: #2B92F2;
    width: 2.5em;
    height: .08em;
}

.rotate-top {
    -webkit-transform: rotate(320deg);
    -moz-transform: rotate(320deg);
    -ms-transform: rotate(320deg);
    -o-transform: rotate(320deg);
}

.rotate-bottom {
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
}

#sub-menu-list ul {
    display: none;
    list-style: none;
}

    #sub-menu-list ul li a {
        padding: 5px;
        border-bottom: 1px solid #ddd;
        display: block;
        margin-right: 5px;
        text-decoration: none;
    }

        #sub-menu-list ul li a:hover {
            padding: 5px;
            border-bottom: 1px solid #ddd;
            display: block;
            margin-right: 5px;
            text-decoration: none;
            color: #2B92F2;
        }

.content-left ul li {
    list-style: none;
    display: inline-block;
    width: 110px;
    text-align: center;
    cursor: pointer;
    color: #666;
    font-size: 13px;
}

    .content-left ul li:hover, .content-left ul li:link, .menuli-click, .content-left ul li a:hover {
        background: url(Images/bg_menuli.png) bottom no-repeat;
        color: #06C;
    }

.icon-set-home {
   /* background: url(Images/icon-set-home.png) top center no-repeat;
    background-position: center;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;*/
}

    .icon-set-home span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/ImagesSprite/icon-top-content.png) -94px -262px;
    }

    .icon-set-home:hover, .icon-set-home-hover {
        /*background: url(Images/icon-set-home-hover.png) top center no-repeat;*/
       /* background: url(Images/ImagesSprite/icon-top-content.png) -146px -262px;
        background-position: center;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;*/
        color: #2B92F2 !important;

    }
        .icon-set-home:hover > span, .icon-set-home-hover > span {
            width: 32px;
            height: 32px;
            display: block;
            margin: auto;
            background: url(Images/ImagesSprite/icon-top-content.png) -146px -262px;
        }

.icon-set-levrequest {
   /* background: url(Images/icon-set-levrequest.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;*/
}
    .icon-set-levrequest span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/ImagesSprite/icon-top-content.png) -198px -262px;
    }

    .icon-set-levrequest:hover {
       /* background: url(Images/icon-set-levrequest-hover.png) top center no-repeat;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;*/
        color: #2B92F2 !important;
    }
        .icon-set-levrequest:hover > span {
            width: 32px;
            height: 32px;
            display: block;
            margin: auto;
            background: url(Images/ImagesSprite/icon-top-content.png) -250px -262px;
        }

        .icon-set-levrequest:hover.disabled {
            color: #999 !important;
            cursor: default;
            /*background: url(Images/icon-set-levrequest.png) top center no-repeat;
            width: 90px;
            height: 32px;
            display: block;
            margin: 0 auto;*/
        }
            .icon-set-levrequest:hover.disabled > span {
                width: 32px;
                height: 32px;
                display: block;
                margin: auto;
                background: url(Images/ImagesSprite/icon-top-content.png) -198px -262px;
            }

.icon-set-menu {
   /* background: url(Images/icon-set-menu.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;*/
}
    .icon-set-menu span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/ImagesSprite/icon-top-content.png) -346px -10px;
    }

    .icon-set-menu:hover, .icon-set-menu-hover, .icon-set-menu-hover:hover {
      /*  background: url(Images/icon-set-menu-hover.png) top center no-repeat;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;*/
        color: #2B92F2 !important;
    }
        .icon-set-menu:hover > span, .icon-set-menu-hover > span, .icon-set-menu-hover:hover > span {
            width: 32px;
            height: 32px;
            display: block;
            margin: auto;
            background: url(Images/ImagesSprite/icon-top-content.png) -346px -62px;
        }

.icon-signout {
   /* background: url(Images/icon-signout.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;*/
}
    .icon-signout span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/ImagesSprite/icon-top-content.png) -10px -346px;
    }

    .icon-signout:hover, .icon-signout-hover, .icon-signout-hover:hover {
       /* background: url(Images/icon-signout-hover.png) top center no-repeat;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;*/
        color: #E65459 !important;
    }
        .icon-signout:hover > span, .icon-signout-hover > span, .icon-signout-hover > span {
            width: 32px;
            height: 32px;
            display: block;
            margin: auto;
            background: url(Images/ImagesSprite/icon-top-content.png) -62px -346px;
        }

.icon-set-report span{
    background: url(Images/icon-set-report.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

    .icon-set-report span:hover {
        background: url(Images/icon-set-report-hover.png) top center no-repeat;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;
        color: #2B92F2 !important;
    }

        .icon-set-report:hover.disabled {
            color: #999 !important;
            cursor: default;
            background: url(Images/icon-set-report.png) top center no-repeat;
            width: 90px;
            height: 32px;
            display: block;
            margin: 0 auto;
        }

.icon-setting {
  /*  background: url(Images/icon-setting.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;*/
}
    .icon-setting span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/ImagesSprite/icon-top-content.png) -346px -218px;
    }

    .icon-setting:hover {
      /*  background: url(Images/icon-setting-hover.png) top center no-repeat;
        width: 90px;
        height: 32px;
        display: block;
        margin: 0 auto;*/
        color: #2B92F2 !important;
    }
        .icon-setting:hover > span, .icon-setting-hover span {
            width: 32px;
            height: 32px;
            display: block;
            margin: auto;
            background: url(Images/ImagesSprite/icon-top-content.png) -346px -270px;
        }

.icon-setting-user span{
    background: url(Images/icon-setting.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

.icon-save-ios7 {
    background: url(Images/icon-save-ios7.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-save-gray {
    background: url(Images/icon-save-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-change-work-shift {
    background: url(Images/icon-change-work-shift.png) center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

.icon-exchange-shift {
    background: url(Images/icon-exchange-shift.png) center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

.icon-agenda-info {
    background: url(Images/icon-agenda-info.png) center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.icon-summary-work-monthly {
    background: url(Images/icon-summary-work-monthly.png) center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

.icon-myteam {
    background: url(Images/icon-myteam-24x32.png) center no-repeat;
    width: 32px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

.icon-get-data {
    background: url(Images/icon-get-data.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-close-ios7 {
    background: url(Images/icon-close-ios7.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

/*Nuii Modify 21/05/2561 [W20180521-028] : ปรับการแสดงรูปให้เป็นรูปสีน้ำเงิน*/
.icon-close-ios7-Blue {
    background: url(Images/icon-close-ios7-Red.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}
/*Nuii Modify 21/05/2561 [W20180521-028] : ปรับการแสดงรูปให้เป็นรูปสีน้ำเงิน*/
.icon-save-ios7-Blue {
    background: url(Images/icon-save-ios7-Blue.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-taxdeduction {
    background: url(Images/icon-taxdeduction.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-checktax {
    background: url(Images/icon-check-tax.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-print-info {
    background: url(Images/icon-print-info.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-close-ios7-little {
    background: url(Images/icon-close-ios7-little.png) center no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
}

.icon-saveandnew-ios7 {
    background: url(Images/icon-saveandnew.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-saveandnew-gray {
    background: url(Images/icon-saveandnew-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-saveandclose-ios7 {
    background: url(Images/icon-saveandclose.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-saveandclose-gray {
    background: url(Images/icon-saveandclose-gray.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.icon-title-arrow {
    background: url(Images/icon-title-arrow.png) center no-repeat;
    width: 54px;
    height: 20px;
    display: block;
    margin: 0 auto;
}

.label-success-lev {
    color: #090;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-info-lev {
    color: #2B92F2;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-danger-lev {
    color: red;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-purple-lev {
    color: #F0F;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-yellow-lev {
    color: #FF0;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-warning-lev {
    color: #c09853;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.label-default-lev {
    color: #444;
    border-radius: 5px;
    min-width: 75px;
    padding: 0;
}

.bg_smallblue {
    width: 20px;
    height: 18px;
    background: url(Images/bg_smallblue.png) bottom no-repeat;
    text-align: center;
    vertical-align: middle;
    margin: 4px;
    margin-left: -24px;
    cursor: pointer;
    position: relative;
}

.icon_date, .icon_date_blue {
    width: 16px;
    height: 16px;
    background: url(Images/icon_date.png) bottom no-repeat;
    text-align: center;
    vertical-align: middle;
    margin: 7px;
    margin-left: -22px;
    cursor: pointer;
    position: absolute;
}

.icon_date_blue {
    background: url(Images/icon_date_blue.png) bottom no-repeat;
}

.icon_time {
    float: left;
    width: 16px;
    height: 16px;
    background: url(Images/icon_time.png) bottom no-repeat;
}

.bg_smallblue span {
    top: -2px;
    font-size: 8px;
}

.divRow {
    float: left;
    width: 100%;
}

.content-space-w45 {
    width: 45%;
    float: left;
    padding-bottom: 5px;
}

.content-space {
    width: 40%;
    float: left;
    padding-bottom: 5px;
}

.border-content .divRow .content-space .lblxxxl ,
    .border-content .divRow .content-space-w45 .lblxxxl {
    width: 140px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space .lblxxl ,
.border-content .divRow .content-space-w45 .lblxxl {
    width: 130px;
    float: left;
    line-height: 30px;
}


.border-content .divRow .content-space .lblxl {
    width: 120px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space .lbll {
    width: 115px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space .lbl {
    width: 110px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space .lblb {
    width: 100px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space select {
    width: 240px;
    float: left;
    border: 1px solid #DDD;
    line-height: 15px;
    border-radius: 4px;
    padding: 5px 2px 5px 0px;
}

.border-content .divRow .content-space .labelselect select {
    width: 117px;
    margin-left: 4px;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space input,
.border-content .divRow .content-space-w45 input {
    height: 30px;
}


.border-content .divRow .content-space input,
.border-content .divRow .content-space-w45 input,
textarea {
    width: 240px;
    float: left;
    margin-left: 10px;
    border: 1px solid #DDD;
    padding: 5px 5px;
}

.border-content .divRow .content-space .text-search {
    margin-left: 11px;
}

.border-content .divRow .content-space .smallinput {
    width: 60px;
    margin-left: 10px;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space .midinput {
    width: 240px;
    margin-left: 4px;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space .longinput {
    width: 632px;
    float: left;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space .longinput-spec {
    width: 622px;
    float: left;
    border: 1px solid #DDD;
}

.content-space2 {
    width: 100%;
    float: left;
    padding-bottom: 5px;
}

.border-content .divRow .content-space2 .lbl {
    width: 160px;
    float: left;
    line-height: 30px;
}

.border-content .divRow .content-space2 select {
    width: 121px;
    float: left;
    border: 1px solid #DDD;
    line-height: 15px;
    border-radius: 4px;
    padding: 5px 0px;
}

.border-content .divRow .content-space2 input {
    width: 240px;
    float: left;
    margin-left: 10px;
    border: 1px solid #DDD;
    padding: 5px;
}

.border-content .divRow .content-space2 textarea {
    width: 240px;
    float: left;
    margin-left: 10px;
    border: 1px solid #DDD;
    padding: 5px;
    padding-top: 6px;
}

.border-content .divRow .content-space2 .smallinput {
    width: 60px;
    margin-left: 10px;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space2 .midinput {
    width: 392px;
    margin-left: 4px;
    border: 1px solid #DDD;
}

.border-content .divRow .content-space2 .longinput {
    width: 631px;
    float: left;
    border: 1px solid #DDD;
}

.divViewBy {
    float: right;
    width: 210px;
    line-height: 30px;
}

.ddlViewBy {
    border: 1px solid #ddd;
    width: 180px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-left: 5px;
    padding: 5px;
}

.form-search .divRow {
    width: 700px !important;
}

.form-search .content-space:nth-child(1) {
    width: 400px !important;
}

.form-search .content-space:nth-child(2) {
    width: 300px !important;
}

.form-search .divRow.single {
    width: 100% !important;
}

.single .content-space:nth-child(1) {
    width: 668px !important;
}

.single .content-space .labelselect {
    width: 163px !important;
}

.single .content-space .sel-searchby {
    width: 170px !important;
}

.single .content-space .text-search {
    width: 490px !important;
}

.k-grid input[type="checkbox"] {
    height: auto !important;
}

/*font*/
/*----font SegoeUI----*/
@font-face {
    font-family: 'SegoeUI';
    src: url('fonts/SEGOEUI.eot');
    src: url('fonts/SEGOEUI.eot#iefix') format('embedded-opentype'), url('fonts/SEGOEUI.woff') format('woff'), url('fonts/SEGOEUI.ttf') format('truetype'), url('fonts/SEGOEUI.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

@font-face {
    font-family: 'SegoeUI-Bold';
    src: url('fonts/SEGOEUIB.eot');
    src: url('fonts/SEGOEUIB.eot#iefix') format('embedded-opentype'), url('fonts/SEGOEUIB.woff') format('woff'), url('fonts/SEGOEUIB.ttf') format('truetype'), url('fonts/SEGOEUIB.svg#SegoeUIB') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

@font-face {
    font-family: 'SegoeUI-Light';
    src: url('fonts/SEGOEUIL.eot');
    src: url('fonts/SEGOEUIL.eot#iefix') format('embedded-opentype'), url('fonts/SEGOEUIL.woff') format('woff'), url('fonts/SEGOEUIL.ttf') format('truetype'), url('fonts/SEGOEUIL.svg#SegoeUIL') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

@font-face {
    font-family: 'SegoeUI-SemiLight';
    src: url('fonts/SEGOEUISL.eot');
    src: url('fonts/SEGOEUISL.eot#iefix') format('embedded-opentype'), url('fonts/SEGOEUISL.woff') format('woff'), url('fonts/SEGOEUISL.ttf') format('truetype'), url('fonts/SEGOEUISL.svg#SegoeUISL') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}
/*----font thai_sans_literegular----*/
@font-face {
    font-family: 'thai_sans_literegular';
    src: url(fonts/thaisanslite_r1-webfont.eot);
    src: url(fonts/thaisanslite_r1-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/thaisanslite_r1-webfont.woff) format("woff"), url(fonts/thaisanslite_r1-webfont.ttf) format("truetype"), url(fonts/thaisanslite_r1-webfont.svg#thai_sans_literegular) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

@font-face {
    font-family: 'ThaiSansNeue-Regular';
    src: url(fonts/ThaiSansNeue-Regular.otf);
    font-weight: 400;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

@font-face {
    font-family: 'ThaiSansNeue-ExtraLight';
    src: url(fonts/ThaiSansNeue-ExtraLight.otf);
    font-weight: 400;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}
/*PE 20200415 [W20200413-006] : เพิ่ม font*/
@font-face {
    font-family: 'thai_sans_lite';
    src: url(fonts/ThaiSansLite.eot);
    src: url(fonts/ThaiSansLite.eot?#iefix) format("embedded-opentype"), url(fonts/ThaiSansLite.woff) format("woff"), url(fonts/ThaiSansLite.ttf) format("truetype"), url(fonts/ThaiSansLite.svg#thai_sans_lite) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}
/*PE 20200415 [W20200413-006] : เพิ่ม font*/
@font-face {
    font-family: 'product_sans';
    src: url(fonts/ProductSans-Regular.eot);
    src: url(fonts/ProductSans-Regular.eot?#iefix) format("embedded-opentype"), url(fonts/ProductSans-Regular.woff) format("woff"), url(fonts/ProductSans-Regular.ttf) format("truetype"), url(fonts/ProductSans-Regular.svg#product_sans) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap; /*Nirun 20210715 [] : */
}

.font-label-header {
    font-family: 'thai_sans_literegular';
    /*/*Modify by Nuii 11/4/2561 [W20180423-036] : ปรับ font เหลือ 2px*/
    /*font-size: 22px;*/
    font-size: 20px;
    color: #2B92F2;
}

.font-label-headerRecruit {
    font-family: 'thai_sans_literegular';
    font-size: 24px;
    color: #2B92F2;
}

.font-label-SusRecruit {
    font-family: 'thai_sans_literegular';
    font-size: 28px;
    color: #2B92F2;
    line-height: 40px;
}

.font-label-success {
    font-family: 'Segoe UI';
    font-size: 13px;
}

.font-label-topic {
    font-family: 'thai_sans_literegular';
    font-size: 20px;
    color: #2B92F2;
    line-height: 18px;
}

.picker-tab {
    border: 1px solid #ccc;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
}

    .picker-tab.active {
        background: red;
        color: #fff;
    }

.icon-setting-profile {
    background: url(Images/icon-setting-profile.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-logout-profile {
    background: url(Images/icon-logout-profile.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-btn-print {
    background: url(Images/icon-btn-print.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-btn-fullscreen {
    background: url(Images/icon-btn-fullscreen.png) center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
    /*Modify by Nuii 11/4/2561 [W20180423-036] : ปรับ font เหลือ 2px*/
    /*margin-left: -10px;*/
}

.window-modal {
    width: 100% !important;
    background: #fff;
    border: 1px solid #ddd;
}

#TabModal li a {
    padding-top: 5px;
    padding-bottom: 5px;
    color: #2B92F2;
    margin-right: 0;
    border: 1px solid #2B92F2;
    border-radius: 0;
    margin-left: -1px;
    font-size: 13px;
}

#TabModal .active a, #TabTraning li a:hover {
    color: #fff;
    background-color: #2B92F2;
}

.icon-more-profile {
    /*background: url(Images/icon-more-profile.png) center right no-repeat;*/
    background: url(Images/ImagesSprite/icon-top-content.png) -238px -346px;
    width: 16px;
    height: 16px;
    display: block;
    margin-top: 7px;
}

.icon-arrow-left {
    background: url(Images/icon-arrow-left.png) center no-repeat;
    width: 12px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.icon-arrow-right-blue {
    background: url(Images/icon-arrow-right-blue.png) top -2px center no-repeat;
    width: 15px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

/*Modify by Nuii 06/09/2017 [W20170906-011] : RFC Flexible Time */
.icon-flex-right-blue {
    background: url(Images/icon-flex-shift.png) top 0px center no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
    padding: 0px;
}

.k-grid-pager {
    height: 31px;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
}

    .k-grid-pager .k-link, .k-state-selected {
        margin-top: 3px;
    }

.k-pager-wrap > .k-link:first-child {
    margin-left: 3px;
}

.k-pager-sizes {
    padding-top: 3px;
    float: right;
}

    .k-pager-sizes select {
        height: 20px;
        margin-left: 5px;
        float: right;
    }

    .k-pager-sizes .k-dropdown {
        float: right;
        margin-right: 0;
        background: #fff;
        margin-left: 8px;
    }

    .k-pager-sizes .k-dropdown-wrap, .k-pager-sizes .k-dropdown-wrap .k-input {
        border-radius: 5px;
        padding: 0;
        font-weight: 400;
        color: #333;
    }

        .k-pager-sizes .k-dropdown-wrap .k-select {
            line-height: 10px;
        }

.k-pager-info {
    padding: 2px 16px;
    float: left;
    margin-top: 1px;
}

.span-label-search {
    width: 105px;
}

#Tab li a {
    padding-top: 5px;
    padding-bottom: 5px;
    color: #2B92F2;
    margin-right: 0;
    border: 1px solid #2B92F2;
    border-radius: 0;
    margin-left: -1px;
    font-size: 13px;
}

    #Tab .active a, #Tab li a:hover {
        color: #fff;
        background-color: #2B92F2;
    }

.icon-action {
    float: right;
    width: 30%;
    line-height: 24px;
    height: 24px;
}

    .icon-action div {
        float: right;
    }

.add {
    color: #099;
    cursor: pointer;
}

.edit {
    color: #D18756;
    cursor: pointer;
}

.delete {
    color: #E48073;
    cursor: pointer;
}

select:disabled {
    background-color: #EBEBE4;
    border: none;
}

.border-gray {
    border: 1px solid #DDD;
}

.border-grid {
    border: 1px solid #DADADA;
}

.tabSearch {
    width: 100%;
    border-bottom: none;
}

    .tabSearch .litabs {
        width: 170px;
    }

        .tabSearch .litabs .divSearch {
            border-radius: 4px 0 0 4px;
            float: left;
            border: 1px solid #DDD;
            width: 100%;
            padding: 1px;
            height: 30px;
        }

            .tabSearch .litabs .divSearch .SearchBy {
                border: none;
                width: 100%;
                height: 26px;
                padding: 5px;
            }

        .tabSearch .litabs .divtxtSearch {
            border-radius: 0 4px 4px 0;
            float: left;
            border: 1px solid #DDD;
            width: 100%;
            border-left: none;
            height: 30px;
        }

            .tabSearch .litabs .divtxtSearch .txtSearch {
                border: none;
                width: 100%;
                padding: 5px;
                height: 28px;
            }

        .tabSearch .litabs .divtxt {
            height: 30px;
            line-height: 30px;
        }

        .tabSearch .litabs .divtxtSearch2 {
            border-radius: 4px;
            float: left;
            border: 1px solid #DDD;
            width: 100%;
            padding: 1px;
            height: 30px;
        }

            .tabSearch .litabs .divtxtSearch2 .txtSearch {
                border: none;
                width: 100%;
                padding: 0 5px;
                height: 26px;
            }

.lbl-box {
    padding: 7px 7px 5px 8px;
    width: 120px;
    float: left;
    height: 30px;
}

/*Modify by Nuii 18/09/2017 [W20170906-011] : RFC Flexible Time*/
.lbl-boxCalendar {
    padding: 7px 7px 5px 8px;
    width: 150px;
    float: left;
    height: 30px;
}

.error {
    border-color: #b94a48 !important;
}

#frmSearchEnumAttr {
    position: absolute;
    z-index: 5;
    width: 70%;
}

#btnGridAdd, #btnGridRemove, #addAttEnum, #RemoveAttEnum, .btn-remove-all, .btn-add-command,
.btnGridRemove {
    float: right;
    padding: 0;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}


#btnGridAdd {
    color: #008860;
}

#addAttEnum, .btn-add-command {
    color: #008860 !important;
}

    #btnGridAdd span, #addAttEnum span, .btn-add-command span {
        margin-left: 5px;
    }

#btnGridRemove, #RemoveAttEnum, .btn-remove-all,
.btnGridRemove {
    color: #FD2F2F !important;
}

    #btnGridRemove span, #RemoveAttEnum span, .btn-remove-all span {
        margin-left: 5px;
    }

.k-dropdown {
    margin-top: 0 !important;
}

.k-dropdown-wrap > span {
    padding-top: 3px !important;
}

.divTo {
    float: left;
    width: 88px;
    height: 20px;
    line-height: 20px;
    text-align: right;
    padding: 5px;
}

.divToText {
    float: left;
    width: 250px;
    border: 1px solid #DDD;
    border-radius: 4px;
}

.divddlApprove {
    border: 1px solid #DDD;
    width: 185px;
    border-radius: 4px;
}

.num-int {
    text-align: right;
}

.my-checkbox {
    cursor: pointer;
}

.content-search {
    float: right;
}

#titleTopic {
    margin: 0 auto;
    width: 700px;
    text-align: center;
}

#treeview .k-state-selected {
    background-color: #368ee0;
    color: #fff;
}

#treeview span:hover {
    background-color: #D8EAFE;
    color: #000;
    border-color: #4A99E4;
}

.btn-picker-search {
    width: 70px;
}

.rage-date .content-space {
    width: 380px !important;
    padding-bottom: 0;
    width: 330px !important;
    padding-bottom: 0;
}

    .rage-date .content-space start div {
        width: 65px;
    }

    .rage-date .content-space to div {
        width: 30px;
    }

.secondinput {
    width: 360px !important;
    padding: 5px 5px !important;
    margin-left: 0 !important;
}

.ot_l10 {
    margin-left: 0;
}

.approve_home {
    margin-right: 38px;
}

.modal-width {
    width: 80% !important;
    max-width: 900px;
    min-width: 840px;
}

.modal-width-big {
    width: 90% !important;
    max-width: 1000px;
}

.time-input {
    width: 240px;
    padding: 0 10px;
    margin-left: 10px;
    width: 240px;
    background-color: #ebebe4;
}

.OpenImg {
    vertical-align: middle;
}

.k-grid td.subtxt {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.k-upload .k-upload-selected {
    background: #fff;
}

    .k-upload .k-upload-selected:hover {
        background: #2B92F2;
    }

input.grid-checkbox {
    vertical-align: sub;
    /*Nirun 20200212 [W20200207-012] : ปรับ single check box ให้ตรงกับ check box all */
    /*margin: 0 5px;*/
    margin: 0 9px;
}

a.k-grid-deleted, a.k-grid-cancel, a.k-grid-not-delete, a.k-grid-deleted-disabled {
    margin: 0 0 2px 15px !important;
}

a.k-grid-edit, a.k-grid-Edit, a.k-grid-not-edit, a.k-grid-update {
    margin: 0 0 2px !important;
}

a.k-grid-edit-disabled {
    margin: 0 0 2px !important;
}

a.k-grid-deleted-disabled {
    margin: 0 0 2px 15px !important;
}

.GridUC {
    background: #fff;
}

.grid-time {
    text-align: right;
}

.grid-number {
    text-align: right;
}

.btn-modal-add.disabled {
    color: #aaa !important;
}

.btn-modal-del.disabled {
    color: #aaa !important;
}

.btn-modal-add.disabled .icon-add {
    background: url(Images/icon-add24-gray.png) no-repeat center !important;
}

.btn-modal-del.disabled .icon-del {
    background: url(Images/icon-delete-gray-24.png) no-repeat center !important;
}

.btn-modal-add {
    color: #008860;
    cursor: pointer;
}

.btn-modal-del {
    color: #FD3D3D;
    cursor: pointer;
}

#content-top {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 100;
    height: 70px;
}

.containner_default {
    padding: 10px 0;
    width: 980px;
    margin: 0 auto;
}

.bg-white {
    background: #fff;
}

.modal {
    direction: rtl;
    overflow-y: auto;
}

    .modal .modal-dialog {
        direction: ltr;
    }

.modal-open {
    overflow: auto;
}


#menu-user-profile:hover {
    text-decoration: underline;
}

#menu-user-logout:hover {
    text-decoration: underline;
}

#menufooter:hover {
    text-decoration: underline;
}

.icon-set-levrequest-hover {
    /*background: url(Images/icon-set-levrequest-hover.png) top center no-repeat;*/
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
    color: #2B92F2 !important;
}
    /* Panjakit 20220218 [W20220218-017] : คลิกหน้าจอแล้ว Icon หาย */
    .icon-set-levrequest-hover span {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
        background: url(Images/icon-set-levrequest-hover.png) top center no-repeat;
    }
.icon-set-report-hover span {
    background: url(Images/icon-set-report-hover.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

.icon-set-report-hover {
    /*background: url(Images/icon-set-report-hover.png) top center no-repeat;*/
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
    color: #2B92F2 !important;
}

.icon-setting-hover {
    background: url(Images/icon-setting-hover.png) top center no-repeat;
    width: 90px;
    height: 32px;
    display: block;
    margin: 0 auto;
    color: #2B92F2 !important;
}
/*////////////////////////////////////////////////////////////////////////////////////////////*/
/* -------------------- Safari -----------------------------------------*/
.k-safari #menu-list-default {
    margin-top: -15px;
}
/*.k-safari .icon-setting-user {
    margin-top:15px;
}*/
.k-safari .dropdown {
    margin-top: 10px;
}

.k-safari .nav-title ul li a {
    margin-top: 12px;
}

.k-safari #DateType, .k-safari #Status, .k-safari #View, .k-safari #ApproveStatus, .k-safari #LeaveType, .k-safari #Prefix, .k-safari #PrefixEng, .k-safari #Statuscard, .k-safari #Gender, .k-safari #BloodGroup, .k-safari #Nationality, .k-safari #Religion, .k-safari #Race, .k-safari #Country, .k-safari #Province, .k-safari #Amphur, .k-safari #AddressType, .k-safari #District, .k-safari #NameTitle, .k-safari #Relationship, .k-safari #Occupation, .k-safari #Hospital, .k-safari #DeseaseName, .k-safari #ShiftType, .k-safari #Language, .k-safari #Speak, .k-safari #Reading, .k-safari #Writing, .k-safari #Knowledge, .k-safari #CapabilityGeneralLevel, .k-safari #Clinic, .k-safari #BackupClinic1, .k-safari #BackupClinic2, .k-safari #FatherTitle, .k-safari #MotherTitle, .k-safari #SpouFatherTitle, .k-safari #SpouMotherTitle, .k-safari #CalcTaxType, .k-safari #CalcIncStartPeriod, .k-safari #EmpType, .k-safari #ddlStatusWedding, .k-safari #MarryProvince, .k-safari #MarryIssueAt, .k-safari #ddlMilitaryStatus, .k-safari #EducationLevel, .k-safari #EducationalInstitution, .k-safari #EducationField, .k-safari #Graduand, .k-safari #OrganizationExp, .k-safari #BusinessTypeExp, .k-safari #PositionExp, .k-safari #IsFix, .k-safari #ddlCourseReqType, .k-safari #ddlGender, .k-safari #Nation, .k-safari #ddlStatus, .k-safari #ddlTypeRecruit, .k-safari #ddlCharacterJob, .k-safari #ddlEducationLevel, .k-safari #ddlEduGraduand, .k-safari #ddlEducationalInstitution, .k-safari #ddltxtEduMaster1, .k-safari #ddlEduProvince, .k-safari #ddltxtEduMaster2, .k-safari #ddlExpOrganize, .k-safari #ddlExpBusinessType, .k-safari #ddlExpPosition, .k-safari #ddlExpSMonth, .k-safari #ddlExpEMonth, .k-safari #Understanding, .k-safari #CapabilityLevel, .k-safari #ddlistReportType, .k-safari #ddlEmpType, .k-safari #ddlOrgUnitType1, .k-safari #ddlOrgUnitType2, .k-safari #txtTaxYear, .k-safari #PeriodTemplate, .k-safari #TemplateID, .k-safari #ddlUrgentType, .k-safari #ddlCourseReqGroup, .k-safari #TypeHealth, .k-safari #FMPrefix, .k-safari #ddlStatusProvince, .k-safari #ddlStatusState {
    line-height: 24px;
}

.k-safari #typeSearchEmpHealth, .k-safari #typeSearchEmpAddress, .k-safari #typeSearchEmpFamily, .k-safari #typeSearchEmpEducation, .k-safari #typeSearchEmpExperience, .k-safari #typeSearchEmpReward, .k-safari #typeSearchEmpPunishment, .k-safari #typeSearchTraining, .k-safari #SearchPositionBy, .k-safari #SearchOrganizationBy {
    line-height: 22px;
}

.k-safari #txtEmergency, .k-safari #txtSpouseAge {
    margin-left: 30px;
}

.k-safari #icon_startdate, .k-safari #icon_enddate {
    margin-left: 335px;
}

.k-safari .OTStartDate {
    margin-left: 325px;
}

.k-safari .border-content.tabSearch .litabs .divSearch .SearchBy {
    line-height: 22px;
}

.k-safari .SearchBy {
    line-height: 22px;
}

.k-safari .border-content .divRow .content-space select {
    line-height: 24px;
}

.btn-choose-grid, .modal-footer .btn-close-modal, .modal-footer .btn, .btnSearch {
    width: 70px;
}

.modal-header .btn-close-modal {
    width: 15px;
}

#txtSearch:focus {
    position: relative !important;
    z-index: 10 !important;
}


.period-datepicker .content-space .bDate, .content-space #txtSearch {
    margin-left: 10px !important;
    width: 239px !important;
}

/*[Modify 16/01/2015 By Ailada W20141224-010 ] : เพิ่มรายการอนุมัติการร้องขอ ในหน้าจอ info เพื่อสะดวกต่อการเลือกรายการเพื่ออนุมัติ*/
/**************************************slied menu**************************************/
.mini-submenu {
    /*background: url(Images/toggle-collapse.png) top center no-repeat;
    background-size: 27px 27px;
    height: 30px;*/
    /*Nuii Modify 13/07/2561 [W20180713-007] : แก้ไขกรณีรูป << แสดงไม่สวยงามเหมือนอันอื่น*/
    background: url(Images/toggle-collapse.png) center no-repeat;
    width: 30px;
    /*Modify by alongkon 28/11/2561 [W20181128-028] : ปรับicon อยู่ในระดับเดียวกันให้สวยงาม*/
    height: 26px;
    /*display: block;*/
    /*Modify by alongkon 18/04/2562 [W20190418-019] : ปรับicon อยู่ในระดับเดียวกันให้สวยงาม*/
    margin: 2px;
}

    .mini-submenu:hover {
        cursor: pointer;
    }

    .mini-submenu .icon-bar {
        border-radius: 1px;
        display: block;
        height: 2px;
        width: 22px;
        margin-top: 3px;
    }

    .mini-submenu .icon-bar {
        background-color: #000;
    }

#slide-submenu {
    /*background: rgba(0, 0, 0, 0.45);*/
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
}

.lbl {
    font-size: 12px;
    font-family: "SegoeUI", "Tahoma";
    /*margin: 0;   ***** ห้ามเอา comment ออก กระทบส่วนกลาง
    padding: 0;*/
    color: #000;
}

.approve-right-list {
    width: 290px;
    border: 1px solid #ddd;
    height: 673px;
    float: right;
    margin-top: 6px;
    margin-right: -290px;
    background-color: white;
    position: fixed;
    right: 290px;
    top: 63px;
}

.list-menu:hover {
    margin: 0;
    border: 0px;
    border-left-width: 0px;
    border-radius: 1px;
    background-color: #EEE;
}

#txtSearchApproveRightInfo {
    font-size: 12px;
    font-family: "SegoeUI", "Tahoma";
}

.icon-accordion-left {
    background: url(Images/collapse_arrow.png) top center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    background-size: 24px 24px;
}

.icon-accordion-right {
    background: url(Images/icon-accordion-right.png) top center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    /*Nuii Modify 22/08/2561 [W20180822-028] : RFC : เพิ่มแท็บขวามือให้เป็นการปักหมุด*/
    /*background-size: 24px 24px;*/
    background-size: 18px 18px;
}

/*Nuii Modify 22/08/2561 [W20180822-028] : RFC : เพิ่มแท็บขวามือให้เป็นการปักหมุด*/
.icon-pin-right {
    background: url(Images/icon-pin-right.png) top center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    background-size: 18px 18px;
    margin-left: 5px;
}
/*Nuii Modify 22/08/2561 [W20180822-028] : RFC : เพิ่มแท็บขวามือให้เป็นการปักหมุด*/
.icon-unpin-right {
    background: url(Images/icon-unpin-right.png) top center no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    background-size: 18px 18px;
    margin-left: 5px;
}

.font-label-rightMenu {
    font-family: 'thai_sans_literegular';
    font-size: 18px;
    color: #2B92F2;
}
/*Keneji_phat Modify 2016-03-14: เพิ่มกำหนด font หัวข้อเมนู*/
.font-label-rightHeader {
    font-family: 'thai_sans_literegular';
    font-size: 18px;
    color: #666;
    font-weight: bold;
}

.bs-callout {
    margin: 0;
    border: 0px solid #2B92F2;
    border-left-width: 4px;
    border-radius: 1px;
    background-color: #EEE;
}

/*[Modify 16/12/2014 By Ailada W20141216-005 ] : เพิ่มรูปการเปลี่ยนภาษาหน้าจอ Login*/
.icon-THi {
    background: url(Images/icon-THi.png) left bottom no-repeat;
    width: 30px;
    height: 22px;
    display: block;
    margin-right: -5px;
}

.icon-ENg {
    background: url(Images/icon-ENg.png) left bottom no-repeat;
    width: 30px;
    height: 22px;
    display: block;
}

.icon-THi-Enable {
    background: url(Images/icon-THi-Enable.png) left bottom no-repeat;
    width: 30px;
    height: 22px;
    display: block;
    margin-right: -5px;
}

.icon-ENg-Enable {
    background: url(Images/icon-ENg-Enable.png) left bottom no-repeat;
    width: 30px;
    height: 22px;
    display: block;
}
/*[Modify 21/01/2015 By Ailada W20150121-016 ] : เพิ่มปุ่มเพื่อ preview เอกสารในหน้าจอแนบไฟล์*/
.icon-preview-s {
    margin-left: 10px;
    font-family: "Tahoma", "SegoeUI";
    font-size: 12px;
    color: #2B92F2;
}

    .icon-preview-s:hover {
        cursor: pointer;
    }

.font-label-header-reightMenu {
    font-family: 'thai_sans_literegular';
    font-size: 20px;
    color: #2B92F2;
}
/*Keneji_phat Modify 2016-08-31: เพิ่มการ Set Color*/
.g-EditColor {
    background-color: #ead4dd;
}
/*Keneji_phat Modify 2016-10-03: Start Responsive*/
.hCon {
    /*display:block;*/
}

.titleTopic-list {
    margin: 0 auto;
    width: 450px;
    text-align: center;
}

.std_info {
    position: absolute;
    height: 43px;
    top: 70px;
    z-index: 99;
    background: rgb(255, 255, 255);
    width: 100%;
    min-width: 980px;
}

.std_info-cont {
    border-bottom: 1px solid #DDD;
    padding-bottom: 5px;
    width: 980px;
}

.std_list {
    position: absolute;
    background: rgb(255, 255, 255);
    height: 42px;
    top: 70px;
    z-index: 99;
    width: 100%;
    min-width: 85%;
}

.std_list-cont {
    border-bottom: 1px solid #DDD;
    width: 100%;
}

.std_viewby {
    border: 1px solid #DDD;
    width: 185px;
    border-radius: 4px;
    padding: 5px 2px 5px 0px;
}

.std_viewstatus {
    border: 1px solid #DDD;
    width: 185px;
    border-radius: 4px;
}

.std_Ch1 {
    width: 470px;
    height: 360px;
    margin-left: 0;
    border: 1px solid #ddd;
}

.m-MenuCont {
    width: 70%;
    /*border-right: 1px solid #ddd;*/
}

.m-MenuCont1 {
    width: 30%;
    /*height: 240px;*/
    min-height: 240px;
    border-left: 1px solid #ddd;
    padding-left: 5px;
}

.m-pop-content {
    padding: 20px 0 10px;
    max-width: 980px;
    margin: 0 auto;
}

.m-imag {
    width: 100px;
    margin-top: -10px;
}

.m-font_left {
    width: 180px;
    color: #555;
}

.m-Grid_Att {
    width: auto;
    float: right;
    width: 30%;
    line-height: 24px;
    height: 24px;
}

.m-menu-action {
    margin-top: -35px;
}

.ul_list {
    width: 470px;
}

/*Keneji_phat Modify 2016-10-03: End Responsive*/

/*Surapat 20161209 : เพิ่่มปุ่่มเปลี่ยนภาษาในหน้าจอบันทึกใบสมัครออนไลน์*/
.icon-THR {
    background: url(Images/icon-TH.png) left bottom no-repeat;
    width: 22px;
    height: 18px;
    display: block;
}

.icon-ENR {
    background: url(Images/icon-EN.png) left bottom no-repeat;
    width: 22px;
    height: 18px;
    display: block;
}

.ddl-org {
    float: right;
    margin-left: 0px;
    /*Modify by Nuii 11/4/2561 [W20180423-036] : ปรับ Responsive*/
    /*margin-right: 10px;*/
}

.multiselect-container {
    /*width:230px;*/
    width: 100%;
}

.multiselect, .multiselect:hover, .multiselect:focus {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
    /*padding: 6px 74px;*/
    font-size: 13px !important;
    font-family: "Tahoma","SegoeUI" !important;
    margin-left: 10px !important;
}

/*Nuii Modify 29/04/2562 [W20190429-052] : ปรับ font การแสดงชื่อองค์กรณ์ให้เหมือนกันทุกหน้าจอ*/
.ddlselect, .ddlselect:hover, .ddlselect:focus {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
    /*padding: 6px 74px;*/
    font-size: 13px !important;
    font-family: "Tahoma","SegoeUI" !important;
    margin-left: 10px !important;
}

.multiselect b:before {
    content: "\f107";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /*--adjust as necessary--*/
    color: #000;
    font-size: 19px;
    padding-right: 0.5em;
    position: absolute;
    top: 1px;
    right: -7px;
}

.ddl-org-Info select:before {
    content: "\f107";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /*--adjust as necessary--*/
    color: #000;
    font-size: 19px;
    padding-right: 0.5em;
    position: absolute;
    top: 2px;
    right: 0;
}

.multiselect-container > li > a > label.checkbox {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.btn-group > .dropdown-menu {
    overflow-y: scroll;
    height: 165px;
    font-size: 13px;
}

.sort span.pointer {
    height: 15px;
    width: 15px;
    position: absolute;
    right: 14px;
    top: 5px;
    font-size: 18px;
    z-index: 1;
}

.fa-caret-down:before {
    content: "\f107" !important;
    color: #000 !important;
}

.fixDropDown {
    -webkit-appearance: none;
    color: #333 !important;
    background-color: #fff;
    border-color: #ccc !important;
    font-size: 13px !important;
    font-family: "Tahoma","SegoeUI" !important;
}

.ddl-org-Infosingle {
    float: right;
    margin-left: 0px;
    margin-right: -14px;
}


.k-selectbox {
    height: 27px !important;
    line-height: 20px;
    border: 1px solid #ccc;
}

/*Nirun 06/12/2561 [W20181128-052] : icon perview */
/*Nuii Modify 11/12/2561 [W20181211-016] : เพิ่ม icon preview*/
.icon-preview-insert-recruit {
    /*background: url(Images/icon-payslip-report.png) no-repeat;*/
    background: url(Images/icon-preview-insert-recruit.png) no-repeat;
    width: 28px;
    height: 22px;
    display: block;
    background-size: 22px;
    background-position: right;
}

/*Nuii Modify 11/12/2561 [W20181211-016] : เพิ่ม icon preview*/
.icon-save-insert-recruit {
    background: url(Images/icon-save-insert-recruit.png) no-repeat;
    width: 25px;
    height: 22px;
    display: block;
    background-size: 22px;
    background-position: center;
}

/*Nuii Modify 11/12/2561 [W20181211-016] : เพิ่ม icon preview*/
.btn-save-recruitNew:hover {
    background: #2B92F2;
}


/*Nirun 20190906 [W20190906-003] : รูป loading ขอว grid*/
.k-loading-image {
    background-image: url(Images/k-loading-image.gif) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
}
/*Nirun 20200303 [W20200212-035] :  สี Auto Complete grid */
.highlight {
    background-color: #FFFF88;
}
/*Nirun 20191230 [W20191108-035] : multi header table */
.k-m-header, .k-m-t-header, .k-m-detail {
    background: rgb(238, 238, 238);
}

    .k-m-detail td {
        border: 1pt solid rgb(221, 221, 221);
    }

/*#region  แอนิเมชั่นปุ่มโหลด*/
/*Nirun 20200417 [W20200408-030] : แอนิเมชั่นปุ่มโหลด */
.w3-modal {
    z-index: 3;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    z-index: 1050;
}

.w3-modal-content {
    position: fixed;
    bottom: 0;
    left: 50px;
    height: 200px;
}




@keyframes mymove {
    from {
        bottom: 60px;
    }

    to {
        bottom: 80px;
    }
}

.arrow_box {
    animation: mymove 1.5s;
    animation-iteration-count: infinite;
}
/*Nirun 20200519 [W20200515-042] : ปรับสี + เพิ่ม Logo*/
.arrow_box {
    width: 95px;
    position: fixed;
    z-index: 1102;
    text-align: center;
    /* background: #006eb6; */
    color: #fff;
    padding: 15px 22.5px;
    font-weight: 600;
    opacity: 1;
    transition: opacity .8s;
    background-color: #ffffff;
    background-image: linear-gradient(12deg, #006eb6 39%, transparent 40%), linear-gradient(-19deg, #69bef5 39%, transparent 40%);
}

.arrow_box_Text {
    font-size: 11px;
}

.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #006db6;
    border-width: 40px;
    margin-left: -40px;
}

.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #006db6;
    border-width: 47px;
    margin-left: -47px;
}

.animate-opacity {
    animation: opac 0.8s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}


.animate-show {
    animation: show 0.8s;
    animation-fill-mode: forwards;
}

@keyframes show {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
/*#endregion  แอนิเมชั่นปุ่มโหลด*/
/*Nirun 20200515 [W20200504-008] : */
div.ArrowFontAwesome {
    width: 250px;
    overflow: hidden;
    position: relative;
    display: block;
}

select.ArrowFontAwesome {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    margin-left: 10px;
    padding: 5px !important;
}
    select.ArrowFontAwesome::-ms-expand {
        display: none;
    }
    select.ArrowFontAwesome + i.fa {
        float: right;
        margin-top: -22px;
        pointer-events: none;
        background-color: transparent;
        color: #999 !important;
        padding-right: 7px;
    }

/*Nirun 20200703 [W20200702-010] : สถานะเอกสาร */
.StatusText {
    width: 160px !important;
    text-align: right;
    border: none !important;
    font-weight: bold !important;
    padding: 0px 10px !important;
    font-family: 'thai_sans_literegular';
    font-size: 20px !important;
}

    .StatusText.New {
        color: #00AEB1 !important;
    }
    .StatusText.Y {
        color: #039D12 !important;
    }
    .StatusText.P, .StatusText.W {
        color: #FF8D60 !important;
    }
    .StatusText.N, .StatusText.C {
        color: #D9001B !important;
    }

/*Nirun 20200714 [W20200716-016] : ปิดแสดง  a[href] ปลิ้นจาก chrome*/
@media print {
    a[href]:after {
        content: none !important;
    }
}

/*Nirun ส่วน div ที่ครอบgridอยู่ */
.GridGroup {
    border: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: white;
}


/*Nirun 20210519 [W20210106-028] : คำร้องสวัสดิการ*/
.line-height10 {
    line-height: 10px;
}

.line-height20 {
    line-height: 20px;
}


.line-height27 {
    line-height: 27px;
}


.line-height30 {
    line-height: 30px;
}

.bg-blue {
    background: #D8EAFE !important;
}
/*Nuii 24/8/2564 [W20210824-008] : เพิ่ม bg-light-blue*/
.bg-light-blue {
    background: #d8eafeba !important;
}
/*หน้า List */
/*Grid border*/
.borderGridList {
    border: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: white;
}

.min-height300 {
    min-height: 300px;
}
.min-height250 {
    min-height: 250px;
}
.min-height220 {
    min-height: 200px;
}

/*Nirun 20210929 [W20210929-001] : line-clamp*/
.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4, .line-clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}

.line-clamp-4 {
    -webkit-line-clamp: 4;
}

.line-clamp-5 {
    -webkit-line-clamp: 5;
}
/*Nirun  20210929 [W20210929-002] : icon menu*/
.icon-menu-setting {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url('Images/ImagesSprite/icon-top-content.png') -178px -94px;
}

.icon-organization {
    background: url('Images/ImagesSprite/icon-top-content.png') -10px -178px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-payslip {
    background: url('Images/ImagesSprite/icon-top-content.png') -94px -178px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-Recruitment {
    background: url('Images/ImagesSprite/icon-top-content.png') -178px -178px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-report {
    background: url('Images/ImagesSprite/icon-top-content.png') -262px -10px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-timeatt {
    background: url('Images/ImagesSprite/icon-top-content.png') -262px -94px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-training {
    background: url('Images/ImagesSprite/icon-top-content.png') -262px -178px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-Welfare {
    background: url('Images/ImagesSprite/icon-top-content.png') -10px -262px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-approvecenter {
    background: url('Images/ImagesSprite/icon-top-content.png') -10px -10px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-calendar {
    background: url('Images/ImagesSprite/icon-top-content.png') -94px -10px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-dashboard {
    background: url('Images/ImagesSprite/icon-top-content.png') -10px -94px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-menu-home {
    background: url('Images/ImagesSprite/icon-top-content.png') -94px -94px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.icon-menu-personel {
    background: url('Images/ImagesSprite/icon-top-content.png') -178px -10px;
    width: 64px;
    height: 64px;
    display: inline-block;
}

/*Nirun 20211022 [W20211020-007] :  enum ปรับให้ auto search ได้*/
.selectize-input, .selectize-control {
    height: 30px;
    min-height: 30px !important;
}

.selectize-input {
    padding: 5px 0 !important;
    color: #000 !important;
}

#from-educat-modal .selectize-control {
    margin-left: 10px;
}

.selectize-input input {
    top: -5px;
    padding: 0px 5px !important;
}

.selectize-input .item {
    padding: 0px 5px !important;
}

.selectize-control.single .selectize-input:after {
    content: '\f078' !important; /*This will draw the icon*/
    font-family: "FontAwesome";
    line-height: 2;
    display: block;
    position: absolute;
    top: -5px;
    right: 0;
    background-color: white;
    padding-right: 2px;
    border: none !important;
    right: 13px !important;
    margin-top: -10px !important;
    font-size: 11px !important;
}

.selectize-control.single .selectize-input.dropdown-active:after {
    content: '\f077' !important;
    font-family: "FontAwesome";
    background-color: white;
    padding-right: 2px;
    border: none !important;
    right: 13px !important;
    margin-top: -10px !important;
    font-size: 11px !important;
}

.z1 {
    z-index: 1
}