body {
    font-family: "Roboto" !important;
    background: #ffffff;
    color: #000000;
    margin: 0;
    /*height: 100vh;*/
}

.btn {
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 16px;
}

#__LoginBtn:hover {
    background-color: #fda22f !important;
    color: white !important;
    border-color: #fda22f !important;
}

.__LoginBtn:hover {
    background-color: #fda22f !important;
    color: white !important;
    border-color: #fda22f !important;
}

.btnlogin {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    height: 50px;
    background: black;
}

.btndelete {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background: black;
}

.btnSubs {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background: black;
}

.btnExtend {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background: black;
}

.btnInvoice {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background: black;
}

.btnUpdateKey {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background: black;
}

.btnwarning {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    height: 50px;
    background: black;
}


.btnback {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    background-color: lightgray;
}

.btnregister {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    height: 50px;
    background: black;
}

#loginModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#updateKeyModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#profileModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#removeAccountModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#removeDatasetModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#warningDatasetModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#processingDatasetModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#cancelSubscriptionModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#registerModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#forgotPasswordModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#registerverificationModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#loginverificationModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#uploadDataModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#subscribeDetailsModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#upgradeRequiredModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#invoicesModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#invoicesViewModalLabel {
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.text-success {
    color: red;
    font-size: 12px;
}

.btn-close {
    margin: 0 !important;
    right: 0;
    position: absolute;
    font-size: 24px;
}

#modal-header {
    border: none;
    display: unset;
    padding-bottom: 0px;
}

.key-toggle-icon {
    float: right;
    margin-right: 50px;
    cursor: pointer;
}

.key-edit-icon {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-register {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.confirm-password-toggle-icon-register {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-current {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-accountnewpass {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-accountconfirmnewpass {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-new {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.confirm-password-toggle-icon-new {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.password-toggle-icon-oldpass {
    float: right;
    margin-top: -28px;
    margin-right: 10px;
    cursor: pointer;
}

.password-toggle-icon-newpass {
    float: right;
    margin-top: -28px;
    margin-right: 10px;
    cursor: pointer;
}

.password-toggle-icon-confirmnewpass {
    float: right;
    margin-top: -28px;
    margin-right: 10px;
    cursor: pointer;
}


.login-btn {
    width: 100%;
    cursor: pointer;
    background-color: black;
    color: white;
}

.login-btn-disable {
    background-color: #555;
    cursor: pointer;
}

.login-btn-enable {
    background-color: black;
}

.verifypass-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .verifypass-btn:hover {
        background-color: #000;
        color: white;
    }

        .verifypass-btn:hover img {
            content: url('../img/SVGs/update-button-icon-hover.svg');
        }

.btninput {
    margin-bottom: 7px;
    font-family: 'Roboto' !important;
    border-radius: 5px;
    font-size: 18px;
    height: 50px;
    background: black;
}

.resetpass-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .resetpass-btn:hover {
        color: #fff;
        background-color: #000;
    }

        .resetpass-btn:hover img {
            content: url('../img/SVGs/update-button-icon-hover.svg');
        }

.account-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .account-btn:hover {
        color: #fff;
        background-color: #000;
    }

        .account-btn:hover img {
            content: url('../img/SVGs/update-button-icon-hover.svg');
        }


.account-btn-reset {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .account-btn-reset:hover {
        color: #fff;
        background-color: #000;
    }

        .account-btn-reset:hover img {
            content: url('../img/SVGs/reset-icon-hover.svg');
        }

.deleteaccount-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .deleteaccount-btn:hover {
        color: #fff;
        background-color: #000;
    }

.deletedataset-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    background-color: #dcdcdc;
    padding: 15px 25px;
    line-height: 20px;
}

    .deletedataset-btn:hover {
        color: #fff;
        background-color: #000;
    }

        .deletedataset-btn:hover img {
            content: url('../img/SVGs/arrow-white.svg');
        }

.cancelSubs-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    background-color: #dcdcdc !important;
    padding: 15px 25px;
    line-height: 20px;
}

    .cancelSubs-btn:hover {
        color: #fff;
        background-color: #000 !important;
    }

        .cancelSubs-btn:hover img {
            content: url('../img/SVGs/arrow-white.svg');
        }

.cancelSubsFeed-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    background-color: #dcdcdc !important;
    padding: 15px 20px;
    line-height: 20px;
}

    .cancelSubsFeed-btn:hover {
        color: #fff;
        background-color: #000 !important;
    }

        .cancelSubsFeed-btn:hover img {
            content: url('../img/SVGs/cancel-subscribe-button-icon-hover.svg');
        }

.upgradedataset-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    background-color: #dcdcdc !important;
    padding: 15px 25px;
    line-height: 20px;
}

    .upgradedataset-btn:hover {
        color: #fff;
        background-color: #000 !important;
    }

        .upgradedataset-btn:hover img {
            content: url('../img/SVGs/popup-buy-button-icon-hover.svg');
        }



.datasetinput-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .datasetinput-btn:hover {
        color: #fff;
        background-color: #000;
    }

.trialselect-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .trialselect-btn:hover {
        color: #fff;
        background-color: #000;
    }

.warningdataset-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .warningdataset-btn:hover {
        color: #fff;
        background-color: #000;
    }

        .warningdataset-btn:hover img {
            content: url('../img/SVGs/arrow-white.svg');
        }


.finishinput-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .finishinput-btn:hover {
        color: #fff;
        background-color: #000;
    }

.sendpass-btn {
    cursor: pointer;
    color: #696969;
    border: none;
    width: 130px;
    background-color: #dcdcdc;
}

    .sendpass-btn:hover {
        color: #fff;
        background-color: #000;
    }

        .sendpass-btn:hover img {
            content: url('../img/SVGs/send-icon-hover.svg');
        }

.backpass-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
    margin-right: 12px;
    height: 50px;
}

    .backpass-btn:hover {
        background-color: #d0d0d0;
    }

.backpasswarning-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
    margin-right: 12px;
    height: 50px;
}

    .backpasswarning-btn:hover {
        background-color: #000;
        color: #fff;
    }

.backpassprev-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
    margin-right: 12px;
}

    .backpassprev-btn:hover {
        color: #fff;
        background-color: #000;
    }


.trialcancelaccount-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 25px;
    line-height: 19px;
}

    .trialcancelaccount-btn:hover {
        background-color: #000000;
        color: #ffffff;
    }

.trialextendaccount-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
}

    .trialextendaccount-btn:hover {
        background-color: #000000;
        color: #ffffff;
    }

        .trialextendaccount-btn:hover img {
            content: url('../img/SVGs/update-button-icon-hover.svg');
        }

.invoices-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
}

    .invoices-btn:hover {
        background-color: #000000;
        color: #fff;
    }

        .invoices-btn:hover img {
            content: url('../img/SVGs/invoice-button-icon-hover.svg');
        }

.buynow-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    margin-right: 5px;
    padding: 15px 20px;
    line-height: 10px;
}

    .buynow-btn:hover {
        background-color: #000000;
        color: #ffffff;
    }

        .buynow-btn:hover img {
            content: url('../img/SVGs/popup-buy-button-icon-hover.svg');
        }

.back-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    margin-right: 5px;
    padding: 15px 20px;
    line-height: 10px;
}

    .back-btn:hover {
        background-color: #000000;
        color: #ffffff;
    }

        .back-btn:hover img {
            content: url('../img/SVGs/back-arrow-icon.svg');
        }

.invoicesdownload-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 25px;
    line-height: 19px;
}

    .invoicesdownload-btn:hover {
        background-color: #000000;
        color: #ffffff;
    }

        .invoicesdownload-btn:hover img {
            content: url('../img/SVGs/invoice-download-icon-hover.svg');
        }


.updateKey-btn {
    cursor: pointer;
    background-color: #dcdcdc;
    color: #696969;
    border: none;
    padding: 15px 20px;
    line-height: 10px;
}

    .updateKey-btn:hover {
        background-color: #000000;
        color: #fff;
    }

        .updateKey-btn:hover img {
            content: url('../img/SVGs/update-button-icon-hover.svg');
        }

.register-btn {
    width: 100%;
    cursor: pointer;
    background-color: black;
    color: white;
}

.register-btn-disable {
    background-color: #555;
    color: #fff;
    cursor: pointer;
}

.register-btn-enable {
    color: #fff;
    float: right;
}


.continue-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.continue-btn-enable {
    color: #696969;
}

.continue-register-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.continue-register-btn-enable {
    color: #696969;
}

.continue-login-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.continue-login-btn-enable {
    color: #696969;
}

.datasetinput-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.datasetinput-btn-enable {
    color: #696969;
}

.newkeyinput-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.newkeyinput-btn-enable {
    color: #696969;
}

.reset-btn-disable {
    background-color: #c1c1c1;
    cursor: pointer;
}

.reset-btn-enable {
    color: #696969;
}

.account-btn-disable {
    background-color: #c1c1c1;
    color: #696969;
    cursor: pointer;
}

.account-btn-enable {
    color: #696969;
}

.account-settings-btn-disable {
    background-color: #c1c1c1;
    color: #696969;
    cursor: pointer;
}

.account-settings-btn-enable {
    color: #696969;
}

.deleteaccount-btn-disable {
    background-color: #c1c1c1;
    color: #696969;
    cursor: pointer;
}

.deleteaccount-btn-enable {
    color: #696969;
}

.next-btn-disable {
    background-color: #c1c1c1;
    color: #696969;
    cursor: pointer;
}

.next-btn-disable {
    color: #696969;
}

.cancelSubsfeed_disable {
    background-color: #c1c1c1;
    cursor: pointer;
    color: #696969;
}

.cancelSubsfeed_enable {
    color: #696969;
}


.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ebebeb;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }

.upload-btn {
    width: 100%;
    cursor: pointer;
}

.__LoginBtn:hover img.__account {
    content: url('../img/PNGs/signin-small-icon.png');
}

#loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.code-input {
    width: 50px;
    height: 50px;
    text-align: center;
}

.login-code-input {
    width: 50px;
    height: 50px;
    text-align: center;
}

.register-code-input {
    width: 50px;
    height: 50px;
    text-align: center;
}

.header-action-buttons > * {
    margin-right: 2px;
}

.__chartbuttons {
    padding-left: 5px;
}

._charts {
    padding: 6px 9px;
}



.sidebar-item {
    padding: 12px;
    cursor: pointer;
}

    .sidebar-item.active {
        background-color: #E8E9EB;
        font-weight: bold;
        border-radius: 8px;
        padding: 12px 15px 12px 15px;
    }


._buyNow {
    background-color: #000 !important;
    color: white !important;
    border-color: black !important;
    float: left;
    margin-right: 5px;
    padding: 6px 9px;
    min-width: 115px;
}

    ._buyNow:hover {
        background-color: #fda22f !important;
        color: #000 !important;
        border-color: lightgray !important;
    }

        ._buyNow:hover img#buyImage {
            content: url('../img/SVGs/buy-icon-navi-button-hover.svg');
        }

._tooltipBuyNow {
    background-color: #fff !important;
    color: #000 !important;
    border-color: black !important;
    float: left;
    font-size: 13px;
    padding: 6px 9px;
    border-radius: 0px;
}

    ._tooltipBuyNow:hover {
        background-color: #000 !important;
        color: #fff !important;
    }

        ._tooltipBuyNow:hover img#buyImage {
            content: url('../img/SVGs/buy-icon-navi-button.svg');
        }

._tryNow {
    background-color: #000 !important;
    color: white !important;
    border-color: black !important;
    float: left;
    padding: 6px 9px;
    min-width: 115px;
}

    ._tryNow:hover {
        background-color: #fda22f !important;
        color: #000 !important;
        border-color: #fda22f !important;
    }

        ._tryNow:hover img#tryImage {
            content: url('../img/SVGs/trynow-icon-navi-button-hover.svg');
        }

.forgot-password:hover {
    text-decoration: underline;
}

.__toptext {
    font-weight: 500;
}

.__toptextdelete {
    font-weight: 400;
}

/*.__forgotpass {
    margin-top: 11px;
}*/

.__bgGray {
    background-color: #ebebeb;
    border-radius: 5px;
}

.switch1 {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

    .switch1 input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider1 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E8E9EB;
    transition: 0.4s;
    border-radius: 25px;
    border: 1px solid gray;
}

    .slider1:before {
        position: absolute;
        content: "";
        height: 19px;
        width: 19px;
        left: 25px;
        bottom: 2px;
        background-color: black;
        transition: 0.4s;
        border-radius: 50%;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }

input:checked + .slider1 {
    background-color: #fff;
}

    input:checked + .slider1:before {
        transform: translateX(-22px);
    }

@keyframes slide {
    from {
        width: 0%;
    }

    to {
        width: 100%
    }
}

#confirmationlength {
    margin-left: 8px;
}

#confirmationStrong {
    margin-left: 0px;
}

#dropdownMenuButton:hover {
    background-color: #fda22f !important;
    color: #000 !important;
    border-color: #fda22f !important;
}

._subscriptiondrop {
    padding: 0px;
    margin-top: 5px !important;
}

._firstCol {
    font-size: 18px;
    line-height: 53px;
    padding-left: 20px !important;
    width: 25%;
}

._sndCol {
    font-size: 18px;
    line-height: 53px;
    padding-left: 20px !important;
    width: 75%;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gpt-key-wrapper {
    display: block;
    width: 600px;
    max-width: 700px;
    overflow: hidden;
}

._gptKey {
    display: inline-block;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-right: 30px;
}

.form-check-input:checked {
    background-color: #000; /* White background */
    border-color: #000;
}

.form-check-input:focus {
    outline: none;
    box-shadow: none;
}

.tooltip-wrapper ._tooltip {
    display: block; /* Always render, but hidden via opacity */
    position: absolute;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4385f3;
    color: #fff;
    border-radius: 3px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    padding: 7px;
    white-space: normal;
    border-top: none;
    width: 151px;
    box-sizing: border-box;
    pointer-events: none;
    text-align: start;
}

    .tooltip-wrapper ._tooltip::before {
        content: '';
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #4385f3;
        opacity: 0;
        transition: opacity 0.1s ease-in-out;
        pointer-events: none;
    }

.tooltip-wrapper:hover ._tooltip {
    opacity: 1;
    pointer-events: auto;
}

    .tooltip-wrapper:hover ._tooltip::before {
        opacity: 1;
    }

.tooltip-wrapper:has(.__EditChart) ._tooltip {
    width: 160px;
}

#invoiceTableHead {
    background-color: #ebebeb !important;
    line-height: 53px;
    font-size: 18px;
    font-weight: bold;
}

    #invoiceTableHead th {
        background: #f9f9f9;
        position: sticky;
        top: 0;
        z-index: 2;
        padding-left: 20px !important;
    }



#invoiceTableBody td {
    padding-left: 20px !important;
}

#invoiceTableBody {
    line-height: 53px;
    font-size: 18px;
}

.viewClick {
    color: #000;
}

    .viewClick:hover {
        color: #000;
        text-decoration: underline;
    }

.text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.youtubeVideo {
    font-size: 18px;
    color: #3173E8;
    text-decoration: underline;
}

    .youtubeVideo:hover {
        font-size: 18px;
        color: #4471c0;
        text-decoration: underline;
    }

.youtubeKeyVideo {
    font-size: 18px;
    color: #3173E8;
    text-decoration: underline;
}

    .youtubeKeyVideo:hover {
        font-size: 18px;
        color: #4471c0;
        text-decoration: underline;
    }

.close-modal-btn {
    float: right;
    position: relative;
    top: -10px;
    right: -14px;
}

video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

video::-webkit-media-controls-current-time-display {
    display: none !important;
}

#invoiceTableBody input[type="checkbox"]:checked,
#mainInvoiceCheckbox:checked {
    accent-color: #000;
}

/* Black slider styling */
.form-range::-webkit-slider-thumb {
    background: #000 !important;
}

.form-range::-moz-range-thumb {
    background: #000 !important;
}

.form-range::-ms-thumb {
    background: #000 !important;
}
/* Remove blue highlight from track */
.form-range:focus {
    outline: none !important;
    box-shadow: none !important;
}

    /* Remove blue shadow applied by Bootstrap on thumb */
    .form-range:focus::-webkit-slider-thumb {
        box-shadow: none !important;
    }

    .form-range:focus::-moz-range-thumb {
        box-shadow: none !important;
    }

/* Remove active drag highlight */
.form-range:active::-webkit-slider-thumb {
    box-shadow: none !important;
}

.form-range:active::-moz-range-thumb {
    box-shadow: none !important;
}

.input-with-icon {
    position: relative;
    display: inline-block;
}

.info-icon {
    cursor: pointer;
    font-size: 23px;
    margin-left: 14px;
    position: relative;
    display: inline-block;
}

.info-icon-other {
    cursor: pointer;
    font-size: 23px;
    margin-left: 4px;
    position: relative;
    display: inline-block;
}

.info-icon .tooltip-info {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    background: #f9f9f9;
    color: #6c757d;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 1000;
    opacity: 0;
    width: 185px;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.info-icon-other .tooltip-info-other {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    background: #f9f9f9;
    color: #6c757d;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 1000;
    opacity: 0;
    width: 185px;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.info-icon:hover .tooltip-info {
    opacity: 1;
}

.info-icon-other:hover .tooltip-info-other {
    opacity: 1;
}

.xlsxDropdown {
    padding: 0px 13px;
    border-radius: 5px;
    border: 1px solid #E5E5E5;
    height: 48px;
    font-size: 18px;
    display: flex;
    justify-content: space-between; /* Text left, caret right */
    align-items: center;
}

    .xlsxDropdown .dropdown-toggle::after {
        margin-left: 0; /* remove default margin so it stays on the right */
    }

    .xlsxDropdown:hover {
        border: 1px solid #E5E5E5;
    }


input:focus, textarea:focus, select:focus {
    outline: none;
}

.black-checkbox {
    accent-color: black;
    height: 19px;
    width: 19px;
    cursor: pointer;
    border: 1.5px solid lightgray !important;
}


@media (min-width:1050px) and (max-width:1300px) {
    ._buyNow {
        min-width: auto !important;
    }

    ._tryNow {
        min-width: auto !important;
    }
}

@media (min-width:500px) and (max-width:570px) {
    #confirmationlength {
        margin-left: 0px;
    }

    #confirmationStrong {
        margin-left: 0px;
    }
}

@media (min-width:500px) and (max-width:1012px) {
    .g-recaptcha {
        margin-left: -5px !important;
    }

    #confirmation {
        font-size: 13px !important;
    }

    .__mobilesetting {
        font-size: 13px !important;
    }

    .col-form-label {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    #confirmationlength {
        font-size: 11px;
        width: max-content;
        padding-top: 4px;
        margin-top: 0px !important;
    }

    .__codeinput {
        margin-left: 20px !important;
    }

    .__filetext {
        font-size: 12px !important;
    }
}

@media (min-width:300px) and (max-width:500px) {

    #confirmation {
        font-size: 13px;
    }

    #confirmationlength {
        font-size: 11px;
        width: max-content;
        padding-top: 4px;
        margin-left: 0px !important;
        margin-top: 0px !important;
    }

    #confirmationlengthaccount {
        font-size: 12px;
        width: max-content;
        padding-top: 4px;
        margin-top: 0px !important;
    }

    #passiconreg {
        padding-right: 0px !important;
    }

    .col-form-label {
        font-size: 13px !important;
        text-align: start !important;
        font-weight: 500 !important;
    }

    .__headerimg {
        height: 30px !important;
        margin-right: 0px !important;
    }

    .separator {
        margin: unset !important;
        width: 100% !important;
    }

    .__cancelicon {
        width: 10px !important;
        height: 10px !important;
        right: 10px !important;
    }

    .__toptext {
        font-size: 12px !important;
        font-weight: 500;
    }


    .__toptextdelete {
        font-size: 14px !important;
        font-weight: 500;
    }

    .__codeinput {
        margin-left: 20px !important;
    }

    .code-input {
        width: 40px;
        height: 40px;
    }

    .login-code-input {
        width: 40px;
        height: 40px;
    }

    .register-code-input {
        width: 40px;
        height: 40px;
    }

    #emailError {
        padding-top: 5px;
        font-size: 11px;
    }

    #captchaError {
        padding-top: 5px;
        font-size: 12px;
    }

    #error-label {
        font-size: 12px;
        margin-top: 0px !important;
    }

    .__newpass {
        margin: unset !important;
    }

    .__buttons {
        text-align: center;
    }

    .__buttonsgap {
        gap: 0px !important;
    }

    #loginverificationModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #removeAccountModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #loginModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #profileModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #registerModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #forgotPasswordModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #registerverificationModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    #uploadDataModalLabel {
        font-size: 16px;
        font-weight: bold;
    }

    .__mobilebtns {
        width: 110px !important;
        height: 40px !important;
    }

    .__accountbtns {
        justify-content: center !important;
    }

    .__dashline {
        margin-top: 0px !important;
    }

    #_sidebar {
        border-right: unset !important;
        font-size: 13px;
        margin-bottom: 0px !important;
    }

    .forgot-password {
        font-size: 13px !important;
    }

        .forgot-password:hover {
            text-decoration: underline;
        }

    .__currentpass {
        margin-bottom: unset !important;
    }

    .__mobilesetting {
        font-size: 14px;
    }

    .__signup {
        font-size: 14px;
        margin-bottom: 0px !important;
    }

    .__btnmobile {
        height: 40px !important;
    }

    .__bottompass {
        margin-bottom: 0px !important;
    }

    .__bottompassaccount {
        margin-bottom: 5px !important;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
    }

    .already-account {
        order: 1;
    }

    .separator-container {
        order: 2;
        margin-bottom: 0px !important;
    }

    #registerForm {
        order: 3;
    }

    .__modalprofile {
        margin-top: 0px !important;
    }

    #mainlogo {
        margin-top: 0px !important;
        width: 150px;
        height: 55px;
        margin-top: 4px !important;
        object-fit: contain;
    }



    #__LoginBtn {
        margin-bottom: 0px !important;
    }


    .__forgotpass {
        margin-top: 8px;
    }

    .passwordset {
        margin-left: 0px !important;
    }

    .iconsdiv {
        margin-left: 0px !important;
    }

    #temp-message {
        font-size: 11px !important;
        bottom: 15px !important;
        right: unset !important;
        padding-right: 0px !important;
    }

    #temp-icon {
        margin-top: 0px !important;
        margin-right: 6px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .g-recaptcha {
        margin-left: 35px !important;
        transform: scale(0.90);
        -webkit-transform: scale(0.90);
    }

    .youtubeVideo {
        font-size: 14px !important;
    }

    .youtubeKeyVideo {
        font-size: 14px !important;
    }

    #youIcon {
        width: 30px;
    }

    #youKeyIcon {
        width: 30px;
    }
}

@media (max-width:400px) {
    .g-recaptcha {
        margin-left: 10px !important;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .charts {
        font-size: 10px !important;
        font-size: 13px;
    }

    #mainlogo {
        width: 180px;
    }

    #mainlogodiv {
        margin-left: -20px;
    }


    #dropdownMenuButton {
        font-size: 13px;
    }

    .signin-panel {
        margin-left: -20px;
    }

    #__LoginBtn {
        font-size: 11px;
        width: 100px !important;
    }

    .__account {
        width: 9px !important;
    }
}

@media (min-width:500px) and (max-width:1120px) {
    #loadingGear {
        margin-top: 0px !important;
    }

    .delete-icon {
        margin-top: 4px !important;
    }

    .status-icon {
        margin-top: 4px !important;
    }
}

@media (min-width:820px) and (max-width:1024px) {
    .charts {
        font-size: 13px !important;
    }

    .__charts {
        padding-left: 0px !important;
    }
}

@media (min-width:500px) and (max-width:991px) {
    #key-error-label {
        font-size: 14px !important;
    }

    .youtubeVideo {
        font-size: 14px !important;
    }

    .youtubeKeyVideo {
        font-size: 14px !important;
    }

    #youIcon {
        width: 30px;
    }

    #chatGptinput {
        text-align: start !important;
    }
}

@media (min-width:1366px) and (max-width:1919px) {
    .__leftPanel {
        max-height: 89vh;
        height: 80vh !important;
    }
}

@media (min-width:3800px) {
    .rightPanel {
        max-height: 89vh;
        height: 89vh !important;
    }
}