:root {

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


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

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

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


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

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

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

    --lesson-raduga-gorizont-img-color-status-1: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%); /* урок без дз */
    --lesson-raduga-gorizont-img-color-status-2: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%); /* урок с дз */
    --lesson-raduga-gorizont-img-color-status-3: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%); /* урок на проверке */
    --lesson-raduga-gorizont-img-color-status-4: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%);/* урок принят */
    --lesson-raduga-gorizont-img-color-status-5: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%); /* Фон кнопки стоп-урока */
    --lesson-raduga-gorizont-img-color-status-6: linear-gradient(90deg, rgba(11, 181, 239, 0.9752275910364145) 0%, rgba(237,48,166,0.9780287114845938) 100%); /*фон кнопки просмотрено*/
    --lesson-raduga-gorizont-img-color-status-7: #c8c8c8;/*фон кнопки недоступного урока*/

    --lesson-raduga-gorizont-img-color-status-1-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%);/*урок без дз Цвет кнопки при наведении*/
    --lesson-raduga-gorizont-img-color-status-2-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%);/*урок с дз Цвет кнопки при наведении*/
    --lesson-raduga-gorizont-img-color-status-3-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%); /*урок на проверке Цвет кнопки при наведении*/
    --lesson-raduga-gorizont-img-color-status-4-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%);/*урок принят Цвет кнопки при наведении*/
    --lesson-raduga-gorizont-img-color-status-5-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%); /*Стоп-урок Цвет кнопки при наведении*/
    --lesson-raduga-gorizont-img-color-status-6-hover: linear-gradient(90deg, rgba(237, 48, 165, 0.9780287114845938) 0%, rgba(11, 181, 239, 0.9752275910364145) 100%); /*Просмотрено Цвет кнопки при наведении*/

}




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

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



.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(--raduga-font-family);
    background: transparent!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: 15px;
    margin-bottom:20px!important;
    padding:0;
}



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

.gorizont-img .lesson-list li {
    background:var(--lesson-raduga-gorizont-img-bg);
    border-radius: var(--raduga-border-radius);
    border: var(--raduga-border);
    position: relative;
    -webkit-box-shadow: var(--raduga-box-shadow);
    box-shadow: var(--raduga-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: 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-raduga-gorizont-img-color-text-1)!important;
    font-family: var(--raduga-font-header-family);
    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(--raduga-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(--raduga-font-header-family);
    color: var(--lesson-raduga-gorizont-img-color-text-3);
    margin-right: 0px!important;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 500;
}


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


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



/* ========================================
Дата открытия урока
======================================== */
.gorizont-img .lesson-list li .lesson-date {
    display: block !important;
    color: var(--lesson-raduga-gorizont-img-color-text-4);
    font-family: var(--raduga-font-header-family);
    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(--raduga-font-header-family), 'FontAwesome';
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    position: relative;
    text-align: center;
    border-radius: var(--raduga-border-radius);
    padding: 10px;
    background: var(--lesson-raduga-gorizont-img-color-status-1);
    color: var(--lesson-raduga-gorizont-img-color-text-6);
    border: var(--lesson-raduga-gorizont-img-border-btn);
    font-weight: 500;
    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-img .lesson-list li.user-state-has_mission a::after {
    content: "Есть задание";
    background: var(--lesson-raduga-gorizont-img-color-status-2);

}

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



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

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


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


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

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


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


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

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


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

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

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


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


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

.gorizont-img .lesson-list li.user-state-not_reached {
    background: var(--lesson-raduga-gorizont-img-bg-no-public);
    -webkit-box-shadow: var(--raduga-box-shadow-no-public);
    box-shadow: var(--raduga-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(--raduga-font-header-family),'FontAwesome';
    background: var(--lesson-raduga-gorizont-img-color-status-7);
    color: var(--lesson-raduga-gorizont-img-color-text-6-no-public);
}


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


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


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

}

.gorizont-img .lesson-list li.user-state-not_reached .lesson-date {
    color: var(--lesson-raduga-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 .item-main-td .vmiddle .title {
    color: var(--lesson-raduga-gorizont-img-color-text-3-hover);
}

/*Описание урока*/
.gorizont-img. lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .description {
    color: var(--lesson-raduga-gorizont-img-color-text-2-hover);
}

/*Дата открытия урока*/
.gorizont-img .lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .lesson-date{
    color: var(--lesson-raduga-gorizont-img-color-text-4-hover); 
}



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

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

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

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


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

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

.gorizont-img .lesson-list li.user-state-reached.lesson-list_watched:hover a::after {
    background: var(--lesson-raduga-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: 767px) {
    .gorizont-img .lesson-list {
        width: calc(100% - 10px);
        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-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:140px;
        height: auto;      
    }

    .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: start; 
        -ms-flex-align: start; 
        align-items: flex-start;
        width: 100%;
        min-height:100%;
        height:auto;
        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;
        justify-content: space-between;
        padding: 20px;
        min-height:140px;
        height: auto;
    }

    .gorizont-img .lesson-list li a:after{
        margin: 10px auto 0px 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: flex-start;
        -ms-flex-pack: flex-start;
        justify-content: flex-start;
    }



    .gorizont-img .lesson-list li .vmiddle {
        margin: 0px 90px 0px 0px !important;
        padding-right: 0;
        align-items: flex-start;
        text-align: left;
        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 {
        position: absolute;
        right: 0px;
        top: 0px;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        width: 70px !important;
        height: 70px !important;
        background-position: center !important;
        background-size: cover !important;

    }
}

@media (max-width: 550px) {
    .gorizont-img .lesson-list li,
    .gorizont-img .lesson-list li a{
        min-height: 200px;
    }

}


@media (max-width: 360px) {
    .gorizont-img .lesson-list li .vmiddle {
        margin: 0px 60px 0px 0px !important;
    }

    .gorizont-img .lesson-list li td.item-image {
        width: 50px !important;
        height: 50px !important;
    }

}



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