.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    font-family: "Commissioner", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 10pt;
}

.bg-dark-blue-color {
    background-color: #465779;
}

.bg-light-blue-color {
    background-color: #d3d7e7;
}

.bg-light-grey-color {
    background-color: #e9e9e9;
}

.text-grey-custom {
    color: #6C6C6C
}

.menuListItem {
    border-radius: 8px;
    background: white;
    color: #B3B3B3;
}

    .menuListItem.active {
        background: #FDF4EC;
        color: #EA903B;
    }

.radio_wrapper {
    display: flex;
    align-items: center;
}

.radio_input {
    display: none;
}

.radio_wrapper label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .radio_wrapper label::before {
        content: '\f111';
        font-family: 'Font Awesome 6 Free';
        font-weight: 100; 
        font-size: 0.8rem;
        color: #d0d5dd; 
        margin-right: 0.5rem;
    }

.radio_input:checked + label::before {
    content: '\f192'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 100;
    font-size: 0.8rem; 
    color: #e9903b; 
}


.checkbox_wrapper {
    display: flex;
    align-items: center;
}

.checkbox_input {
    display: none;
}

.checkbox_wrapper label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .checkbox_wrapper label::before {
        content: '\f0c8';
        font-family: 'Font Awesome 6 Free';
        font-weight: 100;
        font-size: 0.8rem;
        color: #d0d5dd;
        margin-right: 0.5rem;
    }

.checkbox_input:checked + label::before {
    content: '\f14a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 100;
    font-size: 0.8rem;
    color: #e9903b;
}

#icon-arrow-left {
    font-size: 16px;
    color: #6C6C6C;
    transition: color 0.3s ease;
}

    #icon-arrow-left:hover {
        color: orange;
    }

#icon-arrow-left-top {
    font-size: 16px;
    color: #6C6C6C;
    transition: color 0.3s ease;
}

    #icon-arrow-left-top:hover {
        color: orange;
    }

.chart-legend-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; 
    height: 100%; 
    width: 100%;
}

.chart-legend-single-column {
    width: 100%;
}

.chart-legend-column {
    width: 48%;
    position: relative;
}

    .chart-legend-column:not(:last-child) {
        border-right: 1px solid #ccc; /* Вертикальный разделитель между колонками */
        padding-right: 10px; /* Отступ справа от содержимого */
    }

    .chart-legend-column ul,
    .chart-legend-single-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .chart-legend-column li,
    .chart-legend-single-column li {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-bottom: 5px;
    }

        .chart-legend-column li span,
        .chart-legend-single-column li span {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

.period-data-type {
    background-color: #F7F7F7;
    color: #6C6C6C
}

    .period-data-type.active {
        background: #EA903B;
        color: #FFFFFF;
    }

.progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-value {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
}

.circular-chart {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2; 
}

.circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease-out, opacity 0.6s ease-out;
}

.circle-1 {
    stroke: #b8c935; 
}

.circle-2 {
    stroke: #9a4d85; 
    opacity: 0;
}

.circle-3 {
    stroke: #ea903b; 
    opacity: 0;
}

#logout-icon {
    font-size: 12px;
    color: black;
    transition: color 0.3s ease;
}

#logout-icon:hover {
    color: orange;
}

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px; 
    height: 100%;
    cursor: ew-resize; 
    background: rgba(0, 0, 0, 0.2);
}

    .resizer:hover {
        background: rgba(0, 0, 0, 0.5);
    }

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

    #preloader .spinner-border {
        width: 4rem;
        height: 4rem;
        margin-bottom: 1rem;
    }

    #preloader p {
        font-size: 1.2rem;
        color: #555;
        font-weight: 500;
    }