@font-face {
    font-family: 'Montserrat-SemiBold-Italic';
    src: url('Montserrat-SemiBold-Italic.ttf.woff') format('woff');
    font-weight: 600; /* Устанавливаем жирность шрифта */
    font-style: italic; /* Устанавливаем стиль курсив */
}
body {
    /*width: 100vw;*/

    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: lighter;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Новый контейнер для фона с прозрачностью */
.background-container {

    position: absolute; /* Абсолютное позиционирование */
    background-image: url('background.png'); /* Путь к изображению */
    background-size: cover; /* Заполнение всего контейнера */
    background-position: center; /* Центрирование изображения */
    opacity: 0.2; /* Прозрачность фона */
    z-index: -1; /* Размещаем фон за всеми другими элементами */
}
.background-container-graph {
    height: 100%;
    position: absolute; /* Абсолютное позиционирование */
    background-image: url('background.png'); /* Путь к изображению */
    background-size: cover; /* Заполнение всего контейнера */
    background-position: center; /* Центрирование изображения */
    opacity: 0.2; /* Прозрачность фона */
    z-index: -1; /* Размещаем фон за всеми другими элементами */
}
/* Фон для контейнера */
.report-container {
    max-width: 844px; /* Ограничение по максимальной ширине */
    /*box-sizing: border-box; !* Включает паддинги в расчет ширины *!*/
    /*overflow-x: auto; !* Добавляет прокрутку по горизонтали, если таблица не помещается *!*/
    width: 100vw;
    height: 100vh;
    position: relative;
    /*background-image: url('background.png'); !* Укажите путь к вашему изображению *!*/
    background-size: cover; /* Заполнение всего контейнера */
    /*background-position: center; !* Центрирование изображения *!*/
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0.8; /* Прозрачность контейнера */
    z-index: 0;
}
.graph-container {
    max-width: 844px; /* Ограничение по максимальной ширине */
    /*box-sizing: border-box; !* Включает паддинги в расчет ширины *!*/
    /*overflow-x: auto; !* Добавляет прокрутку по горизонтали, если таблица не помещается *!*/
    height: 100%;
    width: 100vw;
    position: relative;
    /*background-image: url('background.png'); !* Укажите путь к вашему изображению *!*/
    background-size: cover; /* Заполнение всего контейнера */
    /*background-position: center; !* Центрирование изображения *!*/
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0.8; /* Прозрачность контейнера */
    z-index: 0;
}
.js-plotly-plot {
    width: 100% !important;
    height: 100% !important;
}


/* Стили для заголовка */
.title {
    font-size: 50px;
    font-weight: 500;
    color: #FFFFFF;
    background: #516D94;
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    z-index: 2; /* Заголовок поверх всего */
}
.title-graph{
    /*font-size: 28px;*/
    font-weight: 500;
    color: #FFFFFF;
    background: #516D94;
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    z-index: 2; /* Заголовок поверх всего */
    font-size: 7vw; /* Размер шрифта зависит от ширины окна */
    white-space: nowrap;
}
.report-table {
    font-size: 2.5vw;
    padding: 5px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 7px;
    border: none;
    background-color: transparent;
    z-index: 2;
}


.report-table th  {
    padding: 10px;
    text-align: center;
    /*border-bottom: 1px solid #ddd;*/
    border: none;
    font-size: 10px;
    background-color: #F7A41B;
    color: white;
    border-radius: 4px;
}

.report-table td {
    padding: 0px;
    text-align: center;
    /*border-bottom: 1px solid #ddd;*/
    border: none;
}

.report-table tr {
    max-height: 35px;
}

.report-table .name {
    font-family: 'Montserrat-SemiBold-Italic', sans-serif; /* Применяем загруженный шрифт */
    /*font-family: 'Montserrat', sans-serif;*/
    font-size: 14px;
    padding: 10px;
    background-color: #1FBCC9;
    color: white;
    font-weight: bold;
    white-space: nowrap; /* Запрещает перенос строк */
    border: none;
    max-height: 35px;
    /*padding-right: 40px;*/
    /*border-spacing : 40px;*/
}


/* Стили для таблицы отчёта */
.table-container {
    max-height: 35px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: none;
}

.table {
    max-height: 35px;
    width: 80%;
    font-family: 'Montserrat', sans-serif;
    font-weight: SemiBold Italic;
    border-collapse: separate;
    border-spacing: 15px;
    background-color: #E0F2F1;
    padding: 0px;
    border-radius: 4px;
    border: none;
}

th {
    max-height: 35px;
    justify-content: space-evenly;
    background-color: #F7A41B;
    color: white;
    padding: 0px;
    border-radius: 4px;
    border: none;
    margin: 0px;
}

td {
    max-height: 35px;
    justify-content: space-evenly;
    margin: 0px;
    background-color: #D1E6E6;
    padding: 0px;
    text-align: center;
    border-radius: 4px;
    border: none;
    width: 70px;
}
.report-table td:nth-child(7) { /* шаги */
    max-height: 35px;
    width: 90px; /* Установите нужную ширину */
}


.name-cell {
    max-height: 35px;
    background-color: #26C6DA;
    color: white;
    font-weight: bold;
    padding: 15px;
    text-align: left;
    border-radius: 4px;
    border: none;
}

.space {
    max-height: 35px;
    padding: 15px 0px;
    border: none;
}

.greens {
    max-height: 35px;
    min-width: 17px;
    /*justify-content: space-evenly;*/
    padding: 0px;
    margin: 0px;
    width: 17px;
}

.training {
    max-height: 35px;
    min-width: 17px;
    padding: 0px;
    margin: 0px;
    width: 17px;
}
.indicator {
    max-height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    /*border-spacing: 30px;*/
}

.block {
    max-height: 35px;
    padding: 0px;
    justify-content: space-evenly;
    width: 70%;
    height: 6px;  /* Настроим высоту для каждого блока */
    margin-bottom: 3px; /* Отступ между блоками */
    border-radius: 5px; /* Скругленные углы */
    /*transition: background-color 0.3s ease; !* Плавный переход для цвета *!*/
    /*border-spacing: 30px;*/
}

.low {
    padding-top: 2px;
    color: #E57244;
}

.high {
    padding-top: 2px;
    color: #036E77;
}


@media (max-width: 445px) {
    .report-container {
        padding: 5px;
        padding-top: 20px;
    }
    .title {
        font-size: 30px;
    }
    .space {
    padding: 0px;
    border: none;
    }
    .report-table td {
        padding: 5px;

        font-size: 14px;
    }
    .report-table .name {
        padding-bottom: 10px;

        white-space: normal;
        font-size: 11px;
    }
    .report-table th {

        padding: 5px;

    }
    .name-cell {
        padding: 5px;
    }
}