@import "../fonts/thsarabun/thsarabunnew.css";

body, p, div, span, button, a, td, label, h1, h2, h3, h4, h5, h6{
    font-family: 'Kanit', sans-serif !important;
}
.navbar-brand{
    float:right !important;
}

label{
    font-size:20px !important;
    color:#000 !important;
}              

span{
    font-weight:400 !important;
    color:#000;
}
select{
    cursor:pointer;                 
}
hr{
    margin-top:5px !important;
    margin-bottom:5px !important;
}

.header{
    padding:20px !important;
}
.control-label{
    font-size:16px !important;
    color:#000 !important;
    margin-top:-5px !important;
    font-weight:bold  !important;
}
::placeholder {
    color:red;
}
.error{
    color:#FF0000 !important;
}
.text-red{
    color:#F00 !important;
} 
.form-control{
    border:1px solid #aaa !important;
}
.font-header{
    color:#007fff;
}

.height5{height:5 !important;}
.height10{height:10 !important;}
.height15{height:15 !important;}
.height20{height:20 !important;}
.height25{height:25 !important;}
.height30{height:30 !important;}
.height35{height:35 !important;}
.height40{height:40 !important;}
.height45{height:45 !important;}
.height50{height:50 !important;}
.height55{height:55 !important;}
.height60{height:60 !important;}
.height65{height:65 !important;}
.height70{height:70 !important;}
.height75{height:75 !important;}
.height80{height:80 !important;}

.text-right{text-align:right !important;}
.text-left{text-align:left  !important;}
.text-center{text-align:center  !important;}

.font10{font-size:10px !important;}
.font12{font-size:12px !important;}
.font14{font-size:14px !important;}
.font16{font-size:16px !important;}
.font18{font-size:18px !important;}
.font20{font-size:20px !important;}
.font22{font-size:22px !important;}
.font24{font-size:24px !important;}
.font26{font-size:26px !important;}
.font28{font-size:28px !important;}
.font30{font-size:30px !important;}

.font-bold{font-weight:bold !important;}
.font-italic{font-style:italic !important;}

.text-green{color:green !important}
.text-grey{color:#888 !important}
.text-red{color:red !important}
.text-orange{color:orange !important}
.text-darkorange{color:#ff6633 !important}
.text-violet{color:blueviolet !important}
.text-blue{color:blue !important}
.text-sky{color:#007fff !important}
.text-black{color:black !important}
.text-pink{color:pink !important}
.text-white{color:white !important}
.text-black{color:black !important}

.bg-green{background-color:green !important}
.bg-grey{background-color:#888 !important}
.bg-greywhite{background-color:#DDD !important}
.bg-red{background-color:red !important}
.bg-orange{background-color:#ff6600 !important}
.bg-violet{background-color:blueviolet !important}
.bg-blue{background-color:blue !important}
.bg-sky{background-color:#007fff !important}
.bg-black{background-color:black !important}
.bg-pink{background-color:pink !important}
.bg-yellow{background-color:#d0d032 !important}
.text-yellow{color:#C4B611 !important}
.bg-darkyellow{background-color:#C4B611 !important}
.underline{text-decoration:underline !important}

.margin-auto{margin:auto !important}
.margin-top-0{margin-top:0px !important}
.margin-top-5{margin-top:5px !important}
.margin-top-10{margin-top:10px !important}
.margin-top-15{margin-top:15px !important}
.margin-top-20{margin-top:20px !important}
.margin-top-25{margin-top:25px !important}
.margin-top-30{margin-top:30px !important}    

.margin-left-0{margin-left:0px !important}
.margin-left-5{margin-left:5px !important}
.margin-left-10{margin-left:10px !important}
.margin-left-15{margin-left:15px !important}
.margin-left-20{margin-left:20px !important}
.margin-left-25{margin-left:25px !important}
.margin-left-30{margin-left:30px !important}    

.margin-bottom-0{margin-bottom:0px !important}
.margin-bottom-5{margin-bottom:5px !important}
.margin-bottom-10{margin-bottom:10px !important}
.margin-bottom-15{margin-bottom:15px !important}
.margin-bottom-20{margin-bottom:20px !important}
.margin-bottom-25{margin-bottom:25px !important}
.margin-bottom-30{margin-bottom:30px !important} 

.margin-right-0{margin-right:0px !important}
.margin-right-5{margin-right:5px !important}
.margin-right-10{margin-right:10px !important}
.margin-right-15{margin-right:15px !important}
.margin-right-20{margin-right:20px !important}
.margin-right-25{margin-right:25px !important}
.margin-right-30{margin-right:30px !important}    

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

.padding10{padding:10px !important;}
.padding5{padding:5px !important;}
.padding0{padding:0px !important;}

.padding-top-5{padding-top:5px !important}
.padding-top-10{padding-top:10px !important}
.padding-top-15{padding-top:15px !important}
.padding-top-20{padding-top:20px !important}
.padding-top-25{padding-top:25px !important}
.padding-top-30{padding-top:30px !important}    

.padding-left-5{padding-left:5px !important}
.padding-left-10{padding-left:10px !important}
.padding-left-15{padding-left:15px !important}
.padding-left-20{padding-left:20px !important}
.padding-left-25{padding-left:25px !important}
.padding-left-30{padding-left:30px !important}    

.padding-bottom-5{padding-bottom:5px !important}
.padding-bottom-10{padding-bottom:10px !important}
.padding-bottom-15{padding-bottom:15px !important}
.padding-bottom-20{padding-bottom:20px !important}
.padding-bottom-25{padding-bottom:25px !important}
.padding-bottom-30{padding-bottom:30px !important} 

.padding-right-5{padding-right:5px !important}
.padding-right-10{padding-right:10px !important}
.padding-right-15{padding-right:15px !important}
.padding-right-20{padding-right:20px !important}
.padding-right-25{padding-right:25px !important}
.padding-right-30{padding-right:30px !important}    

.min-width-250{min-width:250px !important;}

.float-right{float:right !important;}
.float-left{float:left !important;}
.float-center{margin:auto !important;}
.center{margin:auto !important;}


.pointer{cursor:pointer !important;}

.width100{width:100px !important}
.width150{width:150px !important}
.width200{width:200px !important}
.width250{width:250px !important}
.width300{width:300px !important}
.width350{width:350px !important}

.width100percent{width:100% !important}

.border{border:1px solid #000 !important;}
.border0{boder:0px !important;}
.border2{boder:2px solid !important;}

.border-radius0{border-radius:0px !important;}
.border-radius5{border-radius:5px !important;}
.border-radius10{border-radius:10px !important;}
.border-radius15{border-radius:15px !important;}
.border-radius20{border-radius:20px !important;}

.history{
    color:#FFF !important;
    background-color:#007fff !important;
    vertical-align:middle;
}

.history-violet{background-color:#cc00cc !important; color:white !important;}

.approve{
    color:#FFF !important;
    font-size:14px !important;
    background-color:orange !important;     
    vertical-align:middle;
}
.approve-outbefore{
    color:#FFF !important;
    font-size:14px !important;
    background-color:#ff00ff !important;     
    vertical-align:middle;
}
.td-middle{
    vertical-align:middle;
}
.text-center{
    text-align:center;
}
.trhover{
    background-color: #ffff99 !important;
    cursor:pointer !important;
}
.font-header{
    color:#007fff;
}
.btn{
    /*margin-bottom:5px;*/
}



.title{
    font-size:20px !important;
    font-weight:bold !important;
    padding:10px !important;
}

.navbar-header{
    height:auto !important;
}

.hidden{
    visibility:hidden; 
    width:0px !important; 
    height:0px !important; 
    float:left;
    position:fixed;
    left:-99999px !important;
}

/*----------- select2 -------------*/
select[readonly].select2 + .select2-container {
   pointer-events: none;
   touch-action: none;

   .select2-selection {
     color:#888 !important;
     background: #eee;
     box-shadow: none;
   }

   .select2-selection__arrow,
   .select2-selection__clear {
     display: none;
   }
 }
 
.select2{
   width:100% !important;
   height:40px !important;
}
.select2-selection{
   height:40px !important;
}
.select2-selection__rendered{
   line-height: 35px !important;
}

select[readonly].select2-hidden-accessible + .select2-container {
 pointer-events: none;
 touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
 color:#888 !important;
 background: #eee;
 box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow,
select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
 display: none;
}
 
input:disabled {
 background: #eee !important;
 box-shadow: none !important;
}


select:disabled {
 color:#888 !important;
 background: #eee !important;
 box-shadow: none !important;
}


/* ------------------ datatable & table --------------------- */
th{
    font-size:14px !important;
    text-align:center;
    padding:5px 5px 5px 5px !important;
}

td{
    padding:2px 3px !important;
}

 /*highlight row*/
table.highlight tbody tr:nth-child(even):hover td{
    background-color: yellow !important;
    cursor:pointer !important;
}

table.highlight tbody tr:nth-child(odd):hover td {
    background-color: yellow !important;
    cursor:pointer !important;
}       

 /*highlight no cursor*/
table.highlightonly tbody tr:nth-child(even):hover td{
    background-color: yellow !important;
}

table.highlightonly tbody tr:nth-child(odd):hover td {
    background-color: yellow !important;
}        

select [name='tbMain_length']{
   font-size:14px !important;
}

.dataTables_length, #tbMain_filter, .dataTables_info, #tbMain_paginate{
    font-size:14px;
}

.dataTables_length label{
    margin-top:8px;
    margin-left:15px;
     font-size:14px !important;
}         

.dataTables_filter input{       
    font-size:14px !important;
    border:1px solid;              
}            

.dataTables_filter label{
     font-size:14px !important;
}

#tbMain_paginate{
    margin-bottom:5px !important;
}

.dt-button{
    padding:5px 10px !important;
    font-weight: bold !important;
}

#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
}

/*select2 over*/
 span.select2-container {
    z-index:999999 !important;
}

.hidden{
    position:fixed;
    left:-9999999px;
    height: 0px;
}

@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
 }            
label.error {
    font-size:18px !important;
    text-decoration:underline;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}
/*body{ font-family: 'THSarabunNew', sans-serif; }
p, .title, .font-header, a{ font-family: 'THSarabunNew', sans-serif;}
table, td, tr, th{ font-family: 'THSarabunNew', sans-serif;}*/


/* The checkcontainer */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

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

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}