body {
    font-family: "Nunito", sans-serif;
}

.geetest_captcha,
.geetest_popup_wrap {
    color: white;
    font-weight: bolder;
    position: relative;
    font-family: "Nunito", sans-serif !important;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body[data-sidebar=dark] .vertical-menu {
    background: #9D0F2B !important;
    transition: width 0.7s;
}

.sidebar-enable.vertical-collpsed .navbar-brand-box {
    background: white;
    padding-left: 1.5rem !important;
}

body[data-sidebar=dark] .navbar-brand-box {
    background: white;
    padding-left: 10px;
    transition: width 0.7s;
}

body[data-sidebar=dark].vertical-collpsed {
    min-height: 100vh;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .5rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .5rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -6px !important;
    margin-top: -4px !important;
}

/* table */

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #1f656d1c !important;
}


/* end table */

.page-item.active .page-link {
    background-color: #9D0F2B !important;
    border-color: #9D0F2B !important;
}

.btn-leave-impersonate {
    animation: blink 0.5s ease-in-out infinite alternate;
}

@keyframes blink {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.5;
    }
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-primary,
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #00ade6 !important;
    border-color: #00ade6 !important;
}

.bg-danger {
    color: #fff;
    background-color: #DC143C !important;
}

.btn-danger {
    color: #fff;
    background-color: #DC143C !important;
    border-color: #DC143C !important;
}

.btn-outline-danger {
    border-color: #DC143C !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #9D0F2B;
}

.bg1 {
    background-color: #9D0F2B !important;
}

.bg2 {
    /* background-color: #F1FECE !important; */
    background: linear-gradient(-180deg, #F1FECE, #dbe98a);
}

.bg3 {
    /* background-color: #F1FECE !important; */
    background: linear-gradient(-180deg, #EDF6F9, #A5C4D4);
}

.bg4 {
    background-color: #1E656D !important;
}

.bg5 {
    background-color: #9D0F2B !important;
}

.bg6 {
    background-color: #006db1 !important;
}


.bg-primary {
    background-color: #00ade6 !important;
}

.bg-warning {
    background-color: #FDD835 !important;
}

.text1 {
    color: white !important;
}

.text2 {
    color: #1e2a78 !important;
}

.border1 {
    border: 1px solid #006db1 !important;
}

.border2 {
    border: 1px solid #1f656d !important;
}

.border-primary {
    border: 1px solid #00ade6 !important;
}

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

.text-danger {
    color: #DC143C !important;
}

.text-primary {
    color: #00ade6 !important;
}

.glow {
    box-shadow: 0 0px 10px #F1FECE !important;
}

.glow2 {
    box-shadow: 0 0px 10px #01293C !important;
}

.glow3 {
    box-shadow: 0 0px 10px #9D0F2B !important;
}

.glow4 {
    box-shadow: 0 0px 10px #4E0715 !important;
}

.text-underline {
    text-decoration: underline !important;
}

.container-fluid .card:not(.card-roles),
.container .card:not(.card-roles),
.border-custom {
    border: 1px solid #9D0F2B !important;
}

/* placeholder miring */

::-webkit-input-placeholder {
    font-style: italic !important;
}

:-moz-placeholder {
    font-style: italic !important;
}

::-moz-placeholder {
    font-style: italic !important;
}

:-ms-input-placeholder {
    font-style: italic !important;
}


/* end placeholder */

.bg_image1 {
    /* background-image: url(../images/pattern.png) !important; */
    background-size: contain !important;
    background-repeat: repeat-y !important;
}

@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,500&display=swap');

.font1 {
    font-family: 'Oleo Script Swash Caps', cursive;
}

.font2 {
    font-family: 'Roboto Flex', sans-serif;
}

body[data-sidebar-size="small"] #sidebar-menu ul li.menu-title {
    background-color: #5B0819;
    color: white;
}

body[data-sidebar=dark] #sidebar-menu ul li a::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

body[data-sidebar=dark] #sidebar-menu ul li a {
    color: white;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: white;
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover {
    color: #5B0819;
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    background-color: #DFB11A;
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
    color: #5B0819;
}

body[data-sidebar=dark] .mm-active>a {
    background-color: #FDE4E9;
    color: #5B0819 !important;
    font-weight: bolder;
}

body[data-sidebar=dark] .mm-active>a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    background-color: #DFB11A;
}

body[data-sidebar=dark] .mm-active>a i {
    color: #5B0819 !important;
    font-weight: bolder;
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    background-color: #FDE4E9;
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a span {
    color: #5B0819 !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
    color: #5B0819 !important;
}

.mm-active>a i {
    color: #5B0819 !important;
    font-weight: bolder;
}

body[data-sidebar-size=small] .main-content {
    min-height: 100vh;
}

.auth-full-bg .bg-overlay {
    background: url('../../img/login-banner.png');
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center -65%;
    opacity: 1 !important;
    /* background-color: white !important; */
}

#form-login button[type=button]:disabled {
    cursor: not-allowed;
}

.img-pattern-left {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 1;
    mix-blend-mode: multiply;
    top: 0;
    left: 0;
    pointer-events: none;
}

.img-pattern-right {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 1;
    mix-blend-mode: multiply;
    top: 0;
    left: 0;
    padding-left: 1.5rem;
    pointer-events: none;
}

.login-coat {
    background-color: rgb(91, 8, 25, 0.7);
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.roles-coat {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.auth-full-page-content {
    background-color: white;
    box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.5);
}

.auth-full-bg,
.account-pages {
    /* background-color: #006db1; */
    background-color: #9D0F2B;
    min-height: 100vh;
}

.auth-full-bg2 {
    background-color: #033547;
}

.btn-primary {
    color: #fff;
    background-color: #00ade6 !important;
    border-color: #00ade6 !important;
}

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

.bg_custom {
    background: linear-gradient(to bottom, #ffffff 75%, #00ade6 100%) !important;
}

.logo-login {
    width: 180px !important;
}

.login-board {
    background-color: #ffffff;
    border: 1px solid #fff !important;
}

.font-size-25 {
    font-size: 25px;
}

.hvr-grow {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.hvr-fade {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.hvr-fade:hover,
.hvr-fade:focus,
.hvr-fade:active {
    background-color: #2098D1;
    color: white;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

/* Pastikan tabel kalender memiliki layout yang konsisten */
#kalender {
    table-layout: fixed;
}

#kalender td {
    width: 14.28%;
    /* 100% / 7 hari */
    height: 120px;
    vertical-align: top;
    padding: 2px !important;
}

/* Styling untuk events */
.events-wrapper {
    max-height: 85px;
    overflow: hidden;
}

.calendar-event {
    color: white;
    border-radius: 3px;
    padding: 1px 3px;
    margin-bottom: 1px;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 100%;
    overflow: hidden;
}

/* 
.event-text {
    display: flex;
    align-items: center;
    gap: 2px;
}

.event-time {
    font-weight: bold;
    white-space: nowrap;
    font-size: 0.55rem;
}

.event-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6rem;
} */

.more-events {
    font-size: 0.55rem;
    color: #6c757d;
    text-align: center;
    padding: 1px;
}

.holiday-text {
    position: absolute;
    bottom: 40%;
    left: 0;
    right: 0;
    text-align: center;
}

.holiday-text small {
    font-size: 0.6rem;
}

/* Pastikan konten tidak melebihi container */
.tanggal-cell {
    word-wrap: break-word;
    overflow: hidden;
}

#kalender .text-hari-libur {
    position: absolute;
    right: 0;
    left: 0;
}

#kalender .tanggal.waves-effect {
    display: table-cell !important;
    cursor: pointer;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

#kalender .tanggal:hover,
#kalender .tanggal:focus,
#kalender .tanggal:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.lembar-tugas-tanggal {
    font-size: 21px;
}

.lembar-tugas-waktu {
    font-size: 18px;
}

.lembar-tugas-title {
    font-size: 24px;
}

.lembar-tugas-info {
    font-size: 20px;
}

.lembar-tugas-check input[type="checkbox"] {
    transform: scale(1.4);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    height: 16px !important;
    line-height: 12px !important;
}

.geetest_captcha.geetest_customTheme .geetest_status_bar,
.geetest_captcha.geetest_customTheme .geetest_box_btn::before,
.geetest_captcha.geetest_customTheme .geetest_box_btn::after,
.geetest_captcha.geetest_customTheme .geetest_gradient_bar,
.geetest_captcha.geetest_customTheme .geetest_bind_status_bar,
.geetest_popup_wrap.geetest_customTheme .geetest_status_bar,
.geetest_popup_wrap.geetest_customTheme .geetest_box_btn::before,
.geetest_popup_wrap.geetest_customTheme .geetest_box_btn::after,
.geetest_popup_wrap.geetest_customTheme .geetest_gradient_bar,
.geetest_popup_wrap.geetest_customTheme .geetest_bind_status_bar {
    background-color: #DFB11A !important;
}

.geetest_captcha.geetest_dark .geetest_holder .geetest_content,
.geetest_popup_wrap.geetest_dark .geetest_holder .geetest_content {
    background-image: linear-gradient(180deg, #9D0F2B 0%, #9D0F2B 100%) !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9D0F2B), to(#9D0F2B)) !important;
    background-image: -o-linear-gradient(top, #9D0F2B 0, #9D0F2B 100%);
    border-color: #9D0F2B !important;
}

.geetest_captcha.geetest_dark .geetest_holder .geetest_content .geetest_tip_container .geetest_logo,
.geetest_popup_wrap.geetest_dark .geetest_holder .geetest_content .geetest_tip_container .geetest_logo {
    filter: none !important;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
    .navbar-brand-box {
        display: none;
    }

    #ganti-bulan,
    #ganti-tahun {
        font-size: 14px !important;
    }

    .lembar-tugas-check input[type="checkbox"] {
        transform: scale(1.2);
    }

    .lembar-tugas-tanggal {
        font-size: 17px;
    }

    .lembar-tugas-waktu {
        font-size: 14px;
    }

    .lembar-tugas-title {
        font-size: 15px;
    }

    .lembar-tugas-info {
        font-size: 11px;
    }

    .img-pattern-right {
        padding-left: 0;
    }

    .login-coat {
        padding-left: 0;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 401px) and (max-width: 767px) {
    .lembar-tugas-tanggal {
        font-size: 18px;
    }

    .lembar-tugas-waktu {
        font-size: 15px;
    }

    .lembar-tugas-title {
        font-size: 17px;
    }

    .lembar-tugas-info {
        font-size: 13px;
    }

    .img-pattern-right {
        padding-left: 0;
    }

    .login-coat {
        padding-left: 0;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}