@font-face {
  font-family: "indopak-nastaleeq";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/nastaleeq/indopak-nastaleeq-waqf-lazim.woff2?v=3.3");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: quran-icon;
  src: url("https://static-cdn.tarteel.ai/qul/fonts/common/quran-common.woff?v=3.3");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UthmanicHafs_V22";
  src: local("KFGQPCHAFSUthmanicScript-Regula"), url("https://static-cdn.tarteel.ai/qul/fonts/UthmanicHafs_V22.woff2?v=3.3") format("woff2"), url("https://static-cdn.tarteel.ai/qul/fonts/UthmanicHafs_V22.ttf?v=3.3") format("truetype");
}
@font-face {
  font-family: "indopak-nastaleeq";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/nastaleeq/indopak-nastaleeq-waqf-lazim.woff2?v=3.3");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MehrNastaliq";
  src: local("Mehr Nastaliq Web"), url("https://static-cdn.tarteel.ai/qul/fonts/lang/urdu/Mehr_Nastaliq_Webv.2.0.woff?v=3.3"), url("https://static-cdn.tarteel.ai/qul/fonts/lang/urdu/Mehr_Nastaliq_Webv.2.0.ttf?v=3.3") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.indopak-nastaleeq {
  font-family: indopak-nastaleeq;
  font-size: 30px;
  direction: rtl;
}

.quran-icon {
  font-family: quran-icon;
}

.qpc-hafs {
  font-family: "UthmanicHafs_V22";
}

.urdu, [lang=ur] {
  font-family: "MehrNastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  direction: rtl;
  text-align: right;
}

@font-face {
  font-family: "surah-name-v4";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v4/surah-name-v4.woff2?v=3.3");
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v4/surah-name-v4.eot?v=3.3") format("embedded-opentype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v4/surah-name-v4.ttf?v=3.3") format("truetype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v4/surah-name-v4.woff?v=3.3") format("woff");
}
@font-face {
  font-family: "surah-name-v1";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v1/surah-name-v1.woff2?v=3.3");
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v1/surah-name-v1.eot?v=3.3") format("embedded-opentype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v1/surah-name-v1.ttf?v=3.3") format("truetype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v1/surah-name-v1.woff?v=3.3") format("woff"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v1/surah-name-v1.svg?v=3.3") format("svg");
}
@font-face {
  font-family: "surah-name-v2";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v2/surah-name-v2.woff2?v=3.3");
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v2/surah-name-v2.eot?v=3.3") format("embedded-opentype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v2/surah-name-v2.ttf?v=3.3") format("truetype"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v2/surah-name-v2.woff?v=3.3") format("woff"), url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/v2/surah-name-v2.svg?v=3.3") format("svg");
}
@font-face {
  font-family: "surah-header";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/surah-header/QCF_SurahHeader_COLOR-Regular.woff2?v=3.3");
  src: url("https://static-cdn.tarteel.ai/qul/fonts/surah-names/surah-header/QCF_SurahHeader_COLOR-Regular.ttf?v=3.3");
}
@font-face {
  font-family: "quran-icon";
  src: url("https://static-cdn.tarteel.ai/qul/fonts/common/quran-common.woff2?v=3.3");
  src: url("https://static-cdn.tarteel.ai/qul/fonts/common/quran-common.ttf?v=3.3");
}
.surah-name-v4-icon {
  font-family: "surah-name-v4" !important;
}

.surah-name-v2-icon {
  font-family: "surah-name-v2" !important;
}

.surah-name-v1-icon {
  font-family: "surah-name-v1" !important;
}

.surah-header-icon {
  font-family: "surah-header" !important;
  font-size: 150px !important;
}

.quran-icon {
  font-family: "quran-icon" !important;
}

.surah-name-v4-icon, .surah-name-v1-icon, .surah-header-icon, .surah-name-v2-icon, .quran-icon {
  font-size: 30px;
  direction: rtl;
  font-weight: normal;
  font-style: normal;
  font-display: block;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tafkheem {
  color: #006994;
}

.izhar {
  color: darkgreen;
}

.izhar_shafawi {
  color: blue;
}

.ikhafa_shafawi {
  color: #D500B7;
}
.ikhafa_shafawi:hover {
  background-color: #F0A6E6;
  color: #D500B7;
}

.ham_wasl, .slnt, .laam_shamsiyah {
  color: #AAAAAA;
}
.ham_wasl:hover, .slnt:hover, .laam_shamsiyah:hover {
  background-color: #D7D7D7;
}

.madda_normal {
  color: #537FFF;
}

.madda_permissible {
  color: #F38E02;
}

.madda_necessary {
  color: #A9045C;
}

.madda_obligatory, .madda_obligatory_mottasel, .madda_obligatory_monfasel {
  color: #F2007F;
}

.qalaqah {
  color: #009EE6;
}
.qalaqah:hover {
  background-color: #B3DEF4;
  color: #009EE6;
}

.ikhafa {
  color: #9400A8;
}
.ikhafa:hover {
  background-color: #DAA6E1;
  color: #9400A8;
}

.iqlab {
  color: #26BFFD;
}
.iqlab:hover {
  background-color: #92E5FF;
  color: #0099C5;
}

.idgham_shafawi {
  color: #58B800;
}
.idgham_shafawi:hover {
  background-color: #BAE890;
  color: #58B800;
}

.idgham_ghunnah {
  color: #169200;
}
.idgham_ghunnah:hover {
  background-color: #9CE58E;
  color: #169200;
}

.idgham_wo_ghunnah {
  color: #169200;
}
.idgham_wo_ghunnah:hover {
  background-color: #9CE58E;
  color: #169200;
}

.idgham_mutajanisayn, .idgham_mutaqaribayn {
  color: #A1A1A1;
}
.idgham_mutajanisayn:hover, .idgham_mutaqaribayn:hover {
  background-color: #D7D7D7;
}

.ghunnah {
  color: #FF7E1E;
}
.ghunnah:hover {
  background-color: #FF7E1E;
  color: black;
}

.quran-text {
  direction: rtl;
  font-size: 30px;
}

.surah-name {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0;
  position: relative;
}
@media (min-width: 768px) {
  .surah-name .quran-icon {
    font-size: 122px;
  }
}
@media (max-width: 767px) {
  .surah-name .quran-icon {
    font-size: 43px;
  }
}
.surah-name .surah-name-icon {
  position: absolute;
}
@media (min-width: 767px) {
  .surah-name .surah-name-icon * {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .surah-name .surah-name-icon * {
    font-size: 35px;
  }
}

.ayah-separator {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: var(--color-blue-500);
}

.ayah-separator::before,
.ayah-separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed var(--color-blue-300);
}

.ayah-separator::before {
  margin-right: 1rem;
}

.ayah-separator::after {
  margin-left: 1rem;
}

.verse-text {
  display: flex;
  flex-wrap: wrap;
  direction: rtl;
  position: relative;
}

.translation-name {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.word-container {
  display: inline-block;
  position: relative;
  margin: 0 2px;
  z-index: 1;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 4px;
}
.word-container:hover {
  background: var(--color-blue-200);
}
@media (min-width: 768px) {
  .word-container .qpc-hafs {
    font-size: 2.5rem;
  }
}
@media (max-width: 767px) {
  .word-container .qpc-hafs {
    font-size: 1.3rem;
  }
}

.mushaf-page {
  direction: rtl;
  text-align: right;
}

.english {
  text-align: left;
}

.arabic {
  direction: rtl;
}

.ab {
  color: var(--color-green-800);
}

.at {
  color: var(--color-blue-800);
  font-size: 1.2em;
  font-weight: bold;
}

.navy, .emph {
  color: #1301b8;
}

.navy-light, .conj {
  color: #0000ff;
}

.seagreen, .v {
  color: #32bd2f;
}

.seagreen-light {
  color: #3ece39;
}

.sky, .n {
  color: #548dd4;
}

.sky-dark, .pron {
  color: #3F70AA;
}

.sky-light {
  color: #6f9fdb;
}

.metal {
  color: #5c7085;
}

.metal-light {
  color: #70869c;
}

.rust, .p {
  color: #ad2323;
}

.rust-light {
  color: #d73535;
}

.gray, .det {
  color: #575757;
}

.orange, .impv {
  color: #e37010;
}

.orange-dark, .fut {
  color: #b65a0d;
}

.inl {
  color: #e3a10f;
}

.t {
  color: #89440a;
}

.orange-light {
  color: #ef7d21;
}

.purple, .adj {
  color: #8126c0;
}

.purple-light {
  color: #9a3cd9;
}

.blue, .pn {
  color: #257e9c;
}

.blue-light {
  color: #2e9abe;
}

.brown, .dem {
  color: #bf9f3e;
}

.brown-light {
  color: #c9ad58;
}

.rose, .intg {
  color: #fd5162;
}

.rose-light {
  color: #fd6675;
}

.gold, .rel {
  color: #817418;
}

.prp {
  color: #a8a800;
}

.gold-light {
  color: #97881c;
}

.red, .neg {
  color: #f4400b;
}

.red-light {
  color: #f76c44;
}

.green, .voc {
  color: #1d6914;
}

.green-light {
  color: #278e1c;
}

.pink {
  color: #a8017b;
}

.pink-light {
  color: #d8019c;
}

.silver {
  color: #b4b4b4;
}

.silver-light {
  color: #bebebe;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#audio-player button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.word-highlight {
  position: absolute;
  background: rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  height: 40px;
  pointer-events: none;
}

.highlighted-word {
  background: rgba(40, 167, 69, 0.3) !important;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.clicked-word {
  background: rgba(23, 162, 184, 0.4) !important;
  border-radius: 3px;
  border: 2px solid rgba(23, 162, 184, 0.6);
  transition: all 0.2s ease;
}

sup {
  font-size: 0.8em;
  vertical-align: super;
  cursor: pointer;
  color: var(--color-blue-400);
}

#word-modal-loading path {
  fill: var(--color-blue-200);
}