/*подключаем шрифты*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600&display=swap');

:root {
    /* Основные цвета */
    /* акцентный цвет */
    --Gcolor1: #8C7735;
    --Gbordercolor: #80BFB960;
    /* акцентный цвет темный */
    --Gcolor4: #8C7735;
    /* белый */
    --Gwhite: #F3FFFF;
    /* белый */
    --Gwhite2: #ffffff;
    /* черный */
    --Gblack: #041831;
    /* черный */
    --Gblack2: #04183160;
    --Gblack3: #005E61;
    /* градиент */    
    --Ggradient: linear-gradient(135deg, rgba(0,94,97,1) 0%, rgba(29,129,133,1) 65%);
    --Ggradient2: linear-gradient(135deg, rgba(180,152,64,1) 0%, rgba(142,120,51,1) 34%, rgba(190,159,61,1) 100%);
    /* тени */
    --Gboxshadow: 0 2px 0 0 rgba(0,94,97,1), inset 0 0 13px 0 rgb(255 255 255 / 40%);
    --Gboxshadow2: 0 2px 0 0 #8C7735, inset 0 0 13px 0 rgb(255 255 255 / 40%);
    /* фон страницы */
    --Gbackground: #e1f5f5;
    --Gbackground2: #ffffff;

    /* Основные шрифты */
    /* шрифт заголовки */
    --Gfont: 'Oswald', sans-serif!important; 
    /* шрифт основной текст */
    --Gfont2: 'Montserrat', sans-serif!important; 
}

/* вся страница */
body {
    /* фон */
    background: var(--Gbackground2);
}

/* логотип/название проекта */
.logo.gc-account-logo {
    /* скрываем 
    display: none; */
}

/* "хлебные крошки" */
.empty-breadcrumbs {
    /* не используется - скрываем */
    display: none;
}

/* "хлебные крошки" - ссылка на уровень выше - Тренинг */
.breadcrumbs a {
    font-family: var(--Gfont2);
    /* цвет */
    color: var(--Gblack);
    transition: all 0.3s;
}

/* "хлебные крошки" при наведении - ссылка на уровень выше - Тренинг */
.breadcrumbs a:hover {
    /* цвет */
    color: var(--Gcolor1);
}

/* заголовок страницы - название тренинга */
.page-header H1 {
    /* шрифт */
    font-family: var(--Gfont);
    /* размер шрифта */
    font-size: 32px; 
    /* толщина написания от 100 до 900 */
    font-weight: 700;
    /* заглавные буквы */
    text-transform: uppercase;
    /* цвет текста */
    color: var(--Gblack3);
}

/* нижняя полоса под заголовком страницы */
.page-header .content-menu {
    /* отключаем */
    border-bottom: none;
}

.page-actions {
    margin-bottom: 20px;
}

video {
	border-radius: 20px;
}

/* заголовок страницы - РАЗМЕСТИТЬ НЕПОСРЕДСТВЕННО НА ГЛАВНОЙ */
.page-header H1 {
    /* скрываем 
    display: none;*/
}

/* нижняя полоса под заголовком страницы */
.page-header .content-menu {
    /* отключаем */
    border-bottom: none;
}

/* контейнер, в котором находятся тренинги - две колонки */
.gc-main-content.with-left-menu .container {
    /* внешние отступы, выравниваем посередине */
    margin: 20px 40px;
}

/* контейнер, в котором находятся тренинги - две колонки */
.isTrainingsPage .main-page-block .container {
    width: 97%;
    max-width: 1340px;
    /* цвет фона */
    background: var(--Gwhite2);
    /* радиус скругления */
    border-radius: 20px;
    /* внутренние отступы */
    padding: 40px;
}

.main {
   margin-top: 20px;
}

@media (min-width: 1400px) {
.main-page-block .container {
        width: 1260px;
    }
}

/* заголовок "Доступные тренинги" - даем свой класс */
.mbBody__header,
.header-kurs {
    /* шрифт */
    font-family: var(--Gfont);
    /* размер шрифта */
    font-size: 32px; 
    /* толщина написания от 100 до 900 */
    font-weight: 700;
    /* заглавные буквы */
    text-transform: uppercase;
    /* цвет текста */
    color: var(--Gblack3);
    /* отступ снизу */
    margin-bottom: 40px;
}


/* внешние отступы от списка тренингов */
.stream-table {
    margin-bottom: 30px!important;
    margin-left: 0!important;
}

/* каждый из тренингов */
.stream-table tbody tr {
    display: flex;    
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
    /* высота - подбирается автоматически */
    height: auto;
    min-height: 170px;
    /* ширина - на весь контейнер */
    width: 100%;
    overflow: hidden;
    /* каждый из тренингов */
    background: var(--Gbackground);
    /* рисуем границу вокруг тренинга */
    border: 1px solid var(--Gbordercolor);
    /* радиус скругления */
    border-radius: 20px;
    /* внутренний отступ */
    padding: 0;
    /* внешний оступ между тренингами - 20 пикселей */
    margin: 0px 0px 20px;
    transition: all 0.3s;
}

/* каждый из тренингов */
.stream-table tbody tr:hover {
    /*background: var(--Gwhite);*/
}

/* ячейка внутри тренинга */
.stream-table tbody tr td {
    position: relative;
    height: auto;
    width: 100%;
    display: flex;
    /* по вертикали выравнивание по центру */
    align-items: center;
    padding: 0;
    transition: all 0.3s;
}

/* тренинг при наведении */
.stream-table tbody tr td:hover {
    /* фон */
    background: transparent;
}

/* ссылка внутри плашки тренинга */
.stream-table tbody tr a {
    position: relative;
    flex-basis: 100%;
    width: 100%;
    /* внутренние отступы, 220 пикселей - место под кнопку */
    padding: 30px 220px 30px 30px;
}

/* рисуем кнопку через псевдоэлемент */
.stream-table tr a::after {
    /* надпись на кнопке */
    content: 'ПЕРЕЙТИ >';
    /* позиционируем относительно .stream-table tr */
    position: absolute;
    /* по высоте - посередине позиционируем */
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    /* отступ справа от границы плашки тренинга */
    right: 30px;
    /* цвет текста на кнопке */
    color: var(--Gwhite2);
    /* заливка фона */
    background: var(--Ggradient2);
    box-shadow: var(--Gboxshadow2);
    /* подключаем шрифт */
    font-family: var(--Gfont2);
    font-size: 13px;
    /* толщина написания */
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    /* граница для кнопки */
    border: none;
    /* радиус скругления */
    border-radius: 10px;
    outline: none;
    /* внутренние отступы */
    padding: 20px 20px;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* Плашка тренинга - Кнопка Продлить через псевдоэлмент - эффект при наведении на кнопку */
.stream-table tbody tr a:hover::after {
    /* заливка фона */
    background: var(--Ggradient);
    box-shadow: var(--Gboxshadow);
    /* граница для кнопки 
    border: 1px solid var(--Gcolor2);*/
    /* цвет текста на кнопке */
    color: var(--Gwhite);
}

/* Название тренинга */
.stream-table tbody .stream-title {
    /* шрифт */
    font-family: var(--Gfont2);
    /* размер шрифта */
    font-size: 20px;
    /* толщина написания - жирность */
    font-weight: 600;
    /* цвет текста */
    color: var(--Gblack);
    /* высота строки */
    line-height: 110%;
}

/* Описание тренинга */
.stream-table tbody tr td div {
    font-family: var(--Gfont2);
    font-size: 0px;
    color: var(--Gblack2);
    margin-top: 10px;
}

/*Количество уроков */
.stream-table tbody tr td div b {
     font-weight: 700;
}

.mbWidgest_dostup,
.mbWidgest__support {
    /* background: var(--Gwhite); */
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--Gbordercolor);	
}

.mbBody__header{
    /* шрифт */
    font-family: var(--Gfont);
    /* размер шрифта */
    font-size: 28px; 
    /* толщина написания от 100 до 900 */
    font-weight: 700;
    /* заглавные буквы */
    text-transform: uppercase;
    /* цвет текста */
    color: var(--Gblack3);
    /* отступ снизу */
    margin-bottom: 24px;
}

.mbWidgest__feedback,
.mbWidgest__info,
.mbWidgest__support-msg,
.mbWidgest__support-time {
    /* шрифт */
    font-family: var(--Gfont2);	
    /* размер шрифта */
    font-size: 16px; 
    /* цвет текста */
    color: var(--Gblack);
}

.mbWidgest__feedback  {
    margin-bottom: 24px;
}

.mbWidgest__feedback p,
.mbWidgest__info p {
   margin-bottom: 0; 
}

.mbWidgest__feedback strong,
.mbWidgest__info strong,
.mbWidgest__support-msg strong,
.mbWidgest__support-time strong {
    /* цвет текста */
    color: var(--Gcolor1);
}

.mbWidgest__feedback strong,
.mbWidgest__info strong {
    /* размер шрифта */
    font-size: 20px; 
}

.mbWidgest__support-btn {
    background: var(--Ggradient2);
    box-shadow: var(--Gboxshadow2);
    padding: 18px 40px;
    border: none !important;
    color: var(--Gwhite2);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 10px;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

.mbWidgest__support-btn:hover {
    background: var(--Ggradient);
    box-shadow: var(--Gboxshadow);
}

.mbWidgest__tg_bot {
    background: var(--Ggradient);
    box-shadow: var(--Gboxshadow);
    padding: 18px 40px;
    border: none !important;
    color: var(--Gwhite2);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 10px;
    /* задержка для плавности анимации */
    transition: all 0.3s;	
    margin-top: 24px;
    text-align:center;
}

.mbWidgest__tg_bot:hover {
    background: var(--Ggradient2);
    box-shadow: var(--Gboxshadow2);
}

.mbWidgest__tg_bot a{
    color: var(--Gwhite2);
    text-decoration: none;
}

.mbWidgest__tg_bot a:hover{
    text-decoration: none;
}

@media (min-width: 992px) and (max-width: 1160px) {
    .stream-table tbody tr a {
        /* внутренние отступы, 100 пикселей - место под кнопку */
        padding: 20px 20px 100px 20px;
    }
    /* рисуем кнопку через псевдоэлемент */
    .stream-table tr a::after {
        position: absolute;
        /* позиционируем по нижнему левому краю */
        top: auto;
        right: auto;
        transform: none;
        bottom: 20px;
        left: 20px;
    }
}

@media (max-width: 680px) {
    .stream-table tbody tr a {
        /* внутренние отступы, 100 пикселей - место под кнопку */
        padding: 20px 20px 100px 20px;
    }
    /* рисуем кнопку через псевдоэлемент */
    .stream-table tr a::after {
        position: absolute;
        /* позиционируем по нижнему левому краю */
        top: auto;
        right: auto;
        transform: none;
        bottom: 20px;
        left: 20px;
    }
}

@media (max-width: 580px) {
    /* контейнер, в котором находятся тренинги - две колонки */
.isTrainingsPage .main-page-block .container {
        /* внутренние отступы */
        padding: 15px;
    }
     /* заголовок "Доступные материалы" - даем свой класс header-kurs */
    .header-kurs {
        /* размер шрифта */
        font-size: 27px;
        /* выравнивание по середине */
        text-align: center;
    }

    /* Название тренинга */
    .stream-table tbody .stream-title {
        /* размер шрифта */
        font-size: 18px;
    }
    /* Описание тренинга */
    .stream-table tbody tr td div {
        /* размер шрифта текста */
        font-size: 15px;
    }
}