.btn-file-upload{position:relative;color:#ffff!important}.btn-file-upload input{position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%;z-index:2;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";opacity:0;background-color:initial;color:transparent;cursor:pointer}.btn-custom-tools{position:relative;color:#fff;border:0;margin:0;border-radius:3px;line-height:24px;text-transform:uppercase;font-size:12px;font-weight:500;padding:10px 15px;background-color:initial;transition:.3s background-color 0s}.btn-table-delete{display:none}.btn-custom-tools:hover,.btn-custom-tools:focus{color:#fff}.card-data{position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column}.spinner{border:8px solid rgba(0,0,0,.1);border-left-color:#9c27b0;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto;display:block}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner-bounce{margin:0 auto;width:70px;text-align:center}.spinner-bounce>div{width:18px;height:18px;background-color:#9c27b0;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner-bounce .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner-bounce .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.col-xxl,.col-xxl-auto,.col-xxl-1,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-10,.col-xxl-11,.col-xxl-12{position:relative;width:100%;padding-right:15px;padding-left:15px}@media(min-width:1400px){.col-xxl{flex-basis:0;flex-grow:1;max-width:100%}.col-xxl-auto{flex:none;width:auto;max-width:100%}.col-xxl-1{flex:0 0 8.333333%;max-width:8.333333%}.col-xxl-2{flex:0 0 16.666667%;max-width:16.666667%}.col-xxl-3{flex:0 0 25%;max-width:25%}.col-xxl-4{flex:0 0 33.333333%;max-width:33.333333%}.col-xxl-5{flex:0 0 41.666667%;max-width:41.666667%}.col-xxl-6{flex:0 0 50%;max-width:50%}.col-xxl-7{flex:0 0 58.333333%;max-width:58.333333%}.col-xxl-8{flex:0 0 66.666667%;max-width:66.666667%}.col-xxl-9{flex:0 0 75%;max-width:75%}.col-xxl-10{flex:0 0 83.333333%;max-width:83.333333%}.col-xxl-11{flex:0 0 91.666667%;max-width:91.666667%}.col-xxl-12{flex:0 0 100%;max-width:100%}}
/* ===== TEMA LOGIN SISFO ===== */

.card-header.card-header-primary.mb-48 {
    background: linear-gradient(135deg, #063B73 0%, #0876B9 55%, #00B8E6 100%) !important;
    color: #ffffff !important;
}

.card-header.card-header-primary.mb-48 .card-title,
.card-header.card-header-primary.mb-48 .card-category {
    color: #ffffff !important;
}

.card-header.card-header-primary.mb-48 + .card-body .btn.btn-primary {
    background: linear-gradient(135deg, #0876B9 0%, #00B8E6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 184, 230, 0.30) !important;
}

.card-header.card-header-primary.mb-48 + .card-body .btn.btn-primary:hover,
.card-header.card-header-primary.mb-48 + .card-body .btn.btn-primary:focus,
.card-header.card-header-primary.mb-48 + .card-body .btn.btn-primary:active {
    background: linear-gradient(135deg, #063B73 0%, #0876B9 100%) !important;
    color: #ffffff !important;
}


/* ===== TEMA TOMBOL KELAS ABSENSI SISWA ===== */

button[id^="kelas-"].btn-primary {
    background: linear-gradient(135deg, #0876B9 0%, #00B8E6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 184, 230, 0.25) !important;
}

button[id^="kelas-"].btn-primary:hover,
button[id^="kelas-"].btn-primary:focus {
    background: linear-gradient(135deg, #063B73 0%, #0876B9 100%) !important;
    color: #ffffff !important;
}

/* Kelas yang sedang dipilih */
button[id^="kelas-"].btn-success {
    background: linear-gradient(135deg, #063B73 0%, #00B8E6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 184, 230, 0.40) !important;
}

button[id^="kelas-"].btn-success:hover,
button[id^="kelas-"].btn-success:focus {
    background: linear-gradient(135deg, #052D59 0%, #0876B9 100%) !important;
    color: #ffffff !important;
}


/* =====================================================
   TEMA HALAMAN SCAN MASUK / KELUAR
   ===================================================== */

/* Header Absen Masuk / Absen Pulang */
.card-header.card-header-primary {
    background: linear-gradient(
        135deg,
        #063B73 0%,
        #0876B9 55%,
        #00B8E6 100%
    ) !important;
    color: #ffffff !important;
}

.card-header.card-header-primary .card-title,
.card-header.card-header-primary .card-category {
    color: #ffffff !important;
}

/* Tombol Absen masuk / Absen pulang */
.card-header.card-header-primary .btn-success {
    background: linear-gradient(
        135deg,
        #0876B9 0%,
        #00B8E6 100%
    ) !important;
    border: none !important;
    color: #ffffff !important;
}

.card-header.card-header-primary .btn-warning {
    background: linear-gradient(
        135deg,
        #063B73 0%,
        #0876B9 100%
    ) !important;
    border: none !important;
    color: #ffffff !important;
}

.card-header.card-header-primary .btn-success:hover,
.card-header.card-header-primary .btn-success:focus,
.card-header.card-header-primary .btn-warning:hover,
.card-header.card-header-primary .btn-warning:focus {
    background: linear-gradient(
        135deg,
        #052D59 0%,
        #0876B9 100%
    ) !important;
    color: #ffffff !important;
}

/* Kotak RFID */
#rfidInput {
    border: 2px solid #0876B9 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 8px rgba(0, 184, 230, 0.20) !important;
}

#rfidInput:focus {
    border-color: #00B8E6 !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 184, 230, 0.20) !important;
}

/* Status RFID */
#statusBadge {
    background: linear-gradient(
        135deg,
        #063B73,
        #0876B9
    ) !important;
    color: #ffffff !important;
}

/* Warna tulisan informasi scan */
#usage-card .text-primary {
    color: #0876B9 !important;
}

/* Tombol Dashboard */
.navaction .btn-primary {
    background: linear-gradient(
        135deg,
        #0876B9,
        #00B8E6
    ) !important;
    border: none !important;
    color: #ffffff !important;
}


/* ==========================================
   BACKGROUND SISFO RESPONSIVE
   ========================================== */

html,
body {
    min-height: 100%;
}

body {
    background-image: url('../img/background-sisfo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Laptop / desktop */
@media (min-width: 992px) {
    body {
        background-position: center center;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
    body {
        background-position: 58% center;
        background-attachment: scroll;
    }
}

/* HP */
@media (max-width: 575px) {
    body {
        background-position: 65% center;
        background-size: cover;
        background-attachment: scroll;
    }
}