@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* Add additional weights/styles as needed */

.pagination a {
    @apply text-gray-400;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

/* Style the active/current link */
.pagination a.active {
    background-color: dodgerblue;
    color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {
    background-color: #ddd;
    @apply text-gray-400;
}

h1 {
    font-size: 30px !important;
}


.top-logo {
    max-width: 100px !important;
}

.fp-col {
    max-height: 300px;
    min-height: 300px;
}

.fp-menu img {
    max-width: 100px !important;
}

.btn {
    min-width: 80px
}

.btn-primary {
    --bs-btn-color: #5d630f;
    --bs-btn-bg: #ccdc21;
    --bs-btn-border-color: #a0ac1f;
    --bs-btn-hover-color: #21220d;
    --bs-btn-hover-bg: #c9d829;
    --bs-btn-hover-border-color: #313416;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #606814;
    --bs-btn-active-border-color: #080805;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6e64;
    --bs-btn-disabled-border-color: #0d6e64;
}

.article-index {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    padding: 20px;
    text-decoration: none;
}

.article-index-title {
    font-size: 22px !important;
}

a {
    text-decoration: none;
}

.text-grey {
    color: #6c6c6c;
}

body {
    /*font-family: 'Figtree', sans-serif; */
    font-family: 'SF Pro Display', sans-serif; /* Fallback to sans-serif */

}

.masjid-menu .btn {
    background-color:  white;
    border-style: solid;
    border-width: 1px;
    border-color: #0000003b;
}

.iconize {
    width: 32px;
}
/*
:root {
    --Iconsax-Size:12px;
    --Iconsax-Color: #ffffff;

}

.iconsax {
    --Iconsax-Size:10px;
    --Iconsax-Color: #ffffff !important;
    fill: #ffffff;

}
*/

.page-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e0e4bb;
}

.author img {
    max-width: 30px;
    max-height: 30px;
    margin-right: 10px !important;
}

.author {
    font-size: 10px;
}

.article-display .userid {
    line-height: 10px;
}

.size-10 {
    font-size: 10px;
}

.article-index-list {
    background-color: rgba(239, 246, 177, 0.16);

    border-width: 1px;
    border-color: rgba(178, 187, 0, 0.62);
    border-style: solid;
}

.navbar-green {
    background-color: #C8D829;
}

.bg-green {
    background-color: #C8D829;
}

.navbar-brand {
    color: rgb(0 0 0 / 65%);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(0 0 0 / 65%);
}

.fp-col {
    border-width: 1px;
    border-color: rgba(178, 187, 0, 0.38);
    border-style: solid;
    border-radius: 10px;
}

.fp-menu a:hover {
    background-color: rgba(178, 187, 0, 0.62);
    border-radius: 10px;

}


.quran-card .badge {
    cursor: pointer;


}


.quran_icon {
    color: #cdd7dd;

}

.badge-success {
    background-color: #038522;

}

.badge-hide {
    background-color: #8fdfa2;
}

.quran-card .card-footer {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    background-color: white;
    border-top: none;
}

.quran-card {
    padding: 0px;
}

.quran-card .card-body {
    padding-top: 0px;
}

.quran-card .card-title {
    margin-bottom: 0px;
}

@media screen and (max-width: 800px) {

    .quran-card .card-body {
        font-size: 1.3rem;
    }

}

.bismillah {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #245268;
    margin-bottom: 20px;
}

.arab {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.audio_control {
    width: 100%;
}


.btn-icons {
    border: none;
    border-radius: 5px;
    background-color: #2bd184;
    width: 30px;
    height: 30px;
}

.modal-header {
    background-color: #ccd856;
    color: #646f00;
    padding:10px
}

.modal-footer {
    border:none;
    padding:10px;
}

.close {
    border: none;
    background-color: transparent;
    color: #656f00;
}
.actorPic {
    width:50px;
    height: 50px;

    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    border-radius: 50px !important;
    border-style: solid;
    border-color: white;
    margin-right: 10px;
}
.commentbutton {
    padding: 0px;
    border: none;
    margin: 0px;
    font-size: 12px;
    max-width: 50px !important;
    min-width: 50px!important;
}

.comment-date {
    font-size: 10px;
    line-height: 8px;
    padding:2px;
    border-radius: 3px;
}

.forum-menu .btn {
    margin-right: 10px !important;
    min-width: 30px !important;
}



.topic-info-view {
    color: #fff; /* White text color */
    background-color: rgba(131, 146, 243, 0.76); /* Green background color */
}

.topic-info-comments {
    color: #fff; /* White text color */
    background-color: rgba(40, 167, 69, 0.76); /* Green background color */
}

.topic-info-photo {
    background-color: #ea5c5c; /* White text color */
    color: #fff; /* White text color */

    font-size: 18px;
}

.topic-info-video {
    background-color: #f67a22; /* White text color */
    color: #fff; /* White text color */

    font-size: 18px;
}

.topic-info {

    padding: 2px 5px; /* Adjust padding as needed */
    margin-left: 5px; /* Adjust margin as needed */
    border-radius: 3px; /* Optional: Add rounded corners */
    font-size: 12px;
}

.write0 {
 color: hotpink;
}

.write1 {
    color:green;
}

.youtube-card-body {
    background-size: cover;
    height: 200px;
    border-top-left-radius:0.2rem;
    border-top-right-radius:0.2rem;
    cursor: pointer;
}

#navigator img {
    max-width:20px;
}

.ws-col {
    border-width: 1px;
    border-style: solid;
    padding: 0px;
    border-radius: 5px;
    border-color: #b4c4b2bd;
    --bs-box-shadow: aquamarine;
    margin:5px;
    background-color: #fff; /* Set the background color if needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Set shadow values */
    transition: box-shadow 0.3s ease; /* Optional: Add a smooth transition effect */
}

.ws-col-passed {
    border-width: 1px;
    border-style: solid;
    padding: 0px;
    border-radius: 5px;
    border-color: #b4c4b2bd;
    --bs-box-shadow: aquamarine;
    margin:5px;
    background-color: #fff; /* Set the background color if needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Set shadow values */
    transition: box-shadow 0.3s ease; /* Optional: Add a smooth transition effect */
}

.max-h-70 {
    max-height: 70px;
}
.ws-col-field-passed {
    background-color: #cad1d357;
    color: #9eacb1;
    padding: 5px;
}

.ws-col-value-passed {
    padding: 5px;
    color: #9eacb1;

}

.ws-col-field {
    background-color: #80e1ff57;
    padding: 5px;
}

.ws-col-value {
    padding: 5px;
}

.ws-col-hijri {

}
.ws-day {
    font-size: 20px;
    font-weight: 600;
}


.ws-col:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Change shadow on hover if needed */
}


.ws-puasa {
    display: flex;
    align-items: center;
    flex-direction: column; /* Stack items vertically */
    text-align: center;
    justify-content: center;
    border: 1px solid #ccc; /* Optional: Add a border for visibility */
    border-radius: 5px;
margin:5px;

}


.ws-puasa-isninkhamis {
    background-color: rgba(178, 187, 0, 0.29); /* Optional: Set a background color */

}
.ws-puasa-putih {
    background-color: rgb(212 143 24 / 29%) ;/* Optional: Set a background color */

}

@keyframes blink {
    0% {
        background-color: white;
    }
    50% {
        background-color: orange;
    }
    100% {
        background-color: white;
    }
}

.now-div {
    animation: blink 3s infinite; /* 3 seconds to fully appear orange + 3 seconds to fully become white = 6 seconds total */
}
.smaller {
    font-size:.7rem;
}

[data-bs-theme=dark] body {
    background-color: #000000;
    color: #868686;
}

[data-bs-theme=dark] .navbar-green {
    background-color: #1b1c00;
}

[data-bs-theme=dark] .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(255 255 255);
}

[data-bs-theme=dark] .bg-green {
    background-color: #1b1c00;
}

[data-bs-theme=dark] .fp-col {
    background-color: #1b1c00;
    border-width: 1px;
    border-color: rgba(178, 187, 0, 0.38);
    border-style: solid;
    border-radius: 10px;
}

[data-bs-theme=dark] .article-index-list {
    background-color: #1e1f22;
    border-width: 1px;
    border-color: #313400;
    border-style: solid;
}

[data-bs-theme=dark] .page-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #313400;
}

.gmap {
    height: 300px;
    width:100%;
    border:thin; border-width:1px; border-color:#666666;
    padding: 0;
    margin: 0;

}

.badge {
    border-radius: 10px;
    background-color: #fcfedb !important;
    color: #7e8812;
    border-width: 1px;
    border-color: #0000003b;
    border-style: solid;
}

.add-photo-div {
    max-width: 200px;
    border-style: dashed;
    border-color: #a4b31a8f;
    border-radius: 10px;
    color: #3b7335;
}

ekko-lightbox-container div {
    text-align :center;
}

.forum_actor {
    height: 60px;
    width: 60px;

    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(59, 115, 53, 0.34);
    margin-right: 10px;
}

.forum_dialog {
    border-radius: 20px;
    background-color: rgb(241 241 209 / 20%);

}

.btn-info {
    --bs-btn-color: #096375;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #089fbd;
}

@media (min-width: 768px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

#mainNav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'SF-Regular', Arial, sans-serif;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 200;
    letter-spacing: 1px;
}