:root {

    /* ========================================
    СПИСОК УРОКОВ
    ======================================== */

    --lesson-zoloto-gorizont-number-bg:#fff;/*Цвет фона уроков*/
    --lesson-zoloto-gorizont-number-bg-no-public:#ffffffa1; /*Цвет фона недоступного урока*/

    --lesson-zoloto-gorizont-number-color-number: #005acb; /*Цвет номера урока*/
    --lesson-zoloto-gorizont-number-color-text-3: #005acb; /*Цвет Названия уроков*/
    --lesson-zoloto-gorizont-number-color-text-4: #333; /*Цвет даты открытия уроков*/
    --lesson-zoloto-gorizont-number-color-text-2: #333; /*Цвет описания уроков*/

    --lesson-zoloto-gorizont-number-color-number-no-public: #005acb; /*Цвет номера урока при недоступности*/
    --lesson-zoloto-gorizont-number-color-text-3-no-public: #005acb; /*Цвет Названия уроков при недоступности*/
    --lesson-zoloto-gorizont-number-color-text-4-no-public: #333; /*Цвет даты открытия уроков при недоступности*/
    --lesson-zoloto-gorizont-number-color-text-2-no-public: #333; /*Цвет описания уроков при недоступности*/

    --lesson-zoloto-gorizont-number-color-text-6: #fff; /*Цвет текста кнопки*/
    --lesson-zoloto-gorizont-number-color-text-6-no-public: #fff; /*Цвет текста кнопки недоступного урока*/
    --lesson-zoloto-gorizont-number-color-text-6-hover: #fff; /*Цвет текста кнопки при наведении*/

    --lesson-zoloto-gorizont-number-border-btn: none; /*обводка кнопки*/
    --lesson-zoloto-gorizont-number-border-btn-hover: none; /*обводка кнопки при наведении*/


    /*Фоны кнопок*/

    --lesson-zoloto-gorizont-number-color-status-1:linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /* урок без дз */
    --lesson-zoloto-gorizont-number-color-status-2: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /* урок с дз */
    --lesson-zoloto-gorizont-number-color-status-3: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /* урок на проверке */
    --lesson-zoloto-gorizont-number-color-status-4: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%);/* урок принят */
    --lesson-zoloto-gorizont-number-color-status-5: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /* Фон кнопки стоп-урока */
    --lesson-zoloto-gorizont-number-color-status-6: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /*фон кнопки просмотрено*/
    --lesson-zoloto-gorizont-number-color-status-7: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%);/*фон кнопки недоступного урока*/

    --lesson-zoloto-gorizont-number-color-status-1-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%);/*урок без дз Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-number-color-status-2-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%);/*урок с дз Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-number-color-status-3-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /*урок на проверке Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-number-color-status-4-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%);/*урок принят Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-number-color-status-5-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /*Стоп-урок Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-number-color-status-6-hover: linear-gradient(135deg, rgba(0,111,251,1) 3%, rgba(89,162,255,1) 94%); /*Просмотрено Цвет кнопки при наведении*/

}




/* ========================================
Список уроков 
======================================== */

/* ========================================
Снимаем стандартные стили от ГК
======================================== */



.gorizont-number .lesson-list li .state-icon-block,
.gorizont-number .lesson-list li td.item-image,
.gorizont-number .lesson-list li .user-state-label.is-stop-lesson,
.gorizont-number .lesson-list li.divider {
    display: none;
}

.gorizont-number .lesson-list .item-main-td.item-with-image {
    height: 0;
}

.gorizont-number .lesson-list li .info {
    margin-left: 0!important;
    border-left: none!important;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 63%;
    flex: 0 1 63%;
}

.gorizont-number .lesson-list li .info table {
    min-width: inherit!important;
    width: 100%;
}

.gorizont-number .lesson-list li td.item-main-td {
    padding: 0!important;
}



.gorizont-number .lesson-list li.first-unreached {
    margin-top: 10px;
}



/*Скрываем системную надпись о дз*/

.gorizont-number .user-state-need_accomplish .user-state-label,
.gorizont-number .user-state-has_mission .user-state-label,
.gorizont-number .lesson-list li .lesson-list__video-watched{
    display:none!important;
}

/*Показываем когда открылся урок*/
.gorizont-number .lesson-list li div.user-state-label.has-start-at.lesson-date {
    display: block !important; 
}


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

.gorizont-number .lesson-list li .item-a{
    background:none!important;
}

/* ========================================
Преобразовываем
======================================== */

/* ========================================
Подложка под уроки
======================================== */

.gorizont-number .lesson-list {
    counter-reset: lesson_counter;
    font-family: var(--traning-zoloto-font-family-text);
    background: var(--traning-zoloto-bg-fon)!important;
    border-radius: var(--traning-zoloto-border-radius);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    margin-bottom:20px!important;
}



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

.gorizont-number .lesson-list li {
    background:var(--lesson-zoloto-gorizont-number-bg);
    border-radius: var(--traning-zoloto-border-radius);
    position: relative;
    -webkit-box-shadow: var(--traning-zoloto-box-shadow);
    box-shadow: var(--traning-zoloto-box-shadow);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0px!important;

}


.gorizont-number .lesson-list a {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    padding: 20px;
    min-height: 135px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: var(--lesson-zoloto-gorizont-number-color-text-1)!important;
    font-family: var(--traning-zoloto-font-family-header);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}




.gorizont-number a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}


.gorizont-number .lesson-list li .info {
    width: 100%;
    margin-left: 0!important;
    border-left: none!important;
    background: none!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
}




/* ========================================
Номер урока
======================================== */
.gorizont-number .lesson-list li:before {
    width: 18px;
    height: 100%;
    display: block;
    content: "";
    position: absolute;
    border-radius: 10px 0 0 10px;
    display:none;

}

.gorizont-number .lesson-list li a::before {
    counter-increment: lesson_counter;
    content: counters(lesson_counter,"") " ";
    font-family: var(--traning-zoloto-font-family-text);
    font-size: 48px;
    line-height: 1;
    margin-left: 38px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    color: var(--lesson-zoloto-gorizont-number-color-number);
}



/* ========================================
Текстовый блок
======================================== */

.gorizont-number .lesson-list li .item-main-td .vmiddle {
    padding-right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 20px;
    gap:10px;
}


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

.gorizont-number .lesson-list li .item-main-td .vmiddle .title {
    font-family: var(--traning-zoloto-font-family-header)!important;
    color: var(--lesson-zoloto-gorizont-number-color-text-3);
    margin-right: 0px!important;
    font-size: 24px;
    line-height: 1.1;

}


/* ========================================
Описание урока
======================================== */


.gorizont-number .lesson-list li .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-number-color-text-2);
    font-family: var(--traning-zoloto-font-family-text);
    font-size: 18px;
    line-height: norma;
}



/* ========================================
Дата открытия урока
======================================== */
.gorizont-number .lesson-list li .lesson-date {
    display: block !important;
    color: var(--lesson-zoloto-gorizont-number-color-text-4) !important;
    font-family: var(--traning-zoloto-font-family-header);
    font-weight: 400;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}


/* ========================================
Кнопка в уроке
======================================== */
.gorizont-number .lesson-list li a:after {
    content: "Смотреть";
    font-family: var(--traning-zoloto-font-family-header), 'FontAwesome';
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    position: relative;
    text-align: center;
    border-radius: var(--traning-zoloto-border-radius);
    padding: 10px;
    background: var(--lesson-zoloto-gorizont-number-color-status-1);
    color: var(--lesson-zoloto-gorizont-number-color-text-6);
    border: var(--lesson-zoloto-gorizont-number-border-btn);
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    flex: 0 0 20%;
    min-width: 170px;
    min-height: 45px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}



/* ========================================================= 
Цвет кнопки и надпись на ней в зависимости от статуса урока
============================================================  */

/* в уроке есть задание*/

.gorizont-number .lesson-list li.user-state-has_mission a::after {
    content: "Не пройдено";
    background: var(--lesson-zoloto-gorizont-number-color-status-2);

}

.gorizont-number .lesson-list li.user-state-has_mission:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-2);
}



/* стоп урок */

.gorizont-number .lesson-list li.user-state-need_accomplish a::after {
    content: "Стоп-урок";
    background: var(--lesson-zoloto-gorizont-number-color-status-5);
}


.gorizont-number .lesson-list li.user-state-need_accomplish:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-5);
}


/* урок ожидает проверки */

.gorizont-number .lesson-list li.user-state-answered a::after  {
    content: "На проверке";
    background: var(--lesson-zoloto-gorizont-number-color-status-3);
}


.gorizont-number .lesson-list li.user-state-answered:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-3);
}


/* урок принят */

.gorizont-number .lesson-list li.user-state-accomplished a::after  {
    content: "Пройдено";
    background: var(--lesson-zoloto-gorizont-number-color-status-4);
}


.gorizont-number .lesson-list li.user-state-accomplished:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-4);
}

/* урок просмотрели, без задания */

.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched a::after {
    content: "Просмотрено";
    background: var(--lesson-zoloto-gorizont-number-color-status-6);
}


.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched:before {
    background: var(--lesson-zoloto-gorizont-number-color-status-6);
}


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

.gorizont-number .lesson-list li.user-state-not_reached {
    background: var(--lesson-zoloto-gorizont-number-bg-no-public);
    -webkit-box-shadow: var(--traning-zoloto-box-shadow-no-public);
    box-shadow: var(--traning-zoloto-box-shadow-no-public);

}

.gorizont-number .lesson-list li.user-state-not_reached:hover{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.gorizont-number .lesson-list li.user-state-not_reached  a::after {
    content: "Недоступен \f023 ";
    font-family: var(--traning-zoloto-font-family-header),'FontAwesome';
    background: var(--lesson-zoloto-gorizont-number-color-status-7);
    color: var(--lesson-zoloto-gorizont-number-color-text-6-no-public);
}


.gorizont-number .lesson-list li.user-state-not_reached a {
    cursor: default!important;
}


.gorizont-number .lesson-list li.user-state-not_reached .item-main-td .vmiddle .title{
    color: var(--lesson-zoloto-gorizont-number-color-text-3-no-public);
}

.gorizont-number .lesson-list li.user-state-not_reached .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-number-color-text-2-no-public);

}

.gorizont-number .lesson-list li.user-state-not_reached .lesson-date {
    color: var(--lesson-zoloto-gorizont-number-color-text-4-no-public);
}

.gorizont-number .lesson-list li.user-state-not_reached a::before {
    color: var(--lesson-zoloto-gorizont-number-color-number-no-public);
}



/* ========================================
Анимация
======================================== */

/*Карточка урока при наведении*/
.gorizont-number .lesson-list li:not(.user-state-not_reached ):hover{
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}


.gorizont-number .lesson-list li  a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}



/*Кнопка без статуса*/
.gorizont-number .lesson-list li:not(.user-state-not_reached):hover a:after {
    background: var(--lesson-zoloto-gorizont-number-color-status-1-hover);
    color: var(--lesson-zoloto-gorizont-number-color-text-6-hover);
    border: var(--lesson-zoloto-gorizont-number-border-btn-hover);
}

/* в уроке есть задание*/
.gorizont-number .lesson-list li.user-state-has_mission:hover a::after {
    background: var(--lesson-zoloto-gorizont-number-color-status-2-hover);
}

/* стоп урок */
.gorizont-number .lesson-list li.user-state-need_accomplish:hover a::after {
    background: var(--lesson-zoloto-gorizont-number-color-status-5-hover);
}

/* урок ожидает проверки */
.gorizont-number .lesson-list li.user-state-answered:hover a::after  {
    background: var(--lesson-zoloto-gorizont-number-color-status-3-hover);
}


/* урок принят */
.gorizont-number .lesson-list li.user-state-accomplished:hover a::after  {
    background: var(--lesson-zoloto-gorizont-number-color-status-4-hover);
}

/* урок просмотрели, без задания */

.gorizont-number .lesson-list li.user-state-reached.lesson-list_watched:hover a::after {
    background: var(--lesson-zoloto-gorizont-number-color-status-6-hover);
}



/* ========================================
Мобильная адаптация
======================================== */
@media (max-width: 991px) {
    .gorizont-number .lesson-list {

        width: calc(100% - 10px);
        margin: 0px auto 20px!important;
    }
}

@media (max-width: 700px) {

    .gorizont-number .lesson-list {
        max-width: 400px;
        padding: 30px 20px!important;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap:20px;
    }

    .gorizont-number .lesson-list li a {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-left: 0px; 
        display: -webkit-box; 
        display: -ms-flexbox; 
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 20px;

    }

    .gorizont-number .lesson-list li a:after {
        margin: 10px auto 10px;
    }


    .gorizont-number .lesson-list li .vmiddle {
        margin-left: 0!important;
        margin-right: 0px;
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom:20px;
    }


    .gorizont-number .lesson-list li a::before {
        counter-increment: lesson_counter;
        content: "Урок № " counters(lesson_counter, "")!important;
        font-size: 20px;
        margin-left: 0;
        margin-top: 10px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 24px;
        flex: 0 0 24px;
        line-height: 1;
        font-weight: 600;
    }

    .gorizont-number .lesson-list .item-main-td.item-with-image {
        padding-left: 0px;
        height: auto;
    }
}

@media (max-width: 425px) {
    .gorizont-number .lesson-list {
        max-width: 100%;
        width: calc(100% - 10px);
        margin: 0 auto 20px;
    }
}