/* УРОКИ — НАЧАЛО */

/* Основной список уроков */

.lesson-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px 24px;

    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;

    list-style: none !important;
    background: transparent !important;
}

/* Разделители и заголовки внутри списка */

.lesson-list > li.divider {
    grid-column: 1 / -1;
    width: 100%;
}

/* Карточка урока */

.lesson-list > li:not(.divider) {
    position: relative;

    display: block !important;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;

    cursor: pointer;

    background: #ffffff !important;
    border: 1px solid rgba(24, 59, 182, 0.12) !important;
    border-radius: 28px !important;

    box-shadow: 0 10px 35px rgba(24, 59, 182, 0.05) !important;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Убираем цветные рамки статусов */

.lesson-list > li.user-state-answered,
.lesson-list > li.user-state-need_accomplish,
.lesson-list > li.user-state-has_mission,
.lesson-list > li.user-state-reached,
.lesson-list > li.user-state-accomplished {
    border: 1px solid rgba(24, 59, 182, 0.12) !important;
    border-radius: 28px !important;
}

/* Голубое декоративное пятно */

.lesson-list > li:not(.divider)::before {
    content: "";

    position: absolute;
    top: -90px;
    right: -90px;
    z-index: 0;

    width: 190px;
    height: 190px;

    background: rgba(78, 183, 255, 0.08);
    border-radius: 50%;

    pointer-events: none;

    transition:
        transform 0.45s ease,
        background-color 0.35s ease;
}

/* Голубая линия слева */

.lesson-list > li:not(.divider)::after {
    content: "";

    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    z-index: 3;

    width: 4px;

    background: #4eb7ff;
    border-radius: 0 4px 4px 0;

    pointer-events: none;

    transition:
        top 0.35s ease,
        bottom 0.35s ease,
        width 0.35s ease;
}

/* Внутренняя область карточки */

.lesson-list > li:not(.divider) .item-a {
    position: relative;
    z-index: 2;

    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

/* Убираем изображение урока */

.lesson-list > li:not(.divider) .item-image {
    display: none !important;
}

/* Информационная область */

.lesson-list > li:not(.divider) .info {
    display: block !important;
    box-sizing: border-box;

    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
}

/* Убираем стандартный фон статусов */

.lesson-list > li:not(.divider) .user-state-bg,
.lesson-list > li:not(.divider) .user-state-bg:hover,
.lesson-list > li.user-state-reached .info,
.lesson-list > li.user-state-not_reached .user-state-bg {
    background: transparent !important;
}

/* Табличная структура GetCourse */

.lesson-list > li:not(.divider) .info table,
.lesson-list > li:not(.divider) .info tbody {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
}

.lesson-list > li:not(.divider) .info tr {
    display: flex !important;
    align-items: center !important;

    box-sizing: border-box;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;

    margin: 0 !important;
    padding: 24px 82px 24px 30px !important;

    background: transparent !important;
    border: none !important;
}

/* Основная ячейка */

.lesson-list > li:not(.divider) .item-main-td {
    display: flex !important;
    flex-direction: column;
    justify-content: center;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
}

/* Отключаем стандартную иконку справа */

.lesson-list > li:not(.divider) .state-icon-block {
    display: none !important;
}

/* Название урока */

.lesson-list > li:not(.divider) .item-main-td .link.title {
    position: relative;

    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;

    color: #183bb6 !important;
    text-decoration: none !important;

    transition: color 0.35s ease;
}

/* Убираем старые плашки статусов после названия */

.lesson-list > li:not(.divider) .item-main-td .link.title::after {
    display: none !important;
    content: none !important;
}

/* Скрываем описание урока */

.lesson-list > li:not(.divider) .description {
    display: none !important;
}

/* Скрываем даты, статусы, прогресс и служебные подписи */

.lesson-list > li:not(.divider) .user-state-label,
.lesson-list > li:not(.divider) .lesson-date,
.lesson-list > li:not(.divider) .has-start-at,
.lesson-list > li:not(.divider) .training-progress,
.lesson-list > li:not(.divider) .user-state-label-ex {
    display: none !important;
}

/* Ссылки внутри карточки */

.lesson-list > li:not(.divider) a {
    color: #183bb6 !important;
    text-decoration: none !important;
}

/* Недоступные уроки */

.lesson-list > li.user-state-not_reached {
    cursor: default;
}

.lesson-list > li.user-state-not_reached .item-main-td .link.title {
    color: rgba(24, 59, 182, 0.55) !important;
}

.lesson-list > li.user-state-not_reached .item-a::after {
    opacity: 0.55;
}

/* Наведение */

@media (hover: hover) {

    .lesson-list > li:not(.divider):hover {
        transform: translateY(-5px);

        border-color: rgba(78, 183, 255, 0.65) !important;

        box-shadow: 0 20px 45px rgba(24, 59, 182, 0.12) !important;
    }

    .lesson-list > li:not(.divider):hover::before {
        transform: scale(1.2);
        background: rgba(78, 183, 255, 0.14);
    }

    .lesson-list > li:not(.divider):hover::after {
        top: 18px;
        bottom: 18px;
        width: 5px;
    }

}

/* Фокус при управлении клавиатурой */

.lesson-list > li:not(.divider):focus-within {
    border-color: #4eb7ff !important;

    box-shadow:
        0 0 0 3px rgba(78, 183, 255, 0.18),
        0 18px 40px rgba(24, 59, 182, 0.1) !important;
}

.lesson-list > li:not(.divider) a:focus {
    outline: none;
}

/* Ошибки и системные сообщения */

.lesson-list .errorMessage,
.errorMessage {
    padding: 20px;
    color: #413a3a;
    font-weight: 400;
}

/* Планшеты */

@media (max-width: 1024px) {

    .lesson-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Мобильные устройства */

@media (max-width: 640px) {

    .lesson-list {
        gap: 14px;
    }

    .lesson-list > li:not(.divider) {
        height: 120px !important;
        min-height: 120px !important;

        border-radius: 22px !important;
    }

    .lesson-list > li.user-state-answered,
    .lesson-list > li.user-state-need_accomplish,
    .lesson-list > li.user-state-has_mission,
    .lesson-list > li.user-state-reached,
    .lesson-list > li.user-state-accomplished {
        border-radius: 22px !important;
    }

    .lesson-list > li:not(.divider)::after {
        top: 20px;
        bottom: 20px;
    }

    .lesson-list > li:not(.divider) .item-a,
    .lesson-list > li:not(.divider) .info,
    .lesson-list > li:not(.divider) .info tr {
        height: 120px !important;
        min-height: 120px !important;
    }

    .lesson-list > li:not(.divider) .info tr {
        padding: 20px 70px 20px 24px !important;
    }

    .lesson-list > li:not(.divider) .item-main-td .link.title {
        font-size: 20px;
    }


/* Узкие мобильные экраны */

@media (max-width: 420px) {

    .lesson-list {
        width: 100% !important;
    }

    .lesson-list > li:not(.divider) {
        height: 110px !important;
        min-height: 110px !important;
    }

    .lesson-list > li:not(.divider) .item-a,
    .lesson-list > li:not(.divider) .info,
    .lesson-list > li:not(.divider) .info tr {
        height: 110px !important;
        min-height: 110px !important;
    }

    .lesson-list > li:not(.divider) .info tr {
        padding: 18px 62px 18px 22px !important;
    }

    .lesson-list > li:not(.divider) .item-main-td .link.title {
        font-size: 18px;
    }

    .lesson-list > li:not(.divider) .item-a::after {
        right: 15px;
        bottom: 15px;

        width: 38px;
        height: 38px;

        font-size: 19px;
    }
}

/* УРОКИ — КОНЕЦ */


/* ТРЕНИНГИ — НАЧАЛО */


/* Основная таблица */

table.stream-table {
    width: 100%;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-collapse: separate !important;
}

/* Сетка карточек */

table.stream-table > tbody {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 20px 24px;

    width: 100%;
}

/* Карточка тренинга */

table.stream-table > tbody > tr.training-row {
    position: relative;

    display: block;
    width: 100%;
    height: 140px !important;
    min-height: 140px !important;

    padding: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(24, 59, 182, 0.12);
    border-radius: 28px;

    box-shadow: 0 10px 35px rgba(24, 59, 182, 0.05);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Голубое декоративное пятно */

table.stream-table > tbody > tr.training-row::before {
    content: "";

    position: absolute;
    top: -90px;
    right: -90px;

    width: 190px;
    height: 190px;

    background: rgba(78, 183, 255, 0.08);
    border-radius: 50%;

    pointer-events: none;

    transition:
        transform 0.45s ease,
        background-color 0.35s ease;
}

/* Голубая линия слева */

table.stream-table > tbody > tr.training-row::after {
    content: "";

    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;

    width: 4px;

    background: #4eb7ff;
    border-radius: 0 4px 4px 0;

    pointer-events: none;

    transition:
        top 0.35s ease,
        bottom 0.35s ease,
        width 0.35s ease;
}

/* Ячейка с изображением */

table.stream-table > tbody > tr.training-row > td.item-image {
    display: none !important;
}

/* Основная ячейка */

table.stream-table > tbody > tr.training-row > td:not(.item-image) {
    display: block;

    width: 100%;
    height: 140px !important;

    padding: 0 !important;

    background: transparent !important;
    border: none !important;
}

/* Убираем стандартное наведение GetCourse */

table.stream-table > tbody > tr.training-row > td:hover {
    background: transparent !important;
}

/* Ссылка занимает всю карточку */

table.stream-table > tbody > tr.training-row > td > a {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    height: 140px !important;
    min-height: 140px !important;

    padding: 24px 82px 24px 30px;

    color: #413a3a;
    text-decoration: none !important;
}

/* Название тренинга */

table.stream-table > tbody > tr.training-row > td > a > .stream-title {
    position: relative;

    display: block;
    margin: 0;

    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;

    color: #183bb6;

    transition: color 0.35s ease;
}

/* Скрываем количество уроков */

table.stream-table > tbody > tr.training-row > td > a > div {
    display: none !important;
}

/* Наведение */

@media (hover: hover) {

    table.stream-table > tbody > tr.training-row:hover {
        transform: translateY(-5px);

        border-color: rgba(78, 183, 255, 0.65);

        box-shadow: 0 20px 45px rgba(24, 59, 182, 0.12);
    }

    table.stream-table > tbody > tr.training-row:hover::before {
        transform: scale(1.2);
        background: rgba(78, 183, 255, 0.14);
    }

    table.stream-table > tbody > tr.training-row:hover::after {
        top: 18px;
        bottom: 18px;
        width: 5px;
    }

    table.stream-table > tbody > tr.training-row:hover > td > a::after {
        color: #ffffff;
        background: #183bb6;
        border-color: #183bb6;

        transform: rotate(45deg);
    }
}

/* Фокус при управлении клавиатурой */

table.stream-table > tbody > tr.training-row:focus-within {
    border-color: #4eb7ff;

    box-shadow:
        0 0 0 3px rgba(78, 183, 255, 0.18),
        0 18px 40px rgba(24, 59, 182, 0.1);
}

table.stream-table > tbody > tr.training-row > td > a:focus {
    outline: none;
}

/* Планшеты */

@media (max-width: 1024px) {

    table.stream-table > tbody {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Мобильные устройства */

@media (max-width: 640px) {

    table.stream-table > tbody {
        gap: 14px;
    }

    table.stream-table > tbody > tr.training-row {
        height: 120px !important;
        min-height: 120px !important;

        border-radius: 22px;
    }

    table.stream-table > tbody > tr.training-row::after {
        top: 20px;
        bottom: 20px;
    }

    table.stream-table > tbody > tr.training-row > td:not(.item-image) {
        height: 120px !important;
    }

    table.stream-table > tbody > tr.training-row > td > a {
        height: 120px !important;
        min-height: 120px !important;

        padding: 20px 70px 20px 24px;
    }

    table.stream-table > tbody > tr.training-row > td > a > .stream-title {
        font-size: 20px;
    }

    table.stream-table > tbody > tr.training-row > td > a::after {
        right: 18px;
        bottom: 18px;

        width: 40px;
        height: 40px;

        font-size: 20px;
    }
}

/* Узкие мобильные экраны */

@media (max-width: 420px) {


    table.stream-table > tbody > tr.training-row {
        height: 110px !important;
        min-height: 110px !important;
    }

    table.stream-table > tbody > tr.training-row > td:not(.item-image) {
        height: 110px !important;
    }

    table.stream-table > tbody > tr.training-row > td > a {
        height: 110px !important;
        min-height: 110px !important;

        padding: 18px 62px 18px 22px;
    }

    table.stream-table > tbody > tr.training-row > td > a > .stream-title {
        font-size: 18px;
    }

    table.stream-table > tbody > tr.training-row > td > a::after {
        right: 15px;
        bottom: 15px;

        width: 38px;
        height: 38px;

        font-size: 19px;
    }
}

/* ТРЕНИНГИ — КОНЕЦ */