﻿.height-body-quiz {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 67.8vh;
    overflow: auto;
}

.u-check.disabled {
    pointer-events: none;
    opacity: 0.7;
}

    .u-check.disabled .badge-live {
        opacity: 0.7;
    }

.bg-image-none {
    background-image: none;
}


.line-clamp-1-white {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
}


.g-flex-centered {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Menengahkan konten secara vertikal */
    align-items: center;
    min-height: 100vh; /* Gunakan min-height agar tetap responsif */
}

.g-color-white p {
    color: #fff !important;
}

.custom.u-check-icon-font i {
    color: transparent;
}

.u-check input[type="checkbox"]:checked + .u-check-icon-font i,
.u-check input[type="checkbox"]:checked + * .u-check-icon-font i,
.u-check input[type="radio"]:checked + .u-check-icon-font i,
.u-check input[type="radio"]:checked + * .u-check-icon-font i {
    color: #fff;
}

.u-check input[type="checkbox"]:checked + .u-check-icon-checkbox-v6 i,
.u-check input[type="checkbox"]:checked + .u-check-icon-radio-v6 i,
.u-check input[type="checkbox"]:checked + * .u-check-icon-checkbox-v6 i,
.u-check input[type="checkbox"]:checked + * .u-check-icon-radio-v6 i,
.u-check input[type="radio"]:checked + .u-check-icon-checkbox-v6 i,
.u-check input[type="radio"]:checked + .u-check-icon-radio-v6 i,
.u-check input[type="radio"]:checked + * .u-check-icon-checkbox-v6 i,
.u-check input[type="radio"]:checked + * .u-check-icon-radio-v6 i {
    color: #6281c8;
    background-color: #fff;
    border-color: #fff;
}

.u-check-icon-checkbox-v6 i, .u-check-icon-radio-v6 i {
    border: solid 1px #ffffff;
}

.txt-shadow p {
    text-shadow: rgba(0, 0, 0, 0.25) 0px 0.125rem 0px, rgba(0, 0, 0, 0.1) 0px 0px 0.125rem;
}

.box-shadow-quiz {
    box-shadow: rgba(0, 0, 0, 0.2) 0px -6px 0px 0px inset;
}

/*Limit Animasi*/

@keyframes scaleBack {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.98); /* Mundur */
    }
}

@keyframes scaleForward {
    0% {
        transform: scale(0.98); /* Dari mundur */
    }

    100% {
        transform: scale(1); /* Kembali ke normal */
    }
}

.form-group.checked {
    animation: scaleBack 0.3s ease-in-out forwards;
}

.form-group.unchecked {
    animation: scaleForward 0.3s ease-in-out forwards;
}

/*Limit Animasi*/

.form-group:hover .desc-question {
    color: #ffffff;
}

.desc-question p:last-of-type {
    margin-bottom: 0 !important;
}

.g-color-gray-dark-v2 p {
    color: #333 !important;
}

/*Warna red (1)*/
.form-group.g-bg-red-custom:hover {
    background-color: #d31531 !important; /* Warna merah lebih gelap */
}

.g-bg-red-custom {
    background-color: rgb(226, 27, 60) !important;
}

/*Warna blue (2)*/
.form-group.g-bg-blue-custom:hover {
    background-color: #1165c4 !important;
}

.g-bg-blue-custom {
    background-color: rgb(19, 104, 206) !important;
}

/*Warna yellow (3)*/
.form-group.g-bg-yellow-custom:hover {
    background-color: #ce9400 !important;
}

.g-bg-yellow-custom {
    background-color: rgb(216, 158, 0) !important;
}

/*Warna green (4)*/
.form-group.g-bg-green-custom:hover {
    background-color: #217709 !important;
}

.g-bg-green-custom {
    background-color: rgb(38, 137, 12) !important;
}

/*Warna teal (5)*/
.form-group.g-bg-teal-custom:hover {
    background-color: #078e8e !important;
}

.g-bg-teal-custom {
    background-color: #099696 !important;
}

/*Warna purple (6)*/
.form-group.g-bg-purple-custom:hover {
    background-color: #7e48b5 !important;
}

.g-bg-purple-custom {
    background-color: #864CBF !important;
}

/*Warna brown (7)*/
.form-group.g-bg-brown-custom:hover {
    background-color: #704d42 !important;
}

.g-bg-brown-custom {
    background-color: #795548 !important;
}

/*Warna orange (8)*/
.form-group.g-bg-orange-custom:hover {
    background-color: #db4e02 !important;
}

.g-bg-orange-custom {
    background-color: #E65100 !important;
}

/*Warna gray (9)*/
.form-group.g-bg-gray-custom:hover {
    background-color: #353535 !important;
}

.g-bg-gray-custom {
    background-color: #424242 !important;
}

/*Warna pink (10)*/
.form-group.g-bg-pink-custom:hover {
    background-color: #ce1a59 !important;
}

.g-bg-pink-custom {
    background-color: #D81B60 !important;
}

.form-group-disabled {
    position: relative; /* Supaya pseudo-element mengikuti ukuran elemen ini */
    overflow: hidden;
}

    .form-group-disabled::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Lapisan gelap dengan transparansi */
        border-radius: inherit; /* Ikuti border aslinya */
        pointer-events: none; /* Supaya tidak mengganggu klik */
    }

.form-group-disabled {
    opacity: 0.5; /* Kurangi opacity */
}

.btn-next-top-position {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10; /* Supaya tidak tertutup elemen lain */
}

.btn-top-left-position {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10; /* Agar tidak tertutup elemen lain */
}

@media (max-width: 768px) {
    .height-scroll-quiz-0 {
        max-height: none;
    }

    .min-height-30vh-mobile {
        min-height: 30vh !important;
    }
}

@media (min-width: 0px) {
  
}

/*--md*/
@media (min-width: 768px){
   
}

/*--lg*/
@media (min-width: 992px) {
   
}

.blink_me {
    animation: blinker 1s linear infinite;
}

.txt-orange-custom {
    color: #f65d6d !important;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.g-bg-gray-dark-custom {
    background-color: #5d5b5b !important;
}