@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto.ttf");
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/gotham.otf");
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat.otf");
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins.ttf");
}

:root {
    /* --color-primary: #028391; */
    --color-primary: #3887BE;
    --color-success: #367e18;
    --color-danger: #dc3545;
    --color-frame: #d0d0d0;
    --color-inactive: #777777;
    --color-dark: #333333;
    --color-shadow: #f3f3f3;
    --color-white: #ffffff;
    --color-red: #fb6358;
    --color-grey: #d3d3d3;
    --color-light-red: #fce4d6;
    --color-light-yellow: #fff2cc;
    --color-light-blue: #ddebf7;
    --color-light-green: #e2efda;
    --value-empty: 0;
    --value-def: 5px;
    --font-weight: bold;

    --font-gotham: "Gotham", sans-serif;
    --font-roboto: "Roboto", sans-serif;
    --font-poppins: "Poppins", sans-serif;
    --font-montserrat: "Montserrat", sans-serif;
}

body {
    margin: var(--value-empty);
    color: var(--color-dark);
    font: 1rem var(--font-roboto);
    text-align: justify;
}

.link,
.link:hover,
.link:active,
.link:focus {
    font-weight: var(--font-weight);
    color: var(--color-primary);
    cursor: pointer;
}

.link-separator {
    margin-left: var(--value-def);
    margin-right: var(--value-def);
}

.btn-primary-large,
.btn-primary-large:hover,
.btn-primary-large:active,
.btn-primary-large:focus {
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    height: calc(var(--value-def) * 13);
    font: 1.2em var(--font-gotham);
    color: var(--color-white) !important;
    width: 100%;
    padding-top: var(--value-def);
}

.text-error {
    font-size: 0.85em;
    font-weight: var(--font-weight);
    color: var(--color-danger);
    margin-top: var(--value-def);
    display: none;
    text-align: left;
}

.text-sup {
    color: var(--color-danger);
}

.front-header-col-2 {
    align-self: center;
    text-align: right;
    font-size: 0.85em;
}

.front-main-area {
    display: grid;
    grid-template-areas: "front-cover front-content";
    grid-auto-columns: 1fr;
}

.front-cover-area {
    display: grid;
    grid-area: "front-cover";
    place-items: center;
    background: var(--color-primary);
    min-height: 100vh;
    text-align: justify;
}

.front-cover-area-main {
    display: grid;
    grid-template-areas:
        "front-cover-logo"
        "front-cover-icon";
    width: 100%;
    grid-auto-columns: 1fr;
}

.front-cover-area-logo {
    display: grid;
    grid-area: "front-cover-logo";
    padding: calc(var(--value-def) * 2) calc(var(--value-def) * 4);
}

.front-cover-area-logo-main {
    display: grid;
    grid-template-areas: "front-cover-logo-text";
    grid-auto-columns: 1fr;
}

.front-cover-area-logo-main-image {
    display: grid;
    grid-area: "front-cover-logo-image";
    padding: 0 calc(var(--value-def) * 4) calc(var(--value-def) * 4)
        calc(var(--value-def) * 4);
    justify-items: center;
    margin-bottom: calc(var(--value-def) * 2);
}

.front-cover-area-logo-main-text1 {
    padding: 2px calc(var(--value-def) * 4);
    font: bold 1.5em var(--font-gotham);
    color: var(--color-white);
    text-align: center;
    text-transform: uppercase;
}

.front-cover-area-logo-main-text2 {
    padding: 2px calc(var(--value-def) * 4);
    font: 1em var(--font-gotham);
    color: var(--color-white);
    text-align: center;
    font-style: italic;
}

.front-cover-area-icon {
    display: grid;
    grid-area: "front-cover-icon";
    padding: calc(var(--value-def) * 4) calc(var(--value-def) * 4);
    justify-items: center;
}

.front-content-area {
    display: grid;
    grid-area: "front-content";
    place-items: center;
    background: var(--color-white);
    min-height: 100vh;
    text-align: justify;
}

.front-content-area-main {
    display: grid;
    grid-template-areas:
        "front-content-form"
        "front-content-footer";
    grid-auto-columns: 1fr;
    width: 100%;
}

.front-content-area-form {
    display: grid;
    grid-area: "front-content-form";
    padding: var(--value-empty) 15%;
}

.front-content-area-footer {
    display: grid;
    grid-area: "front-content-footer";
    padding: calc(var(--value-def) * 4) calc(var(--value-def) * 4);
    font: bold 0.75em var(--font-gotham);
    text-align: center;
    text-transform: uppercase;
}

.front-image-raster {
    width: auto;
    height: auto;
}

.front-image-vector {
    width: 60%;
    height: auto;
    filter: drop-shadow(1px 1px 10px var(--color-shadow));
}

.front-title {
    padding: var(--value-empty) var(--value-empty) calc(var(--value-def) * 2)
        var(--value-empty);
    font: 1.3em var(--font-gotham);
    margin-top: var(--value-def);
    margin-bottom: calc(var(--value-def) * 5);
    border-bottom: var(--value-def) solid var(--color-primary);
    color: var(--color-dark);
    text-align: center;
}

.front-label {
    font: bold 18px var(--font-roboto) !important;
    align-items: center;
    display: flex;
    padding: var(--value-empty) !important;
    color: var(--color-primary) !important;
}

.front-text {
    font: 18px var(--font-roboto) !important;
    padding: calc(var(--value-def) * 6) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-dark) !important;
}

.form-label,
.form-label-floating {
    font: bold 15px var(--font-roboto) !important;
    align-items: center;
    display: flex;
    padding: var(--value-empty) !important;
    color: var(--color-primary);
}

.form-label-filter {
    font: bold 15px var(--font-roboto) !important;
    align-items: center;
    display: flex;
    padding: var(--value-empty) !important;
    color: var(--color-primary);
    justify-content: center;
}

.form-label-filter span {
    margin-left: 10px;
    color: var(--color-danger);
}

.form-text {
    font: 16px var(--font-roboto) !important;
    padding: var(--value-def) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-dark);
    margin-top: -7px;
    min-height: 42px;
}

label.form-text {
    padding-top: 7px !important;
    color: var(--color-red) !important;
}

.form-text-nonactive {
    font: 16px var(--font-roboto) !important;
    padding: var(--value-empty) calc(var(--value-def) * 2) var(--value-empty)
        calc(var(--value-def) * 2) !important;
    color: var(--color-danger) !important;
    resize: none;
    height: 125px !important;
    overflow-y: auto !important;
    margin-top: 7px;
    min-height: 42px;
}

.form-text-log {
    font: 16px var(--font-roboto) !important;
    padding: var(--value-def) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-danger) !important;
    margin-top: -7px;
    min-height: 42px;
}

.form-text-nonactive-log {
    font: 16px var(--font-roboto) !important;
    padding: var(--value-empty) calc(var(--value-def) * 2) var(--value-empty)
        calc(var(--value-def) * 2) !important;
    color: var(--color-danger) !important;
    resize: none;
    height: 158px !important;
    overflow-y: auto !important;
    margin-top: 7px;
    min-height: 42px;
}

.form-text-username,
.form-text-password {
    font: 16px var(--font-roboto) !important;
    padding: var(--value-def) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-dark) !important;
    min-height: 42px;
}

.form-text-floating {
    font: 16px var(--font-roboto) !important;
    padding: calc(var(--value-def) * 6) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-dark) !important;
    min-height: 42px;
}

.form-text-group {
    font: 16px var(--font-roboto) !important;
    padding: calc(var(--value-def) * 2) calc(var(--value-def) * 2)
        var(--value-def) calc(var(--value-def) * 2) !important;
    color: var(--color-danger) !important;
    min-height: 42px;
}

label.form-text-group {
    padding-right: calc(var(--value-def) * 2) !important;
}

.form-label-bayar {
    font: bold 17px var(--font-roboto) !important;
    padding: var(--value-def) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-primary);
    margin-top: -7px;
    min-height: 42px;
    border-bottom: 0px !important;
}

.form-text-bayar {
    font: bold 18px var(--font-roboto) !important;
    padding: var(--value-def) calc(var(--value-def) * 2)
        calc(var(--value-def) * 2) calc(var(--value-def) * 2) !important;
    color: var(--color-red);
    margin-top: -7px;
    min-height: 42px;
}

input[type="file"] {
    display: none;
}

.frame-upload {
    height: 125px;
    width: 125px;
    border: 1px solid var(--color-frame);
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    object-fit: cover;
    position: relative;
    max-width: 100%;
}

.frame-upload2 {
    height: 125px;
    width: 175px;
    border: 1px solid var(--color-frame);
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    object-fit: cover;
    position: relative;
    max-width: 100%;
}

.delete-upload {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: rgba(220, 53, 69, 0.9);
    border: 0px;
    padding: var(--value-def) calc(var(--value-def) * 2);
    display: none;
    align-items: center;
    justify-content: center;
}

.delete-upload i {
    color: var(--color-white);
    font-size: 20px;
}

.file-upload {
    height: 125px;
    width: 125px;
    cursor: pointer;
    padding: var(--value-def) var(--value-def) calc(var(--value-def) * 1.5)
        var(--value-def);
    max-width: 100%;
}

.file-upload2 {
    height: 125px;
    width: 175px;
    cursor: pointer;
    padding: var(--value-def) var(--value-def) calc(var(--value-def) * 1.5)
        var(--value-def);
    max-width: 100%;
}

.error-upload {
    font-size: 0.85em;
    font-weight: var(--font-weight);
    color: var(--color-danger);
    margin-bottom: calc(var(--value-def) * 2);
    display: none;
    text-align: left;
}

.desc-upload {
    display: flex;
    flex-direction: column;
    margin-top: var(--value-def);
}

.info-upload {
    font: italic 0.85em var(--font-roboto);
}

.front-password-icon,
.form-username-icon,
.form-password-icon {
    font-size: calc(var(--value-def) * 3);
    background: transparent;
    color: var(--color-dark);
    border: none;
    border-radius: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    cursor: pointer;
    padding-right: var(--value-empty);
}

.form-nomor-label {
    font: 16px var(--font-roboto) !important;
    background: transparent;
    color: var(--color-dark);
    border: none;
    border-radius: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    padding: var(--value-def) var(--value-empty) calc(var(--value-def) * 2) 3px !important;
}

.front-button-col {
    display: flex;
    width: 100%;
}

.front-button-col-1 {
    margin-top: -5px;
    align-self: center;
}

.front-button-col-2 {
    margin-top: -5px;
    padding-top: 4px;
}

.front-label-checkbox {
    padding-top: 4px;
    cursor: pointer;
    font-size: 0.85em;
}

.front-main-error-area {
    display: grid;
    grid-template-areas: "front-content";
    grid-auto-columns: 1fr;
}

.front-content-error-area-logo {
    display: grid;
    grid-area: "front-content-logo";
}

.front-image-error-vector {
    width: auto;
    height: 250px;
    filter: drop-shadow(1px 1px calc(var(--value-def) * 2) var(--color-shadow));
    margin-bottom: 20px;
    margin-top: 10px;
}

.front-logo-error-text {
    font: 2em var(--font-gotham);
    color: var(--color-danger);
    text-align: center;
}

.main-area {
    padding-top: 30px !important;
}

.content-area {
    min-height: 750px;
}

table {
    display: all;
    border-collapse: collapse !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    border: var(--value-empty) !important;
}

table th {
    line-height: calc(var(--value-def) * 3);
    vertical-align: middle !important;
    background: var(--color-dark) !important;
    color: var(--color-white);
    text-align: center !important;
    padding: 15px 25px !important;
    border-color: var(--color-shadow) !important;
    font: bold 15px var(--font-roboto);
}

table th.nopadding {
    line-height: calc(var(--value-def) * 3);
    vertical-align: middle !important;
    background: var(--color-dark) !important;
    color: var(--color-white);
    text-align: center !important;
    padding: calc(var(--value-def) * 3) calc(var(--value-def) * 2) !important;
    border-color: var(--color-shadow) !important;
    font: bold 15px var(--font-roboto);
}

table th.padding {
    line-height: calc(var(--value-def) * 3);
    vertical-align: middle !important;
    background: var(--color-dark) !important;
    color: var(--color-white);
    text-align: center !important;
    padding: 15px 50px !important;
    border-color: var(--color-shadow) !important;
    font: bold 15px var(--font-roboto);
}

table th:nth-child(1) {
    border-left-color: var(--color-dark) !important;
}

table th:nth-last-child(1) {
    border-right-color: var(--color-dark) !important;
}

table td {
    line-height: var(--value-def);
    vertical-align: middle !important;
    border-top: var(--value-empty);
    border-right: 1px solid var(--color-frame) !important;
    border-bottom: 1px solid var(--color-frame) !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    font: 15px var(--font-roboto);
    text-align: justify;
}

table td:nth-child(1) {
    border-left: 1px solid var(--color-frame) !important;
}

table tr:hover {
    background: var(--color-shadow) !important;
}

table td.jumlah,
table td.jumlah:hover {
    line-height: var(--value-def);
    vertical-align: middle !important;
    border-top: var(--value-empty);
    border-right: 1px solid var(--color-frame) !important;
    border-bottom: 1px solid var(--color-frame) !important;
    box-sizing: border-box !important;
    padding: 7px !important;
    font: bold 15px var(--font-roboto) !important;
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
}

table.dataTable {
    padding-top: calc(var(--value-def) * 2);
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 1em;
    white-space: nowrap;
    font-size: 15px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--color-dark);
    margin-top: -3px;
}

.select2-container--default .select2-selection--single {
    border: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    border-radius: var(--value-empty);
    height: 38px;
    padding-top: 0 !important;
    outline: var(--value-empty);
    font: 16px var(--font-roboto) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-bottom: 1px solid var(--color-primary) !important;
    transition: 0.15s ease-in-out;
}

.select2-container--default .select2-dropdown {
    border: 1px solid var(--color-frame);
    border-radius: var(--value-empty) !important;
    margin-top: var(--value-def);
    font: 15px var(--font-roboto) !important;
    z-index: 1055 !important;
}

.select2-container--default .select2-dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
    outline: var(--value-empty);
    border: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    color: var(--color-dark);
    padding-top: var(--value-def) !important;
    padding-bottom: calc(var(--value-def) * 2) !important;
}

.select2-container--default .select2-dropdown .select2-search__field:focus,
.select2-container--default
    .select2-search--inline
    .select2-search__field:focus {
    outline: var(--value-empty);
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-dark);
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: var(--value-empty) !important;
    margin-left: var(--value-empty) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default
    .select2-results__option[aria-selected="true"]:hover {
    color: var(--color-white);
    background: var(--color-dark) !important;
    border: var(--value-empty) !important;
    margin-left: var(--value-empty) !important;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 250px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-selection .select2-selection--single:focus {
    border: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    border-radius: var(--value-empty);
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: -2px;
    right: -5px;
}

/* modal */
.btn-primary-modal,
.btn-primary-modal:hover,
.btn-primary-modal:active,
.btn-primary-modal:focus {
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 8);
    padding-top: var(--value-def);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 125px;
    outline: 0;
    margin-right: var(--value-def);
}

.btn-secondary-modal,
.btn-secondary-modal:hover,
.btn-secondary-modal:active,
.btn-secondary-modal:focus {
    background-color: var(--color-shadow) !important;
    border: 1px solid var(--color-frame) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 8);
    padding-top: var(--value-def);
    font: 1em var(--font-gotham);
    color: var(--color-dark) !important;
    width: 125px;
    outline: 0;
}

.modal-header {
    background: var(--color-dark);
    color: var(--color-white);
}

.modal-title {
    font: 1.2em var(--font-gotham);
}

.modal-title > i {
    margin-right: 5px;
}

.modal-body {
    text-align: center;
}

.modal-footer {
    display: flex !important;
    justify-content: center !important;
    border-top: 1px solid var(--color-frame);
}

.modal-icon-loading {
    height: calc(var(--value-def) * 20);
    width: calc(var(--value-def) * 20);
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    display: none;
    margin-top: -10px;
}

.modal-icon-check,
.modal-icon-uncheck,
.modal-icon-question,
.btn-upload {
    font-size: calc(var(--value-def) * 15);
    display: none;
    margin-top: -10px;
}

.modal-icon-check {
    color: var(--color-primary);
}

.modal-icon-uncheck {
    color: var(--color-danger);
}

.modal-icon-question {
    color: var(--color-dark);
}

.modal-text-content {
    height: auto;
    width: 100%;
    color: var(--color-dark);
    font: 15px var(--font-roboto);
}

.modal-text-note,
.file-text-note {
    text-align: center;
    font: italic 0.85em var(--font-roboto);
    color: var(--color-inactive);
}

.modal-text-note.first,
.file-text-note.first {
    margin-top: var(--value-def);
}

.modal-text-error,
.file-text-error {
    font-size: 0.85em;
    font-weight: var(--font-weight);
    color: var(--color-danger);
    margin-top: var(--value-def);
    display: none;
}

.modal-frame-portrait {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 3 / 4;
}

.modal-frame-slide {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 16 / 9;
}

.modal-frame-landscape {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 4 / 3;
}

.header {
    background-color: var(--color-primary);
    height: auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    position: sticky;
}

.header-group {
    display: flex;
    width: 100%;
}

.header-kiri-kanan {
    display: flex;
    width: auto;
}

.header-tengah {
    display: flex;
    width: auto;
    justify-content: start;
}

.header .toggle-sidebar-btn {
    color: var(--color-white);
    font: bold 1.75em var(--font-gotham) !important;
    align-items: center;
    display: flex;
    margin: 0;
    padding: 0;
}

.header-img {
    margin-left: calc(var(--value-def) * 2);
}

.header-text {
    padding-left: calc(var(--value-def) * 2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    text-align: left;
    flex-direction: column;
    justify-content: center;
}

.header-text1 {
    font: bold 1.5em var(--font-gotham) !important;
    margin: 0 var(--value-def);
    text-transform: uppercase;
}

.header-text2 {
    font: italic 1em var(--font-gotham) !important;
    margin: 0 var(--value-def);
}

.header-profil-name {
    font-family: var(--font-gotham);
    color: var(--color-dark);
    font-size: 1em !important;
    margin: 0 0 var(--value-def) 0 !important;
    padding: 0 !important;
}

.header-profil-status {
    color: var(--color-inactive);
    text-transform: uppercase;
    font-size: 0.8em !important;
}

.sidebar {
    margin-top: 1em;
}

#main {
    margin-top: 0;
}

.area-icon-status {
    display: flex;
    justify-content: center;
    margin-top: -10px;
    margin-bottom: -10px;
}

.icon-status-on {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-success);
    cursor: pointer;
}

.icon-status-off {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-danger);
    cursor: pointer;
}

.icon-check {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-primary);
    cursor: pointer;
}

.icon-check-non-cursor {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-primary);
    cursor: default;
}

.icon-uncheck {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-danger);
    cursor: pointer;
}

.icon-uncheck-non-cursor {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-danger);
    cursor: default;
}

.icon-check-table {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-primary);
    cursor: pointer;
}

.icon-check-table-non-cursor {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-primary);
    cursor: default;
}

.icon-uncheck-table {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-danger);
    cursor: pointer;
}

.icon-uncheck-table-non-cursor {
    font-size: 30px;
    margin: 0 !important;
    color: var(--color-danger);
    cursor: default;
}

.icon-uncheck-table-non-cursor-transparent {
    font-size: 30px;
    margin: 0 !important;
    color: transparent;
    cursor: default;
}

.area-button-aksi {
    display: flex;
    justify-content: center;
    margin-top: -3px;
    margin-bottom: -3px;
}

.area-button-presensi {
    display: flex;
    justify-content: center;
    margin: 0 !important;
}

.button-aksi-ubah,
.button-aksi-ubah:hover,
.button-aksi-ubah:focus,
.button-aksi-ubah:active {
    background: var(--color-success) !important;
    border-radius: var(--value-def);
    border: 1px solid var(--color-success);
    color: var(--color-white);
    cursor: pointer;
    outline: 0;
    padding: var(--value-def) calc(var(--value-def) * 2);
    font-size: 1.05em;
    width: calc(var(--value-def) * 8);
    margin-left: 1px;
    margin-right: 1px;
    padding: var(--value-def) calc(var(--value-def) * 3);
    justify-content: center;
    display: flex;
}

.button-aksi-hapus,
.button-aksi-hapus:hover,
.button-aksi-hapus:focus,
.button-aksi-hapus:active {
    background: var(--color-danger) !important;
    border-radius: var(--value-def);
    border: 1px solid var(--color-danger);
    color: var(--color-white);
    cursor: pointer;
    outline: 0;
    padding: var(--value-def) calc(var(--value-def) * 2);
    font-size: 1.05em;
    width: calc(var(--value-def) * 8);
    margin-left: 1px;
    margin-right: 1px;
    padding: var(--value-def) calc(var(--value-def) * 3);
    justify-content: center;
    display: flex;
}

.button-aksi-detail,
.button-aksi-detail:hover,
.button-aksi-detail:focus,
.button-aksi-detail:active {
    background: var(--color-dark) !important;
    border-radius: var(--value-def);
    border: 1px solid var(--color-dark);
    color: var(--color-white);
    cursor: pointer;
    outline: 0;
    padding: var(--value-def) calc(var(--value-def) * 2);
    font-size: 1.05em;
    width: calc(var(--value-def) * 8);
    margin-left: 1px;
    margin-right: 1px;
    padding: var(--value-def) calc(var(--value-def) * 3);
    justify-content: center;
    display: flex;
}

.button-aksi-arrow,
.button-aksi-arrow:hover,
.button-aksi-arrow:focus,
.button-aksi-arrow:active {
    background: var(--color-success) !important;
    border-radius: var(--value-def);
    border: 1px solid var(--color-success);
    color: var(--color-white);
    cursor: pointer;
    outline: 0;
    padding: var(--value-def) calc(var(--value-def) * 2);
    font-size: 1.2em;
    width: calc(var(--value-def) * 8);
    margin-left: 1px;
    margin-right: 1px;
    padding: var(--value-def) calc(var(--value-def) * 3);
    justify-content: center;
    display: flex;
}

.button-zone-delete,
.button-zone-delete:hover,
.button-zone-delete:focus,
.button-zone-delete:active {
    background: var(--color-danger) !important;
    border: 1px solid var(--color-danger);
    color: var(--color-white);
    cursor: pointer;
    outline: 0;
    padding: calc(var(--value-def) * 2);
    font-size: 1.25em;
    width: 100%;

    justify-content: center;
    display: flex;
}

.form-table-button-area {
    display: flex !important;
    justify-content: center !important;
}

.form-table-button-separator {
    margin-bottom: calc(var(--value-def) * 2) !important;
    padding-bottom: calc(var(--value-def) * 2) !important;
    border-bottom: 1px dashed var(--color-frame);
}

.form-table-filter-separator {
    margin-bottom: calc(var(--value-def) * 3.5) !important;
    padding-bottom: calc(var(--value-def) * 3.5) !important;
}

.form-display-button-area {
    display: flex !important;
    justify-content: center !important;
}

.form-display-button-separator {
    padding-top: calc(var(--value-def) * 2) !important;
}

.form-print-separator {
    border-bottom: 1px dashed var(--color-frame);
    margin-top: calc(var(--value-def) * 2);
    margin-bottom: calc(var(--value-def) * 2);
}

.btn-primary-form,
.btn-primary-form:hover,
.btn-primary-form:focus,
.btn-primary-form:active {
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: var(--value-empty) calc(var(--value-def) * 2) var(--value-empty)
        var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-secondary-form,
.btn-secondary-form:hover,
.btn-secondary-form:focus,
.btn-secondary-form:active {
    background-color: var(--color-shadow) !important;
    border: 1px solid var(--color-frame) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-dark) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-tertiary-form,
.btn-tertiary-form:hover,
.btn-tertiary-form:focus,
.btn-tertiary-form:active {
    background-color: var(--color-red) !important;
    border: 1px solid var(--color-red) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: var(--value-empty) calc(var(--value-def) * 2) var(--value-empty)
        var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-template-form,
.btn-template-form:hover,
.btn-template-form:focus,
.btn-template-form:active {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-frame) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-dark) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: var(--value-empty) calc(var(--value-def) * 2) var(--value-empty)
        var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-export-form,
.btn-export-form:hover,
.btn-export-form:focus,
.btn-export-form:active {
    background-color: var(--color-red) !important;
    border: 1px solid var(--color-red) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 100%;
    cursor: pointer;
    outline: var(--value-empty);
    margin: var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-list-primary-form,
.btn-list-primary-form:hover,
.btn-list-primary-form:focus,
.btn-list-primary-form:active {
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: calc(var(--value-def) * 7) calc(var(--value-def) * 2)
        var(--value-empty) var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-list-secondary-form,
.btn-list-secondary-form:hover,
.btn-list-secondary-form:focus,
.btn-list-secondary-form:active,
.btn-list-secondary-only-form,
.btn-list-secondary-only-form:hover,
.btn-list-secondary-only-form:focus,
.btn-list-secondary-only-form:active {
    background-color: var(--color-shadow) !important;
    border: 1px solid var(--color-frame) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-dark) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: calc(var(--value-def) * 7) var(--value-empty) var(--value-empty)
        var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.btn-list-tertiary-form,
.btn-list-tertiary-form:hover,
.btn-list-tertiary-form:focus,
.btn-list-tertiary-form:active {
    background-color: var(--color-red) !important;
    border: 1px solid var(--color-red) !important;
    border-radius: var(--value-def);
    height: calc(var(--value-def) * 9);
    font: 1em var(--font-gotham);
    color: var(--color-white) !important;
    width: 150px;
    cursor: pointer;
    outline: var(--value-empty);
    margin: calc(var(--value-def) * 7) calc(var(--value-def) * 2)
        var(--value-empty) var(--value-empty);
    padding-top: var(--value-def);
    z-index: 1;
}

.area-export,
.area-bayar {
    display: none;
}

.area-filter {
    text-align: right;
    width: 100%;
    position: absolute;
    padding-right: calc(var(--value-def) * 3);
}

/* bootstrap */
.form-control {
    border: none;
    border-radius: var(--value-empty);
    border-bottom: 1px solid var(--color-frame);
    padding-left: var(--value-empty) !important;
    padding-right: var(--value-empty) !important;
}

.form-control:focus {
    border-bottom: 1px solid var(--color-primary) !important;
    box-shadow: var(--value-empty) 1px 1px var(--color-white);
    outline: var(--value-empty) none;
}

.form-control.dt-search {
    font: 16px var(--font-roboto) !important;
    width: 200px !important;
    margin-left: var(--value-empty) !important;
    height: 35px !important;
    color: var(--color-dark) !important;
    box-shadow: none;
}

.form-control.dt-filter {
    width: 150px !important;
}

.form-border-log {
    border-color: var(--color-danger);
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: calc(var(--value-def) * 3) !important;
    width: calc(var(--value-def) * 5) !important;
    height: calc(var(--value-def) * 5) !important;
    cursor: pointer;
}

input[type="checkbox"]:disabled {
    opacity: 1 !important;
}

.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    box-shadow: none;
    outline: var(--value-empty) none;
}

.form-check-input:not(:checked)[type="checkbox"],
.form-check-input:not(:checked)[type="radio"] {
    border-color: var(--color-frame);
    box-shadow: none;
    outline: var(--value-empty) none;
}

.form-check-label {
    margin-top: 1px;
    margin-bottom: 10px;
    cursor: pointer;
}

.form-check-label-disabled {
    margin-top: 1px;
    margin-bottom: 10px;
    color: var(--color-inactive) !important;
}

.form-floating > .form-control:focus ~ label.front-label,
.form-floating > .form-control:not(:placeholder-shown) ~ label.front-label {
    color: var(--color-primary);
    opacity: 1 !important;
    font-weight: var(--font-weight) !important;
    transform: scale(0.85) translateY(-1rem) translateX(0rem);
}

.form-floating > .form-control:focus ~ label.form-label-floating,
.form-floating
    > .form-control:not(:placeholder-shown)
    ~ label.form-label-floating {
    color: var(--color-primary);
    opacity: 1 !important;
    font-weight: var(--font-weight) !important;
    transform: scale(0.95) translateY(-1rem) translateX(0rem);
}

/* quill */
.ql-container {
    color: var(--color-dark);
    font: 1rem var(--font-roboto);
    text-align: justify;
    height: 200px;
    margin: 0;
}

.ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--color-frame);
    padding: 0 0 13px 0;
    text-align: center;
}

.ql-container.ql-snow {
    border: none;
    margin-bottom: 0;
}

.ql-editor {
    padding: 0 0 13px 0;
    margin-bottom: 0;
    text-align: justify;
    overflow-x: hidden;
    line-height: 1.5em !important;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--color-red);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--color-red);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: var(--color-red);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: var(--color-red);
}

.ql-snow a {
    color: var(--color-red);
}

.ql-disabled {
    padding: 0;
    color: var(--color-red) !important;
}

/* style */
.sidebar-nav {
    margin-top: 0px;
    margin-bottom: -20px;
}

.sidebar-nav .nav-heading {
    color: var(--color-inactive);
    font-weight: bold;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: calc(var(--value-def) * 2);
    padding-bottom: var(--value-def);
    text-align: center;
    border-bottom: 1px solid var(--color-grey);
}

.sidebar-nav .nav-heading2 {
    color: var(--color-inactive);
    font-weight: bold;
    font-size: 12px;
    margin-left: 0;
    margin-top: calc(var(--value-def) * 2);
    margin-bottom: calc(var(--value-def) * 2);
    padding-bottom: var(--value-def);
    text-align: center;
    border-bottom: 1px solid var(--color-grey);
    text-transform: uppercase;
}

.sidebar-nav .nav-link li,
.sidebar-nav .nav-link.collapsed,
.sidebar-nav .nav-link.collapsed i {
    color: var(--color-dark);
    font-size: 15px;
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link:hover {
    color: var(--color-white);
    background: var(--color-primary);
    font-size: 15px;
    padding-left: calc(var(--value-def) * 2);
    padding-right: calc(var(--value-def) * 2);
}

.sidebar-nav .nav-link:hover i {
    color: var(--color-white);
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link i:hover {
    color: var(--color-white);
}

.sidebar-nav .nav-link:not(.collapsed),
.sidebar-nav .nav-link:not(.collapsed) i {
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 15px;
}

.sidebar-nav .nav-link:not(.collapsed).selected,
.sidebar-nav .nav-link:not(.collapsed) i.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 15px;
}

.sidebar-nav .nav-content a {
    color: var(--color-dark);
    margin-bottom: var(--value-def);
    font-size: 15px;
    padding-left: calc(var(--value-def) * 5);
}

.sidebar-nav .nav-content a i {
    font-size: 15px;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--value-def);
}

.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i {
    background-color: transparent !important;
}

.header-nav {
    display: flex !important;
    justify-content: end !important;
    width: 40%;
}

.header-nav .nav-profile {
    color: var(--color-white);
    transition: none;
    font-family: var(--font-gotham);
}
.breadcrumb-area {
    padding-bottom: 5px;
}

.breadcrumb {
    font: 0.85em var(--font-gotham);
    color: var(--color-inactive);
    width: 100%;
    line-height: 25px;
}

.breadcrumb .breadcrumb-item.nonactive a,
.breadcrumb .breadcrumb-item.nonactive:hover a {
    font-weight: bold;
    color: var(--color-dark);
}

.breadcrumb .breadcrumb-item.active a,
.breadcrumb .breadcrumb-item.active:hover a {
    font-weight: bold;
    color: var(--color-primary);
}

.breadcrumb .breadcrumb-item::before {
    color: var(--color-inactive);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "|");
}

.header-nav .profile .dropdown-item:hover {
    background-color: var(--color-primary);
    border-bottom-left-radius: var(--value-empty);
    border-bottom-right-radius: var(--value-empty);
    color: var(--color-white);
    transition: none;
}

.dropdown-last {
    border-bottom-left-radius: var(--value-def) !important;
    border-bottom-right-radius: var(--value-def) !important;
}

.back-to-top,
.back-to-top:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    margin-bottom: -7px;
    margin-right: 1%;
}
.back-to-top {
    z-index: 1;
}

.form-header {
    font: 1.4em var(--font-gotham);
    color: var(--color-primary);
    padding: 20px 0 0 0;
    margin-bottom: var(--value-empty);
    text-align: justify;
    display: flex;
}

.form-header > .icon {
    width: auto;
    display: flex;
    align-items: center;
}

.form-header > .text {
    width: auto;
    padding-left: calc(var(--value-def) * 2);
    display: flex;
    align-items: center;
    text-align: left;
}

.form-sub-header {
    margin-top: calc(var(--value-def) * 2);
    margin-bottom: 30px;
    padding-bottom: calc(var(--value-def) * 2);
    border-bottom: var(--value-def) solid var(--color-primary);
    color: var(--color-inactive);
    font: bold italic 0.85em var(--font-roboto) !important;
    text-align: justify;
}

.footer {
    border: 0;
    margin-top: -50px;
}

.footer .copyright {
    color: var(--color-dark);
    font: bold 0.9em var(--font-gotham);
    text-transform: uppercase;
}

.pagination > li > a,
.pagination > li > span {
    padding: var(--value-def);
    min-width: calc(var(--value-def) * 7);
    text-align: center;
    font-size: 15px;
    margin-top: 7px;
    color: var(--color-dark) !important;
    border-color: var(--color-frame) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.page-item.active .page-link {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
    margin-top: 7px !important;
}
.page-link:hover {
    background: var(--color-white) !important;
    box-shadow: none !important;
    border-color: var(--color-frame) !important;
}

.datepicker {
    border-radius: 0;
    box-shadow: none !important;
}

.datepicker-dropdown {
    color: var(--color-dark) !important;
    margin-top: var(--value-def) !important;
    border: 1px solid var(--color-frame);
    padding: 0 !important;
}

.datepicker-dropdown:before,
.datepicker-dropdown:after {
    content: unset;
}

.datepicker table {
    border: 0 !important;
}

.datepicker table th {
    border: 0 !important;
    background: transparent !important;
    color: var(--color-dark);
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 0;
    padding: 10px !important;
    width: 1.8rem;
    height: 1.8rem;
    text-align: center !important;
    font-size: 13px;
}

.datepicker table tr td {
    border-left: 0px !important;
    border-top: 1px solid var(--color-frame) !important;
    border-bottom: 1px solid var(--color-frame) !important;
}

.datepicker table tr td:nth-last-child(1),
.datepicker table tr th:nth-last-child(1) {
    border-right: 0px !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--color-inactive);
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active:hover:focus,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.disabled:hover:focus,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.active,
.open .dropdown-toggle.datepicker table tr td.active:hover,
.open .dropdown-toggle.datepicker table tr td.active.disabled,
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:hover:focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td span.active,
.open .dropdown-toggle.datepicker table tr td span.active:hover,
.open .dropdown-toggle.datepicker table tr td span.active.disabled,
.open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: var(--color-white);
    background: var(--color-dark);
    border-color: var(--color-dark);

    text-shadow: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
    background: var(--color-frame);
    cursor: pointer;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today:hover:focus,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today.disabled:hover:focus,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.today,
.open .dropdown-toggle.datepicker table tr td.today:hover,
.open .dropdown-toggle.datepicker table tr td.today.disabled,
.open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    text-shadow: none !important;
}

.saldo {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: bold;
}

.card-dashboard {
    border: 2px solid var(--color-primary);
    border-radius: calc(var(--value-def) * 2);
    padding: 0 !important;
}

.card-content {
    background-color: var(--color-white);
    padding: 0 calc(var(--value-def) * 5);
    margin-bottom: 35px;
    margin-top: 35px;
}

.card-content .card-icon {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 25px !important;
    width: 50px;
    height: 50px;
}

.card-content > .area-icon {
    margin-right: 15px;
}

.card-content h3 {
    font: bold 1.1em var(--font-gotham) !important;
    margin-bottom: 0;
    text-align: left;
    color: var(--color-dark);
}

.card-content h5 {
    font: bold 0.8em var(--font-gotham) !important;
    margin-top: var(--value-def);
    margin-bottom: 3px;
    text-align: left;
    color: var(--color-primary);
}

.card-content span {
    font: 15px var(--font-gotham);
    color: var(--color-danger);
}

.checkbox {
    margin: 0 !important;
    width: 25px !important;
    height: 25px !important;
}

.radio {
    width: 20px !important;
    height: 20px !important;
    margin-right: 3px;
    margin-top: 0;
    margin-bottom: 0;
}

.radio-area {
    margin-top: 5px;
    margin-bottom: 5px;
}

.radio-label {
    cursor: pointer;
}

tr.nohover {
    height: 55px !important;
}

tr.nohover:hover {
    background-color: transparent !important;
}

td.jenis {
    font-size: 16px;
}

/* error page */
.error-background {
    background-color: var(--color-white);
}

.error-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: center;
    margin: auto 2rem;
}

.error-content .logo img {
    width: auto;
    height: auto;
    margin-bottom: 1rem;
    cursor: pointer;
    display: flex;
}

.error-content .logo2 img {
    display: none;
}

.error-content .image img {
    width: auto;
    height: 15rem;
    margin: 2rem 0
}

.error-content .text,
.error-content .caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-content .caption {
    margin-bottom: 1rem;
}

.error-content .caption .caption1 {
    font: bold 1.5em var(--font-gotham);
    color: var(--color-black);
    text-align: center;
    text-transform: uppercase;
}

.error-content .caption .caption2 {
    font: 1em var(--font-gotham);
    color: var(--color-black);
    text-align: center;
    font-style: italic;
}

.error-content .text .frame {
    width: 6rem;
    height: 6rem;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.error-content .text .frame .code {
    font: 3rem var(--font-montserrat);
    color: var(--color-white);
}

.error-content .text .message {
    font: bold 1.5rem var(--font-poppins);
    color: var(--color-dark);
    text-transform: uppercase;
}

.front-header-col-image {
    display: none;
}

.drop-zone,
.drop-zone2 {
    width: 225px;
    height: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font: 1em var(--font-gotham);
    cursor: pointer;
    color: var(--color-inactive);
    border: 1px solid var(--color-frame);
}

.drop-zone.error,
.drop-zone-slide.error,
.drop-zone-landscape.error {
    border: 1px solid var(--color-danger);
}

.drop-zone-over {
    border-style: solid;
}

.drop-zone-input {
    display: none;
}

.drop-zone-thumb,
.drop-zone-thumb2,
.drop-zone-thumb3,
.drop-zone-thumb4 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: "100% 100%";
    text-align: center;
    position: relative;
}

.drop-zone-thumb::after,
.drop-zone-thumb2::after,
.drop-zone-thumb3::after,
.drop-zone-thumb4::after {
    display: none;
}

.drop-zone-button-area {
    width: 225px;
    display: none;
    align-items: center;
    justify-content: center;
}

.drop-zone-slide {
    width: 300px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font: 1em var(--font-gotham);
    cursor: pointer;
    color: var(--color-inactive);
    border: 1px solid var(--color-frame);
}

.drop-zone-landscape {
    width: 300px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font: 1em var(--font-gotham);
    cursor: pointer;
    color: var(--color-inactive);
    border: 1px solid var(--color-frame);
}

.area-empty {
    display: flex;
}

.area-check {
    margin-top: 5px;
}

.frame-file-square {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.frame-file-portrait {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.frame-file-slide {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.frame-file-landscape {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-frame);
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.periode {
    display: flex;
    width: 100%;
    align-items: center;
}

.periode-awal,
.periode-akhir {
    width: 45%;
}

.periode-sd {
    width: 10%;
    text-align: center;
}

.text-tengah {
    text-align: center;
}

.area_total,
.area_total:hover {
    background: var(--color-shadow) !important;
    color: var(--color-dark) !important;
    font-weight: bold;
}

.hidden {
    display: none;
}

@media (max-width: 1300px) {
    .front-image-vector {
        width: 75%;
    }

    .front-header-area {
        display: flex;
        flex-direction: column;
    }

    .front-header-col-1 {
        display: flex;
        width: 100%;
    }

    .front-header-col-2 {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        margin-top: -5px;
        margin-bottom: calc(var(--value-def) * 3);
    }

    .front-image-error-vector {
        width: 100%;
    }

    .header {
        padding-right: var(--value-def);
    }

    .header .toggle-sidebar-btn {
        color: var(--color-white);
        padding-left: 0 !important;
    }
}

@media (max-width: 991px) {
    .header-nav {
        width: auto;
    }

    .header-nav .nav-profile span {
        display: none !important;
    }

    .front-content-area-form {
        padding: var(--value-empty) 10%;
    }

    .front-image-vector {
        width: 90%;
    }

    .front-button-area {
        display: flex;
        flex-direction: column;
    }

    .front-button-col-1 {
        display: flex;
        width: 100%;
    }

    .front-button-col-2 {
        display: flex;
        width: 100%;
        margin-top: calc(var(--value-def) * 2);
        margin-bottom: -5px;
    }
}

@media (max-width: 768px) {
    .header-nav {
        display: none !important;
    }

    .front-cover-area {
        display: none;
    }

    .front-main-area {
        display: grid;
        grid-template-areas: "front-content";
        grid-auto-columns: 1fr;
    }

    .front-cover-area-logo-main-text1,
    .front-cover-area-logo-main-text2 {
        color: var(--color-dark);
    }

    .front-cover-area-logo-main-text1 {
        margin-top: 0.5em;
    }

    .front-cover-area-logo-main-text2 {
        margin-bottom: 1.5em;
    }

    .front-logo-error-text {
        font: 1.45em var(--font-gotham);
        color: var(--color-danger);
    }

    .sidebar {
        margin-top: 4.5em;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
    }

    /* bootstrap */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        margin-top: calc(var(--value-def) * 2);
    }

    .form-control.dt-search,
    .form-control.dt-filter {
        width: 200px !important;
    }

    .empty {
        margin: 0;
    }

    .front-header-col-image {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .area-empty {
        display: none;
    }

    .area-check {
        margin-top: 0px;
    }
}

@media (max-width: 575px) {
    .header-text {
        margin-top: 0.5em;
    }

    .header-kiri-kanan {
        width: 10%;
        display: flex;
        justify-content: center;
    }

    .header-tengah {
        display: flex;
        width: 80%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .front-content-area-form {
        padding: var(--value-empty) 5%;
    }

    .front-title {
        width: 100%;
        text-align: center;
    }

    .front-header-col-2 {
        justify-content: center;
    }

    .form-header {
        font: 1.1em var(--font-gotham);
    }

    .header-nav {
        display: none !important;
    }

    .form-sub-header {
        font: bold italic 0.75em var(--font-roboto) !important;
    }

    .form-control.dt-search,
    .form-control.dt-filter {
        width: 100% !important;
    }

    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        width: 100% !important;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        margin-top: calc(var(--value-def) * 2);
    }

    .form-table-button-area,
    .form-display-button-area {
        flex-direction: column;
    }

    .btn-primary-form,
    .btn-primary-form:hover,
    .btn-primary-form:focus,
    .btn-primary-form:active,
    .btn-secondary-form,
    .btn-secondary-form:hover,
    .btn-secondary-form:active,
    .btn-secondary-form:focus,
    .btn-tertiary-form,
    .btn-tertiary-form:hover,
    .btn-tertiary-form:active,
    .btn-tertiary-form:focus,
    .btn-template-form,
    .btn-template-form:hover,
    .btn-template-form:active,
    .btn-template-form:focus,
    .btn-list-primary-form,
    .btn-list-primary-form:hover,
    .btn-list-primary-form:focus,
    .btn-list-primary-form:active,
    .btn-list-secondary-form,
    .btn-list-secondary-form:hover,
    .btn-list-secondary-form:focus,
    .btn-list-secondary-form:active,
    .btn-list-secondary-only-form,
    .btn-list-secondary-only-form:hover,
    .btn-list-secondary-only-form:focus,
    .btn-list-secondary-only-form:active,
    .btn-list-tertiary-form,
    .btn-list-tertiary-form:hover,
    .btn-list-tertiary-form:focus,
    .btn-list-tertiary-form:active,
    .btn-export-form,
    .btn-export-form:hover,
    .btn-export-form:active,
    .btn-export-form:focus {
        width: 100%;
    }

    .btn-primary-form,
    .btn-primary-form:hover,
    .btn-primary-form:focus,
    .btn-primary-form:active,
    .btn-tertiary-form,
    .btn-tertiary-form:hover,
    .btn-tertiary-form:focus,
    .btn-tertiary-form:active,
    .btn-template-form,
    .btn-template-form:hover,
    .btn-template-form:focus,
    .btn-template-form:active,
    .btn-export-form,
    .btn-export-form:hover,
    .btn-export-form:focus,
    .btn-export-form:active {
        margin: var(--value-def) var(--value-empty) var(--value-def)
            var(--value-empty);
    }

    .btn-list-primary-form,
    .btn-list-primary-form:hover,
    .btn-list-primary-form:focus,
    .btn-list-primary-form:active,
    .btn-list-secondary-only-form,
    .btn-list-secondary-only-form:hover,
    .btn-list-secondary-only-form:focus,
    .btn-list-secondary-only-form:active {
        margin: calc(var(--value-def) * 8) var(--value-empty) var(--value-def)
            var(--value-empty);
    }

    .btn-secondary-form,
    .btn-secondary-form:hover,
    .btn-secondary-form:active,
    .btn-secondary-form:focus,
    .btn-list-secondary-form,
    .btn-list-secondary-form:hover,
    .btn-list-secondary-form:focus,
    .btn-list-secondary-form:active,
    .btn-list-tertiary-form,
    .btn-list-tertiary-form:hover,
    .btn-list-tertiary-form:focus,
    .btn-list-tertiary-form:active {
        margin: var(--value-def) var(--value-empty) var(--value-empty)
            var(--value-empty);
    }

    .breadcrumb-area {
        display: none;
    }

    .form-header > .icon {
        display: none;
    }

    .form-header > .text {
        padding-left: var(--value-empty);
    }

    .area-filter {
        text-align: right;
        width: 100%;
        position: unset;
        padding-right: var(--value-empty);
    }

    .form-label-filter {
        font-size: 14px !important;
    }

    .card-content > .area-icon {
        margin-right: 10px;
        display: unset;
    }

    .front-image-error-vector {
        margin-bottom: 0;
        margin-top: -20px;
    }

    .form-display-table-button-separator {
        margin-top: 30px;
    }

    .error-content .logo img {
        display: none;
    }

    .error-content .logo2 img {
        width: auto;
        height: auto;
        margin-bottom: 1rem;
        cursor: pointer;
        display: flex;
    }

    .error-content .image img {
        width: auto;
        height: 12.5rem;
    }
}

@media (max-width: 350px) {
    .header-text1 {
        font-size: 1.45em !important;
    }
    .error-content .image img {
        width: auto;
        height: 10rem;
    }
}