/*подключаем шрифты*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600&display=swap');

:root {
    /* Основные цвета */
    /* акцентный цвет */
    --Gcolor1: #8C7735;
    --Gbordercolor: #80BFB960;
    /* акцентный цвет темный */
    --Gcolor4: #8C7735;
    /* белый */
    --Gwhite: #F3FFFF;
    /* белый */
    --Gwhite2: #ffffff;
    /* черный */
    --Gblack: #041831;
    /* черный */
    --Gblack2: #04183160;
    --Gblack3: #005E61;
    /* градиент */    
    --Ggradient: linear-gradient(135deg, rgba(0,94,97,1) 0%, rgba(29,129,133,1) 65%);
    --Ggradient2: linear-gradient(135deg, rgba(180,152,64,1) 0%, rgba(142,120,51,1) 34%, rgba(190,159,61,1) 100%);
    /* тени */
    --Gboxshadow: 0 2px 0 0 rgba(0,94,97,1), inset 0 0 13px 0 rgb(255 255 255 / 40%);
    --Gboxshadow2: 0 2px 0 0 #8C7735, inset 0 0 13px 0 rgb(255 255 255 / 40%);
    /* фон страницы */
    --Gbackground: #e1f5f5;
    --Gbackground2: #ffffff;

    /* Основные шрифты */
    /* шрифт заголовки */
    --Gfont: 'Oswald', sans-serif!important; 
    /* шрифт основной текст */
    --Gfont2: 'Montserrat', sans-serif!important; 
    
        /* список уроков */
    --state-width: 40px;
    --height: 120px;
    --border-radius: 10px;

    /* статусы уроков */
    /* надпись с датами, необходимости выполнить урок, стоп-урок */
    --status-label: #005E61;

    /* стоп урок - есть задание - не сдано на проверку */
    --need-accomplish-color: #005E61;
    --need-accomplish-icon: url('https://fs.getcourse.ru/fileservice/file/download/a/563477/sc/165/h/26ad54a2e11c540bacb9da931b232490.png');
    /* урок недоступен (расписание или после стоп-урока */
    --not-reached-color: #eaeaea;
    --not-reached-icon: url('https://fs.getcourse.ru/fileservice/file/download/a/563477/sc/165/h/26ad54a2e11c540bacb9da931b232490.png');        
    /* есть задание -  не принято */
    --has-mission-color: #005E61;
    --has-mission-icon: url('https://fs.getcourse.ru/fileservice/file/download/a/563477/sc/165/h/26ad54a2e11c540bacb9da931b232490.png');    
    /*задание ожидает проверки */
    --answered-color: #e2b36b;
    --answered-icon: url('ссылканафайл');
    /* задание выполнено и принято */    
    --accomplished-color: #8C7735;
    --accomplished-icon: url('https://fs.getcourse.ru/fileservice/file/download/a/563477/sc/118/h/1ee12708376ce87a563479fd8c447e3c.png');
    /* урок открыт (нет задания) */
    --reached-color: #005E61;
    --reached-icon: url('https://fs.getcourse.ru/fileservice/file/download/a/563477/sc/227/h/d7eec2804f7e004ec04653060dc31ebe.png');
}

/* вся страница */
body {
    /* фон */
    background: var(--Gbackground2);
}

/* "хлебные крошки" - ссылка на уровень выше - Тренинг */
.breadcrumbs a {
    font-family: var(--Gfont2);
    /* цвет */
    color: var(--Gblack);
    transition: all 0.3s;
}

/* "хлебные крошки" при наведении - ссылка на уровень выше - Тренинг */
.breadcrumbs a:hover {
    /* цвет */
    color: var(--Gcolor1);
}

/* Элемент - список уроков */
.lesson-list {
    /* фон элемента */
    background: transparent;
    /* внутренний отступ сверху */
    padding: 0px;
}

/* Удаляем подчеркивание */
.lesson-list li a {
    text-decoration: none;
}

/* Каждый из уроков */
.lesson-list li.lesson-is-hidden,
.lesson-list li {
    /* скругление углов */
    border-radius: var(--border-radius);
    margin: 0px 0px 20px;
    transition: all 0.3s;
    border: 1px solid var(--Gbordercolor);
}

/* Каждый из уроков - при наведении */
.lesson-list li:hover {
    /* сдвиг вправо */
    transform: translatex(5px);
}

.lesson-list li.lesson-is-hidden .user-state-bg,
.lesson-list li .user-state-bg {
    background: transparent;
}

/* ссылка - вся плашка урока */
.lesson-list li.lesson-is-hidden .item-a,
.lesson-list li .item-a {
    /* минимальная высота плашки урока */
    min-height: var(--height);
    /* поменять элементы местами в строке (иконка справа, а текст - слева) */
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
}

/* Контейнер, содержащий в себе таблицу с содержимым урока */ 
.lesson-list li.lesson-is-hidden .info,
.lesson-list li .info {
    /* растягиваем по ширине */
    width: 100%;
    height: auto;
    /* фон урока */
    background-color: var(--Gbackground);
    
    margin: 0px;
}

.lesson-list li.user-state-reached .info,
.lesson-list li.user-state-not_reached .info {
    border-left: none;
}

.lesson-list li.lesson-is-hidden .info .vmiddle,
.lesson-list li .info .vmiddle {
    padding-right: 0px;
    height: 100%;
}

/* Таблица - с заголовком, описанием, иконкой превью, надписями в плашке урока */
.lesson-list li.lesson-is-hidden table,
.lesson-list li table{
    /* растягиваем по ширине и высоте контейнера в плашке урока */ 
    height: 100%;
    width: 100%;
    min-width: auto;
}

/* Раздел со статусом урока - иконкой GetCourse */
.lesson-list li.lesson-is-hidden .state-icon-block,
.lesson-list li .state-icon-block {
    display: flex;
    /* выравнивание по центру */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0px;
    padding: 0px;
    /* ширина области */
    width: var(--state-width);
    height: auto;    
    border-radius: 0px;
}

/* Раздел со статусом урока - иконкой GetCourse для уроков с превью */
.lesson-list li.with-image .state-icon-block {
    padding: 0px;    
}

/* Ячейки с текстами */
.lesson-list .item-main-td,
.lesson-list .item-main-td.item-with-image {
    /* внутренние отступы от края плашки урока */
    padding: 20px;
}

/* Заголовок (название) урока */ 
.lesson-list li.lesson-is-hidden .title,
.lesson-list li .title {
    /* растягиваем по ширине */     
    width: 100%;
    /* шрифт */  
    font-family: var(--Gfont2);
    /* толщина написания */ 
    font-weight: 600;
    /* размер шрифта */ 
    font-size: 20px !important;
    /* высота строки */ 
    line-height: 1.2;
    /* цвет текста */ 
    color: var(--Gblack);
    padding-left: 0px;
    margin-right: 0px;
}

/* оформляем описание уроков */
.lesson-list .description {
    /* растягиваем по ширине */     
    width: 100%;
    /* шрифт */ 
    font-family: var(--Gfont2);
    /* размер шрифта */ 
    font-size: 15px !important;
    /* цвет текста */ 
    color: var(--Gblack);
    padding-left: 0px;
    margin-top: 5px;
}

/* Надписи о недоступности урока до конретной даты, наличии задания, необходимости выполнить задание, стоп-уроке */
.lesson-list .user-state-label {
    /* шрифт */ 
    font-family: var(--Gfont2);
    /* размер шрифта */ 
    font-size: 13px!important;
    /* цвет текста */
    color: var(--status-label);
    /* внешний нижний отступ от надписи до заголовка */     
    margin-bottom: 20px;
}

/* Надписи с датой открытия уже открытого расписанием урока */
.user-state-reached .user-state-label.lesson-date {
    /* шрифт */ 
    font-family: var(--Gfont2);
    /* размер шрифта */
    font-size: 13px;
    /* цвет текста */ 
    color: var(--Gblack);
    /* внешний нижний отступ от надписи до заголовка */   
    margin-bottom: 10px;
}

/* Собственная иконка статуса - через псевдоэлемент */
.lesson-list .state-icon-block > span::before {
    content: "";
    /* размер области под псевдоэлемент */
    width: 25px;
    height: 25px;
    display: block;
    /*background-size: contain;*/
    background-position: center;
    background-repeat: no-repeat;
}

/* Урок закрыт расписанием (или стопом) */
/* фон урока */
.lesson-list li.user-state-not_reached .info {
    background: var(--not-reached-color);
}
/* фон статуса */
.user-state-not_reached .state-icon-block {
    background: var(--not-reached-color);
}

/* цвета урока делаем бледным */
.lesson-list li.user-state-not_reached {
    opacity: 0.6;
}

/* Стоп-урок (не выполнено задание) */
/* фон статуса */
.user-state-need_accomplish .state-icon-block {
    background: var(--need-accomplish-color);
    border: 1px solid var(--need-accomplish-color);
}
/* иконка статуса */
.user-state-need_accomplish .state-icon-block > span::before {
    background-image: var(--need-accomplish-icon);
    background-size: 22px;
    filter: invert(94%) sepia(21%) saturate(189%) hue-rotate(126deg) brightness(106%) contrast(102%);
}

/* Есть ответ - ожидает проверки*/
/* фон статуса 
.user-state-answered .state-icon-block {
    background: var(--answered-color);
}*/
/* иконка статуса 
.user-state-answered .state-icon-block > span::before {
    background-image: var(--answered-icon);
   
    background-size: 24px;
}*/

/* Урок выполнен (задание принято) */
/* фон статуса */
.user-state-accomplished .state-icon-block {
    background: var(--accomplished-color);
    border: 1px solid var(--accomplished-color);
}
/* иконка статуса */
.user-state-accomplished .state-icon-block > span::before {
    background-image: var(--accomplished-icon);
    /* размер иконки */
    background-size: 25px;
    filter: invert(99%) sepia(63%) saturate(182%) hue-rotate(84deg) brightness(118%) contrast(100%);
}

/* Урок - есть задание, нет ответа / не принятно */
/* фон статуса */
.user-state-has_mission .state-icon-block {
    background: var(--has-mission-color);
    border: 1px solid var(--has-mission-color);
}
/* иконка статуса */
.user-state-has_mission .state-icon-block > span::before {
    background-image: var(--has-mission-icon);
    /* размер иконки */
    background-size: 22px;
    filter: invert(94%) sepia(21%) saturate(189%) hue-rotate(126deg) brightness(106%) contrast(102%);
}

/* Урок без задания */
/* фон статуса */
.user-state-reached .state-icon-block {
    background: var(--reached-color);
    border: 1px solid var(--reached-color);
}
/* иконка статуса */
.user-state-reached .state-icon-block > span::before {
    background-image: var(--reached-icon);
    /* размер иконки */
    background-size: 22px;
    filter: invert(94%) sepia(21%) saturate(189%) hue-rotate(126deg) brightness(106%) contrast(102%);
}

/* Блок с текстом о необходимости выполнить задание */
.lesson-list li.divider {
    /* если хотим скрыть */
    /* display: none; */
    min-height: auto;
    margin-bottom: 20px;
}

/* Текст о необходимости выполнить задание */
.lesson-list li.divider .errorMessage {
    /* шрифт */ 
    font-family: var(--Gfont2);
    /* толщина написания - жирность */ 
    font-weight: 400;
    /* цвет текста */ 
    color: var(--Gwhite);
    /* фон */ 
    background-color: var(--need-accomplish-color);
    /* радиус скругления */ 
    border-radius: var(--border-radius);
    padding: 10px 20px;
}

/* Иконка урока (превью) через ячейку превью */ 
.lesson-list li table td.item-image {
    /* размер контейнера с иконкой (превью) по ширине */
    width: 120px !important;
    /* размер иконки */
    background-size: 100px!important;
    background-position: center!important;
    /* можно дополнить фоном превью */
    background-color: var(--Gcolor1) !important;
}

/* Недоступные уроки - превью урока */
.user-state-not_reached.with-image td.item-image {
    /* скрываем превью урока */
    display: none;
}

/* Скрываем дату и время открытия */
.user-state-label.lesson-date, .user-state-reached .user-state-label.lesson-date {
   display: none
}

/* Мобильная адаптация */
@media (max-width: 767px) {
    /* отступ слева у контейнера с текстами урока */
    .lesson-list li .vmiddle {
        margin-left: 0px;
    }
    /* возвращаем отображение статуса уроков */
    .lesson-list li .state-icon-block,
    .hidden-xs {
        display: inherit!important;
    }
}

@media (max-width: 580px) {
    /* контейнер с заголовком страницы (названия тренинга) */
    .page-header {
        margin-top: 0px;
    }
    /* заголовок - название тренинга */
    .page-header H1 {
        /* размер шрифта */
        font-size: 27px;
    }
    /* заголовок - название урока */
    .lesson-list li .title {
        /* размер шрифта */ 
        font-size: 18px !important;    
    }
    /* описание урока */
    .lesson-list .description {
        /* размер шрифта */ 
        font-size: 15px !important;
    }
}

@media (max-width: 360px) {
/* Надписи о недоступности урока до конретной даты, наличии задания, необходимости выполнить задание, стоп-уроке */
.lesson-list .user-state-label {
    /* размер шрифта */ 
    font-size: 12px!important;
    /* внешний нижний отступ от надписи до заголовка */   
    margin-bottom: 10px;
}