:root {


    /* ========================================
    СПИСОК УРОКОВ плашками с фото
    ======================================== */
    --lesson-zoloto-gorizont-img-bg:#fff;/*Цвет фона уроков*/
    --lesson-zoloto-gorizont-img-bg-no-public:#fff; /*Цвет фона недоступного урока*/

    --lesson-zoloto-gorizont-img-color-text-3: #a57b01; /*Цвет Названия уроков*/
    --lesson-zoloto-gorizont-img-color-text-4: #f0dbac; /*Цвет даты открытия уроков*/
    --lesson-zoloto-gorizont-img-color-text-2: #383838; /*Цвет описания уроков*/

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

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

    --lesson-zoloto-gorizont-img-border-btn: none; /*обводка кнопки*/
    --lesson-zoloto-gorizont-img-border-btn-hover: 1px solid #a57b01; /*обводка кнопки при наведении*/


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

    --lesson-zoloto-gorizont-img-color-status-1: #f0dbac; /* урок без дз */
    --lesson-zoloto-gorizont-img-color-status-2: #f0dbac; /* урок с дз */
    --lesson-zoloto-gorizont-img-color-status-3: #f0dbac; /* урок на проверке */
    --lesson-zoloto-gorizont-img-color-status-4: #f0dbac; /* урок принят */
    --lesson-zoloto-gorizont-img-color-status-5: #f0dbac; /* Фон кнопки стоп-урока */
    --lesson-zoloto-gorizont-img-color-status-6: #f0dbac; /*фон кнопки просмотрено*/
    --lesson-zoloto-gorizont-img-color-status-7: #f0dbac; /*фон кнопки недоступного урока*/



    --lesson-zoloto-gorizont-img-color-status-1-hover: #fff; /*урок без дз Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-img-color-status-2-hover: #fff; /*урок с дз Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-img-color-status-3-hover: #fff; /*урок на проверке Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-img-color-status-4-hover: #fff; /*урок принят Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-img-color-status-5-hover: #fff; /*Стоп-урок Цвет кнопки при наведении*/
    --lesson-zoloto-gorizont-img-color-status-6-hover: #fff; /*Просмотрено Цвет кнопки при наведении*/
}



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



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

.gorizont-img .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-img .lesson-list li .info table {
    min-width: inherit!important;
    width: 100%;
}

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



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



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

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

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


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

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

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

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

.gorizont-img .lesson-list {
    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!important;
    margin-bottom:20px!important;
}



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

.gorizont-img .lesson-list li {
    background:var(--lesson-zoloto-gorizont-img-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-img .lesson-list a {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    padding: 20px;
    min-height: 80px;/*минимальная высота плашки уроков (было 135)*/
    -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-img-color-text-1)!important;
    font-family: var(--traning-zoloto-font-family-header);
    gap: 20px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}




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


.gorizont-img .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-img .lesson-list li td.item-image{
    width: 120px!important;
    border-radius:var(--traning-zoloto-border-radius);
}


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

.gorizont-img .lesson-list .item-main-td{
    padding: 0px!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.gorizont-img .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-img .lesson-list li .item-main-td .vmiddle .title {
    font-family: var(--traning-zoloto-font-family-header);
    color: var(--lesson-zoloto-gorizont-img-color-text-3);
    margin-right: 0px!important;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 400;

}


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


.gorizont-img .lesson-list li .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-img-color-text-2);
    font-family: var(--traning-zoloto-font-family-text);
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
}



/* ========================================
Дата открытия урока
======================================== */
.gorizont-img .lesson-list li .lesson-date {
    display: block !important;
    color: var(--lesson-zoloto-gorizont-img-color-text-4);
    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-img .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-img-color-status-1);
    color: var(--lesson-zoloto-gorizont-img-color-text-6);
    border: var(--lesson-zoloto-gorizont-img-border-btn);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    flex: 0 0 20%;
    min-width: 170px;
    min-height: 30px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}



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

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

.gorizont-img .lesson-list li.user-state-has_mission a::after {
    content: "Есть задание";
    background: var(--lesson-zoloto-gorizont-img-color-status-2);

}

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



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

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


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


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

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


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


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

.gorizont-img .lesson-list li.user-state-accomplished a::after  {
    content: "Принят";
    background: var(--lesson-zoloto-gorizont-img-color-status-4);
}


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

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

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


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


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

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

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

.gorizont-img .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-img-color-status-7);
    color: var(--lesson-zoloto-gorizont-img-color-text-6-no-public);
}




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

}

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

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

}

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







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

/*Карточка урока при наведении*/
.gorizont-img .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-img .lesson-list li  a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}



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

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

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

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


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

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

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



/* ========================================
Мобильная адаптация
======================================== */


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



@media (max-width: 700px) {

    .gorizont-img .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;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap:20px;
    }

    .gorizont-img .lesson-list li{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 10px);
        flex: 0 0 calc(100% - 10px);
        margin:0 auto;
        min-height: inherit;
    }

    .gorizont-img  .lesson-list li tr{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -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;
        width: 100%;
        min-height:100%;
        height:auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap:20px;
    }

    .gorizont-img  .lesson-list li td.item-main-td {
        padding: 0!important;
        width: 100%;
    }

    .gorizont-img .lesson-list li table td {
        min-height: 50px;
    }

    .gorizont-img .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: 30px 20px;

    }

    .gorizont-img .lesson-list li a:after {
        margin: auto auto 0px;
    }

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

    .gorizont-img .lesson-list tbody,
    .gorizont-img .lesson-list li .info table{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        min-width: inherit!important;
        width: 100%;
        min-height: 100%;
        height: auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .gorizont-img .lesson-list .item-main-td.item-with-image {
        padding-left: 0px;
        height: auto;
    }


    .gorizont-img .lesson-list .item-main-td{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .gorizont-img .lesson-list li .vmiddle {
        margin: 0px !important;
        padding-right: 0;
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }


    .gorizont-img .lesson-list li td.item-image {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        width: 170px !important;
        background-position: center !important;
        min-height: 150px !important;
        height: auto;
    }
}



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