/* RESETS */
:root {
  line-height: unset;
}
/*  */

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

html,
body {
  /* BACKWARDS COMPATIBILITY */
  height: 100vh;
  overflow: visible;
}

body {
  padding: 2vh;
}

.prayertimes-wrapper {
  --prop-border_width: 0.3546vmax;
  --prop-border_radius: 7vmax;
  --prop-padding-top: 3vmax;
  --prop-padding-bottom: 2vmax;
  --prop-padding-left: 3.5vmax;
  --prop-padding-right: 4.5vmax;

  direction: ltr;

  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-top: var(--prop-padding-top);
  padding-bottom: var(--prop-padding-bottom);
  padding-left: var(--prop-padding-left);
  padding-right: var(--prop-padding-right);
}
body {
  color: var(--color-text);
  font-size: 5vb;
}
.prayertimes-wrapper > .info {
  display: grid;

  text-align: right;
  flex: 1;
  grid-template-rows: repeat(5, min-content) 1fr;
  grid-template-columns: 1fr 19.5vh;
}
.islamic-event {
  grid-row: 1 / 4;
  grid-column: -1 / 1;
}
.localtime {
  grid-row: 1;
  grid-column: -1 / 1;
}
.date {
  grid-row: 2;
  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;
}

.islamic-event {
  top: 0;
  position: absolute;
}
.islamic-event__icon {
  width: 34vh;
  height: 25vh;
}
#masjid_logo {
  width: 100%;
  height: 23.5vh;
  margin-top: auto;
  /* Disable Hardware acceleration */
  transform: translateZ(0);

  object-fit: contain;
  object-position: center;
}
#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 {
  text-align: center;
  font-size: 2.5vmax;
}
.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; */
}

.prayer__decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-subtle);

  z-index: -1;

  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  left: 0;
}

.prayer__time--iqama-wait,
.prayer__name--iqama-wait {
  color: var(--color-darker_text);
  font-weight: bolder;
}

.prayer {
  position: relative;
  display: flex;
  gap: 1.5vw;
  text-align: right;
  justify-content: flex-end;
}
.prayer__name {
  display: block;
  font-weight: bold;
  /*width: 13vw;*/
  flex: 1;
}
.prayer__time {
  font-size: 8.5vb;
  width: 7vw;
  text-align: left;
}
.prayer__time {
  font-family: Arial;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.localtime {
  color: var(--color-darker_text);
  font-size: 20vb;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 1vmax;

  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;
  display: flex;

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

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

  top: 17%;
}
.separator__line {
  width: 20%;

  background-color: var(--color-text);
  transform: scaleY(1.1);
}
.separator__line--large {
  height: 7%;
}
.separator__line--small {
  height: 1%;
}
.separator__line--flex {
  flex: 1;
}
.separator__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);
}
.separator__circle--large {
  --radius: 2.25vh;
}
.separator__feather {
  position: absolute;
  width: 2vh;
  height: 2vh;
}
.separator__feather--top-left {
  bottom: 0;
  left: 0;
  transform: scaleX(-1) translateX(100%) translateX(-0.2vh);
}
.separator__feather--top-right {
  bottom: 0;
  right: 0;
  transform: scaleX(1) translateX(100%) translateX(-0.2vh);
}
.separator__feather--bottom-left {
  top: 0;
  left: 0;
  transform: scaleY(-1) scaleX(-1) translateX(100%) translateX(-0.4vh);
}
.separator__feather--bottom-right {
  top: 0;
  right: 0;
  transform: scaleY(-1) scaleX(1) translateX(100%) translateX(-0.4vh);
}

.sanad,
.content,
.source {
  text-align: center;
  font-weight: lighter;
}
.source {
  font-size: 4vb;
}

.sanad {
  padding-top: 2vh;
  font-size: 4.5vb;
}
.date {
  font-size: larger;
  font-weight: bold;
}
.sanad,
.content {
  direction: rtl;
}
.content {
  font-size: 6vb;
  line-height: 1.5;
  font-weight: bold;
}

.timing-status {
  display: flex;
  position: relative;
  direction: rtl;

  width: 80%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.1vw;

  transform: translateY(20%);
  padding: 0.5vb;

  margin-inline: auto;

  background-color: var(--color-darker_text);
  color: var(--color-bright_text);

  font-size: 6.2vb;
  line-height: 10vb;
  text-align: center;
  white-space: nowrap;
}
.timing-status span {
  flex: 1;
}
.swiggly-tip {
  position: absolute;
  height: 100%;
  top: 0;
}
.swiggly-tip--left {
  left: 0;
  transform: scale(-1) translateX(100%) translateX(-0.02rem);
}
.swiggly-tip--right {
  right: 0;
  transform: scale(1) translateX(100%) translateX(-0.02rem);
}

@media (orientation: portrait) {
  .islamic-event {
    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;
  }
  .timing-status {
    line-height: 6vb;
    font-size: 3.9vb;
  }
  .localtime {
    font-size: 6vb;
  }
  .date {
    padding-bottom: 1vh;
  }
  .sanad {
    padding-top: 0;
    font-size: 2.5vb;
  }

  .source {
    font-size: 2vb;
  }
  .content {
    font-size: 3vb;
    line-height: 1.2;
  }
  #masjid_logo {
    height: 12vh;
    margin-bottom: 3vh;
  }
  .localtime::before {
    font-size: 5vb;
  }
  .prayertimes-wrapper > .mwaqeet > .heading {
    font-size: 3vmax;
  }

  .prayer__time {
    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;
  }

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

/*  */
.background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  border-radius: inherit;

  --_offset: var(--prop-border_radius);
  --_inner-size: calc(100% - calc(var(--_offset) * 2));
}
.background > * {
  position: absolute;
}
.background > .background__side {
  background-color: var(--color-darker_text);
  width: var(--_inner-size);
  height: var(--_inner-size);
}
.background > .background__corner {
  --_size: calc(var(--_offset) + 2px);
  width: var(--_size);
  height: var(--_size);

  --_scale_percent: 0%;
  transform: scale(var(--x), var(--y)) translateZ(0)
    /* Disable Hardware acceleration */;
}
.background > .background__top_left {
  top: 0;
  left: 0;
  --x: 1;
  --y: 1;
}
.background > .background__top_right {
  top: 0;
  right: 0;
  --x: -1;
  --y: 1;
}
.background > .background__bottom_left {
  bottom: 0;
  left: 0;
  --x: 1;
  --y: -1;
}
.background > .background__bottom_right {
  bottom: 0;
  right: 0;
  --x: -1;
  --y: -1;
}

.background > .background__top {
  top: 0;
  left: var(--_offset);
  height: var(--prop-border_width);
}
.background > .background__left {
  top: var(--_offset);
  left: 0;
  width: var(--prop-border_width);
}
.background > .background__right {
  top: var(--_offset);
  right: 0;
  width: var(--prop-border_width);
}
.background > .background__bottom {
  bottom: 0;
  left: var(--_offset);
  height: var(--prop-border_width);
}

.background > .background__inner {
  background-color: var(--color-ui);
}
.background > .background__inner_top {
  width: var(--_inner-size);
  height: var(--_offset);
  left: var(--_offset);
  top: 0;
}
.background > .background__inner_center {
  width: 100%;
  height: var(--_inner-size);
  top: var(--_offset);
}
.background > .background__inner_bottom {
  width: var(--_inner-size);
  height: var(--_offset);
  left: var(--_offset);
  bottom: 0;
}

/* NEW MODIFIED */
.background-pattern {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.splash {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  z-index: 100;
}
.splash__prayer {
  width: 52%;
  height: 52%;
}
.splash__azkar {
  width: 100%;
  height: 100%;
}
.splash > * > svg {
  width: 100%;
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 500ms ease;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.sub-splash-enter-active,
.sub-splash-leave-active {
  transition: opacity 200ms ease, transform 300ms ease;
}
.sub-splash-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}
.sub-splash-leave-to {
  opacity: 0;
  transform: translateY(10%);
}