/* оформление уроков */
.lesson-list {
    background: transparent;
    padding: 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap:20px;
}

.lesson-list li {
    margin: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    border-radius: var(--b-radius);
    box-shadow: 11px 11px 11px 0 rgba(0, 0, 0, 0.45);
    background: var(--color-fon-cards);
    min-height:175px;
    transition: all .5s;
    position:relative;
}

.lesson-list li a {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    padding: 25px 30px 60px;
    height: 100%;
    width:100%;
    position: relative;    
}

.lesson-list li a:after {
    content:'Перейти';
    right:30px;
    bottom:25px;
    background: var(--color-1);
    font-family: var(--second-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 90%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--light-font-color);
    padding: 13px 30px;
    border-radius: 37px;
    transition: all .5s;
    position: absolute;
}

.lesson-list li a:hover:after {
    transform: scale(0.95);
    transition: all .5s;
}

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

.lesson-list li .state-icon-block,
.lesson-list li.divider,
.lesson-list li .item-image {
    display:none;
}

.lesson-list li .info,
.lesson-list li.user-state-not_reached .info {
    border-left: none!important;
    background:transparent;
    margin-left:0;
    padding-bottom: 20px;
}

.lesson-list li .info table,
.lesson-list li .info table tbody,
.lesson-list li .info table tbody tr {
    display: block;
    min-width: inherit!important;
    width: 100%;
    height: 100%;
}

.lesson-list .item-main-td {
    padding:0;
    display: block;
    height: 100%;
}

.lesson-list li .info .vmiddle {
    padding-right: 0;
    display:flex;
    flex-direction: column;
    height: 100%;
}

.lesson-list .item-main-td.item-with-image {
    padding-left: 0;
    display: block;
    height: auto;
}

.lesson-list li .title {
    font-family: var(--header-font-1);
    font-size: var(--font-size-1)!important;
    line-height: 100%;
    color:var(--accent-color-school);
    text-transform: uppercase;
    display:flex;
    flex-direction:column-reverse;
    margin-right:0;
    order:1;
}

.lesson-list__video-watched {
    display:none!important;
}

.lesson-list li .title span {
    font-family: var(--header-font-2);
    display:block;
    margin-top:5px;
}

.lesson-list .description {
    font-family: var(--second-font);
    font-weight: 400;
    font-size: var(--font-size-3);
    line-height: 120%;
    color: var(--light-font-color); 
    order: 2;
    margin-bottom:20px;
}

.lesson-list li .user-state-label {
    font-family: var(--second-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: var(--light-font-color);
    order:3;
    max-width: 55%;
}

.lesson-list li .user-state-label:not(.lesson-date) {
    position: absolute;
    bottom: -25px;
    color: var(--transparent-color);
}

.lesson-list li .user-state-label.user-state-label-ex.is-stop-lesson {
    font-size:0!important;
}

.lesson-list li .user-state-label.user-state-label-ex.is-stop-lesson:before {
    font-size:14px!important;
    content:'Стоп-урок';
    line-height: 100%;
    top: 0;
}

.lesson-list li .lesson-date {
    color: var(--color-2)!important;
    margin-block: 5px;
    max-width:100%;
}



/* недоступные уроки */
.lesson-list li.user-state-not_reached {
    background: rgba(30, 37, 45, 0.5);
}

.lesson-list li.user-state-not_reached .title {
    color:rgba(234, 208, 166, 0.5);
}

.lesson-list li.user-state-not_reached a:after {
    content:'Недоступен';
    background: rgba(234, 208, 166, 0.5);
    color: rgba(255, 255, 255, 0.5);
}

.lesson-list li.user-state-not_reached a:hover:after {
    transform: none;
}

@media (max-width: 767px) {
    .lesson-list li .vmiddle {
        margin-left: 0!important;
    }
}

@media (max-width:500px) {
    .lesson-list li {
      -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    }
}