/* ==========================================================================
   1. GENERAL & TYPOGRAPHY
   ========================================================================== */
#filterInput {
    width: calc(100% - 30px);
    margin: 0 15px 10px;
    border: 2px solid #ddd;
    height: 34px;
    border-radius: 25px;
    font-size: var(--text-14);
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 12px 15px;
    font-family: var(--font-bn), sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

pre {
    padding: 10px;
    background: #fafafa;
    color: var(--color-on-surface);
    tab-size: 4;
    overflow: auto;
    border: 1px solid #ddd;
    font-size: var(--text-md); line-height: 18px; font-family: var(--font-bn), Consolas, monospace, serif;
    white-space: pre-line;
    line-break: auto;
    border-radius: var(--radius-md);
    margin-top: 2px;
}

/* Global Misc */

#menuPorichiti a.quran_list.uldeign { height: 37px; font-size: var(--text-22); }

/* ==========================================================================
   2. SWITCH FIELDS & RADIO UI
   ========================================================================== */
.switch-field, .switch-field-two {
    display: flex;
    margin: 0 0 36px 8px;
    overflow: hidden;
}
/* Hidden scrollbar — scroll works but bar invisible */
.switch-field, .switch-field-two, .switch-fieldNew {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.switch-field::-webkit-scrollbar,
.switch-field-two::-webkit-scrollbar,
.switch-fieldNew::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

.switch-field-two {
    margin-bottom: 9px;
    flex-direction: column;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0,0,0,0);
    height: 1px; width: 1px;
    border: 0; overflow: hidden;
}

.switch-field label {
    color: rgba(0,0,0,.6); font-size: var(--text-14); line-height: 1; text-align: center;
    padding: 8px 7px; border: 1px solid rgba(0,0,0,.2); transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
    width: 30%; margin: 0 9px 6px 0; border-radius: 15px;
}

.switch-field-two label {
    width: 97%; font-size: var(--text-base); cursor: pointer; 
    font-weight: 600; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.switch-field input:checked+label {
    background-color: #a5dc86; box-shadow: none;
    background-image: linear-gradient(261deg, #84d6ff 0%, #b79aff 100%);
}

.switch-field input:checked+label::before {
    content: "\2713"; display: inline-block; margin-right: 5px; font-size: var(--text-14); color: #fff;
}

.switch-field-container {
    position: relative; z-index: 999; font-style: italic;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.switch-field-container.sticky-active {
    position: fixed !important; left: 0 !important; right: 0 !important; z-index: 999 !important;
    background-color: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

.switch-field.switch-field-two.switch-fieldNew { margin: 0; padding: 7px 17px 0 18px; }
.switch-field-container.sticky-active .switch-field.switch-field-two.switch-fieldNew { background-color: transparent; }

/* Switch Field Quick Icons (mushaf + audio) — desktop only */
.switch-field-container { display: flex; align-items: center; }
.switch-field-container .switch-field { flex: 1; min-width: 0; }
/* M3 Segmented Group Button */
.sf-quick-icons { display: flex; gap: 0; padding: 0 0px 0 0px; flex-shrink: 0; background: #e8eaf6; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-right: 27px; }
.sf-icon-btn { width: 66px; height: 37px; border: none; border-radius: 0; background: #ffffffbf; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, box-shadow .2s; padding: 0; position: relative; }
.sf-icon-btn:first-child { border-radius: 14px 0 0 14px; padding-left: 2px; }
.sf-icon-btn:last-child { border-radius: 0 14px 14px 0; padding-right: 2px; }
.sf-icon-btn + .sf-icon-btn::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: #c5cae9; }
.sf-icon-btn:hover { background: rgba(21,101,192,.10); }
.sf-icon-btn:active { background: rgba(21,101,192,.18); }
.sf-icon-btn svg { width: 22px; height: 22px; fill: #1565c0; transition: fill .2s; }
.sf-icon-btn:hover svg { fill: #0d47a1; }

/* Enhanced Switch Field Styles (.seo-radio-link) */
.switch-fieldNew {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px;
    padding: 15px; align-items: center; flex-direction: row;
}

.radio-label-pair { align-items: center; white-space: nowrap; flex-shrink: 0; }

.seo-radio-link:hover label {
    background-color: #a5dc86; color: white; border-color: #8bc34a;
    box-shadow: 0 3px 12px rgba(165, 220, 134, 0.3); transform: translateY(-1px);
}
.seo-radio-link:focus, .seo-radio-link:focus-visible { outline: 3px solid #3498db; outline-offset: 2px; border-color: #3498db; }

.seo-radio-link.active label { background-color: #a5dc86; color: white; border-color: #8bc34a; box-shadow: 0 3px 12px rgba(165, 220, 134, 0.3); }
.seo-radio-link.active label::before {
    content: "\2713"; display: inline-block; margin-right: 8px; font-size: var(--text-base);
    color: #fff; font-weight: bold; animation: tickAppear 0.3s ease-out;
}

.seo-radio-link.active .textViewChoose { display: none; }
.seo-radio-link:not(.active) .textViewChoose { display: inline-block; }

.seo-radio-link.loading { opacity: 0.7; pointer-events: none; }
.seo-radio-link.loading label::after { content: "..."; margin-left: 5px; }

/* Dark mode support */
[data-theme="dark"] .seo-radio-link { background-color: var(--dm-surface); color: var(--dm-text-secondary); border-color: var(--dm-border); }
[data-theme="dark"] .seo-radio-link:hover { background-color: var(--dm-surface-hover); border-color: var(--dm-border-strong); color: var(--dm-text); }
[data-theme="dark"] .seo-radio-link.active { background-color: rgba(60,186,84,0.15); color: var(--dm-accent-green); border-color: var(--dm-accent-green); }
[data-theme="dark"] .seo-radio-link.active label::before { color: var(--dm-accent-green); }

/* Sidebar CSS Isolation & Texts */
#sidebar_secondary label { font-size: var(--text-sm); color: #333; cursor: pointer; }
#sidebar_secondary .textViewChoose, .switch-fieldNew .textViewChoose { margin: 0 8px 0 0; }

@keyframes tickAppear {
    0% { opacity: 0; transform: scale(0.5); }
    50% { transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   3. LOADERS / WAIT SPINNERS
   ========================================================================== */
#wait3 {
    width: 30%; max-width: 82px; height: auto; border: 0 solid transparent;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    padding: 2px; display: inline; z-index: 2000;
}

/* ==========================================================================
   4. QURAN LAYOUT (SURAH, AYAH, BISMILLAH)
   ========================================================================== */
.background {
    fill: none; stroke: #fafafa; stroke-width: 5px;
    stroke-dasharray: 800px; stroke-dashoffset: 0;
    opacity: 0; animation: 4s circle-outline infinite alternate;
}

.ayah-bullet { --size: 30px; width: var(--size); height: var(--size); }
.ayah-bullet { margin-left: 20px; }

/* showDropDown icon moved to masterCSS_core.css (all pages) */

.ayah-bulletss::before {
    content: ''; background-repeat: no-repeat; background-size: cover;
    width: 20px; height: 20px; position: absolute; left: -31px; top: 8px;
}
@media (min-width: 1171px) {
  .ayah-bulletss { position: relative; cursor: pointer; border-radius: var(--radius-full); transition: background .2s, transform .2s; }
  .ayah-bulletss:hover { background: rgba(0,0,0,.07); transform: scale(1.15); }
}



#surah { margin-top: 1px; flex-direction: column; align-items: center; display: flex; justify-content: center; }
#surah .basmalah { text-align: center; padding-top: 10px; }
.basmalah { height: 85px; max-width: 250px; }
.bismillahText { height: 75px; }

#surah .ayah .ayah-wrapper, .ayah { display: block; justify-content: center; }
.ayah { outline: 0; width: 97%; margin-top: 10px; border-radius: var(--radius-xl); box-shadow: var(--elevation-2); contain: layout style paint; content-visibility: auto; contain-intrinsic-size: auto 220px; }
/* Ayah playing highlight */
.ayah.ayah-playing { box-shadow: 0 0 0 2px var(--color-primary), 0 4px 16px rgba(21,101,194,.18); background: rgba(21,101,194,.03); transition: box-shadow .3s, background .3s; }
/* Ayah play button — small flat icon next to dots (overrides universalAudioPlayer.css) */
.ayah-play-btn.quran-audio-btn { display: none !important; }
.ayah-play-btn.quran-audio-btn svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
.ayah-play-btn.quran-audio-btn:hover { background: #bbdefb; box-shadow: none; transform: scale(1.1); }
.ayah-play-btn.quran-audio-btn.playing { background: #e3f2fd; color: var(--color-primary); animation: none; box-shadow: none; }
.ayah-play-btn .pause-icon { display: none; }
.ayah-play-btn.playing .play-icon { display: none; }
.ayah-play-btn.playing .pause-icon { display: block; }

#surah .ayah .ayah-wrapper { width: 100%; padding: 17px; flex-direction: column; align-items: center; }
#surah .ayah .ayah-wrapper .ayah-upperpart { display: block; width: 100%; margin-bottom: 15px; }
#surah .ayah .ayah-wrapper .ayah-upperpart-mobile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#surah .ayah .ayah-wrapper .ayah-upperpart-mobile .surah-ayah-index {
    font-size: var(--text-xl); color: #000; background-color: var(--grey-light-border); line-height: 20px; padding: 5px;
}

#surah .ayah .ayah-wrapper .ayah-lowerpart { display: flex; flex-direction: column; width: 100%; }
.ayah-lowerpart { width: 100%; }
.main-surahbox { width: 100%; }
#surah .ayah .surah-ayah-index { font-weight: 400; font-size: var(--text-xl); color: var(--logo-bg); margin-right: 30px; line-height: 70px; font-family: var(--font-bn); }
#surah .ayah .ayah-p { font-family: var(--font-quran-display),serif; direction: rtl; text-align: right; color: var(--surah-text); }

/* --quran-bn-font-sz controlled by Bengali font slider; fallback 23px */
.translationText { font-size: var(--quran-bn-font-sz, 23px); font-family: var(--font-bn) !important; margin: 3px 0 10px 0 !important; direction: ltr; color: var(--surah-text); text-align: left; }

.suranameCaliHolder1, .suranameCaliHolder3 {
    width: 25%; float: left; padding: 15px; height: 40px; max-width: 130px;
    background-image: url(../img/suraNameCaligraphySide.png); background-size: 100% 100%; margin: .3% 0 0 0;
}
.suranameCaliHolder2 {
    width: 50%; float: left; padding: 15px; height: 45px; max-width: 250px;
    background-image: url(../img/suraNameCaligraphySVG.svg); background-size: 100% 100%;
    font-size: var(--text-lg); text-align: center; margin: 3px 0 0 0;
}

.suranameCaliHolder-suraName2 { text-align: center; font-size: var(--text-18)!important; margin-top: -11px; line-height: 100%; color: coral; }
.suranameCaliHolder-suraName13 { font-size: var(--text-base) !important; text-align: center; margin-top: -3px; line-height: 100%; cursor: pointer; }

.pageFilterButton { right: 20px; position: absolute; top: 5px; cursor: pointer; }
.pageFilterButtonImage { width: 50px; height: 50px; }
.rl { float: none; padding: 0 12px; margin-top: 10px; }
.row { margin-right: 0; }
.numberDesign { width: 50px; height: 50px; color: #00f; }
.vhumikaText { font-size: var(--text-18); cursor: pointer; }
.transLationTitle {
 display: inline-block;
    order: -1;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #424a54c7;
      border-radius: var(--radius-xs);
    padding: 2px 8px;
     font-style: italic;
}
.trans-verse.translationText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.suraAyatNumber {
    font-weight: 400; font-size: var(--text-md); color: var(--color-accent-purple); margin-right: 20px;
    font-family: var(--font-bn),arial,sans-serif; border: 1px solid rgba(190, 187, 187, 0.27);
    border-radius: 50px; height: 21px;
}

.suraAyatNumberMobile {
    font-family: var(--font-bn),arial,sans-serif; color: var(--color-accent-purple);
    border: 1px solid rgba(190, 187, 187, 0.27); border-radius: 50px; height: 14px; font-size: var(--text-sm);
}

.ayah-middle-part { display: flex; flex-wrap: wrap!important; justify-content: right; flex-flow: row-reverse; text-align: right; width: 100%; margin: 0; }

/* --quran-ar-font-sz set by inline <script>; fallback 16px */
.arabicText { margin-bottom: 8px; direction: rtl; font-size: var(--quran-ar-font-sz, 16px); font-family: var(--font-arabic), serif; text-align: right; margin-inline-end: auto; color: var(--surah-text); }
.arabicText2 { margin: -5px 0 8px 0; font-size: var(--text-14); color: #00f; line-height: 17px; }
.normalArabicText { font-size: var(--quran-ar-font-sz, 24px); font-family: var(--font-arabic) !important; }

/* ==========================================================================
   5. QURAN BYWORDS, CONTAINERS & TWEAKS
   ========================================================================== */
.container { margin: 0 auto; display: block; max-width: 800px; }
.container>:not(.tab-wrap) { padding: 0 80px; }

.acordingAyah .ayah {
    outline: 0; width: 100%; margin-top: 1px; background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-lg); box-shadow: 7px 14px 20px 11px rgba(192, 186, 186, 0);
    --tw-shadow: 0px 4px 24px 0px rgba(88, 102, 126, 0), 0px 1px 2px 0px rgba(88, 102, 126, 0);
    --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}

.acordingAyah .ayah-wrapper { border: 2px solid rgba(129, 122, 122, 0.12); padding: 0 5px; width: 102%; border-radius: 18px; }

.bywords-word { display: inline-block; margin: 2px; text-align: center; background: transparent; border-radius: 30px; padding: 0 7px 7px; cursor: pointer; }
.bywords-word:hover { --tw-bg-opacity: 1; background-color: rgba(217, 237, 235, var(--tw-bg-opacity)); }

.Qflex-container { display: flex; height: auto; min-height: 45px; gap: 5px; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
.Qitem1 { flex-grow: 25; } .Qitem2 { flex-grow: 50; } .Qitem3 { flex-grow: 25; }


#load2TabHeaderTop {
    width: 97.5%; min-height: 45px; background-color: rgba(243, 254, 255, 0.9);
    border: .5px solid #ccc; border-top-width: 0; border-radius: var(--radius-xl);
    margin: 8px 0 0 11px; position: relative; z-index: 1000;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block; align-items: center; box-shadow: 0 4px 25px -7px rgba(9,136,183,.2);

}

#load2TabHeaderTop.sticky-active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1001 !important; }

.load2TabHeaderTop { display: flex; align-items: center; border: .5px solid #ccc; }
.trans-verse { margin: 0; padding: 1px 0; font-size: var(--quran-bn-font-sz, 15px); font-family: var(--font-bn) !important; }
.ayah-paragraf { margin: 0; padding: 2px 4px; font-size: var(--quran-ar-font-sz, 25px); font-family: var(--font-arabic) !important; cursor: pointer; }
.cursor-pointer { cursor: pointer; }

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: stretch; }
.flex-items:nth-child(1), .flex-items:nth-child(2), .flex-items:nth-child(3) { display: block; flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; }
.flex-items:nth-child(3) { flex-shrink: 0; }

.uk-accordion-content .ayah { width: 100% !important; }
#surah .uk-accordion-content { padding: 2px; }
#respon .ayah { width: 97%; }

/* ==========================================================================
   6. QURAN UI COMPONENTS
   ========================================================================== */
.quran-main-container { display: flex; width: 85%; height: 100%; gap: 0; }
#quran-menu-slot { flex: 1; min-width: 0; }
.quranMenu { flex: 1; margin-top: 0; padding-top: 0; width: calc(100% - 50px);     width: 100%; }
.quranMenu > li { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 52px; }
.quranMenu .quran_list { padding: 8px 10px 2px!important; }
.quran_list { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; }
.content p, .quranMenu .cal { font-size: var(--text-base); }

.quranMenu .cal::after, .quranMenu .calif::before {
    content: ""; display: block; width: 0; height: 0;
    background-image: url(../assets/library/cd-icons.svg); background-repeat: no-repeat; margin-right: var(--space-xxxs);
}

.ayat-sidebar {
    position: fixed !important; right: 0; top: 179px; bottom: 0; width: 50px;
    background: transparent; border-left: 1px solid transparent; padding: 5px;
    box-shadow: inset 1px -8px 11px 0 rgba(0, 0, 0, 0.1); z-index: 1000; overflow-y: auto; border-radius: var(--radius-2xl);
}
.ayat-sidebar::-webkit-scrollbar { width: 4px; }
.ayat-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.ayat-sidebar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
.ayat-sidebar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

.ayat-item {
    display: block; width: 35px; height: 30px; line-height: 30px; text-align: center; margin: 2px auto;
    background: rgba(248, 249, 250, 0.41); border: 1px solid transparent; border-radius: 15px;
    font-size: var(--text-xs); font-weight: bold; color: #495057; cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease; font-family: var(--font-bn), sans-serif;
}
.ayat-item:hover { background: #007bff; color: white; transform: scale(1.05); }

.ayat-placeholder { padding: 20px 5px; text-align: center; color: #888; font-size: var(--text-2xs); font-family: var(--font-bn), sans-serif; line-height: 1.3; }

.suraNumberBack {
    content: " "; background-image: url(../img/qNumberDes2.svg); background-repeat: no-repeat;
    background-size: cover; width: 41px!important; height: 43px; position: absolute; left: 5px; top: 3px;
}
.suraNumberSize { margin-left: 8px; margin-top: -3px; padding-top: 10px; position: absolute; font-size: var(--text-md); }
.menuSuraDetails, .menuSuraNameText { margin-left: 51px; }
.menuSuraNameText { font-size: var(--text-18); }
.menuSuraDetails { color: rgba(40, 104, 156, 0.49); font-size: var(--text-root); display: block; margin-left: 51px; }
.menuSuraNajilPlace { color: darkorchid; }
.suraBanglameaningSize { font-size: var(--text-root); color: #556b2f; }

/* ==========================================================================
   MUSHAF MODE — Extracted to masterCSS_quran_mushaf.css (lazy-loaded)
   ========================================================================== */

/* ==========================================================================
   6b. QURAN SIDE-BY-SIDE VIEW (desktop only)
   ========================================================================== */
@media (min-width: 1171px) {
  body.quran-view-sideBySide #surah .ayah .ayah-wrapper {
    display: flex !important; flex-direction: row !important; gap: 16px; align-items: stretch; flex-wrap: wrap;
  }
  body.quran-view-sideBySide #surah .ayah .ayah-wrapper .ayah-upperpart-mobile {
    flex: 0 0 100%; order: 0;
  }
  body.quran-view-sideBySide #surah .ayah .ayah-wrapper .ayah-upperpart {
    flex: 1 1 0; min-width: 0; width: auto !important;
    display: block;
    order: 2; margin-bottom: 0;
    background: rgba(248,249,250,.45); border-radius: 10px; padding: 12px;
    border-right: 3px solid var(--logo-bg, #1a73e8);
  }
  body.quran-view-sideBySide #surah .ayah .ayah-wrapper .ayah-lowerpart {
    flex: 1 1 0; min-width: 0; width: auto !important;
    order: 1;
    padding: 8px 12px; border-radius: 10px;
    border-left: 3px solid #28a745;
  }
}

/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1566px) {
    #surah .ayah .surah-ayah-index { font-size: var(--text-3xl); }
}

@media (max-width: 1170px) {
    #surah .basmalah { padding: 0 30px; }
    #surah .ayah .ayah-wrapper { width: 92vw; }
    .ayah-bullet { --size: 20px; width: var(--size); height: var(--size); }
}

/* Ayah mobile number badge + dots */
.ayah-number-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 24px; padding: 0 8px;
    background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: var(--radius-md);
    font-family: var(--font-bn), sans-serif; font-size: var(--text-sm); font-weight: 600;
    color: var(--color-accent-indigo); line-height: 1;
}
.ayah-mobile-dots {
    border: none; background: none; cursor: pointer; padding: 4px 6px;
    font-size: var(--text-xl); color: var(--icon-btn-color); line-height: 1; border-radius: var(--radius-full);
    transition: background .2s; display: inline-block;
}
/* Quran page: horizontal dots */
#surah .ayah-mobile-dots { transform: rotate(90deg); }
.ayah-mobile-dots:hover { background: rgba(0,0,0,.06); }

.ayah-mobile-suraname {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-bn), sans-serif; font-size: var(--text-root); color: #666; line-height: 24px;
}

@media only screen and (max-width: 768px) {
    /* Hide desktop-only quick icons on mobile */
    .sf-quick-icons { display: none; }
    /* Switch Field Mobile */
    .switch-field.switch-field-two.switch-fieldNew { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; margin: 0; padding: 9px 7px 2px 6px; }
    .seo-radio-link { padding: 0 1px; min-height: 36px; }
    .switch-field-two label { font-size: var(--text-14); padding: 8px 4px; }
    .seo-radio-link.active label::before { font-size: var(--text-14); margin-right: 6px; }
    .radio-label-pair { flex-shrink: 0; }
      .switch-field-container.sticky-active { font-size: var(--text-14); background-color: #e4ecfe !important; }
   
    /* Quran Surah Headers & UI */
    .suranameCaliHolder-suraName2 { text-align: center; font-size: var(--text-sm)!important; margin-top: -5px; }
    .suranameCaliHolder2 { margin-left: 0; width: 100%; max-width: 190px; height: 45px; font-size: var(--text-sm)!important; }
    .suranameCaliHolder1, .suranameCaliHolder3 { margin-left: 0; height: 40px; width: 70px; font-size: 9px!important; }
    
    #load2TabHeaderTop {
        box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.2); min-height: 45px; border-radius: 10px;
        background-color: rgba(243, 254, 255, 0.9); border: 0 solid #fafafa; border-top-width: 0;
        width: 97%; margin: 7px 0 0 5px;
    }

     .ayah { width: 95% !important; }
}

@media only screen and (max-width: 600px) {
    .dd { display: inline; }
}

@media only screen and (min-width: 769px) {
    .suraAyatNumberMobile { display: none; }
}