@import url('https://fonts.cdnfonts.com/css/inter');

body::before {
    transition: 0.3s;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FCFCFD;
}

/* Scrool Theme */
::-webkit-scrollbar-track {
    background-color: #F9FAFB;
}

::-webkit-scrollbar {
    width: 8px;
    background-color: #F9FAFB;
}

::-webkit-scrollbar-thumb {
    background-color: #B4E4E8;
    /* border-radius: 8px; */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #D0D5DD;
}

/* Customize Class Component */
.information-content {
    margin-top: 1rem;
    color: #344054;
}

/* .dataTables_paginate closest row */
.dataTables_wrapper .row:has(.dataTables_paginate),
.dataTables_wrapper .row:has(.dataTables_filter) {
    display: none;
}

.select2-dropdown {
    border: none;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
}

.select2-container {
    z-index: 1050;
}

.select2-container--open {
    z-index: 1055;
}

.select2-container .select2-selection--single {
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0.75rem;
}

.select2-container--default .select2-selection--single {
    border-color: #D0D5DD;
    border-radius: 8px;
}

.select2-results__option {
    padding-left: 10px;
    padding-right: 10px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected.select2-results__option--selectable {
    background-color: #F9FAFB;
    color: #101828;
    position: relative;
}

.select2-container--default .select2-results__option--selected.select2-results__option--selectable::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #0DA8B6;
    position: absolute;
    right: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

.image-no-stretch {
    object-fit: cover;
    object-position: center;
}

.row-cols-8>* {
    flex: 0 0 auto;
    width: 12.5%;
}

.camera-frame video {
    border-radius: 8px;
}

td.on-hover-parent:hover {
    background-color: #F9FAFB !important;
}

td.on-hover-parent:hover .buttons,
th.on-hover-parent:hover .buttons {
    display: block;
}

td.on-hover-parent .buttons,
th.on-hover-parent .buttons {
    display: none;
}

.border-none {
    border: none;
}

.border-primary {
    border: 1px solid #0DA8B6 !important;
}

.border-light-primary {
    border: 1px solid #DBF2F4 !important;
}

.shadow-border-light-primary,
.shadow-border-primary,
.shadow-border-light-grey {
    position: relative !important;
}

.shadow-border-light-primary::before,
.shadow-border-primary::before,
.shadow-border-light-grey::before {
    position: absolute;
    content: "";
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 5px solid #F6FEFF;
    border-radius: 50%;
}

.shadow-border-primary::before {
    border-color: #E7F6F8 !important;
}

.shadow-border-light-grey::before {
    border-color: #F9FAFB !important;
}

.image-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: #E7F6F8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0A7E89;
    font-size: 24px;
    object-fit: cover;
    object-position: center;
}

.profile-image {
    position: relative;
}

.profile-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 13px;
    height: 13px;
    background-color: #12B76A;
    border: 2px solid #fff;
    border-radius: 50%;
}

h5 {
    color: #101828;
}

.overflow-x-auto {
    overflow-x: auto;
}

.w-60px {
    width: 60px !important;
}

.w-50px {
    width: 50px !important;
}

.w-40px {
    width: 40px !important;
}

.h-60px {
    height: 60px !important;
}

.h-50px {
    height: 50px !important;
}

.h-40px {
    height: 40px !important;
}

.min-w-500 {
    min-width: 500px !important;
}

.max-w-800 {
    max-width: 800px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.radius-12 {
    border-radius: 12px;
}

.bg-grey {
    background-color: #F9FAFB !important;
}

.bg-dark-grey {
    background-color: #F2F4F7;
}

.bg-light-primary {
    background-color: #F6FEFF !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700 !important;
}

.fs-36px {
    font-size: 36px !important;
}

.fs-30px {
    font-size: 30px !important;
}

.fs-20px {
    font-size: 20px !important;
}

.fs-18px {
    font-size: 18px !important;
}

.fs-14px {
    font-size: 14px !important;
}

.fs-12px {
    font-size: 12px !important;
}

.fs-10px {
    font-size: 10px;
}

.fs-8px {
    font-size: 8px !important;
}

/* Icon */
.digiss-icon>* {
    width: 20px;
    height: 20px;
}

.digiss-icon.digiss-icon-1-5x {
    transform: scale(1.5);
}

.sidebar-footer-info h2,
.sidebar-footer-info p {
    max-width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

.ql-container.ql-snow {
    border: 1px solid #D0D5DD;
    border-radius: 8px;
}

.ql-toolbar.ql-snow {
    border: none;
}

/* General Component */

/* Nav */
.nav-tabs.nav-underline .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #667085;
    padding-left: 8px;
    padding-right: 8px;
    border-top: none;
    border-left: none;
    border-right: none;
}

.nav-tabs.nav-underline .nav-link.active {
    color: #0DA8B6;
}

.nav.nav-pills {
    flex-wrap: nowrap;
    text-wrap: nowrap;
    overflow: auto;
}

.nav.nav-pills .nav-link {
    color: #344054;
    border: 1px solid #D0D5DD;
    margin-right: 8px;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 18px;
}

.nav.nav-pills .nav-link.active {
    background-color: #0DA8B6;
    border-color: #0DA8B6;
    color: #fff;
}

/* Dropdown */
.dropdown-menu.show {
    top: 1rem !important;
    z-index: 1052;
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-body,
.dropdown-menu .dropdown-footer {
    padding: 12px 16px;
    min-width: 350px;
}

.dropdown-menu .dropdown-header {
    border-bottom: 1px solid #EAECF0;
}

.dropdown-menu .dropdown-footer {
    border-top: 1px solid #EAECF0;
}

.dropdown-menu .dropdown-header h6 {
    color: #101828;
    font-size: 18px;
    font-weight: 500;
}

/* Modal */
.modal-header {
    border-color: #EAECF0;
    padding: 20px 24px;
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    border-color: #EAECF0;
}

.modal-header h1 {
    font-size: 18px !important;
    font-weight: 600;
}


/* Carousel */
.carousel-inner img {
    border-radius: 8px;
}

.carousel-control-prev {
    left: -3rem;
    opacity: 1;
}

.carousel-control-prev .carousel-control-prev-icon {
    background-color: #fff;
    border-radius: 50%;
    background-image: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5713 18L9.57129 12L15.5713 6" stroke="%230DA8B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 20px 19px;
}

.carousel-control-next {
    right: -3rem;
    opacity: 1;
}

.carousel-control-next .carousel-control-next-icon {
    background-color: #fff;
    border-radius: 50%;
    background-image: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.42871 6L15.4287 12L9.42871 18" stroke="%230DA8B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 20px 19px;
}

.carousel-indicators {
    width: 75px;
    margin-left: auto;
    margin-right: auto;
    background-color: #0DA8B6;
    border-radius: 12px;
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 6px;
    opacity: 1;
    background-color: #0C97A4;
}

.carousel-indicators .active {
    background-color: #fff;
}

/* Typography */
.text-primary {
    color: #0DA8B6 !important;
}

.text-success {
    color: #08656D !important;
}

.text-success-light {
    color: #12B76A !important;
}

.text-grey {
    color: #667085 !important;
}

.text-dark {
    color: #344054 !important;
}

/* Card */
.box.box-blue {
    background-color: #0BA5EC !important;
    color: #fff !important;
    border: 1px solid #0BA5EC !important;
}

.box.box-success {
    border: 1px solid #12B76A;
    background-color: #ECFDF3;
    color: #12B76A;
}

.box.box-success .form-check-label,
.box.box-success .form-check-input:checked {
    color: #12B76A !important;
}

.box.box-danger {
    border: 1px solid #F04438;
    background-color: #FEF3F2;
    color: #F04438;
}

.box.box-danger .form-check-label,
.box.box-danger .form-check-input:checked {
    color: #F04438 !important;
}

.box.box-secondary {
    border: 1px solid #D0D5DD !important;
    background-color: #FCFCFD !important;
}

.box.box-hover-primary:hover,
.box.box-hover-primary.active {
    background-color: #E7F6F8 !important;
    border: 1px solid #0A8692 !important;
    color: #0A8692 !important;
    cursor: pointer;
}

.box.box-hover-primary:hover .form-check-label,
.box.box-hover-primary.active .form-check-label {
    color: #0A8692 !important;
}

.card {
    border-radius: 8px;
    margin-bottom: 24px;
    /* box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1); */
    border-color: #EAECF0;
}

.card .card-header {
    padding: 20px 24px;
    border-color: #EAECF0;
}

.card .card-header h4.card-title {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}

.card .card-body {
    padding: 24px;
    border-radius: 8px;
}

.card .card-footer {
    padding: 12px 24px;
    border-color: #EAECF0;
}

.card .card-footer span {
    color: #344054;
    font-size: 14px;
}

/* Table */
.table {
    margin-bottom: 0;
}

.table thead th {
    font-size: 12px;
    font-weight: 500;
    padding: 12px 24px;
}

.table tbody td {
    font-size: 14px;
    padding: 24px 24px;
    color: #101828;
    font-weight: 500;
    align-content: center;
}

.table.table-primary thead tr th {
    background-color: #F9FAFB;
    color: #667085;
    border-color: #EAECF0;
}

.table.table-primary tbody tr td {
    background-color: #fff;
    border-color: #EAECF0;
}

.table.table-primary tbody tr:last-child td {
    border-bottom: none;
}

/* Badge */
.badge {
    border-radius: 16px;
    padding: 4px 8px;
    font-weight: 500;
}

.badge.badge-danger-solid {
    background-color: #F04438;
}

.badge.badge-success-solid {
    background-color: #12B76A !important;
}

.badge.badge-danger {
    background-color: #FEF3F2;
    color: #B42318;
}

.badge.badge-success-solid {
    background-color: #0A8692;
}

.badge.badge-success {
    background-color: #ECFDF3;
    color: #027A48;
}

.badge.badge-warning {
    background-color: #FFFAEB;
    color: #B54708;
}

.badge.badge-info {
    background-color: #F6FEFF;
    color: #0C97A4 !important;
}

.badge.badge-secondary {
    background-color: #F2F4F7;
    color: #344054 !important;
}

.badge.badge-purple {
    background-color: #EEF4FF;
    color: #3538CD;
}

.badge.badge-blue {
    background-color: #EFF8FF;
    color: #175CD3;
}

.badge.badge-cyan {
    color: #0086C9;
    background-color: #F0F9FF;
}

/* Anchor */
a {
    text-decoration: none;
    color: #0DA8B6;
    font-size: 14px;
}

/* Form Check */
.form-check .form-check-label {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

.form-check .form-check-input:not([role="switch"], [type="radio"]) {
    box-shadow: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.form-check .form-check-input:checked {
    background-color: #0DA8B6;
    border-color: #0DA8B6;
}

.form-check .form-check-input.custom-input:checked {
    background-color: #E7F6F8;
    border-color: #0DA8B6;
    position: relative;
}

/* change checkmark color */
.form-check .form-check-input.custom-input:checked::after {
    content: "\2713";
    color: #0C97A4;
    position: absolute;
    left: 15%;
    width: 15px;
    height: 15px;
    background-color: #E7F6F8;
    border-radius: 50%;
}

/* Form Control */
.form-label {
    font-size: 14px;
    font-weight: 500;
}

.form-control,
.input-group-text {
    border-color: #D0D5DD;
    border-radius: 8px;
}

.form-control.error {
    border: 1px solid #F04438;
}

.input-group-text.is-invalid {
    border-color: #F04438;
}

.form-control[readonly],
.form-control.readonly {
    background-color: #F9FAFB !important;
}

.input-group-text.readonly {
    background-color: #e9ecef !important;
}

.form-control label {
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}

/* Buttons */
.btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}

.btn i {
    margin-right: 5px;
}

.btn-icon {
    padding: 10px 14px;
}

.btn.btn-right-icon i {
    margin-right: 0;
    margin-left: 5px;
}

.btn.btn-icon i {
    margin-right: 0;
}

.btn.btn-primary,
.btn.btn-primary:focus {
    background-color: #0DA8B6;
    border-color: #0DA8B6;
}

.btn.btn-outline-primary {
    border-color: #0DA8B6;
    color: #0DA8B6;
}

.btn.btn-outline-primary:hover {
    background-color: #0DA8B6;
    color: #fff;
}

.btn.btn-outline-default {
    border: 1px solid #D0D5DD !important;
    color: #344054 !important;
    background-color: #fff !important;
}

/* Input Group */

.input-group .input-group-text {
    background-color: unset;
    padding: 10px 0 10px 14px;
    color: #667085;
    background-color: #fff;
}

.input-group .form-control {
    padding: 10px 14px;
}

.input-group.icon-left .form-control {
    border-left: none;
}

.input-group.icon-right .form-control {
    border-right: none;
}

.input-group.icon-right:has(.input-group-text.d-none.is-invalid) {
    border-right: 1px solid #F04438;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group.icon-right:has(.input-group-text.d-none.is-invalid) .form-control {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group.icon-right .input-group-text {
    padding-right: 14px;
}

.form-control:focus,
.input-group .form-control:focus {
    box-shadow: 0 0 0 4px #DBF2F4;
}

/* Alert */

/* Alert Dialog */
body.alert-dialog.show {
    overflow: hidden;
}

body.alert-dialog.show::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1052;
    transition: 0.3s;
}

.date-with-data span {
    background-color: #0DA8B6;
    color: #fff !important;
}

.file-name {
    max-width: 150px;
    /* Atur lebar maksimum sesuai kebutuhan */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.alert {
    background-color: #fff;
    border: 1px solid #EAECF0;
}

.alert.alert-dialog {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    min-width: 500px;
    top: -999px;
    position: absolute;
    border-radius: 12px;
    transition: top 0.3s;
    left: 50%;
    transform: translateX(-50%);
    border: none;
}

.alert.alert-dialog.show {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    transition: top 0.3s;
}

.alert.alert-dialog .alert-icon {
    margin-right: 28px;
}

.alert.alert-dialog h4.alert-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert.alert-dialog p.alert-description {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
}

.alert.alert-success {
    background-color: #12B76A;
    color: #fff;
}

.alert.alert-danger {
    background-color: #ea454d;
    color: #fff;
}

.alert.alert-light-danger {
    background-color: #FFFBFA;
    border: 1px solid #D92D20;
    color: #F04438;
}

.alert.alert-warning {
    background-color: #e08f16;
    color: #fff;
}

.alert-light-warning {
    background-color: #FFFCF5;
    border: 1px solid #B54708;
    color: #B54708;
}

.alert.alert-info {
    background-color: #F6FEFF;
    border-color: #B4E4E8;
}

/* Login Component */
.login .container .login-form {
    min-height: 100vh;
}

.login h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.login h2 {
    font-size: 36px;
    font-weight: 600;
    color: #101828;
}

.login .card {
    border-color: #EAECF0;
    border-radius: 8px;
}

.login .card:hover {
    border-color: #0DA8B6;
    background-color: rgba(13, 168, 182, 0.1);
}

.login .card:hover .card-body h3,
.login .card:hover .card-body p {
    color: #0DA8B6;
}

.login .card .card-body {
    padding: 24px;
    min-height: 120px;
}

.login .card .card-body h3 {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

.login .card .card-body p {
    margin-bottom: 0;
}

.login p {
    color: #667085;
    font-size: 14px;
}

.login .login-banner {
    text-align: center;
    background-color: #0DA8B6;
}

.login .login-banner img {
    height: 100vh;
}

/* Dashboard Component */
.sidebar {
    background-color: #0DA8B6;
    max-width: 300px;
    min-width: 300px;
    padding: 32px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    overflow: auto;
}

.sidebar.sidebar-santri {
    background-color: #fff;
    border-right: 1px solid #EAECF0;
}

.sidebar .sidebar-header {
    margin-bottom: 24px;
}

.sidebar .sidebar-header h1,
.fixed-top-navigation-bar h1 {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.fixed-top-navigation-bar h1 {
    color: #000 !important;
}

.sidebar.sidebar-santri .sidebar-header h1 {
    color: #101828;
}

.sidebar .sidebar-content {
    padding-bottom: 24px;
}

.sidebar .sidebar-content .sidebar-item {
    padding: 12px 0;
    border-radius: 8px;
    position: relative;
    margin-bottom: 6px;
    transition: 0.1s;
    cursor: pointer;
}

.sidebar .sidebar-content .sidebar-item.active,
.sidebar .sidebar-content .sidebar-item:hover {
    background-color: #0C97A4;
    transition: 0.1s;
}

.sidebar.sidebar-santri .sidebar-content .sidebar-item.active,
.sidebar.sidebar-santri .sidebar-content .sidebar-item:hover {
    background-color: #E7F6F8;
}

.sidebar .sidebar-content .sidebar-item a {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding-left: 16px;
    padding-right: 16px;
    display: block;
}

.sidebar.sidebar-santri .sidebar-content .sidebar-item a {
    color: #1D2939;
}

.sidebar.sidebar-santri .sidebar-content .sidebar-item.active a,
.sidebar.sidebar-santri .sidebar-content .sidebar-item a i {
    color: #0DA8B6;
}

.sidebar .sidebar-content .sidebar-item a i {
    margin-right: 8px;
}

.sidebar .sidebar-content .sidebar-item a.sidebar-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1rem;
}

.sidebar .sidebar-content .sidebar-item a.sidebar-toggle::after {
    transition: 0.3s;
    transform: rotate(180deg);
}

.sidebar .sidebar-content .sidebar-item a.sidebar-toggle.collapsed::after {
    transition: 0.3s;
    transform: rotate(0deg);
}

.sidebar .sidebar-content .sidebar-item ul {
    list-style: none;
    padding: 0;
    position: relative;
    margin-top: 14px;
    margin-bottom: 0;
}

.sidebar .sidebar-content .sidebar-item ul li {
    padding: 12px 0;
    padding-left: 2rem;
    transition: 0.1s;
}

.sidebar .sidebar-content .sidebar-item ul li.active,
.sidebar .sidebar-content .sidebar-item ul li:hover {
    background-color: #0A8692;
    transition: 0.1s;
}

.sidebar .sidebar-footer {
    color: #fff;
    border-top: 1px solid #EAECF0;
    padding-top: 24px;
}

.sidebar.sidebar-santri .sidebar-footer h2 {
    color: #101828;
}

.sidebar .sidebar-footer h2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .sidebar-footer p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.sidebar-santri .sidebar-footer p {
    color: #667085;
}

.sidebar .sidebar-footer a {
    color: #fff;
    font-size: 18px;
}

.sidebar.sidebar-santri .sidebar-footer a {
    color: #667085;
}

/* Content Layouting */
.main-wrapper {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.main-wrapper .content {
    padding: 32px;
    width: calc(100% - 300px);
    position: relative;
    left: 300px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.header-content {
    font-size: 14px;
    margin-bottom: 28px;
}

.header-content h3 {
    font-size: 30px;
    font-weight: 500;
}

.header-content p {
    color: #667085;
}

/* Date Range Picker */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #0DA8B6;
    color: #fff;
}

/* Calendar */
.calendar-container .prev-button,
.calendar-container .next-button {
    color: #667085;
}

.calendar-container span.label-container.month-container {
    color: #667085;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
}

.calendar-container .day {
    font-size: 14px !important;
    font-weight: 500;
    color: #344054 !important;
}

.calendar-container .day span {
    color: #344054;
    font-weight: 400;
}

.calendar-container .day:not(.date-with-data) span:hover {
    background-color: #E7F6F8;
    color: #0A8692;
}

.calendar-container .week.start-on-monday .day:last-child span {
    color: #F04438 !important;
}

.calendar-container .buttons-container {
    margin-bottom: 24px;
}

.calendar-container .buttons-container,
.calendar-container .weeks-wrapper.header {
    border: none;
}

.calendar-container .day.disabled span {
    color: #667085;
}

.calendar-container .day.today span::after {
    border-bottom-color: #0DA8B6;
}

.text-answer-div {
    display: flex;
    align-items: center;
}

.text-answer-div p {
    margin: 0;
}

/* Sweet Alert2 */
.swal2-title {
    font-size: 18px;
    color: #101828;
    font-weight: 600;
}

.swal2-html-container {
    font-size: 14px !important;
    color: #667085;
    padding-top: 0;
    margin-top: 0;
}

.swal2-input-label {
    width: 100%;
    justify-content: start;
    padding-left: 2.2rem;
    color: #344054;
    font-weight: 500;
    font-size: 14px;
}

.swal2-input {
    margin-top: 6px;
}

div:where(.swal2-container) {
    z-index: 9999 !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #D92D20 !important;
    border-color: #D92D20 !important;
    width: 45%;
}

.swal2-cancel {
    width: 45%;
}

.swal2-confirm {
    width: 45%;
    margin: 2px;
}

.swal2-actions {
    width: 100%;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    direction: rtl;
}

/* Dropzone */
.dropzone {
    border: 1px solid #EAECF0;
    border-radius: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 400;
}


/* DATA TABLES */
table.dataTable {
    margin-bottom: 0 !important;
}

.card-image {
    max-width: 100%;
    /* Membuat gambar tidak melebihi lebar card */
    height: auto;
    /* Menjaga proporsi gambar */
    object-fit: cover;
    /* Memastikan gambar menyesuaikan tanpa distorsi */
}

.fixed-top-navigation-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #EAECF0;
    z-index: 1;
    padding: 11px 16px;
}

.fixed-bottom-navigation-bar {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 1;
    right: 0;
    left: 0;
    background-color: #fff;
}

.fixed-bottom-navigation-bar a {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
}

.fixed-bottom-navigation-bar a.active {
    background-color: #E7F6F8;
}

.fixed-bottom-navigation-bar a span {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixed-bottom-navigation-bar a i {
    font-size: 20px;
    margin-bottom: 8px;
}

@media screen and (max-width: 1200px) {
    .activity-dashboard .row-cols-8>* {
        width: 16.66%;
    }
}

@media screen and (max-width: 1024px) {
    .activity-dashboard .row-cols-8>* {
        width: 25%;
    }

    .header-content .d-flex div:has(h3) {
        margin-right: 40px;
    }

    .header-content .dropdown button:has(i.digiss-icon.bell) {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .sidebar {
        max-width: 125px;
        min-width: 125px;
    }

    .sidebar .sidebar-header .d-flex {
        flex-direction: column;
    }

    .sidebar .sidebar-header h1 {
        display: none;
    }

    .sidebar .sidebar-header div.me-2:has(img) {
        margin-right: 0 !important;
    }

    .sidebar .sidebar-header img {
        width: 60px;
    }

    .sidebar .sidebar-content .sidebar-item a {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 12px;
    }

    .sidebar .sidebar-content .sidebar-item a i {
        margin: 0;
        font-size: 20px;
        margin-bottom: 8px;
    }

    .sidebar-header .sidebar-footer .d-flex:has(img) {
        flex-direction: column;
    }

    .sidebar .sidebar-footer div:has(h2),
    .sidebar .sidebar-footer div:has(a) {
        display: none;
    }

    .main-wrapper .content {
        width: calc(100% - 125px);
        left: 125px;
    }

    .header-content h3 {
        font-size: 24px;
    }

    .activity-dashboard .row-cols-8>* {
        width: 20%;
    }

    .activity-dashboard img {
        width: 60px;
    }

    .activity-dashboard .card-body {
        padding-top: 10px;
    }

    .activity-dashboard .col .text-center.mb-4 {
        margin-bottom: 2rem !important;
    }

    .sidebar .sidebar-content .sidebar-item a.sidebar-toggle::after {
        top: 1rem;
        right: 0.5rem;
    }
}

@media screen and (max-width: 600px) {
    .activity-dashboard .row-cols-8>* {
        width: 33.33%;
    }

    .flex-column-600 {
        flex-direction: column;
    }

    .align-items-start-600 {
        align-items: start !important;
    }

    .mb-5px-600 {
        margin-bottom: 5px;
    }

    .mb-10px-600 {
        margin-bottom: 10px !important;
    }

    .mb-15px-600 {
        margin-bottom: 15px;
    }

    .mb-20px-600 {
        margin-bottom: 20px !important;
    }

    .w-100p-600 {
        width: 100%;
    }

    .h-150px-600 {
        height: 150px;
    }

    .card .card-footer .d-flex {
        flex-direction: column;
    }

    .card .card-footer .d-flex span {
        margin-bottom: 1rem;
        display: inline-block;
    }
}

@media screen and (max-width: 576px) {
    .header-content .dropdown button:has(i.digiss-icon.bell) span {
        display: none;
    }

    .header-content .dropdown button i.digiss-icon.bell {
        margin-right: 0;
    }

    .sidebar {
        display: none;
    }

    .main-wrapper .content {
        width: 100%;
        left: 0;
        padding-bottom: 75px;
        padding-top: 100px;
    }

    .flex-column-576 {
        flex-direction: column;
    }

    .mb-5px-576 {
        margin-bottom: 5px;
    }

    .mb-10px-576 {
        margin-bottom: 10px;
    }

    .mb-15px-576 {
        margin-bottom: 15px;
    }

    .mb-20px-576 {
        margin-bottom: 20px;
    }

    .fixed-bottom-navigation-bar,
    .fixed-top-navigation-bar {
        display: block;
    }

    .input-group.responsive .form-control {
        display: none;
    }

    .input-group.responsive .input-group-text {
        padding-right: 1rem;
        border-radius: 10px !important;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .btn-sm-icon {
        padding: 10px 14px;
    }

    .btn-sm-icon i {
        margin-right: 0;
    }

    .w-100-576 {
        width: 100% !important;
    }

    .m-w-unset-576 {
        min-width: unset !important;
    }
}