

/* Настройки макета */
:root {
    --main-font: 'Monrope'; /*Основной шрифт*/
    
    --li-bg-color: #e3d8cb; /*Фон уроков*/
    --li-bg-color-not-reached: #6c6c6c; /*Фон недоступного урока*/
    
    --li-border-color:#5e5f4c; /*Цвет границы уроков*/
    --li-border-color-hover: #27281f; /*Цвет границы при наведении*/
    --li-border-color-answered: #594B4B; /*Цвет границы урока на проверке*/
    --li-border-color-accomplished: #c78c47; /*Цвет границы принятого урока*/
    --li-border-color-needaccomplish: #B71504; /*Цвет границы стоп-урока*/
    
    --li-status-text-color: #5e5f4c; /*Цвет текста статуса урока*/
    
    --li-status-bg-color-hasmission: #0000004D; /*Фон статуса урока с заданием*/
    --li-status-bg-color-answered: #e4cbad; /*Фон статуса урока на проверке*/
    --li-status-bg-color-accomplished: #8f5215; /*Фон статуса принятого задания*/
    --li-status-bg-color-needaccomplish: #BF2F33; /*Фон статуса стоп-урока*/
    --li-status-bg-color-notreached: #aaaeb1; /*Фон статуса недоступного урока*/
    
    --li-title-color:#343030; /*Цвет заголовка урока*/
    --li-title-color-needaccomplish: #343030; /*Цвет заголовка стоп-урока*/
    --li-title-color-notreached: #000; /*Цвет заголовка недоступного урока*/
    
    --li-decription-color: #594B4B; /*Цвет текста описания урока*/
    --li-decription-color-notreached: #BFBFBF; /*Цвет текста описания недоступного урока*/
    
    --li-status-text-hasmission: 'Есть задание'; /*Текст статуса урока с ДЗ*/
    --li-status-text-answered: 'Задание на проверке'; /*Текст статуса урока с ДЗ на проверке*/
    --li-status-text-accomplished: 'Задание выполнено'; /*Текст статуса урока с принятым ДЗ*/
    
    --li-status-img-hasmission: url(https://fs.getcourse.ru/fileservice/file/download/a/762878/sc/194/h/656ccac7249743c83eeb5a3199a3da04.png); /*Иконка урока с ДЗ*/
    --li-status-img-answered: url(https://fs.getcourse.ru/fileservice/file/download/a/762878/sc/211/h/f3a3b477ba7981d47e09b9eeaf241598.png); /*Иконка урока с ДЗ на проверке*/
    --li-status-img-accomplished: url(https://fs.getcourse.ru/fileservice/file/download/a/762878/sc/31/h/424138512241cbc609ffe12b3e3418a4.png); /*Иконка урока с принятым ДЗ*/
    --li-status-img-needaccomplish: url(https://fs.getcourse.ru/fileservice/file/download/a/762878/sc/495/h/db6789da5b7ef3effca3d48d7acdb238.png); /*Иконка стоп-урока*/
    --li-status-img-notreached: url(https://fs.getcourse.ru/fileservice/file/download/a/762878/sc/102/h/9c92135a73c5d8d008e40fca241d6986.png); /*Иконка недоступного урока*/
    
    --li-title-size: 28px; /*Размер заголовка урока*/
    --li-description-size: 20px; /*Размер текста описания урока*/
    --li-status-text-size: 18px; /*Размер текста статуса урока*/
}

/* Список уроков */
.lesson-list {
	padding: 0 !important;
    
	background: transparent !important;
}

.lesson-list li {
	position: relative;
	margin: 0 0 20px 0 !important;
    
	background: var(--li-bg-color) !important;
	border-radius: 10px !important;
	border: 1px solid var(--li-border-color);
    
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.lesson-list li.with-image {
	padding: 0;
}

.lesson-list li:hover {
	border-color: var(--li-border-color-hover) !important;
    
	-webkit-transform: translatey(-5px);
	    -ms-transform: translatey(-5px);
	        transform: translatey(-5px);
}

.lesson-list li a {
	background: transparent !important;
}

.lesson-list li .hidden-xs {
	display: none;
}

.lesson-list li table,
.lesson-list li table tbody,
.lesson-list li table tbody tr {
	display: block;
	width: 100%;
}

.lesson-list li table tbody tr {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
	gap: 10px;
	-ms-flex-line-pack: center;
	    align-content: center;
}

.lesson-list li table tbody tr .item-image {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 180px;
	        flex: 1 1 180px;
	max-width: 180px;
}

.lesson-list li table tbody tr .item-with-image {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 50%;
	        flex: 1 1 50%;
    height: inherit !important;
	min-height: 120px;
}

.lesson-list li table tbody tr .item-main-td:not(.item-with-image) {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 100%;
	        flex: 1 1 100%;
}

.lesson-list li .info {
	margin-left: 0 !important;
	padding-left: 30px !important;
	
    background: transparent !important;
	border: none !important;
}

.lesson-list li.with-image .info {
	padding-left: 0 !important;
}

.lesson-list li .info .vmiddle {
	position: relative;
	top: 50%;
	-webkit-transform: translatey(-50%);
	    -ms-transform: translatey(-50%);
	        transform: translatey(-50%);
}

.lesson-list li .info .vmiddle div:not([class]) {
	display: none;
}

.lesson-list li .info .title {
	display:block;
	width: 100% !important;
	font-weight: 500;
	font-family: Montserrat (--main-font);
	font-size: var(--li-title-size);
    line-height: 120%;
	color: var(--li-title-color);
}

.lesson-list li .info .description {
	padding-top: 15px;
	
	font-weight: 300;
	font-family: Morpope (--main-font);
	font-size: var(--li-description-size);
	color: var(--li-decription-color) !important;
}

.lesson-list li::after {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 35px;
	height: 35px;

	background: var(--li-status-bg-color-hasmission);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 0 0 0 10px;
	
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.lesson-list li .vmiddle::before,
.user-state-label-ex {
	display: block;
    margin-bottom: 10px;
	
	font-weight: 600;
	font-family: Montserrat(--main-font);
	font-size: var(--li-status-text-size);
	color: var(--li-status-text-color);
}

/* Есть задание */
.lesson-list li.user-state-has_mission {
    padding-bottom: 10px;
}

.lesson-list li.user-state-has_mission::after {
	content: "";
	background-image: var(--li-status-img-hasmission);
}

/* Урок на проверке */
.lesson-list li.user-state-answered {
	border-color: var(--li-border-color-answered);
    padding-bottom: 10px;
}

.lesson-list li.user-state-answered::after {
	content: "";
	background-color: var(--li-status-bg-color-answered);
	background-image: var(--li-status-img-answered);
}

.lesson-list li.user-state-answered .vmiddle::before {
	content: var(--li-status-text-answered);
    color: var(--li-status-bg-color-answered);
}

/* Урок выполнен */
.lesson-list li.user-state-accomplished {
	border-color: var(--li-border-color-accomplished);
    padding-bottom: 10px;
}

.lesson-list li.user-state-accomplished::after {
	content: "";
	background-color: var(--li-status-bg-color-accomplished);
	background-image: var(--li-status-img-accomplished);
}

.lesson-list li.user-state-accomplished .vmiddle::before {
	content: var(--li-status-text-accomplished);
    color: var(--li-status-bg-color-accomplished)
}

/* Стоп-урок */
.lesson-list li.user-state-need_accomplish {
	border-color: var(--li-border-color-needaccomplish);
    padding-bottom: 10px;
}

.lesson-list li.user-state-need_accomplish::after {
	content: "";
	background-color: var(--li-status-bg-color-needaccomplish);
	background-image: var(--li-status-img-needaccomplish);
}

.lesson-list li.user-state-need_accomplish .vmiddle .user-state-label {
	font-weight: 600;
	font-family: var(--main-font);
	font-size: var(--li-status-text-size);
	color: var(--li-status-bg-color-needaccomplish);
}

.lesson-list li.user-state-need_accomplish .vmiddle .user-state-label.lesson-date {
	-webkit-box-ordinal-group: 1;
	    -ms-flex-order: 0;
	        order: 0;
	margin-bottom: 5px;
	width: 100%;
	
	color: var(--li-title-color-needaccomplish) !important;
}

.lesson-list li.user-state-need_accomplish .vmiddle .title {
	padding-top: 0;
	
    color: var(--li-title-color-needaccomplish);
}


/* Урок недоступен */
.lesson-list li.user-state-not_reached {
	background: 
       
        var(--li-bg-color-not-reached) !important;
	border: 0;
    padding-bottom: 10px;
}

.lesson-list li.user-state-not_reached:hover {
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}

.lesson-list li.user-state-not_reached .info {
	background: 0;
	border-color: transparent !important;
}

.lesson-list li.user-state-not_reached .title {
	padding-top: 5px;
}

.lesson-list li.user-state-not_reached .vmiddle {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
}

.lesson-list li.user-state-not_reached .vmiddle .user-state-label {
	margin-bottom: 10px !important;
    
	font-weight: 600;
	font-family: var(--main-font);
	font-size: var(--li-status-text-size);
	color: var(--li-status-text-color);
	
	opacity: 0.7;
}

.lesson-list li.user-state-not_reached .vmiddle .title {
	padding-top: 0;
	
	color: var(--li-title-color-notreached);
}

.lesson-list li.user-state-not_reached .vmiddle .description {
	color: var(--li-decription-color-notreached);
}

.lesson-list li.user-state-not_reached.with-image .item-image {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* Разделитель */
.lesson-list li.divider {
	margin-top: 50px;
	padding: 0 20px;
	min-height: 40px;
	
	text-align: center;
	
	background: -webkit-gradient(linear, left top, left bottom, from(#032107), to(#3E7974)), #309977;
	background: -o-linear-gradient(top, #032107 0%, #3E7974 100%), #ababab;
	background: linear-gradient(180deg, #032107 0%, #3E7974 100%), #ababab;
	border-radius: 10px;
	border: 0;
}

.lesson-list li.divider .error-message-text {
	font-weight: bold;
	color: #fff;
}

@media (max-width:425px) {
	.lesson-list li:not(.with-image) .info {
		padding-left: 20px;
	}

	.lesson-list li .info .vmiddle {
		margin-left: 0 !important;
	}

	.lesson-list li .info .title {
		font-size: 24px;
	}
}
@media (max-width: 1350px){.lesson-list {

  

