body {
    background-color: #efefef;
    font-family: Quicksand;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
}

a {
    text-decoration: none;
}

/* mobile */
@media (max-width: 768px) {
    a {
        text-decoration: none;
    }

    .bawah {
        position: relative;
        bottom: 1em;
        height: 10px;
        margin-top: 6em;
    }
    .navbottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 90px;
        max-width: 600px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.539);
        /* background: linear-gradient(45deg, #6b0708, #EA2123); */
        border-radius: 25px 25px 0 0;
        padding: 1px;
        z-index: 999;
        text-align: center;
    }

    .navbottom-link {
        text-decoration: none;
        padding: 15px 10px;
        height: 55px;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
        font-size: 16px;
        display: inline-block;
        color: rgb(220, 20, 20);
        align-items: center;
        justify-content: center;
        margin: 0 20px;
    }

    .navbottom-link .red {
        background-color: rgb(220, 20, 20);
        position: relative;
        top: -2.5em;
        height: 60px;
        width: 60px;
        align-content: center;
        border-radius: 10px;
    }

    .navbottom-link .red i {
        position: relative;
        top: 1px;
        color: #fff;
    }

    .navbottom-link.navbottom-link.active .red i {
        position: relative;
        top: 1px;
        color: #fff;
    }

    .navbottom-link i {
        font-size: 25px;
        margin-bottom: -3px;
        color: rgb(0, 0, 0);
        transition: color 0.3s ease;
        position: relative;
        top: -20px;
    }

    .navbottom-link span {
        position: relative;
        top: -24px;
        color: rgb(0, 0, 0);
        font-size: 12px;
        font-weight: 900;
    }

    .navbottom-link.navbottom-link.active i {
        color: #ea2123;
    }

    .navbottom-link.active span {
        color: #ea2123;
        font-weight: 900;
        /* text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.824); */
    }

    .blur {
        background: rgba(255, 255, 255, 0.2);
        position: fixed;
        bottom: -30px;
        left: 0;
        right: 0;
        width: 100%;
        height: 90px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(10px);
        padding: 20px;
        z-index: 9;
    }

    .headerDIKPas {
        position: absolute;
        top: 0;
        /* background-color: rgb(220, 20, 20); */
        /* background-image: url(./img/tes.png); */
        /* background-size: cover;
        background-position: center; */
        height: 400px;
        width: 100%;
    }

    .headerDIKPas .dikimages img {
        width: 100%;
        height: 350px;
    }

    .DIKPasCOntent {
        position: relative;
        top: 5em;
    }

    .DIKPasCOntent img {
        position: relative;
        top: -3em;
        width: 100px;
    }

    .DIKPasCOntent h5 {
        position: relative;
        top: -1.5em;
        font-size: 24px;
        font-weight: 900;
    }

    .DIKPasCOntent p {
        position: relative;
        top: -3em;
    }

    .tombol {
        position: relative;
        top: 4em;
        text-align: center;
        width: 100%;
    }

    .btn-dikpas {
        width: 100%;
        background-color: rgb(220, 20, 20);
        color: #fff;
    }

    .btn-dikpas:hover {
        width: 100%;
        background-color: rgb(196, 17, 17);
        color: #fff;
    }

    .btn-dikpas-out {
        width: 100%;
        border: 1px solid rgb(220, 20, 20);
        /* background-color: rgb(220, 20, 20); */
        color: rgb(220, 20, 20);
    }

    .btn-dikpas-out:hover {
        width: 100%;
        background-color: rgb(220, 20, 20);
        color: #fff;
    }

    .login-lain {
        text-align: center;
        margin-top: 2em;
    }

    .but {
        margin-bottom: 2em;
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 1em;
    }

    .but .btn-google {
        background-color: rgb(255, 255, 255);
        border-radius: 30px;
    }

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

    .line {
        flex: 1;
        border: none;
        border-top: 1px solid #000000;
        margin: 0 10px;
        position: relative;
        top: -1em;
        /* Spacing around "atau" */
    }

    .separator p {
        margin: 0;
        color: #555;
        position: relative;
        top: -1.1em;
        font-size: 14px;
        /* Adjust color as needed */
    }

    /* Gaya untuk modal */
    .modal {
        display: none;
        /* Modal disembunyikan secara default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.062);
        /* Warna latar belakang semi-transparan */
        z-index: 1000;
    }

    .modal-content {
        position: fixed;
        bottom: -100%;
        /* Posisi awal modal di bawah layar */
        left: 0;
        width: 100%;
        height: 50%;
        background-color: rgb(255, 255, 255);
        /* Warna dengan transparansi */
        /* backdrop-filter: blur(10px); */
        /* Efek blur untuk glassmorphism */
        /* -webkit-backdrop-filter: blur(10px); */
        /* Dukungan untuk Safari */
        padding: 20px;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.301);
        /* Bayangan halus untuk efek mendalam */
        transition: bottom 0.4s ease;
        /* Animasi untuk perpindahan */
        border: 1px solid rgba(255, 255, 255, 0.3);
        /* Garis luar yang halus */
    }

    /* syarat dan ketentuan */
    .header {
        position: fixed;
        top: 0;
        background-color: rgb(255, 255, 255);
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center; /* untuk pusat horizontal */
        align-items: center; /* untuk pusat vertikal */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
        z-index: 999;
    }

    .header h5 {
        margin: 0;
        font-size: 16px;
    }

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

    .back-btn {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        font-size: 14px;
    }

    .contentSyarat {
        position: relative;
        top: 3em;
    }

    .ceklist {
        position: fixed;
        bottom: 0;
        height: 150px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.091);
    }

    .ceklist .cekbox {
        position: relative;
        top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: justify;
    }

    .cekbox input {
        position: relative;
        left: 1em;
        top: 10px;
        border: 1px solid rgb(220, 20, 20);
    }

    .lanjut {
        position: relative;
        top: 2em;
    }

    /* formulir */
    .formulir {
        position: relative;
        top: 3em;
    }

    .formulir h5 {
        font-size: 20px;
        font-weight: 900;
    }

    .formulir p {
        font-size: 14px;
        color: #555;
        text-align: justify;
    }

    .input-group-text {
        background-color: #f9fafb;
        border-right: 1px solid #ccc;
        color: #6b7280; /* abu seperti placeholder */
    }

    .form-control::placeholder {
        color: #9ca3af;
        font-weight: 500;
    }

    .tombol-formulir {
        position: relative;
        top: 1em;
        width: 94%;
        margin-bottom: 3em;
    }

    .barcode {
        position: relative;
        top: 3em;
        text-align: center;
    }

    .btn-lanjut {
        position: fixed;
        bottom: 2em;
        width: 94%;
    }

    /* verifikasi otp */
    .verifikasi {
        position: relative;
        top: 3em;
        text-align: justify;
    }

    .otp-container {
        background-color: #f9fafb;
        padding: 20px;
        border-radius: 20px;
        text-align: center;
        width: 100%;
        max-width: 400px;
        margin: auto;
    }

    .otp-inputs {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        margin-bottom: 15px;
    }

    .otp-inputs input {
        width: 50px;
        height: 50px;
        font-size: 24px;
        text-align: center;
        border-radius: 12px;
        border: 1px solid #cbd5e1;
        outline: none;
    }

    .otp-text {
        font-size: 16px;
        color: #374151;
    }

    #countdown {
        font-weight: bold;
        font-size: 18px;
    }

    /* berhasil */
    .bgBerhasil {
        background-color: #fff;
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
    }

    /* Wrapper flex tengah layar */
    .success-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f9fafb;
    }

    /* Container konten */
    .success-container {
        text-align: center;
        padding: 40px 20px;
    }

    /* Ikon centang bulat */
    .success-icon {
        display: inline-block;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        background-color: #22c55e; /* green-500 */
        color: white;
        font-size: 48px;
        position: relative;
        box-shadow: 0 0 0 10px #bbf7d0, 0 0 0 20px #dcfce7; /* efek luar */
    }

    /* Judul */
    .success-title {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #111827;
    }

    /* Subjudul */
    .success-subtext {
        font-size: 14px;
        color: #6b7280;
        margin-top: 10px;
        line-height: 1.5;
    }

    /* home */
    .bgHome {
        background-color: #fff;
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .bgHome .header {
        position: relative;
        top: 0;
        height: 150px;
        width: 100%;
        background-color: rgb(220, 20, 20);
        z-index: 99;
    }

    .bgHome .header .settings {
        position: relative;
        top: 0;
        float: right;
        background-color: rgba(255, 255, 255, 0.655);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        align-content: center;
    }

    .settings i {
        color: rgb(255, 255, 255);
        font-size: 20px;
    }

    .bgHome .imgDikpas {
        position: relative;
        top: 0.7em;
    }

    .imgDikpas img {
        width: 100px;
    }

    .bgHome .contentHome {
        position: absolute;
        bottom: 0;
        background-color: rgb(255, 255, 255);
        height: 85vh;
        width: 100%;
        z-index: 999;
        border-radius: 30px 30px 0 0;
    }

    .contentHome .identitas {
        position: relative;
        top: 1.5em;
    }

    .identitas small {
        font-size: 14px;
        color: #555;
    }

    .identitas h5 {
        font-size: 20px;
        font-weight: 900;
    }

    .identitas span {
        position: relative;
        top: -7px;
        font-size: 14px;
        color: #555;
        text-align: justify;
    }

    .ktp {
        position: relative;
        top: 2em;
        width: 100%;
    }

    .ktp .detailktp {
        height: 160px;
        border-radius: 10px;
        padding: 15px;
        font-family: sans-serif;
        background: url("img/ktp.png") no-repeat center center;
        background-size: cover;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.322);
    }

    .detailktp span,
    .detailktp i {
        position: relative;
        top: 4em;
    }

    /* segera hadir */
    .segeraHadir {
        position: relative;
        top: 4em;
        background-color: rgba(240, 241, 243, 0.539);
        padding: 25px 0 10px 0;
    }

    .segera {
        position: relative;
        top: 3.5em;
        background-color: rgb(255, 255, 255);
        height: 30vh;
        padding-top: 15px;
    }

    .segera h5 {
        font-size: 18px;
    }

    /* settings */
    .kartu {
        position: relative;
        top: 3em;
    }

    .kartu .card {
        height: 275px;
        border: none;
        background-color: #ea2123;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.005);
        text-align: center;
    }

    .kartu .foto img {
        width: 60px;
        height: 60px;
        border: 2px solid #fff;
        border-radius: 50px;
    }

    .kartu .upload {
        position: relative;
        top: -1em;
        left: 55%;
        transform: translate(-50%);
        width: 25px;
        height: 25px;
        background-color: #ffffff;
        align-content: center;
        border-radius: 50%;
        margin-bottom: -1.5em;
    }

    .kartu .upload i {
        position: relative;
        /* top: 5px; */
        font-size: 15px;
        color: #ea2123;
    }

    .kartu .text {
        position: relative;
        top: 1.5em;
    }

    .kartu .text h5 {
        color: #fff;
        font-size: 16px;
        font-weight: 900;
    }
    .kartu .text p {
        font-size: 12px;
        color: #fff;
    }

    .kartu .notif {
        position: relative;
        top: 1em;
        background-color: #efefef;
        height: 50px;
        border-radius: 10px;
    }

    .notif i {
        position: relative;
        top: 5px;
        font-size: 25px;
    }

    .notif p {
        position: relative;
        top: 5px;
        right: 20px;
        font-size: 14px;
        text-align: justify;
        margin-left: 0em;
        line-height: 1.3em;
    }

    /* keluar */
    .keluar {
        position: relative;
        top: 5em;
    }

    /* info umum */
    .info {
        position: relative;
        top: 4em;
        height: 31vh;
        width: 100%;
        background-color: #ffffff;
    }

    .info .atas {
        position: relative;
        top: 0;
        padding-top: 10px;
    }

    .info .atas h5 {
        font-size: 14px;
        text-align: left;
    }

    .info .dataInfo label {
        color: #555;
        font-size: 13px;
    }

    .info .dataInfo p {
        color: #555;
        font-size: 13px;
    }

    .info .dataInfo i {
        position: relative;
        top: 15px;
        float: right;
        right: 20px;
        color: #555;
        font-size: 13px;
    }

    /* pengaturan */
    .pengaturan {
        position: relative;
        top: 5em;
        background-color: #ffffff;
        height: 42vh;
        width: 100%;
    }

    .pengaturan .atas {
        position: relative;
        top: 0;
        padding-top: 10px;
    }

    .pengaturan .atas h5 {
        font-size: 14px;
        text-align: left;
    }

    .pengaturan .card-info {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
    }

    .pengaturan .dataInfo label {
        color: #555;
        font-size: 13px;
    }
    .pengaturan .dataInfo p {
        color: #555;
        font-size: 13px;
    }
    .pengaturan .dataInfo i {
        position: relative;
        top: 15px;
        right: 10px;
        float: right;
        color: #555;
        font-size: 13px;
    }

    /* merah */
    .card-info-merah {
        background-color: #f4c3c3;
        color: #000;
        border-radius: 10px;
        padding: 10px;
    }

    .versi {
        position: relative;
        top: 3em;
        background-color: transparent;
        height: 10vh;
    }

    .versi p {
        position: relative;
        top: 10px;
        text-align: center;
        color: #000;
    }

    /* sso login */
    .sso {
        position: fixed;
        top: 0;
        background-color: #ffffff;
        height: 60px;
        width: 100%;
    }

    .sso .images img {
        width: 60px;
        position: relative;
        top: 18px;
    }

    .ssoDetail {
        position: relative;
        top: 4em;
    }

    .ssoDetail .card {
        border: none;
        height: 65vh;
    }

    .ssoDetail h5 {
        font-size: 16px;
        font-weight: 900;
        text-align: center;
    }

    .ssoDetail p {
        font-size: 12px;
        text-align: center;
    }

    .ssoDetail .pilihan {
        position: relative;
        top: 0.5em;
        background-color: #ebebeb9f;
        height: 40px;
        border-radius: 10px;

        justify-content: center; /* Horizontal center */
        align-items: center; /* Vertical center */
    }

    .ssoDetail .text {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #eecaca;
        text-align: center;
        font-size: 12px;
        width: 45%;
        height: 30px;
        border-radius: 10px;
        color: #ea2123;
        font-weight: 900;
    }

    .ssoDetail .text p {
        position: relative;
        top: 5px;
        font-size: 12px;
        color: #ea2123;
    }

    .ssoDetail .formLogin {
        position: relative;
        top: 2em;
    }

    .formLogin label {
        font-size: 14px;
    }

    .formLogin input {
        font-size: 14px;
        border-radius: 10px;
        padding: 10px;
        border: 1px solid #ccc;
    }

    .formLogin input::placeholder {
        color: #ccc;
        font-size: 14px;
    }

    .formLogin small {
        font-size: 10px;
        color: #555;
    }

    .google-button {
        position: relative;
        top: 5px;
        background-color: transparent;
        color: #000;
        border: 1px solid #dbdbdb;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        width: 100%;
        height: 40px;
        text-align: center;
    }

    .google-button span {
        position: relative;
        left: 0;
        transform: translateX(-50%);
        text-align: center;
    }

    .google-button img {
        position: absolute;
        top: 10px;
        left: 16px;
        width: 20px;
        height: 20px;
        /* background-color: #ffffff;
        border-radius: 10px; */
    }

    .dataMasuk {
        background-color: #ffffff;
        height: 50vh;
    }
    .masuk {
        position: relative;
        top: 3em;
    }

    .masuk .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .masuk .row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .masuk .kiri img,
    .masuk .kanan img {
        width: 50px;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .masuk i.bi-copy {
        font-size: 12px;
        color: #555;
        cursor: pointer;
        transition: color 0.3s;
    }

    .masuk i.bi-copy:hover {
        color: #000;
    }

    .masukText {
        position: relative;
        top: 5em;
    }

    .masukText h4 {
        font-size: 18px;
        font-weight: 900;
        text-align: center;
    }

    .masukText p {
        font-size: 14px;
        text-align: center;
        color: #555;
    }

    .masukText button {
        text-align: center;
        width: 100%;
    }

    .masukText .btn-batal {
        text-align: center;
        width: 100%;
    }

    /* pin */
    .pin-container {
        display: flex;
        justify-content: center;
        position: relative;
        top: 4em;
    }

    .pin-card {
        background: #fff;
        padding: 24px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 360px;
    }

    .pin-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .pin-subtext {
        text-align: center;
        font-size: 14px;
        color: #555;
        margin-bottom: 20px;
    }

    .pin-inputs {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 16px;
    }

    .pin-input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .pin-toggle {
        text-align: center;
        margin-bottom: 16px;
    }

    .pin-toggle button {
        background: none;
        border: none;
        color: #ea2123;
        font-size: 14px;
        cursor: pointer;
    }

    /* face */

    .instruksi {
        position: relative;
        top: 4em;
        text-align: center;
        z-index: 999;
        color: #fff;
    }

    .errorkamera {
        display: none;
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
    }

    .status {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
    }

    /* page Login */
    .halamanLogin {
        position: relative;
        top: 0;
        /* height: 100vh; */
    }

    .halamanLogin hr {
        border: 1px solid #ccc;
    }

    .halamanLogin .card {
        position: relative;
        top: 3em;
        border: none;
    }

    .halamanLogin .card h5 {
        font-size: 15px;
        /* font-weight: 900; */
        text-align: center;
    }

    .loginLainnya .btn-putih {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .loginLainnya .btn-putih img {
        margin-bottom: -5px;
    }

    .loginLainnya .btn-putih small {
        position: relative;
        top: -5px;
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
    }

    .btn-putih {
        background-color: #fff;
        /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
    }

    .btn-putih:hover {
        background-color: #fff;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.205);
    }

    /* biometric */
    .loginBiometric {
        position: relative;
        top: 4em;
        text-align: center;
    }
}