/* загружаем шрифты, если ранее не загружали */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

:root {
    --cwhite:  #ffffff;
    --cblack:  #615561;
    
    --color1: #96aece;
    --color2: #B6B8DC;
    --color3: #453F3F;
    --color4: #eaebf7;
    --color5: #778ba6;
    --color6: #d85b53;
    --color7: #d789e6;
    --font1:  'Montserrat', sans-serif;
    --font2: 'Oswald', sans-serif;
}
/* подключаем шрифты */ 
body {
    font-family: var(--font1)!important;
    font-weight: 400; 
    background: #e6e4e440; 
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/220/h/0c10eb648fbc14a393f1da205df3417c.jpg');
    /* изображение добавляем 1 раз */
    background-repeat: no-repeat;
    /* позиционирование по центру и по нижнему краю */
    background-position: bottom center;
    /* изображение заполняет собой всё окно */
    background-size: cover;
    /* изображение не прокручивается  */
    background-attachment: fixed;
}

/* элементы с декоративным написанием */ 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font1)!important;
    font-weight: 600; 
}
/* Контейнер с логотипом/названием аккаунта */
.logo.gc-account-logo {
    /* если хотим скрыть */
    display: none;
}
/* Заголовок Главной страницы тренингов 
(название меняем в разделе "Заголовой страницы" через "Настроить вид") */
.gc-main-content .page-header h1 {
    color: var(--cblack);
    font-size: 40px;
}
/* Разделитель после Заголовка */
.content-menu {
    /* если хотим скрыть */
    border: none;
    /* border-bottom: 1px solid var(--cblack);
    margin-top: 20px;
    margin-bottom: 20px; */
}
/* контейнер с тренингами */
.stream-table {
    margin-left: 0 !important;
}
/* оформляем плашкой каждый тренинг */
.stream-table tr {
    position: relative;
    display: block;
    /* ширина плашки */
    width: 90%;
    /* высота плашки - подбирается автоматически */
    height: auto;
    /* фон */
    background: var(--cwhite);
    /* граница - оформление */
    border: 1px solid var(--color1);
    /* радиус скругления */
    border-radius: 20px;
    /* всё, что выходит за пределы плашки, - скрывается*/
    /*overflow: hidden;*/
    /* внутренние оступы */
    padding: 0;
    /* внешний оступ снизу */
    margin-bottom: 20px;
    transition: all 0.3s;
}
.stream-table tr:hover {
    background: #e171fb50;
    transform: translatex(3px);
    box-shadow: 0 0 10px rgb(0 0 0/ 15%);
}
    
/* ячейки в плашках тренинга */
.stream-table tr td {
    display: block;
    /* высота - на всю карточку */  
    height: 100% !important;
    /* внутренние отступы */
    padding: 0 !important;
}
/* плашки тренинга при наведении */
.stream-table tr td:hover {
    /* цвет фона */
    background: none !important;
}
.stream-table tr td a {
    display: block;
    width: 100%;
    /* внутренние отступы: сверху, справа, снизу, слева */
    padding: 25px 25px 25px 110px;
    /* позиционировать псевдоэлемент будем относительно текущего элемента  */
    position: relative;   
}


/* параметры псевдоэлемента - иконки для плашки тренинга */
 .stream-table tr a::before {
    display: block;
    /* описываем псевдоэлемент */
    content: '';
    position: absolute;
    /* позиционируем по вертикали по середине и отступ слева */
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    /* размер - иконка полностью помещается в псевдоэлемент */
    background-size: contain;
    /* изображение добавляем 1 раз */
    background-repeat: no-repeat;
}

/* псевдоэлемент - иконка одинаковая для всех тренингов */
.stream-table tr a::before {
    /* ссылка на изображение иконки - фон псведоэлемента */
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/129/h/b1564e91821d28cc02252e701a4ffd1c.png');
    /* размеры псевдоэлемента - укажите нужный размер */
    width: 70px;
    height: 70px;
}
/* строка с количеством уроков, основным преподавателем и описанием */
.stream-table tr td div {
    /* отступ сверху */
    margin-top: 5px;
    /* шрифт */
    font-size: 16px;
    /* цвет текста */
    color: var(--cblack);
}
/* название тренинга */

.stream-table a div {
    /* шрифты */
    font-weight: 400;
    font-size: 14px;
    /* цвет текста */
    color: var(--cblack);
    /* отступы */
    margin-top: 15px;
    /* задержка для плавности анимации */ 
    transition: all 0.3s;
}
/* Скрываем второй заголовок Доступные тренинги - ставим размер h6 */
.gc-main-content h6 {
    /* если хотим скрыть */
    display: none;
}
/* рисуем кнопку через псевдоэлемент */
.stream-table tr a::after {
    /* надпись на кнопке */
    content: 'ПЕРЕЙТИ';
    /* позиционируем относительно .stream-table tr a */
    position: absolute;
    /* по высоте - посередине позиционируем */
    top: 50%;
    transform: translateY(-50%);
    /* отступ справа от границы плашки тренинга */
    right: 20px;
    /* ширина кнопки */
    width: 180px;
    /* цвет текста на кнопке */
    color: var(--color3);
    /* заливка фона */
    background: transparent;
    /* подключаем шрифт */
    font-family: var(--font);
    font-size: 13px;
    /* толщина написания */
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    /* граница для кнопки */
    border: 2px solid var(--color3);
    /* радиус скругления */
    border-radius: 10px;
    /* внутренние отступы */
    padding: 20px 20px;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* Плашка тренинга - эффект при наведении на кнопку */
.stream-table tbody tr a:hover::after {
    /* цвет текста на кнопке */
    color: var(--cwhite);
    /* заливка фона */
    background: var(--color7);
    /* граница для кнопки */
    /* border: 2px solid var(--color3); */
}
/* количество уроков */
.stream-table tr td a div b {
    /* указываем как элемент, от которого позиционируем псевдоэлемент */
    position: relative;
    width: 100%;
    padding-left: 15px;
}

/* описываем псевдоэлемент - иконку и позиционируем. 
В зависимости от размеров вашей иконки укажите отступы сверху или слева  */
.stream-table tr td a div b::before {
    content: '';
    display: block;
    /* размеры псевдоэлемента*/
    width: 12px;
    height: 12px;
    position: absolute;
    /* позиционуем псевдоэлемент */
    top: 4px;
    left: 0px;
    /* фоновое изображение */
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/303/h/5cc7f7fe63694c552dae9ccdb0b03688.png');
    /* размер изображения - чтобы полность поместилось в пседоэлемент */
    background-size: contain;
    /* изображение добавим 1 раз */
    background-repeat: no-repeat;
}

@media (max-width: 640px) {
    /* заголовок страницы */
    .gc-main-content .page-header h1 {
        font-size: 28px;
    }
}

@media (max-width: 420px) {
    /* блок с тренингами */
    .stream-table {
        /* отступ от верхнего края */   
        margin-top: 20px;
    }
    /* название тренинга */
    .stream-table tr td a .stream-title {
        font-size: 24px;
    }
}
/* адаптация под мобильные устройства */
/* на маленьких экранах убираем иконку тренинга 
(по желанию, вы можете и оставить, если не мешает визуально просмотру) */
@media (max-width: 425px) {
    /* устанавливаем обычный отступ для псевдоэлемента */
    .stream-table tr td a {
        padding-left: 25px;
    }
    /* скрываем псевдоэлемент */
    .stream-table tr td a::before {
        display: none;
    }
}