/* css tambahan yang belum ada di bootstrap v4.5.0 */

.text-uppercase-first {
    display: inline-block;
    text-transform: lowercase;
}
.text-uppercase-first:first-letter {
    text-transform: uppercase;
}


.w-5 {width: 5% !important;}
.w-10 {width: 10% !important;}
.w-15 {width: 15% !important;}
.w-20 {width: 20% !important;}
/* w-25 sudah ada dari bootstrap v4.5.0 */
.w-30 {width: 30% !important;}
.w-35 {width: 35% !important;}
.w-40 {width: 40% !important;}
.w-45 {width: 45% !important;}
/* w-50 sudah ada dari bootstrap v4.5.0 */
.w-55 {width: 55% !important;}
.w-60 {width: 60% !important;}
.w-65 {width: 65% !important;}
.w-70 {width: 70% !important;}
/* w-75 sudah ada dari bootstrap v4.5.0 */
.w-80 {width: 80% !important;}
.w-85 {width: 85% !important;}
.w-90 {width: 90% !important;}
.w-95 {width: 95% !important;}
/* w-100 sudah ada dari bootstrap v4.5.0 */


.bg-light2 { background-color: #eeeeee !important; }
a.bg-light2:hover, a.bg-light2:focus, button.bg-light2:hover, button.bg-light2:focus { background-color: #c1c1c1 !important; }

.bg-light3 { background-color: #e1e1e1 !important; }
a.bg-light2:hover, a.bg-light2:focus, button.bg-light2:hover, button.bg-light2:focus { background-color: #c1c1c1 !important; }

.bg-keysoft { background-color: #5a274c !important; }
a.bg-keysoft:hover, a.bg-keysoft:focus, button.bg-keysoft:hover, button.bg-keysoft:focus { background-color: #35162d !important; }

.hover-keysoft:hover { background-color: #3b1932 !important; }

.btn-keysoft {
    color: #ffffff;
    background-color: #5a274c;
    border-color: #5a274c; }
    .btn-keysoft:hover {
      color: #ffffff;
      background-color: #5a6268;
      border-color: #545b62; }
    .btn-keysoft:focus, .btn-keysoft.focus {
      color: #ffffff;
      background-color: #5a6268;
      border-color: #545b62;
      box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); }
    .btn-keysoft.disabled, .btn-keysoft:disabled {
      color: #ffffff;
      background-color: #5a274c;
      border-color: #5a274c; }
    .btn-keysoft:not(:disabled):not(.disabled):active, .btn-keysoft:not(:disabled):not(.disabled).active,
    .show > .btn-keysoft.dropdown-toggle {
      color: #ffffff;
      background-color: #545b62;
      border-color: #4e555b; }
      .btn-keysoft:not(:disabled):not(.disabled):active:focus, .btn-keysoft:not(:disabled):not(.disabled).active:focus,
      .show > .btn-keysoft.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); }


.gutter-1 > .col,
.gutter-1 > [class*="col-"] {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}


.gutter-2 > .col,
.gutter-2 > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}


.gutter-3 > .col,
.gutter-3 > [class*="col-"] {
    padding-right: 1rem;
    padding-left: 1rem;
}


.gutter-4 > .col,
.gutter-4 > [class*="col-"] {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}


.gutter-5 > .col,
.gutter-5 > [class*="col-"] {
    padding-right: 3rem;
    padding-left: 3rem;
}



.hr-thick1 {
    border: none;
    height: 1px;
    /* old IE */
    color: #333;
    /* Modern Browsers */
    background-color: #333;
}
.hr-thick2 {
    border: none;
    height: 2px;
    /* old IE */
    color: #333;
    /* Modern Browsers */
    background-color: #333;
}
.hr-thick3 {
    border: none;
    height: 3px;
    /* old IE */
    color: #333;
    /* Modern Browsers */
    background-color: #333;
}
.hr-thick4 {
    border: none;
    height: 4px;
    /* old IE */
    color: #333;
    /* Modern Browsers */
    background-color: #333;
}
.hr-thick5 {
    border: none;
    height: 5px;
    /* old IE */
    color: #333;
    /* Modern Browsers */
    background-color: #333;
}

.dataTables_wrapper .dataTables_processing {
    background-color: #17a2b8;
    color: white;
}


/* table v-align-top */
table.v-align-top > thead > tr > th,
table.v-align-top > tbody > tr > td,
table.v-align-top > tr > th,
table.v-align-top > tr > td {
    vertical-align: top !important;
}
/* table.v-align-top > thead > tr > th {
    border-bottom: 2px solid #d45cb4;
} */
/* tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
} */
table.v-align-top-modal > thead > tr > th,
table.v-align-top-modal > tbody > tr > td {
    vertical-align: top !important;
}



/* table v-align-bottom */
table.v-align-bottom > thead > tr > th,
table.v-align-bottom > tbody > tr > td,
table.v-align-bottom > tr > th,
table.v-align-bottom > tr > td {
    vertical-align: bottom !important;
}
/* table.v-align-bottom > thead > tr > th {
    border-bottom: 2px solid #d45cb4;
} */
/* tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
} */
table.v-align-bottom-modal > thead > tr > th,
table.v-align-bottom-modal > tbody > tr > td {
    vertical-align: bottom !important;
}

.border-light-dark {
    border-color: #cccccc !important;
}