/* --human-name-css: 'Сабақтардың классикалық дизайны-2 қатарға қою'; */
/* --human-author-css: 'Нұржау Самғат'; */
/* --human-author-image-css: "https://nurzhausamgat.kz/wp-content/uploads/2025/04/Аватарка.png"; */
/* --human-description-css: 'Бұл стиль бір рубрикадағы сабақтардың дизайнын реттейді. Классикалық форматта 2 сабақ қатарда, 4/3 пропорциясында көрсетіледі. Сабақтың обложкасы, сипаттамасы, индикаторлары және автотренинг элементтері теңшеуге болады. Экран өлшемдеріне қарай бейімделген, ашық және жабық сабақтардың әрекеттері реттелген.'; */

/* Сабақ дизайнын жақсарту */

:root {
    /* Сабақтың бағытын өзгерту (жұп емес сабақтарды кері айналдыру) */
    /* Row және column-ға -reverse қосылады */
    --reverse-panel-2: row-reverse;
    --reverse-phone-panel-2: column-reverse;

    /* Сабақтың дөңгелектенуі */
    --radius-panel-2: 25px;

    /* Сабақтың фоны */
    --bg-panel-2: #ffffff;

    /* Обложка жиегінің қалыңдығы (0 немесе 10px ұсынылады) */
    --border-panel-2: 10px;

    /* Обложка жиегінің дөңгелектенуі */
    --border-radius-panel-2: 20px;

    /* Сабақ мазмұнының баптаулары */
    /* ------------------------- */

    /* Сабақ атауының түсі */
    --title-color-panel-2: #000000;

    /* Сабақ атауының қалыңдығы */
    --title-weight-panel-2: 700;

    /* Сабақ атауының өлшемі */
    --title-size-panel-2: 1.9rem;

    /* Сипаттама мәтінінің түсі */
    --description-color-panel-2: #000000;

    /* Ашық сабақ баптаулары */
    /* ------------------- */

    /* Ашық сабаққа меңзер апарғандағы фон */
    --open-bg-hover-panel-2: #dfece0;

    /* Ашық батырманың фоны */
    --open-button-bg-panel-2: #65bf49;

    /* Ашық батырмадағы мәтін түсі */
    --open-button-text-color-panel-2: #ffffff;

    /* Ашық сабаққа меңзер апарғанда сипаттама блогының мөлдірлігі */
    --content-opacity-open-hover-panel-2: 0.3;

    /* Жабық сабақ баптаулары */
    /* -------------------- */

    /* Жабық сабаққа меңзер апарғандағы фон */
    --close-bg-hover-panel-2: #eed5d5;

    /* Жабық батырманың фоны */
    --close-button-bg-panel-2: #ff4b3e;

    /* Жабық батырмадағы мәтін түсі */
    --close-button-text-color-panel-2: #ffffff;

    /* Жабық сабаққа меңзер апарғанда мазмұнның мөлдірлігі */
    --content-opacity-closed-hover-panel-2: 0.3;

    /* Автотренингтегі жабық сабақ баптаулары */
    /* ------------------------------------ */

    /* Автотренинг сабағына меңзер апарғандағы фон */
    --auto-bg-hover-panel-2: #d8d8d8;

    /* Автотренинг батырмасының фоны */
    --auto-button-bg-panel-2: #ff4b3e;

    /* Автотренинг батырмасындағы мәтін түсі */
    --auto-button-text-color-panel-2: #ffffff;

    /* Автотренингтегі жабық сабаққа меңзер апарғанда мазмұнның мөлдірлігі */
    --content-opacity-auto-hover-panel-2: 0.3;

    /* Индикаторлар баптаулары */
    /* --------------------- */

    /* Реттік нөмірдің фоны */
    --count-bg-panel-2: rgba(0, 0, 0, 0.6);

    /* Реттік нөмірдің түсі */
    --count-color-panel-2: #ffffff;

    /* Реттік нөмірдің дөңгелектенуі */
    --count-radius-panel-2: 10px;

    /* Контент түрінің фоны */
    --type-bg-panel-2: rgba(0, 0, 0, 0.6);

    /* Контент түрі иконкасының түсі */
    --type-icon-panel-2: #ffffff;

    /* Контент түрінің дөңгелектенуі */
    --type-radius-panel-2: 10px;

    /* Құлып иконкасының дөңгелектенуі */
    --lock-icon-radius-panel-2: 10px;

    /* Құлып иконкасының фоны */
    --lock-icon-bg-panel-2: rgb(255, 255, 255, 0.9);

    /* Төменгі индикаторлардың фоны */
    --icons-bottom-bg-panel-2: rgb(255, 255, 255, 0.95);

    /* Төменгі индикаторлардың түсі */
    --icons-bottom-color-panel-2: #000000;

    /* Төменгі индикаторлар фонының дөңгелектенуі */
    --icons-bottom-radius-panel-2: 10px;

    /* "Басталмады" статусының түсі */
    --status-color-panel-2: #000000;

    /* "Тексеріліп жатыр" статусының түсі */
    --status-checking-color-panel-2: #389de5;

    /* "Орындалды" статусының түсі */
    --status-done-color-panel-2: #6dc068;

    /* "Орындалмады" статусының түсі */
    --status-not-right-color-panel-2: #ff0404;

    /* "Басталмады" статусының иконкасы */
    /* "\f110" - жүктелу */
    /* "\f06a" - ескерту 1 */
    /* "\f071" - ескерту 2 */
    --icon-not-started-panel-2: "\f110";

    /* "Тексеріліп жатыр" статусының иконкасы */
    /* "\f253" - құм сағаты */
    --icon-checking-panel-2: "\f253";

    /* "Орындалды" статусының иконкасы */
    /* "\f00c" - құсбелгі */
    /* "\f118" - смайл */
    --icon-done-panel-2: "\f00c";

    /* "Орындалмады" статусының иконкасы */
    /* "\f00d" - крестик */
    /* "\f119" - мұңды смайл */
    --icon-not-right-panel-2: "\f00d";

    /* Сабақтағы плашкалар баптаулары */
    /* ---------------------------- */

    /* Таймер плашкасының фоны */
    --holder-countdown-bg-panel-2: #389de5;

    /* Таймер плашкасындағы мәтін түсі */
    --holder-countdown-color-panel-2: #ffffff;
}

/* Аяқталған сабақтың үлкен құсбелгісін алып тастау (түсініктемені алып тастасаңыз, құсбелгі жоғалады) */
body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
    /* display: none; */
}

/* 1. Барлық блоктарды қамтитын бөлім */
/* --------------------------------- */

/* Сетканы және сабақтардың орналасуын реттеу */
body:not(.custom-super-style) .site-content .materials-row .container .row,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .container .row {
    display: flex;
    flex-wrap: wrap;
}

/* "1 колонкадағы сабақтар" опциясының әсерін алып тастау */
body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
    max-width: none;
}

/* Экран өлшемдері бойынша контейнер ені */
@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .container,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
        width: 1370px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row .container,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
        width: 1170px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.custom-super-style) .site-content .materials-row .container,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
        width: 970px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .container,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
        width: 750px;
    }
}

@media (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .container,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .container {
        max-width: 370px;
        /* max-width: 100%; */
    }
}

/* 2. Сабақтың негізгі блогы */
/* ----------------------- */

/* Жалпы баптаулар */
body:not(.custom-super-style) .site-content .materials-row .col-md-6,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12 {
    float: left;
}

/* Экран өлшемдері бойынша қатардағы сабақтар саны */
@media (min-width: 992px) {
    body:not(.custom-super-style) .site-content .materials-row .col-md-6,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12 {
        width: calc(100%/2);
    }
}

@media (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .col-md-6,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12 {
        width: 100%;
    }
}

/* Сабақтың сыртқы стилі (обложка мен сипаттама жиегі) */
body:not(.custom-super-style) .site-content .materials-row .material-item {
    border-radius: var(--radius-panel-2);
    padding: var(--border-panel-2);
    background: var(--bg-panel-2);
    transition: all 0.25s ease-out !important;
    /* Сабақтың жабылуын алып тастау, үй тапсырмасының құсбелгісі көрінсін деп */
    overflow: visible;
}

/* Ашық сабаққа меңзер апарғанда */
body:not(.custom-super-style) .site-content .materials-row .material-opened:hover {
    background: var(--open-bg-hover-panel-2);
}

/* Ашық сабақтың батырмасы */
body:not(.custom-super-style) .site-content .materials-row .material-item .col-content .content-overlay .doc-label.opened,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .col-content .content-overlay .doc-label.opened {
    color: var(--open-button-text-color-panel-2) !important;
    background: var(--open-button-bg-panel-2) !important;
}

/* Жабық сабаққа меңзер апарғанда */
body:not(.custom-super-style) .site-content .materials-row .material-closed:hover {
    background: var(--close-bg-hover-panel-2);
}

/* Жабық сабақтың батырмасы */
body:not(.custom-super-style) .site-content .materials-row .material-closed .content-overlay .doc-label.locked,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-closed .content-overlay .doc-label.locked {
    color: var(--close-button-text-color-panel-2) !important;
    background: var(--close-button-bg-panel-2) !important;
}

/* 3. Сабақ сілтемесі блогы */
/* ---------------------- */

/* Жалпы баптаулар */
body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12 .material-item .flex-wrap {
    display: flex;
}

/* Жұп және тақ сабақтардың бағытын өзгерту */
@media (min-width: 768px) {
    body:not(.custom-super-style) .site-content .materials-row .col-md-6:nth-child(2n) .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12:nth-child(2n) .material-item a {
        flex-flow: var(--reverse-panel-2);
    }
}

@media (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .col-md-6:nth-child(2n) .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .col-md-12:nth-child(2n) .material-item a {
        flex-flow: var(--reverse-phone-panel-2);
    }
}

/* Экран өлшемдері бойынша сабақтың биіктігі */
@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item a {
        height: 220px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item a {
        height: 200px;
        /* height: 220px; */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item a {
        height: 150px;
        /* height: 180px; */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item a {
        height: 220px;
    }
}

@media (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item a,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item a {
        height: auto;
    }
}

/* 4. Сабақ обложкасы блогы */
/* ---------------------- */

body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .col-thumb,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .flex-wrap .col-thumb {
    width: auto;
    /* Firefox-та тек height: 100% дұрыс жұмыс істейді */
    height: 100%;
    border-radius: 0;
    background: none;
    overflow: visible;
    transition: all 0.25s ease-out;
}

/* Обложканың пропорциясы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap {
    min-height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-panel-2);
    transition: all 0.25s ease-out;
}

/* Ескі мөлдірлікті алып тастау (меңзер апарғанда) */
body:not(.custom-super-style) .site-content .materials-row .material-item:hover .col-thumb:before {
    opacity: 0;
}

/* Ашық сабаққа меңзер апарғанда обложка мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-opened:hover .thumbnail-wrap {
    opacity: var(--content-opacity-open-hover-panel-2);
}

/* Жабық сабаққа меңзер апарғанда обложка мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-closed:hover .thumbnail-wrap {
    opacity: var(--content-opacity-closed-hover-panel-2);
}

/* Автотренингтегі жабық сабаққа меңзер апарғанда обложка мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-inaccessible:hover .thumbnail-wrap {
    opacity: var(--content-opacity-auto-hover-panel-2);
}

/* 5. Сабақ сипаттамасы блогы */
/* ------------------------ */

body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .col-content,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .flex-wrap .col-content {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
}

/* Меңзер апарғанда сипаттама фонын алып тастау (сабақтың жалпы фоны қолданылады) */
body:not(.custom-super-style) .site-content .materials-row .material-item:hover .flex-wrap .col-content,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item:hover .flex-wrap .col-content {
    background: none;
}

/* Ашық сабаққа меңзер апарғанда сипаттама мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-opened:hover .content-wrap {
    opacity: var(--content-opacity-open-hover-panel-2) !important;
}

/* Жабық сабаққа меңзер апарғанда сипаттама мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-closed:hover .content-wrap {
    opacity: var(--content-opacity-closed-hover-panel-2) !important;
}

/* Автотренингтегі жабық сабаққа меңзер апарғанда сипаттама мөлдірлігі */
body:not(.custom-super-style) .site-content .materials-row .material-inaccessible:hover .content-wrap {
    opacity: var(--content-opacity-auto-hover-panel-2) !important;
}

/* Сипаттама блогының шегіністері (мәтіннің кесілуін болдырмау үшін жиекті алып тастадым) */
body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
    padding: 25px 25px 0px 25px;
    border: none;
}

/* Кішкентай экрандарда сипаттама енін сабақтың жиегіне қарай реттеу */
@media (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
        padding: 25px calc(25px - var(--border-panel-2)) 10px calc(25px - var(--border-panel-2));
    }
}

/* Сабақ атауы */
body:not(.custom-super-style) .site-content .materials-row .material-item .content-wrap .title,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .content-wrap .title {
    color: var(--title-color-panel-2) !important;
    font-weight: var(--title-weight-panel-2);
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: var(--title-size-panel-2);
}

/* Атаудың жалпы баптаулары */
body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Мәтінді тасымалдау */
    hyphens: auto;
}

/* Экран өлшемдері бойынша атаудағы жолдар саны */
@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* Әріптерді тасымалдау */
        word-break: break-word;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (min-width: 460px) and (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (min-width: 320px) and (max-width: 459px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* Сабақ сипаттамасы */
body:not(.custom-super-style) .site-content .materials-row .material-item .content-wrap .description {
    color: var(--description-color-panel-2) !important;
}

/* Сипаттаманың жалпы баптаулары */
body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Мәтінді тасымалдау */
    hyphens: auto;
    margin: 0 0 10px;
}

/* Экран өлшемдері бойынша сипаттамадағы жолдар саны */
@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

@media (min-width: 460px) and (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
}

@media (min-width: 320px) and (max-width: 459px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
}

/* 6. Автотренинг қабаты */
/* ------------------- */

/* Автотренингтегі өтпеген сабаққа меңзер апарғанда */
body:not(.custom-super-style) .site-content .materials-row .material-item.material-inaccessible:before {
    border-radius: var(--radius-panel-2);
    /* Қабаттың орнын реттеу */
    left: 0px;
    top: 0;
}

/* Автотренинг сабағына меңзер апарғандағы фон */
body:not(.custom-super-style) .site-content .materials-row .material-inaccessible:hover {
    background: var(--auto-bg-hover-panel-2);
}

/* Автотренингтегі жабық сабақтың батырмасы */
body:not(.custom-super-style) .site-content .materials-row .material-inaccessible .content-overlay .doc-label.locked,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-inaccessible .content-overlay .doc-label.locked {
    color: var(--auto-button-text-color-panel-2) !important;
    background: var(--auto-button-bg-panel-2) !important;
}

/* 7. Сабақ индикаторлары */
/* -------------------- */

/* Жоғарғы индикаторлар */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-top .m-icon.count,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-top .m-icon.count {
    background: var(--count-bg-panel-2);
    color: var(--count-color-panel-2);
    border-radius: var(--count-radius-panel-2);
}

/* Контент түрі */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-top .m-icon,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-top .m-icon {
    background: var(--type-bg-panel-2);
    color: var(--type-icon-panel-2);
    border-radius: var(--type-radius-panel-2);
}

/* Сабақтың қолжетімділік иконкасы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-top .icons .status-icon {
    background: var(--lock-icon-bg-panel-2);
    padding: 0px;
    border-radius: var(--lock-icon-radius-panel-2);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Төменгі индикаторлар */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom {
    color: var(--icons-bottom-color-panel-2) !important;
    background: var(--icons-bottom-bg-panel-2);
    width: auto;
    border-radius: 0 var(--icons-bottom-radius-panel-2) calc(var(--border-radius-panel-2) - 3px) calc(var(--border-radius-panel-2) - 3px);
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons {
    display: flex;
    flex-flow: wrap;
    padding: 10px;
}

/* Төменгі индикаторлардың ретін өзгерту */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .right-icons {
    display: flex;
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .comments {
    order: 1;
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .views {
    order: 2;
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .date {
    order: 3;
}

/* Жарияланған күн */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icon-calendar:before {
    /* Күнтізбе иконкасы */
    content: "\f073";
    font-size: 1.1rem;
}

/* Автотренингтегі үй тапсырмасы статусы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status {
    margin-bottom: 2px;
    margin-right: 10px;
}

/* Төменгі индикаторлардың шегіністері */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .comments,
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .date,
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .views,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .comments,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .date,
body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .views {
    margin: 1px 10px 1px 0px;
}

/* "Бір колонка" опциясы үшін төменгі индикаторлардың орнын реттеу */
@media (min-width: 992px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .comments,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .date,
    body:not(.custom-super-style) .site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .views {
        float: none;
    }
}

/* Барлық үй тапсырмасы статусы иконкаларының орнын реттеу */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .status .icon-file-text-o:before {
    vertical-align: bottom;
}

/* "Басталмады" статусы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status {
    color: var(--status-color-panel-2);
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .status .icon-file-text-o:before {
    content: var(--icon-not-started-panel-2);
}

/* "Тексеріліп жатыр" статусы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.checking {
    color: var(--status-checking-color-panel-2);
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .status.checking .icon-file-text-o:before {
    content: var(--icon-checking-panel-2);
}

/* "Орындалды" статусы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.done {
    color: var(--status-done-color-panel-2);
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .status.done .icon-file-text-o:before {
    content: var(--icon-done-panel-2);
}

/* "Орындалмады" статусы */
body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.not-right {
    color: var(--status-not-right-color-panel-2);
}

body:not(.custom-super-style) .site-content .materials-row .material-item .thumbnail-wrap .status.not-right .icon-file-text-o:before {
    content: var(--icon-not-right-panel-2);
}

/* Обложкадағы аяқталған сабақтың үлкен құсбелгісі */
@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
        scale: 0.6;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
        scale: 0.5;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
        scale: 0.5;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
        scale: 0.6;
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .col-thumb.done:after {
        scale: 1;
    }
}

/* Сабақтағы плашкалар */
body:not(.custom-super-style) .site-content .materials-row .material-inaccessible .mbl-material-checking-holder {
    display: none;
}

/* Таймер плашкасы */
body:not(.custom-super-style) .site-content .materials-row .material-item .mbl-material-countdown-holder {
    background: var(--holder-countdown-bg-panel-2);
    color: var(--holder-countdown-color-panel-2);
}

@media (min-width: 1400px) {
    body:not(.custom-super-style) .site-content .materials-row .material-item .mbl-material-countdown-holder {
        top: 53%;
    }
}