.btn.bg-outline .reply-content {
    flex: 1;
    min-width: 0 !important;
}

.reply-text {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}
.slider_content .grid-box .nav.prev{
    border-radius: 0px 6px 6px 0;
} 
.slider_content .grid-box .nav.next{
    border-radius: 6px 0 0 6px;
} 

.slider_content .grid-box .nav {
}
/*.slide_hero .grid-box.half-space .items .item:first-child{
margin: 0 !important;
}*/
.card-under-hero.active {
    outline: 2px solid #ff6600;
    border-radius: 6px;
    transition: outline 0.3s ease;
}

#modal-description {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.card-header {
    padding: 0;
}

/*****************
 * Color schemas *
 *****************/
:root {

    --td-primary: #F8CA12;
    --td-primary-dark: #F28705;
    --td-primary-light: #F2D43D;

    --td-secondary: #2122f2;
    --td-secondary-dark: #0b0aa6;
    /*#17358C;*/
    --td-secondary-light: #049DBF;

    --td-tertiary: #D1334C;
    --td-tertiary-dark: #C5112E;
    --td-tertiary-light: #E56176;

    --td-success: #44D991;
    --td-success-dark: #24B26D;
    --td-success-light: #77E3AF;

    --td-warning: #FFE601;
    --td-warning-dark: #CCB800;
    --td-warning-light: #FFED4D;

    --td-danger: #E92222;
    --td-danger-dark: #B01212;
    --td-danger-light: #ED4F4F;

    --td-light: #F1EAE4;
    --td-light-dark: #69625D;
    --td-light-extra-white: #ffffff;
    --td-light-extra-white-transparent: rgba(255, 255, 255, 0.5);

    --td-dark: #091023;
    --td-dark-extra-dark: #050914;
    --td-dark-light: #13234E;

    --blue-soft-2: rgba(33, 34, 242, 0.02);
    --blue-soft-10: rgba(33, 34, 242, 0.10);
    --blue-soft-15: rgba(33, 34, 242, 0.15);

}

body {

    /* =====================
       BASE
       ===================== */
    --body-background: var(--td-light);
    --font-base-color: var(--td-dark-light);

    /* =====================
       SECTION
       ===================== */
    --section-title: var(--td-dark-light);
    --section-backgrounded-title: var(--td-primary-dark);
    --section-hero-title: var(--td-dark-light); /* FIX: not white in light */

    /* =====================
       RATING
       ===================== */
    --top-rated-color: var(--td-secondary-dark);

    /* =====================
       BUTTON (LIGHT)
       ===================== */
    --button-bg: var(--td-secondary);              /* primary blue */
    --button-color: var(--td-light-extra-white);  /* white text */
    --button-outline-border: var(--td-secondary);
    --button-icon-color: var(--td-light-extra-white);

    /* =====================
       ICON
       ===================== */
    --icon-background: var(--td-dark-light); /* FIX: icons not white everywhere */
     --icon-color: var(--td-secondary);

    /* =====================
       CARD
       ===================== */
    --card-color: var(--td-dark-light);
    --card-title-color-hover: var(--td-primary);

    /* =====================
       NAV / OFFSCREEN
       ===================== */
    --navbox-bg: var(--td-secondary);      /* solid blue */
    --offscreen-bg: var(--td-light);   

    /* =====================
       INPUT
       ===================== */
    --input-background: var(--td-light-extra-white);
    --input-border: var(--td-light-dark);
    --input-border-focus: var(--td-secondary);
    --input-color: var(--td-dark-light);
    --input-placeholder: var(--td-light-dark);

    /* =====================
       SEARCH
       ===================== */
    --search-bar-bg: var(--td-light-extra-white);
    --search-button-bg: var(--td-secondary);
    --input-placeholder-light: var(--td-light-dark);
    --section-hero-search-bg: var(--blue-soft-10); /* FIX: soft, not dark */

    /* =====================
       FILTER
       ===================== */
    --filter-bg: var(--td-secondary);
    --filter-hover-bg: var(--td-secondary-dark);

    /* =====================
       PLAYER / PROGRESS
       ===================== */
    --player-bar-bg: var(--td-secondary);
    --content-rating-box: var(--blue-soft-10);
    --content-rating-star: var(--td-primary);

    /* =====================
       LINK
       ===================== */
    --link-color: var(--td-secondary-dark);

    /* =====================
       MODAL
       ===================== */
    --modal-bg: var(--td-light);

    
       /* Bottom fade (soft white → light) */
    --modal-grf: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(241, 234, 228, 0.75) 55%,
        var(--td-light) 100%
    );

    /* Side fade (transparent → soft white) */
    --modal-grs: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0.00) 40%,
        rgba(241, 234, 228, 0.95) 85%
    );

    /* Under-headline / accent */
    --modal-uh: var(--td-secondary);


    /* =====================
       BADGE (LIGHT)
       ===================== */
    --modal-badge-bg: var(--blue-soft-10); /* soft blue */
    --modal-badge: var(--td-secondary-dark);

    /* =====================
       PROGRESS / OVERLAY
       ===================== */
    --progress-box-bg: rgba(33, 34, 242, 0.08); /* soft blue overlay */

    --top-rated-big: var(--td-primary-dark);

    background-color: var(--body-background);
    color: var(--font-base-color);

    --section-hero-h3-color: var(var(--section-title));

    .icon.icon-close:before,
    .icon.icon-user-plus:before{
background-color: #fff;
    }
}


   





body.dark {
    --body-background: var(--td-dark-extra-dark);
    --font-base-color: var(--td-light-extra-white);
    --section-title: var(--td-primary);
    --section-backgrounded-title: var(--td-primary);
    --section-hero-title: var(--td-primary);
    --top-rated-color: var(--td-secondary);
    --top-rated-big: var(--td-primary-dark);
    --button-bg: var(--td-light-extra-white);
    --button-color: var(--td-dark-light);
    --button-outline-border: var(--td-light-extra-white-transparent);
    --card-color: var(--td-light-extra-white);
    --card-title-color-hover: var(--td-primary);
    --card11-title-color-hover: var(--td-secondary);
    --card-plan-border: var(--td-light-extra-white);
    --card-mini-title: var(--td-secondary-dark);
    --card-mini-title-bg: var(--td-light-extra-white);
    --card-mini-overlay: var(--td-secondary-dark);
    --card-time: var(--td-secondary-dark);
    --card-role: var(--td-light-dark);
    --star-bg: var(--td-light-extra-white);
    --star-color: var(--td-light-extra-white);
    --star-bg-hover: var(--td-primary);
    --star-color-hover: var(--td-primary);
    --link-color: var(--td-light-extra-white);
    --footer-border: var(--td-dark-light);
    --input-background: var(--td-dark-light);
    --input-border: var(--td-light-dark);
    --input-border-focus: var(--td-light-extra-white);
    --input-color: var(--td-light-extra-white);
    --input-placeholder: var(--td-light-extra-white);
    --icon-background: var(--td-light-extra-white);
    --navbox-bg: var(--td-secondary-dark);
    --offscreen-bg: var(--td-secondary-dark);
    --filter-bg: #381fd9;
    --filter-hover-bg: #385cd9;
    --volume-bar-bg: var(--td-light-extra-white);
    --section-hero-search-bg: var(--td-secondary-dark);
    --search-bar-bg: var(--td-light-extra-white);
    --input-placeholder-light: var(--td-dark-light);
    --search-button-bg: var(--td-dark-light);
    --message-info-bg: var(--td-success);
    --message-info-color: var(--td-light-extra-white);
    --message-warning-bg: var(--td-warning);
    --message-warning-color: var(--td-light-extra-white);
    --message-error-bg: var(--td-danger);
    --message-error-color: var(--td-light-extra-white);
    --comment-input-border: var(--td-light-extra-white);
    --content-rating-box: var(--td-dark-light);
    --content-rating-star: var(--td-primary);
    --search-episodes-bg: var(--td-light-extra-white);
    --episodes-title: var(--td-primary);
    --menu-title: var(--td-primary);
    --menu-button-hover: var(--td-secondary);
    --select-background: var(--td-light-dark);
    --modal-bg: var(--td-dark-extra-dark);
    --modal-grf: linear-gradient(180deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.76) 54.77%, #050914 100%);
    --modal-grs: linear-gradient(270deg, rgba(8, 18, 34, 0.00) 39.44%, rgba(8, 18, 34, 0.95) 83.25%);
    --modal-uh: var(--td-primary);
    --modal-badge-bg: var(--td-light-dark);
    --modal-badge: var(--td-light-extra-white);
    --progress-box-bg: rgba(09, 16, 35, 0.8);

    --icon-color: var(--td-light-extra-white);
    --section-hero-h3-color: #F8CA12;

    background-color: var(--body-background);
    color: var(--font-base-color);

    option {color: var(--td-dark);}

     


        button .icon:before {
    background-color: var(--button-icon-color);}
        .button.button-outline{
            color: #fff !important;
        }
        .icon.icon-close:before,
        .icon.icon-login:before,
        .icon.icon-play:before,
        .icon.icon-user-plus:before{
            background-color: #000;
        }
}
.icon-svg {
    color: var(--icon-color);
}
.episodes_title {
    color: var(--episodes-title);
    margin-bottom: 33px;
}

section>h2,
section>h3,
section>h4 {
    color: var(--section-title);
}

.offscreen {
    background-color: var(--offscreen-bg);
}

.card_1_1,
.card_16_9 {
    color: var(--card-color);
}

.volume-level>span {
    background-color: var(--volume-bar-bg);
}

.card_16_9:focus .card-title,
.card_16_9:hover .card-title {
    color: var(--card-title-color-hover);
}

.card_1_1:focus .card-title,
.card_1_1:hover .card-title {
    color: var(--card11-title-color-hover);
}

.card_1_1 .star:before,
.card_16_9 .star:before {
    background-color: var(--star-bg);
}

.card-header .duration {
    background-color: var(--body-background);
    color: var(--input-border);
}

.card-header .progress {
    background-color: var(--section-backgrounded-title);
}

.card-header .progress_box {
    background-color: var(--progress-box-bg);
}

.card_1_1:hover .duration,
.card_1_1:focus .duration,
.card_16_9:hover .duration,
.card_16_9:focus .duration {
    color: var(--font-base-color);
}

.card_1_1:hover .star,
.card_1_1:focus .star,
.card_16_9:hover .star,
.card_16_9:focus .star {
    color: var(--star-color-hover);
}

.card_1_1:hover .star:before,
.card_1_1:focus .star:before,
.card_16_9:hover .star:before,
.card_16_9:focus .star:before {
    background-color: var(--star-bg-hover);
}

.card-time {
    color: var(--card-time);
}

.card_mini h6 {
    color: var(--card-mini-title);
    background-color: var(--card-mini-title-bg);
}

.card_mini:after {
    background: var(--card-mini-overlay);
}

.top_rated {
    color: var(--top-rated-big);
}

section.backgrounded h4 {
    color: var(--section-backgrounded-title);
}

section.hero_content h6,
section.hero h6 {
    color: var(--section-hero-title);
}

.under-hero.with_episodes h6 {
    color: var(--section-hero-title);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
select {
    background-color: var(--button-bg);
    color: var(--button-color);
    will-change: background;
    transition: background 0.3s ease;
    border: 0;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,
select:hover {
    background-color: var(--button-outline-border);
}

button.search_button:hover {
    background-color: #0b0aa6;
}

select {
    border: 1px solid var(--input-border);
}

select:focus {
    border-color: var(--input-border-focus);
}

button.button-outline,
input[type="button"].button-outline,
input[type="submit"].button-outline,
input[type="reset"].button-outline,
.button.button-outline,
select.select-outline {
    background-color: transparent;
    color: var(--button-bg);
    border: 1px solid var(--button-outline-border);
    will-change: border-color;
    transition: border-color 0.3s ease;
}

button.button-outline:hover,
input[type="button"].button-outline:hover,
input[type="submit"].button-outline:hover,
input[type="reset"].button-outline:hover,
.button.button-outline:hover,
select.select-outline:hover {
    border-color: var(--button-bg);
    /*color:#000*/
}


input[type="button"] .icon:before,
input[type="submit"] .icon:before,
input[type="reset"] .icon:before,
 {
    background-color: var(--button-color);
}
button .icon:before {
    background-color: var(--button-bg);
}

input[type="button"].button-outline .icon:before,
input[type="submit"].button-outline .icon:before,
input[type="reset"].button-outline .icon:before,
.button.button-outline .icon:before,
.switch_mode .icon:before,
.user_menu_item .icon:before
 {
    background-color: var(--button-bg);
}

button[disabled],
button:disabled,
.button[disabled],
.button:disabled,
input[disabled],
input:disabled,
.button-outline[disabled],
.button-outline:disabled {
    opacity: 0.5 !important;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: underline;
}
.slider_content h3 a{
    color: var(--section-hero-h3-color);
}
footer {
    border-top-color: var(--footer-border);
    background-color: #050914;
}

.icon:before {
    background-color: #fff;
}

.category_label {
    background-color: var(--button-bg);
    color: var(--button-color);
    border-color: var(--button-bg);
}

.navbox {
    background: var(--navbox-bg);
    color: var(--td-light-extra-white);
}
.offscreen .navbox,
.offscreen .navbox li {
    background: transparent;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="phone"] {
    border-color: var(--input-border);
    color: var(--input-color);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="phone"]:focus {
    border-color: var(--input-border-focus);
}

::placeholder {
    color: var(--input-placeholder);
}

.input_group {
    border-color: var(--input-border);
}

.input_group.focus {
    border-color: var(--input-border-focus);
}

.input_group .icon:before {
    background-color: var(--input-border);
}

.input_group.focus .icon:before {
    background-color: var(--input-border-focus);
}

.card_plan {
    border-color: var(--card-plan-border);
}

.card_plan h4 {
    color: var(--font-base-color);
}

.filter {
    background-color: var(--filter-bg);
    will-change: background;
    transition: background 0.3s ease; color: #fff;
}

.filter.active,
.filter:hover {
    background-color: var(--filter-hover-bg);
}

input[type="radio"]+label:before,
input[type="checkbox"]+label:before {
    border-color: var(--input-border-focus);
}

input[type="radio"]+label:after,
input[type="checkbox"]+label:after {
    background-color: var(--section-backgrounded-title);
}

.player_bar {
    background-color: var(--font-base-color);
}

.player_progress {
    background-color: var(--section-backgrounded-title);
}

.info_video h5 {
    color: var(--section-backgrounded-title);
}

section.hero_search {
    background-color: var(--section-hero-search-bg);
}

.search_bar {
    background-color: var(--search-bar-bg);
}

.search_bar ::placeholder {
    color: var(--input-placeholder-light);
}

.search_bar input[type="text"] {
    color: var(--input-placeholder-light);
}

.search_button {
    background-color: var(--search-button-bg);
}

.search_button .icon::before {
    /*background-color: var(--button-bg);*/
    background-color: var(--button-icon-color);
}

.message.info {
    background-color: var(--message-info-bg);
    color: var(--message-info-color);
}

.message.warning {
    background-color: var(--message-warning-bg);
    color: var(--message-warning-color);
}

.message.error {
    background-color: var(--message-error-bg);
    color: var(--message-error-color);
}
/*******************************DARK*******************************/
body.dark .login_img_box:after, body .login_img_box:after {
    background: linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%);
}

body.dark header {
    background: linear-gradient(180deg, #0B1323 0%, rgba(11, 19, 35, 0.00) 100%);
}

/*
body.dark .card_1_1 .star:before,
body.dark .card_16_9 .star:before{
    background-color:#fff;
}
*/

body.dark section.backgrounded:before {
    background: linear-gradient(180deg, #0B1323 0%, rgba(11, 19, 35, 0.00) 100%);
}

body.dark section.hero_content:before,
body.dark section.hero:before
{
    /*background: linear-gradient(270deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.95) 72.35%);*/
    background-image: var(--modal-grs);
}

body.dark section.hero_content:after,
body.dark section.hero:after {
    background-image: var(--modal-grf);
}

body.dark section.hero_category:before {
    background: linear-gradient(180deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.76) 54.77%, #050914 100%);
}

body.dark .hero_content_watching_background:before {
    background: radial-gradient(47.69% 47.69% at 50.00% 52.31%, rgba(6, 11, 19, 0.00) 85.18%, #050914 100%);
}

body.dark .player_controller {
    background: rgba(6, 11, 19, 0.90);
}
/*******************************LIGHT*******************************/
body .login_img_box:after {
    background: linear-gradient(
        180deg,
        rgba(61, 162, 255, 0.25) 1.04%,
        rgba(255, 231, 16, 0.25) 48.96%,
        rgba(229, 72, 167, 0.25) 100%
    );
}

header {
    background: linear-gradient(180deg, #0B1323 0%, rgba(11, 19, 35, 0.00) 100%);
    
}
body section.backgrounded:before {
    background: linear-gradient(
        180deg,
        rgba(33, 34, 242, 0.06) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}
body section.hero_content:before,
body section.hero:before {
    /*background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 72%
    );*/
    background: linear-gradient(270deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.95) 72.35%);
}
body section.hero_content:after,
body section.hero:after {
    background: linear-gradient(
        180deg, 
        rgba(8, 18, 34, 0.00) 0%, 
        rgba(8, 18, 34, 0.76) 54.77%, 
        #050914 100%);
}
body section.hero_category:before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 100%
    );
}
body .hero_content_watching_background:before {
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.8) 100%
    );
}
body .player_controller {
    background: rgba(255, 255, 255, 0.92);
}














body.dark select {
    background-image: url(img/arrow-down-select-black.svg);
}

body.dark select.select-outline {
    background-image: url(img/arrow-down-select.svg);
}

body select {
    background-image: url(img/arrow-down-select.svg);
}

body select.select-outline {
    background-image: url(img/arrow-down-select-black.svg);
}

option {
    color: var(--td-light);
}

.auto_width {
    width: 100%;
}

.no-margin {
    margin-bottom: 0;
}

select.select-outline.select-with-background {
    background-color: #283348;
    border-color: #283348;
}

select.select-outline.select-with-background:focus {
    border-color: #283348;
}

@media (max-width:1024px) {

    body.dark section.hero_content:before,
    body.dark section.hero:before,
    body section.hero_content:before,
    body section.hero:before {
        background: linear-gradient(225deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.95) 75.51%, #081222 97.29%);
    }

    body.dark .hero_mobile::after {
        background: linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%);
    }
}

/*****************
 * Base settings *
 *****************/
body,
html {
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    text-decoration: none;
}

body.modal_active,
body.menuAsideOpened,
body.userAsideOpened {
    /*overflow-y:hidden;*/
}

input[type="checkbox"],
input[type="radio"] {
    position: fixed;
    top: -200vh;
}

input[type="radio"]+label,
input[type="checkbox"]+label {
    position: relative;
    padding-left: 30px;
    padding-top: 3px;
    display: inline-block;
    min-height: 24px;
}

input[type="radio"]+label:before,
input[type="checkbox"]+label:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    cursor: pointer;
}

input[type="radio"]+label:before {
    border-radius: 20px;
}

input[type="radio"]+label:after,
input[type="checkbox"]+label:after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 3px;
    top: 3px;
    border-radius: 2px;
    transform-origin: center center;
    transform: scale(0);
    transition: transform 0.3s ease;
    will-change: transform;
    cursor: pointer;
}

input[type="radio"]+label:after {
    border-radius: 20px;
}

input[type="radio"]:checked+label:after,
input[type="checkbox"]:checked+label:after {
    transform: scale(1);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
select {
    border-radius: 40px;
    padding: 16px 24px;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: 0;
    white-space: nowrap;
}

.atv-block {
    display: block !important;
    width: 100%;
}

.atv-margin-big {
    margin: 30px 0;
}

.atv-margin {
    margin: 20px 0;
}

.atv-margin-small {
    margin: 10px 0;
}

button.icon_only,
input[type="button"].icon_only,
input[type="submit"].icon_only,
input[type="reset"].icon_only,
.button.icon_only {
    padding: 16px;
}

button.with_icon .icon,
input[type="button"].with_icon .icon,
input[type="submit"].with_icon .icon,
input[type="reset"].with_icon .icon,
.button.with_icon .icon {
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

button.with_icon_right .icon,
input[type="button"].with_icon_right .icon,
input[type="submit"].with_icon_right .icon,
input[type="reset"].with_icon_right .icon,
.button.with_icon_right .icon {
    margin-right: 0;
    margin-left: 12px;
}

button.icon_only .icon,
input[type="button"].icon_only .icon,
input[type="submit"].icon_only .icon,
input[type="reset"].icon_only .icon,
.button.icon_only .icon {
    margin-right: 0;
    margin-left: 0;
}

select {
    text-indent: 1px;
    text-overflow: '';
    background-position: right 18px center;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    padding-right: 50px !important;
    transition: border-color 0.3s ease;
    will-change: border-color;
}

select::-ms-expand {
    display: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    white-space: normal;
}

main {
    width: 76%;
    margin: 0 auto;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="phone"]:focus,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="phone"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 60px;
    padding: 10px 26px;
    background-color: transparent;
    outline: 0;
    transition: border-color 0.3s ease;
    will-change: border-color;
}

.form_group {
    margin-bottom: 80px;
}

.form_section h6,
.form_group h6 {
    margin-bottom: 8px;
}

.space_title h6 {
    margin-bottom: 40px;
}

.profile_pic {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 64px;
}

.pic_settings {
    margin-top: 0;
}

.pic_settings .atv_grid_row {
    align-items: center;
    justify-content: space-between;
}

.pic_settings .atv_grid_row .atv_grid_col_50:last-child {
    text-align: right;
}

.input_group {
    border-width: 1px;
    border-style: solid;
    border-radius: 60px;
    display: flex;
    align-items: center;
    transition: border-color 0.3s ease;
    will-change: border-color;
}

.input_group input[type="text"]:focus,
.input_group input[type="password"]:focus,
.input_group input[type="email"]:focus,
.input_group input[type="number"]:focus,
.input_group input[type="phone"]:focus,
.input_group input[type="text"],
.input_group input[type="password"],
.input_group input[type="email"],
.input_group input[type="number"],
.input_group input[type="phone"] {
    border: 0;
    border-radius: 0;
    border-top-left-radius: 60px !important;
    border-bottom-left-radius: 60px !important;
}

.input_group .icon {
    width: 24px;
    height: 24px;
    margin: 0 26px;
}

.login-form {
    max-width: 80%;
    margin-top: auto;
    margin-bottom: auto;
}

.login-form.extended {
    max-width: 100%;
}

.login>.atv_grid {
    margin: 0
}

.login .login-box {
    min-height: calc(100vh - 88px);
    flex-direction: column;
    display: flex;
}

.login_img_box {
    height: 80%;
    width: 90%;
    margin: auto;
    border-radius: 120px;
    position: relative;
}

.login_img_box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    border-radius: 120px;
}

.login_img_box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 120px;
}

main.login {
    width: 88%;
    margin-left: 12%;
}

main.login h1 {
    margin-bottom: 20px;
}

main.login p {
    margin-bottom: 80px;
}

main.login>atv_grid {
    margin: auto 0;
}

.login-form>.atv_grid {
    margin-bottom: 70px;
}

.login-form>.atv_grid.mini {
    max-width: 80%;
}

.login_img_col {
    display: flex;
    flex-direction: column;
}

.signin_buttons_box {
    display: flex;
    gap: 20px;
}

.hero_mobile {
    display: none;
}

.scrollable-box {
    max-height: 100vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollable-box::-webkit-scrollbar {
    display: none;
}

.star-rating {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

@media (max-width:1024px) {
    .hero_mobile {
        display: block;
        padding: 200px 80px 80px 80px;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-radius: 0px 0px 40px 40px;
    }

    .hero_mobile::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        border-radius: 0px 0px 40px 40px;
    }

    .hero_mobile h1 {
        position: relative;
        z-index: 2;
    }

    .login .login-box {
        min-height: initial;
    }

    .login-form h1 {
        display: none;
    }

    .login_img_col {
        display: none;
    }

    main.login {
        width: 90%;
        margin: 0 auto 0 auto;
    }

    .login-form {
        max-width: 100%;
        margin-top: 50px;
        margin-bottom: 130px;
    }

    .login-form>.atv_grid.mini,
    .login-form>.atv_grid {
        max-width: none;
    }

    .signin_buttons_box {
        flex-direction: column;
    }

    main.login .mob_mini {
        width: 77%;
        margin: auto;
    }

    input[type="radio"]+label {
        min-height: 20px;
        padding-top: 1px;
    }

    input[type="radio"]+label:before {
        width: 20px;
        height: 20px;
    }

    input[type="radio"]+label:after {
        width: 14px;
        height: 14px;
    }

    .pic_settings .atv_grid_row .atv_grid_col_50,
    .pic_settings .atv_grid_row .atv_grid_col_50:last-child {
        text-align: center;
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    select {
        padding: 15px 22px;
        vertical-align: middle;
    }

    button.with_icon .icon,
    input[type="button"].with_icon .icon,
    input[type="submit"].with_icon .icon,
    input[type="reset"].with_icon .icon,
    .button.with_icon .icon {
        width: 20px;
        height: 20px;
    }

    .input_group input[type="text"]:focus,
    .input_group input[type="password"]:focus,
    .input_group input[type="email"]:focus,
    .input_group input[type="number"]:focus,
    .input_group input[type="phone"]:focus,
    .input_group input[type="text"],
    .input_group input[type="password"],
    .input_group input[type="email"],
    .input_group input[type="number"],
    .input_group input[type="phone"] {
        line-height: 30px;
    }

    .no_text_mob {
        padding: 15px !important;
    }

    .no_text_mob .icon {
        margin: 0 !important;
    }

    .scrollable-box {
        max-height: initial;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display: flex;
        gap: 24px;
    }

    .scrollable-box::-webkit-scrollbar {
        display: none;
    }

    .atv_aside_col .card_16_9,
    .atv_aside_col .card_16_9 .card-header,
    .atv_aside_col .card_16_9 .poster {
        width: 280px !important;
    }

    .no-mob {
        display: none;
    }

    .to-col-mob {
        display: flex;
        flex-direction: column;
    }
}

/**************
 * Typography *
 **************/
body,
p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.display01 {
    font-family: 'Montserrat', sans-serif;
    /*font-size: 320px;
    font-weight: 900;color: var(--section-title);*/
    font-size: 170px;
    font-weight: 700;
    position: relative;
    vertical-align: bottom;
    bottom: -50px;
    text-shadow: 5px 6px 9px #000000d6;
}

.display02 {
    font-family: 'Montserrat', sans-serif;
    font-size: 192px;
    font-weight: 900;
}

h1,
.h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 500;
}

h2,
.h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
}

h3,
.h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 500;
}

h4,
.h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 500;
}

h5,
.h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 500;
}

h6,
.h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    /*font-weight: 700;*/
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
select {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="phone"] {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
}

.little {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.card-time {
    font-family: Montserrat;
    font-size: 72px;
    font-weight: 700;
    line-height: 0.5em;
}

.comment_title {
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width:1024px) {

    body,
    p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 400;
    }

    .display01 {
        font-size: 192px;
        font-weight: 600;
    }

    .display02 {
        font-size: 80px;
        font-weight: 900;
    }

    h1,
    .h1 {
        font-size: 32px;
        font-weight: 500;
    }

    h2,
    .h2 {
        font-size: 32px;
        font-weight: 500;
    }

    h3,
    .h3 {
        font-size: 24px;
        font-weight: 900;
    }

    h4,
    .h4 {
        font-size: 20px;
        font-weight: 700;
    }

    h5,
    .h5 {
        font-size: 18px;
        font-weight: 500;
    }

    h6,
    .h6 {
        font-size: 16px;
        font-weight: 900;
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    select {
        font-size: 14px;
        font-weight: 500;
    }

    .little {
        font-size: 10px;
        font-weight: 500;
    }

    .category_tab .category_label {
        font-size: 14px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="phone"] {
        font-size: 14px;
        line-height: 30px;
    }

    .card-time {
        font-size: 48px;
    }

    .no_text_mob {
        font-size: 0 !important;
    }

    h1.menu_card_title {
        font-size: 48px;
        font-weight: 500;
    }
}

/*********************
 * Flex standard gap *
 *********************/
.gap10 {
    gap: 10px;
}

.gap20 {
    gap: 20px;
}

.gap30 {
    gap: 30px;
}

.gap40 {
    gap: 40px;
}

.gap50 {
    gap: 50px;
}

.gap60 {
    gap: 60px;
}

.gap70 {
    gap: 70px;
}

.gap80 {
    gap: 80px;
}

.gap90 {
    gap: 90px;
}

.gap100 {
    gap: 100px;
}

/**********
 * Header *
 **********/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 48px;
    z-index: 4;
}

.flex_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo_box {
    display: inline-block;
}

.logo_box img {
    display: block;
    height: 98px;
}

.flex_box_spaced {
    margin-left: calc(100vw / 12);
    margin-top: 50px;
    display: flex;
    gap: 20px;
    align-items: center;
}

/**********
 * Footer *
 **********/
footer {
    border-top-width: 1px;
    border-top-style: solid;
    padding: 10px 48px;
}

footer ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

footer ul li {
    display: inline-block;
    margin: 18px 33px 25px 33px;
}

footer ul li a {
    will-change: color;
    transition: color 0.3s ease;
    color: #fff;
}

footer ul li a:hover {
    color: var(--top-rated-color);
}

footer ul.social_list li {
    margin: 18px 9px 25px 9px;
}

footer ul.social_list li:first-child,
footer ul li:first-child {
    margin-left: 0;
}

footer ul.social_list li:last-child,
footer ul li:last-child {
    margin-right: 0;
}

footer ul.social_list li a .icon:before {
    will-change: background;
    transition: background 0.3s ease;
    background-color: #fff;
}

footer ul.social_list li a:hover .icon:before {
    background-color: var(--top-rated-color);
}

@media (max-width:1024px) {
    footer ul li {
        display: block;
        margin: 0px 0px 21px 0px;
    }

    footer ul li:first-child {
        margin-top: 66px;
    }

    footer ul.social_list li {
        display: inline-block;
    }

    footer .flex_box {
        align-items: flex-end;
    }
}

/********
 * Grid *
 ********/
.atv_container {
    width: 83.333%;
    margin-left: auto;
    margin-right: auto;
}

.atv_grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;
}

.atv_grid_row {
    display: flex;
    gap: 30px;
}

.atv_margin_auto {
    margin: auto;
}

.atv_no_margin_top {
    margin-top: 0;
}

.atv_margin_top {
    margin-top: 100px;
}

.valign_center {
    align-items: baseline;
}

.atv_grid_col_100 {
    width: 100%;
}

.atv_grid_col_90 {
    width: 90%;
}

.atv_grid_col_80 {
    width: 80%;
}

.atv_grid_col_70 {
    width: 70%;
}

.atv_grid_col_60 {
    width: 60%;
}

.atv_grid_col_50 {
    width: 50%;
}

.atv_grid_col_40 {
    width: 40%;
}

.atv_grid_col_30 {
    width: 30%;
}

.atv_grid_col_20 {
    width: 20%;
}

.atv_grid_col_10 {
    width: 10%;
}

.no-border {
    border-color: transparent !important;
}

@media (max-width:1024px) {
    .atv_grid_row {
        flex-wrap: wrap;
    }

    .atv_grid_col_90:not(.no-break),
    .atv_grid_col_80:not(.no-break),
    .atv_grid_col_70:not(.no-break),
    .atv_grid_col_60:not(.no-break),
    .atv_grid_col_50:not(.no-break),
    .atv_grid_col_40:not(.no-break),
    .atv_grid_col_30:not(.no-break),
    .atv_grid_col_20:not(.no-break),
    .atv_grid_col_10:not(.no-break) {
        width: 100%;
    }

    .atv_grid_row.no-break {
        flex-wrap: nowrap;
    }
}

/***************
 * Menu header *
 ***************/
.menuHeader {
    position: absolute;
    width: calc(100% - 96px);
    top: 20px;
    z-index: 10;
}

@media (max-width:1024px) {
    .menuHeader {
        width: calc(100% - 32px);
        top: 32px;
        left: 16px;
    }

    .menuHeader .button.button.icon_only {
        padding: 2px;
    }
}

/**************
 * Menu Panel *
 **************/
.atv_grid.menu_panel {
    height: 100vh;
    margin: 0;
    justify-content: center;
}

.menu_panel .display02 {
    color: var(--menu-title);
}

.menu_panel .atv_grid_row {
    height: 100%;
}

.menu_panel_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu_panel_right {
    max-height: 100vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 150px 0;
}

.menu_panel_right::-webkit-scrollbar {
    display: none;
}

.menu_panel_right .menu_item:nth-child(even) {
    text-align: right;
}

.mobile_menu {
    display: none;
}

@media (max-width:1500px) {
    .menu_panel .display02 {
        font-size: 142px;
    }
}

@media (max-width:1024px) {
    .menu_panel_left {
        display: none;
    }

    .mobile_menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .menu_panel_right {
        overflow-y: hidden;
        overflow-x: auto;
        height: initial;
        padding: 0 50px;
        display: flex;
    }
}

/*****************
 * Rating system *
 *****************/
.rate {
    float: left;
    height: 28px;
    padding: 0px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 28px;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0px;
    color: #ccc;
}

/*
.icon:before{
    content:"";
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;          
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    display:block;
    width:100%;
    height:100%;
    transition: background-color 0.4s ease;
    will-change: background-color;
}

.icon.icon-subtitles:before{
    -webkit-mask-image: url(img/icons/subtitles.svg);
            mask-image: url(img/icons/subtitles.svg);
}
*/
.rate:not(:checked)>label:before {
    /*content: '★ ';*/
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-image: url(img/icons/star-stroke.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.rate>input~label::after {
    display: none !important;
}

.rate>input~label::before {
    border: 0 !important;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.rate>input:checked~label::before {
    background-image: url(img/icons/star-fill.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.rate:not(:checked)>label:hover::before,
.rate:not(:checked)>label:hover~label::before {
    background-image: url(img/icons/star-fill.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.rate>input:checked+label:hover::before,
.rate>input:checked+label:hover~label::before,
.rate>input:checked~label:hover::before,
.rate>input:checked~label:hover~label::before,
.rate>label:hover~input:checked~label::before {
    background-image: url(img/icons/star-fill.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/********
 * Tabs *
 ********/
.tab_switcher {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    gap: 10px;
    position: relative;
    margin-bottom: 35px;
}

.tab_switcher li {
    position: relative;
    cursor: pointer;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--input-border);
}

.tab_switcher:after,
.tab_switcher li:after {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -8px;
    left: 0;
    background-color: var(--input-border);
}

.tab_switcher li.active {
    color: var(--section-title);
}

.tab_switcher li.active::after {
    background-color: var(--section-title);
    z-index: 200;
}

.tab_panel {
    display: none;
}

.tab_panel.active {
    display: block;
}

/**************
 * Menu Card  *
 **************/
.menu_card {
    display: inline-block;
    position: relative;
    width: 552px;
}

.menu_card_poster {
    text-align: left;
    display: block;
    width: 252px;
    position: relative;
    aspect-ratio: 252 / 444;
}

.menu_card_poster:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 70px;
    opacity: 0.5;
    background: var(--angel-tv-gradient, linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%));
}

.menu_card_poster .poster {
    height: 444px;
    aspect-ratio: 252 / 444;
    object-fit: cover;
    border-radius: 70px;
    display: block;
}

.menu_card_title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 230px;
    max-width: 300px;
    text-align: left;
}

@media (max-width:1024px) {
    .menu_card {
        width: 380px;
    }

    .menu_card_poster {
        width: 166px;
        aspect-ratio: 166 / 363;
        transform: rotate(-4.754deg);
    }

    .menu_card_poster:after {
        border-radius: 72px;
    }

    .menu_card_poster .poster {
        height: 363px;
        aspect-ratio: 166 / 363;
        border-radius: 72px;
    }

    .menu_card_title {
        left: 80px;
    }
}

/*************
 * User Menu *
 *************/
.user_menu_logged_in {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    margin-bottom: auto;
}

.user_menu_logged_in_button_box {
    margin-bottom: 100px;
    margin-top: 0;
}

.user_menu_item {
    display: inline-flex;
    align-items: center;
    padding: 16px;
    gap: 20px;
}

.user_menu_item .icon {
    width: 32px;
    height: 32px;
}

.box_user_menu_mob {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    padding: 0 16px;
}

.box_user_menu_mob .display02 {
    color: var(--menu-title);
    margin-bottom: 100px;
}

@media (max-width:1024px) {
    .user_menu_logged_in_button_box {
        margin-bottom: 47px;
    }

    .user_menu_logged_in_button_box a {
        display: block;
        text-align: center;
    }
}

/**********
 * Navbox *
 **********/
.navbox {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    padding: 12px 28px;
    gap: 28px;
    border-radius: 42px;
}

.navbox li {
    display: inline-block;
    cursor: pointer;
}

.navbox li .icon {
    width: 28px;
    height: 28px;
}

.navbox li.btnMob {
    display: none;
}

header .navbox li {
    will-change: background;
    transition: background 0.3s ease;
    border-radius: 32px;
    padding: 8px;
}

header .navbox li:hover {
    background-color: var(--menu-button-hover);
}

@media (max-width:1024px) {
    header .navbox li {
        padding: 0;
    }

    .navbox li.btnMob {
        display: inline-block;
    }
}

/*********
 * Modal *
 *********/
.modal {
    background-color: rgba(5, 9, 20, 0.70);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    z-index: -2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;

}

.modal.active {
    opacity: 1;
    z-index: 3000;
    pointer-events: auto;
}

.modal_box {
    width: 80%;
    max-width: 1328px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: var(--modal-bg);
    margin-top: 30px;
    margin-bottom: 0px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;
    position: relative;
}

.modal.active .modal_box {
    opacity: 1;
    pointer-events: auto;
}

.modal_contents {
    max-height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.modal_contents::-webkit-scrollbar {
    display: none;
}

.modal_hero {
    position: relative;
    padding: 30px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    margin-bottom: 50px;
}

.modal_hero_gradient_first,
.modal_hero_gradient_second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--modal-grf);
    background-size: 100% 100%;
    background-position: bottom left;
    background-repeat: no-repeat;
}


.modal_hero_data {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin-top: 150px;
}

.modal_close_box {
    position: absolute;
    z-index: 10;
    text-align: right;
    margin-bottom: 50px;
    width: 100%;
    padding: 30px;
}

.modal_hero_under_title {
    margin: 30px 0;
    padding: 0;
    display: flex;
    list-style: none;
    gap: 10px;
    color: var(--modal-uh);
    align-items: center;
}

.modal-margin {
    margin-bottom: 50px;
}

.modal-margin .items .item {
    margin-right: calc(1em + 1px);
}

.modal_badge {
    background: var(--modal-badge-bg);
    color: var(--modal-badge);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
}

.modal_hero_buttons_box {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.modal_section {
    padding: 30px;
    padding-bottom: 0px;
    display: flex;
    gap: 15px;
}

.modal_section h3 {
    color: var(--star-color-hover);
}

.modal .card_16_9,
.modal .card_16_9 .card-header,
.modal .card_16_9 .poster {
    width: 340px;
}

.modal .card_16_9 .card-header,
.modal .card_16_9 .poster {
    height: 205px;
}

@media (max-width:1024px) {
    .modal_box {
        width: 90%;
    }

    .modal_hero_under_title {
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .modal_hero_under_title li {
        white-space: nowrap;
    }

    .modal_hero_under_title::-webkit-scrollbar {
        display: none;
    }
}

/**********
 * Switch *
 **********/
.switch_mode {
    border: 1px solid var(--button-bg);
}

.switch_mode input[type="radio"] {
    position: fixed;
    top: -200vh;
}

.switch_mode input[type="radio"]+label {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    will-change: opacity;
    cursor: pointer;
}

.switch_mode input[type="radio"]:checked+label {
    opacity: 1;
}

.switch_mode input[type="radio"]+label.icon:after {
    display: none !important;
}

@media (max-width:1024px) {
    .navbox.switch_mode {
        gap: 10px;
        padding: 12px;
    }

    .switch_mode input[type="radio"]+label.icon:before {
        left: 5px;
        top: 4px;
    }
}

/*************
 * Offscreen *
 *************/
.offscreen {
    height: 100%;
    width: 100%;
    max-width: 720px;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0px 48px;
}

@media (max-width:1024px) {
    .offscreen {
        padding: 0px;
    }
}

/**************
 * Menu Aside *
 **************/
#menuAside,
#userAside {
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, visibility 0.01s ease 0.52s;
    will-change: opacity;
    z-index: 2999;
    opacity: 0;
    background-color: rgba(5, 9, 20, 0.70);
}

body.userAsideOpened #userAside,
body.menuAsideOpened #menuAside {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
    transition: opacity 0.5s ease 0.1s, visibility 0.01s;
}

body.userAsideOpened #userAsideOffscreen,
body.menuAsideOpened #menuAsideOffscreen {
    right: 0;
}

/**************
 * Slide grid *
 **************/
.grid-box {
    overflow-x: hidden;
    overflow-y: hidden;
}

.items {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;

    /*display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;*/
}

body.is_mobile .items {
    overflow-x: auto;
}

.grid-box .items * {
    user-select: none;
}

.item {
    /*display: inline-block;*/
    margin: 2em 1em;
    display: inline-flex;
    white-space: normal;
    word-break: break-word;
}

.items .item:first-child {
    margin-left: calc(100vw / 12);
}

.modal-margin .items .item:first-child {
    margin-left: 30px;
}

.no-margin .items .item:first-child {
    margin-left: 0;
}

@media (max-width:1024px) {
    .items .item:first-child {
        margin-left: 18px;
    }
}

/**************
 * Volume Bar *
 **************/
.volume-box {
    display: flex;
}

.volume-level {
    display: flex;
    justify-content: space-between;
    width: 44px;
    height: 24px;
    align-items: flex-end;
    margin: 0 16px;
}

.volume-level>span {
    width: 4px;
    opacity: 0.2;
}

.volume-level>span.volume-active {
    opacity: 0.8;
}

.volume-level>span:nth-child(1) {
    height: 5px;
}

.volume-level>span:nth-child(2) {
    height: 7px;
}

.volume-level>span:nth-child(3) {
    height: 11px;
}

.volume-level>span:nth-child(4) {
    height: 14px;
}

.volume-level>span:nth-child(5) {
    height: 19px;
}

.volume-level>span:nth-child(6) {
    height: 24px;
}

/***********
 * Filters *
 ***********/
.filter {
    border-radius: 50px;
    display: flex;
    padding: 16px 22px;
    gap: 12px;
    align-items: center;
}

.filter .icon {
    width: 24px;
    height: 24px;
}

/****************
 * Category tab *
 ****************/
.category_tab {
    display: inline-block;
    height: 220px;
    min-width: 300px;
    max-width: 500px;
    position: relative;
    margin-top: 20px;
    text-decoration: none;
    user-select: none !important;
}

.category_tab .category_label {
    margin: 165px 100px 15px 16px;
    padding: 6px 12px;
    border-radius: 20px;
    height: 40px;
    line-height: 28px;
    white-space: nowrap;
    display: inline-block;
    user-select: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.category_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none !important;
    -webkit-mask-image: url(img/clip.svg);
    mask-image: url(img/clip.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-clip: content-box;
    mask-clip: content-box;
    z-index: -1;
}

.category_mask::after,
.category_mask_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none !important;
}

.category_mask::after {
    content: "";
    opacity: 0.8;
}

.category_mask_bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 0.24s ease;
    will-change: transform;
}

.category_tab.yellow .category_mask::after {
    background-color: #FAD942;
}

.category_tab.green .category_mask::after {
    background-color: #42FAB8;
}

.category_tab.pink .category_mask::after {
    background-color: #FA4284;
}

.category_tab.blue .category_mask::after {
    background-color: #4249FA;
}

.category_tab.fluogreen .category_mask::after {
    background-color: #9EFA42;
}

.category_tab:focus .category_mask_bg,
.category_tab:hover .category_mask_bg {
    transform: scale(1.2);
}

.category_tab .poster {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 100px;
    height: 96px;
    border-radius: 50px;
    transition: width 0.24s ease;
    will-change: width;
    object-fit: cover;
    user-select: none !important;
}

.category_tab:focus .poster,
.category_tab:hover .poster {
    width: 147px;
}

@media (max-width:1024px) {
    .category_tab {
        height: 220px;
        min-width: 150px;
        max-width: 500px;
        margin-top: 20px;
    }

    .category_tab .category_label {
        margin: 170px 40px 10px 10px;
    }
}

/***************************************
 * Card 16:9 and 1:1 and mini and cast *
 ***************************************/
.card_cast,
.card_1_1,
.card_16_9 {
    display: inline-block;
    width: 447px;
    text-decoration: none;
}

.card-header {
    width: 447px;
    height: 251px;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.70);
}

.card-header .duration {
    position: absolute;
    right: 22px;
    bottom: 16px;
    border-radius: 8px;
    transition: color 0.3s ease;
    will-change: color;
    padding: 4px 8px;
}

.card-header .progress_box,
.card-header .progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 8px;
    width: 100%;
}

.card_cast {
    width: 180px;
}

.card_cast .card-header {
    height: 268px;
    width: 180px;
    border-radius: 25px;
}

.card_1_1 .card-header {
    height: 447px;
    border-radius: 25px;
}

.card_16_9.extended {
    display: flex;
    /*flex-direction: row;
    width:100%;*/
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 800px;
}

.data-card {
    max-width: calc(100% - 467px);
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 20px;
}

.data-card .description {
    margin-top: 20px;
}

.data-card .little {
    color: var(--card-role);
    margin-bottom: 5px;
}

.card_16_9 .card-header {
    border-radius: 20px;
    /*border: solid 2px white;*/
}

.card_cast .role {
    color: var(--card-role);
}

.card_cast .poster,
.card_1_1 .poster,
.card_16_9 .poster {
    width: 447px;
    height: 251px;
    object-fit: cover;
    transition: transform 0.4s ease;
    will-change: transform;
}

.card_cast .poster {
    height: 268px;
    width: 180px;
}

.card_1_1 .poster {
    height: 447px;
}

.card-title {
    transition: color 0.4s ease !important;
    will-change: color !important;
}

.card_cast:focus .poster,
.card_cast:hover .poster,
.card_1_1:focus .poster,
.card_1_1:hover .poster,
.card_16_9:focus .poster,
.card_16_9:hover .poster {
    transform: scale(1.1);
}

.card-grid {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 5px 0;
}

.card_cast .card-grid {
    flex-direction: column;
    justify-content: start;
}

.card-time {
    display: flex;
    justify-content: space-between;
}

.card_1_1 .star,
.card_16_9 .star {
    transition: color 0.4s ease;
    will-change: color;
}

.card_1_1 .star:before,
.card_16_9 .star:before {
    content: "";
    -webkit-mask-image: url(img/icons/star.svg);
    mask-image: url(img/icons/star.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    display: inline-block;
    vertical-align: bottom;
    width: 22px;
    height: 22px;
    transition: background-color 0.4s ease;
    will-change: background-color;
}

.card_mini {
    position: relative;
    width: 271px;
    height: 159px;
    overflow: hidden;
    display: block;
    border-radius: 20px;
}

.card_mini::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.card_mini:hover::after {
    opacity: 0.3;
}

.card_mini .poster {
    width: 271px;
    height: 159px;
    object-fit: cover;
    transform-origin: center center;
    transition: transform 0.3s ease;
    will-change: transform;
}

.card_mini:hover .poster {
    transform: scale(1.1);
}

.card_mini h6 {
    position: absolute;
    bottom: 37px;
    left: 31px;
    padding: 4px 12px;
    border-radius: 10px;
    z-index: 1;
}

.atv_aside_col .card_16_9 {
    margin-bottom: 32px;
}

.atv_aside_col .card_16_9,
.atv_aside_col .card_16_9 .card-header,
.atv_aside_col .card_16_9 .poster {
    width: 100%;
    height: auto;
}

.atv_aside_col .card_16_9 .poster {
    aspect-ratio: 16 / 9;
}

@media (max-width:1500px) {
    .card_16_9.extended {
        display: flex;
        flex-direction: column;
        width: 447px;
        gap: 0;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    .data-card {
        max-width: unset;
        width: 100%;
        margin-top: 10px;
    }

    .data-card .description {
        margin-top: 15px;
    }
}

@media (max-width:1024px) {
    .card_1_1 {
        width: 342px;
    }

    .card_16_9 {
        width: 280px;
    }

    .card_16_9 .card-header,
    .card_16_9 .poster {
        width: 280px;
        height: 157px;
    }

    .card_1_1 .card-header,
    .card_1_1 .poster {
        height: 342px;
        width: 342px;
    }

    .card-header .progress {
        height: 4px;
    }

    .card_16_9.extended {
        display: flex;
        flex-direction: column;
        width: 280px;
        gap: 0;
        margin-bottom: 30px;
    }

    .data-card {
        max-width: unset;
    }
}

/*************
 * Card Plan *
 *************/
.card_plan {
    border-radius: 40px;
    border-width: 1px;
    border-style: solid;
    padding: 20px 24px;
    display: flex;
    margin: 20px 0 10px 0;
    align-items: flex-end;
}

.card_plan_content {
    width: calc(100vw / 5);
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    row-gap: 50px;
}

.card_plan_prices {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.card_plan h4 {
    margin: 0;
}

.card_plan .poster {
    width: 50%;
    height: 235px;
    border-radius: 34px;
    object-fit: cover;
}

@media (max-width:1024px) {
    .card_plan {
        flex-direction: column;
        row-gap: 20px;
    }

    .card_plan_content,
    .card_plan .poster {
        width: 100%;
    }
}

/*************
 * Coming Up *
 *************/
.coming_up_next_layout {
    display: flex;
    flex-direction: column;
    width: 66.666%;
    margin: 0 auto 50px auto;
}

.coming_up_next_layout>div:nth-child(odd) {
    margin-left: auto;
}

@media (max-width:1024px) {
    .coming_up_next_layout {
        width: 90%;
        margin: 100px auto 0px auto;
    }

    .coming_up_next_layout>div {
        margin-bottom: 100px;
    }

    .coming_up_next_layout>div:nth-child(odd) {
        margin-left: unset;
    }

    .coming_up_next_layout>div:nth-child(even) {
        margin-left: auto;
    }
}

/*******************
 * Card under-hero *
 *******************/
.card-under-hero {
    display: inline-block;
    width: 340px;
    height: 205px;
    border-radius: 20px;
    overflow: hidden;
    /*border: solid 2px white;*/
}

.card-under-hero .poster {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.card-under-hero-title {
    padding-top: 5px;
}

@media (max-width:1024px) {
    .card-under-hero {
        width: 240px;
        height: 144px;
    }
}

/*************
 * Top rated *
 *************/
.top_rated {
    /*margin-right:30px;*/
}

.top_rated .poster {
    width: 260px;
    height: 370px;
    border-radius: 25px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.70);
    object-fit: cover;
    vertical-align: top;
    position: relative;
    margin-left: -70px;
    transform: scale(1);
    will-change: transform;
    transition: transform 0.4s ease;
    z-index: -1;
    /*border: solid 2px white;*/
}

.top_rated:hover .poster {
    transform: scale(1.1);
}

@media (max-width:1024px) {
    .top_rated .poster {
        width: 192px;
        height: 274px;
        margin-left: -30px;
    }
}

/*****************
 * Plan Settings *
 *****************/
.plan_settings {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan_settings li {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan_settings li:last-child {
    margin-bottom: 0;
}

.plan_settings li div:first-child {
    max-width: 70%;
}

.plan_settings li h6 {
    margin-bottom: 15px;
}

/***********
 * Section *
 ***********/
section {
    padding: 15px 0;
}

section h2,
section h3,
section h4 {
    margin-left: calc(100vw / 12);
    position: relative
}

section>h2,
section>h3,
section>h4 {
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

section>h2.actived,
section>h3.actived,
section>h4.actived {
    opacity: 1;
    transform: translateY(0px);
}

section.backgrounded {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

section.backgrounded:before {
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
}

section.hero_content,
section.hero_category,
section.hero {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 100px;
}

section.hero_content:before,
section.hero:before {
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
}

section.hero_content:before {
    z-index: 0;
}

section.hero_content:after,
section.hero:after {
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    background-size: 100% 100%;
    background-position: bottom;
    margin-top: 1px;
}

section.hero_content:after {
    z-index: 1;
}

section.hero_text_only {
    padding: 200px 0 150px 0;
}

section.hero_content h2,
section.hero h2 {
    margin: 20px 0 30px 0;
}

section.hero_content p,
section.hero p {
    margin-bottom: 100px;
}

section.hero_content .hero_contents {
    z-index: 2;
}

section.hero_content .hero_contents,
section.hero .hero_contents {
    position: relative;
    max-width: 640px;
    margin: 100px 48px;
    white-space: normal;
    word-break: break-word;
}

section.hero_content .hero_contents {
    margin: 100px 48px 170px 48px;
}

section.hero_content .hero_contents p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.hero_category {
    padding-top: 200px;
}

section.hero_category:before {
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
}

section.hero_category .hero_contents {
    position: relative;
}

section.hero_category .hero_contents h1 {
    margin-left: calc(100vw / 12);
    
}
.hero_contents h2, .hero_contents p {
    color: #fff;
}
section.under-hero {
    position: relative;
    /*margin: -137px 0 0 0;*/
    padding: 0;
    z-index: 3;

    margin-left: calc(100vw / 2.5) !important;
}

section.under-hero.with_episodes {
    margin: -187px 0 0 0;
}

/*.grid-box.half-space .items .item:first-child{
    margin-left:calc(100vw / 2.5) !important;
}*/
section.hero_content_watching {
    padding: 150px 0;
    position: relative;
}

.hero_content_watching_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.11;
}

.hero_content_watching_background:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero_search_content {
    max-width: 930px;
    margin-left: calc(100vw / 12);
    padding-top: 10%;
}

.hero_search_content h1 {
    margin-bottom: 50px; 
}

.hero_button_box {
    display: flex;
    gap: 16px;
}

@media (max-width:1024px) {
    .hero_search_content {
        padding-top: 40%;
        width: calc(100% - 32px);
        margin: 0 auto;
    }

    section.hero_search {
        border-radius: 0 0 40px 40px;
    }

    section h2,
    section h3,
    section h4 {
        max-width: none;
        margin-left: 84px;
    }

    section.under-hero {
        margin: -100px 0 0 0;
    }

    section.under-hero .items .item:first-child {
        margin-left: 84px;
    }

    section.hero_content p,
    section.hero p {
        display: none;
    }

    section.hero_content .hero_contents,
    section.hero .hero_contents {
        position: relative;
        max-width: initial;
        width: calc(100% - 32px);
        margin: 250px 16px 100px 16px;
    }

    /*section {
        margin-bottom: 25px;
    }*/
}

/**************
 * Slide Hero *
 **************/
.slide_hero_contents {
    height: 770px;
    position: relative;
}

.slide_hero_contents section.hero {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, background;
    transition: opacity 0.3s ease, background 0.5s ease;
}

.slide_hero_contents section.hero.active {
    opacity: 1;
    pointer-events: initial;
}

.slide_hero_contents section.hero h6,
.slide_hero_contents section.hero h2,
.slide_hero_contents section.hero p,
.slide_hero_contents section.hero .hero_button_box {
    filter: blur(20px);
    transform: translateY(50px);
    opacity: 0;
    will-change: transform blur opacity;
    transition: filter 0.5s ease, transform 0.5s ease;
}

.slide_hero_contents section.hero h6 {
    transition-delay: 0s, 0s;
}

.slide_hero_contents section.hero h2 {
    transition-delay: 0.1s, 0.1s, 0.1s;
}

.slide_hero_contents section.hero p {
    transition-delay: 0.2s, 0.2s, 0.2s;
}

.slide_hero_contents section.hero .hero_button_box {
    transition-delay: 0.3s, 0.3s, 0.3s;
}

.slide_hero_contents section.hero.active h6,
.slide_hero_contents section.hero.active h2,
.slide_hero_contents section.hero.active p,
.slide_hero_contents section.hero.active .hero_button_box {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
}

@media (min-width:1024px) {
    .slide_hero_contents section.hero {
        background-size: 120%;
    }

    .slide_hero_contents section.hero.active {
        background-size: 100%;
    }
}

@media (max-width:1024px) {
    .slide_hero_contents {
        height: 700px;
        position: relative;
    }
}

/**************
 * Search Bar *
 **************/
.search_bar {
    display: flex;
    border-radius: 60px;
    padding: 12px;
}

.search_bar input[type="text"] {
    border: 0;
    border-radius: 0;
    padding: 8px 24px;
}

.search_button {
    padding: 12px;
    display: block;
    border: 0;
}

.search_button .icon {
    width: 24px;
    height: 24px;
    display: block;
}

.search_reset.with_icon.icon_only {
    padding: 12px;
    display: block;
    border: 0;
}

.result-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
    margin-left: calc(100vw / 12);
    margin-right: calc(100vw / 12);
    margin-bottom: 50px;
}

.search_episodes {
    background-color: var(--search-episodes-bg) !important;
    color: var(--body-background) !important;
    margin-bottom: 28px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.5505 15.4468 11.0507 15.9999 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z" fill="%2369625D"/></svg>');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center left 16px;
    padding-left: 56px !important;
}

.search_episodes::placeholder {
    color: var(--input-border) !important;
}

@media (max-width:1024px) {
    .search_reset.with_icon.icon_only {
        padding: 4px;
    }

    .search_button {
        padding: 4px;
    }

    .search_bar input[type="text"] {
        padding: 0px 12px;
    }

    .result-box {
        gap: 50px;
        margin-left: 16px;
        margin-right: 16px;
        justify-content: center;
    }
}

/************
 * Messages *
 ************/
.message {
    display: inline-block;
    padding: 15px 20px;
    border-radius: 2px 16px 16px 16px;
}

/**********
 * Player *
 **********/
.player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.player_controller {
    position: absolute;
    bottom: 25px;
    width: 80%;
    left: 10%;
    border-radius: 70px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.player_bar {
    position: relative;
    min-width: 200px;
    width: 100%;
    height: 1px;
}

.player_progress {
    position: absolute;
    height: 3px;
    width: 0;
    top: -1px;
    left: 0;
}

.info_video {
    margin: 50px 0;
}

.info_video p {
    margin-bottom: 20px;
}

@media (max-width:1024px) {
    .episodes_title {
        margin-bottom: 0;
    }

    .player {
        width: 100vw;
    }

    .atv_container .player {
        margin-left: -8.33vw;
    }

    .player_controller {
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0%;
        border-radius: 0px;
        padding: 12px 24px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .player_bar {
        order: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .player_controller>button:nth-child(1) {
        order: 0;
        margin-right: auto
    }

    .player_controller>button:nth-child(2) {
        order: 2;
    }

    .player_controller>button:nth-child(4) {
        order: 3;
    }

    .volume-box {
        display: none;
    }
}

/************
 * Comments *
 ************/
.atv_comment_new {
    display: flex;
    margin-top: 35px;
}

.atv_avatar_box {
    width: 64px;
    margin-right: 24px;
}

.atv_avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 32px;
}

.atv_comment_new_box {
    width: 100%;
}

.atv_comment_input {
    border-bottom: 1px solid var(--comment-input-border);
    min-height: 37px;
    margin-bottom: 17px;
}

.atv_button_box {
    display: flex;
    align-items: center;
    gap: 17px;
}

.atv_button_box.to_right {
    justify-content: flex-end;
}

.atv_comment_input:focus {
    outline: 0;
}

.comment {
    margin: 17px 0;
}

/******************
 * Content rating *
 ******************/
.content_rating_box {
    padding: 18px 20px;
    background-color: var(--content-rating-box);
    border-radius: 24px;
    margin-bottom: 64px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.content-rating-col {
    align-items: center;
    display: flex;
}

.text-star {
    color: var(--content-rating-star);
    margin-right: 5px;
}

.content_rating_box .icon {
    width: 28px;
    height: 28px;
    margin-right: 5px;
}

.content_rating_box .icon:before {
    background-color: var(--content-rating-star);
}

/*********
 * Icons *
 *********/
.icon {
    display: inline-block;
    vertical-align: bottom;
    width: 64px;
    height: 64px;
}

.icon:before {
    content: "";
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: background-color 0.4s ease;
    will-change: background-color;
}

.icon.small {
    width: 32px;
    height: 32px;
}

.icon.micro {
    width: 24px;
    height: 24px;
}


.icon.icon-subtitles:before {
    -webkit-mask-image: url(img/icons/subtitles.svg);
    mask-image: url(img/icons/subtitles.svg);
}

.icon.icon-account-details:before {
    -webkit-mask-image: url(img/icons/account-details.svg);
    mask-image: url(img/icons/account-details.svg);
}

.icon.icon-account-group:before {
    -webkit-mask-image: url(img/icons/account-group.svg);
    mask-image: url(img/icons/account-group.svg);
}

.icon.icon-calendar-star-four-points:before {
    -webkit-mask-image: url(img/icons/calendar-star-four-points.svg);
    mask-image: url(img/icons/calendar-star-four-points.svg);
}

.icon.icon-check-bold:before {
    -webkit-mask-image: url(img/icons/check-bold.svg);
    mask-image: url(img/icons/check-bold.svg);
}

.icon.icon-chevron-down:before {
    -webkit-mask-image: url(img/icons/chevron-down.svg);
    mask-image: url(img/icons/chevron-down.svg);
}

.icon.icon-chevron-left:before {
    -webkit-mask-image: url(img/icons/chevron-left.svg);
    mask-image: url(img/icons/chevron-left.svg);
}

.icon.icon-chevron-right:before {
    -webkit-mask-image: url(img/icons/chevron-right.svg);
    mask-image: url(img/icons/chevron-right.svg);
}

.icon.icon-chevron-up:before {
    -webkit-mask-image: url(img/icons/chevron-up.svg);
    mask-image: url(img/icons/chevron-up.svg);
}

.icon.icon-clock:before {
    -webkit-mask-image: url(img/icons/clock.svg);
    mask-image: url(img/icons/clock.svg);
}

.icon.icon-close:before {
    -webkit-mask-image: url(img/icons/close.svg);
    mask-image: url(img/icons/close.svg);
}

.icon.icon-cookie:before {
    -webkit-mask-image: url(img/icons/cookie.svg);
    mask-image: url(img/icons/cookie.svg);
}

.icon.icon-credit-card-outline:before {
    -webkit-mask-image: url(img/icons/credit-card-outline.svg);
    mask-image: url(img/icons/credit-card-outline.svg);
}

.icon.icon-credit-card:before {
    -webkit-mask-image: url(img/icons/credit-card.svg);
    mask-image: url(img/icons/credit-card.svg);
}

.icon.icon-dark-theme:before {
    -webkit-mask-image: url(img/icons/dark-theme.svg);
    mask-image: url(img/icons/dark-theme.svg);
}

.icon.icon-eye-remove:before {
    -webkit-mask-image: url(img/icons/eye-remove.svg);
    mask-image: url(img/icons/eye-remove.svg);
}

.icon.icon-eye:before {
    -webkit-mask-image: url(img/icons/eye.svg);
    mask-image: url(img/icons/eye.svg);
}

.icon.icon-face-man:before {
    -webkit-mask-image: url(img/icons/face-man.svg);
    mask-image: url(img/icons/face-man.svg);
}

.icon.icon-face-woman:before {
    -webkit-mask-image: url(img/icons/face-woman.svg);
    mask-image: url(img/icons/face-woman.svg);
}

.icon.icon-facebook:before {
    -webkit-mask-image: url(img/icons/facebook.svg);
    mask-image: url(img/icons/facebook.svg);
}

.icon.icon-file-document-outline:before {
    -webkit-mask-image: url(img/icons/file-document-outline.svg);
    mask-image: url(img/icons/file-document-outline.svg);
}

.icon.icon-file-document:before {
    -webkit-mask-image: url(img/icons/file-document.svg);
    mask-image: url(img/icons/file-document.svg);
}

.icon.icon-fire:before {
    -webkit-mask-image: url(img/icons/fire.svg);
    mask-image: url(img/icons/fire.svg);
}

.icon.icon-folder-star:before {
    -webkit-mask-image: url(img/icons/folder-star.svg);
    mask-image: url(img/icons/folder-star.svg);
}

.icon.icon-fullscreen-exit:before {
    -webkit-mask-image: url(img/icons/fullscreen-exit.svg);
    mask-image: url(img/icons/fullscreen-exit.svg);
}

.icon.icon-fullscreen:before {
    -webkit-mask-image: url(img/icons/fullscreen.svg);
    mask-image: url(img/icons/fullscreen.svg);
}

.icon.icon-google:before {
    -webkit-mask-image: url(img/icons/google.svg);
    mask-image: url(img/icons/google.svg);
}

.icon.icon-information-slab-circle:before {
    -webkit-mask-image: url(img/icons/information-slab-circle.svg);
    mask-image: url(img/icons/information-slab-circle.svg);
}

.icon.icon-instagram:before {
    -webkit-mask-image: url(img/icons/instagram.svg);
    mask-image: url(img/icons/instagram.svg);
}

.icon.icon-list:before {
    -webkit-mask-image: url(img/icons/list.svg);
    mask-image: url(img/icons/list.svg);
}

.icon.icon-login-alternative:before {
    -webkit-mask-image: url(img/icons/login-alternative.svg);
    mask-image: url(img/icons/login-alternative.svg);
}

.icon.icon-login:before {
    -webkit-mask-image: url(img/icons/login.svg);
    mask-image: url(img/icons/login.svg);
}

.icon.icon-logout-alternative:before {
    -webkit-mask-image: url(img/icons/logout-alternative.svg);
    mask-image: url(img/icons/logout-alternative.svg);
}

.icon.icon-logout:before {
    -webkit-mask-image: url(img/icons/logout.svg);
    mask-image: url(img/icons/logout.svg);
}

.icon.icon-menu:before {
    -webkit-mask-image: url(img/icons/menu.svg);
    mask-image: url(img/icons/menu.svg);
}

.icon.icon-microphone:before {
    -webkit-mask-image: url(img/icons/microphone.svg);
    mask-image: url(img/icons/microphone.svg);
}

.icon.icon-moon:before {
    -webkit-mask-image: url(img/icons/moon.svg);
    mask-image: url(img/icons/moon.svg);
}

.icon.icon-movie-open:before {
    -webkit-mask-image: url(img/icons/movie-open.svg);
    mask-image: url(img/icons/movie-open.svg);
}

.icon.icon-music:before {
    -webkit-mask-image: url(img/icons/music.svg);
    mask-image: url(img/icons/music.svg);
}

.icon.icon-play-circle:before {
    -webkit-mask-image: url(img/icons/play-circle.svg);
    mask-image: url(img/icons/play-circle.svg);
}

.icon.icon-play:before {
    -webkit-mask-image: url(img/icons/play.svg);
    mask-image: url(img/icons/play.svg);
}

.icon.icon-playlist-check:before {
    -webkit-mask-image: url(img/icons/playlist-check.svg);
    mask-image: url(img/icons/playlist-check.svg);
}

.icon.icon-playlist-plus:before {
    -webkit-mask-image: url(img/icons/playlist-plus.svg);
    mask-image: url(img/icons/playlist-plus.svg);
}

.icon.icon-playlist-star:before {
    -webkit-mask-image: url(img/icons/playlist-star.svg);
    mask-image: url(img/icons/playlist-star.svg);
}

.icon.icon-plus:before {
    -webkit-mask-image: url(img/icons/plus.svg);
    mask-image: url(img/icons/plus.svg);
}

.icon.icon-podcast:before {
    -webkit-mask-image: url(img/icons/podcast.svg);
    mask-image: url(img/icons/podcast.svg);
}

.icon.icon-refresh:before {
    -webkit-mask-image: url(img/icons/refresh.svg);
    mask-image: url(img/icons/refresh.svg);
}

.icon.icon-search:before {
    -webkit-mask-image: url(img/icons/search.svg);
    mask-image: url(img/icons/search.svg);
}

.icon.icon-settings:before {
    -webkit-mask-image: url(img/icons/settings.svg);
    mask-image: url(img/icons/settings.svg);
}

.icon.icon-share:before {
    -webkit-mask-image: url(img/icons/share.svg);
    mask-image: url(img/icons/share.svg);
}

.icon.icon-skip-backward:before {
    -webkit-mask-image: url(img/icons/skip-backward.svg);
    mask-image: url(img/icons/skip-backward.svg);
}

.icon.icon-skip-forward:before {
    -webkit-mask-image: url(img/icons/skip-forward.svg);
    mask-image: url(img/icons/skip-forward.svg);
}

.icon.icon-star-off:before {
    -webkit-mask-image: url(img/icons/star-off.svg);
    mask-image: url(img/icons/star-off.svg);
}

.icon.icon-star:before {
    -webkit-mask-image: url(img/icons/star-fill.svg);
    mask-image: url(img/icons/star-fill.svg);
}

.icon.icon-sun:before {
    -webkit-mask-image: url(img/icons/sun.svg);
    mask-image: url(img/icons/sun.svg);
}

.icon.icon-teddy-bear:before {
    -webkit-mask-image: url(img/icons/teddy-bear.svg);
    mask-image: url(img/icons/teddy-bear.svg);
}

.icon.icon-trailer:before {
    -webkit-mask-image: url(img/icons/trailer.svg);
    mask-image: url(img/icons/trailer.svg);
}

.icon.icon-twitter:before {
    -webkit-mask-image: url(img/icons/twitter.svg);
    mask-image: url(img/icons/twitter.svg);
}

.icon.icon-user-plus:before {
    -webkit-mask-image: url(img/icons/user-plus.svg);
    mask-image: url(img/icons/user-plus.svg);
}

.icon.icon-user:before {
    -webkit-mask-image: url(img/icons/user.svg);
    mask-image: url(img/icons/user.svg);
}

.icon.icon-variety:before {
    -webkit-mask-image: url(img/icons/variety.svg);
    mask-image: url(img/icons/variety.svg);
}

.icon.icon-view-gallery:before {
    -webkit-mask-image: url(img/icons/view-gallery.svg);
    mask-image: url(img/icons/view-gallery.svg);
}

.icon.icon-volume-hight:before {
    -webkit-mask-image: url(img/icons/volume-hight.svg);
    mask-image: url(img/icons/volume-hight.svg);
}

.icon.icon-volume-low:before {
    -webkit-mask-image: url(img/icons/volume-low.svg);
    mask-image: url(img/icons/volume-low.svg);
}

.icon.icon-youtube:before {
    -webkit-mask-image: url(img/icons/youtube.svg);
    mask-image: url(img/icons/youtube.svg);
}


/****overide*****/