:root {
    --bs-link-color: #0F5230;
    /* Warna aksen Anda (hijau) */
    --bs-link-hover-color: #198754;
    /* Warna hover lebih gelap */
}

/* Dark mode */
[data-bs-theme="dark"] {
    --bs-link-color: #60E2A5;
    /* Warna link di dark mode */
    --bs-link-hover-color: #20C997;
}

a {
    color: var(--bs-link-color) !important;
    /*text-decoration: underline;  Tambahkan underline untuk aksesibilitas */
    transition: opacity 0.3s !important;
}

a:hover {
    color: var(--bs-link-hover-color) !important;
    opacity: 0.8 !important;
}

body {
    /*padding-top: 105px;*/
    padding-top: 77px;
    padding-bottom: 40px;
}


.number {
    justify-self: center;
    align-self: center;
    grid-area: number;
    width: 100%;
}

.reset-number {
    justify-self: center;
    align-self: center;
    grid-area: reset-number;
    width: 100%;
}

.add {
    justify-self: center;
    align-self: center;
    grid-area: add;
    width: 100%;
}

.myBtnAdd {
    position: fixed;
    bottom: 20px;
    right: 115px;
    z-index: 99;
    outline: none;
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /*border: solid darkolivegreen;*/
    /*background-color: #ff00008c;*/
    color: #fff;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 27px;
    /*box-shadow: 0 2px 2px -1px rgba(0,0,0,.4);*/
    box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%)
}

.myBtnAdd:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.myBtnRes {
    position: fixed;
    bottom: 3px;
    left: 69px;
    min-width: 94px;
    width: 14vw;
    z-index: 99;
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* border: solid darkolivegreen; */
    /* background-color: #ffff008a; */
    /* color: #c1c1c1; */
    cursor: pointer;
    /* padding: 15px; */
    border-radius: 10px;
    font-size: 17px;
    height: 40px;
    /* box-shadow: 0 2px 2px -1px rgba(0,0,0,.4); */
    box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%);
    font-family: 'Font Awesome 6 Brands';
}

.myBtnRes:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.myBtnNum {
    position: fixed;
    bottom: 5px;
    left: 5px;
    z-index: 99;
    /* outline: none; */
    background: rgb(153, 153, 153);
    background: linear-gradient(180deg, rgba(153, 153, 153, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* border: solid #000000; */
    /* background-color: #188318ed; */
    color: #000000;
    cursor: pointer;
    padding: 0 10px 0 10px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bolder;
    width: 60px;
    text-align: center;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .4);
    /* box-shadow: 0 7px 14px -1px rgb(0 0 0 / 40%); */
}

.myBtnNum:active {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.tasbeeh {
    font-size: small;
    position: fixed;
    left: 0px;
    bottom: 0px;
    padding-left: 10px;
    z-index: 70;
    background-color: black;
    /* width: 119px; */
    padding-right: 10px;
    height: 58px;
    vertical-align: top;
    border-top-right-radius: 10px;
    /* color: currentColor; */
    font-family: monospace;
}

.tasbeeh-layer {
    height: 49px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    min-width: 168px;
    width: 20vw;
    border-radius: 10px;
}

.highlight {
    background-color: #fff7002e;
}

.latin {
    font-style: italic;
    line-height: 2;
    margin-bottom: 15px;
    display: block;
}

.terjemah {
    line-height: 2;
    display: block;
}

.show {
    display: block !important;
}

.hidethis {
    display: none !important;
}

.filter-white {
    filter: invert(100%) sepia(80%) saturate(194%) hue-rotate(164deg) brightness(117%) contrast(100%);
}

.tengah {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*p{
    margin-bottom: 0rem;
}*/

.rfs-1 {
    font-size: 1rem !important;
}

.rfs-2 {
    font-size: 1.25rem !important;
}

.rfs-3 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.rfs-4 {
    font-size: calc(1.3rem + 0.6vw) !important;
}

.rfs-5 {
    font-size: calc(1.325rem + 0.9vw) !important;
}

.rfs-6 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.rfs-7 {
    font-size: calc(1.5rem + 1.2vw) !important;
}

.rfs-8 {
    font-size: calc(1.75rem + 1.5vw) !important;
}

.rfs-9 {
    font-size: calc(2rem + 1.8vw) !important;
}

.rfs-10 {
    font-size: calc(2.5rem + 2vw) !important;
}

.config-hide {
    display: none;
}

.checkbox {
    opacity: 0;
    position: absolute;
    display: none;
}

.checkbox-label {
    background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fa-moon {
    color: #f1c40f;
}

.fa-sun {
    color: #f39c12;
}

.checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

.checkbox:checked+.checkbox-label .ball {
    transform: translateX(24px);
}

#checkbox {
    display: none;
}

.nomor_ayat {
    width: 34px;
    height: 40px;
    background-image: url(/img/ic-frame-number.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Blockquote from https://codepen.io/catalinred/pen/YzBPadm */
.blockquote {
    padding-left: 2rem;
    position: relative;
    overflow: hidden;
    margin: 24px 0 24px 0;
}

.blockquote::before,
.blockquote::after {
    position: absolute;
    color: #777;
}

.blockquote p {
    margin: 0;
}

.blockquote p+p {
    margin-top: 1rem;
}

.blockquote--slashes::before {
    content: "//";
    transform: rotate(90deg);
    left: 0;
}

.blockquote--slashes::after {
    content: "";
    left: 5px;
    top: 25px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
}

.blockquote--classic::before {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23777777'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
    left: 0;
}

.blockquote--classic::after {
    content: "";
    left: 5px;
    top: 25px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
}

/* Blockquote from https://codepen.io/catalinred/pen/YzBPadm */



.pointer {
    cursor: pointer;
}

.weight-1 {
    font-weight: 100;
}

.weight-2 {
    font-weight: 200;
}

.weight-3 {
    font-weight: 300;
}

.weight-4 {
    font-weight: 400;
}

.weight-5 {
    font-weight: 500;
}

.weight-6 {
    font-weight: 600;
}

.weight-7 {
    font-weight: 700;
}

.weight-8 {
    font-weight: 800;
}

.weight-9 {
    font-weight: 900;
}

#closeNavbarBtn {
    display: none;
}

.navbar-collapse.show #closeNavbarBtn {
    display: block;
}

.hero-img-home {
    background: url('/img/doa-dan-quran.jpg') no-repeat center center/cover;
}

.hero-img-quran {
    background: url('/img/membaca-quran.webp') no-repeat center center/cover;
}

.hero-img-doa {
    background: url('/img/doa-featured-image.jpg') no-repeat center center/cover;
}

/*.hero-section, .hero-img-home, .hero-img-quran, .hero-img-doa {*/
.hero-section {
    position: relative;
    /*background: url('https://www.arabiantongue.com/wp-content/uploads/2022/12/Ramadan-reading-AlQuran-schedule.webp') no-repeat center center/cover;*/
    color: white;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.dot:before {
    content: '•';
    margin: 0 0.25rem 0 0.25rem;
}

.icon-small-ornament {
    display: inline-block;
    width: 24px;
    height: 40px;
    /* Warna default ikon */
    background-color: #198754;

    /* SVG dijadikan sebagai mask/cetakan */
    -webkit-mask-image: url('../img/small-ornament.svg');
    mask-image: url('../img/small-ornament.svg');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}