/*noinspection CssUnusedSymbol*/
.line-chart .hover-line {
}

/*noinspection CssUnusedSymbol*/
.tippy-box {
    background-color: rgba(22,69,99, 1);
    color: white;
    border-radius: 5px;
    padding: 5px 8px;
}
.axis text {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.833rem, 0.8218rem + 0.05600000000000005vw, 0.889rem);
    fill: #333;
}

.line-chart{
    padding-left: 0;
}

/*noinspection CssUnusedSymbol*/
.line-chart .hover-rect:hover {
    stroke: rgba(22,69,99, 0.3);
    fill: rgba(22,69,99, 0.3);
}

.rt7graph-settings-wrapper-sidebar {
    flex: 0 0 0;
    width: 50px;
    background: #164563; /* ersätt med rätt värde för $rt_blue */
    box-shadow: 8px 0 5px -2px rgba(16, 7, 104, 0.15);
    z-index: 1;
    min-width: 50px;
    padding: 20px 10px 10px 10px;
}

.rt7graph-settings-wrapper-sidebar ul.settings_nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.rt7graph-settings-wrapper-sidebar ul.settings_nav li a {
    color: #FFFFFF; /* ersätt med rätt värde för $rt_white */
}

.rt7graph-settings-wrapper-sidebar ul.settings_nav li a svg {
    width: 32px;
    height: auto;
}

.rt7graph-settings-wrapper-sidebar ul.settings_nav li a:hover {
    color: rgba(255, 255, 255, 0.75); /* rgba-version av $rt_white */
}

.container-graph {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    height: 800px;
}

@media (max-width: 1240px) {
    .container-graph {
        height: 600px;
    }
}

@media (max-width: 767px) {
    .container-graph {
        height: 400px;
    }

    .container-graph .rt7graph-settings-wrapper-content {
        display: none;
    }
}

.container-graph #line_chart,
.container-graph .chart-container {
    height: 100%;
    max-width: 100%;
    width: 100%;
}

.container-graph .rt7graph-settings-wrapper-content {
    flex: 0 0 0;
    background: rgba(22,69,99, 0.2); /* replace with actual value of $rt_blue */
    min-width: 250px;
    padding: 10px 10px 10px 20px;
}

.container-graph .rt7graph-settings-wrapper-content .rt7_range-slider.sidebar {
    width: 75%;
}

.container-graph .rt7graph-settings-wrapper-content .input-group-append {
    display: flex;
}

.container-graph .rt7graph-settings-wrapper-content .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
}

.container-graph .rt7graph-settings-wrapper-content .close:hover {
    color: #000;
    text-decoration: none;
}

.container-graph .rt7graph-settings-wrapper-content button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.container-graph .rt7graph-wrapper {
    background: #e6ded2; /* replace with actual value of $rt_beige_contrast */
    color: #164563;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


@media (max-width: 767px) {
    .container-graph {
        .rt7graph-settings-wrapper-sidebar,
        .rt7graph-settings-wrapper-content {
            display: none;
        }
    }
}

@media (max-width: 575px) {
    /* styles for xs only */
    /*noinspection CssUnusedSymbol*/
    .amount-low, .amount-medium{
        font-size: 4rem!important;
    }
    /*noinspection CssUnusedSymbol*/
    .amount-high{
        font-size: 3.5rem!important;
    }
    /*noinspection CssUnusedSymbol*/
    .amount-very-high{
        font-size: 3rem!important;
    }
}

/* XS + SM + MD ( < 992 ) */
@media (min-width: 576px) and (max-width: 991px) {
    /* styles for xs, sm, and md */
    /*noinspection CssUnusedSymbol*/
    .amount-low, .amount-medium, .amount-high {
        font-size: 4rem!important;
    }
}

/* LG only ( ≥992px and <1200px ) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* styles for lg only */
    /*noinspection CssUnusedSymbol*/
    .amount-low {
        font-size: 4rem!important;
    }

    /*noinspection CssUnusedSymbol*/
    .amount-medium {
        font-size: 3rem!important;
    }

    /*noinspection CssUnusedSymbol*/
    .amount-high {
        font-size: 2.75rem!important;
    }
}

/* XL ( ≥1200px ) */
@media (min-width: 1200px) {
    /* styles for xl and up */
    /*noinspection CssUnusedSymbol*/
    .amount-low {
        font-size: 5rem!important;
    }

    /*noinspection CssUnusedSymbol*/
    .amount-medium {
        font-size: 4rem!important;
    }

    /*noinspection CssUnusedSymbol*/
    .amount-high {
        font-size: 3rem!important;
    }
}