@font-face{font-family:en_font;src:url("../assets/fonts/Madimi_One/MadimiOne.woff2") format("woff2");font-weight:100 1000;font-display:swap}@font-face{font-family:ar_font;src:url("../assets/fonts/ElMessiri/ElMessiri.woff2") format("woff2");font-weight:100 1000;font-display:swap;descent-override:40%;ascent-override:105%}@font-face{font-family:cairo;src:url("../assets/fonts/Cairo/Cairo.woff2") format("woff2");font-weight:100 1000;font-display:swap}:root{--border-rad: 20px;--padding: 10px;--orange1: #faac0d;--orange2: #faab0d50;--orange3: #faab0dcb;--orange4: #faab0de0;--orange5: #faab0da0;--green1: #108207;--green2: #076800;--green3: #076e0050;--green4: #0a920099;--white-col: #eeeeee;--en_font: "en_font";--ar_font: "ar_font";--transition: .5s;--header-height: 50px;--body-bg: #000000}html{scroll-behavior:smooth;color:#fff;white-space:nowrap;opacity:0}*,*:before,*:after{box-sizing:border-box;font-weight:700;text-align:center;padding:0;margin:0;outline:none;border:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:rgba(0,0,0,0)}button{color:inherit;font-family:inherit;outline:none;border:none;cursor:pointer;&:focus-visible{outline:3px solid var(--white-col);outline-offset:3px}}img{display:block;max-width:100%}::-webkit-scrollbar{display:none}body{height:100dvh;min-height:100dvh;max-height:100dvh;background-color:var(--body-bg);font-family:var(--en_font),monospace;gap:var(--padding);padding:var(--padding);display:flex;flex-direction:column;&.ar{direction:rtl;font-family:var(--ar_font),monospace}}.switch{--w: 35px;width:var(--w);aspect-ratio:1 / .5;background-color:transparent;border:3px solid var(--green1);border-radius:100px;position:relative;transition-property:background-color;transition-duration:var(--transition);cursor:pointer;&:before{content:"";position:absolute;top:50%;left:50%;translate:-120% -50%;width:calc(var(--w) * .3);aspect-ratio:1;border-radius:100%;background-color:var(--green1);transition-property:translate,background-color;transition-duration:inherit}&.on{background-color:var(--green1);&:before{translate:20% -50%;background-color:var(--orange1)}}}.popup{width:unset;height:calc(100% - (var(--header-height) + var(--padding) * 3));padding:30px;background-color:inherit;transition-property:opacity,display,transform,overlay;transition-duration:.5s;transition-behavior:allow-discrete;opacity:0;display:none;transform:var(--transform-up);contain:layout;color:inherit;border-radius:inherit;margin:auto;&::backdrop{opacity:0;background-color:#00000085;transition-property:opacity;transition-duration:.5s}&:popover-open{opacity:1;display:flex;transform:none;@starting-style{opacity:0;transform:var(--transform-up)}&::backdrop{opacity:1;@starting-style{opacity:0}}}}#appLoaderScreen{position:absolute;top:50%;left:50%;translate:-50% -50%;width:100%;height:100%;border-radius:var(--border-rad);display:flex;align-items:center;justify-content:center;contain:layout;z-index:10;background-color:color-mix(in oklab,var(--orange1) 50%,var(--green2));transition-property:opacity,visibility;transition-duration:1s;&.shrink:before{transform:none}&.fade-out{opacity:0;visibility:hidden}&:before{content:"";display:block;width:100%;height:100%;position:absolute;border-radius:inherit;background-color:inherit;z-index:1;transition:transform 1s;transform:translateY(calc((var(--header-height) + var(--padding)) * -1))}}#appErrorScreen{--transform-up: translateY(100px);--transform-down: translateY(-100px);border-radius:var(--border-rad);align-items:center;contain:layout;z-index:10;background-color:color-mix(in oklab,var(--orange1) 50%,var(--green2));overflow:auto;margin:auto var(--padding) var(--padding);padding:0;.close-btn{position:static;font-size:1.35rem;background-color:var(--green3);padding:7px 15px;border-radius:inherit;transition-property:background-color;margin-bottom:20px;&:hover{background-color:var(--green1)}}.holder{height:100%;padding:30px;background-color:inherit;border-radius:inherit;align-content:center;margin-inline:auto}& button{appearance:none;background-color:transparent;transition-property:scale,color;transition-duration:.2s;transition-timing-function:ease-in-out;position:absolute;top:10px;right:10px;font-size:1.5rem;&:active{scale:.9}&:hover{color:var(--orange1)}}#infoPopover{margin:auto var(--padding) var(--padding);&::backdrop{opacity:0;background-color:#00000075;transition-property:opacity;transition-duration:.5s}&:popover-open{opacity:1;display:flex;transform:none;@starting-style{opacity:0;transform:var(--transform-up)}&::backdrop{opacity:1;@starting-style{opacity:0}}}& i.fa-location-pin-lock{font-size:5rem;color:var(--green2)}}& i.fa-wifi{font-size:5rem;color:var(--green2);animation:pulse 2s ease-in-out infinite alternate}& h2{font-size:3rem;color:var(--orange1)}& p{font-size:1.2rem;white-space:normal;margin-top:30px;padding-bottom:20px;max-width:500px}&.fade-in{opacity:1;display:flex;transform:none;@starting-style{opacity:0;transform:var(--transform-up)}}}.page{display:none;opacity:0;&.picked{display:flex;opacity:1;animation:fade-in var(--transition) forwards}}header{display:flex;align-items:center;justify-content:center;position:relative;height:var(--header-height);z-index:11;transition:transform 1s;&.loading{transform:translateY(calc(45dvh - var(--header-height)));>.loader-spinner{display:unset}>.logo{scale:1.4}}>.loader-spinner{position:absolute;top:200%;display:none}>.logo{display:flex;align-items:center;justify-content:center;gap:10px;transition:scale 1s;>img{width:60px}>.txt{display:flex;gap:2px;font-size:1.75rem;word-spacing:-5px;position:relative;>span:first-child{color:var(--orange1)}>span:last-child{color:var(--green1)}&.ar{flex-direction:row-reverse;top:3px;>span:first-child{color:var(--orange1)}>span:last-child{color:var(--green1)}}}}}@media (width < 750px){:root{--header-height: 35px}header{>.logo{gap:7px;>img{width:50px}>.txt{font-size:1.4rem}}}}@media (width < 350px){:root{--header-height: 30px}header{>.logo{gap:5px;>img{width:40px}>.txt{font-size:1.25rem}}}}main{min-height:0;flex:1;display:flex;gap:3px;border-radius:var(--border-rad);background-color:var(--orange1);position:relative;height:calc(100% - calc(var(--header-height) + var(--padding)));>.content{min-height:0;flex:1;border-start-end-radius:inherit;border-end-end-radius:inherit;background-color:var(--orange1);background-image:url("../assets/imgs/m1.png"),linear-gradient(var(--orange1),var(--green1));background-repeat:no-repeat;background-size:cover;position:relative;padding:var(--padding);overflow:auto;>*{width:100%;height:100%}& i.icon{color:var(--white-col)}.clock{display:flex;align-items:center}>#prayerTimesPage{flex-direction:column;gap:5px;position:relative;>.date{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;margin-block-end:10px;>*{width:100%;display:flex;justify-content:center}>.weekday{font-size:calc(1.5rem + 2vw);align-items:center;gap:10px;>i{font-size:calc(1.2rem + 1vw)}}>.d-m-y{gap:20px;color:var(--white-col);>*{display:flex;flex-direction:column;justify-content:space-around;>.hijri{color:var(--green1)}}}}@media (width >= 870px){.date>.d-m-y{font-size:1.3rem}}>.location{display:flex;align-items:center;gap:10px;color:var(--white-col);font-family:var(--en_font);>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.net-state{display:flex;align-items:center;gap:10px;&.online{>[data-en=Online]{display:unset}>[data-en=Offline]{display:none}}>[data-en=Online]{display:none}}>.clock{gap:10px;color:var(--white-col);>.time{display:flex;direction:ltr;font-size:1.15rem;>*{width:18px}}}>.times{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding-bottom:10px;>*{width:100%;height:100%;flex:1;display:flex;flex-direction:column}>.next-prayer{gap:5px;background-color:var(--green3);border-radius:var(--border-rad);padding:var(--padding);align-items:center;justify-content:center;white-space:normal;>.prayer-name{font-size:4rem;margin-block-end:10px}>.txt{color:var(--white-col)}>.clock.counter-down{font-size:2.5rem;direction:ltr;&.pulse{color:var(--orange1);animation:pulse infinite ease .7s alternate}>*{width:50px}}}@media (width < 870px){.next-prayer{>.prayer-name{font-size:2.25rem}>.txt{font-size:calc(.6rem + .5vw)}>.clock.counter-down{font-size:1.65rem;>*:nth-child(2n){width:20px}>*:nth-child(odd){width:45px}}}}>.prayers{gap:10px;>.prayer{background-color:var(--green3);padding:var(--padding);border-radius:var(--border-rad);display:flex;gap:10px;align-items:center;justify-content:space-between;&.picked{background-color:var(--orange1);color:var(--green1);>.icon-name>i{color:inherit}}>.icon-name{display:flex;gap:10px}>.time{direction:ltr;display:flex;align-items:center;gap:5px}}}@media (width >= 870px){.prayers{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;>*{max-width:170px;min-width:95px;flex-direction:column;justify-content:normal;height:fit-content;flex:1 0 170px;>.icon-name{flex-direction:column;font-size:1.25rem;>i{font-size:1.65rem}}>.time{font-size:1.45rem}}}}}@media (width < 870px){.times{flex-direction:row;>.prayers{flex:2;>.prayer{>.icon-name{font-size:1.15rem;align-items:center;>i{font-size:1.35rem}}>.time{font-size:1.25rem}}}}}@media (width < 500px){.times{flex-direction:column}}@media (width < 300px){.times{>.prayers>.prayer{flex-direction:column;gap:7px;>.icon-name{flex-direction:column;gap:7px;font-size:1.2rem}}}}}>#monthCalendarPage{padding:var(--padding);position:absolute;top:50%;left:50%;translate:-50% -50%;white-space:normal;font-family:cairo,monospace;overflow:auto;>.holder{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;min-height:300px}.hijri-m-y{display:flex;justify-content:center;align-items:center;gap:5px;font-size:calc(.9rem + 1vw);color:var(--green1)}.controls{display:flex;gap:10px;justify-content:center;align-items:center;position:relative;>#tableSpinner{opacity:0;transition:opacity .5s linear;animation:r-spin infinite 1s linear;animation-play-state:paused;color:var(--green1);&.run{opacity:1;animation-play-state:running}}>select{border:none;outline:none;border-radius:13px;background-color:var(--green1);background-image:linear-gradient(to right,var(--green1),var(--orange3));color:var(--white-col);width:115px;font-size:clamp(.65rem,calc(.5rem + 1.5dvw),.95rem);font-family:inherit;&:focus-visible{outline:3px solid var(--white-col);outline-offset:3px}>option{font-family:inherit;&[value]:hover{background-color:var(--orange1)}}}}.t-wrapper{flex:1;font-weight:700;border-radius:5px;overflow:auto;>table{width:100%;border-spacing:0;:is(th,td){padding-block:7px;outline:1px solid var(--green3)}>tbody{font-size:calc(.35rem + 1.5dvw);>tr{position:relative;>td{background-color:var(--orange5);>.holder{display:flex;align-items:center;justify-content:center;direction:ltr}}}>tr.today{background-color:var(--orange1);>:is(th,td){background-color:transparent}}>tr.header{font-size:calc(.3rem + 1.1vw);background-color:var(--green2);position:sticky;top:0;z-index:1;>.prayer{background-color:var(--green1)}}>*>th[scope=row]{background-color:var(--green3)}>tr>[scope]{color:var(--white-col)}>tr.data{outline:none;border:none;&.holiday{box-shadow:inset 0 0 0 2px #fff;cursor:pointer;>.holiday-info{color:var(--green1);background-color:var(--green2);flex-direction:column;gap:10px;align-items:center;padding:20px;overflow:auto;border-radius:var(--border-rad);margin:auto var(--padding) var(--padding);cursor:auto;>.close-btn{font-size:1.5rem;background-color:transparent;color:#eee;display:flex;align-self:flex-end;transition:color .2s;>i{pointer-events:none}&:hover{color:var(--orange1)}&:active{scale:.85}}>.holiday-date{display:flex;gap:10px;align-items:center;font-size:1.5rem;color:var(--orange1);margin-bottom:25px}>.holiday-title{color:var(--orange1);font-size:2rem;border-bottom:5px solid var(--orange1)}>:nth-child(n+4){background-color:var(--orange1);border-radius:10px;padding:10px 15px;font-size:clamp(.85rem,4vw,1.5rem)}}}&:hover:not(.today){background-color:var(--green4)}}}}}}>#settingsPage{border-radius:var(--border-rad);background-color:var(--green3);padding:20px;gap:25px;justify-content:flex-start;align-items:center;flex-direction:column;position:relative;min-height:430px;>.option{display:flex;align-items:center;gap:10px;direction:ltr;>i{font-size:1.5rem;color:var(--green1);cursor:pointer;transition:all var(--transition)}>span{color:var(--white-col)}}>.update-location{--col: color-mix(in oklab, var(--green1) 40%, var(--orange1));width:90%;padding:15px;border:5px solid var(--col);max-width:500px;position:relative;display:flex;flex-direction:column;gap:20px;border-radius:10px;>.update-msg{position:absolute;top:110%;font-size:.85rem;background-color:var(--col);padding:5px 15px;border-radius:100px;animation:pulse 2s infinite ease-in-out;display:none;font-family:inherit;&.show{display:block}}>legend{background-color:var(--col);border-radius:100px;font-size:1.35rem;position:relative;contain:layout;z-index:0;width:50px;aspect-ratio:1;margin-inline:auto;&:is(.loading,.success,.faild){>i.fa-location-dot{display:none}}&.loading{>i.fa-sun{display:unset}}&.success{>i.fa-circle-check{display:unset}}&.faild{>i.fa-circle-xmark{display:unset}}>i{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;color:gold;&.fa-circle-check,&.fa-circle-xmark,&.fa-sun{display:none}&.fa-location-dot,&.fa-circle-check,&.fa-circle-xmark{animation:rotateY3d 3s ease-in-out infinite}&.fa-sun{animation:r-spin 1s linear infinite}}}& button{background-color:var(--col);padding:7px 15px 6px;border-radius:100px;font-size:.95rem;transition-duration:.2s;transition-property:background-color,scale;color:#fff;&:hover{background-color:var(--green2)}&:active{transform:scale(.93)}&:disabled{background-color:var(--green4);&:active{transform:none}}}>#setttingsLocation{white-space:wrap;font-family:var(--en_font)}}>.copy{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:auto;>span:nth-child(1){color:var(--orange1)}>span:nth-child(2){color:var(--white-col)}>span:nth-child(3){color:var(--orange1)}}}}>nav{min-height:0;display:flex;flex-direction:column;gap:30px;align-items:center;justify-content:center;background-color:var(--green1);padding:7px;overflow:auto;border-start-start-radius:inherit;border-end-start-radius:inherit;>*{padding:var(--padding);border-radius:var(--border-rad);background-color:var(--green2);width:80px;height:75px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;cursor:pointer;outline:none;border:none;min-width:60px;&:hover{background-color:var(--orange2)}&.picked{background-color:var(--orange1);color:var(--green1)}>i{font-size:1.3rem}>.txt{font-size:.7rem}}}@media (width < 870px){nav{flex-direction:row;border-start-start-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit;>*{width:75px;height:60px;gap:5px;padding:5px;>i{font-size:1rem}>.txt{font-size:.75rem}}}}@media (width < 750px){nav{gap:15px}}}@media (width < 870px){main{flex-direction:column-reverse;>.content{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:0}}}@media (orientation: landscape){main{flex-direction:row;>nav{flex-direction:column;border-end-end-radius:0;border-start-start-radius:inherit}>.content{border-end-end-radius:inherit}}}@keyframes pulse{50%{opacity:.5}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{rotate:z 360deg}}@keyframes r-spin{to{rotate:z -360deg}}@keyframes rotateY3d{to{transform:rotateY(360deg)}}.loader-spinner{box-sizing:border-box;overflow:visible;aspect-ratio:1;width:40px;>circle{fill:none;stroke:var(--orange1);cx:50%;cy:50%;r:50%;stroke-width:12px;stroke-linecap:round;animation:spinner-rotate 2s linear infinite,spinner-dash 2s ease-in-out infinite;transform-origin:center;will-change:transform,stroke-dasharray,stroke-dashoffset}}@keyframes spinner-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(810deg)}}@keyframes spinner-dash{0%{stroke-dasharray:0 314.159;stroke-dashoffset:0}50%{stroke-dasharray:157.08 157.08;stroke-dashoffset:0}to{stroke-dasharray:0 314.159;stroke-dashoffset:-157.08}}