@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    /* === YIN COLOR PALETTE === */
    /* Celestial Blue Spectrum */
    --yin-celestial-blue-50: #f0f9ff;
    --yin-celestial-blue-100: #e0f2fe;
    --yin-celestial-blue-200: #bae6fd;
    --yin-celestial-blue-300: #7dd3fc;
    --yin-celestial-blue-400: #38bdf8;
    --yin-celestial-blue-500: #0ea5e9; /* Base Celestial Blue */
    --yin-celestial-blue-600: #0284c7;
    --yin-celestial-blue-700: #0369a1;
    --yin-celestial-blue-800: #075985;
    --yin-celestial-blue-900: #0c4a6e;
    /* Silver Spectrum */
    --yin-silver-50: #fafafa;
    --yin-silver-100: #f4f4f5;
    --yin-silver-200: #e4e4e7;
    --yin-silver-300: #d4d4d8;
    --yin-silver-400: #a1a1aa;
    --yin-silver-500: #71717a; /* Base Silver */
    --yin-silver-600: #52525b;
    --yin-silver-700: #3f3f46;
    --yin-silver-800: #27272a;
    --yin-silver-900: #18181b;
    /* === APPLICATION SPECIFIC VARIABLES === */
    --primary-yin: var(--yin-celestial-blue-500);
    --primary-yang: var(--warm-gold);
    --text-yin: var(--yin-silver-800);
    --text-yang: var(--rich-gold);
    --background-yin: var(--yin-silver-50);
    --background-yang: var(--pale-gold);
    /* Earth Spirituality Palette - Grounded mystical energy */
    /* Earth Spirituality Palette - Grounded mystical energy */
    /* Earth Spirituality Palette - Grounded mystical energy */
    --font-Iranian-Sans: 'Iranian Sans';
    --font-primary: 'Vazirmatn', 'Tanha', 'Segoe UI', sans-serif;
    --font-traditional: 'Mirza', 'Noto Naskh Arabic', 'Scheherazade New', serif;
    --font-ui: 'Vazirmatn', 'Iranian Sans', sans-serif;
    --font-display: 'Scheherazade New', 'Mirza', serif;
    --default-bg-image: url(/images/Backgrounds/Larg-YiJing-BG.webp);
    /* Colors */
    /* Original colors converted to RGB */
    --primary: rgb(44, 62, 44);
    --primary-light: rgb(61, 81, 61);
    --secondary: rgb(93, 78, 71);
    --secondary-h: rgb(77, 62, 55);
    --accent: rgb(156, 124, 90);
    --accent-dark: rgb(124, 92, 58);
    --light: rgb(248, 244, 233);
    --dark: rgb(26, 26, 26);
    --success: rgb(74, 120, 101);
    --success-dark: rgb(58, 95, 78);
    --warning: rgb(156, 124, 90);
    --gray: rgb(109, 109, 90);
    --light-gray: rgb(232, 228, 217);
    --background-gray: rgb(232, 230, 225);
    --hover-gray: rgb(216, 212, 201);
    --milky-brown: rgb(200, 176, 144);
    --secondary-bg: rgba(248, 244, 233, 0.5);
    --secondary-bg-light: rgba(248, 244, 233, 0.2);
    --soft-warm-white: rgb(248, 244, 233);
    --site-red: rgb(140, 43, 14);
    --border: rgb(156, 124, 90);
    --border-light: rgb(232, 228, 217);
    --border-dark: rgb(124, 92, 58);
    --turquoise-green: rgb(74, 140, 121);
    --turquoise-green-dark: rgb(58, 112, 96);
    --turquoise-green-darkest: rgb(42, 84, 72);
    --violet-dark: rgb(93, 75, 98);
    --violet-light: rgb(109, 97, 118);
    --main-bg-color: var(--light);
    --custom-dropdown-bg: rgba(44, 62, 44, 0.95);
    /* Expanded Warm Gold Palette */
    --pale-gold: rgb(255, 249, 227);
    --soft-gold-1: rgb(250, 240, 210);
    --soft-gold-2: rgb(245, 230, 190);
    --soft-gold-3: rgb(240, 220, 170);
    --soft-warm-gold: rgb(232, 216, 168);
    --warm-gold-light: rgb(225, 200, 150);
    --warm-gold: rgb(212, 180, 120);
    --golden-amber: rgb(200, 160, 100);
    --rich-gold: rgb(190, 150, 90);
    --deep-gold: rgb(170, 130, 70);
    --burnished-gold: rgb(150, 110, 60);
    --antique-gold: rgb(130, 100, 50);
    /* Expanded Success Palette (Green tones) */
    --success-50: rgb(245, 250, 248);
    --success-100: rgb(225, 240, 235);
    --success-200: rgb(195, 225, 215);
    --success-300: rgb(165, 210, 195);
    --success-400: rgb(120, 180, 160);
    --success-500: rgb(74, 120, 101);
    --success-600: rgb(66, 108, 91);
    --success-700: rgb(55, 90, 76);
    --success-800: rgb(44, 72, 61);
    --success-900: rgb(36, 58, 49);
    /* Expanded Site-Red Palette (Red tones) */
    --site-red-50: rgb(253, 245, 243);
    --site-red-100: rgb(250, 225, 219);
    --site-red-200: rgb(246, 195, 183);
    --site-red-300: rgb(242, 165, 147);
    --site-red-400: rgb(235, 125, 99);
    --site-red-500: rgb(140, 43, 14);
    --site-red-600: rgb(126, 39, 13);
    --site-red-700: rgb(105, 32, 11);
    --site-red-800: rgb(84, 26, 9);
    --site-red-900: rgb(68, 21, 7);
    /* Effects */
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --border-radius: 6px;
    --blur-intensity: 8px;
    /* Spacing */
    --section-spacing: 1.2rem;
    --small-container-max-width: 800px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    /* Optimized Typography Scale (modular scale ratio: 1.25) */
    --text-xs: 0.8rem; /* 12.8px */
    --text-sm: 1rem; /* 16px - minimum readable size */
    --text-base: 1.25rem; /* 20px - optimal body text size */
    --text-lg: 1.563rem; /* 25px */
    --text-xl: 1.953rem; /* 31.25px */
    --text-2xl: 2.441rem; /* 39px */
    --text-3xl: 3.052rem; /* 48.8px */
    --text-4xl: 3.815rem; /* 61px */
    --text-5xl: 4.768rem; /* 76.3px */
    /* Enhanced Line Heights (140-180% as recommended) */
    --leading-tight: 1.4; /* 140% - for UI elements */
    --leading-normal: 1.6; /* 160% - optimal for body text */
    --leading-relaxed: 1.9; /* 180% - for traditional/long text */
    --leading-display: 1.3; /* 130% - for headings */
    /* Font Weights (expanded range) */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    /* Max width for optimal reading */
    --text-max-width: 1000px;
    /* Letter spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
}
/* Responsive typography adjustments */

/* Responsive Typography Adjustments */
@media (max-width: 414px) {
    :root {
        --text-xs: 0.75rem; /* 12px */
        --text-sm: 0.875rem; /* 14px */
        --text-base: 1rem; /* 16px */
        --text-lg: 1.125rem; /* 18px */
        --text-xl: 1.25rem; /* 20px */
        --text-2xl: 1.5rem; /* 24px */
        --text-3xl: 1.75rem; /* 28px */
        --text-4xl: 2rem; /* 32px */
        --text-5xl: 2.25rem; /* 36px */

        --leading-normal: 1.7; /* Slightly more spacing for mobile */
        --space-xs: 0.2rem;
        --space-sm: 0.4rem;
        --space-md: 0.8rem;
        --space-lg: 1.2rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
    }
}

@media (min-width: 415px) and (max-width: 768px) {
    :root {
        --text-base: 1.125rem; /* 18px */
        --text-lg: 1.25rem; /* 20px */
        --text-xl: 1.5rem; /* 24px */
        --text-2xl: 1.75rem; /* 28px */
        --text-3xl: 2rem; /* 32px */
        --text-4xl: 2.25rem; /* 36px */
        --text-5xl: 2.5rem; /* 40px */
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --text-base: 1.15rem;
        --text-lg: 1.4rem; 
        --text-xl: 1.65rem; 
        --text-2xl: 1.85rem;
        --text-3xl: 2.3rem; 
        --text-4xl: 2.7rem; 
        --text-5xl: 3.1rem; 
    }
}

/* Fluid typography for large displays */
@media (min-width: 1201px) {
    :root {
        --text-base: clamp(1.15rem, 1.1vw, 1.25rem);
        --text-lg: clamp(1.35rem, 1.4vw, 1.55rem);
        --text-xl: clamp(1.6rem, 1.8vw, 1.85rem);
        --text-2xl: clamp(1.9rem, 2.2vw, 2.1rem);
        --text-3xl: clamp(2.2rem, 2.8vw, 2.5rem);
        --text-4xl: clamp(2.6rem, 3.5vw, 2.9rem);
        --text-5xl: clamp(3rem, 4.2vw, 3.3rem);
    }
}
.org-texts {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin:auto;
}
.fr-element {
    resize: vertical;
    overflow: auto;
}
.container-with-max-w {
    max-width: var(--text-max-width);
    margin: 0 auto;
}

#layout-main-content {
    max-width: 1400px;
}
.small-container-wrapper {
    max-width: var(--small-container-max-width);
    padding: var(--space-md);
    background-color: transparent;
    margin: 0 auto;
}
@media(max-width:768px){

    .small-container-wrapper {
        padding: var(--space-sm);
    }
}
@media(max-width:468px){

    .small-container-wrapper {
        padding: var(--space-xs);
    }
}
.main-container-width {
    margin-right: auto !important;
    margin-left: auto !important;
}
.attribution-text {
    font-size: var(--text-xs);
    margin: var(--space-sm) auto 0;
    color: var(--gray);
    line-height: var(--leading-normal);
    font-family: var(--font-primary);
    text-align:center;
}
a, button, form {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

}

.site-green {
    color: var(--success) !important;
}

.site-red {
    color: var(--site-red) !important;
}

.site-turqoise-green {
    color: var(--turquoise-green) !important;
}

.dir-ltr {
    direction: ltr;
}

.visible {
    display: block
}

.text-danger {
    color: #991903 !important;
}

@font-face {
    font-family: var(--font-primary);
    src: url('/css/Fonts/Iranian Sans.ttf') format('truetype')
}

html {
    background-color: var(--main-bg-color)
}

body {
    /* Background & Layout */
    background-image: url(/images/Backgrounds/body/yinyang-bg.webp);
    background-color: var(--main-bg-color);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain; /* Changed from auto to cover for better responsiveness */
    
    background-position: center center;
    z-index: 0;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    max-width: 100% !important;
    /* Enhanced Typography */
    font-family: var(--font-primary);
    font-size: var(--text-base); /* Using variable instead of fixed 1.1em */
    line-height: var(--leading-normal); /* Using variable */
    color: var(--dark);
    text-rendering: optimizeLegibility;
    /* Letter and word spacing optimized for Persian */
    letter-spacing: var(--tracking-tight);
    word-spacing: 0.05em; /* Slightly reduced for better Persian readability */
}

/* Responsive adjustments for body */
@media (max-width: 414px) {
    body {
        background-size: contain !important; /* Better for small screens */
        background-position: top center;
        font-size: var(--text-base); /* Will use the smaller mobile size */
        line-height: var(--leading-normal); /* Adjusts automatically */
        word-spacing: 0.03em; /* Tighter spacing on mobile */
    }
}


@media (min-width: 769px) and (max-width: 1200px) {
    body {
        font-size: var(--text-base); /* Larger size */
    }
}

@media (min-width: 415px) and (max-width: 768px) {
    body {
        background-size: contain;
        background-position: center;
        font-size: var(--text-base); /* Medium size */
    }
}
@media (min-width: 1201px) {
    body {
        font-size: var(--text-base); /* Uses fluid typography */
    }
}
    body:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #DAC2A0;
        opacity: 0;
        z-index: -1;
    }


/* Top border overlay - covers 10% width centered */
.border-overlay-top {
    position: relative;
}

    .border-overlay-top::before {
        content: "";
        position: absolute;
        top: -2px; /* Adjust based on your border thickness */
        left: 50%;
        transform: translateX(-50%);
        width: 10%;
        height: 4px; /* Thicker than original border to overlay */
        background: linear-gradient(90deg, transparent, var(--accent), var(--site-red), transparent);
        border-radius: 2px;
        z-index: 2; /* Ensure it overlays the existing border */
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .border-overlay-top:hover::before {
        opacity: 1;
        width: 15%; /* Slight expansion on hover */
    }

    /* Active state for permanent display */
    .border-overlay-top.active::before {
        opacity: 1;
    }

/* Bottom border overlay - covers 10% width centered */
.border-overlay-bottom {
    position: relative;
}

    .border-overlay-bottom::after {
        content: "";
        position: absolute;
        bottom: -1px; /* Adjust based on your border thickness */
        right: 0;
        width: 30%;
        height: 2px; /* Thicker than original border */
        background: linear-gradient(90deg, transparent,var(--success-500), var(--primary) );
        border-radius: 2px;
        z-index: 2;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .border-overlay-bottom:hover::after {
        opacity: 1;
        width: 40%;
    }

    .border-overlay-bottom.active::after {
        opacity: 1;
    }

/* Combined top and bottom overlay */
.border-overlay-both {
    position: relative;
}

    .border-overlay-both::before,
    .border-overlay-both::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 10%;
        height: 4px;
        border-radius: 2px;
        z-index: 2;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .border-overlay-both::before {
        top: -2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    .border-overlay-both::after {
        bottom: -2px;
        background: linear-gradient(90deg, transparent, var(--site-red), transparent);
    }

    .border-overlay-both:hover::before,
    .border-overlay-both:hover::after {
        opacity: 1;
        width: 15%;
    }

    .border-overlay-both.active::before,
    .border-overlay-both.active::after {
        opacity: 1;
    }
/* Expand to full width on hover */
.border-overlay-expand::before,
.border-overlay-expand::after {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.border-overlay-expand:hover::before,
.border-overlay-expand:hover::after {
    width: 100% !important;
    opacity: 1;
}
/* ===== BORDER EFFECTS SYSTEM ===== */
.border-effect {
    position: relative;
}

/* === FULL BORDER FRAME === */
.border-effect-full::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    background: linear-gradient(45deg, var(--accent), var(--secondary)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: 4px;
    transform: scale(1.02);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.border-effect-full:hover::before {
    opacity: 1;
}

/* === ASYMMETRICAL EFFECT === */
.border-effect-asymmetric::before,
.border-effect-asymmetric::after {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--accent);
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.border-effect-asymmetric::before {
    top: 0;
    left: 0;
    width: 30%;
}

.border-effect-asymmetric::after {
    bottom: 0;
    right: 0;
    width: 30%;
}

.border-effect-asymmetric:hover::before,
.border-effect-asymmetric:hover::after {
    width: 100%;
}

/* === CORNER HIGHLIGHTS === */
.border-effect-corners::before,
.border-effect-corners::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

.border-effect-corners::before {
    top: -2px;
    left: -2px;
    border-top-color: var(--accent);
    border-left-color: var(--accent);
}

.border-effect-corners::after {
    bottom: -2px;
    right: -2px;
    border-bottom-color: var(--accent);
    border-right-color: var(--accent);
}

.border-effect-corners:hover::before,
.border-effect-corners:hover::after {
    width: 100%;
    height: 100%;
}

/* === PULSE EFFECT === */
.border-effect-pulse::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    animation: pulse-line 2s infinite;
}

.border-effect-pulse:hover::after {
    transform: scaleX(1);
    animation: none;
}

@keyframes pulse-line {
    0%, 100% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }
}

/* === SCROLL-ACTIVATED EFFECTS === */
.border-effect.in-view::after,
.border-effect.in-view::before {
    transform: scaleX(1) !important;
}


/* Ensure text elements inherit the new typography system */
p, li, dd, dt, blockquote {
    font-size: inherit;
    line-height: var(--leading-normal);
    max-width: var(--text-max-width);
}

/* Headings with appropriate spacing */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    line-height: var(--leading-display);
    margin-bottom: var(--space-sm);
    max-width: var(--text-max-width);
}

h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

h4 {
    font-size: var(--text-md);
    font-weight: var(--font-medium);
}

h5 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

h6 {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color:var(--gray);
}

/* Traditional text elements */
.traditional-text, blockquote, .quote {
    font-family: var(--font-traditional);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-normal);
}

/* UI elements */
button, input, select, textarea, .btn, .form-control {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}

/* Notifications and alerts */
.alert, .notification, .toast {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-weight: var(--font-medium);
}

.label-note {
    font-size: 13px;
    color: var(--success);
}

@media(max-width: 767px) {
    .label-note {
        font-size: 9px;
    }
}

article {
    position: relative
}




.table-class {
    background-image: var(--default-bg-image);
    padding: 20px;
    margin: auto;
    border-radius: 5px;
    background-color: var(--main-bg-color);
    mix-blend-mode: multiply;
    opacity: 1
}

    .table-class textarea {
        width: 100%;
        min-height: 222px
    }

    .table-class form {
        margin: auto
    }

p, h1, h2, h3, h4, h5, h6 {
    cursor: default
}

.cursor-def {
    cursor: default
}


.content-middle-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center
}


#menu1 li {
    padding: 0;
    margin-bottom: 10px;
    width: 160px
}

#menu1 a {
    display: block;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 3px;
    font-weight: 700;
    font-size: 17px;
    color: #000;
    height: 30px;
    text-align: center;
    background-color: rgba(112,66,20,.98)
}

div.placeholder {
    height: 0;
    transition: height 0.1s ease
}

.bg-instruction-tips {
    border-right: 3px solid var(--success);
    border-radius: 0
}

    .bg-instruction-tips h6 {
        margin-top: 12px
    }

.instruction-img-div img {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    width: 100%;
    height: 100%
}

header .header-container {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid var(--border);
    border-top: 0
}

    header .header-container nav {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px
    }



#header {
    padding: 0;
    max-width: 100%
}

    #header h1, #header h2 {
        font-size: 1.4em
    }

#headerbgImg {
    pointer-events: none;
    position: absolute;
    width: auto;
    height: auto;
    z-index: -1;
    opacity: .5
}

.h5Heading {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border-radius: 25px;
    padding-bottom: 3px
}



#complete-Richard-Layout-header {
    max-width: 100% !important;
}

    #complete-Richard-Layout-header nav .nav-content .sticky {
        display: none
    }

html {
    font-size: 16px
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem white,0 0 0 .25rem #258cfb
}

html {
    position: relative;
    min-height: 100%
}

a {
    cursor: pointer
}


ul {
    list-style: none
}

h1, h2, h3, h4, h5 {
    /*color: #991903*/
}

li:hover {
    cursor: pointer
}

#tgl-icon {
    border: 0;
    background-color: transparent
}

    #tgl-icon span {
        font-size: 36px
    }

.img-col {
    position: relative;
    text-align: center;
    color: #fff;
    max-width: 84%;
    min-height: 121px;
    height: 150px;
    max-height: 100%;
    background-color: var(--turquoise-green);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px
}

    .img-col h1 {
        font-size: 2em;
        color: #991903;
        z-index: 1
    }

    .img-col h4, .img-col h5 {
        color: #000;
        z-index: 1
    }


.brief-div {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    position: relative;
    margin: auto;
    min-width: 320px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 5px
}

    .brief-div a {
        color: var(--border);
        font-size: 1.1em;
        font-weight: 700
    }

    .brief-div li {
        cursor: default
    }



.throw-coins-main-content {
    max-width: 528px;
    max-height: 100%;
}

#throw-row {
    max-width: 100%;
    max-height: 345px !important;
    margin: auto
}

.throwCoinsSubDiv {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    /*background-blend-mode: multiply;*/
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 5px;
    height: 345px;
    max-height: 345px;
}

#line-orginal-text {
    font-weight: 500
}

/*#question-div .question-txt {
    resize: vertical;
    white-space: pre-wrap;
    height: 81px;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--main-bg-color)
}

#question-div textarea:focus {
    border: 2px solid rgb(0,30,0);
    outline: none
}*/

.question-btn {
    border: 1px solid #000;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    max-width: 160px;
    text-align: center;
    background-color: var(--turquoise-green);
    display: block;
    margin: auto;
    height: 25px;
    width: 121px
}
/*#questionForm button:hover {*/ /*ادامه*/
/*background-color: green;
    color: var(--main-bg-color);
}*/
#instruction-three-section-btn {
    border: 1px solid #000;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    max-width: 160px;
    text-align: center;
    background-color: var(--turquoise-green);
    display: block;
    margin: auto;
    height: 25px;
    width: 100%
}

.btn-container {
    display: flex;
    flex-wrap: wrap
}

.btn-sample {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    border-radius: 5px;
    color: white;
    max-width: 315px;
    min-width: 180px;
    text-align: center;
    background: var(--turquoise-green-dark);
    display: block;
    margin: auto;
    width: auto;
    padding: 0 10px;
    min-height:35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

    .btn-sample:hover {
        background: var(--turquoise-green);
        color: antiquewhite;
    }


    .daily-tips {
        margin-bottom: 10px;
        padding: 5px;
    }
}

.daily-tips {
    margin-bottom: 20px;
    padding: 5px 10px;
}

.supportDiv {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 15px;
    line-height: 40px;
    margin: 0px auto 20px auto;
    min-width: 320px;
}

    .supportDiv h5 {
        text-align: center;
    }

.guid-support-box, #intro-box, #quote-box, #top-box {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border: 1px solid var(--border);
    margin: auto;
    margin-bottom: 20px;
    min-width: 320px;
    border-radius: 5px
}

#first-div-intro i {
    font-size: 12px
}

.rtl {
    direction: rtl
}

.txtalign-right {
    text-align: right
}

.drpdwnmenu {
    background-color: var(--milky-brown);
    border: 1px solid var(--border)
}

#left-col {
    display: none
}


.article-typical {
    border-radius: 3px;
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: rgb(0,30,0);
}

    .article-typical ul li {
        cursor: default;
    }

.line-shortkeys .inner-links a {
    font-size: 16px !important;
    padding: 5px;
    color: #0E2431;
    font-weight: 700;
    text-decoration: none;
}



#lines-num div span {
    height: 35px;
    width: 35px;
    text-align: right;
    font-size: 30px;
    font-weight: 700;
    padding: 0
}

#nav-top div button span {
    border: 2px solid #fff;
    border-radius: 3px;
    font-size: 36px;
    background-color: #fff;
    padding: 0 5px 0 5px
}

.m-oto {
    margin: auto
}

.blur {
    filter: blur(5px)
}


#Richard-Wilhelm-intro, #YiJing-intro, .TaoPageDiv {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    min-width: 320px;
    /*padding: 20px;*/
    border: 1px solid var(--border);
    border-radius: 5px;
    /*margin: 0 20px*/
}

.blockquote {
    text-align: left
}

#nav-Rich {
    display: block
}

    #nav-Rich div button span {
        border: 2px solid #fff;
        border-radius: 3px;
        font-size: 36px;
        background-color: #fff;
        padding: 0 5px 0 5px
    }


.default-bg {
    background-image: var(--default-bg-image);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border-radius: 5px
}

.default-bg-org {
    background-image: var(--default-bg-image);
    border-radius: 5px
}

.small-fs {
    font-size: .8em
}

#coins-lines-div img {
    cursor: pointer
}

#first-div-intro h1 {
    color: #991903;
    font-size: 17px;
    font-weight: bolder
}

.saved-result-image-container img, .saved-question-middle-image-container img {
    width: 128px !important; /* Larger width for larger screens */
    height: 24px !important;
    margin-top: 0 !important;
}

.saved-question-middle-image-container button {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
}

    .saved-question-middle-image-container button:hover {
        background-color: rgb(0, 206, 209);
    }

@media(min-width:992px) {

    .line-shortkeys .inner-links a:hover {
        color: var(--turquoise-green)
    }



}

@media(min-width:767px) and (max-width:991px) {
    
}

@media(min-width:415px) and (max-width:766px) {


    /*saved questions partial view*/
    .saved-result-image-container img, .saved-question-middle-image-container img {
        width: 90px !important; /* Ensure consistent styling */
        height: 19px !important;
        margin-top: 0 !important;
    }

    .saved-result-image-container h6 {
        font-size: .9em !important; /* Maintain font size */
    }

    .line-shortkeys .inner-links a {
        font-size: 14px !important
    }


}

@media(max-width:414px) {
    nav {
        background-color: none
    }

    .line-shortkeys .inner-links a {
        font-size: 10px !important
    }

}

.tableCss {
    background-image: url(/images/backgrounds/larg-yijing-bg.jpg);
    background-color: var(--main-bg-color);
    background-blend-mode: multiply;
    border-radius: 15px;
    width: 100%;
    padding: 20px 15px 20px 15px
}


/*                    */
/*                    */
/*  relate to Quotes  */
/*                    */
/*                    */
.quote--wrapper {
    border-right: 4px solid rgb(0,121,0);
    margin-bottom: 15px;
    background-image: url(/images/Backgrounds/Larg-YiJing-BG.webp);
    background-color: #f9f9f9;
    background-blend-mode: multiply;
    margin: 20px 0;
    padding: 5px;
}

.quote-content {
    display: inline-block;
    padding: 20px 20px 20px 10px;
    margin-bottom: 5px;
    text-align: justify; /* align the text */
    font-weight: 550;
}

.quote-owner {
    display: block;
    text-align: left; /* align to the left */
    color: #555; /* grey color */
    font-weight: 600;
    font-size: 0.8em; /* smaller font size */
    margin-top: 10px; /* some margin at the top */
    padding: 0 0 5px 20px;
}

.bi.bi-quote {
    font-size: 1.3em;
    transform: scaleX(-1);
}
/*login forms*/
.registery-login-form, .password-login-form, .verifyCode-login-form {
}

    .registery-login-form label, .password-login-form label, .verifyCode-login-form label {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
    }

.required {
    color: var(--site-red);
}

.registeryForm-container .btn-sample {
    margin: 5px 0;
}
/* Align the button to the right */
.verifyCode-login-form .btn-sample {
}

/* Other styles */
#verify-code-timer-span {
    font-size: 15px;
}

.resend-verifyCode {
    cursor: pointer;
    font-size: 15px;
    color: rgb(0, 121, 0);
}

.badrequest-errors-messages ul {
    padding: 0;
    margin-top: 3px;
}

.badrequest-errors-messages {
    color: var(--site-red);
    font-size: 15px;
}

/* Overlay styling */
#login-save-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: auto;
}

/* Back login arrow container */
.registeryForm-container {
    position: relative;
    padding: 20px 10px;
}

.back-login-save-container {
    position: absolute;
    top: 0px;
    right: 5px;
    color: var(--site-red);
    font-size: 26px;
    cursor: pointer;
    transition: color 0.3s;
}

    .back-login-save-container:hover {
        color: var(--main-bg-color);
    }


/*use password instead and use code insteade
.use-oneTime-code-instead,
.use-password-instead-locked,
.use-password-instead */
.registeryForm-container a {
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    border-radius: 5px;
    font-weight: 600;
    font-size: 12px;
    color: #000;
    text-align: center;
    display: block;
    margin: auto !important;
    height: 42px;
    width: auto;
    padding: 10px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s;
}

@media(max-width:767px) {
    #verify-code-timer-span, .resend-verifyCode {
        font-size: 12px;
    }
}
/*body {
    font-size: clamp(14px, 2.5vw, 24px); for furthure improvements
}*/
/*position: absolute;
        right: 230px; 
top: 25%;
transform: translateY(-25%);*/
#login-save-container .alert-wrapper {
    position: absolute;
    background-image: var(--default-bg-image);
    background-color: rgb(255, 255, 204);
    background-blend-mode: multiply;
    padding: 2rem;
    border-radius: 5px;
    max-width: 90%;
    width: 100%;
    border: 1px solid var(--border);
    /*top: 10%;*/
}

#login-save-container .alert-box {
    padding: 1rem 2rem;
    min-height: 222px;
}
/*new user informal div*/

/**/
/*collapse function*/
/**/
.content-container {
    position: relative;
    padding-bottom: 20px; /* Space for button */
}

.content {
    overflow: hidden;
    position: relative;
    /* No max-height here; it will be controlled via JS */
}

.content-container::after {
    opacity: 0; /* Hide the shadow effect when collapsed */
}

.content-container.collapsed::after {
    content: '';
    position: absolute;
    top: 168px; /*Cover entire content */
    left: 0;
    right: 0;
    bottom: 20px; /* Adjusted for button */
    background: linear-gradient(to bottom, transparent, var(--turquoise-green));
    opacity: 0.7;
    pointer-events: none; /* Ensure it doesn't interfere with interactions */
    transition: opacity 0.3s ease; /*Add a smooth transition effect */
}


.bi-chevron-down, .bi-chevron-up {
    font-size: 14px;
    /*font-weight: bolder;*/
}

@media (max-width: 767px) {
    .content-container {
        padding-bottom: 20px;
    }

    .content.collapsed::after {
        bottom: 15px; /* Adjusted for button */
    }

    .bi-chevron-down, .bi-chevron-up {
        font-size: 15px;
        font-weight: bolder;
    }
}



.button-spinner {
    width: 15px;
    height: 15px;
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid var(--turquoise-green); /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    /*display: none;*/
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*personal information and register*/
.register-button-container {
    width: fit-content; /* To make the width fit the content */
    margin: 20px auto; /* Center horizontally with auto margins */
    text-align: center; /* Center text within the div */
}
/*submit-form-newUser*/
.submit-form-newUser {
    text-align: right;
    padding: 5px 10px;
}

    .submit-form-newUser label {
        display: block;
    }

    .submit-form-newUser input {
        border-radius: 5px;
        margin-bottom: 15px;
    }

.new-password-div input,
.confirm-password-div input {
    padding-left: 10px; /* Adjust the padding to make space for the eye icon */
    width: 256px;
}

.new-password-div span,
.confirm-password-div span {
    position: absolute;
    right: 230px; /* Adjust the right position to align the eye icon */
    top: 25%;
    transform: translateY(-25%);
    cursor: pointer;
}

/*Make sure to apply relative positioning to the parent container*/
.new-password-div,
.confirm-password-div,
.password-login-form {
    position: relative; /* This allows the icon to be absolutely positioned relative to this wrapper */
    width: fit-content; /* Allows the wrapper to fit the input's width */
    /*margin: auto;*/
    margin-top: 5px;
}

    .new-password-div input,
    .confirm-password-div input,
    .password-login-form input {
        padding-left: 30px;
    }

/* Style for the toggle button */
.togglePasswordType {
    position: absolute; /* Position the icon absolutely */
    left: 5px; /* Distance from the right edge of the input */
    top: 50%; /* Center it vertically */
    transform: translateY(-50%); /* Adjust to center the icon perfectly */
    cursor: pointer !important; /* Change cursor to a pointer for better UX */
    z-index: 1; /* Ensure it’s above the input element */
}

    /* Optional: To make sure the icon is aligned */
    .togglePasswordType i {
        font-size: 1.2rem; /* Adjust icon size as needed */
    }


/*home index yijing footer link*/
.styled-link {
    font-weight: bold;
    /*color: var(--turquoise-green);*/
    text-decoration: none;
    padding: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

    .styled-link:hover {
        background-color: #f0f0f0;
        color: #0056b3;
    }
/*article count*/
.article-count {
    background: linear-gradient(135deg, var(--warm-gold), var(--antique-gold));
    color: var(--light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: var(--space-xs);
    box-shadow: 0 2px 8px rgba(93, 78, 71, 0.3);
    transition: var(--transition);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}


    /* Pulse animation for attention */
    .article-count::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 22px;
        border: 1px solid var(--soft-warm-gold);
        opacity: 0;
        animation: pulse 2s infinite;
    }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.1);
        opacity: 0;
    }

    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-count {
        font-size: 0.7rem;
        padding: 2px 6px;
        min-width: 20px;
        height: 20px;
        margin-right: 3px;
    }
}

@media (max-width: 480px) {
    .article-count {
        font-size: 1rem;
        padding: 1px 4px;
        min-width: 24px;
        height: 24px;
        border-radius: 16px;
    }

        .article-count::after {
            display: none; /* Disable animation on very small screens */
        }
}

/* Alternative style for when count is very large */
.article-count.large-number {
    font-size: 0.6rem;
    padding: var(--space-xs) 5px;
}

/* Style variations based on count range */
.article-count[data-count="0"] {
    background: linear-gradient(135deg, var(--gray), var(--secondary));
    opacity: 0.7;
}

.article-count[data-count^="1"]:not([data-count="10"]):not([data-count="11"]):not([data-count="12"]) {
    background: linear-gradient(135deg, var(--success-400), var(--success-500));
}

.article-count[data-count^="5"] {
    background: linear-gradient(135deg, var(--warm-gold), var(--golden-amber));
}

.article-count[data-count^="10"] {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.article-count[data-count^="20"] {
    background: linear-gradient(135deg, var(--site-red-400), var(--site-red-500));
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 2px 8px rgba(140, 43, 14, 0.3);
    }

    to {
        box-shadow: 0 2px 12px rgba(140, 43, 14, 0.6);
    }
}
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}