@font-face {
  font-family: Sarabun;
  src: url('../fonts/Sarabun.woff2');
}

@font-face {
  font-family: SarabunLatin;
  src: url('../fonts/SarabunLatin.woff2');
}

@font-face {
  font-family: PoppinLatin;
  src: url('../fonts/PoppinLatin.woff2');
}

html, body{
	font-family: 'Sarabun', 'SarabunLatin', cursive;
}
.font-popiplatin{
    font-family: 'PoppinLatin', cursive;
}


.bg-1{background-color: #d5d5d5;}
.bg-2{background-color: #f5f5f5;}
.highcharts-title {  font-family: Sarabun, SarabunLatin !important; font-size:15px !important;  }


.datepicker table tr td.day {
    color:#5F5D5E;
}
.datepicker tbody tr > td.day.old {
    color: #D1D1D1;
}
.datepicker tbody tr > td.day.new {
    color: #D1D1D1;
}
.datepicker tbody tr > td.disabled {
    color: #D1D1D1;
} 
.datepicker tbody tr > td.disabled {
    color: #A5A5A5;
}
.fc-event{
    cursor: pointer;
}

.tbl-info-hide{
  display: none;
}
.tbl-info-show{
 display: table-row;
}
.cursor-pointer{
 cursor: pointer;
}

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

@media (max-width: 450px){
    .fancybox-slide--iframe .fancybox-content {
        width  : 100% !important;
        height  : 90% !important;
    }
    .fancybox-slide { padding: 0px !important; }
    .form-group label.text-right{
        text-align: left !important;
    }
    
}

@media (max-width: 430px){
    .banner{
        height: 60vh !important;
    }
    .text-label{
        text-align: left !important;
    }
}

.banner{
    background-image: url('../imgs/banner.png');
    background-size: cover;
    height: 60vh; 
    position: relative;
    margin-bottom: -55vh;
    z-index: -1;
}

.bg-login{
    background-image: url('../imgs/bg-login.png');
    background-size: cover;
}

.border-bottom-1{
    border: 1px solid rgba(255, 255, 255, 0.12);
}


.cursor-pointer{
 cursor: pointer;
}
.tbl-info-hide{
  display: none;
}
.tbl-info-show{
 display: table-row;
}
.font-color-1{
    color: #17549e !important;
}
.font-color-2{
    color: #0d3bb3 !important;
}

.display_none{
    display: none !important;
}
.display_show{
    display: block;
}

.bg-header-1{
    background: #0d3bb3;
}

.bg-color-1{
    background: #7839c5;
}

.breadcrumb {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0;
    margin: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}
.loading_cs {
    background-color: rgba(0,0,0,0.3);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
      z-index: 1000;
      display: none;
}
.loading_cs img {
  position: fixed;
  width: 150px !important;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.form-cs-1{
    width: 75%;
}
@media (max-width: 950px){
    .form-cs-1{
        width: 100%!important;
    }
}

.fancybox-button {
    background-color: #f5363f;
    border-radius: 50%;
    margin-top:50px;
    margin-right:35px;
    color:#fff;
}
.cursor-pointer-default{
    cursor: default !important;
}

.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link i {
    color: #1ea45e;
}

/* file upload button */
.file_upload::file-selector-button {
  border-radius: 4px;
  padding: 0 10px;
  height: 33px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
.file_upload::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
.file_upload::file-selector-button:active {
  background-color: #e5e7eb;
}

.preview-img img{
    width:150px;
    height:150px;
    object-fit:cover;
    margin:5px;
    border-radius:8px;
}

.btn-xs {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.8rem !important;
    min-width: 70px !important;
    line-height: 1.35 !important;
}

.btn-cs-success {
    background-color: #54db93;
    border-color: #54db93;
    color: #ffffff;
    font-weight: 500;
    padding: 10px 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(84, 219, 147, 0.35);
}

.btn-cs-success i {
    color:#fff;
}

.btn-cs-success:hover {
    background-color: #3dbd76;
    border-color: #3dbd76;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(84, 219, 147, 0.45);
}

.btn-cs-success:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(84, 219, 147, 0.35);
}

input.form-control {
    line-height: 3 !important;
}

.box-main{
    background:#fff;
}
.title-link{
    font-size:14px;
    color:#555;
    font-weight:bold;
}
.title-link span{
    color:#159486;
}
.detail-card{
    border:1px solid #b7ddd8;
    border-radius:12px;
    background:#fbffff;
    padding:10px;

}
.status-title{
    color:#08796e;
    font-weight:bold;
    font-size:14px;
}
.status-icon{
    background:#168c82;
    color:white;
    width:18px;
    height:18px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:12px;
}
.label-bx{
    font-size:12px;
    color:#999;
}
.value{
    font-size:13px;
    color:#555;
    font-weight:500;

}
.line{
    border-top:1px solid #e5eeee;
    margin:12px 0;
}

.desc{
    font-size:13px;
    color:#555;
}

.mission-card{
    background:#fff;
    border:1px solid #e5e8eb;
    border-radius:22px;
    padding:20px 23px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    cursor:pointer;
    transition:.2s;

}
.icon-box{
    width:60px;
    height:60px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    margin-right:20px;
}
.bg-gray{
    background:#555;
}


.bg-orange{
    background:#e88912;
}


.bg-green{
    background:#8ccdc4;
}


.bg-yellow{
    background:#fbbd17;
}


.bg-blue{
    background:#367be8;
}
.mission-content{
    flex:1;
}
.mission-no{
    font-size:14px;
    color:#999;
}
.mission-title{
    font-size:18px;
    font-weight:bold;
    color:#222;
    font-style: italic;

}
.mission-title span{
    background:#e8f7f4;
    color:#138879;
    font-size:14px;
    padding:3px 10px;
    border-radius:20px;
    margin-left:10px;
}
.mission-desc{
    color:#999;
    font-size:14px;
    margin-top:5px;
}


input::placeholder {
    font-size: 14px;
}
textarea::placeholder {
    font-size: 14px;
}