.lesson-list {
    background: transparent;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    gap:10px;
}

.lesson-list li:not(.divider) {
    margin: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    min-height: 90px;
    background: var(--color-white);
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    border-radius: var(--b-radius);
    border-left: 3px solid var(--beige-color);
    font-family: var(--main-font) !important;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    position: relative;
}

.lesson-list li:not(.divider):hover {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px); 
    border-left: 6px solid var(--accent-color);
}

.lesson-list li:not(.divider) a {
    display: block;
    height: 100%!important;
    width: 100%;
    position: relative;
    padding: 20px 200px 20px 20px;
}

.lesson-list li:not(.divider) a::before {
    content:'Смотреть урок';
    position: absolute;
    right:40px;
    bottom:20px;
    font-weight: 500;
    font-size: 14px;
    line-height: var(--line-height-text);
    color: var(--dark-font-color);
}

.lesson-list li:not(.divider) a::after {
    content:'';
    position:absolute;
    right:15px;
    bottom:19px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 6.34999L7.44267 3.29266C7.25507 3.10515 7.00067 2.99985 6.73543 2.99991C6.47019 2.99997 6.21584 3.1054 6.02833 3.29299C5.84082 3.48059 5.73552 3.73499 5.73558 4.00023C5.73564 4.26547 5.84107 4.51982 6.02867 4.70733L9.086 7.76399C9.11704 7.79496 9.14167 7.83174 9.15847 7.87224C9.17528 7.91273 9.18393 7.95615 9.18393 7.99999C9.18393 8.04384 9.17528 8.08725 9.15847 8.12775C9.14167 8.16825 9.11704 8.20503 9.086 8.23599L6.02867 11.2927C5.84107 11.4802 5.73564 11.7345 5.73558 11.9998C5.73552 12.265 5.84082 12.5194 6.02833 12.707C6.21584 12.8946 6.47019 13 6.73543 13.0001C7.00067 13.0001 7.25507 12.8948 7.44267 12.7073L10.5 9.64999C10.9368 9.21197 11.1821 8.6186 11.1821 7.99999C11.1821 7.38138 10.9368 6.78802 10.5 6.34999Z' fill='%2385594F' /%3E%3C/svg%3E");
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
}

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

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

.lesson-list li.divider {
    min-height:auto;
    margin:20px 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lesson-list li.divider .errorMessage {
    color:var(--dark-font-color);
}

.lesson-list li .info {
    border-left: none!important;
    background:transparent;
    margin-left:0;
}

.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%;
    min-height: 1px;
}

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

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

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

.lesson-list li .user-state-label {
    display:inline-block;
}

.lesson-list li .user-state-label:not(.lesson-date) {
    margin-bottom: 10px;
    border: 1px solid var(--beige-color);
    border-radius: var(--b-radius);
    width:fit-content;
    padding: 2px 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: var(--line-height-text);
    color: var(--dark-font-color-2);
}

.lesson-list li .lesson-date {
    margin-bottom: 5px;
    margin-right:10px;
    font-weight: 500;
    font-size: 12px;
    line-height: var(--line-height-text);
    color: var(--dark-font-color-2)!important;
}

.lesson-list li .title {
    font-size: 17px;
    font-weight: 700;
    line-height: var(--line-height-text);
    margin-right: 0;
    color:var(--dark-font-color);
}

.lesson-list .description {
    width:100%;
    margin-top: 10px;
    color: var(--dark-font-color);
}

/* недоступный урок */
.lesson-list li.user-state-not_reached {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

.lesson-list li.user-state-not_reached:hover {
    transform: none;
    border-left: 3px solid #D9D9D9;
}

.lesson-list li.user-state-not_reached a::before {
    content:'Урок не доступен';
}

.lesson-list li.user-state-not_reached .title {
    color:#696969!important;
}
/* ------ */

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

@media (max-width:600px) {
    .lesson-list li:not(.divider) a {
        padding: 20px 20px 50px 20px;
    }

   /* .lesson-list li:not(.divider) a::before {
        right: unset;
        left: 20px;
    }

    .lesson-list li:not(.divider) a::after {
        right: unset;
        left:130px;
    }
    
    .lesson-list li.user-state-not_reached a::after {
        left:150px;
    }*/
}

@media (max-width:500px) {
.lesson-list li .title {
    font-size: 16px;
    }
}

@media (max-width:390px) {
    .lesson-list li .user-state-label {
        font-size: 10px!important;
    }
}