body {
    background-color: white;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: bolder; */
    font-style: normal;
}

.wrapper {
    max-width: 960px;
    margin: 0 auto;
}

.content {
    padding: 0;
    margin: 0 auto;
    background-color: white;
}

@media (min-width: 768px) {
    .wrapper {
        padding-top: 20px;
    }
}

@media (min-width: 769px) {
    .content {
        border-bottom: 2px solid #000;
    }
}

@media (max-width: 768px) {
    .accordion-button::before {
        flex-shrink: 0;
        width: 1.25rem;
        margin-right: auto;
        content: "";
    }
}

@media print {
    body {
        background: none;
    }
}

.page {
    max-width: 768px;
    padding: 0px;
    margin: 0 auto;
}

footer {
    margin: 0.6rem auto 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.5);
}

nav {
    background-color: #192223;
    background-image: var(--bs-gradient) !important;
}

a {
    text-decoration: none;
}

.tab-pane:not([id="quran"]) {
    padding: 1rem 0rem 0.5rem;
}

#home .card {
    /* margin-bottom: 1rem; */
}

#quran {
    /* margin: -1rem -0.9rem -2.4rem; */
    border-width: 0 0 1px;
}

#about {
    padding: 2rem;
}

.box {
    text-align: center;
    /* padding-top: 0.5rem; */
}

.card,
.modal-content {
    border-radius: 0;
}

.card-header,
.card-footer,
.modal-header {
    background-color: rgba(142, 187, 196, 0.2) !important;
    /* border-radius: 0 !important; */
}

.modal-body {
    padding: 0.5rem 0px;
}

.location-box {
    margin: 2rem auto 1rem;
    text-align: center;
}

.method-box {
    border-width: 0;
    margin: 1.1rem auto 0;
    color: #444;
}

.daily {
    max-width: 20rem;
    margin: 0 auto;
    border-width: 0 !important;
}

#daily-header {
    border-width: 0;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 20px 20px 0 0;
    padding: 1rem 0;
}

.daily .card-body {
    padding: 0.7rem 0rem;
    background-color: cornsilk;
    border-radius: 0 0 20px 20px;
}

#daily-table {
    margin-bottom: 0.1rem;
}

#daily-table tr:last-child td {
    border-width: 0px;
}

.time-label {
    text-align: left;
}

.time {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

.next-time {
    color: darkorange;
}

@media (max-width: 400px) {
    .daily {
        /* max-width: 100%; */
    }
}

#timer-div {
    font-size: 2rem;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: center;
}

#timer-header {
    padding-bottom: 0rem;
}

.circle-audio-player {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

#playerContainer {
    padding: 10px;
}

.caption {
    font-size: 170%;
    color: black;
    text-align: center;
    width: 18rem;
    cursor: pointer;
    font-weight: 100;
}

#monthly-table {
    max-width: 650px;
    table-layout: fixed;
    text-align: center;
    margin: 0px auto;
}

#monthly-table th {
    overflow: hidden;
    font-weight: 600;
}

.monthly-table-header {
    margin: 0 auto 1rem;
}

.monthly-table-header a {
    font-size: 2rem;
    color: black !important;
}

#monthly-table tr.active {
    color: white;
    background-color: darkorange;
}

.monthly-footer {
    margin: 0.8rem 0 1rem;
    font-size: 0.9rem;
    text-align: center;
}

.table-hovered tr:hover {
    background-color: rgba(142, 187, 196, 0.15);
}

#compass-board,
#compass-arrow {
    height: 250px;
    width: 250px;
    display: inline-block;
    background-size: cover;
}

#compass-arrow {
    margin-left: -250px;
}

#qibla-direction {
    width: 250px;
}

.contact-button,
.contact-button:hover {
    background-color: darkorange;
    border-color: darkorange;
}

.dropdown-toggle {
    white-space: normal;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #608f98 !important;
}

.dropdown-menu {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: rgba(142, 187, 196, 0.2);
}

.settings-nav {
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}

.nav-link:hover {
    color: white !important;
}

.settings-icon {
    width: 21px;
    height: 21px;
}

.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.55);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.navbar-toggler.x:hover .icon-bar {
    background-color: white;
}

.navbar-toggler.x {
    border: none;
}

.navbar-toggler.x:focus {
    outline: none;
}

.navbar-toggler.x[aria-expanded="true"] .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggler.x[aria-expanded="true"] .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler.x[aria-expanded="true"] .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

.navbar-toggler.x .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-toggler.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggler.x .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

#compass-arrow {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' id='arrow'%3E%3Cpath fill='%23ff8c00' stroke='%23333' stroke-width='5.684' stroke-linejoin='round' stroke-miterlimit='10' d='M187.124 150.189h-75.247l37.641-119.035z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M149.703 164.779c-8.149 0-14.78-6.63-14.78-14.779s6.63-14.779 14.78-14.779c3.948 0 7.659 1.537 10.451 4.328a14.675 14.675 0 014.328 10.45c-.001 8.149-6.63 14.78-14.779 14.78z'%3E%3C/path%3E%3Cpath fill='%23333' d='M149.703 138.063c6.593 0 11.938 5.344 11.937 11.936 0 6.592-5.344 11.939-11.937 11.939-6.594 0-11.938-5.344-11.938-11.938 0-6.592 5.347-11.937 11.938-11.937m0-5.685c-9.717 0-17.622 7.905-17.622 17.622s7.905 17.622 17.622 17.622c9.716 0 17.621-7.906 17.621-17.624a17.498 17.498 0 00-5.16-12.459 17.511 17.511 0 00-12.461-5.161z'%3E%3C/path%3E%3C/svg%3E%0A");
}

#compass-board {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Ccircle fill='none' stroke='%23333' stroke-width='5.684' stroke-miterlimit='10' cx='150' cy='150' r='135'/%3E%3Cpath fill='%23333' d='M163.562 53.41l.177 14.752c0 2.287-1.043 3.428-3.127 3.428-1.297 0-2.28-.49-2.949-1.477l-18.701-25.982c0 7.393.049 13.293.147 17.703.098 4.41.147 6.877.147 7.398 0 .525-.295 1.049-.886 1.572a3.051 3.051 0 01-2.093.785c-.807 0-1.496-.262-2.065-.785-.571-.523-.854-1.182-.854-1.975l.235-15.42c0-3.266-.05-6.582-.148-9.945-.097-3.361-.146-5.074-.146-5.141 0-2.252 1.002-3.377 3.008-3.377 1.455 0 2.537.492 3.244 1.475 11.445 15.863 17.678 24.43 18.701 25.699 0-8.979-.059-15.164-.178-18.561-.115-3.395-.176-5.139-.176-5.236 0-2.252 1.003-3.377 3.008-3.377 2.006 0 3.01 1.125 3.01 3.377 0 .256-.04 1.094-.119 2.523a335.848 335.848 0 00-.235 12.564zm-.173 204.438c0 3.092-1.422 5.682-4.264 7.775-2.841 2.092-6.522 3.141-11.037 3.141-3.508 0-6.773-.699-9.798-2.094-3.023-1.396-4.536-2.758-4.536-4.088 0-.596.241-1.094.726-1.494.484-.398 1.098-.598 1.846-.598.744 0 1.501.209 2.267.623.767.416 1.473.865 2.118 1.346.643.482 1.622.93 2.933 1.344 1.309.418 2.792.625 4.445.625 2.741 0 5.01-.58 6.805-1.746 1.793-1.162 2.691-2.773 2.691-4.834 0-1.361-.769-2.656-2.299-3.885-1.532-1.23-3.386-2.342-5.563-3.338a395.657 395.657 0 01-6.533-3.066c-2.178-1.045-4.032-2.324-5.564-3.838-1.532-1.51-2.298-3.145-2.298-4.906 0-2.426 1.29-4.52 3.872-6.281 2.579-1.76 5.624-2.641 9.131-2.641 3.508 0 6.491.49 8.951 1.471s3.689 2.102 3.689 3.363c0 .631-.241 1.131-.726 1.496-.482.365-1.129.547-1.934.547-.809 0-1.595-.215-2.36-.646s-1.714-.865-2.843-1.297-2.642-.648-4.535-.648c-1.896 0-3.608.434-5.143 1.297-1.532.863-2.298 1.926-2.298 3.189s.766 2.434 2.298 3.514c1.534 1.08 3.388 2.117 5.564 3.113a194.29 194.29 0 016.533 3.139c2.176 1.098 4.031 2.461 5.564 4.088 1.532 1.626 2.298 3.405 2.298 5.329zm-94.16-120.481c1.452.605 2.18 1.686 2.18 3.238s-.681 2.633-2.043 3.238c-1.09.465-4.153 1.58-9.191 3.346s-7.558 2.688-7.558 2.758 1.106.49 3.313 1.258c2.209.768 4.736 1.633 7.581 2.596 2.843.963 4.75 1.623 5.718 1.98 1.452.535 2.18 1.598 2.18 3.186s-.681 2.666-2.043 3.238c-.394.18-1.476.588-3.245 1.23a963.757 963.757 0 00-6.333 2.328c-2.45.91-4.242 1.58-5.377 2.01-1.135.426-2.481.945-4.041 1.553l-3.857 1.498c-1.014.395-2.11.803-3.291 1.232-2.359.855-3.871 1.283-4.538 1.283-.665 0-1.203-.232-1.611-.693a2.441 2.441 0 01-.612-1.662c0-1.426.681-2.391 2.043-2.891a532.526 532.526 0 0117.996-6.316c6.035-1.998 9.054-3.016 9.054-3.051 0-.143-2.374-1.025-7.126-2.65-4.75-1.625-8.063-2.686-9.939-3.186-.665-.18-1.247-.545-1.747-1.098s-.749-1.221-.749-2.006c0-1.607.772-2.66 2.313-3.158 11.499-3.963 17.248-6.086 17.248-6.373l-5.81-1.873c-3.872-1.25-8.107-2.604-12.708-4.068-4.6-1.463-7.443-2.373-8.534-2.729-1.361-.43-2.042-1.232-2.042-2.41 0-.82.22-1.445.658-1.873.439-.43.992-.643 1.657-.643s3.328.838 7.989 2.516c4.658 1.678 8.486 3.051 11.482 4.123 5.658 2.071 9.32 3.425 10.983 4.069zm191.474 22.664l.294-9.191c0-2.969-.082-5.607-.245-7.922h-10.881c-.033.732-.049 2.004-.049 3.816l.245 10.35c0 1.037-.205 1.867-.612 2.484-.409.617-.957.924-1.643.924-1.438 0-2.156-1.135-2.156-3.408l.196-10.35c0-1.656-.017-2.928-.05-3.816h-3.872c-4.771 0-7.907.078-9.409.232-.165 2.313-.245 4.932-.245 7.861l.294 9.191c0 1.041-.205 1.879-.613 2.516-.408.635-.973.953-1.691.953s-1.282-.318-1.689-.953c-.409-.637-.614-1.475-.614-2.516l.295-9.191-.245-10.463c0-2.08.751-3.121 2.254-3.121 1.145 0 3.016.049 5.611.145 2.599.096 9.779.145 9.779.145h4.411s9.786-.213 11.028-.404c.62-.463 1.273-.695 1.959-.695 1.471 0 2.206 1.195 2.206 3.586l-.245 10.637.294 9.191c0 1.039-.204 1.879-.612 2.514-.409.637-.973.955-1.69.955-.72 0-1.282-.318-1.691-.955-.411-.636-.614-1.476-.614-2.515z'/%3E%3Cpath fill='none' stroke='%23333' stroke-width='5.684' stroke-linecap='round' stroke-miterlimit='10' d='M179.8 57.553c29.632 9.543 53.046 32.938 62.618 62.559m.029 59.687c-9.543 29.633-32.938 53.047-62.558 62.619M116.544 57.553c-29.632 9.543-53.045 32.938-62.617 62.559m-.031 59.687c9.544 29.633 32.938 53.047 62.559 62.619'/%3E%3C/svg%3E%0A");
}


/* tweaks */

.dropdown-toggle::after {
    display: block;
    margin-left: .255em;
    content: 'change';
    color: orange;
    font-size: 12px;
    border: 0 none;
    margin: 0rem 0 2rem 0;
}

.navbar-brand {
    margin-left: 1rem;
}

.navbar-dark .navbar-nav .nav-link {
    text-align: center;
}

.table-sm>:not(caption)>*>* {
    padding: .25rem .95rem;
    font-size: 14px;
}

.advert {
    /* height: 60px; */
    background-color: orange;
    color: black;
    width: 100%;
    font-family: monospace;
    text-align: center;
    padding: 1rem;
    margin: 0 0 0 0;
    transition: 1s ease all;
}

.cta {
    color: black;
    border-bottom: 1px dashed black;
    font-weight: 600;
}

.monthly-header-container {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
    padding-top: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.monthly-table-header {
    margin-bottom: 1rem;
}

#monthly-table thead {
    position: sticky;
    top: 0px;   
    /* Adjust this value based on the height of your location and date elements */
    background: white;
    z-index: 99;
}

#monthly-table th {
    background: cornsilk;
    border-bottom: 1px dashed #555;
    border-top: 1px dashed #555;
}


/* Adverts */