/* =========================================
 * ОТКРЫТАЯ СТРАНИЦА УРОКА
 * ========================================= */

/* 1. Фон страницы */

body:has(
    .demo-hh .page-header h1 > a[href*="/teach/control/stream/view/id/935670322"]
) {
    background-image: url(https://fs.getcourse.ru/fileservice/file/download/a/846094/sc/135/h/f7b800c3946428bc03ca05e573eda073.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    background-color: #111;
}

/* 2. Center block */

/* header-block */
.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block {
    border-radius: 15px !important;
    background-color: #1F1F1F !important;
    padding: 27px 36px !important;
    position: relative !important;
    margin-bottom: 20px !important;
    color: #FFFFFF !important;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block td.text-center {
    display: none !important;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
:is(td.text-left, td.text-right)
> a[target="_self"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    
    width: 52px;
    height: 52px;
    padding: 0;
    
    border-radius: 50%;
    background-color: #704cd5;
    color: #f5c542;
    text-decoration: none;
    
    /* Hidden Previous lesson / Next lesson */
    font-size: 0;
    line-height: 1;
    
    transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
:is(td.text-left, td.text-right)
> a[target="_self"] .fui {
    display: none;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
:is(td.text-left, td.text-right)
> a[target="_self"]::before {
    content: "";
    width: 11px;
    height: 11px;
    
    border-top: 3px solid #f5c542;
    border-right: 3px solid #f5c542;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
td.text-left
> a[target="_self"]::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
td.text-right
> a[target="_self"]::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
.lesson-header-block
:is(td.text-left, td.text-right)
> a[target="_self"]:hover {
    background-color: #6041b8;
    text-decoration: none;
    transform: translateY(-2px);
}

.lesson-header-block
:is(td.text-left, td.text-right)
> a[target="_self"]:active {
    background-color: #51379a;
    transform: translateY(0);
}

/* Comments block */
.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
div.o-lt-lesson-comment-block {
    background-color: #1f1f1f !important;
    border-radius: 15px !important;
}

.demo-hh:has(
    .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
)
div.simple-answer {
    background-color: #424242 !important;
    border-radius: 15px !important;
}

/* computers */
@media (min-width: 768px) {
    .demo-hh:has(
        .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
    )
    .lesson-header-block :is(td.text-left, td.text-right) {
        display: table-cell;
        vertical-align: middle;
    }
    
    .demo-hh:has(
        .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
    )
    .lesson-header-block td.text-left > a[target="_self"] {
        float: left;
        margin-right: 12px;
    }
    
    .demo-hh:has(
        .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
    )
    .lesson-header-block td.text-left > .hidden-xs {
        display: block !important;
        min-height: 52px;
        margin: 0;
        text-align: left;
        align-content: center;
        line-height: 1.3 !important;
    }
    
    .demo-hh:has(
        .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
    )
    .lesson-header-block td.text-right > a[target="_self"] {
        float: right;
        margin-left: 12px;
    }
    
    .demo-hh:has(
        .page-header > h1 > a[href*="/teach/control/stream/view/id/935670322"]
    )
    .lesson-header-block td.text-right > .hidden-xs {
        display: block !important;
        min-height: 52px;
        margin: 0;
        text-align: right;
        align-content: center;
        line-height: 1.3 !important;
    }
}