@font-face {
  font-family: 'Zain-Regular';
  src: url(/assets/fonts/Zain-Regular.ttf);
}

@font-face {
  font-family: 'NotoSans-Regular';
  src: url(/assets/fonts/NotoSans-Regular.ttf);
}

*{
  font-family: 'NotoSans-Regular';
  font-size:12px;
}

h6{
  font-family: 'Zain-Regular';
  font-size:24px;
}

h5{
  font-family: 'Zain-Regular';
  font-size:28px;
}

h4{
  font-family: 'Zain-Regular';
  font-size:32px;
}

h3{
  font-family: 'Zain-Regular';
  font-size:36px;
}

h2{
  font-family: 'Zain-Regular';
  font-size:40px;
}

h1{
  font-family: 'Zain-Regular';
  font-size:44px;
}

.nav-item{
  display: flex;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border-radius: 50%;
  margin:auto;
  cursor:pointer;
}

.nav-item:hover{
  background-color: #f5f5f6;
}

.container-custom{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-custom .worksheet{
  position:relative;
  height:100%;
  background-color:#f8f7fa;
}

.container-result-load{
/*   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 9999;
  display: none; */
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.container-custom .worksheet .left_side{
  position:fixed;
  height:100%;
  background-color:#fff;
  width:50px;
  top:0;
  box-shadow: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  z-index: 11;
}

.container-custom .worksheet .right_side{
  position: relative;
  width: calc(100% - 50px);
  background-color: transparent;
  height: 100%;
  overflow: auto;
  margin-left: 50px;
}

.header_middle{
  position:sticky;
  top:-1;
  padding:15px 20px;
  padding-bottom: 0px;
  backdrop-filter: saturate(0%) blur(10px);
  z-index:10;
}

.header_middle h3{
  font-size:20px;
  color:#555;
  margin:0;
  padding-left: 40px;
  display: inline-block;
}

.header_top h3{
  font-size:20px;
  color:#555;
  margin:0;
}

.header_top{
  padding:5px 20px;
  background-color:transparent;
}

.header_middle span{
  font-size:11px;
  display:block;
  color:#999;
  display: inline-block;
}

.group_content{
  padding:20px;
  background-color:#f6f6f4;
}

div .select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: fit-content !important;
  padding-right: 10px;
  background: #fff;
  border-radius: 3px;
  border:1px solid #e1e1e1;
}

table .select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: fit-content !important;
  padding-right: 10px;
  background: #fff;
  border-radius: 3px;
  border:1px solid transparent;
}

table .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.select2-container .select2-selection--single{
  height:26px !important;
}

.select2-disabled + .select2-container {
  background: #e3e3e3 !important;
}

.select2-search + .select2-container {
  background: transparent !important;
}

table .select2 + .select2-container {
  background: transparent !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff !important;
  border: 1px solid #fff !important;
}

.select2-disabled + .select2-container .selection .select2-selection--single {
  background-color: #e3e3e3 !important;
  border: 1px solid #e3e3e3 !important;
}

table .select2 + .select2-container .selection .select2-selection--single {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

.select2-search + .select2-container .selection .select2-selection--single {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

table.list tbody tr td .select2-container{
  width:100% !important;
}

table.list thead tr td .select2-container{
  width:100% !important;
  background-color:transparent;
}

table.list thead tr td .select2-container--default .select2-selection--single{
  background:transparent;
  border:0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: white;
    font-size: 10px !important;
}

.select2-results__option[aria-selected] {
    cursor: pointer;
    font-size: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e1e1e1;
    outline: none;
    border-radius: 5px;
}

.select2-dropdown {
    background-color: white;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-container--default .select2-selection--single{
  outline:none;
}

.tab-employee{
  padding-bottom:1px;
  border-bottom:1px solid #e3e3e3;
  margin-top:10px;
}

.tab-employee ul{
  list-style:none;
  padding:0;
  margin:0;
  width:fit-content;
}

.tab-employee ul li{
  display: inline-block;
  padding:3px 10px;
  cursor:pointer;
}

.tab-employee ul li.active{
  border-bottom:2px solid #000;
}

.tab-employee ul li div svg{
  width:10px;
}

.tab-employee ul li div span{
  font-size:10px;
}

label, input{
  font-size:12px;
  color:#555;
  font-family: 'Zain-Regular';
}

.grid{
  margin: 0 auto;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  float: left;
  width: 10%;
  position:relative;
}

.box{
  border-radius:7px;
  background:#fff;
  box-shadow:0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  width:100%;
}

.grid-item--width2 { width: 20%; }
.grid-item--width3 { width: 30%; }
.grid-item--width4 { width: 40%; }
.grid-item--width5 { width: 50%; }
.grid-item--width6 { width: 60%; }
.grid-item--width7 { width: 70%; }
.grid-item--width8 { width: 80%; }
.grid-item--width9 { width: 90%; }

input[data-autocompleted] {
    background-color: transparent !important;
    font-size: 14px !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 0s, color 0s 0s;
    transition-delay: calc(infinity * 1s);
    font-size: 14px !important;
}

.subMenu{
  display:none;
}

.menuText, .menuTextNonSub{
  display:none;vertical-align: top;margin-top: 7px;;
}

.left_side{
  width:50px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 10px;
    color: #555;
    margin-top: -1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  font-size:10px;color:#555;
}

.select2-container--default .select2-selection--single {
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  color: #555 !important;
  font-size:10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  background: #fff;
  height: 20px;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  border-radius: 4px;
  margin: auto;
}

table.list{
  width:100%;
}

table.list thead tr td{
  font-weight:bold;
  padding:10px;
  text-align:center;
}

table.list thead tr td, table.list tbody tr td{
  font-size: 10px;
  padding:5px 10px;
  border-bottom:1px solid #ededed;
  border-right: 1px dashed #bcbcbc;
}

.list-subnav ul li{
  cursor:pointer;
}

.list-subnav ul li:hover, .menuText:hover{
  color:blue !important;
  cursor:pointer;
}

.select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below {
  width:max-content !important;
}

.spinner {
   margin:auto;
   --d: 15px;
   width: 3px;
   height: 3px;
   border-radius: 50%;
   color: #474bff;
   box-shadow:  calc(1*var(--d))      calc(0*var(--d))     0 0,
                calc(0.707*var(--d))  calc(0.707*var(--d)) 0 0.5px,
                calc(0*var(--d))      calc(1*var(--d))     0 1px,
                calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 1.5px,
                calc(-1*var(--d))     calc(0*var(--d))     0 2px,
                calc(-0.707*var(--d)) calc(-0.707*var(--d))0 2.5px,
                calc(0*var(--d))      calc(-1*var(--d))    0 3px;
   animation: spinner-a90wxe 1s infinite steps(8);
}

.container-notif{
  position:fixed;
  right:10px;
  bottom:10px;
  width:250px;
}

.container-notif .box-notif{
  box-shadow:0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  width:100%;
  background-color:#fff;
  margin:2.5px;
}

.container-notif .success{
  border-left:4px solid #7da980;
}

.container-notif .failed{
  border-left:4px solid red;
}

.box-notif .content-notif{
  padding:15px;
  position:relative;
}

.box-notif .content-notif .title-notif{
  font-size:16px;
  margin:0;
}

.success .title-notif{
  color:#184c1f;
}

.failed .title-notif{
  color:#bf6060;
}

.box-notif .content-notif .paragraph-notif{
  margin: 0;
  margin-left: 24px;
  font-size:10px;
  color:#555;
}

.preview{
  width: 100% !important;
  overflow: auto !important;
  height: 400px !important;
  margin-top: 5px;
}

@keyframes spinner-a90wxe {
   100% {
      transform: rotate(1turn);
   }
}

@media only screen and (max-width: 767px) {

}