html,body{
    background-color: #d2d6de;
    font-family: 'Bai Jamjuree', sans-serif;
}

.content-title{
  font-size: 2em; 
  margin: .67em 0
}

.login-box-body{
    background-color: #fff
}

.login-logo{
  font-size: 30px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0bcb46;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0bcb46;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.scrollbar {
  overflow-x: scroll;
}

.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5; }

.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #00c0ef; }

hr{
  border-top : 1px solid #e4e4e4;
}

.fileContainer {
  overflow: hidden;
  position: relative;
}

.fileContainer [type=file] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

/* style 4 */

.inputfile-4 + label {
  color: #d3394c;
}

.inputfile-4:focus + label,
.inputfile-4.has-focus + label,
.inputfile-4 + label:hover {
  color: #722040;
}

.inputfile-4 + label figure {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d3394c;
  display: block;
  padding: 20px;
  margin: 0 auto 10px;
}

.inputfile-4:focus + label figure,
.inputfile-4.has-focus + label figure,
.inputfile-4 + label:hover figure {
  background-color: #722040;
}

.inputfile-4 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6;
}

.box-container {
  padding: 1%;
  border: 1px solid #d2d6de;
  border-radius: 5px;
  margin: 10px 0px 10px 0px;
}


.dt-buttons {
  display: none;
}

.width-50{
  padding-left: 0;
}

td.break {
  float: left;
  line-height: 22px;
}

.font-size-30 {
  font-size: 30px;
}

pre{
  background-color: #f6f2f200;
  border: none;
  padding: 0px;
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 14px;
}

.hide{
  display: none;
}

.label-error{
  background-color: #dd4b39;
}

.row-alert{
  background-color: #eccccc !important;
  color: #f90000 !important;
}

.red {color:#FF0000;}

div.dataTables_wrapper div.dataTables_processing {
  top: 5%;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 5px solid #c1d2e7;
  border-top-color:#417fcb;
  animation: spinner .6s linear infinite;
}

.panel {
  border: 0;
  background-color: #fff0;
}

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

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.box-search {
  padding-bottom:20px;
  padding-top:20px;
}

.row-number {
  width: 5px !important;
}

.box-remark {
  color: #a09c9c;
}

.btn-blue {
  color: #fff;
  background-color: rgb(167, 179, 236);
}

.btn-blue:hover {
  color: #fff;
  background-color: rgb(151 165 230);
}

.btn-approve {
  color: #fff;
  background-color: #ea8fd3;
  border-color: #dbb0d8;
}

.btn-approve:hover {
  color: #fff;
  background-color: #ea76cd;
  border-color: #dbb0d8;
}

.btn-recall {
  color: #fff;
  background-color: rgb(225 104 236);
  border-color: rgb(225 104 236);
}

.btn-recall:hover {
  color: #fff;
  background-color: rgb(214 6 234);
  border-color: rgb(214 6 234);
}