body {
    font-family: "Nunito", serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    background: rgb(34, 193, 195);
    background: linear-gradient(20deg, rgba(34, 193, 195, 1) 0%, rgba(47, 193, 186, 1) 0%, rgba(253, 187, 45, 1) 70%);
}

.main-container {
    margin-top: 40px;
}

.required-field:after {
    content: " *";
    color: red;
}

.sub-judul {
    color: #4CBB17;
    font-weight: bold;
}

/* For devices with a maximum width of 768px (tablets and smaller) */
@media (max-width: 768px) {
    .main-layout {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        border-radius: 5px;
        padding: 20px 20px;
    }

    /* .parent-layout {
        padding-left: 0px;
        padding-right: 0px;
    } */

    /* #preloader {
        padding-top: 30px;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 9999;
        justify-content: center;
        align-items: center;
    } */
}

/* For devices wider than 1200px (desktops) */
@media (min-width: 1200px) {
    .main-layout {
        width: 100%;
        border-radius: 5px;
        padding: 20px 20px;
        height: 100vh;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body {
        font-size: 18px;
    }

    /* #preloader {
        padding-top: 30px;
        position: fixed;
        top: 0;
        left: 30%;
        right: 30%;
        width: 40%;
        height: 100%;
        background: white;
        z-index: 9999;
        justify-content: center;
        align-items: center;
    } */
}

.left-30 {
    width: 30%;
}

.left-50 {
    width: 50%;
}

.right-50 {
    width: 50%;
}

.right-70 {
    width: 70%;
}

/* .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.image-preloader {
    width: 200px;
} */

/* SKELETON LOADER */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Common Skeleton Style */
.skeleton {
    background: #e0e0e0;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite linear;
}

/* Skeleton Text */
.skeleton-text {
    height: 20px;
    width: 100%;
}

/* Skeleton Image */
.skeleton-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
}

/* Animation */
@keyframes skeleton-loading {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 200px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
}
/* END SKELETON LOADER */