.arrows span {
    position: absolute;
    z-index: 10;
    bottom: 2px;
    height: 27px;
    width: 27px;
    min-width: 27px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.25, 0.1, 0, 1.16);
}

    .arrows span svg {
        fill: rgba(50, 50, 50, 1);
        transition: all 200ms ease;
        opacity: 0.2;
    }

.arrows span.prev{
    left: 6px;
}

.arrows span.next{
    right: 6px;
}

.arrows span:hover svg{
    opacity: 1;
}

.dot_nav{
    display: block;
    height: 15px;
    position: relative;
    top: -30px;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #c2cdd5;
    border: 2px solid #ffffff;
    z-index: 10;
    border-radius: 50%;
    margin: 0px 8px;
    transition: all 250ms ease;
    vertical-align: middle;
}

    .dot:hover:not(.active) {
        
        cursor: pointer;
        border: 2px solid #c2cdd5;
    }

    .dot.active {
        border-color: #c2cdd5;
        border: 2px solid #595e62;
    }

    /*//////////////////////////*/


.switch-buttons {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 130px;
    height: 22px;
    border-radius: 20px;
    border: 1px solid #657d94;
    background-color: white;
    margin-bottom: 0.01em;
    margin-right: 0.01em;
}

.switch-element {
    width: 65px;
    height: 22px;
    background: #657d94;
    color: white;
    border-radius: 20px 0px 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease-in-out;
}

.chart1-switch {
    margin: 0 auto;
    transition: all 0.25s ease-in-out;
}

.chart2-switch {
    margin: 0 auto;
    transition: all 0.25s ease-in-out;
}

.switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    bottom: 24px;
    position: absolute;
    font-size: 11px;
    right: 24px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}