@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('https://cdn-uicons.flaticon.com/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://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: #008cba; /* Biru */
            color: white;
            border: none;
            cursor: pointer;
        }
        .button:disabled {
            background-color: #ccc; /* Warna saat dinonaktifkan */
            cursor: not-allowed;
        }
        .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: absolute; /* 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 */
            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: absolute; /* Agar tidak mempengaruhi layout lainnya */
            top: 80px; /* Jarak dari atas */
            left: 20px; /* Jarak dari sisi kiri */
            background-color: white; /* Warna latar belakang kotak */
            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 */
        }

        .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 15px; /* Padding tombol */
            cursor: pointer; /* Menunjukkan bahwa ini adalah tombol */
            margin-top: 10px; /* Jarak atas tombol aktifkan */
        }



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