@charset "utf-8";
* {
   box-sizing: border-box
}
*:after, *:before {
   box-sizing: border-box
}
* { 
   box-sizing: border-box; 
   margin: 0; 
   padding: 0; 
}
html {
   /* Scrollbars in IE 10+. */
   -ms-overflow-style: -ms-autohiding-scrollbar;
   -ms-text-size-adjust: 100%;

   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: 100%;

   /* Scrollbars in Firefox+. */
   scrollbar-color: #dee2e6 #e9ecef;
   scrollbar-width: thin;

   /* The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). */
   touch-action: auto;
}
body {
    font-family: 'Inter', -apple-system, sans-serif; /* Gunakan font bersih */
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white);
}
[role=button] {
   cursor:pointer
}
@-ms-viewport {
   width: device-width
}
svg:not(:root) {
   overflow: hidden
}
::-moz-selection {
   background-color: #0078d7;
   color: #ffffff;
}
::selection {
   background-color: #0078d7;
   color: #ffffff;
}
/* width */
::-webkit-scrollbar {
   background: #e9ecef;
   height: 6px;
   width: 6px;
}
/* track */
::-webkit-scrollbar-track {
   background: #e9ecef;
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .05);
}
/* handle */
::-webkit-scrollbar-thumb {
   background: #dee2e6;
}
/* handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #bbb;
}

::before, ::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
a {
   background-color: transparent
}
a {
   color: var(--body-color);
   text-decoration: none
}
a:hover, a:focus {
   opacity: 1;
}
a:focus {
   outline: 0;
   outline-offset: -2px;
   opacity: 1;
}
a:hover, a:focus {
   text-decoration: initial;
}
a:hover, a:focus, a:focus-visible, input:hover, input:focus, input:focus-visible, td[contenteditable=true]:hover, td[contenteditable=true]:focus, td[contenteditable=true]:focus-visible, , span[contenteditable=true]:hover, span[contenteditable=true]:focus, span[contenteditable=true]:focus-visible {
   outline-width: 0; 
   outline: none;
}
abbr[data-original-title], abbr[title] {
   cursor: help;
   border-bottom: 1px dotted var(--body-color);
}
abbr[title] {
   border-bottom: 1px dotted;
}
audio:not([controls]) {
   display: none;
   height: 0px;
}
blockquote .small:before, blockquote footer:before, blockquote small:before {
   content: '\2014 \00A0'
}
button {
   overflow: visible;
   text-transform: none;
}
button, html input[type=button], input[type=reset], input[type=submit] {
   cursor: pointer;
}
button, input {
   font-family: var(--body-font-family);
   font-size: inherit;
   line-height: inherit
}
button[disabled], html input[disabled] {
   cursor: default;
}
canvas {
   bottom: 0;
   display: block;
   left: 0;
   margin: 0 auto;
   padding: 0px;
   position: absolute;
   right: 0;
   top: 0;
   vertical-align: baseline;
}
fieldset {
   min-width: 0px;
   padding: 0px;
   margin: 0px;
   border: 0px;
}
fieldset[disabled] input[type=checkbox], fieldset[disabled] input[type=radio], input[type=checkbox].disabled, input[type=checkbox][disabled], input[type=radio].disabled, input[type=radio][disabled] {
   cursor: not-allowed;
}
fieldset[disabled] .checkbox-inline, fieldset[disabled] .radio-inline {
   cursor: not-allowed;
}
fieldset[disabled] .checkbox label, fieldset[disabled] .radio label {
   cursor: not-allowed;
}
fieldset[disabled] a.btn {
   pointer-events: none;
}
select[multiple].input-sm {
   height: auto;
}
select[multiple].input-lg {
   height: auto;
}
h1, h2 {
   margin: .67em 0;
}
h1, h2, h3, h4 {
   color: var(--body-color);
}
img {
   border: 0;
}
img {
   vertical-align: middle;
}
input {
   line-height: normal;
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
   width: 100%;
}
input[type=checkbox], input[type=radio] {
   box-sizing: border-box;
}
input[type=radio]:checked ~ .check {
   border: 4px solid #f5f5f5;
}
input[type=radio]:checked ~ .check::before {
   background: #30a5ff;
}
input[type=radio]:checked ~ label {
   color: var(--body-color);
}
input[type=file] {
   display: block;
}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus {
   outline: 0;
   outline-offset: -2px;
}
input[type=checkbox], input[type=radio] {
   line-height: normal;
   margin-top: 1px\9;
   margin: 4px 0 0;
}
input[type=range] {
   display: block;
   width: 100%
}
input[type=search], input[type=checkbox], input[type=radio] {
   box-sizing: border-box
}
input[type=search] {
   box-sizing: content-box;
}
input:focus, input:focus-visible {
   outline-width: 0; 
   outline: none;
}
label {
   display: inherit;
   font-weight: 600;
   height: 25px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: auto;
}
nav {
   display: block
}
button, input {
   margin: 0;
   font: var(--body-font-family);
   color: inherit;
}
ol, ul {
   margin: 0px;
   padding: 0px;
}
ol {
   list-style-type: decimal;
}
ul {
   list-style-type: lower-alpha;
   list-style: none;
}
p {
   margin: 0 0 10px;
   color: var(--body-color);
}
select[multiple], select[size] {
   height: auto;
}
small {
   font-size: 80%;
}
strong {
   font-weight: 600;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
table col[class*=col-] {
   position: static;
   display: table-column;
   float: none;
}
table td[class*=col-], table th[class*=col-] {
   position: static;
   display: table-cell;
   float: none;
}
table.sortable > thead > tr > th {
   cursor: pointer;
}
table.sortable > thead > tr > th.order-field {
   color: unset !important;
   padding-right: 0px;
}
table.sortable > thead > tr > th.order-asc:after {
   content: '\2191';
   display: inline-block;
   font-size: inherit;
   padding: 0px 5px;
   text-align: center;
}
table.sortable > thead > tr > th.order-desc:after {
   content: '\2193';
   display: inline-block;
   font-size: inherit;
   padding: 0px 5px;
   text-align: center;
}
table.sortable > thead > tr > th[data-nonsortable='true'] {
   text-align: center;
}
textarea.form-control {
   color: var(--body-color);
   font-family: var(--body-font-family);
   font-size: var(--body-font-size);
   height: auto;
   letter-spacing: normal;
   line-height: 1.5;
   padding: 12px;
}
@media print {
   *, :after, :before {
      color: #000!important;
      text-shadow: none!important;
      background: 0 0!important;
      box-shadow: none!important;
   }
   a {
      text-decoration: underline;
   }
   a[href]:after {
      content: "("attr(href)")";
      display: none;
   }
   a[href^="javascript:"]:after, a[href^="#"]:after {
      content: "";
   }
   abbr[title]:after {
      content: "("attr(title)")";
      display: none;
   }
   img {
      max-width: 100%!important;
   }
   img {
      page-break-inside: avoid;
   }
   p {
      orphans: 3;
      widows: 3;
   }
   .header {
      display: none;
   }
   .label {
      border: 1px solid #000;
   }
   .card {
      word-wrap: break-word;
   }
}