/* Responsive and color transparent filter */
.filter .select2-container--default .select2-selection--single {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #aaa !important;
  border-radius: 4px;
}

.filter .select2-selection__arrow {
  color: #e6e6e6 !important;
}

.filter .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e6e6e6 !important;
}

.kt-subheader .kt-subheader__toolbar{
  width: 100%;
}

.kt-subheader__wrapper{
  width: 100%;
}

.kt-widget31__info{
  max-width: 22em;
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .kt-subheader .kt-subheader__toolbar{
      width: 66em;
  }

  .kt-subheader__wrapper{
      width: 68% !important;
  }

  /* responsive nama dan foto di dashboard */
  .kt-widget31__info{
    max-width: 17em;
  }
}

/* Custom size modal */
.modal-full {
  max-width: 99%;
}

.modal-xl {
  max-width: 85%;
}

.modal-lg {
  max-width: 50%;
}

.modal-sm {
  max-width: 30%;
}

td {
  font-size: 12px; font-family: Roboto;
}

.thead-grey {
  color: #212529;
  background-color: #fbfbfb;
}

.tbody-grey {
  color: #a0a0a0;
  background-color: #fbfbfb;
}

.tbody-green {
  color: #37d888;
  background-color: #ccffe0;
}

.tbody-orange {
  color: #e2cc2e;
  background-color: #fffbe2;
}

.tbody-blue {
  color: #4bafa6;
  background-color: #e6ffff;
}

/* custom padding radio button */
@keyframes hover-color {
  from {
    border-color: #c0c0c0; }
  to {
    border-color: #1dc9b7; } }

.magic-radio,
.magic-checkbox {
  position: absolute;
  display: none; }

.magic-radio[disabled],
.magic-checkbox[disabled] {
  cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: inline-block;
  padding-left: 0;
  cursor: pointer;
  vertical-align: middle; }
  .magic-radio + label:hover:before,
  .magic-checkbox + label:hover:before {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color; }
  .magic-radio + label:before,
  .magic-checkbox + label:before {
    position: relative;
    margin-bottom: 0px;
    top: 0;
    left: 0;
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: '';
    border: 1px solid #c0c0c0; }
  .magic-radio + label:after,
  .magic-checkbox + label:after {
    position: absolute;
    display: none;
    content: ''; }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  cursor: not-allowed;
  color: #e4e4e4; }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after {
    cursor: not-allowed; }
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none; }
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4; }

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
  animation-name: none; }

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
  display: block; }

.magic-radio + label:before {
  border-radius: 50%; }

.magic-radio + label:after {
  margin-bottom: 0px;
  top: 7px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1dc9b7; }

.magic-radio:checked + label:before {
  border: 1px solid #1dc9b7; }

.magic-radio:checked[disabled] + label:before {
  border: 1px solid #c9e2f9; }

.magic-radio:checked[disabled] + label:after {
  background: #c9e2f9; }

.magic-checkbox + label:before {
  border-radius: 3px; }

.magic-checkbox + label:after {
  top: 2px;
  left: 7px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0; }

.magic-checkbox:checked + label:before {
  border: #1dc9b7;
  background: #1dc9b7; }

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;
  background: #c9e2f9; }

  .custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 1.3rem + 2px);
    margin-bottom: 0; }
  
  .custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 1rem + 0px);
    margin: 0;
    opacity: 0; }
    .custom-file-input:focus ~ .custom-file-label {
      border-color: #669cf7;
      box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25); }
    .custom-file-input:disabled ~ .custom-file-label {
      background-color: #f7f8fa; }
    .custom-file-input:lang(en) ~ .custom-file-label::after {
      content: "Browse"; }
    .custom-file-input ~ .custom-file-label[data-browse]::after {
      content: attr(data-browse); }
  
  .custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 1rem + 0px);
    padding: 0.4rem 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 4px; }
    .custom-file-label::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      display: block;
      height: calc(1.3em + 1rem);
      padding: 0.5rem 1rem;
      line-height: 1.5;
      color: #495057;
      content: "Browse";
      background-color: #f7f8fa;
      border-left: inherit;
      border-radius: 0 4px 4px 0; }

.w15 {width: 15px;}
.w25 {width: 25px;}
.w30 {width: 30px;}
.w50 {width: 50px;}
.w60 {width: 60px;}
.w75 {width: 75px;}
.w100 {width: 100px;}
.w125 {width: 125px;}
.w150 {width: 150px;}
.w175 {width: 175px;}
.w200 {width: 200px;}
.w225 {width: 225px;}
.w250 {width: 250px;}
.w275 {width: 275px;}
.w300 {width: 300px;}
.w350 {width: 350px;}
.w400 {width: 400px;}

.fn10{ font-size: 10px; }
.fn11{ font-size: 11px; }
.fn12{ font-size: 12px; }
.fn14{ font-size: 14px; }
.fn16{ font-size: 16px; }
.fn18{ font-size: 18px; }
.fn20{ font-size: 20px; }

.putih{ color: #fff !important;}
.orange{ color: #f1592b !important;}
.merah{ color: #ee3b24 !important;}
.abu1{ color: #aaa !important;}
.abu2{ color: #888 !important;}
.biru{ color: #19489c !important;}

.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}