:root {
    --bs-success-rgb: 119, 212, 0;
    --bs-info-rgb: 23, 162, 184;
    --bs-warning-rgb: 240, 173, 78;
    --bs-danger-rgb: 252, 81, 43;
    --bs-link-color: rgba(55, 32, 117, 1);
    --bs-box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 50%);
}

a {
    text-decoration: none;
    color: var(--bs-link-color);
}

a:not(.btn):not([class^="link-"]):hover>span {
    text-decoration: underline;
    color: var(--bs-link-color);
}

a.text-light:hover>span {
    color: var(--bs-light) !important;
}
.text-clicable {
    cursor: pointer;
    color: var(--bs-link-color);
    text-decoration: underline;
}

.text-clicable:hover {
    color: rgb(78, 46, 168);
    text-decoration: underline;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-display: block;
    font-weight: 900;
    src: url("../font/fa-solid-900.woff2") format("woff2"), url("../font/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-display: block;
    font-weight: 400;
    src: url("../font/fa-regular-400.woff2") format("woff2"), url("../font/fa-regular-400.ttf") format("truetype");
}

.dropdown-item {
    padding: 0.4rem 1rem;
    font-size: 14px;
    line-height: 20px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: rgba(55, 32, 117, 1);
}

.badge {
    --bs-badge-padding-x: 0.8em;
    text-transform: capitalize;
}

.dataset-tags .badge {
    --bs-badge-padding-x: 0.8em;
    margin-bottom: 5px;
    max-width: 85vw;
    overflow: hidden;
}

.img-light {
    filter: brightness(10);
}

tr.bg-light>td {
    background-color: var(--color-light) !important;
    color: var(--color-dark) !important;
}

#profile-bar-img {
    max-height: 60px;
    margin-bottom: -20px;
    margin-top: -20px;
}

label {
    display: block;
    margin-bottom: 0;
}

.text-shadow {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

form input,
form select {
    width: 100%;
}

.checkbox input {
    width: initial;
    margin-right: 5px;
}

.row {
    padding-bottom: 15px;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000000;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #000000;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #000000;
}

/* BUTTONS */
.btn {
    text-transform: capitalize !important;
}

.btn-sm {
    height: 1.5rem;
    --bs-btn-padding-y: 0;
}

.btn.btn-jumbo {
    max-width: 385px;
    margin: auto;
    font-size: 20px;
    width: 100%;
}

.disabled {
    pointer-events: none;
    cursor: default;
}

/* THEME */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgba(73, 27, 85, 1);
    --bs-btn-hover-border-color: rgba(73, 27, 85, 1);
    --bs-btn-hover-color: #fff;
    --bs-btn-bg: rgba(55, 32, 117, 1);
    --bs-btn-border-color: rgba(55, 32, 117, 1);
    --bs-btn-focus-shadow-rgb: 97, 149, 239;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(55, 32, 117, 1);
    --bs-btn-active-border-color: rgba(55, 32, 117, 1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(73, 27, 85, 1);
    --bs-btn-disabled-border-color: rgba(73, 27, 85, 1);
}

.btn-wtin-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgb(114, 109, 1);
    --bs-btn-hover-border-color: rgb(114, 109, 1);
    --bs-btn-hover-color: #fff;
    --bs-btn-bg: rgba(206, 198, 0, 1);
    --bs-btn-border-color: rgba(206, 198, 0, 1);
    --bs-btn-focus-shadow-rgb: 97, 149, 239;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(206, 198, 0, 1);
    --bs-btn-active-border-color: rgba(206, 198, 0, 1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(114, 109, 1, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(114, 109, 1);
    --bs-btn-disabled-border-color: rgb(114, 109, 1);
}

.btn-outline-primary {
    --bs-btn-color: rgba(55, 32, 117, 1);
    --bs-btn-border-color: rgba(55, 32, 117, 1);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(55, 32, 117, 1);
    --bs-btn-hover-border-color: rgba(55, 32, 117, 1);
    --bs-btn-focus-shadow-rgb: 69, 130, 236;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(55, 32, 117, 1);
    --bs-btn-active-border-color: rgba(55, 32, 117, 1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgba(55, 32, 117, 1);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(55, 32, 117, 1);
    --bs-gradient: none;
}

.bg-secondary {
    background: #eaeaea;
}

.border-primary {
    border-color: rgba(55, 32, 117, 1) !important;
}

body,
p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

/* HEADERS*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 700;
    line-height: 120%;
}

h1,
h2,
.h1,
.h2 {
    font-family: "Syne", sans-serif;
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
    font-family: Poppins, sans-serif;
}

/* Base Styles */
.h1,
h1 {
    font-size: 36px;
    /* Smaller than 1200px for better fit on smaller screens */
}

.h2,
h2 {
    font-size: 28px;
}

.h3,
h3 {
    font-size: 22px;
}

.h4,
h4 {
    font-size: 17px;
}

.h5,
h5 {
    font-size: 15px;
}

/* Medium Devices (768px to 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {

    body,
    p {
        font-size: 16px;
    }

    .h1,
    h1 {
        font-size: 38px;
        /* Slightly larger than base for medium screens */
    }

    .h2,
    h2 {
        font-size: 30px;
    }

    .h3,
    h3 {
        font-size: 24px;
    }

    .h4,
    h4 {
        font-size: 19px;
    }

    .h5,
    h5 {
        font-size: 16px;
    }
}

/* Large Devices (≥1200px) */
@media (min-width: 1200px) {

    body,
    p {
        font-size: 18px;
    }

    .h1,
    h1 {
        font-size: 42px;
        /* Maintaining the size from your original spec */
    }

    .h2,
    h2 {
        font-size: 32px;
    }

    .h3,
    h3 {
        font-size: 21px;
    }

    .h4,
    h4 {
        font-size: 16px;
    }

    .h5,
    h5 {
        font-size: 14px;
    }
}

th {
    font-weight: 400;
}

.small,
small {
    font-size: 0.7em;
}

.median {
    font-size: 1em;
}

.large {
    font-size: 1.5em;
}

/*Custom margins*/
.mb-n200 {
    margin-bottom: -200px;
}

.mt-250 {
    margin-top: 250px;
}

/*custom height and widths*/
.w-max {
    width: max-content;
}

.min-h-270 {
    min-height: 270px;
}

.progress-bar {
    background-color: rgba(55, 32, 117, 1);
}

.ellipsis {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ACCORDIONS */
.accordion-body {
    padding: 45px 18px;
}

/* ACCORDIONS COLLAPSE TRANSITION */
.accordion-row .collapse {
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    max-height: 0;
    overflow: hidden;
}

.accordion-row .collapse.show {
    transition: max-height 0.5s ease-in-out;
    max-height: 300px;
    /* you can adjust this value based on the content height */
}

/* MESSAGES / ALERTS */
@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.message.alert {
    position: fixed;
    top: -50px;
    right: 0;
    border: 0 !important;
    border-radius: 15px 0 0 15px;
    margin: 0;
    background-color: #372075;
    color: #fff !important;
    padding: 5px 40px 5px 10px;
    font-size: 16px;
    z-index: 9999;
    /* Ensure it's above other elements */
    opacity: 1;
    pointer-events: all;
    transition: top 0.3s ease;
    /* This will animate the top position */
}

.message.alert.error {
    background-color: #ed0615;
    color: #fff !important;
}

.alert-dismissible .btn-close {
    padding: 10px;
}

@media only screen and (max-width: 999px) {
    .message.alert {
        top: 48px;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        text-align: center;
    }
}

/* */

@keyframes gradient-background {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.moving-gradient {
    /*background: linear-gradient(270deg, rgba(73, 27, 85, 1), rgba(55, 32, 117, 1));*/
    background: linear-gradient(200deg, rgb(55 27 85), rgba(1, 1, 1, 1));

    background-size: 200% 200%;
    animation: gradient-background 3s ease infinite;
    color: #fff;
    position: relative;
}

.container-fluid.moving-gradient,
.container.moving-gradient {
    min-height: 300px;
    padding-top: 60px;
}

.moving-gradient.moving-gradient-small {
    min-height: 100px;
}

.nav-item .nav-link {
    font-size: 12px;
    font-weight: 800;
    color: #242424;
}

.nav-item a.btn.btn-sm {
    margin-bottom: 0 !important;
    height: 100%;
    line-height: 26px;
}

.nav-item .nav-link.active,
.nav-item .nav-link:hover {
    color: rgb(55 27 85);
    text-decoration: underline;
}

.nav-item a.btn {
    font-size: 12px;
    font-weight: 600;
}

.btn {
    font-size: 12px;
    font-weight: 600;
}

.form-control {
    font-size: 12px;
}

.input>div.error-message {
    color: #ff0000;
    font-size: 0.8em !important;
    text-align: center;
    background: lavenderblush;
    border-radius: 5px;
    margin: -13px 0.25rem 0.25rem;
    padding: 0.25rem;
}

.navbar {
    font-size: 12px !important;
    line-height: 12px !important;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: #fff;
    background-color: rgba(55, 32, 117, 1);
    border-color: rgba(55, 32, 117, 1);
}

.page-link:hover {
    z-index: 2;
    color: rgba(55, 32, 117, 1);
    background-color: rgba(55, 32, 117, 0.2);
}

/*  */

.frosted {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
}

input.form-control,
select.form-control {
    font-weight: 800;
}

.table.table-striped.w-100 {
    font-size: unset;
}

.tabcontent {
    min-width: 62rem;
}

.suggestionsList {
    max-height: 32rem;

    /* Set the maximum height you want */
    overflow-y: auto;
    position: absolute;
    /* Set position to absolute */
    width: 100%;
    /* Enable vertical scrolling if needed */
}

.suggestionsList:empty {
    z-index: -10000 !important;
    box-shadow: none !important;
}

.input-container {
    position: relative;
}

.suggestionsList .list-group-item.clickable:hover {
    background-color: #52406c;
    color: #fff;
    /* Change to the desired background color */
    cursor: pointer;
}

.remove-tab:hover {
    background-color: #410000 !important;
    color: white !important;
    cursor: pointer;
}

.drill-tab:hover {
    background-color: #0e6841 !important;
    color: white !important;
    cursor: pointer;
}

.comparision-tab:hover {
    background-color: #0e0041 !important;
    color: white !important;
    cursor: pointer;
}

.analisis-tab:hover {
    background-color: #9ecfef !important;
    color: rgb(0, 0, 0) !important;
    cursor: pointer;
}

.range-bar {
    display: flex;
    width: 100%;
    height: 6px;
    background: lightgray;
    border-radius: 1rem;
}

.invisivel-bar {
    position: relative !important;
    height: 1px;
    margin-top: auto;
    margin-bottom: auto;
    width: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.tracker-ball {
    position: absolute !important;
    width: 10px;
    right: -5px;
    top: -5px;
    height: 10px;
    background-color: rgb(99, 99, 99);
    border-radius: 50%;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.accordion-row .collapse.show {
    transition: max-height 0.5s ease-in-out;
    max-height: max-content;
}

/* FOOTER */

#footer li {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.copyright {
    font-size: 12px;
}

/* TREND SUMMARY */
.quality-improvement-labels {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 10px;
}

/* Add custom styles here */
.quality-improvement-bar .trend-bar-container {
    position: relative;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 0 15px;
    overflow: hidden;
}

.quality-improvement-bar .trend-bar {
    height: 100%;
    position: relative;
}

.quality-improvement-bar .trend-bar .threshold {
    height: 100%;
    width: 30%;
    /* Initial width of the threshold gradient */
    position: absolute;
    background: linear-gradient(to right, transparent, #77d400, transparent);
    left: 0;
    /* Initial position */
    margin-left: -15%;
}

.quality-improvement-bar .indicator {
    width: 25px;
    /* Width of the circle */
    height: 25px;
    /* Height of the circle */
    background-color: #fff;
    border-radius: 50%;
    /* Make it circle */
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Center it vertically */
    left: 0;
    /* Initial position */
}

.staircase-graph {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    height: 28px;
    flex-wrap: nowrap;
}

.staircase-graph .step {
    width: 11px;
    /* Adjust based on your preference */
    background-color: rgba(36, 36, 36, 0.2);
    /* Space between steps */
    margin: 0 3px 5px;
    transition: background-color 0.3s;
    /* Smooth transition for color change */
    border-radius: 10px;
}

/* Dynamic width for each step to create the staircase effect */
.staircase-graph .step:nth-child(1):not(.negative),
.staircase-graph .step:nth-child(5).negative,
.staircase-graph .step:nth-child(6) {
    height: 40%;
}

.staircase-graph .step:nth-child(2):not(.negative),
.staircase-graph .step:nth-child(4).negative,
.staircase-graph .step:nth-child(7) {
    height: 55%;
}

.staircase-graph .step:nth-child(3):not(.negative),
.staircase-graph .step:nth-child(3).negative,
.staircase-graph .step:nth-child(8) {
    height: 70%;
}

.staircase-graph .step:nth-child(4):not(.negative),
.staircase-graph .step:nth-child(2).negative,
.staircase-graph .step:nth-child(9) {
    height: 85%;
}

.staircase-graph .step:nth-child(5):not(.negative),
.staircase-graph .step:nth-child(1).negative,
.staircase-graph .step:nth-child(10) {
    height: 100%;
}

.representative-drivers-section {
    max-height: 500px;
    overflow-y: auto;
    margin-top: 0;
}

.representative-drivers-section>.col-12>.row>div {
    align-content: space-evenly;
}

.representative-drivers-section .regions-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 0.5rem;
}

.representative-drivers-section .category-wrapper,
.representative-drivers-section .regions-wrapper>div {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.representative-drivers-section .regions-wrapper>span {
    max-width: 100%;
}

.representative-drivers-section .carrot-wrapper {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
}

.representative-drivers-section .carrot-wrapper.active {
    transform: rotate(-180deg);
}

.representative-drivers-section .carrot-wrapper:hover {
    cursor: pointer;
}

.bg-grey {
    background-color: #ecebeb !important;
}

.bg-dark {
    background-color: #242424 !important;
}

.bg-primary {
    background-color: rgba(55, 32, 117, 1) !important;
}

[class*="bg-target-"] {
    background-color: #969696 !important;
    color: #000000 !important;
}

.bg-target-1 {
    background-color: #242424 !important;
    color: #fff !important;
}

.bg-target-2 {
    background-color: #424242 !important;
    color: #fff !important;
}

.bg-target-3 {
    background-color: #a19c66 !important;
    color: #fff !important;
}

.bg-target-4 {
    background-color: #3d3a5f !important;
    color: #fff !important;
}

.bg-target-5 {
    background-color: #000000 !important;
    color: #fff !important;
}

.bg-target-6 {
    background-color: #462f2f !important;
    color: #fff !important;
}

.bg-target-7 {
    background-color: #9b9b9b !important;
    color: #fff !important;
}

.bg-target-8 {
    background-color: #9b9b9b !important;
    color: #fff !important;
}

.bg-target-9 {
    background-color: #a2b7d6 !important;
    color: #3f3f3f !important;
}

@media (max-width: 999px) {
    .staircase-graph {
        width: 48px;
        height: 14px;
    }

    .staircase-graph .step {
        width: 5px;
        /* Adjust based on your preference */
        /* Space between steps */
        margin: 0 2px 3px;
        border-radius: 5px;
    }
}

@media (max-width: 999px) {
    .drivers-impact-table table {
        font-size: 0.5em;
    }
}

/* MARGINS */

.pt-6 {
    padding-top: 4.5rem !important;
}

.mt-6 {
    margin-top: 4.5rem !important;
}

.mt-8 {
    margin-top: 12rem !important;
}

.mb-8 {
    margin-bottom: 12rem !important;
}

@media (min-width: 1200px) {
    .mt-xl-8 {
        margin-top: 12rem !important;
    }

    .mb-xl-8 {
        margin-bottom: 12rem !important;
    }
}

/* DEMO PAGE */

.demo-page #forecast-row .card-body {
    max-height: 0;
}

.open-animation {
    max-height: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1s;
}

.demo-page .drivers-impact-table>div {
    max-height: 450px;
}

.demo-page .drivers-impact {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .demo-page .drivers-impact {
        margin-bottom: -100px;
    }
}

.open-animation.open {
    max-height: 31.25rem !important;
    height: auto !important;
}

.demo-page .quality-improvement-bar .wtin-indicator {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #fff;
    /* Adjust the height to control the size of the triangle */
    position: absolute;
    top: 70%;
    transform: translate(-50%, -50%);
    left: 0;

    /* Initial position */
}

.demo-page .quality-improvement-bar .trend-bar .wtin-threshold {
    height: 100%;
    width: 30%;
    /* Initial width of the threshold gradient */
    position: absolute;
    background: linear-gradient(to right, transparent, #cec600, transparent);
    left: 0;
    /* Initial position */
    margin-left: -15%;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.h1.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-size: 72px;
    color: rgba(55, 32, 117, 1);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.contact-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    /* Allows click events to pass through */
    z-index: 2;
    /*background blur*/
}

.contact-card {
    color: #fff;
    border-radius: 5px;
    width: 100%;
    max-width: 460px;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: auto;
    /* Re-enables pointer events for interaction */
}

.position-relative:hover .contact-card {
    opacity: 1;
}

.position-relative:hover .contact-card-wrapper {
    backdrop-filter: blur(5px);
}

/* MODAL */
.modal-header {
    border: 0;
}

.btn-close.btn-close-light {
    color: #fff !important;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

.border-end-dashed {
    border-right-style: dashed !important;
}

.bg-dark-purple {
    background-color: rgb(13, 2, 25);
}

.DriversImpact {
    border-collapse: separate;
    border-spacing: 0;
}

.border-dashed-start {
    border-left: 1px dashed #949393;
}

.border-dashed-end {
    border-right: 1px dashed #949393;
}

.border-dashed-bottom {
    border-bottom: 1px dashed #949393 !important;
}

.DriversComparison,
.DriversImpact,
.ModelImprovement,
.ModelPerformance,
.ForecastLite,
.ImprovementSlider,
.Forecast {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#particles-js {
    pointer-events: none;
}

.magnifying-glass {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0 15px;
    background-color: transparent;
    border: none;
    border-radius: 0 5px 5px 0;
}

.symbol {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 0.5s;
}

.rotate-90 {
    transform: rotate(90deg);
}

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

.end-arrow {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 0.3s;
}

#content *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.drivers-container::-webkit-scrollbar-thumb {
    background: rgba(36, 36, 36, 1);
    border-radius: 20rem;
}

#content *::-webkit-scrollbar-track {
    border: 2px solid transparent;
    background-clip: padding-box;
}

.drivers-container::-webkit-scrollbar-track {
    background: rgba(36, 36, 36, 0.75);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.bg-dark .forecast-comparison-legend::-webkit-scrollbar-thumb,
.bg-dark ul::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255);
    border-radius: 20rem;
}

#content *::-webkit-scrollbar-track,
.bg-dark .forecast-comparison-legend::-webkit-scrollbar-track,
.bg-dark ul::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.75);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.drivers-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}

.drivers-table th {
    background: #ffffff;
    color: rgba(151, 151, 151, 1);
    position: sticky;
    bottom: 0;
    margin: 0;
    z-index: 1200;
}

.pagination {
    --bs-pagination-padding-x: 5px;
    --bs-pagination-padding-y: 3px;
    --bs-pagination-font-size: 15px;
    --bs-pagination-color: #979797;
    --bs-pagination-bg: none;
    --bs-pagination-border-width: none;
    --bs-pagination-border-color: none;
    --bs-pagination-border-radius: none;
    --bs-pagination-hover-color: none;
    --bs-pagination-hover-bg: none;
    --bs-pagination-hover-border-color: none;
    --bs-pagination-focus-color: #979797;
    --bs-pagination-focus-bg: none;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: none;
    --bs-pagination-active-bg: none;
    --bs-pagination-active-border-color: none;
    --bs-pagination-disabled-color: none;
    --bs-pagination-disabled-bg: none;
    --bs-pagination-disabled-border-color: none;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: #979797;
    font-weight: bold;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.page-link {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
}

.page-link:hover {
    scale: 125%;
    z-index: 2;
    color: #979797;
    background-color: transparent;
    border-color: transparent;
}

.improvement-widget {
    min-height: 125px;
}

.forecast-widget {
    min-height: 120px;
}

/* PROFILE | MY ACCOUNT */
.min-h {
    min-height: 200px;
}

.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    left: 20px;
}

#profile-details {
    margin-top: -75px;
}

/* ANIMATIONS */

.animated-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: radial-gradient(circle at -23% 0%, #5beeff, transparent 35%),
        radial-gradient(circle at 130% -1%,
            #f200ff 23%,
            rgb(176 0 255 / 54%) 36%,
            transparent 44%),
        radial-gradient(circle at 21% -4%, #ffffbeb5, transparent 21%),
        radial-gradient(circle at 50% 130%,
            rgb(175 255 190) 5%,
            #9fffdaad 17%,
            transparent 32%),
        linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background-size: 110% 110%;
    animation: gradientAnimation 25s ease-in-out infinite;
    z-index: -1;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
        background-size: 140% 110%;
        filter: contrast(1);
    }

    50% {
        background-position: 100% 50%;
        background-size: 100% 100%;
        filter: contrast(2.5) saturate(0.5);
    }

    100% {
        background-position: 0% 50%;
        background-size: 140% 110%;
        filter: contrast(1);
    }
}

/* CART */
.cart_subcription_name {
    font-size: 1.5em;
    font-weight: 600;
    display: block;
}

.cart_subcription_duration {
    font-size: 1em;
    font-weight: 400;
    display: block;
}

.cart_subcription_price {
    font-size: 1.5em;
    font-weight: 600;
    display: block;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.disclaimer {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); 
    z-index: 2;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease;
    &:hover {        
        > div {
            transition: all 0.1s ease;
            box-shadow: #666 0px 16px 48px 0px !important;
        }
    
    }
    &.hidden {
        visibility: hidden;
        opacity: 0;
    }
    > div {
        max-width: 500px;
        text-align: center;
        line-height: 2;
    }
    button {
        margin-top: 1em;
    }
}

.module-wrapper {
    width: 100%;
    height: 500px;
}




.slider-element {
    width: 60%; /* ajuste conforme preferires */
    margin: auto;
}

#slider {
    width: 100%;
    height: 15px;
    background: #e6e6e6;
    border-radius: 5px;
    position: relative;
    margin-top: .5rem;
    transition: left 0.1s ease-in-out;
}

#sliderBall {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -12.5px;
    border: 2px solid black;
    cursor: pointer;
    z-index: 2;
    transition: all 150ms ease;
}

#sliderBall:active {
    transform: scale(105%);
    background-color: #f8f8f8;
}
#sliderBall:hover {
    background-color: #f8f8f8;

}


#sliderLabels {
    position: relative;
    width: 100%;
    margin-top: 5px;
    height: 20px;
    color: #e6e6e6;
}

.slider-label {
    position: absolute;
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: all 0.1s ease-in-out;
    user-select: none;
}

.slider-label:hover {
    cursor: pointer;
    color: #999999;

}

.slider-label.conservative {
    left: 0%;
}

.slider-label.moderate {
    left: 50%;
}

.slider-label.aggressive {
    left: 100%;
}

.tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 15px;
    background-color: #aeaeae;
    z-index: 1;
}

.tick.middle {
    left: 50%;
    transform: translateX(-50%);
}