:root {
    --color-success: green;
    --color-primary: #0077ff;
    --color-danger: red;
    --color-warning: orange;
    --color-secondary: lightgrey;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-color: #e4e4e4 #f4f4f4;
}

*:hover {
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    display: block;
}

*::-webkit-scrollbar-track {
    background: #e7e7e7;
}

*::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: 10px;
}

body .loginpage {
    position: relative;
    z-index: 1;
}

body .loginpage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.1;
}

[readonly] {
    pointer-events: none;
    background-color: #e4e4e4;
}

.content {
    display: grid;
    grid-template-columns: 250px 1fr;
    /* Tambahkan jarak (gap) antar kolom */
    gap: 20px;
    /* Tambahkan padding atau max-width sesuai kebutuhan */
    /* max-width: 1200px; */
}

aside {
    /* Membuat sidebar tetap di tempatnya saat halaman di-scroll */
    position: fixed;
    /* Atur di mana posisi fixed-nya */
    top: 20px;
    /* Jarak dari atas (sesuaikan dengan padding container) */
    left: auto;
    /* Dikelola oleh margin/padding global */

    /* Lebar harus didefinisikan secara eksplisit karena position: fixed */
    width: 250px;
    /* Sesuaikan tinggi agar mengisi viewport */
    height: calc(100vh - 40px);
    /* 100% tinggi viewport dikurangi top dan bottom padding/margin */

    /* Styling lainnya */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* padding: 15px; */
    background-color: #f8f8f8;
    overflow-y: auto;
    /* Tambahkan scroll jika konten sidebar lebih panjang dari viewport */

    ol {
        list-style: none;
        padding: 0;
        margin: 0;
        --link-text-color: #333;

        li {
            padding: 10px;
            color: var(--link-text-color);

            >a {
                display: flex;
                align-items: center;
                gap: 5px;

                >i {
                    width: 25px;
                }
            }

            a,
            a:link,
            a:visited,
            a:active,
            a:hover {
                text-decoration: none;
                color: var(--link-text-color);
            }
        }

        li:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }
    }
}

/* Styling untuk Main Content */
main {
    padding: 15px;
    background-color: #ffffff;
    /* Pastikan main content berada di kolom kedua */
    grid-column: 2 / 3;
}

.login {
    display: flex;
    grid-template-columns: 1fr 1fr;
    /* Tambahkan jarak (gap) antar kolom */
    gap: 20px;

    .login-area {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 40px);
        background-color: #f8f8f8;
    }

    .download-area {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100dvh;

        >div {
            width: 100%;
            text-align: center;
        }
    }
}

#loading.on {
    display: flex !important;
}

#loading {
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    inset: 0;
    z-index: 2001;
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(44, 60, 46, 0.6);
    display: none;
}

#loading .loader {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    pointer-events: auto;

    i {
        font-size: 4em;
    }
}

.img-square {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.img-scale {
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: var(--scale);
}

.fs-6em {
    font-size: 0.6em;
}

.fs-7em {
    font-size: 0.7em;
}

.fs-8em {
    font-size: 0.8em;
}

.fs-9em {
    font-size: 0.9em;
}

.fs-10em {
    font-size: 1em;
}

.fs-12em {
    font-size: 1.2em;
}

.fs-14em {
    font-size: 1.4em;
}

.fs-15em {
    font-size: 1.5em;
}

.fs-16em {
    font-size: 1.6em;
}

.fs-18em {
    font-size: 1.8em;
}

.fs-20em {
    font-size: 2em;
}

.fs-25em {
    font-size: 2.5em;
}

.fs-30em {
    font-size: 3em;
}

.fs-35em {
    font-size: 3.5em;
}

.fs-40em {
    font-size: 4em;
}

.fs-45em {
    font-size: 4.5em;
}

.fs-50em {
    font-size: 5em;
}

.cursor-pointer {
    cursor: pointer;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.modal {
    pointer-events: auto;
}

[goto-link], [goto-url], [goto-page], [logout] {
    cursor: pointer;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.status.on {
    color: green;
}

.status.off {
    color: red;
    animation: blinker 1s linear infinite;
}

@media screen and (max-width: 768px) {
    .login {
        .login-area {
            display: none;
        }

        .download-area {
            width: 100%;
            height: calc(100vh-40px);
        }
    }
}