@charset 'utf-8';


/* Font-Size */
.f12px { font-size: 12px !important; } .f14px { font-size: 14px !important; } .f16px { font-size: 16px !important; } .f18px { font-size: 18px !important; }
.f20px { font-size: 20px !important; } .f22px { font-size: 22px !important; } .f24px { font-size: 24px !important; } .f26px { font-size: 26px !important; }
.f28px { font-size: 28px !important; } .f30px { font-size: 30px !important; } .f32px { font-size: 32px !important; } .f34px { font-size: 34px !important; }
.f36px { font-size: 36px !important; } .f38px { font-size: 38px !important; } .f40px { font-size: 40px !important; } .f42px { font-size: 42px !important; }
.bold{ font-weight: bold; font-style: normal; }
.italic{ font-weight: normal; font-style: italic; }
.bold_italic{ font-weight: bold; font-style: italic; }


/** Modal loading  */
#modal-loading{ position: fixed; top: 28%; left: 0; width: 100%; padding: 1.2em; box-sizing: border-box; z-index: 8888; }
#modal-loading:before, #modal-loading:after{ content: ' '; display: block; }
#modal-loading:before{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.88); z-index: -1; }
#modal-loading:after{ position: absolute; background: rgba(255, 255, 255, 0.25); top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
@keyframes lds-eclipse { 
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes lds-eclipse {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


/** Font Awesome spin speed */
.fa-spin-1x { animation: fa-spin 1s infinite linear; -webkit-animation: fa-spin 1s infinite linear;}
.fa-spin-2x { animation: fa-spin 0.5s infinite linear; -webkit-animation: fa-spin 0.5s infinite linear;}


/** Opacity */
.alp00{ filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0 !important; } .alp10{ filter: alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1 !important; }
.alp20{ filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2 !important; } .alp30{ filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3 !important; }
.alp40{ filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4 !important; } .alp50{ filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5 !important; }
.alp60{ filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6 !important; } .alp70{ filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7 !important; }
.alp80{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8 !important; } .alp90{ filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9 !important; }
.alp100{ filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1 !important; }


/** i-scroll */
.i-scroll::-webkit-scrollbar{ width: 8px; height: 8px; }
.i-scroll::-webkit-scrollbar-track{ background-color: transparent; }
.i-scroll::-webkit-scrollbar-thumb{ background-color: #8f8f8f; border-radius: 5px; }
.i-scroll::-webkit-scrollbar-corner{ background-color: transparent; }
.i-scroll::-webkit-scrollbar{ width: 8px; height: 8px; }
.no-scrolling{ height: 100% !important; overflow: hidden !important; }


/** Element with color global */	
.aa{ border: dashed 1px #ff0000; } .bb{ border: dashed 1px #0000ff; } .cc{ border: dashed 1px #007e00; } .dd{ border: dashed 1px #4a4a4a; } 
.clRED{ color: #ff0000 !important;} .clBLUE{ color: #0000ff !important;} .clGREEN{ color: #007e00 !important;}
.bgRED{ background: #ff0000 !important;} .bgBLUE{ background: #0000ff !important;} .bgGREEN{ background: #007e00 !important;}
.clFFF { color: #FFF; } .bgFFF { background-color: #FFF; } .cl000 { color: #000; } .bg000 { background-color: #000; }
.highlight { background-color: #ffeb00; }
.td-selected{ background: #FF7A7E; color:#FFF; }
.div_disabled_all_element { position:absolute; left:0px; top:0px; width:100%; height:100%; cursor: not-allowed; }


/** Color global */
.color-gray{ color: #777777; } .bgcolor-gray{ background: #777777; }
.color-magenta{ color: #b152a6; } .bgcolor-magenta{ background: #b152a6; }
.color-purple500{ color: #9c27b0; } .bgcolor-purple500{ background: #9c27b0; }


/** Link global */
.cursor_pointer{ cursor: pointer !important; } .cursor_default{ cursor: default !important; } .cursor_not_allowed{ cursor: not-allowed !important; }
.alnk-underline{ text-decoration: underline; }
.alnk{ cursor: pointer; } .alnk:hover{ text-decoration: none; } .alnk:focus-within{ text-decoration: none; } .alnk:active { opacity: 0.6; }
.alnk-white{ color:#fff; } .alnk-white:hover{ color:#fff; text-decoration: none;  opacity: 0.8; }  .alnk-white:focus-within{ color:#fff; text-decoration: none; }
.alnk-gray{ color:#777; } .alnk-gray:hover{ color:#777; text-decoration: none;  opacity: 0.8; }  .alnk-gray:focus-within{ color:#777; text-decoration: none; }
.alnk-underline-gray {     
	background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #888888 81.1%, #888888 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) );
	padding-bottom: 5px; text-decoration: none;
}
	
/** Class ดัน */	
.dun1{ height:10px; } .dun2{ height:20px; } .dun3{ height:30px; } .dun4{ height:40px; } .dun5{ height:50px; } 
.dun6{ height:60px; } .dun7{ height:70px; } .dun8{ height:80px; } .dun9{ height:90px; } .dun10{ height:100px; }	

/** Element others global */	
.wordwrap{ white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } 
textarea{ box-sizing: border-box; resize: none;}
.shadow_gray{ text-shadow: 1px 1px 1px #ccc; }
	
	
/** Buttion style white */
.btn_white {
    display: inline-block; padding: 12px 18px; color: #4e80f1;
    background: linear-gradient(180deg, #ffffff 10%, #f0f0f0 90%, #f0f0f0 100%);
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
}
.btn_white:active {
    background: linear-gradient(180deg, #ffffff 10%, #f0f0f0 90%, #f0f0f0 100%);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 6px, rgba(0, 0, 0, 0.09) 0px 1px 4px;
    opacity: 0.6;
}
.btn_white:link, .btn_white:visited { text-decoration: none;}
.btn_white.btn_sm{ padding: 3px 9px;}


/** Override and Modify PNotify */
.ui-pnotify-icon, .ui-pnotify-icon span { padding-top: -5px; }
.ui-pnotify-title{ font-family: 'chatthai'; font-size: 24.8px; line-height: 0.12in; }
.ui-pnotify .ui-pnotify-container.alert.alert-success { background-color: #93c54b;468500 border-color: transparent; color: #ffffff;}
.ui-pnotify .ui-pnotify-container.alert.alert-info { background-color: #29abe0; border-color: transparent; color: #ffffff;}
.ui-pnotify .ui-pnotify-container.alert.alert-warning { background-color: #f47c3c; border-color: transparent; color: #ffffff;}
.ui-pnotify .ui-pnotify-container.alert.alert-danger { background-color: #d9534f; border-color: transparent; color: #ffffff;}
.ui-pnotify .ui-pnotify-container .ui-pnotify-text { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
.ui-pnotify-text pre{/*white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;*/}
.ui-pnotify-text pre::-webkit-scrollbar{ width: 8px; height: 8px; }
.ui-pnotify-text pre::-webkit-scrollbar-track{ background-color: transparent; }
.ui-pnotify-text pre::-webkit-scrollbar-thumb{ background-color: #8f8f8f; border-radius: 5px; }
.ui-pnotify-text pre::-webkit-scrollbar-corner{ background-color: transparent; }
.ui-pnotify-text pre::-webkit-scrollbar{ width: 8px; height: 8px; }


/** Disable select */
.no-select {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/** Disable drag */
.no-drag {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}


/** Border-radius  */
.crn0{ border-radius: 0px !important; -moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; }
.crn2{ border-radius: 2px  !important; -moz-border-radius: 2px  !important; -webkit-border-radius: 2px  !important; }
.crn3{ border-radius: 3px  !important; -moz-border-radius: 3px  !important; -webkit-border-radius: 3px  !important; }
.crn5{ border-radius: 5px  !important; -moz-border-radius: 5px  !important; -webkit-border-radius: 5px  !important; }
.crn8{ border-radius: 8px  !important; -moz-border-radius: 8px  !important; -webkit-border-radius: 8px  !important; }
.crn10{ border-radius: 10px  !important; -moz-border-radius: 10px  !important; -webkit-border-radius: 10px  !important; }
.crn15{ border-radius: 15px  !important; -moz-border-radius: 15px  !important; -webkit-border-radius: 15px  !important; }
.crn20{ border-radius: 20px  !important; -moz-border-radius: 20px  !important; -webkit-border-radius: 20px  !important; }
.crn-left0{ border-top-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; -webkit-border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; -moz-border-radius-bottomleft: 0px !important; -webkit-border-bottom-left-radius: 0px !important; }
.crn-right0{ border-top-right-radius: 0px !important; -moz-border-radius-topright: 0px !important; -webkit-border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; -moz-border-radius-bottomright: 0px !important; -webkit-border-bottom-right-radius: 0px !important; }
.crn-left2{ border-top-left-radius: 2px !important; -moz-border-radius-topleft: 2px !important; -webkit-border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; -moz-border-radius-bottomleft: 2px !important; -webkit-border-bottom-left-radius: 2px !important; }
.crn-right2{ border-top-right-radius: 2px !important; -moz-border-radius-topright: 2px !important; -webkit-border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; -moz-border-radius-bottomright: 2px !important; -webkit-border-bottom-right-radius: 2px !important; }
.crn-left3{ border-top-left-radius: 3px !important; -moz-border-radius-topleft: 3px !important; -webkit-border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; -moz-border-radius-bottomleft: 3px !important; -webkit-border-bottom-left-radius: 3px !important; }
.crn-right3{ border-top-right-radius: 3px !important; -moz-border-radius-topright: 3px !important; -webkit-border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; -moz-border-radius-bottomright: 3px !important; -webkit-border-bottom-right-radius: 3px !important; }


/* Orverride form-control placeholder color */
.form-control::-webkit-input-placeholder { color: #bababa; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: #bababa; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: #bababa; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: #bababa; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: #bababa; }  /* Microsoft Edge */

/** --------------------------------------------- Start Bootstrap 4 (override, fix) --------------------------------------------- **/
/*.btn {
    border-radius: .15rem !important;
}*/


/* Override form-group.row */
@media(min-width: 768px){
    .form-group.row > .col-form-label {
        text-align: right;
    }
}

/* Override : bootstrap-select */
.dropdown .btn-light {
    border-color: #d0d0d0;
}
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #7b7b7b;
}


/* Bootstrap Tooltip */
.tooltip-inner {
    max-width: 480px !important;
}

/** End -------------- End ---------------------- Bootstrap 4 (override, fix) --------------------- End -------------- End **/


/* box */
.box {
	width:100%; padding: 15px 20px; border: solid 1px rgba(204, 204, 204, 0.33); background:#ffffff;
}
.box-style1 {
	-webkit-box-shadow: 0 10px 6px -6px rgba(185, 185, 185, 0.88);
	-moz-box-shadow: 0 10px 6px -6px rgba(185, 185, 185, 0.88);
	box-shadow: 0 10px 6px -6pxrgba(185, 185, 185, 0.88);
}

/** Ripple effect v2 for all element : 2017-12-24 */
.ripples {
    position: absolute; top:0; left:0; bottom:0; right:0; overflow: hidden;
    -webkit-transform:translateZ(0); transform: translateZ(0); border-radius: inherit; pointer-events: none;
    animation: ripples-shadow 0.4s forwards; -webkit-animation: ripples-shadow 0.4s forwards;
}
.ripplesWave {
    backface-visibility:hidden; position: absolute; border-radius: 50%; opacity: 0.45;
    transform: scale(0.7); -webkit-transform: scale(0.7); background: rgba(255,255,255, 1);
    animation: ripples 2s forwards; -webkit-animation: ripples 2s forwards;
}
@keyframes ripples-shadow {
    0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
    20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
    100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripples-shadow {
    0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
    20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
    100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripples { to {transform: scale(24); opacity:0;}}
@-webkit-keyframes ripples { to {-webkit-transform: scale(24); opacity:0;}}