@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --color1: #771B21;
    --color2: #fffbf8;
    --color3: #FF2934;
    --color4: #69969f;
    --color5: #8A5D0A;
    --color6: #C6B29A;
    --white:  #ffffff;
    --black:  #333333;
    --background: rgb(253, 249, 245);
    --background2: #1c1c21;
    --background-gradient: radial-gradient(at top right, #1e5853 0%, #141e1e 70%);
    --background-form: #1b0141;
    --background-form-gradient: linear-gradient(360deg, #16171a, #1d3937 80%);
    --font:  'Forum';
    --font2: 'Montserrat';
}

html body {
    font-family: var(--font2), Montserrat!important;
    font-weight: 400; 
}

/* Подключаем шрифты */
/*.f-header, .f-desc, .lt-block .f-btn, .title, .page-menu, .stream-title,  */
 H1, H2, H3, H4, H5, H6, html .gc-account-leftbar H3, .page-header H1 {
   font-family: var(--font), Forum, cursive!important; 
    font-weight: 400; 
}  
.lesson-list .link.title {
    font-family: var(--font), Forum!important;
    font-weight: 700; 
}
/* Логотип аккаунта */
.logo-link img {
  display: none;
}

/* Устанавливаем фон заливкой цветом */
body {
    background-color: var(-–color2);
}

/* Устанавливаем цвет ссылкам */
/* цвет ссылок в админке подтренинга */
.breadcrumbs a, .page-menu li a {color: var(--black); transition: all 0.3s;}
.breadcrumbs a:hover, .breadcrumbs a:active {color: var(--black)!important;}


/* Заголовок - название подтренинга */
.page-header H1 {
    font-size: 44px;
    color: var(--color5);
    letter-spacing: -0.5px;
    line-height: 1;
}

/* убираем фон и лишние отступы у списка уроков */ 
.lesson-list {
    background: transparent;
    padding: 0;
}

/* контент в плашке урока (таблица) занимает всю ширину
и укажем минимальную высоту уроков */ 
.lesson-list li table {
    width: 100%; 
    min-height: 100px;
} 

/* убираем сообщения в списке уроков (о монетах, о необходимости пройти урок */ 
.lesson-list li.divider {
    display: none;
}


/* внутренние отступы у плашек уроков (ячеек) */ 
 .lesson-list .item-main-td.item-with-image, 
 .lesson-list .item-main-td {
    padding: 25px;
    height: auto; 
}




/* оформляем отдельный урок плашкой */
.lesson-list li {
    border-radius: 6px;
    border: 1px solid var(--color1);
    overflow: hidden;
    margin: 0 0 15px;
    transition: all 0.3s;
}

/* эффект при наведении на плашку урока (наведение в любом месте урока) */
.lesson-list li:hover {
    transform: translatex(5px);
}

/* скрываем слева иконку от Геткурс */ 
.lesson-list li .state-icon-block {
    display: none;
}

/* убираем область с иконкой Геткурс и боковой разделитель между ней и превью урока */ 
.lesson-list li .info {
    margin-left: 0;
    border-left: 0 !important;
}

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


/* добавляем место для фона у урока без иконки (превью) */ 
.lesson-list li:not(.with-image) {
    padding-left: 140px;
    position: relative;
}

/* добавляем фон цветом, если не загружена иконка (превью) */ 
.lesson-list li:not(.with-image)::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 100%;
    /* цвет фона */
    background-color: #EBE1D3;
}

/* оформляем плашку уроков - фон */
.lesson-list li .info {
    margin-left: 0;
    /* цвет фона плашки */
    background-color: var(--color2);
}

/* оформляем название уроков */
.lesson-list .link.title {
    font-family: var(--font2);
    font-weight: 400;
    font-size: 30px !important;
    line-height: 1;
    color: var(--color1);
    text-align: left;
    padding-left: 0px;
    margin-bottom: 10px;
    margin-right: 0px;
} 

/* оформляем описание уроков */
.lesson-list .description {
    color: var(--black);
    padding-left: 0px!important;
    width: 100%;
}

/* оформляем название недоступных уроков */
.lesson-list li.user-state-not_reached .info {
background: var(--color2);
}

/* оформляем название недоступных уроков */
.lesson-list li.user-state-not_reached .link {
color: var(--color1);
}


 /* делаем серыми уроки, которые недоступны из-за расписания или стоп-уроков */
.user-state-not_reached .info,
.lesson-list .user-state-not_reached .user-state-label,
.lesson-list li.user-state-not_reached:not(.with-image)::before {
/* убираем цветность*/
filter: saturate(0);
}


/* системные надписи к урокам */ 
 .lesson-list .user-state-label {
    display: inline-block!important;
    font-weight: 400;
    line-height: 1;
    background: var(--color5);
    color: var(--white);
    border-radius: 6px;
    padding: 5px 7px;
    margin-bottom: 5px;
    transition: all 0.3s; 
}

/* адаптация под мобильные устройства */ 
@media (max-width: 640px) {
    /* название подтренинга */ 
    .page-header H1 {
        font-size: 36px;
    }
    /* название уроков */ 
    .lesson-list .link.title {
        font-size: 24px!important;
    }
    /* уменьшаем отступы у текстового контента */
    .lesson-list li .info .vmiddle {
        margin-left: 0;
        padding-right: 0;
    }
    /* внутренние отступы у ячейки с текстовым контентом */ 
    .lesson-list .item-main-td.item-with-image,
    .lesson-list .item-main-td {
        padding: 15px 20px;
    }
    /* системные надписи на уроках */ 
    .lesson-list .user-state-label {
        font-size: 12px;
    }
}

/* найти ширину экрана, с которой пропадают превью у GetCourse */ 
@media (max-width: 520px) {
    /* скрываем псевдоэлемент */ 
    .lesson-list li:not(.with-image)::before {
        display: none;
    }
    /* убираем отведенное место под псевдоэлемент */ 
    .lesson-list li:not(.with-image) {
        padding-left: 0;
    }
}

/* ОФОРМЛЕНИЕ СТРАНИЦЫ С УРОКАМИ - конец */