@font-face {
  font-family: 'ALBA____';
  src: url('../fonts/win/ALBA____.TTF') format('truetype');
}
@font-face {
  font-family: 'ALBAM___';
  src: url('../fonts/win/ALBAM___.TTF') format('truetype');
}
@font-face {
  font-family: 'ALBAS___';
  src: url('../fonts/win/ALBAS___.TTF') format('truetype');
}
@font-face {
  font-family: 'ariblk';
  src: url('../fonts/win/ariblk.TTF') format('truetype');
}
@font-face {
  font-family: 'coiny-regular';
  src: url('../fonts/win/coiny-regular.TTF') format('truetype');
}
@font-face {
  font-family: 'Geometry_Soft_Pro-Bold_N';
  src: url('../fonts/win/Geometry_Soft_Pro-Bold_N.otf') format('opentype');
} 
@font-face {
  font-family: 'GLAMOURGIRL';
  src: url('../fonts/win/GLAMOURGIRL.TTF') format('truetype');
}
@font-face {
  font-family: 'SofadiOne-Regular';
  src: url('../fonts/win/SofadiOne-Regular.TTF') format('truetype');
}
@font-face {
  font-family: 'techniqo';
  src: url('../fonts/win/techniqo.TTF') format('truetype');
}
@font-face {
  font-family: 'techniqu';
  src: url('../fonts/win/techniqu.TTF') format('truetype');
}
@font-face {
  font-family: 'youre gone it';
  src: url('../fonts/win/youre gone it.TTF') format('truetype');
}
@font-face {
  font-family: 'youre gone';
  src: url('../fonts/win/youre gone.TTF') format('truetype');
}



[center] { text-align: center !important; }
[left]   { text-align: left !important; }
[right]  { text-align: right !important; }
[top]    { vertical-align: top !important; }
[middle] { vertical-align: middle !important; }
[bottom] { vertical-align: bottom !important; }

[cred]     { color: red !important; }
[cblue]    { color: blue !important; }
[cgreen]   { color: green !important; }
[cyellow]  { color: yellow !important; }
[caqua]    { color: aqua !important; }
[cblack]   { color: black !important; }
[cgrey]    { color: grey !important; }
[cwhite]   { color: white !important; }
[corange] { 
  color: rgb(234, 122, 12) !important;
  text-shadow: 1px 1px 1px #FFF;
}
[cdefault] { color: #3c8dbc !important; }

[cdarkred]     { color: darkred !important; }
[cdarkblue]    { color: darkblue !important; }
[cdarkgreen]   { color: darkgreen !important; }
[cdarkyellow]  { color: darkyellow !important; }
[cdarkaqua]    { color: darkaqua !important; }
[cdarkblack]   { color: darkblack !important; }
[cdarkgrey]    { color: darkgrey !important; }

[bred]     { color: red !important; }
[bblue]    { color: blue !important; }
[bgreen]   { color: green !important; }
[byellow]  { color: yellow !important; }
[baqua]    { color: aqua !important; }
[bblack]   { color: black !important; }
[bgrey]    { color: grey !important; }

[bdarkred]     { color: darkred !important; }
[bdarkblue]    { color: darkblue !important; }
[bdarkgreen]   { color: darkgreen !important; }
[bdarkyellow]  { color: darkyellow !important; }
[bdarkaqua]    { color: darkaqua !important; }
[bdarkblack]   { color: darkblack !important; }
[bdarkgrey]    { color: darkgrey !important; }

[fright] { float: right !important; }
[fleft]  { float: left !important; }
[hide] { display: none !important; }

[success] { color: darkgreen; }
[warning] { color: orange; }

[i] { font-style: italic !important; }
[s] { text-decoration: line-through !important; }
[u] { text-decoration: underline !important; }
[b] { font-weight: bold !important; }

[clear] {
	clear: both !important;
}

[no-border] {
  border:0px !important;
}

[font1] { font-size: 1px !important; }
[font2] { font-size: 2px !important; }
[font3] { font-size: 3px !important; }
[font4] { font-size: 4px !important; }
[font5] { font-size: 5px !important; }
[font6] { font-size: 6px !important; }
[font7] { font-size: 7px !important; }
[font8] { font-size: 8px !important; }
[font9] { font-size: 9px !important; }
[font10] { font-size: 10px !important; }
[font11] { font-size: 11px !important; }
[font12] { font-size: 12px !important; }
[font13] { font-size: 13px !important; }
[font14] { font-size: 14px !important; }
[font15] { font-size: 15px !important; }
[font16] { font-size: 16px !important; }
[font17] { font-size: 17px !important; }
[font18] { font-size: 18px !important; }
[font19] { font-size: 19px !important; }
[font20] { font-size: 20px !important; } 
[font21] { font-size: 21px !important; } 
[font22] { font-size: 22px !important; } 
[font23] { font-size: 23px !important; } 
[font24] { font-size: 24px !important; } 
[font25] { font-size: 25px !important; } 
[font26] { font-size: 26px !important; } 
[font27] { font-size: 27px !important; } 
[font28] { font-size: 28px !important; } 
[font29] { font-size: 29px !important; } 
[font30] { font-size: 30px !important; } 

[gfont1] { font-size: 1px !important; display: block; line-height: 1px; }
[gfont2] { font-size: 2px !important; display: block; line-height: 2px; }
[gfont3] { font-size: 3px !important; display: block; line-height: 3px; }
[gfont4] { font-size: 4px !important; display: block; line-height: 4px; }
[gfont5] { font-size: 5px !important; display: block; line-height: 5px; }
[gfont6] { font-size: 6px !important; display: block; line-height: 6px; }
[gfont7] { font-size: 7px !important; display: block; line-height: 7px; }
[gfont8] { font-size: 8px !important; display: block; line-height: 8px; }
[gfont9] { font-size: 9px !important; display: block; line-height: 9px; }
[gfont10] { font-size: 10px !important; display: block; line-height: 10px; }
[gfont11] { font-size: 11px !important; display: block; line-height: 11px; }
[gfont12] { font-size: 12px !important; display: block; line-height: 12px; }
[gfont13] { font-size: 13px !important; display: block; line-height: 13px; }
[gfont14] { font-size: 14px !important; display: block; line-height: 14px; }
[gfont15] { font-size: 15px !important; display: block; line-height: 15px; }
[gfont16] { font-size: 16px !important; display: block; line-height: 16px; }
[gfont17] { font-size: 17px !important; display: block; line-height: 17px; }
[gfont18] { font-size: 18px !important; display: block; line-height: 18px; }
[gfont19] { font-size: 19px !important; display: block; line-height: 19px; }
[gfont20] { font-size: 20px !important; display: block; line-height: 20px; } 
[gfont21] { font-size: 21px !important; display: block; line-height: 21px; } 
[gfont22] { font-size: 22px !important; display: block; line-height: 22px; } 
[gfont23] { font-size: 23px !important; display: block; line-height: 23px; } 
[gfont24] { font-size: 24px !important; display: block; line-height: 24px; } 
[gfont25] { font-size: 25px !important; display: block; line-height: 25px; } 
[gfont26] { font-size: 26px !important; display: block; line-height: 26px; } 
[gfont27] { font-size: 27px !important; display: block; line-height: 27px; } 
[gfont28] { font-size: 28px !important; display: block; line-height: 28px; } 
[gfont29] { font-size: 29px !important; display: block; line-height: 29px; } 
[gfont30] { font-size: 30px !important; display: block; line-height: 30px; } 
 
[loader_body] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999999999999999999999999999;
  background: rgba(0, 0, 0, 0.36);
}

[loader_body] > div {
  position: fixed;
  top: calc(50% - 64px);
  left: calc(50% - 40px);
}
[loader_body] > div:after {
  position: absolute;
  content: "Mohon Tunggu...";
  width: 200px;
  color: white;
  font-size: 16px;
  font-family: verdana;
  margin: -14px 0px 0px -25px;
  text-shadow: 0px 2px 1px #000;
}

[progress] .sr-only {
    position: relative !important;
    color: red !important;
}

[console] {
    color: #FFF !important;
    background: #000 !important;
    font-family: "courier new";
    line-height: 13px;
    font-size: 14px;
    padding: 10px !important;
    height: 275px;
    overflow-y: auto;
} 
[console] font { font-weight: bold; }
[console] [success] { font-weight: bold; color: #6bd06b; }
[console] [warning] { font-weight: bold; color: orange; }
[console] [danger], [console] [error] { font-weight: bold; color: red; }
[console] [ctools] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 10px 10px 0px 0px;
}
[console] [cbody] {
  border-spacing: 0px;
  border-collapse: separate; 
}
[console] [cbody] tr {
  
}
[console] [cbody] tr td {
  white-space:nowrap;
  padding: 0px 10px 1px 0px;
} 
[console] [ctools] i {
  cursor: pointer;
  position: relative !important;
  display: inline-flex;
  top: auto;
  right: auto;
  font-size: 23px;
}
[console] [ctools] [btn_start] {  
  color: rgba(255, 255, 255, 0.62) !important; 
}
[console] [ctools] [btn_start]:hover {
  color: #FFF !important;
}
[console] [ctools] [btn_start]:focus {
  
}
[console] [ctools] [btn_start]:active {
  color: rgba(255, 255, 255, 0.62) !important;
}
[console] [ctools] [btn_loading] { 
  color: rgba(255, 255, 255, 0.62) !important;
  cursor: default;
  display: none;
}
[console] [ctools] [btn_loading]:hover {}
[console] [ctools] [btn_loading]:focus {}
[console] [ctools] [btn_loading]:active {}
[console] [ctools] [btn_end] {  
  color: rgba(255, 255, 255, 0.62) !important; 
  display: none;
}
[console] [ctools] [btn_end]:hover {
  color: #FFF !important;
}
[console] [ctools] [btn_end]:focus {
  
}
[console] [ctools] [btn_end]:active {
  color: rgba(255, 255, 255, 0.62) !important;
}


/** LOGIN PAGE **/
.show-hide span.show:before {
  content: "\f06e";
  font: normal normal normal 14px/1 FontAwesome;
}

[page_login] [box_captcha] > div {
  border: 1px solid #d2d6de;
  border-radius: 0px !important;
}
[page_login] [box_captcha] .input-group-addon img {
  width: 90px;
  height: auto;
  padding-right: 20px;
  padding-top: 10px;
}
[page_login] [box_captcha] [img_cp] {
  border: 0px;
  background: transparent;
}
[page_login] [box_captcha] [img_cp]:after {
  position: absolute;
  content: "=";
  z-index: 9999;
  margin: 3px 0px 0px -7px;
  font-size: 24px;
  font-weight: bold;
  font-family: 'Arial Bold';
  color: #24695c;
}
[page_login] [box_captcha] input[inp_cp] {
  font-family: 'Arial Bold';
  color: #00d0a9 !important;
  font-size: 23px !important;
  font-weight: bold;
  text-align: left;
  border: none;
  padding: 3px 0px 3px 25px;
  /*background: transparent;*/
  outline: none;
}
[page_login] [box_captcha] input[inp_cp]:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
[page_login] [box_captcha] input[inp_cp]::-webkit-input-placeholder,
[page_login] [box_captcha] input[inp_cp]:-moz-placeholder,
[page_login] [box_captcha] input[inp_cp]::-moz-placeholder,
[page_login] [box_captcha] input[inp_cp]:-ms-input-placeholder,
[page_login] [box_captcha] input[inp_cp]::-ms-input-placeholder,
[page_login] [box_captcha] input[inp_cp]::placeholder {
  color: #448a55 !important;
} 

[page_login] .needs-validation [box_captcha] .invalid-tooltip {
  top: -22px;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px !important;
}
/** END LOGIN PAGE **/


.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu { 
  height: calc(100vh - 310px); 
}

.bookmark ul li {

}
.bookmark ul li a {
  padding: 4px 8px;
  display: block;  
}
.bookmark ul li:hover a {
  color: #FFF;
}

.datagrid-header .datagrid-cell span {
  font-size: 11px;
  font-weight: normal;
}
.datagrid-pager.pagination .pagination-info {
  font-size: 11px;
  font-weight: normal;
}
.datagrid-pager.pagination span {
  font-size: 11px;
  font-weight: normal;
}
.pagination-page-list, 
.pagination .pagination-num {
  font-size: 11px;
  font-weight: normal;
}

.form-group label [sublabel] {
  display: block;
  font-weight: normal;
  font-size: 12px;
  line-height: normal;
  margin: -2px 0px 0px 0px;
  color: rgb(51 51 51 / 73%);
}

[card-body-dgv] {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

[class^="icon-"].fa, 
[class*=" icon-"].fa {
  font: normal normal normal 14px/1 FontAwesome !important;
}

.datagrid-cell.datagrid-cell-c1-aksi > .l-btn, 
.datagrid-cell.datagrid-cell-c1-aksi > .l-btn:hover {
    padding-bottom: 0px;
    padding-top: 0px;
    line-height: normal;
}
.datagrid-cell.datagrid-cell-c1-aksi > .l-btn .l-btn-text,
.datagrid-cell .l-btn-text {
    line-height: 21px;
}
.datagrid .easyui-menubutton > span > span > span {
    font-size: 10px;
}

.datagrid-cell, .datagrid-cell-group, 
.datagrid-header-rownumber, .datagrid-cell-rownumber {
  font-size: 12px !important;
}

.datagrid-cell > span {

}

.datagrid-cell > span [sblabel] {
  display: block;
  font-size: 9px;
  line-height: normal;
}

.form-group > [bx] > * {
  display: block;
}

[pwd] {

}
[pwd] i {
  
}
[pwd]:hover i {
  display: none;
}
[pwd] span {
  display: none;
}
[pwd]:hover span {
  display: block;
}

.datagrid [anim-shine] {
  font-size: 12px;
  padding: 4px 8px;
  line-height: 12px !important;
  display: inline-block;
  border-radius: 5px;
}
[anim-shine] {
    background: linear-gradient(to left, #E91E63 20%, #E91E63 40%, rgb(255 170 170) 60%, #E91E63 80%);
    background-size: 200% auto;
    text-fill-color: transparent;
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: white;
    animation: shine 2s cubic-bezier(.35, .32, 1, 1) infinite;
}

@keyframes shine {
    to {
        background-position: 200% center
    }
}

.form-group.fg {

}
.form-group.fg > input {
  margin-bottom: 2px;
}
.form-group.fg > input:last-of-type {

}
.form-group.fg > .input-group {
  margin-bottom: 2px;
}
.form-group.fg > .input-group > .input-group-addon:first-of-type {
  min-width: 150px;
  text-align: left;
  padding-right: 10px;
  line-height: 30px;
}
.form-group.fg span[dsc-label] {
  display: block;
  margin: -10px 0px 5px 0px;
  color: rgb(51 51 51 / 62%);
}
.form-group.fg span[dsc-input] {
  display: block;
  margin: 0px 0px 0px 0px;
  color: rgb(51 51 51 / 62%);
}

[input-image] {
  display: flex;
  flex-direction: column;
  width: 180px;
  border: 1px solid #d2d6de;
  padding: 6px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
[input-image] > label {

}
[input-image] > img {
  width: 100%;
}
[input-image] > div {
  display: flex;
  justify-content: space-between;
  margin: 8px 0px 0px 0px;
}
[input-image] > div button {
  width: 100%;
  margin: 0px 1px;
  padding: 3px 0px;
}
[input-image] [type="file"] {
  display: none;
}
[input-image] > label > span {
  font-weight: normal;
}
 
.hdr {

}
.hdr [input-image] {
  width: 100%;
  height: 250px; 
}
.hdr [input-image] > img {
  height: calc(100% - 65px);
}
.hdr [input-image] > div {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0px 0px 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
}
.hdr [input-image] > div > button {
  width: auto;
  padding: 4px 10px;
}

[box-flex-wrap] {
  display: flex;
  flex-wrap: wrap;
}

[bt].checkbox {
  position: relative; 
  border: none; 
  -moz-border-radius: none;
   -webkit-border-radius: none; 
  border-radius: none;
}

[eui] .panel-body.panel-noscroll {
  border: 0px;
}

[eui] [card-body-dgv] .panel-header,
[eui] [card-body-dgv] .panel-body {
  border-color: #e6edef;
  border-left: 0px;
  border-right: 0px;
}

@media screen and (max-width: 991px) {
  .page-wrapper .page-main-header .main-header-left .logo-wrapper img {
      margin-top: 0;
      height: 30px;
  }  
}

#izmod_ajax .daterangepicker .calendar {
    border-color: #e6edef;
}

[field="aksi"] .btn-group {

}
[field="aksi"] .btn-group > button {
  font-size: 12px;
  padding: 3px 7px;
}

[_id] .card-header .btn-group {

}
[_id] .card-header .btn-group > button {

}
[_id] .card-header button {
  padding: 5px 7px !important;
  line-height: normal;
  font-size: 12px;
}

@media (max-width: 576px) {
  [hide-xs] {
    display: none !important; 
  } 
}

@media (min-width: 576px) and (max-width: 768px) { 
  [hide-sm] {
    display: none !important; 
  }
}

@media (min-width: 768px) {
  [hide-md] {
    display: none !important; 
  }
}

.dropdown-menu {
  /*z-index: 99999999999999999999999999;*/
}

.cke_chrome {
  border: 1px solid #e6edef !important;
}

[lbl_pretest],
[lbl_posttest] {
  margin: 0px 0px 8px 0px;
  display: block;
}

.cke_dialog_background_cover {
  z-index: 99999999999999999 !important;
}

.cke_dialog {
  z-index: 9999999999999999999 !important;
}

.cke_dialog_body {
  padding: 10px !important;
}

[box_soal] {

}

[box_soal] .card-body {
  border-left: 10px solid #e6edef;
}

[box_soal]. card-footer {

}

[box_soal] [bx-itm] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
[box_soal] [bx-itm] > div {
  padding-right: 14px;
}

[box_soal] [bx-itm] [bx-opt] {
  font-weight: bold;
}
[box_soal] [bx-itm] [bx-opt] > i {
  color: rgb(0 0 0 / 11%);
}
[box_soal] [bx-itm] [bx-opt] > i[ans] {
  color: rgb(43 202 0);
  font-size: 20px;
}
[box_soal] [bx-itm] [bx-opt-txt] {
  flex:1; 
}

[dgvlblwrp] {
  padding: 5px 0px;
  display: block;
  font-size: 10px !important;
  line-height: 10px !important;
}
[lblblmikt] {
  font-size: 10px;
  color: rgb(0 0 0 / 47%);
  line-height: normal;
  display: block;
}
[lblblmikt2] {
  font-size: 12px;
  color: rgb(0 0 0 / 47%);
}
[lblnli] {
  font-weight: bold;
  color: rgb(93 214 61);
}

@media (max-width: 1199.98px) {
  .tg-header__area .mobile-nav-toggler {
    display: block;
    margin-left: auto !Important;
  }
}