* {
  font-family: 'Chakra Petch', sans-serif;
/*  font-family: 'Sarabun', ;*/
/*  font-family: 'Sarabun', 'Chakra Petch', 'Kanit', sans-serif;*/
}

.f-sarabun { font-family: 'Sarabun', sans-serif !important; }
.f-prompt { font-family: 'Prompt', sans-serif !important; }

.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }

.fs-30 { font-size: 30px; }
.fs-32 { font-size: 32px; }
.fs-36 { font-size: 36px; }

.fs-48 { font-size: 48px; }
.fs-54 { font-size: 54px; }
.fs-60 { font-size: 60px; }


.select2-results__option[aria-selected=true] {
    background-color: #DDD !important;
    color: #000;
}

/* Based */
.card-body .bg-white {
  overflow: auto;
}

@media only screen and (max-width: 1440px) {
  .box_nationwide {
    flex-direction: column !important;
  }

  .box_nationwide .media-body {
    width: 100%;
    text-align: center !important;
  }
}

.overlay {
  opacity: 0.3;
}

.modal-backdrop {
    display: none !important;    
}

.chartsGroups { white-space: nowrap; overflow-x: auto; display:block; }
.chartsGroups div.col-md-4 { display:inline-block; float:none; }

.box-shadow-22 {
  border-radius: 5px;
  background: rgba( 255, 255, 255, 0.1 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 3px );
  -webkit-backdrop-filter: blur( 3px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.multiselect-search{
  padding-left: 40px !important;
}


.ck-editor__editable_inline:not(.ck-comment__input *) {
    height: 300px;
    overflow-y: auto;
}

.bg-grad-pink { background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97  51%, #DD5E89  100%); }
.bg-grad-blue { background-image: linear-gradient(to right, #000046 0%, #1CB5E0  51%, #000046  100%); }
.bg-grad-red  { background-image: linear-gradient(to right, #e52d27 0%, #b31217  51%, #e52d27  100%); }
/*.bg-grad-red  { background: rgb(25,10,5); background: linear-gradient(135deg, rgba(25,10,5,1) 0%, rgba(106,0,0,1) 50%, rgba(135,0,0,1) 100%); }*/

.btn-grad-pink {
  background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97  51%, #DD5E89  100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}
.btn-grad-pink:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.btn-grad-blue {
  background-image: linear-gradient(to right, #000046 0%, #1CB5E0  51%, #000046  100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}
.btn-grad-blue:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.btn-grad-red {
  background-image: linear-gradient(to right, #870000 0%, #190A05  51%, #870000  100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}
.btn-grad-red:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}