/*
@font-face {
    font-family: 'Statis Sans';
    font-display: swap;
    src: url(fonts/StatisSans-Regular.eot);
    src: url(fonts/StatisSans-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/StatisSans-Regular.woff2) format('woff2'), url(fonts/StatisSans-Regular.woff) format('woff'), url(fonts/StatisSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Statis Sans';
    font-display: swap;
    src: url(fonts/StatisSans-Bold.eot);
    src: url(fonts/StatisSans-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/StatisSans-Bold.woff2) format('woff2'), url(fonts/StatisSans-Bold.woff) format('woff'), url(fonts/StatisSans-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal
}

.is-active {
    color: #2c74b5
}
*/


#wrapper {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #333333;
    /*pointer-events: none;*/
    box-sizing: border-box;
    /*
    padding-right: 10px;
*/
    /*font-size: 12px;*/
    /*background-color: grey;*/
    height: calc(100vh - 17vh);
    /*margin-top: 20px;*/
    z-index: 3;

    /*border: 2px solid green;*/

    display: flex;
    flex-direction: column;
    align-items: center;


}


/*
#pageHeader {
    top: 20px;
    width: 1170px;
    padding-left: 40px;
    height: 80px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}
    */
/*
#pageHeader h1 {
    margin: 0;
    font-size: 18px
}
*/
/*
#pageHeader h2 {
    padding-top: 5px;
    margin: 0;
    font-size: 15px;
    font-weight: 400
}
*/
/*
#pageHeader figure {
    right: 10px;
    position: absolute;
    border: 0;
    padding: 0;
    margin: 0
}
*/

#pageHeader ul {
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 55px;
    left: 40px
}

#pageHeader a {
    text-transform: initial;
    color: #606060;
    font-size: .9rem;
    font-weight: 400;
    line-height: 2.1rem;
    text-decoration: none;
    border-bottom: none
}

/*
#pageHeader a:active,
#pageHeader a:focus,
#pageHeader a:hover {
    color: #2c74b5;
    border-bottom: 2px solid #2c74b5 !important;
    text-decoration: none
}
*/
/*
h3 {
    font-size: 14px
}
*/
/*
h4 {
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 8px
}
*/

#easel {
    /*
    top: 15px;
    */
    position: relative;
    /* было absolute; */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*border: 2px solid blue;*/
    /*Красная рамка толщиной 2px */


    font-weight: 500;
    color: #333333;
    /*pointer-events: none;*/
    box-sizing: border-box;
    /*background-color: grey;*/
    /*height: calc(100vh - 21vh);*/
    /*675px;*/
    /*width: 715px;*/
    /* было 710px; */
    /* Диаграмма занимает всю доступную ширину контейнера */

    width: auto;
    overflow: visible;

}


/*
#easel .spinner {
    font-size: 24px;
}

#easel .fineprint {
    font-size: 14px
}
*/
#dashBoard {
    top: 70px;
    /* 100px */
    left: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*border: 2px solid red;*/
    /* Красная рамка толщиной 2px */



    /*pointer-events: none;*/
    box-sizing: border-box;
    /*background-color: grey;*/
    height: 20px;
    width: 712.909px;
    /* было 710px; */
    /* Диаграмма занимает всю доступную ширину контейнера */


    z-index: 1000;

}

/*
#variantBox #variantSelection {
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 2px
}

#variantBox {
    font-size: 13px;
    top: 36px;
    left: 60px;
    position: absolute
}

#variantBox input {
    margin-right: 7px
}

#assumptions {
    font-size: 12px;
    top: 178px;
    left: 60px;
    position: absolute
}

#assumptions ul {
    margin-top: 6px;
    margin-bottom: 0;
    padding-left: 24px
}

#assumptions li {
    line-height: 140%;
    padding-bottom: 6px
}
*/
#altQ,
#jungQ,
#jungQaltQ,
#agingIndex,
#billetteIndex {
    color: inherit;
    border-bottom: 1px dotted #000;
    cursor: help;
    color: initial;
    font-weight: initial;
    letter-spacing: initial;
    text-transform: initial;
    line-height: 20px;
}

[data-tooltip] {
    position: relative;
    z-index: 2
}

[data-tooltip]:after,
[data-tooltip]:before {
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

[data-tooltip]:before {
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 178px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, .9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 11px;
    line-height: 1.2
}

[data-tooltip]:after {
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, .9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1
}

#copyright {
    width: 100%;
    /* 710px; */
    /* Соответствует ширине #easel, а было 1210px; */
    /*top: 10px;*/
    /* было 840px; */
    left: 0;
    /* не было этого пункта */
    position: relative;
    /* position: absolute */
}

#copyright p {
    font-size: 11px;
    margin: 5px;
}

#data {
    font-size: 12px;
    position: relative;
    /* было position: absolute */
    top: 5px;
    /* было 370px */
    left: 0;
    /* было 66px */
    width: 100%;
    /* 710px; */

}


#footer_pyramid {
    width: 100%;
    /*bottom: -15px;*/
    position: relative;
    /* было position: absolute */
    /*top: 10px;*/
    /* новое */
}

#footer_pyramid p {
    margin: 0;
    font-size: 11px
}

.embed {
    color: #00f;
    left: 65px;
    float: left;
    position: relative
}

.centerGraph {
    text-align: center;
    left: 290px
}

a {
    /*
    padding-bottom: 2px;
    border-bottom: 2px solid #2c74b5;
    color: #2c74b5;
    font-weight: 700;
*/
    text-decoration: none;
    /*
    letter-spacing: .75px;
    text-transform: uppercase
    */
}

/*
a:active,
a:focus,
a:hover {
    border-color: transparent;
    text-decoration: none
}
*/

/*
.flushRight {
    right: 15px;
    float: right;
    position: relative
}
*/

#ageLimitControl p {
    position: absolute;
    font-size: 12px;
    margin-top: 0px;
    left: 2px;
    text-align: left;
    /* новое */
    /*border: 2px solid red; */
    height: 28px;
    width: 125px;
    display: flex;
    align-items: center;
    /* Центровка по вертикали */
    gap: 2px;
    /*расстояние между слайдером и названием "Фиксировать" */
}

#legend {
    top: 40px;
    /* было 65px */
    left: 2px;
    /* было 75px */
    position: absolute
}

/*
#legend button {
    position: absolute;
    top: 0;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 9px;
    cursor: pointer
}
*/
#tdlegend {
    position: absolute;
    top: 703px;
    /*calc(100% - 83px); */
    /* Подогнать под `uiHolder` */
    left: calc(100% - 210px);
    /* Соответствует `translate(2 * width + 5)` */
    display: flex;
    align-items: center;
    gap: 10px;
    /* расстояние между кнопкой и названием "Возрастные группы" */
}

#legendLabel {
    font-size: 12px;
    width: 127px;
    text-align: right;
}

#tdlegend button {
    top: 0;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 13px;
    cursor: pointer;
    width: 68px;
    height: 28px;

    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    /* мягкий градиент */
    color: #333;
    border: 1px solid #999;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.1);
    /* постоянная тень */
    transition: background 0.2s ease, transform 0.1s ease;
    z-index: 901;
}

#tdlegend button:hover {
    background: linear-gradient(to bottom, #d0d0d0, #b0b0b0);
}


.mini {
    fill: #333;
    pointer-events: none
}

.Year {
    font-weight: 700;
    font-size: 11px
}

.Variant {
    font-size: 10px
}

svg {
    max-width: none;
    height: none;
    /* или любое нужное значение */
    overflow: visible;
    /* hidden */
    text-anchor: middle;
    /*border: 2px dashed red;*/
    /* Временная граница для отладки */
}

.x.axis path {
    display: none
}

.x.axis line {
    stroke: #f7f7f7;
    stroke-opacity: .3;
    shape-rendering: crispEdges
}

.xAxisLabel {
    font-size: 12px;
    font-weight: 600;
    fill: #333
}

.title {
    font-size: 36px;
    font-weight: 700;
    fill: #333;
}

.subtitle {
    font-size: 16px;
    font-weight: 400;
    fill: #333
}

.birthyear {
    font-size: 8px;
    fill: #fff
        /*проверка с помощью black*/
}

.hoverBirthYear {
    pointer-events: none;
    font-size: 12px;
    fill: #fff;
    text-shadow: 0.5px 0.5px 1px #333;
}

.median-label {
    font-size: 12px;
    fill: #333;
    text-shadow: 0.5px 0.5px 1px #333;
}

.median-line {
    stroke: #333;
}

.median-label.label-left:hover rect {
    fill: #dcdcdc;
}


.age {
    fill: #333;
    font-weight: 700;
    font-size: 12px
}

.ageLimit {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 6px;
    font-weight: 700;
    position: absolute;
    left: -5px;
    z-index: 10;
    pointer-events: none
}

.symmetry {
    pointer-events: none;
    fill-opacity: .25;
    fill: #fff
}

.envelopeCurve {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
    stroke-linejoin: bevel;
    pointer-events: none
}

.miniCurve {
    stroke-width: 20px;
    pointer-events: none
}

.swoosh {
    stroke: #fd484e;
    stroke-width: 5;
    fill: none
}

.nick {
    font-weight: 400;
    padding-left: 6px
}

#sliderHolder {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 480px;
    left: 712px;
    top: 90px;
    position: absolute;
    /* absolute */
}

#sliderHolder a {
    padding-bottom: initial
}

.tick text {
    -moz-user-select: none;
    font-size: .8em
}

.d3-slider {
    position: relative;
    font-size: 1.1em;
    background: #c3c3c3;
    border-radius: 15px;
    z-index: 2
}

.d3-slider-range-vertical {
    background: 0 0;
    left: 0;
    right: 0;
    position: absolute;
    top: 0
}

.d3-slider-vertical {
    width: .6em;
    height: 100px
}

.d3-slider-handle {
    cursor: pointer;
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border-bottom: inherit;
    border-radius: 15px;
    background: #2c74b5;
    z-index: 3
}

#ageSliderHolder {
    position: absolute;
    display: none;
    border: 0
}

#ageSliderHolder.d3-slider {
    background: inherit
}

#ageSliderHolder .d3-slider-range-vertical {
    background: 0 0
}

#ageSliderHolder .d3-slider-handle {
    width: 130px;
    margin-bottom: -.35em;
    height: 15px;
    left: -65px;
    cursor: grab;
    background: #333
}

.d3-slider-axis {
    position: relative;
    z-index: 1
}

.d3-slider-axis-right {
    left: .8em;
    pointer-events: none
}

.d3-slider-axis path {
    stroke-width: 0;
    fill: none
}

.d3-slider-axis line {
    fill: none;
    stroke: #333;
    shape-rendering: crispEdges
}

.d3-slider-axis text {
    font-size: 11px
}

.d3-slider-vertical .d3-slider-handle {
    left: -.25em;
    margin-left: 0;
    margin-bottom: -.6em
}

@media print {

    #ageSliderHolder,
    .d3-slider-handle,
    .noPrint,
    .symmetry {
        display: none
    }

    .females,
    .males,
    .x.axis line {
        stroke: #fff;
        stroke-opacity: 1;
        stroke-width: .2pt;
        shape-rendering: crispEdges
    }

    a {
        color: #000
    }
}

.spinner {
    -webkit-animation: moveMe 10s infinite linear;
    animation: moveMe 10s infinite linear
}

@-webkit-keyframes moveMe {
    0% {
        -webkit-transform: translate(0)
    }

    50% {
        -webkit-transform: translate(250px)
    }

    100% {
        -webkit-transform: translate(0)
    }
}

@keyframes moveMe {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translate(250px)
    }

    100% {
        transform: translate(0)
    }
}

figure {
    padding: 0;
    margin: 0
}

.logo-small a {
    margin: inherit;
    padding: inherit;
    border: inherit;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    letter-spacing: inherit;
    text-transform: inherit
}

input[type=radio] {
    margin-top: -1px;
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.fourty {
    width: 40%
}

.fourty.left {
    margin-top: 18px
}

.sixty {
    width: 60%
}

.left {
    float: left
}

.right {
    float: right
}

#variantBox label {
    display: inline-block
}

#variantBox span {
    display: inline-block;
    width: 55px
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c3c3c3;
    -webkit-transition: .4s;
    transition: .4s
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s
}

input:checked+.slider {
    background-color: #2c74b5
}

input:checked+.slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px)
}

.slider.round {
    border-radius: 15px
}

.slider.round:before {
    border-radius: 50%
}

.ui {
    cursor: pointer
}

.bold {
    font-weight: 700
}

.assumptionG,
.assumptionL,
.assumptionW {
    font-weight: 400
}


/* Окно внутри #easel */
.modal {
    position: relative;
    display: none;
    /* Теперь фиксированное */
    z-index: 500;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Пропускает события к элементам под окном */
    overflow: hidden;
    /* Чтобы содержимое не влияло на размер */
}

/* Контент окна */
.modal-content {
    position: absolute;
    background-color: white;
    padding: 5px;
    /* Немного отступа для более чистого вида */
    border-radius: 5px;
    /* Скругленные углы */
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(0, 0, 0, 0.2);
    /* Усиленные тени */
    text-align: left;
    /*cursor: grab;*/
    width: 215px;
    /* фиксированная ширина */
    min-width: 100px;
    /* Немного больше места */
    pointer-events: auto;
    opacity: 1;
    /* Полная видимость */
    border: 2px solid rgba(255, 255, 255, 0.8);
    /* Белая окантовка для выделения */
    z-index: 500;
    /* Поверх всех элементов */
    backdrop-filter: blur(8px);
    /* Легкий размытый фон, если браузер поддерживает */
}


/* Заголовок окна */
.modal-header {

    height: 6px;
    padding: 7px;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}


/* Кнопка закрытия 
.close {
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
*/

/* Таблица */
.table-container {
    display: flex;
    justify-content: center;

}

table {
    border-collapse: collapse;
    font-size: 11px;
    /* Уменьшенный шрифт */
    border: 2px solid white;
    /* Белые внешние границы */
    margin-top: 1px;
    /* или нужное тебе значение */
    margin-bottom: 10px;
    /* пример другого значения */
}

td {
    padding: 2px;
    /* Меньший отступ внутри ячеек */
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
    max-width: 60px;
    /* Ограничение ширины */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Добавляет "..." при переполнении */
    border: none;
    /* Убираем внутренние границы */
}

#tAge {
    width: 60px;
    text-align: left
}

#tMill {
    width: 90px
}

#tRatio {
    width: 90px
}

.above {
    border-top: 1px solid #000;
}

.middle {
    border-top: 1px solid #000;
    border-bottom: 10px solid #000
}

.ageLimitTxt {
    border-right: 8px solid #fff;
    padding-right: 16px;
    text-align: left;
    padding-left: 5px;
}

.about__accordion {
    width: 100%;
    text-align: left;
    transition: 0.4s;
    padding-bottom: 0px;
    border-bottom: 0.5px solid #9D9D9D;
    position: relative;
    font-size: 12px;
    margin-top: 0;
    color: #3A3A3A;
}

.about__name {
    position: relative;
    display: flex;
    align-items: center; /* вертикальное выравнивание */
    width: 180px;
    height: 26px;
    font-size: 12px;
    /*border: 2px solid green;*/
    cursor: grab;
    top:0px;
}

.accordion-icon {
    position: absolute;
    right: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    content: url(/img/arr-up.svg);
}

.about__accordion.active:after {
    transform: scale(1.5) rotate(0deg);

}

.about__accordion:after {
    position: absolute;
    content: url(/img/arr-up.svg);
    transform: scale(1.5) rotate(180deg);
    right: 0px;
    transition: all 0.3s ease;
    cursor: pointer;
    top: -20px;
    /*border: 2px solid green;*/
}

.about__panel {
    padding-top: 1px;
    padding-left: 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 11px;
    color: #3A3A3A;
}

.about__panel p {
    margin-top: 7px;
    /* или нужное тебе значение */
    margin-bottom: 0;
    /* пример другого значения */
}