/* custom */
:root {
    /* white */
    --bs-white: #f8f9fa;

    /* dark */
    --bs-dark: #000000;

    /* blue (brand color) */
    --bs-primary: #0077cc; /* Biru elegan */
    --bs-darked-primary: #005fa3; /* Biru lebih gelap untuk efek hover */
    --bs-primary-rgb: 0, 119, 204;
    --bs-link-color: var(--bs-primary);

    /* green */
    --bs-success: #28a745;
    --bs-darked-success: #218838;
    --bs-success-rgb: 40, 167, 69;

    /* danger */
    --bs-danger: #dc3545;
    --bs-darked-danger: #c82333;
    --bs-danger-rgb: 220, 53, 69;

    /* warning */
    --bs-warning: #ffcc00; /* Kuning terang */
    --bs-darked-warning: #e6b800;
    --bs-warning-rgb: 255, 204, 0;
}


/* Typography */
* {
}

h1,
h2 {
    font-weight: 700;
    color: var(--bs-primary);
}

h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--bs-primary);
}

p {
    font-weight: 400;
    line-height: 1.6;
}

/* dark */
.text-dark {
    color: var(--bs-dark) !important;
}

/* primary */
/* btn */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
    outline: none !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--bs-darked-primary, #b68c20) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    color: white !important;
}

/* text */
.text-primary,
html.dark .text-primary {
    color: var(--bs-primary) !important;
}

html.dark
    a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(
        .block
    ):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(
        .nav-main-link
    ):not(.list-group-item-action):not(.close):not(.fc-event):not(
        .text-success-light
    ):not(.text-danger-light):not(.text-warning-light):not(.text-info-light) {
    color: var(--bs-primary);
}

html.dark
    a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(
        .block
    ):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(
        .nav-main-link
    ):not(.list-group-item-action):not(.close):not(.fc-event):not(
        .text-success-light
    ):not(.text-danger-light):not(.text-warning-light):not(
        .text-info-light
    ):hover {
    color: var(--bs-darked-primary);
}

/* bg */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* form */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* select 2 */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus,
.select2-search__field:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    outline: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.select2-dropdown {
    background-color: white !important;
    border: 2px solid var(--bs-primary) !important;
}

.select2-results__option--highlighted {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* progress bar */
.progress-bar {
    background-color: var(--bs-primary) !important;
}

/* navbar */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--bs-primary);
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--bs-primary);
}

/* dropdown */
.dropdown-menu {
    border-color: var(--bs-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* page link */
.page-link {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.page-link:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.active > .page-link,
.page-link.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* badge */
.badge-primary {
    background-color: var(--bs-primary) !important;
}

/* alert */
.alert-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* table */
.table-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* card */
.card.border-primary {
    border-color: var(--bs-primary) !important;
}

.card-header.bg-primary {
    background-color: var(--bs-primary) !important;
    color: black;
}

/* tag a */
a {
    color: var(--bs-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--bs-darked-primary);
}

/* nav tabs */
.nav-tabs-alt .nav-item.show .nav-link,
.nav-tabs-alt .nav-link {
    color: black;
}

.nav-tabs-alt .nav-item.show .nav-link,
.nav-tabs-alt .nav-link:hover,
.nav-tabs-alt .nav-item.show .nav-link,
.nav-tabs-alt .nav-link.active {
    color: var(--bs-primary);
    box-shadow: inset 0 -3px var(--bs-primary);
}

/* other */
.btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* success */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    box-shadow: none !important;
    outline: none !important;
    color: white !important;
}

.btn-success:hover {
    background-color: var(--bs-darked-success, #b68c20) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
    color: white !important;
}

/* text */
.text-success {
    color: var(--bs-success) !important;
}

/* bg */
.bg-success {
    background-color: var(--bs-success) !important;
}

/* warning */
.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    box-shadow: none !important;
    outline: none !important;
    color: white !important;
}

.btn-warning:hover {
    background-color: var(--bs-darked-warning, #b68c20) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25) !important;
    color: white !important;
}

/* text */
.text-warning {
    color: var(--bs-warning) !important;
}

/* bg */
.bg-warning {
    background-color: var(--bs-warning) !important;
}

/* danger */
/* btn */
.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    box-shadow: none !important;
    outline: none !important;
    color: white !important;
}

.btn-danger:hover {
    background-color: var(--bs-darked-danger, #b68c20) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
    color: white !important;
}

/* text */
.text-danger {
    color: var(--bs-danger) !important;
}

/* bg */
.bg-danger {
    background-color: var(--bs-danger) !important;
}

/* form is invalid */
.flatpickr-input.is-invalid:not(:focus) {
    border-color: var(--bs-danger) !important;
}

.form-control.is-invalid {
    border-color: var(--bs-danger);
}

.invalid-feedback {
    color: var(--bs-danger) !important;
}

.no-cursor {
    cursor: default !important;
    user-select: none;
}

.invalid-feedback-custom {
    width: 100%;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--bs-danger);
}

.text-justify {
    text-align: justify;
}

.bg-header-dark {
    background-color: var(--bs-primary) !important;
}

.btn-upload-photo {
    width: 100%;
    border: 2px dashed var(--bs-primary);
    background-color: transparent;
    color: var(--bs-primary);
    font-weight: bold;
    padding: 32px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.btn-upload-photo.is-invalid-custom {
    border-color: var(--bs-danger) !important;
    color: var(--bs-danger);
}

.btn-upload-photo:hover {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.btn-upload-photo.is-invalid-custom:hover {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
}

.btn-upload-photo i {
    margin-right: 8px;
}

#photo-preview-child {
    position: relative;
    width: 100px;
}

#photo-preview-child #remove-photo {
    position: absolute;
    top: 0;
    right: -32px;
}

.custom-swal-width {
    width: 700px !important;
    max-width: 90% !important;
}

#photo-show {
    background-color: var(--bs-primary);
    display: inline-block;
    border-radius: 10px;
}

/* .slick-slide {
    height: inherit !important;
} */