/* ---- area-of-a-circle-calculator.blade.php ---- */
.input-unit {
        position: absolute !important;
        right: 17px !important;
        top: 10px !important;
    }

    .input {
        transition: all 0.3s ease;
    }

    .align-self-center {
        align-self: center !important;
    }

    input:disabled {
        background-color: rgba(220, 220, 220, 0.617);
    }

/* ---- area-of-a-sector-calculator.blade.php ---- */
.input-mode-selector {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

.input-with-unit {
    display: flex;
    gap: 10px;
}

.input-with-unit input {
    flex: 2;
}

.input-with-unit select {
    flex: 1;
    min-width: 150px;
}

.input-group {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.input-group:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.1);
}

.result-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.result-label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.result-value-with-unit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-value {
    font-size: 1.2em;
    font-weight: 600;
    color: #007bff;
    min-width: 120px;
}

.result-unit-select {
    min-width: 80px;
    padding: 5px;
    border-radius: 5px;
}

.solution-steps {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.step-item {
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.step-item:last-child {
    border-bottom: none;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.form-select, .form-control {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
}

.form-select:focus, .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

@media (max-width: 768px) {
    .input-with-unit {
        flex-direction: column;
    }

    .result-value-with-unit {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-unit-select {
        width: 100%;
        margin-top: 5px;
    }
}
.input-unit {
    position: absolute !important;
    right: 17px !important;
    top: 17px !important;
    cursor: pointer !important;
}

.input {
    transition: all 0.3s ease;
}

.units {
    position: absolute;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    min-width: 150px;
}

.units p {
    margin: 0;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.units p:hover {
    background-color: #f8f9fa;
}

.align-self-center {
    align-self: center !important;
}

input:disabled {
    background-color: rgba(220, 220, 220, 0.617);
}

.disabled-unit {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.disabled-input {
    background-color: rgba(220, 220, 220, 0.617) !important;
}

/* ---- boolean-algebra-calculator.blade.php ---- */
.resultBox .resultQuestion .mord.overline::before,
    .resultBox .message.chatgpt-message.result .mord.overline::before {
        content: "";
    }

    .resultBox .message.chatgpt-message.result table {
        min-width: 50%;
        text-align: center;
    }

    .resultBox .message.chatgpt-message.result table tr {
        border-bottom: 1px solid #000;
    }

    .resultBox .message.chatgpt-message.result table,
    .resultBox .message.chatgpt-message.result th,
    .resultBox .message.chatgpt-message.result td {
        border: 1px solid #000;
        border-collapse: collapse;
    }

    .resultBox .message.chatgpt-message.result table td {
        padding: 0 1rem;
    }

    button.btn.helpBtn {
        border: 0px;
        margin-right: 2px;
    }

    .helpBtn.btn-light {
        background-color: #fff !important;
        color: #000 !important;
        border-radius: 5px !important;
        padding: 5px 10px 3px 10px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    #newInput {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        overflow: hidden;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
        max-width: 100%;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .proDetails {
        position: absolute !important;
        right: 148px !important;
        top: 6px !important;
        width: 300px !important;
        background: var(--white);
        z-index: 9999 !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: -66px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: auto !important;
        right: 3px !important;
        z-index: 9999 !important;
        bottom: 50px !important;
    }

    /*
   .fw-bold{
       font-weight: 700;
   } */

    .bg-yellow {
        background-color: #FFF8E2;
    }

    .text-yellow {
        color: #E79E00;
    }

    .bg-green {
        background-color: #E7FFE7;
    }

    .text-green {
        color: #2EAE2C;
    }

    .radius-50 {
        border-radius: 50px;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 100px !important;
    }

    .obj-cover {
        object-fit: cover;
    }

    #content {
        top: 0px !important;
    }

    .ai_math_cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .ai_math_cards .col-md-4 {
        display: flex !important;
    }

    .ai_math_cards .bg-light-blue {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .new_tooltip {
        position: relative;
    }

    .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }

    #selectModals {
        padding: 3px 7px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        right: 80px !important;
        top: 120px !important;
    }

    .multiple_modals {
        position: absolute;
        background: var(--white);
        z-index: 9999999;
        width: 250px;
        left: 0px;
        top: 35px;
        height: 200px;
        overflow: auto;
    }

    .multiple_modals .modalName:hover {
        background: #dddddd73
    }

    .multiple_modals .proModals {
        cursor: not-allowed;
    }

    .multiple_modals .proModals p:first-child:not(.modal_type),
    .multiple_modals .proModals p:last-child:not(.modal_type) {
        opacity: 0.5;
    }

    .multiple_modals .modalName.active {
        background: #1670a712;
    }

    #selectModals .rotate {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal_type {
        padding: 2px 6px;
        font-size: 8px;
        border-radius: 20px;
        color: var(--white);
        opacity: 0.8;
    }

    .modalName .modal_type {
        background: green;
    }

    .proModals .modal_type {
        background: rgb(255 152 0);
    }

    .proColor .modal_type {
        background: rgb(255 152 0) !important;
    }
    .responseContainer{overflow-x: clip;}
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .selectedProMax {
        background: transparent !important;
        border-bottom: 1px solid hsla(203, 77%, 37%, 0.722) !important;
    }

    .selectedProMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .proMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .green-lablel {
        background: #5BD94280;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .yellow-lablel {
        background: #FFB84599;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .upgrade-pro {
        text-decoration: none;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 8px;
        font-size: 14px;
        border-radius: 7px;
    }

    .toggle {
        align-items: center;
        border-radius: 10px;
        display: flex;
        margin-bottom: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        top: 140px !important;
        right: 0px !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: 145px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }

        .toggle {
            font-size: 12px;
        }
    }

    .arrow-rotate {
        transform: rotate(180deg);
    }

    .resultQuestion {
        cursor: pointer;
    }

    .heading-p {
        display: inline-block;
        background: #EEEEEE;
        border-radius: 10px 0px;
        padding: 3px 15px;
        font-size: 12px;
    }

    .des-example {
        color: #969696;
        font-size: 12px;
        cursor: pointer;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
    .topCancel {
        left: 80px !important;
    }

    .cropBtn {
        left: 1px !important;
    }
    }

    .font-s-10 {
        font-size: 8px !important;
    }

    #newInput {
        padding: 0px 3px;
    }
/* Container for the buttons */
    .button-container {
        display: none;
        flex-wrap: wrap;
        gap: 10px;
        /* Space between buttons */
        /* padding-top: 10px; */
        align-items: end;
    }

    /* Style for each button */
    .option-btn {
        display: flex;
        align-items: center;
        padding: 3px 13px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .option-btn.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: #fff;
        border-color: #19A4F9;
    }

    /* Hover effect for non-active buttons */
    .option-btn:hover:not(.active) {
        background-color: #f0f0f0;
    }

    /* Style for the icons (you can replace these with actual icons) */
    .icon {
        margin-right: 5px;
        font-size: 16px;
        padding-bottom: 1px;
    }

    .option_text {
        padding-top: 1px;
    }

    .ai_writing {
        padding-top: 2px;
    }

    .c_pointer {
        cursor: pointer;
    }

    .strong_p {
        font-weight: bold;
        color: #19A4F9;
        background: #19a4f91c;
        padding: 6px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 2.5;
    }

    #categoryDropdown {
        padding: 3px 10px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid #ccc;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    .n_tab {
        padding: 6px 16px;
        margin: 0 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .n_tab:hover {
        background-color: #bbb;
    }

    .n_tab.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .n_tab-container {
        display: flex;
        justify-content: center;
    }

    #cal_input {
        width: 85%;
        margin-left: 25px;
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 12px;
    }
form[action*="boolean-algebra-calculator"] #math-field {
        width: 90%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="boolean-algebra-calculator"] .mq-root-block,
    form[action*="boolean-algebra-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    #new_convert {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px 12px 5px 12px;
        height: 39px !important;
        border: none;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    /* .mathquill-field:focus + .math-placeholder,
    .mathquill-field:not(:empty) + .math-placeholder {
        display: none;
    } */

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

    .adv-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .4);
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* Optional: adds some spacing on smaller screens */
    }

    .adv-modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
        max-width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .w-400 {
        width: 400px;
    }

    @media (max-width: 768px) {
        .w-400 {
            width: 100%;
        }
    }

    .main_tabs {
        background: var(--white);
        padding: 5px;
        border: 1px solid rgba(46, 131, 251, .2);
        border-radius: 25px;
    }

    .main_tab {
        padding: 0 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        cursor: pointer;
        font-size: 16px;
    }

    .main_tab.active {
        background: var(--light-blue);
        color: var(--white);
    }

    .calculator.input-area {
        padding: 5px 15px 15px !important;
        margin-bottom: 10px;
    }

/* ---- combine-like-terms-calculator.blade.php ---- */
.cardbox{
        border: 1px solid black;
        padding: 5px;
        display: inline-block;
        text-align: center;
    }

/* ---- angle-between-two-vectors-calculator.blade.php ---- */
.input-unit {
        top: -4px;
    }
    .input:focus {
        box-shadow: 0 0 1px 1px #1670a7;
        border-color: 1px solid #1670a7;
        outline: none;
    }
    .input {
        transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    div:has(.input-unit) > .input {
        padding-right: 0px !important;
    }

/* ---- differential-equation-calculator.blade.php ---- */
#cropModal img.removeShare {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
}
.new_textArea{
        outline: none;
        border: none;
        resize: none;
        overflow: hidden;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        line-height: 1.5;
        letter-spacing: .5px;
        margin-bottom: 5px;
    }
    .position-absolute{
        position: absolute;
    }
    .topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .imageBtns{
        background-color: rgba(223, 223, 223, 0.4);
        padding: 4px 12px;
        border-radius: 3px;
        border: 1px solid #D4D4D4
    }
    .imageBtns:hover{
        background-color: rgba(200, 200, 200, 0.6);
        transition-duration: .5s;
    }
    .object-fit-contain{
        object-fit: contain
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    .object-fit-none{
        object-fit: none
    }


    .loader{
        top: -20px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 75px;
        height: 75px;
        margin: auto;
        display: block;
        position: absolute
    }
    .loader::after{
        content: "";
        width: 75px;
        height: 75px;
        display: block;
        border-width: 5px;
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: #e2e2e2 #2980b9;
        animation: spinner 1.5s cubic-bezier(.4,0,.4,1) infinite
    }
    .loader_overlay{
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        border-radius: 20px;
        background: rgba(249, 250, 251,.97);
        box-shadow: 0 0px 6px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 25%)
    }
    .loader_txt{
        left: 0;
        right: 0;
        bottom: 0;
        top: 58%;
        font-size: 16px;
        font-weight: 500;
        position: absolute;
        display: inline-block;
        margin: auto auto auto auto
    }


    .qr_code{
        display: none;
        position: absolute;
        width: 170px;
        height: 215px;
        bottom: 55%;
        left: 0%;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
    }
    .qr_code img{
        object-fit: contain;
    }
    .qr_code p{
        font-size: 14px;
        line-height: 16px;

    }
    .qr_loader{
        width: 30px;
        height: 30px;
    }
    .qr_loader::after{
        width: 30px;
        height: 30px;
    }
    @keyframes spinner{
        0%{
            transform: rotate(0deg)
        }
        100%{
            transform: rotate(360deg)
        }
    }
    /* #sendAgain{
        background: var(--light-blue);
        border-radius: 3px;
        padding: 3px 8px;
        gap: 5px;
    }
    #sendAgain:hover{
        background: #1670a7c4;
    } */

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



:root {
        --toggle-indicator-size: 15px;
        --track-height: calc(var(--toggle-indicator-size) + 6px);
        --track-width: calc(var(--toggle-indicator-size) * 2.5);
        --high-contrast-mode-support: solid 2px transparent;

        /* Replace these with your color values */
        --light: #f0f0f0;
        --mid: #cccccc;
        --dark: #333333;
    }

    label.toggle {
        align-items: center;
        border-radius: 100px;
        display: flex;
        margin-bottom: 16px;
        font-size: 15px
    }

    label.toggle:last-of-type {
        margin: 0;
    }

    .toggle__input {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        outline: none;
    }

    .toggle__input:not([disabled]):active + .toggle-track,
    .toggle__input:not([disabled]):focus + .toggle-track {
        border: 1px solid var(--mid);
        /* box-shadow: 0px 0px 0px 2px var(--dark); */
    }

    .toggle__input:disabled + .toggle-track {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .toggle-track {
        background: var(--light);
        border: 1px solid var(--mid);
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        height: var(--track-height);
        margin-right: 8px;
        position: relative;
        width: var(--track-width);
        outline: none;
    }

    .toggle-indicator {
        align-items: center;
        background: var(--light-blue);
        border-radius: var(--toggle-indicator-size);
        bottom: 2px;
        display: flex;
        height: var(--toggle-indicator-size);
        justify-content: center;
        left: 2px;
        outline: var(--high-contrast-mode-support);
        position: absolute;
        transition: 0.3s;
        width: var(--toggle-indicator-size);
    }

    .checkMark {
        fill: #fff;
        height: calc(var(--toggle-indicator-size) - -4px);
        width: calc(var(--toggle-indicator-size) - 4px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .toggle__input:checked + .toggle-track .toggle-indicator {
        background: green;
        transform: translateX(calc(var(--track-width) - var(--track-height)));
    }

    .toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

    @media screen and (-ms-high-contrast: active) {
        .toggle-track {
            border-radius: 0;
        }
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        button.imageCrop{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
        button.removeShare{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
    }

/* ---- divisible-calculator.blade.php ---- */
.result .tableAns tr td {
                    border: 1px solid #ddd;
                    padding: 10px 15px
                }

                .bdr_btm {
                    border-bottom: 3px solid #000 !important;
                }

                .bdr_top {
                    border-top: 3px solid #000 !important;
                }

                .bdr_rht {
                    border-left: 3px solid #000 !important;
                }

/* ---- eigenvalues-calculator.blade.php ---- */
.matrix-box {
    display: inline-flex;
    align-items: stretch;   /* makes brackets match table height */
}

.matrix-bracket {
    width: 14px;
    position: relative;
}

.matrix-bracket.left {
    border-left: 5px solid var(--light-blue);
    border-top: 5px solid var(--light-blue);
    border-bottom: 5px solid var(--light-blue);
    margin-right: 8px;
}

.matrix-bracket.right {
    border-right: 5px solid var(--light-blue);
    border-top: 5px solid var(--light-blue);
    border-bottom: 5px solid var(--light-blue);
    margin-left: 8px;
}
.input:focus, .unit-select:focus, .search-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 5px #4a90e2;
}

/* ---- equivalent-expressions-calculator.blade.php ---- */
.icon_animation {
            display: inline-block;
            position: relative;
            width: 100%;
            height: 80px;
        }
        .icon_animation samp {
            display: inline-block;
            position: absolute;
            left: 0; /* Adjusted to start from the left edge */
            background: #EEF1F5;
            animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
            height: 8px;
        }
        .main_area .icon_sty:hover .icon_animation samp {
            background: #fff;
        }

        .icon_animation samp:nth-child(1) {
            top: 10px;
            animation-delay: -0.24s;
        }
        .icon_animation samp:nth-child(2) {
            top: 28px;
            left: 0; /* Starts from the left edge */
            animation-delay: -0.12s;
        }
        .icon_animation samp:nth-child(3) {
            top: 47px;
            animation-delay: 0s;
        }

        .icon_animation samp:nth-child(4) {
            top: 66px; /* Adjusted for 4th element */
            animation-delay: 0.12s; /* Slightly delayed */
        }
        .icon_animation samp:nth-child(5) {
            top: 85px; /* Adjusted for 5th element */
            animation-delay: 0.24s; /* Further delayed */
        }

        @keyframes icon_animation {
            0% {
                left: 0;
                width: 0;
            }
            50%, 100% {
                left: 0; /* Stays at the left edge */
                width: 100%; /* Expands to full width */
            }
        }

        #responseContainer{
            line-height: 2
        }

        #responseContainer ol,#responseContainer ul{
            padding-left: 20px
        }

        .mere_li p, .mere_li li:not(:has(p)){
            font-size: 17px;
            letter-spacing: .5px;
            line-height: 1.5;
            color: #000000;
        }

        .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
            margin-top: 12px;
        }

        #responseContainer ol,#responseContainer ul{
            padding-left: 20px
        }

        #responseContainer h3,#responseContainer h2{
            font-size: 18px;
            font-weight: 600 !important;
            margin-top: 12px;
            letter-spacing: .5px;
            line-height: 1.5;
            color: #1670a7;
        }

        .own_katex{
            display: inline-block;
            padding: 2px;
            border-radius: 8px;
            border: 1px solid transparent;
            width: fit-content;
        }

        .own_katex {
            position: relative;
        }

        .own_katex:hover {
            border: 1px solid #1670a7;
            cursor: pointer;
        }

        .own_katex:hover::after {
            background: #add8e6;
            border-radius: 4px;
            bottom: 130%;
            content: "Click to Copy";
            display: block;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px;
            position: absolute;
            width: 100px;
            z-index: 1;
            font-size: 14px;
            text-align: center;
        }

/* ---- exponential-function-calculator.blade.php ---- */
img{
        object-fit: contain;
    }

/* ---- lcm-calculator.blade.php ---- */
.border-none{border: none;}
    .border-left-none{border-left: none;}
    .border-top-none{border-top: none;}

/* ---- literal-equations-calculator.blade.php ---- */
.icon_animation {
            display: inline-block;
            position: relative;
            width: 100%;
            height: 80px;
        }
        .icon_animation samp {
            display: inline-block;
            position: absolute;
            left: 0; /* Adjusted to start from the left edge */
            background: #EEF1F5;
            animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
            height: 8px;
        }
        .main_area .icon_sty:hover .icon_animation samp {
            background: #fff;
        }

        .icon_animation samp:nth-child(1) {
            top: 10px;
            animation-delay: -0.24s;
        }
        .icon_animation samp:nth-child(2) {
            top: 28px;
            left: 0; /* Starts from the left edge */
            animation-delay: -0.12s;
        }
        .icon_animation samp:nth-child(3) {
            top: 47px;
            animation-delay: 0s;
        }

        .icon_animation samp:nth-child(4) {
            top: 66px; /* Adjusted for 4th element */
            animation-delay: 0.12s; /* Slightly delayed */
        }
        .icon_animation samp:nth-child(5) {
            top: 85px; /* Adjusted for 5th element */
            animation-delay: 0.24s; /* Further delayed */
        }

        @keyframes icon_animation {
            0% {
                left: 0;
                width: 0;
            }
            50%, 100% {
                left: 0; /* Stays at the left edge */
                width: 100%; /* Expands to full width */
            }
        }

        #responseContainer{
            line-height: 2
        }

        #responseContainer ol,#responseContainer ul{
            padding-left: 20px
        }

        .mere_li p, .mere_li li:not(:has(p)){
            font-size: 17px;
            letter-spacing: .5px;
            line-height: 1.5;
            color: #000000;
        }

        .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
            margin-top: 12px;
        }

        #responseContainer ol,#responseContainer ul{
            padding-left: 20px
        }

        #responseContainer h3,#responseContainer h2{
            font-size: 18px;
            font-weight: 600 !important;
            margin-top: 12px;
            letter-spacing: .5px;
            line-height: 1.5;
            color: #1670a7;
        }

        .own_katex{
            display: inline-block;
            padding: 2px;
            border-radius: 8px;
            border: 1px solid transparent;
            width: fit-content;
        }

        .own_katex {
            position: relative;
        }

        .own_katex:hover {
            border: 1px solid #1670a7;
            cursor: pointer;
        }

        .own_katex:hover::after {
            background: #add8e6;
            border-radius: 4px;
            bottom: 130%;
            content: "Click to Copy";
            display: block;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px;
            position: absolute;
            width: 100px;
            z-index: 1;
            font-size: 14px;
            text-align: center;
        }
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- marks-percentage-calculator.blade.php ---- */
ul li{
        list-style-type: none;
    }

/* ---- mixed-number-calculator.blade.php ---- */
@media (max-width: 380px) {
        .calculator-box{
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        .px-3{
            padding-right: 0.7rem;
            padding-left: 0.7rem;
        }
    }
    .velocitytab .v_active{
        border-bottom: 3px solid var(--light-blue);
    }
    .velocitytab .v_active strong{
        color: var(--light-blue);
    }
    .veloTabs:hover{
        background-color : gainsboro;
    }
    .velocitytab p{
        position: relative;
        top: 2px;
    }
    .tab-system .active{
        background-color: var(--light-blue);;
        color: white;
    }
    .bdr-top{
        border-top:2px solid var(--light-blue);
    }

/* ---- percentage-calculator-sv.blade.php ---- */
form[action*="percentage-calculator-sv"] .input{
        width: 70px;
        display: inline-block;
    }
    form[action*="percentage-calculator-sv"] button.calculate{
        padding: 9px 20px;
        font-size: 15px
    }
    .gap-5{
        gap: 5px
    }
    .gap-10{
        gap: 10px
    }
    hr {
        border: none;
        height: 1px;
        background-color: #dddddd;
    }

/* ---- polygon-calculator.blade.php ---- */
img{
    object-fit: none;
}

/* ---- radius-of-convergence-calculator.blade.php ---- */
.keyboardImg {
        position: absolute;
        right: 9px;
        top: 7px;
        cursor: pointer;
    }
/* Scoped override: later un-namespaced .keyboardImg rules from other pages
   (double-integral/polynomial-long-division/interval-notation) win the cascade
   in this shared file and push the icon to top:-21px, off the input. Restore
   this page's own authored position via its own #EnterEq id. */
#EnterEq + .keyboardImg {
    right: 9px;
    top: 7px;
}

/* ---- rotation-calculator.blade.php ---- */
img{
        object-fit: contain;
    }

/* ---- sohcahtoa-calculator.blade.php ---- */
.bg-transparent{
        background: transparent;
    }
    .outline-0{
        outline: none
    }
    table.w-100 tr td strong{
        line-height: 1.5;
        color: var(--text-color);
        font-size: 16px
    }
    .katex-display>.katex,.katex .katex-html {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
    }


/* ---- triangle-calculator.blade.php ---- */
#result_section{
        overflow-x: auto;
    }

    .content {
        overflow-x: auto !important;

    }

/* ---- uf-gpa-calculator.blade.php ---- */
form[action*="uf-gpa-calculator"] .remove{
        position: absolute;
        top: 5px;
        right: 0;
    }

/* ---- venn-diagram-calculator.blade.php ---- */
/* //venn Diagram 2 set */
    div.venn {
      /* width: 32em; */
      /* margin: 20px 0px 0px 120px; */
      /* margin: auto; */
      position: relative;
      height: 18em;
      /* background: whitesmoke; */
    }

    div.venn .circle {
      border: .2em solid #333;
      border-radius: 50%;
      width: 20em;
      height: 20em;
      text-align: center;
      position: absolute;
    }

    div.venn .circle p {
      height: 15em;
      width: 10em;
      display: table-cell;
      vertical-align: middle;
      /* margin-top: 10%; */
    }

    div.venn .circle:nth-child(1) {
      top: 0;
      left: 0;
      background-color: rgba(4248, 158, 79, 0.25);
      height: 78%;
      width: 45%;
      text-align: -webkit-center;
    }

    div.venn .circle:nth-child(2) {
      top: 0;
      left: 11em;
      background-color: rgba(98, 192, 203, 0.25);
      height: 78%;
      width: 45%;

    }

    div.venn .circle:nth-child(2) p {
      position: relative;
      right: -3em;
    }

    div.venn .joined {
      position: absolute;
      top: 6em;
      left: 10em;
      width: 8em;
    }

    div.venn .joined p {
      height: 10em;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      width: 4em;
    }

    div#res2 {
    position: absolute;
    bottom: 25px;
    right:73px
    }
    div.a10 {
    position: relative;
    top:25px;
    right: 0px;
    }
    div.aonly {
    position: absolute;
    bottom:55px;
    left: 45%;
    }
    div.b20 {
    position: relative;
    top:25px;
    right: 0px;
    }
    div.bonly {
    position: absolute;
    bottom:55px;
    left: 45%;
    }
    #Infographic {
      position: relative;
      width: 25em;
      margin: .5em auto;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      /* background-color: #fff; */
      height: 20em;
      margin: auto;
      margin-top:90px;
    }
    div.a_only {
    position: absolute;
    top: 55px;
    right: 80px;
    }
    div.b_only {
    position: absolute;
    top: 55px;
    right: 80px;
    }
    div.c_only {
    position: absolute;
    top: 90px;
    right: 80px;
    }
    div#j12 {
    position: absolute;
    top: -5px;
    left: 60px;
    }
    div#j70 {
    position: absolute;
    top: 85px;
    left: -37px
    }
    div#j60 {
    position: absolute;
    top: 85px;
    right:-30px
    }
    div#j80 {
    position: absolute;
    top: 10px;
    right:73px
    }
    div#j13 {
    position: absolute;
    top: -6px;
    left:-20px
    }
    div#j23 {
    position: absolute;
    top: -7px;
    left:70px
    }
    div.a21 {
    position: absolute;
    top: -55px;
    /* left:70px */
    left:160px
    }
    div.o2 {
    position: absolute;
    top: -10px;
    /* left:20px */
    left:235px
    }
    div.b22 {
    position: absolute;
    top: -55px;
    /* left:70px */
    right:140px
    }
    div.c13 {
    position: absolute;
    bottom: -60px;
    right: 75px;
    }
    div.d10 {
    position: absolute;
    bottom: -60px;
    right: -30px;
    }


    #Infographic span {
      display: none;
    }

    .circle {
      border: .2em solid #000;
      border-radius: 50%;
      width: 10em;
      height: 10em;
      text-align: center;
      vertical-align: center;
      position: absolute;
    }
    .circle p {
      height: 25em;
      width: 15em;
      display: table-cell;
      vertical-align: middle;
    }

    #c1 {
      top: 0;
      left: 90px;
      background-color: rgba(255, 0, 0, .25);
    }

    #c2 {
      top: 0;
      left: 12em;
      background-color: rgba(0, 255, 0, .25);
    }

    #c2 p {
      padding-left: 10em;
    }

    #c3 {
      top: 5em;
      left: 8.5em;
      background-color: rgba(0, 0, 255, .25);
    }

    #c3 p {
      width: 25em;
      height: 15em;
      padding-top: 10em;
    }

    .joined {
      position: absolute;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    #j12 {
      top: 5em;
      left: 15em;
      width: 10em;
      height: 7em;
      padding-top: 3em;
    }

    #j13 {
      top: 17em;
      left: 10em;
      width: 7em;
      height: 5em;
      padding-top: 2.5em;
    }

    #j23 {
      top: 17em;
      left: 23em;
      width: 7em;
      height: 5em;
      padding-top: 2.5em;
    }

    #all {
      top: 15em;
      left: 15em;
      width: 10em;
      height: 5em;
      padding-top: 1em;
    }
    @media (max-width: 375px) {
      div.venn{
          height: 65%;
          margin: 10px 0px;
      }
      #Infographic {
      width: 15em;
      margin: 90px 0px 0px -70px;
      }
      /* .circle {
        width: 9em;
        height: 9em;
      } */
    }
    @media (max-width: 320px) {
      div.venn{
          margin: 10px 0px;
      }
      #Infographic {
      width: 15em;
      margin: 90px 0px 0px -105px;
      }
      /* .circle {
        width: 9em;
        height: 9em;
      } */
    }
    @media (max-width: 375px) {
      .uclass{
          margin: 0px !important;
      }
      div.venn{
          margin: 10px 0px;
      }
      div.venn .joined {
          position: absolute;
          top: 2.5em;
          left: 4em;
          width: 20vw;
      }
      div#res2 {
      position: absolute;
      bottom: 90px;
      right: 130px;
      }
      div.b20 {
      position: relative;
      top: 5px;
      left: 11px;
      }
        div.aonly {
        position: absolute;
        bottom: 10px;
        left: 27%;
      }
      div.bonly {
        position: absolute;
        bottom: 10px;
        left: 45%;
      }
      div.venn .circle:nth-child(2) {
        top: 0;
        left: 25vw;
        height: 7em;
        width: 30vw;
      }

      div.venn .circle:nth-child(1) {
        position: relative;
        height: 7em;
        width: 30vw;
        left: 5vw;
      }
      div#res2 {
        position: absolute;
        bottom: -10px;
        right: 15px;
      }

  }

  @media (max-width: 330px) {
      div.venn{
          margin: 10px 0px;
      }
      div.venn .joined {
        position: absolute;
        top: 2.5em;
        left: 4em;
        width: 20vw;
      }
      div.b20 {
      position: relative;
      top: 5px;
      left: 11px;
    }
      div.aonly {
      position: absolute;
      bottom: 10px;
      left: 27%;
    }
    div.bonly {
      position: absolute;
      bottom: 10px;
      left: 45%;
    }
    div.venn .circle:nth-child(2) {
      top: 0;
      left: 25vw;
      height: 7em;
      width: 35vw;
    }

    div.venn .circle:nth-child(1) {
      position: relative;
      height: 7em;
      width: 35vw;
      left: 5vw;
    }
    @media (max-width: 480px) {
      div.venn{
          margin: 10px 0px;
      }
      #Infographic {
      width: 15em;
      margin: 90px 0px 0px -30px;
      }
      div.b22 {
      position: absolute;
        top: -55px;
        /* left:70px */
        right:-40px
      }
    }

  }

/* ---- absolute-value-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
    #exampleLoadBtn{
        background: #1670a712
    }

/* ---- axis-of-symmetry-calculator.blade.php ---- */
#exampleLoadBtn:hover{
        background-color: #67a2e518;
    }

/* ---- area-of-a-semicircle.blade.php ---- */
img{object-fit: contain;}

/* ---- arithmetic-sequences-calculator.blade.php ---- */
.tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
    #tabSelect {
        width: 200px; /* Set a fixed width */
        min-width: 150px;
    }
    #solve-a1d .input {
       max-width: 150px;
       text-align: center;
       font-size: 16px;
   }

   .font-s-19{
        font-size: 19px;
   }

/* ---- average-value-of-function.blade.php ---- */
.underline {
        text-decoration-line: underline;
    }

/* ---- circumference-to-diameter-calculator.blade.php ---- */
img{
        object-fit: contain;
    }

/* ---- circumference-calculator.blade.php ---- */
.border-letf-blue{
        border-left: 4px solid #0c6599;
        padding: 12px 10px;
        background-color: #368ec117;
    }
    input:disabled{
        background-color: rgba(220, 220, 220, 0.617);
    }
    .input:focus{
        outline: none;            /* remove default outline (optional) */
        border-color: #4a90e2;    /* your focus color */
        box-shadow: 0 0 5px #4a90e2; /* optional glow effect */
    }

/* ---- algebra-calculator.blade.php ---- */
.topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .object-fit-contain{
        object-fit: contain
    }
    .gap-10{
        gap: 10px
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }
    .position-absolute{
        position: absolute
    }

    #cameraUpload{
        position: absolute;
        right: 70px;
        top: 17px;
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }
    .own_katex {
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after{
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
    .examples:hover{
        color: var(--light-blue);
        text-decoration:underline;
    }
#exampleLoadBtn{
            background: #1670a712
        }
        .result>*:not(:first-child){
            overflow: visible!important;
        }

    /* Scoped fix: this page is the only Math calculator that stacks BOTH a
       camera-upload icon (#cameraUpload, right:70px) and the keyboard icon
       (.keyboardImg) on top of #input_name. The shared base .input rule only
       reserves 60px of right padding (sized for a single icon), so with both
       icons present here the un-namespaced .keyboardImg{right:...} rule that
       wins the cascade (from another page's section, currently right:5px)
       lands underneath/inside the camera icon and both icons overlap each
       other and the typed text. Reserve enough space for both and push the
       keyboard icon left of the camera icon via this page's own #input_name id. */
    #input_name {
        padding-right: 145px !important;
    }

/* ---- fraction-calculator.blade.php ---- */
#canvas-table table {
        width: 100%;
        table-layout: fixed;   /* Forces equal column widths */
    }
    #canvas-table table td {
        width: 20%;
        text-align: center;
        vertical-align: middle;
    }
@media (max-width: 575px) {
        #fractionInputs{
           margin-top: 1rem;
        }
    }

    .input:focus,
    .unit-select:focus,
    .search-input:focus {
        outline: none;            /* remove default outline (optional) */
        border-color: #4a90e2;    /* your focus color */
        box-shadow: 0 0 5px #4a90e2; /* optional glow effect */
    }
    .small-input{
        width: 80px;
        padding: 0px 10px;
    }
     .blue-hr {
        border: 0;
        height: 2px;
        background-color: #1670a7;
    }

    .explanation-step{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 15px 0px;
        font-size: 15px !important;
    }
    @media (max-width: 380px) {
        .calculator-box{
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
    .bdr-top{
        border-top:2px solid var(--light-blue);
    }
    .gap-3{
        gap: 5px;
    }
    .units_active{
        background: var(--light-blue)
    }
    .bg-white.units_active{
        background: var(--light-blue) !important
    }
    /* .mord{
        font-size: 19px !important;
    } */
.calculation-steps {
        margin-top: 10px;
        line-height: 4;
        font-size: 15px;
    }
    .advanced-calculation-steps {
        font-size: 15px;
        /* letter-spacing: 2px; */
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 28px;
        padding: 28px 0px;
    }
    .underline{
        text-decoration: underline;
    }

   .hover-exapanation:hover {
    text-shadow: 2px 2px 4px #99d8ff;
    cursor: pointer;
}

    .font-s-19{
        font-size: 19px;
    }

    .line-height-4{
        line-height: 4;
    }

/* ---- functions-calculator.blade.php ---- */
.new_textArea{
        outline: none;
        border: none;
        resize: none;
        overflow: hidden;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        line-height: 1.5;
        letter-spacing: .5px;
        margin-bottom: 5px;
    }
    .position-absolute{
        position: absolute;
    }
    .topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .imageBtns{
        background-color: rgba(223, 223, 223, 0.4);
        padding: 4px 12px;
        border-radius: 3px;
        border: 1px solid #D4D4D4
    }
    .imageBtns:hover{
        background-color: rgba(200, 200, 200, 0.6);
        transition-duration: .5s;
    }
    .object-fit-contain{
        object-fit: contain
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    .object-fit-none{
        object-fit: none
    }


    .loader{
        top: -20px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 75px;
        height: 75px;
        margin: auto;
        display: block;
        position: absolute
    }
    .loader::after{
        content: "";
        width: 75px;
        height: 75px;
        display: block;
        border-width: 5px;
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: #e2e2e2 #2980b9;
        animation: spinner 1.5s cubic-bezier(.4,0,.4,1) infinite
    }
    .loader_overlay{
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        border-radius: 20px;
        background: rgba(249, 250, 251,.97);
        box-shadow: 0 0px 6px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 25%)
    }
    .loader_txt{
        left: 0;
        right: 0;
        bottom: 0;
        top: 58%;
        font-size: 16px;
        font-weight: 500;
        position: absolute;
        display: inline-block;
        margin: auto auto auto auto
    }


    .qr_code{
        display: none;
        position: absolute;
        width: 170px;
        min-height: 215px;
        bottom: 55%;
        left: 0%;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .qr_code img{
        width: 100%;
        height: 150px;
        object-fit: contain;
    }
    .qr_code p{
        font-size: 14px;
        line-height: 16px;

    }
    .qr_loader{
        width: 30px;
        height: 30px;
    }
    .qr_loader::after{
        width: 30px;
        height: 30px;
    }
    @keyframes spinner{
        0%{
            transform: rotate(0deg)
        }
        100%{
            transform: rotate(360deg)
        }
    }
    /* #sendAgain{
        background: var(--light-blue);
        border-radius: 3px;
        padding: 3px 8px;
        gap: 5px;
    }
    #sendAgain:hover{
        background: #1670a7c4;
    } */

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }


:root {
        --toggle-indicator-size: 15px;
        --track-height: calc(var(--toggle-indicator-size) + 6px);
        --track-width: calc(var(--toggle-indicator-size) * 2.5);
        --high-contrast-mode-support: solid 2px transparent;

        /* Replace these with your color values */
        --light: #f0f0f0;
        --mid: #cccccc;
        --dark: #333333;
    }

    label.toggle {
        align-items: center;
        border-radius: 100px;
        display: flex;
        margin-bottom: 16px;
        font-size: 15px
    }

    label.toggle:last-of-type {
        margin: 0;
    }

    .toggle__input {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        outline: none;
    }

    .toggle__input:not([disabled]):active + .toggle-track,
    .toggle__input:not([disabled]):focus + .toggle-track {
        border: 1px solid var(--mid);
        /* box-shadow: 0px 0px 0px 2px var(--dark); */
    }

    .toggle__input:disabled + .toggle-track {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .toggle-track {
        background: var(--light);
        border: 1px solid var(--mid);
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        height: var(--track-height);
        margin-right: 8px;
        position: relative;
        width: var(--track-width);
        outline: none;
    }

    .toggle-indicator {
        align-items: center;
        background: var(--light-blue);
        border-radius: var(--toggle-indicator-size);
        bottom: 2px;
        display: flex;
        height: var(--toggle-indicator-size);
        justify-content: center;
        left: 2px;
        outline: var(--high-contrast-mode-support);
        position: absolute;
        transition: 0.3s;
        width: var(--toggle-indicator-size);
    }

    .checkMark {
        fill: #fff;
        height: calc(var(--toggle-indicator-size) - -4px);
        width: calc(var(--toggle-indicator-size) - 4px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .toggle__input:checked + .toggle-track .toggle-indicator {
        background: green;
        transform: translateX(calc(var(--track-width) - var(--track-height)));
    }

    .toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

    @media screen and (-ms-high-contrast: active) {
        .toggle-track {
            border-radius: 0;
        }
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        button.imageCrop{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
        button.removeShare{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
    }
    #new_ai_btns{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    /* #convert ("Re-Generate"/Solve Again) is a <button>, .reset ("RESET") is an <a>;
       without an explicit box type the anchor's default inline layout can render it
       out of line with the button's default inline-block box in some browsers. */
    #new_ai_btns #convert,
    #new_ai_btns .reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

/* ---- diamond-calculator.blade.php ---- */
img{object-fit: contain;}
.heading>p {
                    position: absolute;
                    left: 120px;
                    top: 0px;
                }

                .resh tbody tr, td {
                    border: none;
                }

                .swann tbody tr, td {
                    border: none;
                }

                .answer {
                    position: relative;
                    height: 100px;
                    /* this can be anything */
                    width: 100%;
                    /* ...but maintain 1:1 aspect ratio */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
                .answer::before, .answer::after {
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 5px;
                    background-color: #1670a7;
                }

                .answer::before {
                    transform: rotate(45deg);
                }

                .answer::after {
                    transform: rotate(-45deg);
                }

/* ---- difference-quotient-calculator.blade.php ---- */
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- gpa-calculator.blade.php ---- */
ul li{
		list-style: none;
	}
	.gap-6{
		gap: 8px
	}
	.gpa_knob {
		width: 210px;
		height: 210px;
		margin: 0px auto;
		border-radius: 100%;
		padding-top: 10px;
		position: relative;
		background-color: #eaf5fa85;
	}
	.inner_knob, .inner_knob1 {
		width: 215px;
		border-radius: 100%;
		margin: 0px auto;
		background: #B71919;
		height: 180px;
		padding-top: 30px;
	}.z-depth-1 {
		box-shadow: 0 0 6px 3px var(--shadowClr) !important;
	}
	.grade_type {
		position: absolute;
		top: 23px;
		right: 0;
		background: white;
		z-index: 3;
		padding: 10px 1rem;
		width: max-content;
	}
	.grade_type div, .grade_format{
		cursor: pointer;
	}

/* ---- integer-calculator.blade.php ---- */
img{
        object-fit: contain;
    }

/* ---- double-integral-calculator.blade.php ---- */
#mbl_camera label.takePhotoBtn {
        position: absolute;
        top: 30px;
        right: 104px;
    }
    .topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .object-fit-contain{
        object-fit: contain
    }
    .gap-10{
        gap: 10px
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }
    .position-absolute{
        position: absolute
    }

    #cameraUpload{
        position: absolute;
        right: 70px;
        top: 17px;
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }
    .own_katex {
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after{
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
    .desktopCamera{
        position: absolute;
        top: 22px;
        right: 60px;
    }
    .keyboardImg{
        right: 12px;
        top: 20px;
    }
    /* Scoped fix: later un-namespaced .keyboardImg rules from other pages
       (interval-notation, etc.) win the cascade in this shared file and push
       the icon to top:-21px, breaking this page's math-input layout. Restore
       this page's own authored position via its own #hiddenInput id. */
    #hiddenInput ~ .keyboardImg {
        right: 12px;
        top: 20px;
    }
    .integral_input{
        height: 30px;
        background: var(--white);
        padding-left: 5px;
        border: 1px solid #D2D4D8;
        border-radius: 5px;
        color: var(--black);
        font-size: 15px;
        box-sizing: border-box;
        width: 35px;
        outline: 0;
        min-width: 35px;
        max-width: 200px;
    }
    .integ_symb{
        font-size: 7rem;
        line-height: normal;
    }
    .bracket_symbol{
        font-size: 5rem;
    }
    @media (max-width: 480px){
        .integ_symb{
            font-size: 4rem;
        }
        .bracket_symbol{
            font-size: 3rem;
        }
        #lby,#lbx{
            margin-top: 5px !important
        }
        #ubx,#uby{
            margin-bottom: 0px !important
        }
    }
    .mathquillParent{
        background-color: var(--white);
        height: 75px;
        padding: 0px 8px;
    }
    form[action*="double-integral-calculator"] #math-field{
        height: 100%;
        width: 100%;
        background-color: var(--white);
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        display: flex;
        align-items: center
    }
    form[action*="double-integral-calculator"] #math-field .mq-root-block {
        font-size: 22px;
    }
    .mq-sub.mq-hasCursor, .mq-sup-inner.mq-hasCursor{
        background-color: #d8e8ff;
    }
#exampleLoadBtn{
            background: #1670a712
        }

/* ---- distributive-property-calculator.blade.php ---- */
.own_steps p{
        margin-top: 10px;
    }

/* ---- domain-and-range-calculator.blade.php ---- */
.loader{
        min-width: 100px;
        min-height: 100px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid gray;
        border-top: 3px solid #1670a7;
        position: absolute;
        border-right: 5px solid #1670a7;
        top: calc(50% - 50px);
        right: calc(50% - 50px);
        z-index: 9999;
        animation: spin 1s infinite;
    }
    @keyframes spin{
        0%{rotate: 0}
        100%{rotate: 720deg}

    }
    .keyboard button{
        margin-right: 5px;
        margin-bottom: 7px;
    }
    .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 15px;
        margin-bottom: 9px;
    }

    .example-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
        gap: 15px;
        margin-bottom: 9px;
    }

    .result-card {
        background: #ffffff;
        border-left: 5px solid #1670a7;
        border-radius: 10px;
        padding: 12px 15px;
        transition: 0.3s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: auto;
    }

    .result-title {
        font-weight: 600;
        color: #1670a7;
        margin-bottom: 9px;
        font-size: 15px;
    }

    .result-value {
        font-size: 18px;
        color: #111;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .output-container {
            padding: 15px;
            margin: 15px auto;
        }

        .result-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .result-card {
            padding: 10px 12px;
        }
    }

    .example-grid button {
        background-color: #f0f8ff;
        border: 1px solid #1670a7;
        border-radius: 8px;
        padding: 10px 3px;
        font-size: 12px;
        color: #1670a7;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

    .example-card{
        background: white;
        padding: 14px;
        border-radius: 15px;
        border: 1px solid #D2D5D8;
    }

/* ---- local-maxima-and-minima-calculator.blade.php ---- */
img{
    object-fit: contain;
}

/* ---- determinant-calculator.blade.php ---- */
.dtrmn_colsf {
                        margin: 10px 0;
                        display: inline-block;
                    }
                    .dtrmn_cols {
                        margin: 10px 0;
                        display: inline-block;
                    }

/* ---- explicit-formula-calculator.blade.php ---- */
p#newInput[contenteditable] {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .proDetails {
        position: absolute !important;
        right: 148px !important;
        top: 6px !important;
        width: 300px !important;
        background: var(--white);
        z-index: 9999 !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: -66px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: auto !important;
        right: 3px !important;
        z-index: 9999 !important;
        bottom: 50px !important;
    }

    /*
   .fw-bold{
       font-weight: 700;
   } */

    .bg-yellow {
        background-color: #FFF8E2;
    }

    .text-yellow {
        color: #E79E00;
    }

    .bg-green {
        background-color: #E7FFE7;
    }

    .text-green {
        color: #2EAE2C;
    }

    .radius-50 {
        border-radius: 50px;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 111px !important;
    }

    .obj-cover {
        object-fit: cover;
    }

    #content {
        top: 0px !important;
    }

    .ai_math_cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .ai_math_cards .col-md-4 {
        display: flex !important;
    }

    .ai_math_cards .bg-light-blue {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .new_tooltip {
        position: relative;
    }

    .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }

    #selectModals {
        padding: 3px 7px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        right: 80px !important;
        top: 120px !important;
    }

    .multiple_modals {
        position: absolute;
        background: var(--white);
        z-index: 9999999;
        width: 250px;
        left: 0px;
        top: 35px;
        height: 200px;
        overflow: auto;
    }

    .multiple_modals .modalName:hover {
        background: #dddddd73
    }

    .multiple_modals .proModals {
        cursor: not-allowed;
    }

    .multiple_modals .proModals p:first-child:not(.modal_type),
    .multiple_modals .proModals p:last-child:not(.modal_type) {
        opacity: 0.5;
    }

    .multiple_modals .modalName.active {
        background: #1670a712;
    }

    #selectModals .rotate {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal_type {
        padding: 2px 6px;
        font-size: 8px;
        border-radius: 20px;
        color: var(--white);
        opacity: 0.8;
    }

    .modalName .modal_type {
        background: green;
    }

    .proModals .modal_type {
        background: rgb(255 152 0);
    }

    .proColor .modal_type {
        background: rgb(255 152 0) !important;
    }
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .selectedProMax {
        background: transparent !important;
        border-bottom: 1px solid hsla(203, 77%, 37%, 0.722) !important;
    }

    .selectedProMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .proMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .green-lablel {
        background: #5BD94280;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .yellow-lablel {
        background: #FFB84599;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .upgrade-pro {
        text-decoration: none;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 8px;
        font-size: 14px;
        border-radius: 7px;
    }

    .toggle {
        align-items: center;
        border-radius: 10px;
        display: flex;
        margin-bottom: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        top: 140px !important;
        right: 0px !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: 145px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }

        .toggle {
            font-size: 12px;
        }
    }

    form[action*="explicit-formula-calculator"] .toggle,
    form[action*="explicit-formula-calculator"] #convert {
        height: 35px;
        box-sizing: border-box;
    }

    form[action*="explicit-formula-calculator"] #convert {
        padding: 5px 14px;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%);
        border: none;
        outline: none;
    }

    .arrow-rotate {
        transform: rotate(180deg);
    }

    .resultQuestion {
        cursor: pointer;
    }

    .heading-p {
        display: inline-block;
        background: #EEEEEE;
        border-radius: 10px 0px;
        padding: 3px 15px;
        font-size: 12px;
    }

    .des-example {
        color: #969696;
        font-size: 12px;
        cursor: pointer;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
    .topCancel {
        left: 80px !important;
    }

    .cropBtn {
        left: 1px !important;
    }
    }

    .font-s-10 {
        font-size: 8px !important;
    }

    #newInput {
        padding: 0px 3px;
    }
/* Container for the buttons */
    .button-container {
        display: none;
        flex-wrap: wrap;
        gap: 10px;
        /* Space between buttons */
        /* padding-top: 10px; */
        align-items: end;
    }

    /* Style for each button */
    .option-btn {
        display: flex;
        align-items: center;
        padding: 3px 13px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .option-btn.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: #fff;
        border-color: #19A4F9;
    }

    /* Hover effect for non-active buttons */
    .option-btn:hover:not(.active) {
        background-color: #f0f0f0;
    }

    /* Style for the icons (you can replace these with actual icons) */
    .icon {
        font-size: 16px;
    }

    .option_text {
        padding-top: 1px;
    }

    .ai_writing {
        padding-top: 2px;
    }

    .c_pointer {
        cursor: pointer;
    }

    .strong_p {
        font-weight: bold;
        color: #19A4F9;
        background: #19a4f91c;
        padding: 6px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 2.5;
    }

    #categoryDropdown {
        padding: 3px 10px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid #ccc;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    .n_tab {
        padding: 6px 16px;
        margin: 0 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .n_tab:hover {
        background-color: #bbb;
    }

    .n_tab.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .n_tab-container {
        display: flex;
        justify-content: center;
    }

    #cal_input {
        width: 85%;
        margin-left: 25px;
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 12px;
    }
form[action*="explicit-formula-calculator"] #math-field {
        width: 85%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="explicit-formula-calculator"] .mq-root-block,
    form[action*="explicit-formula-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    #new_convert {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px 12px 5px 12px;
        height: 39px !important;
        border: none;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    /* .mathquill-field:focus + .math-placeholder,
    .mathquill-field:not(:empty) + .math-placeholder {
        display: none;
    } */

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

    .adv-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .4);
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* Optional: adds some spacing on smaller screens */
    }

    .adv-modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
        max-width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .w-400 {
        width: 400px;
    }

    @media (max-width: 768px) {
        .w-400 {
            width: 100%;
        }
    }

    .main_tabs {
        background: var(--white);
        padding: 5px;
        border: 1px solid rgba(46, 131, 251, .2);
        border-radius: 25px;
    }

    .main_tab {
        padding: 0 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        cursor: pointer;
        font-size: 16px;
    }

    .main_tab.active {
        background: var(--light-blue);
        color: var(--white);
    }

    .calculator.input-area {
        padding: 5px 15px 15px !important;
        margin-bottom: 10px;
    }

    @media (max-width: 378px) {
        .main_tab {
            padding: 0 10px;
        }
    }

/* ---- gauss-seidel-calculator.blade.php ---- */
.katex-text-left .katex-html {
      text-align: left !important;
      margin: 0 !important;
  }

/* ---- ellipse-equation-calculator.blade.php ---- */
img{
    object-fit: contain;
}

/* ---- graphing-calculator.blade.php ---- */
.panelRow.avNameLogo *,.button.inputHelp-OnlineHelpBtn{
        display: none !important
    }
    .GeoGebraFrame .dialogComponent.exportImgDialog{
        transform: scale(.7);
        left: -53px!important;
    }

/* ---- eulers-method-calculator.blade.php ---- */
.final-answer {
        font-weight: bold;
        padding: 15px;
        background-color: #d4edda;
        color: #155724;
        border-left: 6px solid #28a745;
        margin-top: 10px
    }
.result_tab tbody tr td{
                            padding: 0.5rem 0px !important;
                            border: 1px solid black
                        }

/* ---- percent-to-fraction-calculator.blade.php ---- */
#res_show{
        overflow-x: auto !important;
    }
    /* The sitewide "div:has(.input-unit) > .input { padding-right: 0px }"
       rule zeroes the right padding on this field (it wraps the "%" unit
       label), so typed digits can run under the unit label instead of
       stopping short of it. Restore room for the label. */
    #percent {
        padding-right: 30px !important;
    }

/* ---- factoring-calculator.blade.php ---- */
#factorization_Steps p{
        margin-top: 10px;
    }

    #exampleLoadBtn:hover{
        background-color: #67a2e518;
    }
    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }
/* Math expressions — centered */
    .own_katex.katex-math {
        /* text-align: center; */
        display: block;
        margin: 6px 0;
    }

    /* Step headings — left aligned, bold */
    /* .own_katex.katex-display {
        text-align: left;
        display: block;
        margin: 14px 0 4px 0;
    } */

    .own_katex.katex-heading .katex {
        font-weight: bold;
        font-size: 1em;
    }

    /* KaTeX display override for headings */
    .own_katex.katex-heading .katex-display .katex {
        text-align: start !important;
        font-weight: bold;
        margin: 0 !important;
    }

    /* Keep math centered */
    .own_katex.katex-math .katex-display {
        text-align: start !important;
        display: block;
    }

/* ---- polynomial-long-division-calculator.blade.php ---- */
.overflow-x-auto{
        overflow: auto;
        overflow-y: clip;
    }
    .input-unit {
        top: 2px;
    }

    .gap-3 {
        gap: 3px;
    }
.output-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
        padding: 25px;
        max-width: 750px;
        margin: 20px auto;
        border: 1px solid #e3eef5;
        animation: fadeIn 0.6s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .output-header {
        text-align: center;
        color: #1670a7;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 15px;
        margin-bottom: 9px;
    }

    .result-card {
        background: #ffffff;
        border-left: 5px solid #1670a7;
        border-radius: 10px;
        padding: 12px 15px;
        transition: 0.3s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* .result-card:hover {
        background: #e9f8f5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    } */

    .result-title {
        font-weight: 600;
        color: #1670a7;
        margin-bottom: 9px;
        font-size: 15px;
    }

    .result-value {
        font-size: 18px;
        color: #111;
        /* font-weight: 600; */
    }

    .highlight {
        color: #1670a7;
    }

    .step-section {
        margin-top: 25px;
        background: #f9fcff;
        border: 1px solid #dbeaf5;
        border-radius: 10px;
        padding: 20px;
    }

    .step-section h3 {
        color: #1670a7;
        text-align: center;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 700;
    }

    .step {
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 15px;
        margin: 15px 0;
        border-left: 4px solid #1670a7;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .step strong {
        color: #1670a7;
        font-size: 16px;
    }

    .interpretation {
        margin-top: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        background: #e8f9f2;
        color: #00916d;
        border-radius: 8px;
        padding: 12px 0;
        border: 1px solid #c8f0df;
    }

    @media (max-width: 768px) {
        .output-container {
            padding: 15px;
            margin: 15px auto;
        }

        .result-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .result-card {
            padding: 12px;
        }

        .step-section {
            padding: 15px;
        }

        .step {
            padding: 10px 12px;
        }

        .output-header {
            font-size: 20px;
        }

        .result-value {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .output-container {
            padding: 12px;
            margin: 10px auto;
        }

        .step-section {
            padding: 12px;
        }

        .step {
            padding: 8px 10px;
            font-size: 14px;
        }

        .interpretation {
            font-size: 14px;
            padding: 10px 0;
        }
    }

     .step p {
        margin: 0 !important;
        padding: 0 !important;
    }
    form[action*="polynomial-long-division-calculator"] .katex-display {
        margin: 0 !important;
    }
    .step {
        margin-bottom: 12px;
    }
    form[action*="polynomial-long-division-calculator"] .katex-html {
        margin-top: 15px !important;
        font-size: 16px !important;
    }

    .step_by_step{
        color: #1670a7;
        font-weight: 700;
    }
    .content-formula{
        overflow: auto;
    }
#page-loader {
        position: absolute;
        inset: 0;
        z-index: 9999;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    #page-loader.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .loader-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .loader-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e5e7eb;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
    }

    .loader-text {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
#exampleLoadBtn {
                        background: #1670a712
                    }

/* ---- interval-notation-calculator.blade.php ---- */
.topCancel {
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }

    .topCancel:hover {
        background-color: rgb(167, 74, 74);
    }

    .object-fit-contain {
        object-fit: contain
    }

    .gap-10 {
        gap: 10px
    }

    .cropBtn {
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }

    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0;
        /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }

    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }

    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0;
        /* Starts from the left edge */
        animation-delay: -0.12s;
    }

    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px;
        /* Adjusted for 4th element */
        animation-delay: 0.12s;
        /* Slightly delayed */
    }

    .icon_animation samp:nth-child(5) {
        top: 85px;
        /* Adjusted for 5th element */
        animation-delay: 0.24s;
        /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }

        50%,
        100% {
            left: 0;
            /* Stays at the left edge */
            width: 100%;
            /* Expands to full width */
        }
    }

    #responseContainer {
        line-height: 2
    }

    .position-absolute {
        position: absolute
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }

    .desktopCamera {
        position: absolute;
        top: 15px;
        right: 60px;
    }

    .keyboardImg {
        right: 12px;
        top: 13px;
    }

    #interval_notation {
        height: 50px;
    }
#exampleLoadBtn {
            background: #1670a712
        }
        .own_katex {
            display: inline;
        }
.input-wrapper {
        position: relative;
    }

    .input-wrapper input {
        width: 100%;
        padding-right: 90px;
        /* space for both icons */
    }

    .input-icons {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .input-icons img {
        cursor: pointer;
    }

    .desktopCamera {
        position: absolute;
        top: -18px;
        right: 46px;
    }

    .keyboardImg {
        right: 20px;
        top: -21px;
    }

    .content {
        overflow-x: auto;
    }

/* ---- fraction-simplifier-calculator.blade.php ---- */
@media (max-width: 380px) {
                .calculator-box{
                    padding-left: 0.5rem;
                    padding-right: 0.5rem;
                }
            }
            .velocitytab .v_active{
                border-bottom: 3px solid var(--light-blue);
            }
            .velocitytab .v_active strong{
                color: var(--light-blue);
            }
            .veloTabs:hover{
                background-color : gainsboro;
            }
            .velocitytab p{
                position: relative;
                top: 2px;
            }

/* ---- foil-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }
    .position-absolute{
        position: absolute
    }

    #cameraUpload{
        position: absolute;
        right: 70px;
        top: 17px;
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }
    .own_katex {
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after{
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#exampleLoadBtn{
            background: #1670a712
        }



/* ---- ratio-calculator.blade.php ---- */
.error-message {
        font-size: 14px !important;
    }

/* ---- intercepts-calculator.blade.php ---- */
@media (max-width: 450px) {
        #loading {
            top: 50% !important;
            left: 40% !important;
        }
        .loader-text {
            top: 35% !important;
            left: 28% !important;
        }
    }
    #loading {
        position: absolute;
        top: 50%;
        left: 46%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 70px;
        height: 70px;
        /* margin: -76px 0 0 -76px; */
        border: 10px solid #b1cff1;
        /* border: 10px solid transparent; */
        border-radius: 50%;
        border-top: 10px solid #036bd3;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .animate-bottom {
        position: relative;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
        from { bottom:-100px; opacity:0 }
        to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
        from{ bottom:-100px; opacity:0 }
        to{ bottom:0; opacity:1 }
    }
    #myTable {
        visibility: hidden;
    }
    .loader-text {
        margin-top: 10px; /* Adjust the spacing as needed */
        font-size: 16px; /* Adjust the font size as needed */
        color: #333; /* Adjust the text color as needed */
        position: absolute;
        top: 38%;
        left: 39%;
    }

/* ---- improper-integral-calculator.blade.php ---- */
.topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .object-fit-contain{
        object-fit: contain
    }
    .gap-10{
        gap: 10px
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }
    .position-absolute{
        position: absolute
    }

    #cameraUpload{
        position: absolute;
        right: 70px;
        top: 17px;
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }
    .own_katex {
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after{
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
    .desktopCamera{
        position: absolute;
        top: 20px;
        right: 65px;
    }
    /* Scoped fix: this page never authored its own .keyboardImg rule, so it
       inherits whichever un-namespaced .keyboardImg{right:...} rule from
       another page currently wins the cascade in this shared file (top is
       already fixed via inline style on the <img>). Pin "right" via this
       page's own #EnterEq id. */
    #EnterEq ~ .keyboardImg {
        right: 17px;
    }
    .integral_input{
        height: 30px;
        background: var(--white);
        padding-left: 5px;
        border: 1px solid #D2D4D8;
        border-radius: 5px;
        color: var(--black);
        font-size: 15px;
        box-sizing: border-box;
        width: 35px;
        outline: 0;
        min-width: 35px;
        max-width: 200px;
    }
    .integ_symb{
        font-size: 7rem;
        line-height: normal;
    }
    .bracket_symbol{
        font-size: 5rem;
    }
    @media (max-width: 480px){
        .integ_symb{
            font-size: 4rem;
        }
        .bracket_symbol{
            font-size: 3rem;
        }
        #lby,#lbx{
            margin-top: 5px !important
        }
        #ubx,#uby{
            margin-bottom: 0px !important
        }
    }
#exampleLoadBtn{
            background: #1670a712
        }

/* ---- laplace-transform-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- inverse-function-calculator.blade.php ---- */
/* Scoped fix: this page never authored its own .keyboardImg rule, so it
   inherits whichever un-namespaced .keyboardImg{right:...} rule from another
   page currently wins the cascade in this shared file (top is already fixed
   via inline style on the <img>). Pin "right" via this page's own #EnterEq id. */
#EnterEq + .keyboardImg {
    right: 9px;
}
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- limit-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- simpsons-rule-calculator.blade.php ---- */
.velocitytab .v_active{
        border-bottom: 3px solid var(--light-blue);
        color: var(--light-blue);
    }
    .velocitytab p{
        position: relative;
        top: 2px;
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }

    /* Scoped fix: this page never authored its own .keyboardImg rule, so it
       inherits whichever un-namespaced .keyboardImg{right:...,top:...} rule
       from another page currently wins the cascade in this shared file,
       landing the icon at top:-21px -- directly over the function input and
       blocking clicks/typing. Pin position via this page's own #EnterEq id. */
    #EnterEq + .keyboardImg {
        right: 9px;
        top: 7px;
    }

/* ---- law-of-sines-calculator.blade.php ---- */
#triangle {
        width: 100%;
        max-width: 600px;
        height: 350px;
        display: block;
    }

/* ---- long-multiplication-calculator.blade.php ---- */
.result .tableAns tr td{
                    border: 1px solid #ddd;
                    padding: 10px 15px
                }
                .bdr_btm{
                    border-bottom: 3px solid #000 !important;
                }
                .bdr_top{
                    border-top: 3px solid #000 !important;
                }

/* ---- order-of-operations-calculator.blade.php ---- */
.hitman{
                            display:block;
                        }
                        .dk{
                            margin-bottom:40px;
                        }
                        .pp{
                            padding-left:18px;
                        }

/* ---- pascals-triangle-calculator.blade.php ---- */
img{
        object-fit: contain;
    }

/* ---- inverse-laplace-transform-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- unit-circle-calculator.blade.php ---- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

                        #uc-root {
                            --ink: #173b54;
                            --ink-soft: #5d7488;
                            --paper: #ffffff;
                            --paper-2: #f1f8fc;
                            --line: #cfe0ee;
                            --sin: #1670a7;
                            /* site blue */
                            --cos: #d9534f;
                            /* red   */
                            --arc: #2e8b57;
                            /* green */
                            --hi: #e0a93b;
                            /* amber highlight */
                            --mono: 'IBM Plex Mono', ui-monospace, monospace;
                            --sans: 'IBM Plex Sans', system-ui, sans-serif;
                            color: var(--ink);
                            font-family: var(--sans);
                            max-width: 920px;
                            width: 100%;
                            margin: 18px auto 0;
                        }

                        #uc-root * {
                            box-sizing: border-box
                        }

                        .uc-card {
                            background: var(--paper);
                            border: 1px solid var(--line);
                            border-radius: 14px;
                            padding: 26px;
                            box-shadow: 0 10px 30px -24px rgba(22, 112, 167, .45);
                            overflow-x: hidden;
                        }

                        .uc-head {
                            display: flex;
                            align-items: baseline;
                            gap: 12px;
                            margin: 0 0 20px;
                            flex-wrap: wrap
                        }

                        .uc-title {
                            font-family: var(--mono);
                            font-weight: 600;
                            font-size: 15px;
                            letter-spacing: .22em;
                            text-transform: uppercase;
                            margin: 0;
                        }

                        .uc-title b {
                            color: var(--arc)
                        }

                        .uc-sub {
                            font-size: 12.5px;
                            color: var(--ink-soft);
                            margin: 0
                        }

                        .uc-grid {
                            display: grid;
                            grid-template-columns: minmax(0, 1fr) 290px;
                            gap: 26px;
                            align-items: start
                        }

                        .uc-stage,
                        .uc-controls {
                            min-width: 0
                        }

                        @media (max-width:680px) {
                            .uc-grid {
                                grid-template-columns: 1fr;
                                gap: 18px
                            }
                        }

                        @media (max-width:480px) {
                            .uc-card {
                                padding: 16px
                            }
                        }

                        .uc-stage {
                            background: var(--paper-2);
                            border: 1px solid var(--line);
                            border-radius: 12px;
                            padding: 10px;
                            aspect-ratio: 1/1;
                            width: 100%;
                            max-width: 100%;
                        }

                        .uc-stage svg {
                            width: 100%;
                            height: 100%;
                            display: block;
                            touch-action: none;
                            user-select: none
                        }

                        .uc-controls {
                            display: flex;
                            flex-direction: column;
                            gap: 14px
                        }

                        .uc-row {
                            display: flex;
                            gap: 8px
                        }

                        .uc-input {
                            flex: 1;
                            font-family: var(--mono);
                            font-size: 18px;
                            font-weight: 500;
                            color: var(--ink);
                            background: var(--paper-2);
                            border: 1px solid var(--line);
                            border-radius: 9px;
                            padding: 11px 13px;
                            outline: none;
                            min-width: 0;
                        }

                        .uc-input:focus {
                            border-color: var(--sin);
                            box-shadow: 0 0 0 3px rgba(22, 112, 167, .15)
                        }

                        .uc-btn {
                            font-family: var(--mono);
                            font-size: 16px;
                            font-weight: 600;
                            cursor: pointer;
                            width: 46px;
                            border: 1px solid var(--sin);
                            background: var(--sin);
                            color: #fff;
                            border-radius: 9px;
                            transition: transform .08s ease, opacity .15s ease;
                        }

                        .uc-btn:hover {
                            opacity: .86
                        }

                        .uc-btn:active {
                            transform: translateY(1px)
                        }

                        .uc-btn.ghost {
                            background: transparent;
                            color: var(--sin)
                        }

                        .uc-readout {
                            background: var(--sin);
                            color: #fff;
                            border-radius: 11px;
                            padding: 14px 16px;
                            font-family: var(--mono);
                        }

                        .uc-readout .big {
                            font-size: 26px;
                            font-weight: 600;
                            letter-spacing: .01em;
                            display: flex;
                            align-items: baseline;
                            gap: 7px
                        }

                        .uc-readout .big span {
                            font-size: 13px;
                            color: #cfe6f5;
                            font-weight: 400
                        }

                        .uc-meta {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                            gap: 6px 10px;
                            margin-top: 9px;
                            font-size: 12.5px;
                            color: #d6ecf8
                        }

                        .uc-meta b {
                            color: #fff;
                            font-weight: 500
                        }

                        .uc-quad {
                            color: var(--hi) !important
                        }

                        .uc-snap {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-size: 13px;
                            color: var(--ink-soft);
                            user-select: none;
                            cursor: pointer
                        }

                        .uc-snap input {
                            accent-color: var(--sin);
                            width: 15px;
                            height: 15px
                        }

                        table.uc-table {
                            width: 100%;
                            border-collapse: collapse;
                            font-family: var(--mono);
                            font-size: 13px
                        }

                        .uc-table th {
                            text-align: left;
                            font-weight: 600;
                            color: var(--ink-soft);
                            font-size: 11px;
                            letter-spacing: .08em;
                            text-transform: uppercase;
                            padding: 0 0 6px;
                            border-bottom: 1px solid var(--line);
                        }

                        .uc-table td {
                            padding: 7px 0;
                            border-bottom: 1px dashed var(--line)
                        }

                        .uc-table tr:last-child td {
                            border-bottom: none
                        }

                        .uc-fn {
                            font-weight: 600
                        }

                        .uc-fn.sin {
                            color: var(--sin)
                        }

                        .uc-fn.cos {
                            color: var(--cos)
                        }

                        .uc-val {
                            text-align: right;
                            color: var(--ink)
                        }

                        .uc-val.undef {
                            color: var(--cos);
                            font-style: italic
                        }

                        .uc-copy {
                            float: right;
                            margin-left: 10px;
                            font-family: var(--sans);
                            font-size: 10px;
                            font-weight: 600;
                            letter-spacing: .05em;
                            text-transform: uppercase;
                            cursor: pointer;
                            color: var(--ink-soft);
                            background: transparent;
                            border: 1px solid var(--line);
                            border-radius: 6px;
                            padding: 2px 7px;
                        }

                        .uc-copy:hover {
                            color: var(--sin);
                            border-color: var(--sin)
                        }

                        .uc-foot {
                            margin-top: 16px;
                            font-size: 11.5px;
                            color: var(--ink-soft);
                            line-height: 1.5
                        }

                        .d-none-extras {
                            display: none;
                        }

/* ---- perimeter-calculator.blade.php ---- */
#onetw{
        outline: none;
    }
.r_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.b_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.b_main{
                display: block;
            }
            .angle_b ,.angle_a ,.c_main,.d_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.c_main,.b_main,.given{
                    display: block;
                }
                .angle_b ,.angle_a,.nbr_main,.givena,.d_main{
                    display: none;
                }
.r_main,.b_main,.given,.angle_b{
                    display: block;
                }
                .angle_b ,.nbr_main,.givena,.d_main,.c_main{
                    display: none;
                }
.r_main,.given,.angle_b ,.angle_a{
                    display: block;
                }
                .nbr_main,.givena,.c_main,.b_main,.d_main{
                    display: none;
                }
.r_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.b_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.b_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.angle_a{
                display: block;
            }
            .angle_b ,.d_main ,.c_main,.b_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.b_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.d_main,.c_main,.b_main{
                display: block;
            }
            .angle_b ,.angle_a,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.b_main,.givena{
                    display: block;
                }
                .angle_b ,.angle_a,.d_main ,.c_main,.nbr_main,.given{
                    display: none;
                }
.r_main,.b_main,.givena,.c_main{
                    display: block;
                }
                .angle_b,.d_main,.nbr_main,.given,.angle_a{
                    display: none;
                }
.r_main,.angle_a,.b_main,.givena{
                    display: block;
                }
                .angle_b,.d_main ,.c_main,.nbr_main,.given{
                    display: none;
                }
.r_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.b_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.b_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.b_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.nbr_main,.given,.givena{
                display: none;
            }
.r_main,.nbr_main{
                display: block;
            }
            .angle_b ,.angle_a,.d_main ,.c_main,.b_main,.given,.givena{
                display: none;
            }

/* ---- vertex-form-calculator.blade.php ---- */
@media (max-width: 380px) {
        .calculator-box{
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
    .velocitytab .v_active{
        border-bottom: 3px solid var(--light-blue);
    }
    .velocitytab .v_active{
        color: var(--light-blue);
    }
    .velocitytab p{
        position: relative;
        top: 2px;
        font-weight: 600;
    }
    .velocitytab p:hover{
        background: gainsboro;
    }

/* ---- washer-method-calculator.blade.php ---- */
#exampleLoadBtn{
                        background: #1670a712
                    }

/* ---- point-slope-form-calculator.blade.php ---- */
.input-unit{
        top: 2px;
    }
    .gap-3{
        gap: 3px;
    }
    #exampleLoadBtn{
        background: #1670a712
    }
.output-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.07);
        padding: 25px;
        max-width: 750px;
        margin: 20px auto;
        border: 1px solid #e3eef5;
        animation: fadeIn 0.6s ease-in-out;
    }

    @keyframes fadeIn {
        from {opacity: 0; transform: translateY(15px);}
        to {opacity: 1; transform: translateY(0);}
    }

    .output-header {
        text-align: center;
        color: #1670a7;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 15px;
        margin-bottom: 9px;
    }

    .result-card {
        background: #ffffff;
        border-left: 5px solid #1670a7;
        border-radius: 10px;
        padding: 12px 15px;
        transition: 0.3s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* .result-card:hover {
        background: #e9f8f5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    } */

    .result-title {
        font-weight: 600;
        color: #1670a7;
        margin-bottom: 9px;
        font-size: 15px;
    }

    .result-value {
        font-size: 18px;
        color: #111;
        font-weight: 600;
    }

    .highlight {
        color: #1670a7;
    }

    .step-section {
        margin-top: 25px;
        background: #f9fcff;
        border: 1px solid #dbeaf5;
        border-radius: 10px;
        padding: 20px;
    }

    .step-section h3 {
        color: #1670a7;
        text-align: center;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 700;
    }

    .step {
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 15px;
        margin: 10px 0;
        border-left: 4px solid #1670a7;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .step strong {
        color: #1670a7;
        font-size: 16px;
    }

    .interpretation {
        margin-top: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        background: #e8f9f2;
        color: #00916d;
        border-radius: 8px;
        padding: 12px 0;
        border: 1px solid #c8f0df;
    }

    @media (max-width: 768px) {
        .output-container {
            padding: 15px;
            margin: 15px auto;
        }

        .result-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .result-card {
            padding: 12px;
        }

        .step-section {
            padding: 15px;
        }

        .step {
            padding: 10px 12px;
        }

        .output-header {
            font-size: 20px;
        }

        .result-value {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .output-container {
            padding: 12px;
            margin: 10px auto;
        }

        .step-section {
            padding: 12px;
        }

        .step {
            padding: 8px 10px;
            font-size: 14px;
        }

        .interpretation {
            font-size: 14px;
            padding: 10px 0;
        }
    }

/* ---- rational-expression-calculator.blade.php ---- */
.strut {
    height: auto !important;
    vertical-align: baseline !important;
}

/* Or more specifically target MathJax elements */
mjx-container mjx-strut {
    height: auto !important;
    vertical-align: baseline !important;
}
.katex-text-left .katex-html {
    text-align: left !important;
    margin: 0 !important;
}

/* ---- million-billion-lakh-crore.blade.php ---- */
.people_also{
                    border: 1px solid #ddd;
                    padding: 5px 8px;
                    text-align: left;
                    cursor: pointer;
                    width: 100%;
                    font-size: 14px;
                    color: #000000a3;
                    border-radius: 5px;
                    background: #F8F8F8;
                }
                .people_also:hover{
                    background: #0081B0;
                    color: #fff;
                }

/* ---- sgpa-to-percentage-calculator.blade.php ---- */
.remove-btn{
        width: 20px;
        height: 20px;
        background: red;
        border-radius: 50%;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: medium;
        font-weight: 600;
    }

/* ---- radical-equation-calculator.blade.php ---- */
.new_textArea{
        outline: none;
        border: none;
        resize: none;
        overflow: hidden;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        line-height: 1.5;
        letter-spacing: .5px;
        margin-bottom: 5px;
    }
    .position-absolute{
        position: absolute;
    }
    .topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .imageBtns{
        background-color: rgba(223, 223, 223, 0.4);
        padding: 4px 12px;
        border-radius: 3px;
        border: 1px solid #D4D4D4
    }
    .imageBtns:hover{
        background-color: rgba(200, 200, 200, 0.6);
        transition-duration: .5s;
    }
    .object-fit-contain{
        object-fit: contain
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    .object-fit-none{
        object-fit: none
    }


    .loader{
        top: -20px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 75px;
        height: 75px;
        margin: auto;
        display: block;
        position: absolute
    }
    .loader::after{
        content: "";
        width: 75px;
        height: 75px;
        display: block;
        border-width: 5px;
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: #e2e2e2 #2980b9;
        animation: spinner 1.5s cubic-bezier(.4,0,.4,1) infinite
    }
    .loader_overlay{
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        border-radius: 20px;
        background: rgba(249, 250, 251,.97);
        box-shadow: 0 0px 6px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 25%)
    }
    .loader_txt{
        left: 0;
        right: 0;
        bottom: 0;
        top: 58%;
        font-size: 16px;
        font-weight: 500;
        position: absolute;
        display: inline-block;
        margin: auto auto auto auto
    }


    .qr_code{
        display: none;
        position: absolute;
        width: 170px;
        min-height: 215px;
        bottom: 55%;
        left: 0%;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
    }
    .qr_code img{
        object-fit: contain;
    }
    .qr_code p{
        font-size: 14px;
        line-height: 16px;
    }
    .qr_loader{
        width: 30px;
        height: 30px;
    }
    .qr_loader::after{
        width: 30px;
        height: 30px;
    }
    @keyframes spinner{
        0%{
            transform: rotate(0deg)
        }
        100%{
            transform: rotate(360deg)
        }
    }
    /* #sendAgain{
        background: var(--light-blue);
        border-radius: 3px;
        padding: 3px 8px;
        gap: 5px;
    }
    #sendAgain:hover{
        background: #1670a7c4;
    } */

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }


:root {
        --toggle-indicator-size: 15px;
        --track-height: calc(var(--toggle-indicator-size) + 6px);
        --track-width: calc(var(--toggle-indicator-size) * 2.5);
        --high-contrast-mode-support: solid 2px transparent;

        /* Replace these with your color values */
        --light: #f0f0f0;
        --mid: #cccccc;
        --dark: #333333;
    }

    label.toggle {
        align-items: center;
        border-radius: 100px;
        display: flex;
        margin-bottom: 16px;
        font-size: 15px
    }

    label.toggle:last-of-type {
        margin: 0;
    }

    .toggle__input {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        outline: none;
    }

    .toggle__input:not([disabled]):active + .toggle-track,
    .toggle__input:not([disabled]):focus + .toggle-track {
        border: 1px solid var(--mid);
        /* box-shadow: 0px 0px 0px 2px var(--dark); */
    }

    .toggle__input:disabled + .toggle-track {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .toggle-track {
        background: var(--light);
        border: 1px solid var(--mid);
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        height: var(--track-height);
        margin-right: 8px;
        position: relative;
        width: var(--track-width);
        outline: none;
    }

    .toggle-indicator {
        align-items: center;
        background: var(--light-blue);
        border-radius: var(--toggle-indicator-size);
        bottom: 2px;
        display: flex;
        height: var(--toggle-indicator-size);
        justify-content: center;
        left: 2px;
        outline: var(--high-contrast-mode-support);
        position: absolute;
        transition: 0.3s;
        width: var(--toggle-indicator-size);
    }

    .checkMark {
        fill: #fff;
        height: calc(var(--toggle-indicator-size) - -4px);
        width: calc(var(--toggle-indicator-size) - 4px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .toggle__input:checked + .toggle-track .toggle-indicator {
        background: green;
        transform: translateX(calc(var(--track-width) - var(--track-height)));
    }

    .toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

    @media screen and (-ms-high-contrast: active) {
        .toggle-track {
            border-radius: 0;
        }
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        button.imageCrop{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
        button.removeShare{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
    }
    .result>*:not(:first-child) {
        overflow: unset;
    }

/* ---- partial-fraction-decomposition-calculator.blade.php ---- */
p#newInput[contenteditable] {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: auto !important;
        right: 3px !important;
        z-index: 9999 !important;
        bottom: 50px !important;
    }

    .text-yellow {
        color: #E79E00;
    }

    .text-green {
        color: #2EAE2C;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 70px !important;
    }

    .new_tooltip {
        position: relative;
    }

    .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    @media (max-width: 768px) {
    .topCancel {
        left: 80px !important;
    }

    .cropBtn {
        left: 1px !important;
    }
    }

    .font-s-10 {
        font-size: 8px !important;
    }

    #newInput {
        padding: 0px 3px;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    form[action*="partial-fraction-decomposition-calculator"] #math-field {
        width: 85%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="partial-fraction-decomposition-calculator"] .mq-root-block,
    form[action*="partial-fraction-decomposition-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    #new_convert {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px 12px 5px 12px;
        height: 39px !important;
        border: none;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

/* ---- sig-fig-calculator.blade.php ---- */
@media (max-width: 480px) {
        .calculator-box{
            padding-right: 0rem;
            padding-left: 0rem;
        }
    }
    @media (min-width: 990px){
        .width-45{
            width: 46px;
        }
    }
    /* Round-off (#y) input was squeezed to ~129px by the 5 fixed-width
       col-2 preset buttons in the same flex row. Below ~135px, Chromium's
       number-input spinner hit-area covers the whole field, so a plain
       click resets the (empty) value to "0" instead of placing a cursor,
       making the field unusable, and the box also felt too small. Give it
       a stable width above that threshold and let the row wrap on narrow
       viewports so the buttons never get squeezed either. */
    div.bg-gray1:has(#y) {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    #y {
        width: 150px;
        min-width: 150px;
        flex: 0 0 150px;
    }
    .own_lies li{
        margin-top: 15px;
        padding-left: 5px;
        letter-spacing: .5px;
        line-height: 22px;
    }
    .width_20_per .bg_gray{
        box-shadow: 0 0 6px 3px #;
        background:var(--bgWhite);

    }
    .own_lies li::marker {
        color: #1670a7;
        font-weight: bold
    }
    .width_20_per button {
        display: flex;
        height: 35px;
        background: #0485b745;
        /* background: white; */
        color: #000;
        border: 1px solid var(--bdrGry);
        border-radius: 5px;
        box-shadow: 3px 3px 0px 0px #00000038;
        font-size: 18px;
        align-items: center;
        width: 100%;
        justify-content: center;
        cursor: pointer;
    }
    #index_clients{
        margin-top: 100px;
        margin-bottom:70px
    }
    .first_card_parent{
        width: 35%;
    }
    .first_card_child{
        padding: 20px;
        border-radius: 10px;
        margin-top: 30px;
        background-color: var(--white);
        box-shadow: 0 0 6px 3px #ededed;
        position: relative;
    }
    .first_card_child img:first-child{
        position: absolute;
        left: -20px;
        border-radius: 100px;
    }

    .first_card_child img:last-of-type{
        position: absolute;
        right: 25px;
        top: -25px;
    }

    .first_card_child p:not(:last-child) {
        padding-left: 20px;
    }

    .first_card_child p:nth-child(odd),.second_card p:nth-child(odd),.third_card_child p:nth-child(odd),.four_card p:nth-child(odd){
        color: #757272;
    }

    .first_card_child p:nth-child(even),.second_card p:nth-child(even),.third_card_child p:nth-child(even),.four_card p:nth-child(even){
        font-weight: 500;
    }

    .second_card{
        width: 45%;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        background-color: var(--white);
        box-shadow: 0 0 6px 3px #ededed;
        height: 100%;
        position: relative;
    }

    .second_card img:first-child{
        position: absolute;
        left: -20px;
        border-radius: 100px;
        object-fit: cover;
    }

    .second_card img:last-of-type{
        position: absolute;
        right: 25px;
        top: -25px;
    }

    .second_card p:not(:last-child) {
        padding-left: 20px;
    }

    .third_card_parent{
        width: 45%;
        margin-top: 70px;
    }
    .third_card_child{
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        background-color: var(--white);
        box-shadow: 0 0 6px 3px #ededed;
        margin-bottom: -40px;
        position: relative;
    }

    .third_card_child img:first-child{
        position: absolute;
        left: -20px;
        border-radius: 100px;
    }

    .third_card_child img:last-of-type{
        position: absolute;
        right: 25px;
        top: -25px;
    }

    .third_card_child p:not(:last-child) {
        padding-left: 20px;
    }

    .four_card{
        width: 35%;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        background-color: var(--white);
        box-shadow: 0 0 6px 3px #ededed;
        margin-right: 40px;
        /* margin-bottom: -40px; */
        position: relative;
    }

    .four_card img:first-child{
        position: absolute;
        left: -20px;
        border-radius: 100px;
    }

    .four_card img:last-of-type{
        position: absolute;
        right: 25px;
        top: -25px;
    }

    .four_card p:not(:last-child) {
        padding-left: 20px;
    }
    .parent_brand_star {
        display: flex;
        gap: 50px;
    }
    .index_brand_star {
        margin-top: 30px;
        padding: 10px !important;
        background-color: var(--white);
        box-shadow: 0 0 6px 3px #ededed;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    [type="radio"].with-gap:checked+span:before{
        border: 2px solid #13699E;
    }
    [type="radio"].with-gap:checked+span:after{
        background: #13699E;
    }

    .width_20_per{
        width: 20%;
        float: left;
        padding: 5px;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
    }
    .bg-d-sky{
        background: #0485b745;
        color: white;
    }
    .width_20_per span{
        display: flex;
        height: 35px;
        background: #0485b745;
        /* background: white; */
        color: #000;
        border: 1px solid var(--bdrGry);
        border-radius: 5px;
        box-shadow: 3px 3px 0px 0px #00000038;
        font-size: 18px;
        align-items: center;
        justify-content: center;
    }
    .width_20_per span:active{
        box-shadow: inset 6px 6px 10px 0 #00000038, inset -6px -6px 10px 0 #00000038;
    }
    .width_20_per label{
        background:var(--bgWhite);
        color: #13689E;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 35px;
        margin-left: 0px !important;
        border: 1px solid var(--bdrGry);
        border-radius: 5px;
        box-shadow: 3px 3px 0px 0px #00000038;
        font-size: 14px

    }
    .width_20_per label span{
        border: none;
        color: #13689E;
        border-radius: 0px;
        background: transparent !important;
    }
    .blue_btn{
        background:linear-gradient(90deg, #1670a7, #094365) !important;
        color: #fff !important;
    }
    @media (max-width: 480px){
        .width_20_per label{
            height: 35px;
            line-height: 35px;
            box-shadow: 3px 3px 0px 0px #ddd;
        }
        .width_20_per span{
            height: 35px;
            line-height: 30px;
        }
        .width_20_per{
            padding: 4px !important;
            font-size: 16px;
            cursor: pointer;
        }
        .width_20_per label span{
            padding-left: 23px !important;
            box-shadow: none !important;
        }
    }
    #ShowHistory{
        height:90px;
        overflow:auto;
        padding-top:6px;
        display: none;
    }
    .w_700{
        width: 700px
    }
    .calculator_btn_hide,#scientific_cal{
        display: none
    }
    .bg-white{
        background: white !important;
        /* background: var(--bg-dark-gray) !important; */
    }
    .bg-gray1{
        background: #a1a1a173 !important;
    }

/* ---- slope-intercept-form-calculator.blade.php ---- */
.divide{
        display: inline-grid;
        vertical-align: middle;
        text-align: center;
        line-height: 1.5;
    }
    .divide span{
        font-size: 18px;
    }
    .divide span.upper {
        border-bottom: 1px solid #000;
        text-align: center;
    }

/* ---- synthetic-division-calculator.blade.php ---- */
.synth_steps{
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 32px;
    }

/* ---- power-series-calculator.blade.php ---- */
.icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
#ansGeminiFallback{
                            overflow-x: auto;
                        }
                        #ansGeminiFallback .mord.textbf{color: var(--light-blue);}
                        #ansGeminiFallback .katex-display, #ansGeminiFallback  .katex-display>.katex{
                            text-align:start!important;
                        }

/* ---- online-math-calculator.blade.php ---- */
#newInput {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        overflow: hidden;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
        max-width: 100%;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .proDetails {
        position: absolute !important;
        right: 148px !important;
        top: 6px !important;
        width: 300px !important;
        background: var(--white);
        z-index: 9999 !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: -66px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: 20px !important;
        right: 3px !important;
        z-index: 9999 !important;
    }

    /*
   .fw-bold{
       font-weight: 700;
   } */

    .bg-yellow {
        background-color: #FFF8E2;
    }

    .text-yellow {
        color: #E79E00;
    }

    .bg-green {
        background-color: #E7FFE7;
    }

    .text-green {
        color: #2EAE2C;
    }

    .radius-50 {
        border-radius: 50px;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 55px !important;
    }

    .obj-cover {
        object-fit: cover;
    }

    #content {
        top: 0px !important;
    }

    .ai_math_cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .ai_math_cards .col-md-4 {
        display: flex !important;
    }

    .ai_math_cards .bg-light-blue {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .inputBox .new_tooltip {
        position: relative;
    }

    .inputBox .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .inputBox .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .inputBox .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }

    #selectModals {
        padding: 3px 7px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        right: 80px !important;
        top: 120px !important;
    }

    .multiple_modals {
        position: absolute;
        background: var(--white);
        z-index: 9999999;
        width: 250px;
        left: 0px;
        top: 35px;
        height: 200px;
        overflow: auto;
    }

    .multiple_modals .modalName:hover {
        background: #dddddd73
    }

    .multiple_modals .proModals {
        cursor: not-allowed;
    }

    .multiple_modals .proModals p:first-child:not(.modal_type),
    .multiple_modals .proModals p:last-child:not(.modal_type) {
        opacity: 0.5;
    }

    .multiple_modals .modalName.active {
        background: #1670a712;
    }

    #selectModals .rotate {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal_type {
        padding: 2px 6px;
        font-size: 8px;
        border-radius: 20px;
        color: var(--white);
        opacity: 0.8;
    }

    .modalName .modal_type {
        background: green;
    }

    .proModals .modal_type {
        background: rgb(255 152 0);
    }

    .proColor .modal_type {
        background: rgb(255 152 0) !important;
    }
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .selectedProMax {
        background: transparent !important;
        border-bottom: 1px solid hsla(203, 77%, 37%, 0.722) !important;
    }

    .selectedProMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .proMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .green-lablel {
        background: #5BD94280;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .yellow-lablel {
        background: #FFB84599;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .upgrade-pro {
        text-decoration: none;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px;
        font-size: 10px;
        border-radius: 7px;
    }

    .toggle {
        display: flex;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        top: 140px !important;
        right: 0px !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: 145px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }

        .toggle {
            font-size: 12px;
        }
    }

    .arrow-rotate {
        transform: rotate(180deg);
    }

    .resultQuestion {
        cursor: pointer;
    }
/* Container for the buttons */
    .button-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        /* Space between buttons */
        /* padding-top: 10px; */
    }

    /* Style for each button */
    .option-btn {
        display: flex;
        align-items: center;
        padding: 3px 13px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .option-btn.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: #fff;
        border-color: #19A4F9;
    }

    /* Hover effect for non-active buttons */
    .option-btn:hover:not(.active) {
        background-color: #f0f0f0;
    }

    /* Style for the icons (you can replace these with actual icons) */
    .icon {
        margin-right: 5px;
        font-size: 16px;
        padding-bottom: 1px;
    }

    .option_text {
        padding-top: 1px;
    }

    .ai_writing {
        padding-top: 2px;
    }
/* Container for the dropdowns */
    .dropdown-container {
        align-items: center;
        gap: 10px;
        padding: 2px 7px;
    }

    /* Arrow between dropdowns */
    .arrow {
        font-size: 20px;
        color: #333;
    }

    /* Dropdown wrapper */
    .custom-dropdown {
        position: relative;
        width: 150px;
    }

    /* Selected option (trigger) */
    .dropdown-selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
    }

    /* Dropdown arrow */
    .dropdown-selected::after {
        content: "▼";
        font-size: 10px;
        color: #666;
    }

    /* Dropdown menu */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: none;
        z-index: 10;
    }

    /* Show dropdown menu when active */
    .custom-dropdown.active .dropdown-menu {
        display: block;
    }

    /* Dropdown options */
    .dropdown-option {
        padding: 8px 12px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Hover effect for options */
    .dropdown-option:hover {
        background-color: #f0f0f0;
    }

    /* Checkmark for selected option */
    .dropdown-option.selected::after {
        content: "✔";
        color: #007bff;
        font-size: 14px;
    }

    .dropdown-option.selected {
        background-color: #b6e3ff;
    }

    .strong_p {
        font-weight: bold;
        color: #19A4F9;
        background: #19a4f91c;
        padding: 6px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 2.5;
    }

    .c_pointer {
        cursor: pointer;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    .blue_bg {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .blued_border {
        border: 1px solid #19A4F9 !important;
    }

    @keyframes pulse-opacity {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .voice-image-2.pulsing {
        animation: pulse-opacity 1s infinite;
    }


    form[action*="online-math-calculator"] #math-field {
        width: 85%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="online-math-calculator"] .mq-root-block,
    form[action*="online-math-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

    .adv-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .4);
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* Optional: adds some spacing on smaller screens */
    }

    .adv-modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
        max-width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .w-400 {
        width: 400px;
    }

    @media (max-width: 768px) {
        .w-400 {
            width: 100%;
        }
    }

/* ---- twos-complement-calculator.blade.php ---- */
.bin_cell{
		padding: 5px 14px;
		border: 1px solid #1e5b80;
		background: #009fff73;
	}

/* ---- quadratic-formula-calculator.blade.php ---- */
.input-unit{
        top: 2px;
    }
    .gap-3{
        gap: 3px;
    }

    /* Styles adapted from the provided Quadratic Calculator HTML */
    .input-section {
        margin-bottom: 16px;
    }

    .input-mode-toggle {
        display: flex;
        background: #f7fafc;
        border-radius: 12px;
        padding: 4px;
        margin-bottom: 25px;
        gap: 4px;
    }

    .mode-btn {
        flex: 1;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        color: #4a5568;
    }

    .mode-btn.active {
        background: white;
        color: #1670a7;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .mode-btn:hover:not(.active) {
        background: #edf2f7;
    }

   .equation-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px; /* Increased from 10px */
        margin-bottom: 25px;
        font-size: 1.6rem; /* Increased from 1.5rem */
        color: #2d3748;
        flex-wrap: wrap;
    }

    .equation-visual.hidden {
        display: none;
    }

    .coefficient-group {
        display: flex;
        align-items: center;
        gap: 8px; /* Increased from 5px */
    }

    .coefficient-input {
        width: 100px; /* Increased from 60px */
        padding: 12px; /* Increased from 8px */
        border: 2px solid #e2e8f0;
        border-radius: 10px; /* Slightly increased border radius */
        text-align: center;
        font-size: 14px; /* Increased from 1.2rem */
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .coefficient-input:focus {
        outline: none;
        border-color: #1670a7;
        box-shadow: 0 0 0 3px rgba(22, 112, 167, 0.2);
    }

    .coefficient-input-container {
        display: none;
    }

    .coefficient-input-container.active {
        display: block;
    }

    .equation-input-container {
        text-align: center;
        display: none;
        align-self: center;
        justify-self: center;
    }

    .equation-input-container.active {
        display: block;
    }

    .equation-label {
        display: block;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    .equation-text-input {
        width: 100%;
        padding: 15px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 1.1rem;
        text-align: center;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }

    .equation-text-input:focus {
        outline: none;
        border-color: #1670a7;
        box-shadow: 0 0 0 3px rgba(22, 112, 167, 0.2);
    }

    .equation-help {
        color: #718096;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
.output-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.07);
        padding: 25px;
        max-width: 750px;
        margin: 20px auto;
        border: 1px solid #e3eef5;
        animation: fadeIn 0.6s ease-in-out;
    }

    @keyframes fadeIn {
        from {opacity: 0; transform: translateY(15px);}
        to {opacity: 1; transform: translateY(0);}
    }

    .output-header {
        text-align: center;
        color: #1670a7;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 15px;
        margin-bottom: 9px;
    }

    .result-card {
        background: #ffffff;
        border-left: 5px solid #1670a7;
        border-radius: 10px;
        padding: 12px 15px;
        transition: 0.3s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .result-title {
        font-weight: 600;
        color: #1670a7;
        margin-bottom: 9px;
        font-size: 15px;
    }

    .result-value {
        font-size: 18px;
        color: #111;
        font-weight: 600;
    }

    .highlight {
        color: #1670a7;
    }

    .step-section {
        margin-top: 25px;
        background: #f9fcff;
        border: 1px solid #dbeaf5;
        border-radius: 10px;
        padding: 20px;
    }

    .step-section h3 {
        color: #1670a7;
        text-align: center;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 700;
    }

    .step {
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 15px;
        margin: 15px 0;
        border-left: 4px solid #1670a7;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .step strong {
        color: #1670a7;
        font-size: 16px;
    }

    .interpretation {
        margin-top: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        background: #e8f9f2;
        color: #00916d;
        border-radius: 8px;
        padding: 12px 0;
        border: 1px solid #c8f0df;
    }

    @media (max-width: 768px) {
        .output-container {
            padding: 15px;
            margin: 15px auto;
        }

        .result-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .result-card {
            padding: 12px;
        }

        .step-section {
            padding: 15px;
        }

        .step {
            padding: 10px 12px;
        }

        .output-header {
            font-size: 20px;
        }

        .result-value {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .output-container {
            padding: 12px;
            margin: 10px auto;
        }

        .step-section {
            padding: 12px;
        }

        .step {
            padding: 8px 10px;
            font-size: 14px;
        }

        .interpretation {
            font-size: 14px;
            padding: 10px 0;
        }
    }

   .calculator-box{
    padding-bottom: 22px;
   }


   @media (max-width: 475px) {
        #chart_div{
            width: 100% !important;
            overflow-x: auto;
        }
    }
/* Add these to your existing CSS */

    #chart_div {
        width: 100% !important;
        min-height: 300px;
        height: auto !important;
        position: relative;
        overflow: hidden;
    }

    /* Make the step section more responsive */
    .step-section {
        overflow-x: auto;
    }

    /* Specifically target mobile screens */
    @media (max-width: 768px) {
        .step {
            overflow-x: auto;
        }

        #chart_div {
            height: 250px !important;
            min-height: 250px;
        }
    }

    @media (max-width: 576px) {
        #chart_div {
            height: 200px !important;
            min-height: 200px;
        }
    }

    @media (max-width: 375px) {
        #chart_div {
            height: 180px !important;
            min-height: 180px;
        }
    }

    .chart-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 10px 0;
    }

    .chart-container > div {
        width: 100% !important;
        height: 100% !important;
    }

    @media (max-width: 768px) {
        .chart-container {
            height: 250px;
        }
    }

    @media (max-width: 576px) {
        .chart-container {
            height: 200px;
        }
    }

/* ---- recursive-formula-calculator.blade.php ---- */
p#newInput[contenteditable] {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .proDetails {
        position: absolute !important;
        right: 148px !important;
        top: 6px !important;
        width: 300px !important;
        background: var(--white);
        z-index: 9999 !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: -66px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: auto !important;
        right: 3px !important;
        z-index: 9999 !important;
        bottom: 50px !important;
    }

    /*
   .fw-bold{
       font-weight: 700;
   } */

    .bg-yellow {
        background-color: #FFF8E2;
    }

    .text-yellow {
        color: #E79E00;
    }

    .bg-green {
        background-color: #E7FFE7;
    }

    .text-green {
        color: #2EAE2C;
    }

    .radius-50 {
        border-radius: 50px;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 111px !important;
    }

    .obj-cover {
        object-fit: cover;
    }

    #content {
        top: 0px !important;
    }

    .ai_math_cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .ai_math_cards .col-md-4 {
        display: flex !important;
    }

    .ai_math_cards .bg-light-blue {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .new_tooltip {
        position: relative;
    }

    .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }

    #selectModals {
        padding: 3px 7px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        right: 80px !important;
        top: 120px !important;
    }

    .multiple_modals {
        position: absolute;
        background: var(--white);
        z-index: 9999999;
        width: 250px;
        left: 0px;
        top: 35px;
        height: 200px;
        overflow: auto;
    }

    .multiple_modals .modalName:hover {
        background: #dddddd73
    }

    .multiple_modals .proModals {
        cursor: not-allowed;
    }

    .multiple_modals .proModals p:first-child:not(.modal_type),
    .multiple_modals .proModals p:last-child:not(.modal_type) {
        opacity: 0.5;
    }

    .multiple_modals .modalName.active {
        background: #1670a712;
    }

    #selectModals .rotate {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal_type {
        padding: 2px 6px;
        font-size: 8px;
        border-radius: 20px;
        color: var(--white);
        opacity: 0.8;
    }

    .modalName .modal_type {
        background: green;
    }

    .proModals .modal_type {
        background: rgb(255 152 0);
    }

    .proColor .modal_type {
        background: rgb(255 152 0) !important;
    }
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .selectedProMax {
        background: transparent !important;
        border-bottom: 1px solid hsla(203, 77%, 37%, 0.722) !important;
    }

    .selectedProMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .proMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .green-lablel {
        background: #5BD94280;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .yellow-lablel {
        background: #FFB84599;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .upgrade-pro {
        text-decoration: none;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 8px;
        font-size: 14px;
        border-radius: 7px;
    }

    .toggle {
        align-items: center;
        border-radius: 10px;
        display: flex;
        margin-bottom: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        top: 140px !important;
        right: 0px !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: 145px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }

        .toggle {
            font-size: 12px;
        }
    }

    .arrow-rotate {
        transform: rotate(180deg);
    }

    .resultQuestion {
        cursor: pointer;
    }

    .heading-p {
        display: inline-block;
        background: #EEEEEE;
        border-radius: 10px 0px;
        padding: 3px 15px;
        font-size: 12px;
    }

    .des-example {
        color: #969696;
        font-size: 12px;
        cursor: pointer;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
    .topCancel {
        left: 80px !important;
    }

    .cropBtn {
        left: 1px !important;
    }
    }

    .font-s-10 {
        font-size: 8px !important;
    }

    #newInput {
        padding: 0px 3px;
    }
/* Container for the buttons */
    .button-container {
        display: none;
        flex-wrap: wrap;
        gap: 10px;
        /* Space between buttons */
        /* padding-top: 10px; */
        align-items: end;
    }

    /* Style for each button */
    .option-btn {
        display: flex;
        align-items: center;
        padding: 3px 13px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .option-btn.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: #fff;
        border-color: #19A4F9;
    }

    /* Hover effect for non-active buttons */
    .option-btn:hover:not(.active) {
        background-color: #f0f0f0;
    }

    /* Style for the icons (you can replace these with actual icons) */
    .icon {
        font-size: 16px;
    }

    .option_text {
        padding-top: 1px;
    }

    .ai_writing {
        padding-top: 2px;
    }

    .c_pointer {
        cursor: pointer;
    }

    .strong_p {
        font-weight: bold;
        color: #19A4F9;
        background: #19a4f91c;
        padding: 6px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 2.5;
    }

    #categoryDropdown {
        padding: 3px 10px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid #ccc;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    .n_tab {
        padding: 6px 16px;
        margin: 0 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .n_tab:hover {
        background-color: #bbb;
    }

    .n_tab.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .n_tab-container {
        display: flex;
        justify-content: center;
    }

    #cal_input {
        width: 85%;
        margin-left: 25px;
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 12px;
    }
form[action*="recursive-formula-calculator"] #math-field {
        width: 85%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="recursive-formula-calculator"] .mq-root-block,
    form[action*="recursive-formula-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    #new_convert {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px 12px 5px 12px;
        height: 39px !important;
        border: none;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    /* .mathquill-field:focus + .math-placeholder,
    .mathquill-field:not(:empty) + .math-placeholder {
        display: none;
    } */

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

    .adv-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .4);
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* Optional: adds some spacing on smaller screens */
    }

    .adv-modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
        max-width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .w-400 {
        width: 400px;
    }

    @media (max-width: 768px) {
        .w-400 {
            width: 100%;
        }
    }

    .main_tabs {
        background: var(--white);
        padding: 5px;
        border: 1px solid rgba(46, 131, 251, .2);
        border-radius: 25px;
    }

    .main_tab {
        padding: 0 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        cursor: pointer;
        font-size: 16px;
    }

    .main_tab.active {
        background: var(--light-blue);
        color: var(--white);
    }

    .calculator.input-area {
        padding: 5px 15px 15px !important;
        margin-bottom: 10px;
    }

    @media (max-width: 378px) {
        .main_tab {
            padding: 0 10px;
        }
    }

/* ---- scientific-calculator.blade.php ---- */
#newInput {
        min-height: 40px;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .5px;
        overflow: hidden;
        border: none;
        background: transparent;
        padding: 10px;
        position: relative;
        max-width: 100%;
    }

    #newInput.placeholder::before {
        content: "{{ $lang[4] ?? 'Type your Question' }}";
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    #newInput:not(.placeholder)::before {
        content: '';
    }

    .proDetails {
        position: absolute !important;
        right: 148px !important;
        top: 6px !important;
        width: 300px !important;
        background: var(--white);
        z-index: 9999 !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: -66px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }
    }

    .qr_code {
        right: 0px !important;
        left: 70px !important;
        bottom: 46px !important;
        z-index: 9999 !important;
    }

    #example-container {
        top: 20px !important;
        right: 3px !important;
        z-index: 9999 !important;
    }

    /*
   .fw-bold{
       font-weight: 700;
   } */

    .bg-yellow {
        background-color: #FFF8E2;
    }

    .text-yellow {
        color: #E79E00;
    }

    .bg-green {
        background-color: #E7FFE7;
    }

    .text-green {
        color: #2EAE2C;
    }

    .radius-50 {
        border-radius: 50px;
    }

    #newInput {
        min-width: 100% !important;
        min-height: 55px !important;
    }

    .obj-cover {
        object-fit: cover;
    }

    #content {
        top: 0px !important;
    }

    .ai_math_cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .ai_math_cards .col-md-4 {
        display: flex !important;
    }

    .ai_math_cards .bg-light-blue {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .inputBox .new_tooltip {
        position: relative;
    }

    .inputBox .new_tooltip .tooltiptext {
        visibility: hidden;
        /* Remove fixed width */
        /* width: 200px; */
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        /* Adjusted padding for better spacing */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 11px;
        /* Make width adjust to content */
        display: inline-block;
        /* or use width: fit-content */
        min-width: 120px;
        /* Optional: Ensures tooltip isn't too narrow */
        max-width: 300px;
        /* Optional: Prevents tooltip from becoming too wide */

    }

    .inputBox .new_tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .inputBox .new_tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 768px) {
        .new_mbl_tooltip .tooltiptext {
            left: 0px;
        }

        .new_mbl_tooltip .tooltiptext::after {
            left: 20px;
        }
    }

    #selectModals {
        padding: 3px 7px;
        background: var(--white);
        border: none;
        border-radius: 7px;
        outline: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        right: 80px !important;
        top: 120px !important;
    }

    .multiple_modals {
        position: absolute;
        background: var(--white);
        z-index: 9999999;
        width: 250px;
        left: 0px;
        top: 35px;
        height: 200px;
        overflow: auto;
    }

    .multiple_modals .modalName:hover {
        background: #dddddd73
    }

    .multiple_modals .proModals {
        cursor: not-allowed;
    }

    .multiple_modals .proModals p:first-child:not(.modal_type),
    .multiple_modals .proModals p:last-child:not(.modal_type) {
        opacity: 0.5;
    }

    .multiple_modals .modalName.active {
        background: #1670a712;
    }

    #selectModals .rotate {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal_type {
        padding: 2px 6px;
        font-size: 8px;
        border-radius: 20px;
        color: var(--white);
        opacity: 0.8;
    }

    .modalName .modal_type {
        background: green;
    }

    .proModals .modal_type {
        background: rgb(255 152 0);
    }

    .proColor .modal_type {
        background: rgb(255 152 0) !important;
    }
.mobileBtn,
    .copyPaste {
        padding: 18px 10px;
        border: none;
        background: linear-gradient(180deg, rgba(23, 96, 167, 0.1) 0%, rgba(9, 44, 65, 0.1) 100%);
        height: 33px;
        border-radius: 10px;
    }

    .mobileBtn:hover {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .selectedProMax {
        background: transparent !important;
        border-bottom: 1px solid hsla(203, 77%, 37%, 0.722) !important;
    }

    .selectedProMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .proMax:hover {
        background: #1670a712 !important;
        cursor: pointer !important;
    }

    .green-lablel {
        background: #5BD94280;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .yellow-lablel {
        background: #FFB84599;
        color: rgb(0, 0, 0);
        padding: 3px 16px;
        border-radius: 20px;
        font-size: 10px;
    }

    .upgrade-pro {
        text-decoration: none;
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: white;
        padding: 5px;
        font-size: 10px;
        border-radius: 7px;
    }

    .toggle {
        display: flex;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 0px;
        font-size: 12px;
        cursor: pointer;
    }

    .proDetails {
        top: 140px !important;
        right: 0px !important;
    }

    @media screen and (max-width: 768px) {
        .proDetails {
            position: absolute;
            right: -7px !important;
            top: 145px !important;
            width: 300px !important;
            background: var(--white);
            z-index: 9999;
        }

        .toggle {
            font-size: 12px;
        }
    }

    .arrow-rotate {
        transform: rotate(180deg);
    }

    .resultQuestion {
        cursor: pointer;
    }
/* Container for the buttons */
    .button-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        /* Space between buttons */
        /* padding-top: 10px; */
    }

    /* Style for each button */
    .option-btn {
        display: flex;
        align-items: center;
        padding: 3px 13px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .option-btn.active {
        background: linear-gradient(90deg, #19A4F9 0%, #197EBD 100%) !important;
        color: #fff;
        border-color: #19A4F9;
    }

    /* Hover effect for non-active buttons */
    .option-btn:hover:not(.active) {
        background-color: #f0f0f0;
    }

    /* Style for the icons (you can replace these with actual icons) */
    .icon {
        margin-right: 5px;
        font-size: 16px;
        padding-bottom: 1px;
    }

    .option_text {
        padding-top: 1px;
    }

    .ai_writing {
        padding-top: 2px;
    }
/* Container for the dropdowns */
    .dropdown-container {
        align-items: center;
        gap: 10px;
        padding: 2px 7px;
    }

    /* Arrow between dropdowns */
    .arrow {
        font-size: 20px;
        color: #333;
    }

    /* Dropdown wrapper */
    .custom-dropdown {
        position: relative;
        width: 150px;
    }

    /* Selected option (trigger) */
    .dropdown-selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
    }

    /* Dropdown arrow */
    .dropdown-selected::after {
        content: "▼";
        font-size: 10px;
        color: #666;
    }

    /* Dropdown menu */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: none;
        z-index: 10;
    }

    /* Show dropdown menu when active */
    .custom-dropdown.active .dropdown-menu {
        display: block;
    }

    /* Dropdown options */
    .dropdown-option {
        padding: 8px 12px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Hover effect for options */
    .dropdown-option:hover {
        background-color: #f0f0f0;
    }

    /* Checkmark for selected option */
    .dropdown-option.selected::after {
        content: "✔";
        color: #007bff;
        font-size: 14px;
    }

    .dropdown-option.selected {
        background-color: #b6e3ff;
    }

    .strong_p {
        font-weight: bold;
        color: #19A4F9;
        background: #19a4f91c;
        padding: 6px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 2.5;
    }

    .c_pointer {
        cursor: pointer;
    }

    #newInput.placeholder::before {
        content: attr(data-placeholder) !important;
        color: #7E7E7E;
        pointer-events: none;
        position: absolute;
    }

    .blue_bg {
        background: linear-gradient(180deg, #19A4F9 0%, #197EBD 100%) !important;
    }

    .blued_border {
        border: 1px solid #19A4F9 !important;
    }

    @keyframes pulse-opacity {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .voice-image-2.pulsing {
        animation: pulse-opacity 1s infinite;
    }


    form[action*="scientific-calculator"] #math-field {
        width: 85%;
        margin-left: 30px;
        border-color: transparent;
    }

    form[action*="scientific-calculator"] .mq-root-block,
    form[action*="scientific-calculator"] .mq-math-mode .mq-root-block {
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 10px;
        background: white;
    }

    .mq-math-mode .mq-empty.mq-root-block {
        background: #ffffff;
    }

    .math-placeholder {
        position: absolute;
        left: 37px;
        top: 14px;
        color: #aaa;
        pointer-events: none;
        font-style: italic;
        font-size: 14px;
    }

    @media only screen and (max-width: 600px) {
        #math-field {
            width: 100%;
            margin-left: 0;
        }

        .math-placeholder {
            left: 10px;
            top: 14px;
        }
    }

    .adv-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .4);
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* Optional: adds some spacing on smaller screens */
    }

    .adv-modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 500px;
        max-width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .w-400 {
        width: 400px;
    }

    @media (max-width: 768px) {
        .w-400 {
            width: 100%;
        }
    }
[type="radio"].with-gap:checked+span:before {
        border: 2px solid #13699E;
    }

    [type="radio"].with-gap:checked+span:after {
        background: #13699E;
    }



    .width_20_per {
        width: 20%;
        float: left;
        padding: 5px;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
    }

    .width_20_per span {
        display: flex;
        height: 35px;
        background: #0485b745;
        /* background: white; */
        color: #000;
        border: 1px solid var(--bdrGry);
        border-radius: 5px;
        box-shadow: 3px 3px 0px 0px #00000038;
        font-size: 18px;
        align-items: center;
        justify-content: center;
    }

    .width_20_per span:active {
        box-shadow: inset 6px 6px 10px 0 #00000038, inset -6px -6px 10px 0 #00000038;
    }

    .width_20_per label {
        background: var(--bgWhite);
        color: #13689E;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 35px;
        margin-left: 0px !important;
        border: 1px solid var(--bdrGry);
        border-radius: 5px;
        box-shadow: 3px 3px 0px 0px #00000038;
        font-size: 14px
    }

    .width_20_per label span {
        border: none;
        color: #13689E;
        border-radius: 0px;
        background: transparent !important;
    }

    .blue_btn {
        background: linear-gradient(90deg, #1670a7, #094365) !important;
        color: #fff !important;
    }

    @media (max-width: 480px) {
        .width_20_per label {
            height: 35px;
            line-height: 35px;
            box-shadow: 3px 3px 0px 0px #ddd;
        }

        .width_20_per span {
            height: 35px;
            line-height: 30px;
        }

        .width_20_per {
            padding: 4px !important;
            font-size: 16px;
            cursor: pointer;
        }

        .width_20_per label span {
            padding-left: 23px !important;
            box-shadow: none !important;
        }
    }

    #ShowHistory {
        height: 90px;
        overflow: auto;
        padding-top: 6px;
        display: none;
    }

    .w_700 {
        width: 700px
    }

    .calculator_btn_hide,
    #scientific_cal {
        display: none
    }

    .bg-white {
        background: white !important
    }

/* ---- simultaneous-equations-calculator.blade.php ---- */
.new_textArea{
        outline: none;
        border: none;
        resize: none;
        overflow: hidden;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        line-height: 1.5;
        letter-spacing: .5px;
        margin-bottom: 5px;
    }
    .position-absolute{
        position: absolute;
    }
    .topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .imageBtns{
        background-color: rgba(223, 223, 223, 0.4);
        padding: 4px 12px;
        border-radius: 3px;
        border: 1px solid #D4D4D4
    }
    .imageBtns:hover{
        background-color: rgba(200, 200, 200, 0.6);
        transition-duration: .5s;
    }
    .object-fit-contain{
        object-fit: contain
    }

    .mere_li p, .mere_li li:not(:has(p)){
        font-size: 17px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .mere_li p:not(:first-child),.mere_li ol p,.mere_li ul p, .mere_li li:not(:has(p)) {
        margin-top: 12px;
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }

    #responseContainer{
        line-height: 2
    }

    .object-fit-none{
        object-fit: none
    }


    .loader{
        top: -20px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 75px;
        height: 75px;
        margin: auto;
        display: block;
        position: absolute
    }
    .loader::after{
        content: "";
        width: 75px;
        height: 75px;
        display: block;
        border-width: 5px;
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: #e2e2e2 #2980b9;
        animation: spinner 1.5s cubic-bezier(.4,0,.4,1) infinite
    }
    .loader_overlay{
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        border-radius: 20px;
        background: rgba(249, 250, 251,.97);
        box-shadow: 0 0px 6px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 25%)
    }
    .loader_txt{
        left: 0;
        right: 0;
        bottom: 0;
        top: 58%;
        font-size: 16px;
        font-weight: 500;
        position: absolute;
        display: inline-block;
        margin: auto auto auto auto
    }


    .qr_code{
        display: none;
        position: absolute;
        width: 170px;
        height: 215px;
        bottom: 55%;
        left: 0%;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
    }
    .qr_code img{
        object-fit: contain;
    }
    .qr_code p{
        font-size: 14px;
        line-height: 16px;

    }
    .qr_loader{
        width: 30px;
        height: 30px;
    }
    .qr_loader::after{
        width: 30px;
        height: 30px;
    }
    @keyframes spinner{
        0%{
            transform: rotate(0deg)
        }
        100%{
            transform: rotate(360deg)
        }
    }
    /* #sendAgain{
        background: var(--light-blue);
        border-radius: 3px;
        padding: 3px 8px;
        gap: 5px;
    }
    #sendAgain:hover{
        background: #1670a7c4;
    } */

    #responseContainer ol,#responseContainer ul{
        padding-left: 20px
    }

    #responseContainer h3,#responseContainer h2{
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }


:root {
        --toggle-indicator-size: 15px;
        --track-height: calc(var(--toggle-indicator-size) + 6px);
        --track-width: calc(var(--toggle-indicator-size) * 2.5);
        --high-contrast-mode-support: solid 2px transparent;

        /* Replace these with your color values */
        --light: #f0f0f0;
        --mid: #cccccc;
        --dark: #333333;
    }

    label.toggle {
        align-items: center;
        border-radius: 100px;
        display: flex;
        margin-bottom: 16px;
        font-size: 15px
    }

    label.toggle:last-of-type {
        margin: 0;
    }

    .toggle__input {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        outline: none;
    }

    .toggle__input:not([disabled]):active + .toggle-track,
    .toggle__input:not([disabled]):focus + .toggle-track {
        border: 1px solid var(--mid);
        /* box-shadow: 0px 0px 0px 2px var(--dark); */
    }

    .toggle__input:disabled + .toggle-track {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .toggle-track {
        background: var(--light);
        border: 1px solid var(--mid);
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        height: var(--track-height);
        margin-right: 8px;
        position: relative;
        width: var(--track-width);
        outline: none;
    }

    .toggle-indicator {
        align-items: center;
        background: var(--light-blue);
        border-radius: var(--toggle-indicator-size);
        bottom: 2px;
        display: flex;
        height: var(--toggle-indicator-size);
        justify-content: center;
        left: 2px;
        outline: var(--high-contrast-mode-support);
        position: absolute;
        transition: 0.3s;
        width: var(--toggle-indicator-size);
    }

    .checkMark {
        fill: #fff;
        height: calc(var(--toggle-indicator-size) - -4px);
        width: calc(var(--toggle-indicator-size) - 4px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .toggle__input:checked + .toggle-track .toggle-indicator {
        background: green;
        transform: translateX(calc(var(--track-width) - var(--track-height)));
    }

    .toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

    @media screen and (-ms-high-contrast: active) {
        .toggle-track {
            border-radius: 0;
        }
    }

    .own_katex{
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        button.imageCrop{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
        button.removeShare{
            padding: 5px;
            font-size: 12px;
            height: 30px;
        }
    }

/* ---- square-root-calculator.blade.php ---- */
.inp-set1{
    width:120px;
    float:left;
    position:absolute;
    left:-140px;
    bottom:14px
	}
	.sqr{
    font-size:3em;
    position:absolute;
    left: -24px;
    bottom: -8px;
    }
	.inp-set2{
    width:58%;
    border-top:2px solid #000;
    padding:5px 0px 0px 5px;
    margin-top:18px;
		float:right;
    position:relative
  }
  .inp-set{
  	width:100% !important
  }
  .t-set{
  	margin-top:15px
  }
.inp-set2 {
                                margin-top: 10px !important;
                            }

/* ---- standard-form-calculator.blade.php ---- */
#exampleLoadBtn{
        background: #1670a712
    }

/* ---- surface-area-calculator.blade.php ---- */
#onetw{
        background: transparent;
        border: none;
        color: #1670a7;
        outline: none;
    }

/* ---- uc-gpa-calculator.blade.php ---- */
ul li{
		list-style: none;
	}
	.gap-6{
		gap: 8px
	}
	.gpa_knob {
		width: 210px;
		height: 210px;
		margin: 0px auto;
		border-radius: 100%;
		padding-top: 10px;
		position: relative;
		background-color: #eaf5fa85;
	}
	.inner_knob, .inner_knob1 {
		width: 215px;
		border-radius: 100%;
		margin: 0px auto;
		background: #B71919;
		height: 180px;
		padding-top: 30px;
	}.z-depth-1 {
		box-shadow: 0 0 6px 3px var(--shadowClr) !important;
	}

/* ---- triple-integral-calculator.blade.php ---- */
.topCancel{
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%
    }
    .topCancel:hover{
        background-color: rgb(167, 74, 74);
    }
    .object-fit-contain{
        object-fit: contain
    }
    .gap-10{
        gap: 10px
    }
    .cropBtn{
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .croppie-container {
        height: auto !important
    }

    .icon_animation {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .icon_animation samp {
        display: inline-block;
        position: absolute;
        left: 0; /* Adjusted to start from the left edge */
        background: #EEF1F5;
        animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        height: 8px;
    }
    .main_area .icon_sty:hover .icon_animation samp {
        background: #fff;
    }

    .icon_animation samp:nth-child(1) {
        top: 10px;
        animation-delay: -0.24s;
    }
    .icon_animation samp:nth-child(2) {
        top: 28px;
        left: 0; /* Starts from the left edge */
        animation-delay: -0.12s;
    }
    .icon_animation samp:nth-child(3) {
        top: 47px;
        animation-delay: 0s;
    }

    .icon_animation samp:nth-child(4) {
        top: 66px; /* Adjusted for 4th element */
        animation-delay: 0.12s; /* Slightly delayed */
    }
    .icon_animation samp:nth-child(5) {
        top: 85px; /* Adjusted for 5th element */
        animation-delay: 0.24s; /* Further delayed */
    }

    @keyframes icon_animation {
        0% {
            left: 0;
            width: 0;
        }
        50%, 100% {
            left: 0; /* Stays at the left edge */
            width: 100%; /* Expands to full width */
        }
    }
    .chatgpt-message{
        font-size: 16px;
        line-height: 30px;
        letter-spacing: .5px;
    }
    .position-absolute{
        position: absolute
    }

    #cameraUpload{
        position: absolute;
        right: 70px;
        top: 17px;
    }

    #responseContainer ol,
    #responseContainer ul {
        padding-left: 20px
    }

    #responseContainer h3,
    #responseContainer h2 {
        font-size: 18px;
        font-weight: 600 !important;
        margin-top: 12px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #1670a7;
    }



    .object-fit-contain {
        object-fit: contain
    }

    .chatgpt-message p,
    .chatgpt-message li:not(:has(p)) {
        font-size: 15px;
        letter-spacing: .5px;
        line-height: 1.5;
        color: #000000;
    }

    .chatgpt-message p:not(:first-child),
    .chatgpt-message ol p,
    .chatgpt-message ul p,
    .chatgpt-message li:not(:has(p)) {
        margin-top: 12px;
    }
    .own_katex {
        display: inline-block;
        padding: 2px;
        border-radius: 8px;
        border: 1px solid transparent;
        width: fit-content;
    }

    .own_katex {
        position: relative;
    }

    .own_katex:hover {
        border: 1px solid #1670a7;
        cursor: pointer;
    }

    .own_katex:hover::after{
        background: #add8e6;
        border-radius: 4px;
        bottom: 130%;
        content: "Click to Copy";
        display: block;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        width: 100px;
        z-index: 1;
        font-size: 14px;
        text-align: center;
    }
    .desktopCamera{
        position: absolute;
        top: 18px;
        right: 65px;
    }
    .mobileCamera {
        position: absolute;
        top: 11px;
        right: 15px;
    }
    /* Scoped fix: this page never authored its own .keyboardImg rule, so it
       inherits whichever un-namespaced .keyboardImg{right:...} rule from
       another page currently wins the cascade in this shared file (top is
       already fixed via inline style on the <img>). Pin "right" via this
       page's own #EnterEq id. */
    #EnterEq ~ .keyboardImg {
        right: 9px;
    }
    .integral_input{
        height: 30px;
        background: var(--white);
        padding-left: 5px;
        border: 1px solid #D2D4D8;
        border-radius: 5px;
        color: var(--black);
        font-size: 15px;
        box-sizing: border-box;
        width: 35px;
        outline: 0;
        min-width: 35px;
        max-width: 200px;
    }
    .integ_symb{
        font-size: 7rem;
        line-height: normal;
    }
    .bracket_symbol{
        font-size: 5rem;
    }
    @media (max-width: 480px){
        .integ_symb{
            font-size: 4rem;
        }
        .bracket_symbol{
            font-size: 3rem;
        }
        #lby,#lbx{
            margin-top: 5px !important
        }
        #ubx,#uby{
            margin-bottom: 0px !important
        }
    }
#exampleLoadBtn{
            background: #1670a712
        }

/* ---- ut-gpa-calculator.blade.php ---- */
form[action*="ut-gpa-calculator"] .remove{
        position: absolute;
        top: 5px;
        right: 0;
    }
    .current_inp{
        transition: display 0.5s ease-in-out;
    }

/* ---- volume-calculator.blade.php ---- */
.hidden{
        display: none;
    }
    #onetw{
        background: transparent;
        border: none;
        color: #1670a7;
        outline: none;
    }

/* ---- qr_code loader (shared) ----
   .loader/.loader::after are redefined with conflicting sizes, borders and
   animations across many sections above (a 100px bordered-element ring here,
   a 75px bordered-pseudo-element ring there); the QR scan's `.loader.qr_loader`
   only overrode width/height, so both conflicting rings rendered at once,
   overlapping. Fully self-contained + higher specificity so it always wins
   and only one ring renders. */
.qr_code .loader.qr_loader{
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: -15px 0 0 -15px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 3px solid #e2e2e2;
    border-top: 3px solid #1670a7;
    border-right: 3px solid #1670a7;
    border-radius: 50%;
    z-index: 3;
    animation: spinner 1.5s cubic-bezier(.4,0,.4,1) infinite;
}
.qr_code .loader.qr_loader::after{
    content: none;
    display: none;
}