@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@400;700&family=Moul&family=Poppins:wght@400;700&display=swap');

@font-face{
    src: url('../fonts/KhmerOSmuollight.ttf');
    font-family: "KhmerOSmuollight";
}

@font-face{
    src: url('../fonts/KrasarRegular.ttf');
    font-family: "KrasarRegular";
}

@font-face{
    src: url('../fonts/robotos/Roboto-Regular.ttf');
    font-family: "Robotos";
}

:root{

    --main-color:hsl(136, 65%, 51%);
    --color-darkGreen: rgba(35, 134, 69, 1);
    --color-pink: #f82249;
    --color-blue: hsl(233, 26%, 24%);
    --color-green: hsl(136, 65%, 51%);
    --color-brightCyan: hsl(192, 70%, 51%);
    --color-grayishBlue: hsl(233, 8%, 62%);
    --color-lightGray: hsl(220, 16%, 96%);
    --color-veryLightGray: hsl(0, 0%, 98%);
    --color-white: hsl(0, 0%, 100%);
    --color-telegram: #0088cc ;
    --color-telegram2: #5B9BD5 ;
    --color-facebook: #3b5998 ;
    --color-normal: #000000 ;

    /* Font Sizes  */
    --font-xxxm: 0.5rem;    /* 0.5rem*16 = 8px */
    --font-xxm: 0.625rem;    /* 0.625rem*16 = 10px */
    --font-xm: 0.75rem;     /* 0.75rem*16 = 12px */
    --font-sm_1: 1rem;    /* 14px */
    --font-sm: 0.875rem;    /* 14px */
    --font-md: 0.9375rem;    /* 15px */
    --font-med: 1.125rem;   /* 18px */
    --font-lg: 1.25rem;     /* 20px */
    --font-xlg: 2.25rem;    /* 36px */

    /* font name */
    --kh-Krasar: 'KrasarRegular';
    --kh-moul: 'KhmerOSmuollight';
    --en-poppins: 'Poppins';
    --en-robotos: 'Robotos';
}
body{
    font-family: var(--kh-Krasar), var(--en-robotos);
  }
.kh{font-family: var(--kh-Krasar)!important;} */
.kh-moul{font-family: var(--kh-moul) !important;}
.en{font-family: var(--en-robotos) !important;}

.cl-telegram{color: var(--color-telegram) !important;}
.cl-blue{color: var(--color-blue) !important;}
.cl-normal{color: var(--color-normal) !important;}

.fs-normal{font-size: var(--font-sm) !important;}

.kh-normal{
    font-family: var(--kh-Krasar) !important;
    color: var(--color-normal) !important;
    font-size: var(--font-sm) !important;
}
.kh-small{
    font-family: var(--kh-Krasar) !important;
    color: var(--color-telegram2) !important;
    font-size: var(--font-xm) !important;
}

.kh-med{
    font-family: var(--kh-Krasar) !important;
    color: var(--color-normal) !important;
    font-size: var(--font-med) !important;
}

.en-normal{
    font-family: var(--en-robotos) !important;
    color: var(--color-normal) !important;
    font-size: var(--font-sm) !important;
}
.en-normal_1{
    font-family: var(--en-robotos) !important;
    color: var(--color-normal) !important;
    font-size: var(--font-sm) !important;
}
.en-modal-normal{
    font-family: var(--en-robotos) !important;
    color: var(--color-facebook) !important;
    font-size: var(--font-sm) !important;
    /* font-weight: bold !important; */
}
.en-light{
    font-family: var(--en-robotos) !important;
    color: var(--color-lightGray) !important;
    font-size: var(--font-sm) !important;
}
.en-danger{
    font-family: var(--en-robotos) !important;
    color: var(--color-pink) !important;
    font-size: var(--font-sm) !important;
    /* font-weight: bold !important; */
}
.kh-danger{
    font-family: var(--kh-Krasar) !important;
    color: var(--color-pink) !important;
    font-size: var(--font-md) !important;
    /* font-weight: bold !important; */
}
.en-med{
    font-family: var(--en-robotos) !important;
    color: var(--color-telegram2) !important;
    font-size: var(--font-sm) !important;
}
.en-lg{
    font-family: var(--en-robotos) !important;
    color: var(--color-telegram2) !important;
    font-size: var(--font-lg) !important;
}
.en-small{
    font-family: var(--en-robotos) !important;
    color: var(--color-normal) !important;
    font-size: var(--font-xm) !important;
}
.en-menu-med{
    font-family: var(--en-robotos) !important;
    color: var(--color-white) !important;
    font-size: var(--font-med) !important;
}

label {
    font-weight: normal !important;
}

.form-group.has-error .select2 .select2-selection {border-color: var(--color-pink) !important;}

.red { color: var(--color-pink) !important; }

.required { color: var(--color-pink) !important; font-size: var(--font-xm) !important;}

i.success{color: var(--color-green) ; font-size:16px;}

i.danger{color: var(--color-pink); font-size:16px;}

span.section-num {
    font-weight: bold;
    color: var(--color-facebook);
}

h1 {
    font-family: var(--en-poppins);
    font-size: var(--font-lg);
    line-height: var(--font-xlg);
    color: var(--color-facebook);
    margin-left: -13px;
    margin-right: -13px;
}

.h1 {
    /* font-family: var(--en-robotos); */
    /* -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none; */
    border-bottom: 1px solid var(--color-telegram2);
    margin-left: -13px;
    margin-right: -13px;
}

.modal-title{
    /* border-bottom: 1px solid #0a7698; font-size: 15px; */
    color: var(--color-telegram) !important;
    font-family: var(--en-poppins);
    font-size: var(--font-med);
}

.row-box {
    margin-bottom: 5px;
}

.border-info {border-color: var(--color-telegram) !important;}

/* select2 */
.select2-selection__rendered{
      font-family: var(--kh-Krasar);
}
.select2-container .select2-selection--single {
      font-size: var(--font-md);
      height: 38px !important;
      padding:6px;
      /* width: 100% !important; */
      position: relative;
}
  .form-group.has-error .select2 .select2-selection {text-align: left; border-color:var(--color-pink)!important;}

  /* select2 arrow icon */
  .select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

.select2-container--open .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
} */

/* end select2 */




label i{
    font-size: 20px;
    /* border: 1px solid black;
    padding: 25px; */
    cursor: pointer;
  }

  input[type="file"]{
    display: none;
    visibility: none;
  }

  .c-pointer{cursor: pointer;}


  .gallery{margin: 10px 50px;}

  .gallery img{
      width:100%;
      height: 230px;
      padding: 5px;
      border-radius: 10px;
      filter: grayscale(10%);
      transition: 1s;
  }

  .gallery img:hover{
      filter: grayscale(0);
      transform: scale(1.1);
  }

  /* select2 is-invalid */
  .was-validated select.select2:invalid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-invalid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #fa5c7c;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:invalid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-invalid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-valid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #0acf97;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* .was-validated select.select2:valid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-valid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
} */
/* end select2 is-invalid */


/* datatable */
#examcenter_table tbody tr,
#examcenter_table input[type=checkbox]
{
  cursor: pointer;
}

/* ui */
.ui-selectmenu-menu .ui-menu {max-height: 200px;}
.ui-widget.ui-widget-content {z-index: 99999 !important;}
.ui-selectmenu-button.ui-button {
    width: 100% !important;
    border: 1px solid rgba(7, 34, 74, 0.59) !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #fff !important;

}
.ui-autocomplete.ui-widget {
    font-family: var(--kh-Krasar) !important;
  }

.sidebar{ padding-left: 3px !important;padding-right: 3px !important; }

.content-wrapper{
    padding-top: 55px;
}


.readonly-outline{
    border: none;
    background-color: var(--color-lightGray);
    outline: none;
}


.tab-content > .tab-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}