.glaza-metabolizm {
    padding: 32px 0;

    --activeText: #862041;
    --scroll: #761734;
    --scrollBg: #7617341a;
    --bg: #D500320D;
    --svg: #D50032;
}

.glaza-metabolizm__wrap {
    padding: 0 20px;
}

.glaza-metabolizm__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #343A40;
    margin-bottom: 24px;
}

.glaza-metabolizm__text {
    display: none;
}

.glaza-metabolizm__timecodes-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glaza-metabolizm__video-wrap {
    position: relative;
    /* aspect-ratio: 335 / 230; */
    aspect-ratio: 738 / 394;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.nevro .glaza-metabolizm__video-wrap.full {
    border: 8px solid #149BDC;
}

.gastro .glaza-metabolizm__video-wrap.full {
    border: 8px solid #00B140;
}

.cardio .glaza-metabolizm__video-wrap.full {
    border: 8px solid #D40030;
}

.diabet .glaza-metabolizm__video-wrap.full {
    border: 8px solid #FFD100;
}

.wh .glaza-metabolizm__video-wrap.full {
    border: 8px solid #D787B5;
}

.pulmo .glaza-metabolizm__video-wrap.full {
    border: 8px solid #004B94;
}

.farmatsevtam .glaza-metabolizm__video-wrap.full {
    border: 8px solid #64CCC9;
}

.dermatology .glaza-metabolizm__video-wrap.full {
    border: 8px solid #FF6900;
}

.glaza-metabolizm__video-wrap.full.no-border {
    border-color: transparent;
}

.glaza-metabolizm__icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
}

.glaza-metabolizm__icon.hide {
    display: none;
}

.glaza-metabolizm__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    opacity: 0;
}

.glaza-metabolizm__video.active {
    opacity: 1;
}

.glaza-metabolizm__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.glaza-metabolizm__preview.hide {
    display: none;
}

.glaza-metabolizm__btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    cursor: pointer;
}

.glaza-metabolizm__btn-play.hide {
    display: none;
}

.glaza-metabolizm__btn-play path {
    fill: var(--svg);
}

.glaza-metabolizm__btn-play rect {
    fill: var(--svg);
}

.glaza-metabolizm__timecodes {
    border-radius: 4px;
    background-color: var(--bg);
    padding: 20px;
}

.glaza-metabolizm__timecodes-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #343A40;
    margin-bottom: 24px;
}

.glaza-metabolizm__scroll-wrap {
    overflow: hidden;
    max-height: 325px;
}

.glaza-metabolizm__timecodes-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 20px;
}

.timecode.active {
    pointer-events: none;
}

.timecode.active .timecode__head {
    color: var(--activeText);
}

.timecode.active .timecode__name,
.timecode.active .timecode__text {
    color: #343A40;
}

.timecode {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timecode__head {
    display: flex;
    gap: 8px;
    color: #8C8C8C;
}

.timecode__time {
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.1px;
    transition: color 0.3s ease;
}

.timecode__title {
    font-size: 14px;
    line-height: 18px;
    transition: color 0.3s ease;
}

.timecode__name {
    font-weight: 700;
}

.timecode__name,
.timecode__text {
    font-size: 14px;
    line-height: 18px;
    color: #8C8C8C;
    transition: color 0.3s ease;
}

.glaza-metabolizm__timecodes-wrap .os-theme-dark {
    --os-size: 12px;
    --os-padding-perpendicular: 3px;
    --os-handle-bg: var(--scroll);
    --os-handle-bg-hover: var(--scroll);
    --os-handle-bg-active: var(--scroll);
    --os-track-bg: var(--scrollBg);
    --os-track-bg-hover: var(--scrollBg);
    --os-track-bg-active: var(--scrollBg);
    --os-track-border-radius: 8px;
    --os-handle-border-radius: 8px;
}

.glaza-metabolizm .os-scrollbar-track {
    max-height: 279px;
}

.os-scrollbar-vertical .os-scrollbar-handle {
    height: 93px;
}

.glaza-metabolizm__accordions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
}

.glaza-metabolizm__accordions .glaza-metabolizm__timecodes-items {
    padding-right: 0;
}

.glaza-metabolizm__accordion {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--activeText);
}

.glaza-metabolizm__accordion-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.glaza-metabolizm__accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.glaza-metabolizm__accordion-name {
    font-size: 16px;
    line-height: 20px;
    color: #343A40;
    font-weight: 700;
}

.glaza-metabolizm__accordion-icon path {
    stroke: var(--activeText)
}

.glaza-metabolizm__accordion-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.glaza-metabolizm__accordion-content {
    overflow: hidden;
    transition: padding-top 0.3s ease;
}

.glaza-metabolizm__accordion.active .glaza-metabolizm__accordion-wrap {
    grid-template-rows: 1fr;
}

.glaza-metabolizm__accordion.active .glaza-metabolizm__accordion-content {
    padding-top: 17px;
}

.glaza-metabolizm__accordion.active .glaza-metabolizm__accordion-icon {
    transform: rotate(180deg);
}

.event__video-info .glaza-metabolizm__timecodes-wrap {
    margin-bottom: 20px;
}

.nevro .glaza-metabolizm__timecodes-wrap {
    --activeText: #004C97;
    --scroll: #004C97;
    --scrollBg: #004c971a;
    --bg: #009CDE1A;
    --svg: #004C97;
}

.cardio .glaza-metabolizm__timecodes-wrap {
    --activeText: #862041;
    --scroll: #761734;
    --scrollBg: #7617341a;
    --bg: #D500320D;
    --svg: #D50032;
}

.gastro .glaza-metabolizm__timecodes-wrap {
    --activeText: #006747;
    --scroll: #006747;
    --scrollBg: #0067471a;
    --bg: #0067470D;
    --svg: #006747;
}

.wh .glaza-metabolizm__timecodes-wrap {
    --activeText: #D787B5;
    --scroll: #D787B5;
    --scrollBg: #9f4fa41a;
    --bg: #D989BA1A;
    --svg: #D787B5;
}

.pulmo .glaza-metabolizm__timecodes-wrap {
    --activeText: #003057;
    --scroll: #003057;
    --scrollBg: #0030571a;
    --bg: #004C970D;
    --svg: #003057;
}

.diabet .glaza-metabolizm__timecodes-wrap {
    --activeText: #001489;
    --scroll: #001489;
    --scrollBg: #0014891a;
    --bg: #FFD1001A;
    --svg: #001489;
}

.farmatsevtam .glaza-metabolizm__timecodes-wrap {
    --activeText: #64CCC9;
    --scroll: #64ccc9;
    --scrollBg: #64ccc91a;
    --bg: #64CCC91A;
    --svg: #64CCC9;
}

.event__video-info .glaza-metabolizm__timecodes-wrap svg.glaza-metabolizm__accordion-icon path {
    fill: transparent;
}

.event__video-info svg.glaza-metabolizm__btn-play path {
    fill: var(--svg);
}




@media (min-width: 768px) {
    .glaza-metabolizm {
        padding: 40px 0;
    }

    .glaza-metabolizm__wrap {
        max-width: 1280px;
        margin: 0 auto;
    }

    .glaza-metabolizm__title {
        font-size: 35px;
        line-height: 42px;
        margin-bottom: 32px;
    }

    .glaza-metabolizm__text {
        display: block;
        font-size: 20px;
        line-height: 25px;
        color: #343A40;
        margin-bottom: 32px;
    }

    .glaza-metabolizm__timecodes-wrap {
        gap: 24px;
    }

    /* .glaza-metabolizm__video-wrap {
        aspect-ratio: 728 / 394;
    } */

    .glaza-metabolizm__timecodes {
        padding: 25px;
    }

    .glaza-metabolizm__timecodes-title {
        margin-bottom: 20px;
    }

    .glaza-metabolizm__scroll-wrap {
        max-height: 282px;
    }

    .timecode {
        gap: 6px;
    }
}

@media (min-width: 1280px) {
    .glaza-metabolizm {
        padding: 40px 0 80px;
    }

    .glaza-metabolizm__text {
        font-size: 24px;
        line-height: 28px;
    }

    .glaza-metabolizm__timecodes-wrap {
        flex-direction: row;
    }

    .glaza-metabolizm__scroll-wrap {
        max-height: 295px;
    }

    .glaza-metabolizm__video-wrap {
        width: 60.75%;
        /* aspect-ratio: 738 / 394; */
    }

    .glaza-metabolizm__video-wrap.full {
        width: 100%;
        /* height: 522px; */
        min-height: 522px;
        height: auto;
    }

    .glaza-metabolizm__timecodes {
        width: 39.25%;
    }

    .glaza-metabolizm__timecodes-title {
        margin-bottom: 24px;
    }

    .event__video-info .glaza-metabolizm__timecodes-wrap {
        margin-bottom: 32px;
    }
}

.dermatology .glaza-metabolizm__btn-play rect {
    fill: rgba(255, 105, 0, 0.2);
}

.event__video-info.dermatology svg.glaza-metabolizm__btn-play path {
    fill: rgba(255, 105, 0, 1);
}

.vestibulyarnoe_golovokruzhenie .glaza-metabolizm__btn-play rect {
    fill: #009CDE33;
}

.vestibulyarnoe_golovokruzhenie .glaza-metabolizm__btn-play path {
    fill: #004C97;
}

.vestibulyarnoe_golovokruzhenie .glaza-metabolizm__timecodes {
    background: #009CDE1A;
}

.vestibulyarnoe_golovokruzhenie .glaza-metabolizm .os-scrollbar-track,
.otorinolaringologiya .glaza-metabolizm .os-scrollbar-track {
    background: #009CDE33;
}

.vestibulyarnoe_golovokruzhenie .glaza-metabolizm .os-scrollbar-handle,
.otorinolaringologiya .glaza-metabolizm .os-scrollbar-handle {
    background: #004C97;
}