.icon::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Custom classes for each icon */
.copy::before {
    content: "content_copy";
}

.repeat::before {
    content: "repeat";
}

.share::before {
    content: "share";
}

.refresh:before {
    content: "refresh";
}

.arrow_upward:before {
    content: "arrow_upward";
}

.menu:before {
    content: "menu";
}

.lightbulb:before {
    content: "lightbulb";
}

.close_small:before {
    content: "close";
}

.arrow_back:before {
    content: "arrow_back";
}



@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --m-c: #6758ff;
    --s-c: #4f1e9d;
    --bg: #efefef;
    --box-shadow: rgba(17, 18, 54, 0.16);
    --box-shadow-left: -5px 0px 17px 0 rgb(0 0 0 / 28%);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--m-c) #f1f1f1;
    scroll-behavior: smooth;
}

#tL a {
    color: #ffffffda;
    background: var(--m-c);
}

#cB,
#index .textfaces,
.index .textfaces,
.fAT .shareitbutton {
    display: none;
}

#sidelK,
.lK {
    overflow: scroll;
}

#lK p,
.fAT .new {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

#fancy-list h2,
#seconds,
.list-name {
    font-weight: 500;
}

*,
::after,
::before,
input[type="text"] {
    box-sizing: border-box;
}

body {
    font-size: 1rem;
    line-height: 1.6;
    background: var(--bg);
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    margin: 0;
    padding: 0;
}

.cT {
    max-width: 100%;
    margin: 0 auto;
}

h1,
h2,
h3 {
    clear: both;
    margin-left: 2%;
    color: #444;
    font-weight: 300;
}

h1 {
    font-size: 2.1em;
    color: #fff;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

.content-sec h2 {
    font-size: 1.1em;
    text-transform: uppercase;
    color: #777;
    font-weight: bold;
    margin-top: 0;
}

.ads {
    display: block;
    width: 100%;
    margin: 10px 0;
    height: auto;
    clear: both;
}

header {
    padding: 10px 0;
    background: var(--m-c);
    box-shadow: 0 6px 6px 0 rgb(0 0 0 / 35%);
}


header p {
    margin: 2px 0 8px 5px;
    color: #fff;
    font-size: 1.1rem;
}

.one-line {
    display: flex;
    align-items: center;
}

.main-i-s {
    position: sticky;
    top: 0;
    z-index: 9;
}

.fAT .new {
    font-size: 10px;
}

nav {
    background: var(--s-c);
}

nav .lK {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 5px;
}

nav .lK a {
    background: var(--m-c);
    color: #ffffffb1;
    display: flex;
    outline: none;
    padding: 5px 10px;
    align-items: center;
    text-decoration: none;
}

.lK span {
    padding: 10px 2px;
}

.lK a span,
header #tL a span {
    position: absolute;
    display: block;
    padding: 0 5px;
    background: red;
    color: #fff;
    font-size: 10px;
    top: -5px;
    border-radius: 5px;
    right: -10px;
}

.site-title img {
    width: 220px;
    padding-top: 5px;
}

header .i-s {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* This ensures the lG is centered and the button is on the right */
    padding: 0;
    /* Optional: Add some horizontal padding */
}

header .lG {
    flex-grow: 1;
    text-align: center;
}

header .lG img {
    width: auto;
    height: 40px;
}

i.icon.arrow_back {
    color: #fff;
}

.close-top {
    width: 100%;
    background: red;
    color: #ffffffb8;
    padding: 5px;
    cursor: pointer;
    margin: 0;
    border-radius: 5px;
}

.material-symbols-outlined {
    vertical-align: middle;
}

.menu-buttons i {
    display: block;
    padding: 10px 15px;
    cursor: pointer;

}

#openMenu {
    flex: 0 0 40px;
    /* reserve 40px space for menu */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

#openMenu::before {
    font-size: 22px;

}

.i-s span {
    color: #ffffff87;
}

.f-m,
.f-m-q {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    padding: 15px;
    align-items: center;
    transition: right 0.3s;
    z-index: 9999;
    display: none;
}

.f-m-q #quoteDisplay {
    overflow: scroll;
    height: 100%;
    width: 100%;
}

.f-m-q #sidelK {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#cB,
.close-button {
    position: absolute;
    cursor: pointer;
}


#footermenu .lK {
    display: block;
}

.open {
    display: block;
}

#sidelK {
    height: 100vh;
    padding: 10px;
}

.f-m .lK {
    overflow: scroll;
    height: 100%;
    display: inline-block;
    margin: 5px;
}

.f-m .lK a {

    margin: 5px;
}

#sidelK .lK span {
    color: #000;
}

.menuLeft {

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.menuRight h3 {
    border-bottom: 1px solid #777;
    text-transform: uppercase;
    font-weight: 400;
    color: #000;
}

.menuLeft button {
    border: none;
    padding: 5px 10px;
    background: #fff;
    border-radius: 10px;
    font-size: 25px;
    margin: 5px 10px;
    cursor: pointer;
}

/* Hover effect */
.menuLeft button:hover {
    background: #f9f9f9;
    /* Light gray on hover */
    transform: scale(1.05);
    /* Slight zoom */
}

/* Click/active effect */
.menuLeft button:active {
    background: #e0e0e0;
    /* Darker gray on click */
    transform: scale(0.95);
    /* Shrinks slightly on click */
}

.close-button {
    top: 10px;
    position: absolute;
    right: 10px;
    padding: 8px 16px;
    font-size: 30px;
    border: none;
    border-radius: 20px;
    color: #444;
    background: transparent;
}

.close-button:hover {
    background-color: var(--m-c);
    color: #fff;
}

#cTDiv {
    justify-content: center;
    display: inline-grid;
}

.fAT a.morefancy {
    justify-content: right;
    display: flex;
}

.lK h3 {
    color: #0000007d;
    font-size: 16px;
    margin: 5px;
}

.othersites #lK a {
    display: inline-block;
    width: 32%;
}

#main-cT {
    flex: 1;
    position: relative;
    min-width: 0;
}

#main-cT h1 {
    font-size: 22px;
    margin: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.i-s {
    display: flex;
    align-items: center;
    /* vertically center items */
    justify-content: space-between;
    /* space between input+button and menu icon */
    gap: 1px;
    /* spacing between items */
    padding: 5px 14px;
    margin-top: 5px;
}

.i-cT {
    display: flex;
    align-items: center;
    flex: 1;
    /* take full available space */
    gap: 6px;
    position: relative;

}

.i-s .i-cT textarea {
    flex-grow: 1;
    height: 60px;
    padding: 13px;
    border: none;
    border-radius: 25px;
    font-size: 17px;
    border: 2px solid var(--s-c);
    color: #444;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.i-s .i-cT input:focus {
    border-color: var(--s-c);
    /* Slightly darker shade for focused state */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /* Enhanced shadow for focused state */
}

.settings-share {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
}


span.sharetext {
    font-size: 14px;
    color: #777;
    text-transform: capitalize;
    margin-right: 5px;
}

#cB {
    top: 27px;
    right: 0px;
    transform: translateY(-50%);
    border: none;
    width: 55px;
    height: 55px;
    position: absolute;
    color: #777;
    font-size: 25px;
    background: transparent;
    cursor: pointer;
}

#cB:hover {
    color: #000;
}

.share-buttons {
    position: fixed;
    bottom: 0;
    padding: 5px 10px;
    height: 45px;
    z-index: 999;
    width: 100%;
    background: #fff;
}

#st-1 {
    z-index: 1 !important;
}

.font-size {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    margin: 15px;
}

input#fontController {
    width: 230px;
    margin-right: 20px;
}


.font-size label {
    font-weight: bold;
    color: #555;
}



/* Range input styling */
#fontController {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, #4cafef, #007bff);
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Track */
#fontController::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 6px;
    background: #ddd;
}

#fontController::-moz-range-track {
    height: 8px;
    border-radius: 6px;
    background: #ddd;
}

/* Thumb (the circle) */
#fontController::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--s-c);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: -6px;
    /* center the thumb */
    transition: transform 0.2s ease;
}

#fontController::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}


.fAT {
    padding: 1% 1% 0 3%;
    margin: 0;
    overflow: hidden;
    list-style: none;
    display: grid;

    gap: 10px;
    /* space between items */
}

.fAT li {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    ;
    position: relative;
}


.fAT p,
.qList p {
    flex: 1;
    font-family: Arial, sans-serif;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    padding: 13px 0 10px 20px;
    box-shadow: 0 1px 2px 0px rgb(0 0 0 / 20%);
    transition: all 0.15s ease;
    /* smooth effect */
}

.qList p {
    margin-bottom: 10px;
}

.fAT p:hover,
.qList p:hover {
    background: #f9f9f9;
    color: var(--s-c);
    box-shadow: 0 1px 4px 0px rgb(0 0 0 / 30%);
}

.fAT p:active,
.qList p:active {
    background: #eaeaea;
    /* darker shade for click */
    transform: scale(0.97);
    /* small press-down effect */
    box-shadow: 0 1px 1px 0px rgb(0 0 0 / 40%);
}

.fAT li .name {
    position: absolute;
    left: 0;
    top: -5px;
    color: #fff;
    background: #444;
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 11px;
}


.fAT .ads {
    grid-column: 1 / -1;
    /* Span all columns */
    padding: 0;
    background: none;
    box-shadow: none;
}

.opt {
    flex: 0 0 40px;
    display: flex;
}

.opt i {
    border: none;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
    text-align: right;
    color: #999;
    display: inline-block;
    background: transparent;
    padding: 5px 10px;
}

/* Hover Effect */
.opt i:hover {
    transform: scale(1.1);
    color: var(--s-c);
}

/* Click (Active) Effect */
.opt i:active {
    transform: scale(0.9);
    color: var(--s-c);
}

/* Add a slight glowing effect on focus */
.opt i:focus {
    outline: none;
    color: var(--s-c);
}

.fAT a.morefancy {
    padding: 15px;
    justify-items: center;
    color: var(--m-c);
    border-radius: 10px;
}

.fAT a.morefancy:hover {
    background: #fff;
}

.fAT .btn {
    padding: 5px;
    display: flex;
    justify-content: center;
    justify-items: center;
    position: absolute;
    top: 0;
    right: 0;
}

.btn button:hover {
    color: var(--m-c);
}

.fAT h2 {
    grid-column: span 2;
    margin-bottom: 10px;
}

#fancy-list p i {
    display: inline-block;
    padding: 5px 8px;
    margin: 3px;
    cursor: pointer;
    color: #000;
    font-style: normal;
}

#fancy-list p i:hover {
    background: #fff;
    color: var(--m-c);
    border-color: var(--m-c);
}

#fancy-list h2 {
    padding: 0;
    margin: 0 2%;
    color: #000;
}

.loadmore {
    text-align: center;
    clear: both;
    margin: 15px;
}

label {
    margin: 5px 0 0 10px;
    color: #555;
    font-size: 14px;
    text-transform: uppercase;
}

input[type="number"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    width: 100%;
    height: 55px;

}

.bottom-icons {
    position: fixed;
    bottom: 208px;
    z-index: 999;
    text-align: center;
    right: 0;
    display: flex;
    align-content: flex-start;
    flex-direction: column;
    gap: 15px;
}

.bottom-icons i {
    display: inline-block;
    padding: 10px 15px;
    background-color: #fff;
    color: #777;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    border-radius: 15px 0 0 15px;
    box-shadow: 0 3px 4px 0px rgb(0 0 0 / 20%);
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    height: 43px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Hover effect */
.bottom-icons i:hover {
    transform: scale(1.1);
    /* Grow a little */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
    /* Stronger shadow */
    background-color: #f9f9f9;
    /* Slightly lighter */
}

/* Click effect */
.bottom-icons i:active {
    transform: scale(0.9);
    /* Press down */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Softer shadow */
    background-color: #eaeaea;
    /* Darker on click */
}

i.lightbulb {
    color: #ff8900 !important;
}

.textfaces {
    padding: 15px;
    display: none;
}

.textfaces i {
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    margin: 5px;
    color: #444;
    cursor: pointer;
}

.textfaces i:hover {
    background: #fff;
}

.load-more {
    text-align: center;
}

#lK {
    display: block;
    flex-wrap: wrap;
    justify-content: space-around;
}

#othertools a,
.loadmore button {
    display: inline-block;
    color: #333;
    background: #d9d9d9;
    padding: 7px 14px;
    margin: 10px;
    font-size: 1.2em;
    transition: 0.3s;
    position: relative;
    cursor: pointer;
    border: none;
    border-radius: 20px;
}

#right-menu {
    padding: 5%;
}

.lK {
    display: flex;
    flex-wrap: wrap;
    /* allows wrapping to next line */
    gap: 10px;
    /* space between links */
}

.lK a {
    display: inline-block;
    background: #ffffff;
    color: #666;
    padding: 7px 12px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.lK h3 {
    flex-basis: 100%;
    /* full width, pushes it onto a new line */
    margin: 10px 0 5px;
    font-size: 16px;
    font-weight: bold;
}

.loadmore button {
    padding: 15px 35px;
    font-size: 1.1em;
    height: auto;
}

#othertools a {
    color: #fff;
    background: var(--m-c);
}

#othertools a:hover {
    background: var(--s-c);
}

.lK a:hover,
.lK a.active-link {
    transform: scale(1.01);
    /* slight zoom */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.lK a:active {
    transform: scale(0.97);
    /* shrink on click */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    background: #f0f0f0;
    /* slight color change */
}

footer {
    text-align: center;
}

#footermenu .lK {
    margin: 15px;
}

.pagination,
.hideit,
p.aryapage {
    display: none;
}

.info-text {
    padding: 10px;
    overflow: scroll;
    background: #f1f1f1;
}

.info-text img {
    width: 100%;
    height: auto;
}

#footermenu {
    clear: both;
}

.example {
    font-size: 1.2em;
    color: #e74c3c;
    margin: 10px 0;
}

.tip {
    background: #f1f1f1;
    padding: 15px;
    border-left: 4px solid var(--s-c);
    margin: 15px 0;
}

.cta {
    text-align: center;
    margin: 30px 0;
}

.cta a {
    background: var(--m-c);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
}

.cta a:hover {
    background: var(--s-c);
}

#quoteDisplay {
    overflow: scroll;
}

.page-load-status {
    position: fixed;
    display: none;
    bottom: 15%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 99;
}

.infinite-scroll-request div {
    background: var(--m-c);
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    display: inline-block;
    box-shadow: 0 3px 4px 0px rgb(0 0 0 / 20%);
}

@media (min-width: 968px) {
    #right-menu {
        padding: 2%;
    }

    .main-content {
        display: flex;
    }

    /* Left side: takes all available space */
    .main-content-loop {
        flex: 1;
        /* grow to fill remaining space */
        min-width: 0;
        /* prevents overflow */
    }

    /* Right menu: fixed width */
    #right-menu {
        width: 320px;
        flex-shrink: 0;
        /* don’t shrink below 350px */
        margin-left: 5px;
    }

    .lK {
        overflow: auto;
        position: sticky;
        top: 100px;
        z-index: 9;
    }

    .bB a {
        bottom: 5%;
    }


    .info-text img {
        width: 700px;
    }

    .boxedview {
        margin: 10% auto 0;
    }

    .fAT p {
        font-size: 22px;
    }

    .cT {
        max-width: 1080px;
    }
}

.dark-mode,
.dark-mode .f-m,
.dark-mode .f-m-q,
.dark-mode .close-button,
.dark-mode .info-text {
    background: #444;
    color: #ddd;
}

.dark-mode #lG {
    background: #222;
}

.dark-mode .main-i-s {
    background: #444;
}

.dark-mode nav {
    background: #000;
}

.dark-mode .i-s .i-cT input,
.dark-mode .bottom-icons i,
.dark-mode .lK a,
.dark-mode .loadmore button,
.dark-mode .menuLeft button {
    background: #000;
    color: #f1f1f1;
}

.dark-mode textarea#tI {
    background: #000;
    color: #ffffffa8;
}

.dark-mode .fAT p,
.dark-mode .qList p,

.dark-mode nav .lK a {
    background: #343333;
}

.dark-mode .fAT p:hover,
.dark-mode nav .lK a:hover {
    color: #fff;
    background: #000;
}

.dark-mode #fontController::-webkit-slider-runnable-track {
    background: #333;
}

.dark-mode #fontController::-moz-range-track {
    background: #333;
}

/* Thumb (the circle) */
.dark-mode #fontController::-webkit-slider-thumb {
    border: 2px solid #000;
}

.dark-toggle {
    padding: 10px 20px;
    border: none;
    float: right;
    border-radius: 25px;
    cursor: pointer;
    background: #444;
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
}

body.dark-mode .dark-toggle {
    background: #f1f1f1;
    color: #121212;
}



/* FAQ Section Styling */
.faq-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.faq-section h2 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.faq {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.faq:last-child {
    border-bottom: none;
}

.faq h3 {
    font-size: 18px;
    margin: 0;
    cursor: pointer;
    color: #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.faq h3:hover {
    color: #0073e6;
}

.faq p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-top: 8px;
    display: none;
    /* hidden by default */
}

/* Active state */
.faq.active p {
    display: block;
}

/* Add small arrow */
.faq h3::after {
    content: "▼";
    font-size: 14px;
    transition: transform 0.3s ease;
}

.faq.active h3::after {
    transform: rotate(180deg);
}

i.tooltiptext {
    background: var(--m-c);
    box-shadow: none;
    width: 45px;
    height: 30px;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    padding: 5px 8px;
    text-align: center;
}

i.tooltiptext:hover {
    background: var(--m-c);
    box-shadow: none;
    transform: scale(1.0);

}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 29px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--m-c) transparent transparent transparent;
}

.tooltiptext:hover::after {
    border-color: var(--m-c) transparent transparent transparent;
}