:root {
    --bg-primary: #0278ae;
    --bg-secondary: #51adcf;
    --bg-tertiary: #a5ecd7;
    --text-color: #213e3b;
}

html,
body {
    height: 100%;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 14px;
}

body {
    margin-top: 50px;
}

.bg-primary, .label-primary {
    background-color: var(--primary) !important;
}

.form-horizontal .form-group .control-label{
    text-align: right;
    padding-top: 7px;
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a94442;
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
    color: #3c763d;
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/* Warna .primary-btn & header .card-info dipindah ke css/theme.css
   (kini mengikuti gradasi biru sidebar, bukan hijau #005E57). */

.main-header {
    z-index: 1 !important;
}

.main-sidebar {
    /* Di atas konten halaman (mis. .small-box-footer punya z-index:10) supaya
       sidebar yang di-expand menimpa tombol/kartu, tapi tetap di bawah modal
       (backdrop 1040 / modal 1050) agar modal tetap menutupi sidebar.
       Tema warna/hover/active sidebar dipindah ke css/sidebar.css. */
    z-index: 1030 !important;
}

@media (min-width: 992px) {
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1000px;
    }
}

@media (min-width: 1400px) {
    .modal-xl {
        max-width: 1200px;
    }
}