body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;

    background-color: var(--color-background);
    background-image: var(--image-pattern);
    background-repeat: repeat;
    background-position: center;
}

* {
    box-sizing: border-box;
    margin: 0;
}
body {
    padding: 2vh;
}


.prayertimes-wrapper {
    --prop-border_width: 0.45vmax;
    --prop-border_radius: 7vmax;

    display: flex;
    border-radius: var(--prop-border_radius);
    position: relative;
    flex-direction: row;
    column-gap: 3vw;
    row-gap: 4vh;
    width: 100%;
    height: 100%;
    min-width: 280px;
    padding-inline: 2.5vmax 4vmax;
    padding-block: 2vmax;
}
body {
    color: var(--color-text);
    font-size: 5vb;
}
.prayertimes-wrapper > .info {
    position: relative;
    overflow: hidden;
    display: grid;

    text-align: right;
    flex: 1;
    grid-template-rows: repeat(5, min-content) 1fr;
    grid-template-columns: 1fr 19.5vh;
}
.decoration { grid-row: 1 / 4; grid-column: -1 / 1; }
.localtime { grid-row: 1; grid-column: -1 / 1; }
.date { grid-row: 2; grid-column: -1 / 1; }
#notification { grid-row: 3 / 7; grid-column: -1 / 1;}
.sanad { grid-row: 3; grid-column: -1 / 1; }
.content { grid-row: 4; grid-column: -1 / 1; }
.source { grid-row: 5; grid-column: -1 / 1; }
#saying_decoration { grid-row: 6; grid-column: 1 / 1; }
#masjid_logo { grid-row: 5 / 7; grid-column: 2 / 2; }


.decoration {
    top: 0;
    position: absolute;
}
#masjid_logo {
    width: 100%;
    height: 23.5vh;
    margin-top: auto;
    /* Disable Hardware acceleration */
    transform: translateZ(0);
}
#saying_decoration {
    margin-left: auto;
    margin-right: 2vw;
}
.prayertimes-wrapper > .info > .icon {
    background-image: var(--url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    height: 150px;
    aspect-ratio: var(--aspect);
}

.prayertimes-wrapper > .mwaqeet {
    display: flex;
    flex-direction: column;
    margin: 0 1vw;
    width: 30vw;
}
.prayertimes-wrapper > .mwaqeet > .heading {
    color: var(--color-darker_text);
    text-align: center;
    font-size: 3vmax;
}
.prayertimes-wrapper > .mwaqeet > .prayers {
    display: flex;
    flex-direction: column;
    height: fit-content;
    text-align: left;
    justify-items: center;
    font-size: 7.5vb;
    line-height: 140%;
    width: 100%;
    /* gap: 5px; */
}
.prayertimes-wrapper > .mwaqeet > .prayers > * > :first-child {
    width: 6.5vb;
    text-align: right;

    width: 0;
    opacity: 0;
}
.prayertimes-wrapper > .mwaqeet > .prayers .amazing {
    background-color: var(--color-subtle);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
    color: var(--color-darker_text);
    font-weight: bolder;
}
.prayers > .amazing::before,
.prayers > .amazing::after
{
    background-image: var(--image-tip_white);
}
.prayertimes-wrapper > .mwaqeet > .prayers > * {
    display: flex;
    gap: 1.5vw;
    text-align: right;
    justify-content: flex-end;
}
.prayers > * > :nth-child(2) {
    width: 7vw;
    text-align: left;
}
.prayers .prayer_name {
    display: block;
    font-weight: bold;
    /*width: 13vw;*/
    flex: 1;
}
.prayer_timing {
    font-size: 8.5vb;
}
.prayer_timing.prayer_time {
    font-family: Arial;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* .prayer_timing.prayer_time{
    font-family: Digital7;
    font-size: 10vb;
}
.localtime {
    font-family: Digital7;
}
.localtime::before {
    font-family: Al Jazeera;
} */
.localtime {
    color: var(--color-darker_text);
    font-size: 20vb;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 1.5vmax;

    line-height: 80%;
}
.localtime::before {
    font-weight: lighter;
    font-size: smaller;
}
.localtime[m='a']::before {
    content: "\0635"
}
.localtime[m='p']::before {
    content: "\0645"
}

.separator > * {
    position: relative;
    left: 50%;
    translate: -50% 0;
}
.separator {
    position: relative;
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: start;

    height: 45vh;
    aspect-ratio: 1 / 20;

    top: 17%;
}
.separator > .line {
    width: 20%;
    flex: 1;

    background-color: var(--color-text);
    transform: scaleY(1.1);
}
.separator > [class|=circle] {
    --radius: 1.25vh;
    position: relative;
    z-index: 1;

    width: var(--radius);
    height: var(--radius);
    border-radius: 50%;
}

.separator > .circle-fill {
    background-color: var(--color-text);
}
.separator > .circle-outline {
    background-color: var(--color-ui);
    border: 0.4vh solid var(--color-text);
    /* box-sizing: content-box; */
}
.separator > .swiggly[class|=circle]::before,
.separator > .swiggly[class|=circle]::after
{
    content: '';
    background-image: var(--image-swiggly);
    background-size: contain;
    background-repeat: no-repeat;

    display: block;
    position: absolute;

    width: 2vh;
    height: 2vh;

    right: 0;
    top: 0;
    --scaleX: 1;
    --scaleY: 1;
    scale: var(--scaleX) var(--scaleY);
    transform: translate(60%, -50%);
}
.separator > .swiggly[class|=circle]::after {
    left: 0;
    --scaleX: -1;
}
.separator > .swiggly.flipped[class|=circle]::before,
.separator > .swiggly.flipped[class|=circle]::after {
    --scaleY: -1;
}


.amazing {
    position: relative;
    background-color: var(--color-darker_text);
    padding: 0.5vb;
}
.amazing::before,
.amazing::after
{
    content: '';

    background-image: var(--image-tip);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;

    top: 0;

    height: 100%;
    aspect-ratio: 60 / 87;
    z-index: -1;
}
.amazing::before {
    right: 0;
    transform: translateX(95%);
}
.amazing::after {
    left: 0;
    transform: scaleX(-1) translateX(95%);
}

.sanad, .content, .source {
    text-align: center;
    font-weight: lighter;
}
.source {
    font-size: 4vb;
}
.salawat {
    display: inline-block;
    background-image: var(--image-salawat);
    --_size: 4vb;
    width: var(--_size);
    height: var(--_size);
    vertical-align: middle;
}
.sanad {
    padding-top: 2vh;
    font-size: 4.5vb;
}
.date {
    font-size: larger;
    font-weight: bold;
}
#notification {
    position: absolute;

    top: 0.55vmin;
    left: 0;
    width: 100%;
    height: calc(100% - 8vb);

    z-index: 1;
    opacity: 1;
    margin-top: 5vb;
    margin-right: -1.125vmax;
    margin-bottom: 1.125vmax;
    transform: translateY(0);
    transition: opacity 750ms ease, transform 750ms ease;
}
.content {
    font-size: 6vb;
    line-height: 7.68vh;
    direction: rtl;
    font-weight: bold;
}

.fadeinout {
    animation: fadeinout 1s ease;
}
@keyframes fadeinout {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.prayer_duration {
    width: 80%;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.1vw;
    margin-inline: auto;
    transform: translateY(20%);
    color: var(--color-bright_text);
    font-size: larger;
    font-weight: bold;
    line-height: 10vb;
    white-space: nowrap;
}
.prayer_duration span{margin: 0 auto;}
*:not(.fadeinout) {
    transition: 1s opacity ease;
}
@keyframes slide_in {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
        top:100%;
    }

    100% {
        opacity: 1;
        top:50;
    }
}

.prayertimes-wrapper.hide *:not(.background, .background *) {
    opacity: 0;
}
.prayertimes-wrapper:not(.show_notification) #notification {
    opacity: 0;
    transform: translateY(50%);
}
.prayertimes-wrapper.show_notification :is(.sanad, .content, .source, #saying_decoration, #masjid_logo) {
    opacity: 0;
}
:is(.sanad, .content, .source, #saying_decoration, #masjid_logo) {
    opacity: 1;
    transform: opacity 250ms ease;
}

.hide::after {
    content: '';
    position: absolute;
    width: var(--hider-width);
    height: var(--hider-height);
    background-image: var(--hider-background-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    animation: slide_in 1.25s ease;
    transition: width 250ms ease, height 250ms ease;
}

@media (orientation:portrait){
    .decoration {
        display: none;
    }
    body {
        padding: 1.25dvh;
        font-size: 2vb;
    }
    .separator {
        display: none !important;
    }
    .prayertimes-wrapper {
        flex-direction: column;
        padding-block: 1dvh;
        padding-inline: 3.5vh;
    }
    .prayertimes-wrapper  > .info {
        grid-template-columns: 100%;
        justify-items: center;
    }
    #saying_decoration {
        display: none;
    }
    .prayer_duration {
        line-height: 6vb;
        font-size: 3.75vb;
    }
    .localtime {
        font-size: 6vb;
    }
    .date {
        padding-bottom: 1vh;
    }
    .sanad {
        padding-top: 0;
        font-size: 2.5vb;
    }
    .salawat {
        --_size: 1em;
    }
    .source {
        font-size: 2vb;
    }
    .content {
        font-size: 3vb;
        line-height: 1.2;
    }
    .background__corner {
        /* display: none !important; */
    }
    #masjid_logo {
        height: 12vh;
        margin-bottom: 3vh;
    }
    .localtime::before {
        font-size: 5vb;
    }    
    .prayertimes-wrapper > .mwaqeet > .heading {
        font-size: 3vmax;
    }
    .prayertimes-wrapper > .mwaqeet > .prayers > * > :first-child {
        text-align: right;
        font-size: max(2.5vi, 3.75vb);
    }
    .prayer_timing {
        font-size: max(3.25vi, 4.75vb);
    }
    .prayertimes-wrapper > .mwaqeet > .prayers {
        font-size: 3.75vb;
        padding-inline: 1rem;
    }
    .prayer_name {
        padding-right: 2.5vw;
    }

    #masjid_logo { grid-row: 7; grid-column: 1; }

    #notification { 
        grid-row: 4 / 8;
        margin-top: calc((100vh - 100vw) * -0.05);
        margin-right: 0;
        margin-bottom: 0;
        height: calc(100% - 1vb);
    }

    .prayertimes-wrapper > .mwaqeet {
        width: 100%;
        margin: 0;
    }

}


#hidden_switcher {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 5vw;
    height: 5vw;
    cursor: pointer;
}
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-ui, white);
    z-index: 99999;
    box-shadow: 0 10px 1rem #000a;
    border-radius: 5px;
}
#masjid_chooser_dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    width: 30vw;
    height: 90vh;
    overflow: auto;
}
#masjid_chooser_dialog > * {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background-color: transparent;
    font-family: inherit;
    border: 0;
    cursor: pointer;
    font-size: 2vb;
}
#masjid_chooser_dialog img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}
#masjid_chooser_dialog > *:hover {
    background-color: #0001;
}