@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('../../../../cdn-uicons.flaticon.com/uicons-brands/css/uicons-brands.css');
@import url('../../../../cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('../../../../cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('../../../../cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('../../../../cdn-uicons.flaticon.com/uicons-regular-straight/css/uicons-regular-straight.css');

@import url(color.css);
@import url(default.css);
@import url(component.css);
@import url(responsive.css);
@import url(custom.css);

.percent-bar {
    background-color: #4caf50; /* Hijau */
    height: 30px;
    transition: width 0.5s; /* Animasi transisi */
    margin: 0px 0;
}
.button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #ea9105; /* Biru */
    color: white;
    border: none;
    cursor: pointer;
}
.button:disabled {
    background-color: #ccc; /* Warna saat dinonaktifkan */
    cursor: not-allowed;
}
.active {
    background-color: #4caf50; /* Hijau saat aktif */
}
.jamBg {
    background-color: grey; /* Warna default */
    padding: 10px;
    margin: 5px;
    transition: background-color 0.3s; /* Transisi perubahan warna */
}
.jamBg.active {
    background-color: green; /* Warna saat aktif */
}

.red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; }

.floating-button {
    position: fixed; /* Mengatur posisi tombol agar bergerak sesuai scroll */
    top: 20px; /* Jarak dari atas */
    left: 20px; /* Jarak dari sisi kiri */
    background-color: #007bff; /* Warna latar belakang tombol */
    border: none; /* Menghilangkan border */
    border-radius: 50%; /* Membuat tombol bundar */
    width: 60px; /* Lebar tombol */
    height: 60px; /* Tinggi tombol */
    display: flex; /* Mengatur tampilan flex */
    justify-content: center; /* Pusatkan isi */
    align-items: center; /* Pusatkan isi secara vertikal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    cursor: pointer; /* Menunjukkan bahwa ini adalah tombol */
    transition: background-color 0.3s; /* Efek transisi warna */
    transition: transform 0.3s ease; /* Ganti left/top dengan transform */
    z-index: 100; /* Pastikan tombol selalu di atas */
}

.floating-button:hover {
    background-color: #0056b3; /* Warna saat hover */
}

.popup-box {
    display: none; /* Sembunyikan kotak awalnya */
    position: fixed; /* Agar tidak mempengaruhi layout lainnya */
    top: 80px; /* Jarak dari atas */
    left: 20px; /* Jarak dari sisi kiri */
    background-color: rgba(0, 0, 0, 0.8); /* Warna latar belakang hitam dengan 50% transparansi */
    border: 1px solid #ccc; /* Border kotak */
    border-radius: 5px; /* Sudut membulat */
    padding: 15px; /* Padding kotak */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    z-index: 101; /* Pastikan kotak di atas elemen lain */
    text-align: center;
}

.activate-button {
    display: block; /* Tampilkan tombol aktifkan */
    background-color: #28a745; /* Warna latar belakang tombol aktifkan */
    color: white; /* Warna teks */
    border: none; /* Menghilangkan border */
    border-radius: 5px; /* Sudut membulat */
    padding: 10px 98px; /* Padding tombol */
    cursor: pointer; /* Menunjukkan bahwa ini adalah tombol */
    margin-top: 10px; /* Jarak atas tombol aktifkan */
}

.floating-button img {
    width: 100px; /* Sesuaikan ukuran gambar */
    height: 100px; /* Sesuaikan ukuran gambar */
}

#countdown {
font-size: 20px;
color: #ffffff;
text-align: center;
}
.expiration-countdown {
    display: inline-flex;
    flex-wrap: nowrap;
    font-size: 10px
}

.expiration-countdown [data-section] {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding-bottom: 5px;
    background-color: #5f334d;
    color: #fff;
    min-width: 60px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .3)
}

.expiration-countdown [data-section]+[data-section] {
    margin-left: 10px
}

.expiration-countdown [data-value] {
    font-size: 20px;
    background-color: #f6f6f6;
    color: #5f334d;
    margin-bottom: 5px;
    padding: 5px 0
}

.modal {
background-color: rgba(0, 0, 0, 0.8);
justify-content:center;
align-items:center;
}

.modal-content {
position:relative;
width:80%;
max-width:800px;
margin:auto;
}

.modal-content {
flex-basis:100%;
pointer-events:initial;
background:transparent!important;
border:0;
border-radius:10px;
}

iframe {
width:100%;
height:450px;
border:1px solid #ccc;
}

.close {
position:absolute;
top:-30px;
right:15px;
color:#fff!important;
font-size:30px!important;
cursor:pointer;
}