/* noto-naskh-arabic-regular - latin */
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  src: url('font/ZXuke1cDvLCKLDcimxB44_lu.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: Arabic;
    src: url("admin/mystyle/font/arabic.otf")
         format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "QuranFont";
    src: url("admin/mystyle/font/Amiri Regular.ttf")
    format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "ArabicLocal";
  font-style: normal;
  src: url('font/arabic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --warna_dasar: rgba(255, 220, 99, 1);
    --warna_tombol_lingkar_dasar: rgba(156, 127, 22, 1);
    --warna_tombol_lingkar_over: rgba(122, 62, 0, 1);
	--bg-modalheader: #3E2723;
	--bg-modalheader_1: #3E2723;
	--bg-modalheader_2: #cb4401;
	--warna_footer:  rgba(122, 62, 0, 1);
	
	--color_grd_1: #000000;
    --color_grd_2: rgba(199, 113, 24, 1);
    --color_grd_3: rgba(255, 220, 99, 1);
    --color_grd_4: rgba(255, 220, 99, 0);
}


html, body{
	background:#F7F3E9;
	color:#333;
    width: 100%;
    height: 100%;
	overflow: hidden;
}

/*=====================================================
FONT FAMILY
=====================================================*/
.arabic-text {
font-family:
        "QuranFont",
        "Arabic",
        "ArabicLocal",
        "Amiri",
        "Traditional Arabic",
        serif;
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: center;
    font-size: 48px;
    line-height: 2.2;
    font-weight: normal;
    letter-spacing: 0;
    word-spacing: 5px;
    padding: 0 20px;
    color: #111;
}
.font-inter{font-family:'Inter',sans-serif;}
.font-roboto{font-family:'Roboto',sans-serif;}
.font-open{font-family:'Open Sans',sans-serif;}
.font-poppins{font-family:'Poppins',sans-serif;}
.font-nunito{font-family:'Nunito',sans-serif;}
.font-montserrat{font-family:'Montserrat',sans-serif;}
.font-lato{font-family:'Lato',sans-serif;}
.font-merriweather{font-family:'Merriweather',serif;}
.font-source{font-family:'Source Sans 3',sans-serif;}
.font-oswald{font-family:'Oswald',sans-serif;}

/*=====================================================
FONT STYLE
=====================================================*/

.bold{font-weight:700;}
.semi-bold{font-weight:600;}
.normal{font-weight:400;}
.light{font-weight:300;}
.italic{font-style:italic;}
.bold-italic{
    font-weight:700;
    font-style:italic;
}

/*=====================================================
COLOR
=====================================================*/

.text-blue{color:#0F4C81;}
.text-green{color:#2E7D32;}
.text-red{color:#B71C1C;}
.text-purple{color:#5E35B1;}
.text-brown{color:#6D4C41;}
.text-yellow{color:#FF0;}
.text-putih{color:#ffffff;}
/*=====================================================
FONT SIZE
=====================================================*/
.fs-tglheader{font-size:22px;font-weight:700;}
.fs-jamdigital{font-size:32px;font-weight:700;}
.fs-waktu{font-size:32px;font-weight:700;}
.fs-waktu-arab
{
	font-size:32px;
	font-weight:700;
    font-family: 'ArabicLocal', 'Noto Naskh Arabic', serif;

    direction: rtl;

    unicode-bidi: isolate;

    text-align: center;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.6;

    white-space: nowrap;
	
}


.fs-namasjid{font-size:52px;font-weight:1200;}		
.fs-jadwal{font-size:52px;font-weight:800;}

.fs-runingtext{
	font-size:42px;
	font-weight:600;
	color: #FF0;
}
.fs-page-title{font-size:32px;font-weight:700;}
.fs-theme-title{font-size:26px;font-weight:700;}
.fs-sub-title{font-size:21px;font-weight:600;}
.fs-description{font-size:16px;line-height:1.7;}
.fs-content{font-size:15px;line-height:1.8;}
.fs-running{font-size:16px;}
.fs-datetime{font-size:13px;}
.fs-caption{font-size:13px;}
.fs-button{font-size:16px;font-weight:600;}
.fs-number{font-size:35px;font-weight:700;}

/*=====================================================
TABLE
=====================================================*/

.table{
    background:white;
    border-radius:10px;
    overflow:hidden;
}

.table thead{
    background:#0F4C81;
    color:white;
}

.fs-table-head{
    font-size:14px;
    font-weight:600;
}

.fs-table{
    font-size:14px;
}

.fs-table-small{
    font-size:13px;
}

.fs-table-mini{
    font-size:12px;
}

.fs-table-date{
    font-size:13px;
    white-space:nowrap;
}

.fs-table-number{
    font-size:14px;
    text-align:right;
    font-weight:600;
}

/*=====================================================
CARD
=====================================================*/

.demo{
    background:white;
    border-radius:12px;
    padding:15px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.marquee{
    overflow:hidden;
    white-space:nowrap;
}

.marquee span{
    display:inline-block;
    padding-left:100%;
    animation:marquee 15s linear infinite;
}

@keyframes marquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}


.button-container {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

}
.button-container.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%);
}
buttonx {
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        outline: none;
        transition: transform 0.2s;
}
buttonx:hover .icon-circle {
        background-color: var(--warna_tombol_lingkar_over); /* Warna lingkaran saat hover */
}

.icon-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: var(warna_tombol_lingkar_dasar);
        color: white;
        border-radius: 50%;
        font-size: 20px;
        margin-bottom: 4px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.header {
        width: 100%;
		background: linear-gradient(to bottom, var(--color_grd_1),var(--color_grd_2), var(--color_grd_2),var(--color_grd_3));
        background-image: url(../../image/header.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        /* Menyesuaikan ukuran gambar agar sesuai dengan div */
        background-position: center;
        /* Memposisikan gambar di tengah */
        height: 80px;
        top: 0;
}
.footer {
        
		/* Memposisikan gambar di tengah 
		background-color: var(--warna_footer);
		*/

}
.tabel-jadwal {
    width: 100%;
    table-layout: fixed;

    /* Jarak antar TD */
    border-spacing: 10px 8px;

    /* Jangan gunakan border-collapse */
    border-collapse: separate;
}

.tabel-jadwal td {
    text-align: center;
    vertical-align: middle;

    border: 6px solid rgba(255,255,255,0.55);
    border-radius: 50px;



 /* Efek timbul */
    box-shadow:

        /* Bayangan utama */
        14px 14px 20px rgba(0,0,0,0.45),

        /* Cahaya kiri atas */
        -7px -7px 15px rgba(255,255,255,0.20),

        /* Highlight bagian dalam */
        inset 4px 4px 8px rgba(255,255,255,0.25),

        /* Shadow bagian dalam */
        inset -6px -6px 10px rgba(0,0,0,0.30);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
 text-shadow:
        2px 2px 0 rgba(0,0,0,0.45),
        4px 4px 5px rgba(0,0,0,0.35),
        -1px -1px 1px rgba(255,255,255,0.40);
}

.td_3d {
	text-align: center;
	vertical-align: middle;
	border: 6px solid rgba(255,255,255,0.55);
	border-radius: 50px;
	box-shadow:
        12px 12px 18px rgba(0,0,0,0.50),
        -8px -8px 16px rgba(255,255,255,0.18),
        inset 5px 5px 10px rgba(255,255,255,0.25),
        inset -7px -7px 12px rgba(0,0,0,0.35);
	text-shadow:
        2px 2px 0 rgba(0,0,0,0.50),
        4px 5px 7px rgba(0,0,0,0.40),
        -1px -1px 1px rgba(255,255,255,0.35);
	background-color: #33C;
}


.gradasi_kanankiri {

    background: linear-gradient(
        to right,
        #000000 0%,
        #000000 20%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.25) 80%,
        transparent 100%
    );
}
.gradasi_kirikanan {

    background: linear-gradient(
        to left,
        #000000 0%,
        #000000 20%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.25) 80%,
        transparent 100%
    );
}

.gradasi_bawahatas {

background: linear-gradient(
    to top,
    #000000 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.3) 70%,
    transparent 100%
);
}

.gradasi_tengah {
background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 5%,
    rgba(0,0,0,0.5) 15%,
    rgba(0,0,0,0.5) 85%,
    rgba(0,0,0,0) 95%,
    rgba(0,0,0,0) 100%
);
}

#bg_slider {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image 1s ease-in-out;
}


#popupFullscreen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 1100%;
	height: 100%;
	z-index: 999999999;
	align-items: center;
	justify-content: center;
	background-color: #0CC;
}


/* =========================================
   KETIKA POPUP AKTIF
   ========================================= */

#popupFullscreen.active {

    display: flex;

}


/* =========================================
   ISI POPUP
   ========================================= */

.popup-content {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

}


/* =========================================
   KONTEN
   ========================================= */

.popup-body {

    text-align: center;

    color: white;

    padding: 30px;

}

.popup-body h1 {

    font-size: 60px;

    margin-bottom: 20px;

}

.popup-body p {

    font-size: 28px;

}

#popupClock {

    font-size: 80px;

    font-weight: bold;

    margin-top: 30px;

}




   .info-table {
        width: 100%;
        overflow: hidden;
    }
    
    .info-table td {
        border: 0px solid #334155;
        padding: 0;
        text-align: center;
    }
    
    
    /* =========================================================
       BARIS SCROLL
       ========================================================= */
    
    .info-table .scroll-row td {
        position: relative;
        overflow: hidden;
    }
    
    
    /* =========================================================
       VERTICAL SCROLL TRACK
       ========================================================= */
    
    .v-scroll-track {
    
        position: absolute;
    
        left: 0;
        top: 0;
    
        width: 100%;
    
        display: flex;
    
        flex-direction: column;
    
        align-items: center;
    
        will-change: transform;
    
        transform: translate3d(0, 0, 0);
    
        backface-visibility: hidden;
    
        -webkit-backface-visibility: hidden;
    
        contain: layout paint;
    }
    
    
    /* =========================================================
       VERTICAL SCROLL ITEM
       ========================================================= */
    
    .v-scroll-item {
    
        flex-shrink: 0;
    
        display: flex;
    
        flex-direction: column;
    
        align-items: center;
    
        justify-content: center;
    
        width: 100%;
    
        padding: 14px 24px;
    
        line-height: 1.5;
    
        text-align: center;
    
        border-bottom: 1px dashed #CCCCCC;
    }
    
    
    /* =========================================================
       ITEM TERAKHIR
       ========================================================= */
    
    .v-scroll-item:last-child {
    
        border-bottom: none;
    
    }
    
    
    /* =========================================================
       WAKTU
       ========================================================= */
    
    .v-scroll-item .time {
    
        font-size: 12px;
    
        color: #94a3b8;
    
        margin-top: 4px;
    
    }