:root {
--font-size-general: 14px;
--line-height-general: 1.2;
--default-font: "Londrina Solid", sans-serif;
--bg-image-aside-signup: url("../images/bg-aside-signup.jpg");
--bg-image-aside-login: url("../images/bg-aside-login.jpg");
--bg-shape-gradient-next: linear-gradient(270deg, #fff 52.6%, rgba(255, 255, 255, 0));
--bg-shape-gradient-prev: linear-gradient(-270deg,#fff 52.6%,hsla(0,0%,100%,0));
--color-placeholder: #878787;
--color-main: #170f29;
--color-footer: #7e778e;
--color-slider-text: #7e778e;
--color-hamburger: #170f29;
--color-top-header: #7e778e;
--color-lang-drop: #170f29;
--color-lang-drop-hover: #fff;
--color-thumb-time: #170f29;
--color-thumb-item: #7e778e;
--color-thumb-name: #170f29;
--color-thumb-desc: #170f29;
--color-active: #fa4a1f;
--color-active-darkness: #e3431b;
--color-item: #7e778e;
--color-item--active: #fff;
--color-secondary: #7e778e;
--color-primary: #fff;
--color-button: #7e778e;
--color-button--switcher: #fff;
--color-button--user: #7E778E;
--color-button--swiper: #7E778E;
--color-pagination-item: #7e778e;
--color-pagination-item--active: #e5e1ed;
--color-splash: #170f29;
--color-btn-splash: #fff;
--color-seo: #170f29;
--color-seo-hold: #170f29;
--color-footer-list--title: #170f29;
--color-footer-list--active: #170f29;
--color-search: #170f29;
--color-searhch-action: #170f29;
--color-search-close: #170F29;
--color-autocomplete: #170f29;
--color-autocomplete--title: #000;
--color-filter-btn: #170f29;
--color-filter-btn--active: #fff;
--color-aside-title: #170f29;
--color-category-item: #170f29;
--color-category-item--secondary: #7e778e;
--color-btn-view-all: #7e778e;
--color-mobile-navigation: #170F29;
--color-list-item: #7e778e;
--color-name: #170f29;
--color-title-content-text: #170f29;
--color-content-text: #170f29;
--color-channel-page-panel: #7E778E;
--color-channel-page-rank: #7e778e;
--color-channel-page-rank-span: #170f29;
--color-channel-page-name: #170f29;
--color-more: #7e778e;
--color-post: #170f29;
--color-profile-name: #170f29;
--color-post-item: #7e778e;
--color-post-share: #170f29;
--color-green: #0eb472;
--color-stat: #7e778e;
--color-stat-strong: #130402;
--color-list-information--secondary: #000;
--color-btn-player-nav: #7e778e;
--color-btn-player-nav--hover: #fff;
--color-date-list: #170f29;
--color-btn-navigation: #170F29;
--color-btn-navigation--hover: #fff;
--color-ava-user: #7E778E;
--color-navigation-input: #7e778e;
--color-comment-notify-row: #000;
--color-comment-icon: #FF3464;
--color-comment-check-user: #00a0b4;
--color-comment-reply-icon: #87878c;
--color-comment-message: #7e778e;
--color-comment-name: #170f29;
--color-comment-tag: #7e778e;
--color-textarea-report: #170f29;
--color-title-report: #170f29;
--color-list-report: #170f29;
--color-general-filter-name:#170f29;
--color-placeholder-select: #7e778e;
--color-community-user-avatar: #7e778e;
--color-item-name: #170f29;
--color-text-popup: #7e778e;
--color-text-popup-link: #170f29;
--color-placeholder: #7e778e;
--color-popup-edit-tag: #170f29;
--color-popup-edit-span: #7e778e;
--color-account-detail: #130402;
--color-list-title: #170f29;
--color-list-desc: #170f29;
--color-panel-head: #170f29;
--color-title-verify: #170f29;
--color-file: #7E778E;
--color-verified-text: #170f29;
--color-accordion-text: #170f29;
--color-accordion-question-icon: #7E778E;
--color-accordion-question-icon--active: #170F29;
--check-access-title: #170f29;
--color-sub-popup: #7e778e;
--color-dropped-user: #170f29;
--color-icon-aside-navigation: #170F29;
--color-item-text: #170f29;
--color-item-count: #7e778e;
--color-content-box-price: #7e778e;
--color-content-box-price-title: #170f29;
--color-rules: #170f29;
--color-name-chat: #170f29;
--color-icon-chat: #170F29;
--color-message-chat: #170F29;
--color-button-message-chat: #170F29;
--color-date-chat: #7e778e;
--color-text-typing: #170f29;
--color-text-typing-secondary: #7e778e;
--color-search-button: #170F29;
--color-input: #170F29;
--color-gray: #7e778e;
--color-white: #fff;
--border-color-row: #dbdbdb;
--border-color-comment-textarea: #7e778e;
--border-accordion-icon: #170F29;
--shadow-comment-box: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
--shadow-search-autocomplete: 0 4px 18px 0 rgba(23, 15, 41, 0.2);
--border-color-copy-box: #7e778e;
--bg-selection: #345dff;
--bg-item: #e5e1ed;
--bg-item--active: #7e778e;
--bg-button--swiper: rgba(255, 255, 255, .8);
--bg-search: #fff;
--bg-border-search: #7e778e;
--bg-user-avatar-shape: #fff;
--bg-user-avatar-line: linear-gradient(135deg, #8c8c8c 0%, #e8e8e8 100%);
--bg-rgb-button--swiper: 23, 15, 41;
--bg-top-header: #e5e1ed;
--bg-lang-drop: #fff;
--bg-hamburger: #e5e1ed;
--bg-main: #fff;
--bg-separator: #7e778e;
--bg-button: #e5e1ed;
--bg-button--switcher: #170f29;
--bg-button--user: #E5E1ED;
--bg-rgb-active-progress-bar: 250, 74, 31;
--bg-mask: 255, 255, 255;
--bg-search-mobile: #fff;
--bg-search-autocomplete: #fff;
--bg-list-auto-complete--hover: #e5e1ed;
--bg-active: #fa4a1f;
--bg-active-black: #170f29;
--bg-pagination-item: #e5e1ed;
--bg-pagination-item--active: #7e778e;
--bg-splash: #e5e1ed;
--bg-aside-bar: #e5e1ed;
--bg-aside-bar-secondary: #fff;
--bg-filter-btn: #fff;
--bg-filter-btn-secondary: #e5e1ed;
--bg-filter-btn--active: #7e778e;
--bg-irs-line: #07060a;
--bg-category-item--hover: #fff;
--bg-category-item-secondary--hover: #e6e1ed;
--bg-btn-view-all: #fff;
--bg-mobile-navigation: rgba(229, 225, 237, .6);
--bg-header-menu: #fff;
--bg-group-item: rgba(23, 15, 41, 0.7);
--bg-channel-page-panel: #e5e1ed;
--bg-channel-page-tags: #e5e1ed;
--bg-aside: #fafafa;
--bg-aside-panel: #f9f6ff;
--bg-list-information: #fff;
--bg-tools-card-media: rgba(255, 255, 255, 0.6);
--bg-btn-player-nav: #e5e1ed;
--bg-btn-player-nav--hover: #170f29;
--bg-btn-navigation: #e5e1ed;
--bg-btn-navigation--hover: #170f29;
--bg-user-avatar: #e5e1ed;
--bg-navigation-share: #fafafa;
--bg-navigation-social-list: #e5e1ed;
--bg-navigation-copy: #170f29;
--bg-comment-box-textarea: #fff;
--bg-comment-notify-row: #f8f8f8;
--bg-comment-notify-error-row: #ffe8e8;
--bg-gradient-comment-message: linear-gradient(135deg, #f3f1f7 0%, #e5e1ed 100%);
--bg-textarea-report: #fff;
--bg-textarea-border-report: #7e778e;
--bg-radio-report: #fff;
--bg-radio-border-report: #7e778e;
--bg-radio-active-report: #170f29;
--bg-radio-active-dot-report: #fff;
--bg-general-filter-bg: #170f29;
--bg-community-user-avatar: #e5e1ed;
--bg-community-group-item: #1b122d;
--bg-input-check: #170f29;
--bg-account-detail: #f9f6ff;
--bg-file: #E5E1ED;
--bg-accordion: #e5e1ed;
--bg-radio-info-popup: #e5e1ed;
--bg-premium-popup: #fff;
--bg-dropped-user: #fff;
--bg-dropped-user--active: #e5e1ed;
--bg-icon-aside-navigation: #e5e1ed;
--bg-item-count: #e5e1ed;
--bg-box-price: #e5e1ed;
--bg-aside-chat: #fbfbfe;
--bg-chat: #fff;
--bg-chat-area: #fff;
--bg-border-chat: #d6d1e2;
--bg-selected-chat: #e5e1ed;
--bg-icon-chat: #E5E1ED;
--bg-date-chat: #e5e1ed;
--bg-search-chat: #fff;
--border-popup-premium: #7e778e;
--opacity-gradient-frame: .5;
--bg-popup-frame: 255, 255, 255;
--liner-gradient-frame: linear-gradient(135deg, #2f6ea4 0%, #fa4a1f 100%), rgba(255, 255, 255, 0.5);
--liner-gradient-chat-message: linear-gradient(135deg, #94919b 0%, #1e1e26 100%);
--liner-gradient-edit-avatar: linear-gradient(180deg, #3672A5 0%, #635855 100%);
--liner-gradient-aside-signup: linear-gradient(153deg, #fff3f0 0%, #fff 100%);
--box-shadow-navigarion-share: 0 23px 50px 0 rgba(0, 0, 0, 0.1), 0 91px 91px 0 rgba(0, 0, 0, 0.09), 0 205px 123px 0 rgba(0, 0, 0, 0.05), 0 364px 146px 0 rgba(0, 0, 0, 0.01), 0 569px 159px 0 rgba(0, 0, 0, 0);
--bg-rgb-popup: 229, 225, 237;
--bg-popup: #fff;
--bg-border-input: #7e778e;
--header-height: 150px;
}
html[lang^="ru"] .navigation .item {
font-weight: 700;
font-size: clamp(14px, 0.9vw, 18px);
}
@media screen and (max-width: 1460px) {
:root {
--header-height: 100px;
}
html[lang^="ru"] .navigation .item {
font-size: 14px;
}
}
[data-theme=dark] {
--bg-image-aside-signup: url("../images/bg-aside-signup-dark.jpg");
--bg-image-aside-login: url("../images/bg-aside-login-dark.jpg");
--color-hamburger: #DED4F3;
--color-main: #DED4F3;
--color-lang-drop: #DED4F3;
--color-lang-drop-hover: #170f29;
--color-button: #b1abbd;
--color-button--switcher: #e5e1ed;
--color-button--user: #fff;
--color-item: #b1abbd;
--color-item--active: #fff;
--color-thumb-name: #b3aebd;
--color-thumb-desc: #e5e1ed;
--color-pagination-item: #B1ABBD;
--color-pagination-item--active: #e5e1ed;
--color-splash: #fff;
--color-seo: #e5e1ed;
--color-seo-hold: #7e778e;
--color-footer-list--title: #e5e1ed;
--color-footer-list--active: #e3431b;
--color-search: #b1abbd;
--color-searhch-action: #B1ABBD;
--color-search-close: #B1ABBD;
--color-autocomplete: #b1abbd;
--color-autocomplete--title: #b1abbd;
--color-filter-btn: #b1abbd;
--color-aside-title: #e5e1ed;
--color-category-item: #e5e1ed;
--color-btn-view-all: #b1abbd;
--color-mobile-navigation: #fff;
--color-list-item: #7e778e;
--color-name: #e5e1ed;
--color-title-content-text: #fff;
--color-content-text: #7e778e;
--color-channel-page-panel: #b1abbd;
--color-channel-page-rank: #7e778e;
--color-channel-page-rank-span: #fff;
--color-channel-page-name: #e5e1ed;
--color-more: #7e778e;
--color-post: #7e778e;
--color-profile-name: #e5e1ed;
--color-post-item: #7e778e;
--color-post-share: #e5e1ed;
--color-stat: #7e778e;
--color-stat-strong: #e5e1ed;
--color-list-information--secondary: #e5e1ed;
--color-date-list: #b3aebd;
--color-btn-player-nav: #b1abbd;
--color-btn-player-nav--hover: #e5e1ed;
--color-btn-navigation: #B1ABBD;
--color-ava-user: #7E778E;
--color-navigation-input: #fff;
--color-comment-notify-row: #e5e1ed;
--color-comment-notify-error-row: #f18383;
--color-comment-icon: #FF3464;
--color-comment-check-user: #00a0b4;
--color-comment-reply-icon: #87878c;
--color-comment-message: #b1abbd;
--color-comment-name: #fff;
--color-textarea-report: #fff;
--color-title-report: #b1abbd;
--color-list-report: #b1abbd;
--color-general-filter-name:#b1abbd;
--color-placeholder-select: #b1abbd;
--color-community-user-avatar: #7e778e;
--color-item-name: #e5e1ed;
--color-text-popup-link: #fa4a1f;
--color-placeholder: #b1abbd;
--color-popup-edit-tag: #e5e1ed;
--color-popup-edit-span: #b1abbd;
--color-account-detail: #fff;
--color-list-title: #e5e1ed;
--color-list-desc: #b1abbd;
--color-panel-head: #e5e1ed;
--color-title-verify: #e5e1ed;
--color-file: #b1abbd;
--color-verified-text: #ded4f3;
--color-accordion-text: #e5e1ed;
--color-accordion-question-icon--active: #fff;
--check-access-title: #e5e1ed;
--color-sub-popup: #b1abbd;
--color-dropped-user: #b1abbd;
--color-icon-aside-navigation: #B1ABBD;
--color-item-text: #e5e1ed;
--color-content-box-price: #e5e1ed;
--color-content-box-price-title: #fff;
--color-rules: #b3aebd;
--color-name-chat: #b3aebd;
--color-icon-chat: #B0ABBC;
--color-message-chat: #7e778e;
--color-button-message-chat: #B1ABBD;
--color-date-chat: #b1abbd;
--color-text-typing: #b3aebd;
--color-text-typing-secondary: #b1abbd;
--color-search-button: #B1ABBD;
--color-input: #fff;
--border-color-row: #392d50;
--border-color-comment-textarea: #7e778e;
--border-accordion-icon: #7E778E;
--shadow-search-autocomplete: 0 0 0 2px #7e778e;
--shadow-comment-box: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
--border-color-copy-box: #7e778e;
--bg-shape-gradient-next: linear-gradient(270deg, #000 52.6%, rgba(7, 6, 10, 0));
--bg-shape-gradient-prev: linear-gradient(-270deg,#000 52.6%,rgba(7, 6, 10, 0));
--bg-main: #07060a;
--bg-mask: 7, 6, 10;
--bg-top-header: #0c0814;
--bg-hamburger: #392d50;
--bg-lang-drop: #392d50;
--bg-button--swiper: #170f29;
--bg-button: #392d50;
--bg-button--user: #fa4a1f;
--bg-item: #1a1628;
--bg-user-avatar-shape: #151515;
--bg-user-avatar-line: linear-gradient(135deg, rgba(140, 140, 140, .5) 0%, rgba(232, 232, 232, .5) 100%);
--bg-pagination-item: #392d50;
--bg-pagination-item--active: #7e778e;
--bg-splash: #33303e;
--bg-search: #170f29;
--bg-border-search: #7e778e;
--bg-search-mobile: #170f29;
--bg-search-autocomplete: #170f29;
--bg-list-auto-complete--hover: #392d50;
--bg-aside-bar: #0C0814;
--bg-aside-bar-secondary: #07060A;
--bg-filter-btn: #392d50;
--bg-filter-btn-secondary: #392d50;
--bg-irs-line: #7e778e;
--bg-category-item--hover: #392d50;
--bg-category-item-secondary--hover: #392d50;
--bg-btn-view-all: #392d50;
--bg-mobile-navigation: rgba(57, 45, 80, 0.6);
--bg-header-menu: #07060A;
--bg-group-item: #170f29;
--bg-channel-page-panel: #392d50;
--bg-channel-page-tags: #392d50;
--bg-aside: #030205;
--bg-aside-panel: #1b122d;
--bg-list-information: #0c0814;
--bg-tools-card-media: rgba(0, 0, 0, .6);
--bg-btn-player-nav: #392d50;
--bg-btn-player-nav--hover: #7e778e;
--bg-btn-navigation: #392d50;
--bg-btn-navigation--hover: #7e778e;
--bg-user-avatar: #392d50;
--bg-navigation-share: #1b122d;
--bg-navigation-social-list: #392d50;
--bg-navigation-copy: #392d50;
--bg-comment-box-textarea: #170f29;
--bg-comment-notify-row: #170f29;
--bg-comment-notify-error-row: #2c1a1a;
--bg-gradient-comment-message: linear-gradient(84deg, #272626 0%, #1e1e26 100%);
--bg-textarea-report: #170f29;
--bg-radio-report: #030205;
--bg-radio-border-report: #7e778e;
--bg-radio-active-report: #7e778e;
--bg-radio-active-dot-report: #fa4a1f;
--bg-general-filter-bg: #170f29;
--bg-community-user-avatar: #3c3155;
--bg-community-group-item: #170f29;
--bg-rgb-popup: 0, 0, 0;
--bg-popup: #07060a;
--bg-input-check: #fa4a1f;
--bg-account-detail: #33303e;
--bg-file: #392d50;
--bg-accordion: #392d50;
--bg-radio-info-popup: #07060a;
--bg-premium-popup: linear-gradient(133deg, #382c29 0%, #16131e 100%);
--bg-dropped-user: #07060a;
--bg-dropped-user--active: #392d50;
--bg-icon-aside-navigation: #392d50;
--bg-item-count: #392d50;
--bg-box-price: #33303e;
--bg-aside-chat: #0c0814;
--bg-chat: #0c0814;
--bg-chat-area: #030205;
--bg-border-chat: #232222;
--bg-selected-chat: #313030;
--bg-icon-chat: #392D50;
--bg-date-chat: #392d50;
--bg-search-chat: #170f29;
--border-popup-premium: #47444d;
--opacity-gradient-frame: 0;
--liner-gradient-chat-message: linear-gradient(84deg, #272626 0%, #1e1e26 100%);
--liner-gradient-frame: linear-gradient(135deg, #382C29 0%, #16131E 100%);
--liner-gradient-aside-signup: linear-gradient(133deg, #382c29 0%, #16131e 100%);
--box-shadow-navigarion-share: none;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
img, object, embed {
vertical-align: bottom;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
q:before, q:after {
content: "";
}
a * {
cursor: pointer;
}
input,
textarea {
outline: none;
}
html {
height: 100%;
min-width: 320px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font: 400 var(--font-size-general)/var(--line-height-general) var(--default-font);
height: 100%;
min-width: 320px;
position: relative;
color: var(--color-main);
background: var(--bg-main);
}
body.filter-menu [data-attr-toogle-slide],
body.filter-menu .footer {
padding-left: 250px;
}
@media screen and (max-width: 1460px) {
body.filter-menu [data-attr-toogle-slide],
body.filter-menu .footer {
padding-left: 0;
}
}
body.filter-menu .aside-bar {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 768px) {
body.filter-menu .aside-bar {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
body.filter-menu .hamburger .svg-icon use[href="#icon-hamburger"],
body.filter-menu .hamburger .svg-icon use[href="#icon-filter"] {
display: none;
}
body.filter-menu .hamburger .svg-icon use[href="#icon-close"] {
display: block;
}
@media screen and (max-width: 1460px) {
body.filter-menu .mask {
opacity: 1;
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@media screen and (max-width: 1460px) {
body.open-menu .header-menu {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
body.open-menu .mask {
opacity: 1;
transform: translate3d(0, 0, 0);
visibility: visible;
}
body.open-menu .mobile-menu use[href="#icon-hamburger"] {
display: none;
}
body.open-menu .mobile-menu use[href="#icon-close"] {
display: block;
}
}
body.show-search .search {
opacity: 1;
visibility: visible;
transform: scale(1);
}
body.show-search .navigation {
opacity: 0;
visibility: hidden;
}
body.show-search .close {
opacity: 1;
visibility: visible;
}
body.show-search .close svg {
transform: rotate(0deg);
}
@media screen and (max-width: 767px) {
body.show-search-mobile .wrap-search {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
}
body.show-search-mobile .btn[data-attr-search] {
color: var(--color-active);
}
body.show-search-mobile .btn-close {
opacity: 1;
visibility: visible;
}
body.show-search-mobile .btn-close svg {
transform: rotate(0deg);
}
}
@media screen and (max-width: 1460px) {
body.scroll-locked {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
}
body.show-autocomplete .auto-complete-list {
display: block;
}
a {
color: var(--color-main);
text-decoration: none;
}
input {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
* {
box-sizing: border-box;
outline: none;
}
.svg-icon {
--icon-main: currentColor;
--icon-main-dark: color-mix(in oklab, currentColor 100%, black);
display: inline-block;
vertical-align: -0.125em;
width: 1em;
height: 1em;
fill: currentColor;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
.container {
max-width: 1650px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.container {
padding: 0 10px;
}
}
.container-fluid {
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.container-fluid {
padding: 0 10px;
}
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: var(--color-placeholder);
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: var(--color-placeholder);
opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: var(--color-placeholder);
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: var(--color-placeholder);
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
color: transparent;
}
input.placeholder, textarea.placeholder {
color: var(--color-placeholder) !important;
}
.header {
flex-shrink: 0;
flex-grow: 0;
position: relative;
margin-bottom: 20px;
}
@media screen and (max-width: 1460px) {
.header {
margin-bottom: 10px;
}
}
.top-header {
background-color: var(--bg-top-header);
color: var(--color-top-header);
display: flex;
justify-content: center;
padding: 5px 0;
}
@media screen and (min-width: 1025px) {
.top-header a:hover {
text-decoration: underline;
}
}
.top-header .list,
.mobile-panel .list {
display: flex;
align-items: center;
font-weight: 300;
}
.top-header .item,
.mobile-panel .item {
position: relative;
padding-right: 16px;
margin-right: 10px;
}
.top-header .item::after,
.mobile-panel .item::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto 0;
width: 6px;
height: 6px;
border-radius: 6px;
background-color: var(--bg-separator);
}
.top-header .item:last-child,
.mobile-panel .item:last-child {
margin-right: 0;
padding-right: 0;
}
.top-header .item:last-child::after,
.mobile-panel .item:last-child::after {
display: none;
}
.top-header a,
.mobile-panel a {
color: var(--color-secondary);
}
.switcher-lang {
position: relative;
}
.switcher-lang.show .svg-icon {
transform: rotate(-180deg);
}
.switcher-lang.show .drop-lang {
opacity: 1;
transform: translate3d(0, 0, 0);
visibility: visible;
}
.button-lang {
display: flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
color: var(--color-main);
font-size: 10px;
}
.button-lang span {
width: 20px;
height: 20px;
border-radius: 20px;
overflow: hidden;
}
.button-lang .svg-icon {
flex-shrink: 0;
flex-grow: 0;
transform: rotate(0);
transition: transform 0.3s;
}
.drop-lang {
position: absolute;
z-index: 10;
background: var(--bg-lang-drop);
border-radius: 10px;
width: 100%;
min-width: 150px;
max-height: 150px;
overflow-y: auto;
right: 0;
top: calc(100% + 10px);
opacity: 0;
transform: translate3d(0, -10%, 0);
visibility: hidden;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.4);
}
.drop-lang a {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
padding: 5px 10px;
color: var(--color-lang-drop);
}
@media screen and (min-width: 1025px) {
.drop-lang a:hover {
text-decoration: none;
}
.drop-lang a:hover:not(.active) {
background-color: var(--bg-active);
color: var(--color-lang-drop-hover);
}
}
.drop-lang a.active {
background-color: var(--bg-active);
color: var(--color-lang-drop-hover);
}
.header-holder {
display: flex;
padding: 0 20px;
}
@media screen and (max-width: 1460px) {
.header-holder {
justify-content: space-between;
gap: 0 20px;
}
}
@media screen and (max-width: 768px) {
.header-holder {
padding: 0 10px;
position: relative;
}
}
.header-hamburger {
flex-shrink: 0;
flex-grow: 0;
align-self: center;
margin-right: 20px;
}
@media screen and (max-width: 1460px) {
.header-hamburger {
order: 1;
margin: 0;
}
}
.hamburger {
background: var(--bg-hamburger);
border: none;
cursor: pointer;
border-radius: 20px;
width: 50px;
height: 50px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-hamburger);
}
@media screen and (max-width: 1460px) {
.hamburger {
background: none;
width: auto;
height: auto;
font-size: 24px;
color: var(--color-secondary);
}
}
.hamburger .svg-icon use[href="#icon-filter"],
.hamburger .svg-icon use[href="#icon-close"] {
display: none;
}
@media screen and (max-width: 1460px) {
.hamburger .svg-icon use[href="#icon-hamburger"] {
display: none;
}
.hamburger .svg-icon use[href="#icon-filter"] {
display: block;
}
}
.mobile-menu {
flex-grow: 0;
flex-shrink: 0;
align-items: center;
justify-content: center;
display: none;
font-size: 24px;
align-self: center;
background: none;
border: none;
cursor: pointer;
color: var(--color-main);
}
@media screen and (max-width: 1460px) {
.mobile-menu {
display: flex;
}
}
.mobile-menu use[href="#icon-close"] {
display: none;
}
.logo {
flex-shrink: 0;
flex-grow: 0;
padding: 32px 0;
}
@media screen and (max-width: 1460px) {
.logo {
padding: 17px 0;
}
}
@media screen and (max-width: 767px) {
.logo {
padding: 20px 0;
}
}
.logo.christmas .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-christmas.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 227;
height: 44px;
transform: translate3d(3px, -5px, 0);
}
.logo.halloween .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-halloween.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 192px;
height: 46px;
transform: translate3d(10px, -5px, 0);
}
.logo .wrap {
position: relative;
}
.logo a {
display: flex;
position: relative;
font-size: 249px;
height: 36px;
transition: color 0.3s;
}
@media (hover: hover) {
.logo a:hover {
color: var(--color-active);
}
.logo a:hover .ears {
opacity: 1;
transform: scale(1);
}
.logo a:hover .ear-before,
.logo a:hover .ear-after {
fill: var(--color-active);
}
.logo a:hover .ear-before {
animation: slide-in-left 0.5s infinite;
}
.logo a:hover .ear-after {
animation: slide-in-right 0.5s infinite;
}
}
@media screen and (max-width: 767px) {
.logo a {
width: 214px;
height: 30px;
}
}
.logo .ears {
position: absolute;
top: -20px;
left: -9px;
opacity: 0;
pointer-events: none;
transform: scale(0.9) translate3d(0, -4px, 0);
transition: opacity 0.3s, transform 0.3s;
}
.logo .ear-before,
.logo .ear-after {
transform-origin: bottom;
transition: fill 0.3s;
}
.logo img,
.logo svg {
display: block;
}
.logo img {
max-width: 100%;
height: auto;
position: relative;
z-index: 2;
}
.logo .svg-icon {
height: 36px;
}
@media screen and (max-width: 767px) {
.logo .svg-icon {
height: 30px;
}
}
@keyframes slide-in-left {
from {
transform: rotateX(0);
}
to {
transform: rotateX(-14deg);
}
}
@keyframes slide-in-right {
from {
transform: rotateX(0);
}
to {
transform: rotateX(15deg);
}
}
.header-menu {
flex-shrink: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 1460px) {
.header-menu {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
max-width: 411px;
width: 100%;
opacity: 0;
visibility: hidden;
z-index: 9992;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
padding: 30px;
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px 0;
background-color: var(--bg-header-menu);
height: calc(100svh - var(--header-height));
}
}
@media screen and (max-width: 768px) {
.header-menu {
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: 100svh;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@media screen and (max-width: 374px) {
.header-menu {
padding: 10px;
}
}
.header-field {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 4vw;
position: relative;
}
@media screen and (max-width: 1680px) {
.header-field {
padding: 0 30px;
}
}
@media screen and (max-width: 1460px) {
.header-field {
padding: 0;
}
}
.navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 18px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.2s, visibility 0.2s;
transition: opacity 0.2s, visibility 0.2s;
}
@media screen and (max-width: 1460px) {
.navigation {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
}
.navigation .item {
letter-spacing: 0.02em;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 1460px) {
.navigation .item {
margin-bottom: 5px;
}
.navigation .item:last-child {
margin-bottom: 0;
}
}
.navigation .item.active a {
pointer-events: none;
}
@media screen and (max-width: 1460px) {
.navigation .item.active a {
color: var(--color-active);
}
}
.navigation .item.active a::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 1460px) {
.navigation .item.second {
display: none;
}
}
.navigation a {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
@media (hover: hover) {
.navigation a:hover::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
}
@media screen and (max-width: 1460px) {
.navigation a {
padding: 15px 0;
width: 100%;
}
}
.navigation a::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--color-active);
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 1460px) {
.navigation a::before {
top: auto;
bottom: 0;
}
}
.search {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
z-index: 2;
max-width: 760px;
margin: 0 auto;
opacity: 0;
visibility: hidden;
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s, -webkit-transform 0.2s;
}
.search form {
width: 100%;
}
.search .wrap-tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.search .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: var(--bg-search);
border: 2px solid var(--bg-border-search);
border-radius: 20px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.search .wrap.focus {
border-color: var(--color-active);
}
.search .wrap.focus .button-search {
color: var(--color-active);
}
.search .input {
color: var(--color-main);
background: none;
border: none;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
cursor: text;
font-weight: 300;
font-size: 16px;
font-family: inherit;
height: 46px;
padding: 14px 20px;
width: 100%;
}
.search .close {
background: none;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 25px;
font-size: 24px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
border-radius: 0 10px 10px 0;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
color: var(--color-search-close);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s, color 0.3s;
transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.search .close:hover {
color: var(--color-active);
}
}
.search .close svg {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: -webkit-transform 0.4s 0.3s;
transition: -webkit-transform 0.4s 0.3s;
transition: transform 0.4s 0.3s;
transition: transform 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
}
.button-search {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-search);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.button-search:hover {
color: var(--color-active);
}
}
.btn-search {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
-ms-flex-item-align: center;
align-self: center;
color: var(--color-search-action);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.btn-search:hover {
color: var(--color-active);
}
}
.wrap-search {
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
}
@media screen and (max-width: 1460px) {
.wrap-search {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 767px) {
.wrap-search {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9992;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 10px;
opacity: 0;
visibility: hidden;
background-color: var(--bg-search-mobile);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
}
.wrap-search .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 2px solid var(--bg-border-search);
background: var(--bg-search);
border-radius: 20px;
padding: 10px 20px;
height: 50px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.wrap-search .wrap.focus {
border-color: var(--color-active);
}
.wrap-search .wrap.focus .button-search {
color: var(--color-active);
}
.wrap-search .input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
height: 100%;
background: none;
border: none;
font-family: inherit;
font-weight: 300;
font-size: 16px;
color: var(--color-main);
}
.wrap-search .btn {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 24px;
background: none;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--color-search);
cursor: pointer;
}
.form-search {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 1460px) {
.form-search {
max-width: 760px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.form-search {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
.form-search .btn-close {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 10px;
background: none;
border: none;
color: var(--color-search-close);
font-size: 24px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s;
transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s;
}
@media screen and (max-width: 767px) {
.form-search .btn-close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.form-search .btn-close svg {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: -webkit-transform 0.4s 0.3s;
transition: -webkit-transform 0.4s 0.3s;
transition: transform 0.4s 0.3s;
transition: transform 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
}
.auto-complete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--bg-search-autocomplete);
z-index: 3;
border-radius: 20px;
-webkit-box-shadow: var(--shadow-search-autocomplete);
box-shadow: var(--shadow-search-autocomplete);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
overflow: auto;
max-height: 350px;
max-width: calc(100% - 74px);
display: none;
}
@media screen and (max-width: 1460px) {
.auto-complete-list {
max-width: 760px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.auto-complete-list {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: static;
width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
max-height: 100%;
margin-bottom: -10px;
padding-bottom: 10px;
}
}
.auto-complete-list .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.auto-complete-list a {
color: var(--color-autocomplete);
display: block;
padding: 15px 20px;
}
@media screen and (min-width: 1025px) {
.auto-complete-list a:hover {
background-color: var(--bg-list-auto-complete--hover);
}
}
.auto-complete-list a span {
color: var(--color-active);
}
.title-list {
font-weight: 400;
font-size: 24px;
padding: 0 20px;
margin: 20px 0 10px 0;
color: var(--color-autocomplete--title);
}
.header-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 20px;
}
@media screen and (max-width: 1460px) {
.header-panel {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.header-panel .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
@media screen and (max-width: 1460px) {
.header-panel .wrap {
flex-grow: 1;
flex-shrink: 1;
}
}
.user-block {
position: relative;
z-index: 91;
}
.user-block[data-attr-user-dropped=true] .user {
box-shadow: 0 0 0 3px var(--bg-active);
}
.user-block[data-attr-user-dropped=true] .dropped-user {
transform: rotateY(0) translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.dropped-user {
position: absolute;
top: calc(100% + 7px);
right: 0;
min-width: 184px;
border-radius: 15px 0 15px 15px;
box-shadow: 0 4px 18px 0 rgba(23, 15, 41, 0.2);
background: var(--bg-dropped-user);
display: flex;
flex-direction: column;
gap: 5px;
font-weight: 300;
font-size: 20px;
padding: 5px 0;
transform: rotateY(25deg) translate3d(5px, 0, 0);
opacity: 0;
visibility: hidden;
transition: transform 0.4s, opacity 0.4s, visibility 0.4s;
}
.dropped-user[data-attr-user-dropped] {
display: none;
}
@media screen and (max-width: 1460px) {
.dropped-user {
display: none;
transform: none;
position: static;
}
.dropped-user[data-attr-user-dropped=true] {
opacity: 1;
visibility: visible;
display: block;
}
}
.dropped-user span {
font-size: 16px;
}
.dropped-user a {
padding: 10px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
color: var(--color-dropped-user);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.dropped-user a:hover {
background-color: var(--bg-dropped-user--active);
color: var(--color-active);
}
}
.dropped-user .active {
background: var(--bg-dropped-user--active);
color: var(--color-active);
}
.mobile-panel {
padding: 0 20px;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px 0;
}
@media screen and (max-width: 768px) {
.mobile-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.mobile-panel .close {
position: absolute;
left: 20px;
top: 34px;
font-size: 24px;
background: none;
border: none;
color: var(--color-main);
cursor: pointer;
}
@media screen and (max-width: 374px) {
.mobile-panel .close {
top: 15px;
left: 10px;
}
}
.mobile-panel .logotype.christmas .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-christmas.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 227;
height: 44px;
-webkit-transform: translate3d(3px, -5px, 0);
transform: translate3d(3px, -5px, 0);
}
.mobile-panel .logotype.halloween .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-halloween.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 192px;
height: 46px;
-webkit-transform: translate3d(10px, -5px, 0);
transform: translate3d(10px, -5px, 0);
}
.mobile-panel .logotype .wrap {
position: relative;
}
.mobile-panel .logotype a {
color: var(--color-main);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 209px;
height: 30px;
}
.mobile-panel .logotype svg {
height: 30px;
}
.button,
.button.sort-btn {
border: none;
cursor: pointer;
font-family: inherit;
border-radius: 20px;
min-width: 50px;
height: 50px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--color-main);
background-color: var(--bg-button);
padding: 0 10px;
}
@media screen and (min-width: 1025px) {
.button:hover svg {
transform: scale(0.96);
}
}
.button.primary {
background-color: var(--bg-button--switcher);
color: var(--color-button--switcher);
padding: 0 28px;
}
@media screen and (max-width: 1680px) {
.button.primary {
padding: 0 10px;
}
.button.primary span {
display: none;
}
}
@media screen and (max-width: 1460px) {
.button.primary {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.button.primary span {
display: block;
}
}
.button.user {
border-radius: 30px;
background-color: var(--bg-button--user);
color: var(--color-button--user);
-webkit-box-shadow: 0 0 0 0 var(--bg-active);
box-shadow: 0 0 0 0 var(--bg-active);
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
@media screen and (min-width: 1025px) {
.button.user:hover {
-webkit-box-shadow: 0 0 0 2px var(--bg-active);
box-shadow: 0 0 0 2px var(--bg-active);
}
}
.button.user img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 30px;
}
.button span {
font-weight: 300;
font-size: 18px;
}
.button svg {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.mask {
position: fixed;
bottom: 0;
left: 0;
opacity: 0;
right: 0;
top: var(--header-height);
-webkit-transition: visibility 0.4s, opacity 0.4s, -webkit-transform 0.4s;
transition: visibility 0.4s, opacity 0.4s, -webkit-transform 0.4s;
transition: transform 0.4s, visibility 0.4s, opacity 0.4s;
transition: transform 0.4s, visibility 0.4s, opacity 0.4s, -webkit-transform 0.4s;
visibility: hidden;
z-index: 4;
background: rgba(var(--bg-mask), 0.5);
}
.main {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
.twocolumns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 50px;
margin: 0 0 20px;
}
@media screen and (max-width: 1160px) {
.twocolumns {
gap: 25px;
}
}
@media screen and (max-width: 767px) {
.twocolumns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.aside {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 340px;
padding: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 23px 50px 0 rgba(0, 0, 0, 0.1), 0 91px 91px 0 rgba(0, 0, 0, 0.09), 0 205px 123px 0 rgba(0, 0, 0, 0.05), 0 364px 146px 0 rgba(0, 0, 0, 0.01), 0 569px 159px 0 rgba(0, 0, 0, 0);
box-shadow: 0 23px 50px 0 rgba(0, 0, 0, 0.1), 0 91px 91px 0 rgba(0, 0, 0, 0.09), 0 205px 123px 0 rgba(0, 0, 0, 0.05), 0 364px 146px 0 rgba(0, 0, 0, 0.01), 0 569px 159px 0 rgba(0, 0, 0, 0);
background: var(--bg-aside);
}
@media screen and (max-width: 1160px) {
.aside {
width: 275px;
}
}
@media screen and (max-width: 767px) {
.aside {
width: 100%;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.aside .hold {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px 0;
}
.aside .photo {
position: relative;
padding: 0 0 133%;
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
}
@media screen and (max-width: 767px) {
.aside .photo {
max-width: 320px;
padding: 0;
margin: 0 auto;
height: 320px;
width: 240px;
text-align: center;
}
}
.aside .photo img {
width: 100%;
height: 100%;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.aside .photo img {
position: relative;
}
}
.aside .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.aside .name {
font-weight: 900;
font-size: 24px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
overflow: hidden;
max-width: 100%;
color: var(--color-profile-name);
}
.aside .name .svg-icon {
color: var(--color-active);
}
.aside .name span {
font-size: 26px;
}
.aside .email {
margin-top: 8px;
font-weight: 300;
font-size: 16px;
color: #7e778e;
}
.aside .desc {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
}
.aside .list {
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 15px;
font-weight: 300;
font-size: 14px;
color: var(--color-post-item);
}
.aside .box {
position: relative;
}
.aside .box:last-child::after {
display: none;
}
.aside .box::after {
content: "";
position: absolute;
top: 8px;
right: -10px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.aside .btn-sbsc {
width: 100%;
padding: 0 13px;
margin-top: 15px;
}
@media screen and (max-width: 1160px) {
.aside .btn-sbsc {
padding: 0 10px;
font-size: 16px;
line-height: 1;
min-width: 40px;
min-height: 40px;
border-radius: 15px;
}
}
@media screen and (max-width: 767px) {
.aside .btn-sbsc {
font-size: 24px;
min-height: 50px;
}
}
@media screen and (max-width: 1160px) {
.aside .btn-sbsc span {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.aside .btn-sbsc span {
font-size: 18px;
}
}
@media screen and (max-width: 480px) {
.aside .btn-sbsc span {
display: block;
}
}
.aside .panel {
border-radius: 20px;
padding: 10px 14px;
background-color: var(--bg-aside-panel);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px 0;
}
@media screen and (max-width: 1160px) {
.aside .panel {
padding: 10px;
}
}
.aside .tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
}
@media screen and (max-width: 480px) {
.aside .tools.second {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
}
.aside .tools .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
}
.aside .btn {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
font-family: inherit;
gap: 0 5px;
font-size: 24px;
min-width: 50px;
min-height: 50px;
padding: 13px;
font-weight: 300;
border-radius: 20px;
background-color: var(--bg-channel-page-panel);
color: var(--color-channel-page-panel);
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.aside .btn:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
@media screen and (max-width: 1160px) {
.aside .btn {
padding: 10px;
font-size: 16px;
line-height: 1;
min-width: 40px;
min-height: 40px;
border-radius: 15px;
}
}
@media screen and (max-width: 767px) {
.aside .btn {
font-size: 24px;
min-height: 50px;
min-width: 50px;
}
}
.aside .btn.second {
padding: 13px 18px;
background-color: var(--bg-active);
color: var(--color-item--active);
}
@media screen and (min-width: 1025px) {
.aside .btn.second:hover {
background-color: var(--color-footer-list--active);
}
}
@media screen and (max-width: 1160px) {
.aside .btn.second {
padding: 12px;
}
}
.aside .btn.second span {
color: var(--color-white);
}
.aside .btn span {
font-size: 18px;
}
@media screen and (max-width: 1160px) {
.aside .btn span {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.aside .btn span {
font-size: 18px;
}
}
.aside .row {
padding-top: 20px;
border-top: 1px solid var(--border-color-row);
}
.aside .row:first-child {
padding-top: 0;
border-top: none;
}
.aside .content-tags {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin: 0;
}
.profile-aside {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px 0;
}
.profile-aside[data-attr-avatar=true]::before {
content: "";
background: url("../images/foxy-edit.png") no-repeat;
position: absolute;
bottom: -5px;
left: -50%;
background-size: contain;
background-position: center;
width: 334px;
height: 211px;
margin: 0 auto;
}
.profile-aside .avatar {
width: 165px;
height: 165px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-size: 50px;
color: var(--color-white);
border-radius: 165px;
border: 4px solid rgba(255, 255, 255, 0.4);
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
}
.profile-aside .avatar::before, .profile-aside .avatar::after {
position: absolute;
content: "";
border-radius: 100%;
}
.profile-aside .avatar::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--liner-gradient-edit-avatar);
-webkit-box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.1);
}
.profile-aside .avatar::after {
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: linear-gradient(140deg, #ffc6b8 0%, #5f89ea 100%);
}
.profile-aside .avatar img,
.profile-aside .avatar svg {
position: relative;
z-index: 2;
}
.profile-aside .avatar img {
width: 149px;
height: 149px;
border-radius: 149px;
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.profile-aside .listed {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 15px;
font-weight: 300;
font-size: 14px;
color: var(--color-post-item);
}
.profile-block-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
width: 100%;
padding: 5px 0;
}
.profile-block-panel .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
}
.profile-block-panel .btn-sbsc,
.profile-block-panel .btn {
margin: 0;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.detail-status,
.detail-status--secondary {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 10px;
width: 100%;
max-width: 368px;
padding: 12px 14px;
border-radius: 20px;
background: var(--bg-account-detail);
color: var(--color-account-detail);
}
.detail-status .item,
.detail-status--secondary .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.25;
text-align: center;
}
.detail-status strong,
.detail-status--secondary strong {
font-weight: 400;
font-size: 20px;
margin-bottom: 3px;
}
.detail-status span,
.detail-status--secondary span {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-popup-edit-span);
}
@media screen and (max-width: 1160px) {
.detail-status span,
.detail-status--secondary span {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.detail-status span,
.detail-status--secondary span {
font-size: 16px;
}
}
.detail-status .second,
.detail-status--secondary .second {
color: var(--color-active);
}
.detail-status--secondary {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.detail-status--secondary .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
.detail-status--secondary .btn.second {
margin-top: 20px;
width: 100%;
position: relative;
}
.detail-status--secondary .btn img {
position: absolute;
top: 50%;
left: -2px;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
width: 70px;
height: 70px;
}
@media screen and (max-width: 1160px) {
.detail-status--secondary .btn img {
width: 50px;
height: 50px;
}
}
@media screen and (max-width: 767px) {
.detail-status--secondary .btn img {
width: 70px;
height: 70px;
left: -4px;
}
}
@media screen and (max-width: 1160px) {
.detail-status--secondary .btn span {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.detail-status--secondary .btn span {
font-size: 18px;
}
}
.profile-name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2px;
text-align: center;
}
.profile-name .tag {
font-weight: 400;
font-size: 26px;
letter-spacing: 0.02em;
color: var(--color-popup-edit-tag);
}
.profile-name .adress {
color: var(--color-community-user-avatar);
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
}
.list-stat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-weight: 300;
font-size: 16px;
color: var(--color-stat);
}
.list-stat .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.list-stat strong {
font-size: 20px;
color: var(--color-stat-strong);
}
.list-stat em {
color: var(--color-green);
}
.list-information {
font-weight: 300;
font-size: 12px;
}
.list-information .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 10px;
padding: 0 20px;
gap: 10px;
color: #7e778e;
}
.list-information .item:nth-child(2n+1) {
background-color: var(--bg-list-information);
}
.list-information .item > * {
padding: 10px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px 10px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.list-information img {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.list-information em,
.list-information span {
font-size: 16px;
}
.list-information em {
font-style: normal;
font-weight: 300;
}
.list-information span {
color: var(--color-list-information--secondary);
}
.list-information a {
color: #7e778e;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.list-information .svg-icon {
color: #87878c;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.aside-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
.aside-navigation .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
font-size: 12px;
color: #87878C;
}
@media screen and (min-width: 1025px) {
.aside-navigation .item:hover .icon {
background-color: #170F29;
color: var(--color-white);
}
.aside-navigation .item:hover .arrow {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
}
.aside-navigation .item.active .icon {
background-color: var(--bg-active);
color: var(--color-white);
}
.aside-navigation .item.active .arrow {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.aside-navigation .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 36px;
height: 36px;
border-radius: 15px;
background-color: var(--bg-icon-aside-navigation);
font-size: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--color-icon-aside-navigation);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.aside-navigation .arrow {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(-2px, 0, 0);
transform: translate3d(-2px, 0, 0);
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
.item-text {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: 300;
font-size: 18px;
color: var(--color-item-text);
}
.item-count {
background-color: var(--bg-item-count);
color: var(--color-item-count);
border-radius: 5px;
padding: 2px 6px;
font-weight: 300;
font-size: 14px;
}
.content-side {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 1px;
width: 100%;
}
.section {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.section {
margin-bottom: 20px;
}
}
.section:last-child {
margin-bottom: 0;
}
.section.primary {
overflow: hidden;
}
@media screen and (max-width: 1680px) {
.section.primary .container {
padding: 0;
}
}
.headline-flex,
.headline-single,
.headline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin-bottom: 20px;
line-height: 1.15;
gap: 10px;
}
@media screen and (max-width: 479px) {
.headline-flex,
.headline-single,
.headline {
margin-bottom: 10px;
}
}
.headline-flex .title,
.headline-single .title,
.headline .title {
font-weight: 900;
font-size: 30px;
text-align: center;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.headline-flex .title,
.headline-single .title,
.headline .title {
font-size: 22px;
-ms-flex-item-align: center;
align-self: center;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
text-align: left;
}
}
@media screen and (max-width: 479px) {
.headline:not(.after) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.headline.after::before {
display: none;
}
.headline.after::after {
content: "";
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.headline.after .headline-panel {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.headline.after .title {
text-align: center;
}
.headline::before {
content: "";
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
@media screen and (max-width: 767px) {
.headline::before {
display: none;
}
}
.headline .title {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
@media screen and (max-width: 479px) {
.headline .title {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}
.headline-single .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
white-space: normal;
text-align: center;
}
.headline-single svg {
-ms-flex-item-align: center;
align-self: center;
color: var(--bg-active);
}
.headline-filter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin-bottom: 10px;
line-height: 1.15;
gap: 10px;
}
.headline-filter .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
background: var(--bg-button);
color: var(--color-item);
border-radius: 15px;
font-weight: 300;
font-size: 12px;
padding: 5px 20px;
min-height: 36px;
cursor: pointer;
border: none;
font-family: inherit;
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.headline-filter .btn:hover {
background-color: var(--bg-item--active);
color: var(--color-primary);
}
}
.headline-filter .btn span {
font-size: 14px;
}
@media screen and (max-width: 767px) {
.headline-flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.headline-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
gap: 0 20px;
}
@media screen and (max-width: 767px) {
.headline-panel {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.headline-panel.secondary {
display: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 10px;
}
@media screen and (max-width: 479px) {
.headline-panel.secondary {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 479px) {
.headline-panel.primary {
display: none;
}
}
.headline-panel .btn {
font-weight: 300;
font-size: 10px;
line-height: 1.25;
text-transform: capitalize;
padding: 8px 20px;
border-radius: 15px;
border: none;
cursor: pointer;
font-family: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
color: var(--color-button);
background-color: var(--bg-button);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.headline-panel .btn:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
.headline-panel .btn span {
font-size: 16px;
}
.headline-panel .btn-search {
font-family: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
cursor: pointer;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.02em;
color: var(--color-active);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.headline-panel .btn-search:hover {
color: var(--color-main);
}
}
.headline-panel .btn-search span {
font-size: 16px;
}
.block-search {
max-width: 760px;
width: 100%;
margin: 0 auto;
}
.block-search form {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.block-search .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: var(--bg-search);
border: 2px solid var(--bg-border-search);
border-radius: 20px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.block-search .wrap.focus {
border-color: var(--color-active);
}
.block-search .wrap.focus .button-search {
color: var(--color-active);
}
.block-search .input {
color: var(--color-main);
background: none;
border: none;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
cursor: text;
font-weight: 300;
font-size: 16px;
font-family: inherit;
height: 46px;
padding: 14px 20px 14px 0;
width: 100%;
}
.block-search .close {
background: none;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 25px;
font-size: 24px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
border-radius: 0 10px 10px 0;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
color: var(--color-search-close);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s, color 0.3s;
transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.block-search .close:hover {
color: var(--color-active);
}
}
.block-search .close svg {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: -webkit-transform 0.4s 0.3s;
transition: -webkit-transform 0.4s 0.3s;
transition: transform 0.4s 0.3s;
transition: transform 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
}
.headline-with-search {
position: relative;
}
.headline-with-search .block-search.headline-search {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s, visibility 0.3s;
}
.headline-with-search.show-headline-search .block-search.headline-search {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.headline-with-search.show-headline-search .block-search.headline-search .close {
opacity: 1;
visibility: visible;
}
.headline-with-search.show-headline-search .title,
.headline-with-search.show-headline-search .headline-panel {
visibility: hidden;
}
.wrap-sort {
position: relative;
}
.wrap-sort.show .hidden-box {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
.wrap-sort.show .sort-btn {
background: var(--color-active);
color: var(--color-primary);
}
.wrap-sort.show .sort-btn svg {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.sort-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-family: inherit;
background: var(--bg-button);
color: var(--color-button);
border-radius: 15px;
font-weight: 300;
font-size: 10px;
padding: 5px 20px;
min-height: 36px;
cursor: pointer;
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.sort-btn:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
.sort-btn span {
font-size: 16px;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sort-btn svg {
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.sort-btn img {
width: 16px;
height: 16px;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
}
.hidden-box {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 10;
font-weight: 300;
font-size: 16px;
background: var(--bg-item);
border-radius: 15px;
max-height: 150px;
min-width: 164px;
overflow: hidden;
overflow-y: auto;
opacity: 0;
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
visibility: hidden;
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
.hidden-box a {
display: block;
padding: 8px 20px;
color: var(--color-item);
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.hidden-box a:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
.hidden-box a.active {
background-color: var(--color-active);
color: var(--color-primary);
}
.navigation-switch .hidden-box{
width: 194px;
}
.navigation-switch .hidden-box a{
text-overflow: ellipsis;
overflow: hidden;
}
.swiper-prev:not(.swiper-button-prev),
.swiper-next:not(.swiper-button-next) {
position: absolute;
top: 39%;
z-index: 2;
width: 40px;
height: 40px;
font-size: 13px;
border-radius: 100%;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
background: var(--bg-button--swiper);
color: var(--color-button--swiper);
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.swiper-prev:not(.swiper-button-prev):hover,
.swiper-next:not(.swiper-button-next):hover {
color: var(--color-primary);
background-color: rgba(var(--bg-rgb-button--swiper), 0.8);
}
}
@media screen and (max-width: 480px) {
.swiper-prev:not(.swiper-button-prev),
.swiper-next:not(.swiper-button-next) {
display: none;
}
}
.swiper-prev:not(.swiper-button-prev)::after, .swiper-prev:not(.swiper-button-prev).swiper-button-disabled,
.swiper-next:not(.swiper-button-next)::after,
.swiper-next:not(.swiper-button-next).swiper-button-disabled {
display: none;
}
.swiper-prev {
left: 5px;
}
.swiper-next {
right: 5px;
}
.thumbs-blog,
.thumbs-landscape {
--flex-column-gap: 20px;
--flex-row-gap: 20px;
--flex-items: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-row-gap) var(--flex-column-gap);
}
@media screen and (max-width: 1366px) {
.thumbs-blog,
.thumbs-landscape {
--flex-items: 3;
}
}
@media screen and (max-width: 991px) {
.thumbs-blog,
.thumbs-landscape {
--flex-items: 2;
}
}
@media screen and (max-width: 479px) {
.thumbs-blog,
.thumbs-landscape {
--flex-items: 1;
}
}
.thumbs-blog.sm,
.thumbs-landscape.sm {
--flex-items: 4;
}
@media screen and (max-width: 1366px) {
.thumbs-blog.sm,
.thumbs-landscape.sm {
--flex-items: 3;
}
}
@media screen and (max-width: 1160px) {
.thumbs-blog.sm,
.thumbs-landscape.sm {
--flex-items: 2;
}
}
@media screen and (max-width: 479px) {
.thumbs-blog.sm,
.thumbs-landscape.sm {
--flex-items: 1;
}
}
.thumbs-blog {
--flex-items: 4;
}
@media screen and (max-width: 1366px) {
.thumbs-blog {
--flex-items: 3;
}
}
@media screen and (max-width: 991px) {
.thumbs-blog {
--flex-items: 2;
}
}
@media screen and (max-width: 479px) {
.thumbs-blog {
--flex-items: 1;
}
}
.thumb-landscape {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-column-gap));
}
.thumb-landscape.active .desc,
.thumb-landscape.active .name {
color: var(--color-active);
}
.thumb-landscape .sticky {
position: absolute;
right: 10px;
bottom: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
}
.thumb-landscape .premium,
.thumb-landscape .time {
background: rgba(255, 255, 255, 0.7);
}
.thumb-landscape .premium,
.thumb-landscape .time,
.thumb-landscape .quality {
font-weight: 300;
font-size: 14px;
line-height: 1.3;
border-radius: 8px;
padding: 2px 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
}
.thumb-landscape .quality {
background: rgba(250, 74, 31, 0.8);
text-transform: uppercase;
}
.thumb-landscape .premium {
color: var(--color-active);
}
.thumb-landscape .quality {
color: var(--color-primary);
}
.thumb-landscape .time {
color: var(--color-thumb-time);
}
.thumb-landscape .lock {
width: 22px;
height: 22px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
color: #170f29;
font-size: 16px;
}
.thumb-landscape .lock .svg-icon {
color: #170F29;
}
.thumb-landscape .content {
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.thumb-landscape .content-secondary {
gap: 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.thumb-landscape .title,
.thumb-landscape .desc {
display: inline-block;
vertical-align: top;
font-weight: 400;
font-size: 18px;
color: var(--color-thumb-desc);
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.thumb-landscape .title:hover,
.thumb-landscape .desc:hover {
color: var(--color-active);
}
}
.thumb-landscape .info {
font-weight: 300;
font-size: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.thumb-landscape .author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
.thumb-landscape .ava {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 37px;
height: 37px;
overflow: hidden;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--bg-item);
font-weight: 400;
font-size: 16px;
}
.thumb-landscape .ava img {
max-width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.thumb-landscape .detail {
font-weight: 300;
font-size: 14px;
line-height: 1.2;
color: var(--color-main);
min-width: 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 4px 0;
}
.thumb-landscape .name-channel,
.thumb-landscape .name {
color: var(--color-thumb-name);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.thumb-landscape .name-channel:hover,
.thumb-landscape .name:hover {
color: var(--color-active);
}
}
.thumb-landscape .name-channel span,
.thumb-landscape .name span {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
.thumb-landscape .name {
font-size: 12px;
font-weight: 300;
}
.thumb-landscape .name span {
font-size: 16px;
}
.thumb-landscape .name-channel {
font-size: 18px;
font-weight: 400;
}
.thumb-landscape .play-box .svg-icon {
-webkit-transition: color 0.3s;
transition: color 0.3s;
color: var(--color-thumb-name);
}
.thumb-landscape .svg-icon {
color: var(--color-active);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.thumb-landscape .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
font-weight: 300;
color: var(--color-thumb-item);
}
.thumb-landscape .box {
position: relative;
}
.thumb-landscape .box:last-child::after {
display: none;
}
.thumb-landscape .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
@media screen and (min-width: 1025px) {
a.thumb-landscape:hover .title {
color: var(--color-active);
}
a.thumb-landscape:hover .play-box {
background-color: rgba(var(--bg-rgb-active-progress-bar), 0.6);
color: var(--color-item--active);
}
a.thumb-landscape:hover .play-box .svg-icon {
color: var(--color-item--active);
}
}
.card-media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 55.9%;
background-color: var(--bg-item);
font-size: 16px;
margin-bottom: 10px;
}
@media screen and (min-width: 1025px) {
.card-media:hover img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.card-media:hover .progress-bar .active {
opacity: 1;
visibility: visible;
width: 100%;
}
}
@media screen and (max-width: 479px) {
.card-media:not(.static) {
margin: 0 -10px 7px;
border-radius: 0;
}
}
.card-media img {
position: absolute;
bottom: 0;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
right: 0;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
}
.check-box-label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
.bottom-tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 10px;
margin-top: 30px;
}
.bottom-tools .btn {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
font-family: inherit;
gap: 0 5px;
font-size: 18px;
min-width: 50px;
min-height: 50px;
padding: 0 30px;
font-weight: 300;
border-radius: 20px;
background-color: var(--bg-channel-page-panel);
color: var(--color-channel-page-panel);
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.bottom-tools .btn:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.bottom-tools .btn.active {
background-color: var(--bg-active-black);
color: var(--color-white);
}
.bottom-tools .btn:disabled {
opacity: 0.6;
pointer-events: none;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.bottom-tools .btn span {
font-size: 18px;
}
.play-box {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: 300;
font-size: 30px;
gap: 10px 0;
width: 80px;
backdrop-filter: blur(5px);
background-color: var(--bg-tools-card-media);
color: var(--color-thumb-name);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.play-box span {
font-size: 16px;
}
.progress-bar {
position: absolute;
padding: 10px;
top: 0;
left: 0;
width: 100%;
}
.progress-bar .active {
border-radius: 2px;
height: 4px;
background-color: var(--color-active);
background: rgba(var(--bg-rgb-active-progress-bar), 0.8);
opacity: 0;
visibility: hidden;
}
.top-slider .swiper-slide {
width: 60px;
}
.field-slider {
position: relative;
}
@media screen and (max-width: 1460px) {
.field-slider .swiper {
margin: 0 -20px;
padding: 0 20px;
}
}
@media screen and (max-width: 768px) {
.field-slider .swiper {
margin: 0 -10px;
padding: 0 10px;
}
}
.top-card {
color: var(--color-slider-text);
-webkit-transition: color 0.3s;
transition: color 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 1025px) {
.top-card:hover .player-btn {
opacity: 1;
}
.top-card:hover .title {
color: var(--color-active);
}
}
.top-card .badge {
position: absolute;
bottom: 0;
z-index: 2;
margin: 0 auto;
border-radius: 8px;
background: var(--color-active);
color: var(--color-primary);
padding: 2px 5px;
font-size: 14px;
font-weight: 300;
line-height: 1;
}
.top-card.active .image::before {
background: linear-gradient(225deg, #fa4a1f 0%, #170f29 100%);
}
.top-card .image {
width: 60px;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.top-card .image::before, .top-card .image::after {
position: absolute;
content: "";
border-radius: 100%;
}
.top-card .image::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-user-avatar-line);
}
.top-card .image::after {
background: var(--bg-user-avatar);
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--bg-user-avatar-shape);
}
.top-card img {
display: inline-block;
vertical-align: top;
width: 52px;
height: 52px;
border-radius: 30px;
-o-object-fit: cover;
object-fit: cover;
position: relative;
z-index: 2;
}
.top-card .title {
margin-top: 8px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
will-change: transform;
-webkit-transition: color 0.3s;
transition: color 0.3s;
font-weight: 300;
font-size: 14px;
word-break: break-all;
}
.swiper {
display: none;
}
.swiper.swiper-initialized {
display: block;
}
.slider-bar {
position: relative;
width: 100%;
font-weight: 300;
font-size: 14px;
}
@media screen and (max-width: 767px) {
.slider-bar {
margin: 0 -10px;
padding: 0 10px;
width: auto;
}
}
.slider-bar .swiper-button-prev,
.slider-bar .swiper-button-next {
top: 0;
background: none;
color: var(--bg-item--active);
-webkit-transition: color 0.3s;
transition: color 0.3s;
width: 72px;
height: 100%;
border-radius: 0;
margin: 0;
}
@media screen and (max-width: 767px) {
.slider-bar .swiper-button-prev,
.slider-bar .swiper-button-next {
display: none;
}
}
.slider-bar .swiper-button-prev::after,
.slider-bar .swiper-button-next::after {
display: none;
}
.slider-bar .swiper-button-prev svg,
.slider-bar .swiper-button-next svg {
width: 14px;
height: 14px;
}
.slider-bar .swiper-button-prev.swiper-button-disabled,
.slider-bar .swiper-button-next.swiper-button-disabled {
display: none;
}
.slider-bar .swiper-button-next {
right: 0;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
background: var(--bg-shape-gradient-next);
}
.slider-bar .swiper-button-prev {
left: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background: var(--bg-shape-gradient-prev);
}
.slider-bar .swiper-slide {
width: auto;
}
.slider-bar .swiper-slide.active a {
background-color: var(--bg-item--active);
color: var(--color-item--active);
}
.slider-bar a {
border-radius: 10px;
background-color: var(--bg-item);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 20px;
color: var(--color-item);
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.slider-bar a:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
.slider-channels .media {
padding-bottom: 24.85%;
position: relative;
overflow: hidden;
border-radius: 15px;
margin-bottom: 10px;
}
@media screen and (max-width: 860px) {
.slider-channels .media {
min-height: 206px;
padding: 0;
}
}
@media screen and (max-width: 479px) {
.slider-channels .media {
border-radius: 0;
}
}
.slider-channels .media img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.slider-channels .author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
@media screen and (max-width: 1680px) {
.slider-channels .author {
padding: 0 10px;
}
}
.slider-channels .detail {
font-weight: 300;
font-size: 14px;
line-height: 1;
color: var(--color-main);
min-width: 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.slider-channels .ava {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 37px;
height: 37px;
overflow: hidden;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--bg-item);
font-weight: 400;
font-size: 16px;
}
.slider-channels .ava img {
max-width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.slider-channels .name-channel {
font-size: 18px;
font-weight: 400;
color: var(--color-thumb-name);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.slider-channels .name-channel:hover {
color: var(--color-active);
}
}
.slider-channels .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
color: var(--color-thumb-item);
}
.slider-channels .box {
position: relative;
}
.slider-channels .box:last-child::after {
display: none;
}
.slider-channels .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.slider-channels .swiper-prev,
.slider-channels .swiper-next {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: calc(50% - 24px);
}
.slider-channels .swiper-prev {
left: 20px;
}
@media screen and (max-width: 1680px) {
.slider-channels .swiper-prev {
left: 5px;
}
}
.slider-channels .swiper-next {
right: 20px;
}
@media screen and (max-width: 1680px) {
.slider-channels .swiper-next {
right: 5px;
}
}
.pagination-list,
.pagination-list-secondary {
display: flex;
margin-top: 50px;
justify-content: center;
font-weight: 300;
}
@media screen and (max-width: 1160px) {
.pagination-list,
.pagination-list-secondary {
margin-top: 20px;
}
}
.pagination-list .list,
.pagination-list-secondary .list {
display: flex;
padding: 0 30px;
}
@media screen and (max-width: 767px) {
.pagination-list .list,
.pagination-list-secondary .list {
display: flex;
padding: 0 20px;
}
}
.pagination-list .list .item,
.pagination-list-secondary .list .item {
margin-left: 6px;
}
@media screen and (max-width: 1160px) {
.pagination-list .list .item,
.pagination-list-secondary .list .item {
display: none;
}
}
.pagination-list .list .item:first-child,
.pagination-list-secondary .list .item:first-child {
margin: 0;
}
@media screen and (max-width: 1160px) {
.pagination-list .list .item.active,
.pagination-list-secondary .list .item.active {
display: block;
margin: 0;
}
}
.pagination-list .list .item.active a,
.pagination-list-secondary .list .item.active a {
pointer-events: none;
background-color: var(--bg-pagination-item--active);
color: var(--color-pagination-item--active);
}
.pagination-list a,
.pagination-list-secondary a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
height: 50px;
min-width: 50px;
border-radius: 20px;
background-color: var(--bg-pagination-item);
color: var(--color-pagination-item);
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.pagination-list a:hover,
.pagination-list-secondary a:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
.pagination-list .item,
.pagination-list-secondary .item {
font-size: 13px;
}
.pagination-list .item.pager,
.pagination-list-secondary .item.pager {
display: flex;
align-items: center;
min-width: 140px;
}
@media screen and (max-width: 1160px) {
.pagination-list .item.pager,
.pagination-list-secondary .item.pager {
min-width: auto;
}
}
.pagination-list .item.pager a,
.pagination-list-secondary .item.pager a {
width: 100%;
padding: 0 20px;
text-transform: uppercase;
}
@media screen and (max-width: 480px) {
.pagination-list .item.pager a,
.pagination-list-secondary .item.pager a {
padding: 0 15px;
}
}
/*.pagination-list .item.pager:first-child,
.pagination-list-secondary .item.pager:first-child {
margin-right: 30px;
}*/
/*@media screen and (max-width: 767px) {
.pagination-list .item.pager:first-child,
.pagination-list-secondary .item.pager:first-child {
margin-right: 20px;
}
}*/
.pagination-list .item.pager:first-child .text,
.pagination-list-secondary .item.pager:first-child .text {
margin-left: 10px;
}
/*.pagination-list .item.pager:last-child,
.pagination-list-secondary .item.pager:last-child {
margin-left: 30px;
}*/
/*@media screen and (max-width: 767px) {
.pagination-list .item.pager:last-child,
.pagination-list-secondary .item.pager:last-child {
margin-left: 20px;
}
}*/
.pagination-list .item.pager:last-child .text,
.pagination-list-secondary .item.pager:last-child .text {
margin-right: 10px;
}
@media screen and (max-width: 480px) {
.pagination-list .item .text,
.pagination-list-secondary .item .text {
display: none;
}
}
.pagination-list .item span,
.pagination-list-secondary .item span {
font-size: 18px;
font-weight: 300;
}
.pagination-list .dots a,
.pagination-list-secondary .dots a {
background: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: var(--color-item);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 50px;
height: 100%;
}
@media screen and (min-width: 1025px) {
.pagination-list .dots a:hover,
.pagination-list-secondary .dots a:hover {
color: var(--color-active);
}
}
@media screen and (max-width: 1460px) {
.pagination-list-secondary .list .item {
display: none;
}
}
@media screen and (max-width: 1460px) {
.pagination-list-secondary .list .item.active {
display: block;
margin: 0;
}
}
.pagination-list-secondary .item {
font-size: 13px;
}
@media screen and (max-width: 1460px) {
.pagination-list-secondary .item.pager {
min-width: auto;
}
}
@media screen and (max-width: 1460px) {
.pagination-list-secondary .item .text {
display: none;
}
}
.splash-join {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--bg-splash);
color: var(--color-splash);
padding: 15px 20px;
border-radius: 20px;
}
.splash-join .holder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 50px;
}
.splash-join .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 50px;
}
.splash-join .wrap div {
font-weight: 300;
font-size: 30px;
-ms-flex-item-align: center;
align-self: center;
}
.splash-join svg {
margin-right: 10px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
color: var(--color-active);
}
.splash-join .btn {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-radius: 20px;
padding: 11px 30px;
color: var(--color-btn-splash);
background-color: var(--color-active);
border: none;
cursor: pointer;
font-weight: 400;
font-size: 24px;
font-family: inherit;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.splash-join .btn:hover {
background-color: var(--color-active-darkness);
}
}
.splash-join .btn:active {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
.splash-join strong {
font-weight: 400;
}
.splash-now {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--bg-splash);
color: var(--color-splash);
padding: 30px;
border-radius: 20px;
}
.splash-now .holder {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px 30px;
}
@media screen and (max-width: 1024px) {
.splash-now .holder {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.splash-now .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-size: 80px;
}
@media screen and (max-width: 1024px) {
.splash-now .wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
}
@media screen and (max-width: 768px) {
.splash-now .wrap {
font-size: 50px;
}
}
.splash-now .text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1;
}
.splash-now .sup {
font-weight: 300;
font-size: 30px;
}
@media screen and (max-width: 768px) {
.splash-now .sup {
font-size: 24px;
margin-bottom: 5px;
}
}
.splash-now .sub {
font-size: 60px;
}
@media screen and (max-width: 768px) {
.splash-now .sub {
font-size: 35px;
}
}
.splash-now strong {
font-weight: 900;
}
.splash-now svg {
margin-right: 10px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
color: var(--color-active);
}
.splash-now .btn {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 196px;
width: 100%;
border-radius: 20px;
padding: 21px;
color: var(--color-btn-splash);
background-color: var(--color-active);
border: none;
cursor: pointer;
font-weight: 400;
font-size: 24px;
font-family: inherit;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.splash-now .btn:hover {
background-color: var(--color-active-darkness);
}
}
.splash-now .btn:active {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
@media screen and (max-width: 1024px) {
.splash-now .btn {
max-width: 100%;
}
}
@media screen and (max-width: 991px) {
.thumbs-landscape-slider {
margin: 0 -20px;
padding: 0 20px;
}
}
@media screen and (max-width: 768px) {
.thumbs-landscape-slider {
margin: 0 -10px;
padding: 0 10px;
}
}
@media screen and (max-width: 991px) {
.thumbs-portrait-slider {
margin: 0 -20px;
padding: 0 20px;
}
}
@media screen and (max-width: 768px) {
.thumbs-portrait-slider {
margin: 0 -10px;
padding: 0 10px;
}
}
.thumb-portrait .media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 136.25%;
background-color: var(--bg-item);
font-size: 16px;
margin-bottom: 10px;
}
@media screen and (min-width: 1025px) {
.thumb-portrait .media:hover img {
transform: scale(1.025);
}
}
.thumb-portrait .media a{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.thumb-portrait .media img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
object-fit: cover;
transition: 0.5s;
width: 100%;
height: 100%;
transform: scale(1);
will-change: transform;
}
.thumb-portrait .content {
overflow: hidden;
}
.thumb-portrait .name {
color: var(--color-name);
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 400;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.thumb-portrait .name:hover {
color: var(--color-active);
}
}
.thumb-portrait .name span {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: 18px;
}
.thumb-portrait .svg-icon {
color: var(--color-active);
flex-shrink: 0;
flex-grow: 0;
}
.thumb-portrait .list {
margin-top: 4px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 20px;
font-weight: 300;
color: var(--color-item);
}
.thumb-portrait .box {
position: relative;
}
.thumb-portrait .box:last-child::after {
display: none;
}
.thumb-portrait .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.thumbs-portrait {
--flex-column-gap: 20px;
--flex-row-gap: 20px;
--flex-items: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-row-gap) var(--flex-column-gap);
}
@media screen and (max-width: 1366px) {
.thumbs-portrait {
--flex-items: 3;
}
}
@media screen and (max-width: 991px) {
.thumbs-portrait {
--flex-items: 2;
}
}
@media screen and (max-width: 479px) {
.thumbs-portrait {
--flex-items: 1;
}
}
.thumb-portrait-item {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-column-gap));
}
@media screen and (min-width: 1025px) {
.thumb-portrait-item:hover img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.thumb-portrait-item:hover .name-cat,
.thumb-portrait-item:hover .name {
color: var(--color-active);
}
}
.thumb-portrait-item .media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 136.25%;
margin-bottom: 7px;
}
.thumb-portrait-item img {
position: absolute;
bottom: 0;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
right: 0;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
}
.thumb-portrait-item .tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.thumb-portrait-item .name {
color: var(--color-name);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-weight: 400;
font-size: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.thumb-portrait-item .name span {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: 18px;
}
.thumb-portrait-item .name-cat {
max-width: 100%;
color: var(--color-name);
font-weight: 400;
font-size: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.thumb-portrait-item .list {
margin-top: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
font-weight: 300;
color: var(--color-list-item);
}
.thumb-portrait-item .box {
position: relative;
}
.thumb-portrait-item .box:last-child::after {
display: none;
}
.thumb-portrait-item .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-list-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.thumbs-album {
--flex-column-gap: 20px;
--flex-row-gap: 20px;
--flex-items: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-row-gap) var(--flex-column-gap);
}
@media screen and (max-width: 1366px) {
.thumbs-album {
--flex-items: 4;
}
}
@media screen and (max-width: 1024px) {
.thumbs-album {
--flex-items: 3;
}
}
@media screen and (max-width: 767px) {
.thumbs-album {
--flex-items: 2;
}
}
@media screen and (max-width: 479px) {
.thumbs-album {
--flex-column-gap: 10px;
--flex-row-gap: 10px;
}
}
.thumbs-album.sm {
--flex-items: 4;
}
@media screen and (max-width: 1366px) {
.thumbs-album.sm {
--flex-items: 3;
}
}
@media screen and (max-width: 991px) {
.thumbs-album.sm {
--flex-items: 2;
}
}
.thumb-album {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-column-gap));
}
@media screen and (min-width: 1025px) {
.thumb-album:hover img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.thumb-album:hover .info {
background-color: rgba(var(--bg-rgb-active-progress-bar), 0.6);
color: var(--color-item--active);
}
.thumb-album:hover .info .svg-icon {
color: var(--color-item--active);
}
}
.thumb-album .media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 136.25%;
margin-bottom: 15px;
background-color: var(--bg-item);
}
.thumb-album .info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
background-color: var(--bg-tools-card-media);
color: var(--color-thumb-name);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 12px 5px;
font-weight: 300;
font-size: 30px;
transition: background-color 0.3s, color 0.3s;
}
.thumb-album .info span {
font-size: 16px;
letter-spacing: 0.02em;
}
.thumb-album .info .svg-icon {
color: var(--color-thumb-name);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.thumb-album .img {
position: absolute;
bottom: 0;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
right: 0;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
}
.thumb-album .sticky {
position: absolute;
bottom: 10px;
right: 10px;
color: #170f29;
background: rgba(255, 255, 255, 0.9);
font-weight: 300;
font-size: 20px;
line-height: 1.3;
border-radius: 8px;
padding: 2px 8px 2px 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
}
.thumb-album .sticky .svg-icon {
color: #170F29;
}
.thumb-album .sticky span {
font-size: 14px;
}
.thumb-album .sticky-lock {
width: 22px;
height: 22px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
position: absolute;
bottom: 10px;
right: 10px;
color: #170f29;
font-size: 16px;
}
.thumb-album .sticky-lock .svg-icon {
color: #170F29;
}
.thumb-album .content {
overflow: hidden;
margin-top: 15px;
}
.thumb-album .desc {
display: inline-block;
vertical-align: top;
font-weight: 400;
font-size: 18px;
color: var(--color-thumb-desc);
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.thumb-album .desc:hover {
color: var(--color-active);
}
}
.thumb-album .author {
margin-top: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
.thumb-album .ava {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 37px;
height: 37px;
overflow: hidden;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--bg-item);
font-weight: 400;
font-size: 16px;
}
.thumb-album .ava img {
max-width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.thumb-album .detail {
font-weight: 300;
font-size: 14px;
line-height: 1;
color: var(--color-main);
min-width: 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 2px;
}
.thumb-album .name {
color: var(--color-thumb-name);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 300;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.thumb-album .name:hover {
color: var(--color-active);
}
}
.thumb-album .name span {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: 16px;
}
.thumb-album .svg-icon {
color: var(--color-active);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.thumb-album .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2px 14px;
color: var(--color-thumb-item);
}
.thumb-album .box {
position: relative;
}
.thumb-album .box:last-child::after {
display: none;
}
.thumb-album .box::after {
content: "";
position: absolute;
top: 6px;
right: -10px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.list-image {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 3;
width: 63px;
height: 86px;
}
@media screen and (max-width: 480px) {
.list-image {
width: 44px;
height: 60px;
}
}
@media screen and (max-width: 374px) {
.list-image {
left: auto;
bottom: auto;
top: 10px;
left: 10px;
}
}
.list-image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
height: auto;
border-radius: 15px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (min-width: 1025px) {
.list-image img:hover {
z-index: 3;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.list-image img:nth-child(2n) {
left: 10px;
bottom: 10px;
z-index: 1;
}
@media screen and (min-width: 1025px) {
.list-image img:nth-child(2n):hover {
z-index: 3;
}
}
.thumbs-models {
--flex-column-gap: 8px;
--flex-row-gap: 8px;
--flex-items: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-row-gap) var(--flex-column-gap);
}
@media screen and (max-width: 1366px) {
.thumbs-models {
--flex-items: 4;
}
}
@media screen and (max-width: 1060px) {
.thumbs-models {
--flex-items: 3;
}
}
@media screen and (max-width: 860px) {
.thumbs-models {
--flex-items: 2;
}
}
.thumb-model {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-column-gap));
}
@media screen and (min-width: 1025px) {
.thumb-model:hover .media {
border-color: rgba(250, 74, 31, 0.5);
}
.thumb-model:hover img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.thumb-model:hover .name {
color: var(--color-active);
}
}
.thumb-model .media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 136.25%;
border: 5px solid transparent;
-webkit-transition: border 0.3s;
transition: border 0.3s;
}
@media screen and (max-width: 860px) {
.thumb-model .media {
border: none;
}
}
.thumb-model .img {
position: absolute;
bottom: 0;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
right: 0;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
}
.thumb-model .sticky {
position: absolute;
bottom: 50px;
left: 5px;
right: 5px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.thumb-model .sticky img {
max-width: 100%;
height: auto;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
@media screen and (max-width: 568px) {
.thumb-model .sticky img {
max-width: 25px;
}
}
.thumb-model .wrap {
color: #fff;
background: rgba(250, 74, 31, 0.7);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
padding: 3px 10px;
font-weight: 400;
font-size: 18px;
border-radius: 15px;
}
@media screen and (max-width: 568px) {
.thumb-model .wrap {
font-size: 14px;
}
}
@media screen and (max-width: 374px) {
.thumb-model .wrap {
font-size: 11px;
}
}
.thumb-model .image {
width: 88px;
height: 88px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-size: 18px;
color: var(--color-name);
}
@media screen and (max-width: 568px) {
.thumb-model .image {
width: 68px;
height: 68px;
}
}
.thumb-model .image::before, .thumb-model .image::after {
position: absolute;
content: "";
border-radius: 100%;
}
.thumb-model .image::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-user-avatar-line);
}
.thumb-model .image::after {
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--bg-user-avatar-shape);
}
.thumb-model .image img {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
border-radius: 40px;
-o-object-fit: cover;
object-fit: cover;
position: relative;
z-index: 2;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 568px) {
.thumb-model .image img {
width: 60px;
height: 60px;
}
}
.thumb-model .image .svg-icon {
position: absolute;
top: 5px;
right: 4px;
z-index: 2;
color: #FA4A1F;
background-color: #fff;
border-radius: 18px;
}
.thumb-model .image span {
position: relative;
z-index: 2;
font-size: 40px;
background: var(--bg-item);
color: var(--color-main);
width: 80px;
height: 80px;
border-radius: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 568px) {
.thumb-model .image span {
width: 60px;
height: 60px;
font-size: 30px;
}
}
.thumb-model .panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 10px;
gap: 2px;
margin-top: -40px;
}
@media screen and (max-width: 568px) {
.thumb-model .panel {
margin-top: -25px;
gap: 0;
}
}
@media screen and (max-width: 410px) {
.thumb-model .panel {
margin-top: -40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
}
}
@media screen and (max-width: 410px) {
.thumb-model .panel .col:not(.primary):not(.secondary) {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
}
@media screen and (max-width: 410px) {
.thumb-model .panel .col.primary {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
@media screen and (max-width: 410px) {
.thumb-model .panel .col.secondary {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
}
.thumb-model .group-item {
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
background: var(--bg-group-item);
color: #fff;
font-weight: 300;
font-size: 16px;
min-height: 36px;
min-width: 70px;
padding: 10px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 6px;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
@media screen and (max-width: 568px) {
.thumb-model .group-item {
min-width: auto;
}
}
.thumb-model .group-item span {
font-size: 14px;
white-space: nowrap;
}
.thumb-model .tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.thumb-model .name {
color: var(--color-thumb-desc);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-weight: 400;
font-size: 24px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.thumb-model .name span {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: 18px;
}
.thumb-model .list {
margin-top: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
font-weight: 300;
color: var(--color-list-item);
}
.thumb-model .box {
position: relative;
}
.thumb-model .box:last-child::after {
display: none;
}
.thumb-model .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-list-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.poster-page {
padding-bottom: 24.85%;
position: relative;
}
.poster-page img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.channel-tools {
font-size: 16px;
font-weight: 300;
color: var(--color-content-text);
margin-top: 10px;
}
.channel-tools .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
margin-bottom: 10px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.channel-tools .avatar {
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
}
@media screen and (max-width: 991px) {
.channel-tools .avatar {
width: 60px;
height: 60px;
}
}
.channel-tools .avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.channel-tools .name {
font-weight: 900;
font-size: 30px;
color: var(--color-channel-page-name);
}
.channel-tools .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
color: var(--color-thumb-item);
}
.channel-tools .box {
position: relative;
}
.channel-tools .box:last-child::after {
display: none;
}
.channel-tools .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.channel-tools .panel {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 10px;
}
@media screen and (max-width: 991px) {
.channel-tools .panel {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media screen and (max-width: 390px) {
.channel-tools .panel {
gap: 5px;
}
}
@media screen and (max-width: 991px) {
.channel-tools .info {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
}
.channel-tools .rank {
font-weight: 300;
font-size: 24px;
line-height: 0.83333;
letter-spacing: 0.02em;
color: var(--color-channel-page-rank);
}
@media screen and (max-width: 991px) {
.channel-tools .rank {
font-size: 20px;
}
}
.channel-tools .rank span {
font-weight: 400;
color: var(--color-channel-page-rank-span);
}
.channel-tools .tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 5px;
}
@media screen and (max-width: 480px) {
.channel-tools .tools.second {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
}
.channel-tools .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
cursor: pointer;
gap: 0 5px;
font-size: 24px;
min-width: 50px;
min-height: 50px;
padding: 13px;
font-weight: 300;
border-radius: 20px;
background-color: var(--bg-channel-page-panel);
color: var(--color-channel-page-panel);
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.channel-tools .btn:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
@media screen and (max-width: 390px) {
.channel-tools .btn {
font-size: 18px;
line-height: 1;
}
}
.channel-tools .btn.primary {
font-size: 14px;
padding: 10px 20px;
line-height: 1.143;
min-height: auto;
}
.channel-tools .btn.second {
padding: 13px 18px;
background-color: var(--bg-active);
color: var(--color-item--active);
}
@media screen and (min-width: 1025px) {
.channel-tools .btn.second:hover {
background-color: var(--color-footer-list--active);
}
}
@media screen and (max-width: 390px) {
.channel-tools .btn.second {
padding: 13px;
}
}
.channel-tools .btn span {
font-size: 18px;
}
@media screen and (max-width: 390px) {
.channel-tools .btn span {
display: none;
}
}
.channel-tools .content {
padding-left: 113px;
}
@media screen and (max-width: 991px) {
.channel-tools .content {
padding-left: 0;
}
}
.channel-tools .description {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-content-text);
}
.channel-tools .content-tags {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.content-tags {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.content-tags a {
display: block;
padding: 10px 20px;
font-weight: 300;
font-size: 14px;
line-height: 1.143;
letter-spacing: 0.02em;
border-radius: 15px;
color: var(--color-channel-page-panel);
background-color: var(--bg-channel-page-tags);
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.content-tags a:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.bottom-more {
margin-top: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
font-family: inherit;
}
.bottom-more .btn {
background: var(--bg-button);
color: var(--color-more);
border-radius: 20px;
padding: 15px;
font-weight: 300;
font-size: 13px;
min-height: 50px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px 5px;
min-width: 220px;
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.bottom-more .btn:hover {
background-color: var(--bg-active);
color: var(--color-primary);
}
}
.bottom-more .btn span {
font-size: 18px;
}
.post-author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.post-author .ava {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--bg-item);
font-weight: 400;
font-size: 16px;
}
.post-author .ava img {
max-width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.post-author .detail {
font-weight: 300;
font-size: 14px;
line-height: 1;
color: var(--color-main);
min-width: 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 8px;
}
.post-author .name {
color: var(--color-thumb-name);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 300;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.post-author .name:hover {
color: var(--color-active);
}
}
.post-author .name .svg-icon {
color: var(--color-active);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.post-author .name span {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
.post-author .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
color: var(--color-thumb-item);
}
.post-author .box {
position: relative;
}
.post-author .box:last-child::after {
display: none;
}
.post-author .box::after {
content: "";
position: absolute;
top: 6px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.post-author .btn-sbsc {
font-size: 18px;
min-height: 36px;
padding: 8px 20px;
}
.post-author .btn-sbsc span {
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.btn-sbsc {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0 5px;
font-size: 24px;
min-height: 50px;
font-weight: 300;
border-radius: 20px;
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
padding: 13px;
background-color: var(--bg-active);
color: var(--color-item--active);
}
@media screen and (min-width: 1025px) {
.btn-sbsc:hover {
background-color: var(--color-footer-list--active);
}
}
.btn-sbsc span {
font-size: 18px;
}
@media screen and (max-width: 480px) {
.btn-sbsc span {
display: none;
}
}
.post {
max-width: 800px;
width: 100%;
margin: 25px auto 0;
font-weight: 300;
font-size: 18px;
line-height: 1.4;
color: var(--color-post);
}
.post img {
width: 100%;
height: auto;
display: inline-block;
vertical-align: top;
border-radius: 15px;
overflow: hidden;
}
.post p {
margin-top: 25px;
}
.post p:first-child {
margin-top: 0;
}
.profile-item {
margin-top: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
}
@media screen and (max-width: 640px) {
.profile-item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.profile-item:first-child {
margin-top: 0;
}
.profile-item .media {
max-width: 306px;
width: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.profile-item .media img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.profile-item .content {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 1px;
max-width: 100%;
}
@media screen and (max-width: 640px) {
.profile-item .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.profile-item .name {
font-weight: 400;
font-size: 24px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
overflow: hidden;
max-width: 100%;
color: var(--color-profile-name);
}
.profile-item .name em {
color: var(--bg-active);
}
.profile-item .name span {
font-size: 30px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
.profile-item .svg-icon {
color: var(--color-active);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.profile-item .list {
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 20px;
font-weight: 300;
font-size: 14px;
color: var(--color-post-item);
}
.profile-item .box {
position: relative;
}
.profile-item .box:last-child::after {
display: none;
}
.profile-item .box::after {
content: "";
position: absolute;
top: 8px;
right: -12px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.profile-item .desc {
margin-top: 12px;
}
.profile-item .bottom {
margin-top: 15px;
}
.profile-item .btn {
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0 5px;
font-weight: 300;
font-size: 18px;
min-height: 50px;
border-radius: 20px;
letter-spacing: 0.02em;
padding: 12px;
min-width: 144px;
background-color: var(--bg-active);
color: var(--color-item--active);
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.profile-item .btn:hover {
background-color: var(--color-footer-list--active);
}
}
.share-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
font-weight: 400;
font-size: 24px;
margin-top: 25px;
color: var(--color-post-share);
}
.share-list span {
-ms-flex-item-align: center;
align-self: center;
}
.social-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
}
.social-list a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (min-width: 1025px) {
.social-list a:hover {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
}
.seo-box {
color: var(--color-seo);
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 10px;
}
@media screen and (max-width: 1024px) {
.seo-box {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.seo-box .title {
font-weight: 900;
font-size: 30px;
margin-bottom: 15px;
width: 35%;
padding-right: 80px;
}
@media screen and (max-width: 1024px) {
.seo-box .title {
padding: 0;
width: auto;
}
}
.seo-box .hold {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
width: 65%;
color: var(--color-seo-hold);
}
@media screen and (max-width: 1024px) {
.seo-box .hold {
width: auto;
}
}
.content-text {
font-weight: 300;
font-size: 18px;
color: var(--color-content-text);
line-height: 1.4;
letter-spacing: 0.02em;
}
.content-text h2 {
color: var(--color-title-content-text);
font-weight: 900;
font-size: 24px;
margin: 1.75rem 0 1rem;
}
.content-text h2:first-child {
margin-top: 0;
}
.content-text p {
margin: 1rem 0 1.75rem;
}
.content-text ol,
.content-text ul {
padding: 0 0 0 25px;
margin: 1rem 0 1.75rem;
}
.content-text ul {
list-style-type: disc;
}
.content-text ol {
list-style-type: decimal;
}
.content-text li {
margin: 1rem 0;
}
.media-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 40px;
}
@media screen and (max-width: 1024px) {
.media-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.media-container .spot .item {
margin-bottom: 10px;
border-radius: 15px;
overflow: hidden;
}
.media-container .spot .item:last-child {
margin-bottom: 0;
}
.media-container .spot img {
display: block;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: auto;
}
.media-container .text {
font-weight: 300;
font-size: 12px;
line-height: 1.66667;
letter-spacing: 0.2em;
color: var(--color-gray);
text-align: center;
margin-bottom: 5px;
}
.media-column {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
min-width: 1px;
}
.media-column.secondary {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 300px;
}
@media screen and (max-width: 1024px) {
.media-column.secondary {
display: none;
}
}
.gallery {
--flex-gap: 10px;
--flex-items: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-gap);
}
@media screen and (max-width: 1366px) {
.gallery {
--flex-items: 4;
}
}
@media screen and (max-width: 767px) {
.gallery {
--flex-items: 3;
}
}
@media screen and (max-width: 414px) {
.gallery {
--flex-items: 2;
}
}
.gallery-item {
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background-color: #FA4A1F;
position: relative;
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
}
@media screen and (min-width: 1025px) {
.gallery-item:hover::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.gallery-item:hover img {
opacity: 0.8;
}
}
.gallery-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 15px;
-webkit-box-shadow: inset 0 0 0 4px #FA4A1F;
box-shadow: inset 0 0 0 4px #FA4A1F;
z-index: 2;
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}
.gallery-item img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: top;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 100%;
object-fit: cover;
height: 100%;
}
.gallery-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
}
.player {
position: relative;
/* padding-bottom: 62.205%; */
}
.player .media {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
border-radius: 10px;
}
.media-panel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 50px;
}
@media screen and (max-width: 767px) {
.media-panel {
gap: 20px;
}
}
.button-media {
border: none;
cursor: pointer;
background: none;
font-family: inherit;
font-size: 30px;
width: 60px;
height: 60px;
border-radius: 60px;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: scale(1);
transform: scale(1);
color: #170F29;
will-change: transform;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
@media screen and (min-width: 1025px) {
.button-media:hover {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
}
@media screen and (max-width: 767px) {
.button-media {
width: 50px;
height: 50px;
font-size: 25px;
}
}
.button-media.play {
width: 120px;
height: 120px;
font-size: 40px;
}
@media screen and (max-width: 1366px) {
.button-media.play {
width: 100px;
height: 100px;
font-size: 35px;
}
}
@media screen and (max-width: 767px) {
.button-media.play {
width: 80px;
height: 80px;
font-size: 30px;
}
}
.button-media.play svg {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
.button-media.before svg {
-webkit-transform: translate3d(-2px, 0, 0);
transform: translate3d(-2px, 0, 0);
}
.button-media.after svg {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
.player-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.player-navigation {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.player-navigation .item {
width: calc(50% - 5px);
}
}
.player-navigation .btn {
background: none;
border: none;
cursor: pointer;
font-weight: 300;
font-size: 12px;
font-family: inherit;
text-transform: uppercase;
background-color: var(--bg-btn-player-nav);
color: var(--color-btn-player-nav);
min-width: 140px;
padding: 14px 26px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.player-navigation .btn:hover {
color: var(--color-btn-player-nav--hover);
background-color: var(--bg-btn-player-nav--hover);
}
}
@media screen and (max-width: 767px) {
.player-navigation .btn {
width: 100%;
}
}
.player-navigation svg {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.player-navigation span {
font-size: 18px;
}
.spot-place {
border-radius: 15px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.spot-place {
width: 100%;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.player-tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px 40px;
margin-top: 30px;
}
.player-tools .title {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: 900;
font-size: 30px;
letter-spacing: 0.02em;
-ms-flex-item-align: center;
align-self: center;
}
.player-tools .wrap {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 40px;
}
@media screen and (max-width: 1366px) {
.player-tools .wrap {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 10px;
}
}
.date-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: 300;
font-size: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
color: var(--color-date-list);
}
.date-list .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
font-size: 20px;
}
@media screen and (max-width: 390px) {
.date-list .item {
font-size: 16px;
gap: 5px;
}
}
.date-list svg {
color: var(--color-gray);
}
.date-list span {
font-size: 18px;
}
@media screen and (max-width: 390px) {
.date-list span {
font-size: 16px;
}
}
.wrap-rate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
}
.wrap-rate .btn {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
gap: 0 5px;
font-size: 24px;
min-width: 50px;
min-height: 50px;
padding: 13px;
font-weight: 300;
border-radius: 20px;
background-color: var(--bg-channel-page-panel);
color: var(--color-channel-page-panel);
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.wrap-rate .btn:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
@media screen and (max-width: 390px) {
.wrap-rate .btn {
font-size: 18px;
}
}
.wrap-rate .btn.primary {
font-size: 14px;
padding: 10px 20px;
line-height: 1.143;
min-height: auto;
}
.wrap-rate .btn.second {
padding: 13px 18px;
background-color: var(--bg-active);
color: var(--color-item--active);
}
@media screen and (min-width: 1025px) {
.wrap-rate .btn.second:hover {
background-color: var(--color-footer-list--active);
}
}
@media screen and (max-width: 390px) {
.wrap-rate .btn.second {
padding: 12px;
}
}
.wrap-rate .btn span {
font-size: 18px;
}
@media screen and (max-width: 390px) {
.wrap-rate .btn span {
/* display: none; */
}
}
.player-playlist {
padding: 30px 0 20px;
}
.player-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
margin-top: 10px;
}
@media screen and (max-width: 1366px) {
.player-panel {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.user-box {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border-radius: 20px;
padding: 15px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}
.user-box .image {
width: 90px;
height: 90px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-size: 18px;
color: var(--color-name);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.user-box .image::before, .user-box .image::after {
position: absolute;
content: "";
border-radius: 100%;
}
.user-box .image::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-user-avatar-line);
}
.user-box .image::after {
background: var(--bg-user-avatar);
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--bg-user-avatar-shape);
}
.user-box .image img {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
border-radius: 40px;
-o-object-fit: cover;
object-fit: cover;
position: relative;
z-index: 2;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.user-box .image .check {
position: absolute;
top: 5px;
right: 4px;
z-index: 2;
color: #FA4A1F;
background-color: #fff;
border-radius: 18px;
}
.user-box .image span {
position: relative;
z-index: 2;
font-size: 40px;
background: var(--bg-item);
color: var(--color-main);
width: 80px;
height: 80px;
border-radius: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.user-box .rate {
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
backdrop-filter: blur(4px);
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
background: var(--bg-group-item);
color: #fff;
font-weight: 300;
font-size: 16px;
line-height: 1;
min-height: 26px;
padding: 5px 6px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 6px;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
.user-box .rate em {
font-size: 14px;
white-space: nowrap;
}
.user-box .detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 5px;
}
.user-box .name {
font-weight: 400;
font-size: 22px;
}
.user-box .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4px 15px;
font-weight: 300;
color: var(--color-thumb-item);
}
.user-box .box {
position: relative;
}
.user-box .box:last-child::after {
display: none;
}
.user-box .box::after {
content: "";
position: absolute;
top: 6px;
right: -10px;
background-color: var(--color-item);
width: 4px;
height: 4px;
border-radius: 4px;
}
.user-box .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
.user-box .btn-sbsc {
min-height: 36px;
font-size: 18px;
font-weight: 300;
gap: 5px;
padding: 0 15px;
}
.user-box .btn-sbsc span {
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 390px) {
.user-box .btn-sbsc span {
display: none;
}
}
.info-liked {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
gap: 0 10px;
font-size: 16px;
min-height: 36px;
padding: 0 10px;
font-weight: 300;
border-radius: 20px;
background: rgba(23, 15, 41, 0.7);
color: #fff;
letter-spacing: 0.02em;
}
.info-liked span {
font-size: 14px;
}
.navigation-switch {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px 5px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media screen and (max-width: 1366px) {
.navigation-switch {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
@media screen and (max-width: 767px) {
.navigation-switch {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.navigation-switch .btn {
border-radius: 20px;
min-width: 50px;
height: 50px;
border: none;
cursor: pointer;
font-size: 24px;
font-weight: 300;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
background-color: var(--bg-btn-navigation);
color: var(--color-btn-navigation);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.navigation-switch .btn:hover {
color: var(--color-btn-navigation--hover);
background-color: var(--bg-btn-navigation--hover);
}
}
.navigation-switch .btn.active {
color: var(--color-btn-navigation--hover);
background-color: var(--bg-btn-navigation--hover);
}
@media screen and (max-width: 479px) {
.navigation-switch .btn {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: none;
}
}
.navigation-switch .btn[data-attr-report-action=true], .navigation-switch .btn[data-attr-screens-action=true] {
color: var(--color-btn-navigation--hover);
background-color: var(--bg-btn-navigation--hover);
}
.navigation-switch .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
margin-left: 15px;
}
@media screen and (max-width: 767px) {
.navigation-switch .group {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: 0;
width: 100%;
}
}
.navigation-switch .group .btn {
padding: 0 20px;
}
@media screen and (max-width: 767px) {
.navigation-switch .group .btn:not(.btn-share) {
width: 50%;
}
}
.navigation-switch span {
font-size: 18px;
}
@media screen and (max-width: 767px) {
.navigation-switch .btn-share {
width: 100%;
}
}
.drop-share {
position: relative;
}
@media screen and (max-width: 767px) {
.drop-share {
width: 50%;
}
}
.drop-share.show .btn-share {
color: var(--color-btn-navigation--hover);
background-color: var(--bg-btn-navigation--hover);
}
.drop-share.show .drop-box {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
.drop-box {
position: absolute;
z-index: 10;
-webkit-box-shadow: var(--box-shadow-navigarion-share);
box-shadow: var(--box-shadow-navigarion-share);
background: var(--bg-navigation-share);
border-radius: 20px;
padding: 20px;
width: 100%;
min-width: 400px;
right: 0;
top: calc(100% + 5px);
opacity: 0;
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
visibility: hidden;
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
.drop-box .title {
text-align: center;
font-weight: 400;
font-size: 24px;
letter-spacing: 0.02em;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color-row);
}
.drop-box .list {
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0 5px;
}
.drop-box .link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 20px;
background-color: var(--bg-navigation-social-list);
font-size: 24px;
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.drop-box .link:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.copy-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 10px;
}
.copy-box .input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
width: 100%;
border: 2px solid var(--border-color-copy-box);
border-radius: 20px;
padding: 13px 20px;
line-height: 1.25;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-navigation-input);
background: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.copy-box .copy {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
cursor: pointer;
font-size: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.25;
padding: 13px 15px;
border: none;
border-radius: 20px;
color: var(--color-item--active);
background-color: var(--bg-navigation-copy);
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.copy-box .copy:hover {
background-color: var(--bg-active);
}
}
.copy-box .copy.copied {
background-color: #11931b;
}
.copy-box .copy.copied .svg-icon {
opacity: 0;
}
.copy-box .copy.copied::after {
opacity: 1;
}
.copy-box .copy::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -65%) rotate(45deg);
transform: translate(-50%, -65%) rotate(45deg);
width: 6px;
height: 16px;
border-right: 3px solid white;
border-bottom: 3px solid white;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.player-description {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
margin-top: 30px;
}
.list-columns {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 50px;
}
@media screen and (max-width: 1160px) {
.list-columns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.list-columns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
}
.list-columns .title {
font-weight: 400;
font-size: 24px;
margin-bottom: 15px;
}
.list-columns .column {
width: 30%;
}
@media screen and (max-width: 1160px) {
.list-columns .column {
width: auto;
}
}
.list-columns .column.secondary {
width: 40%;
}
@media screen and (max-width: 1160px) {
.list-columns .column.secondary {
width: 100%;
}
}
.content-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.content-list .item {
display: block;
padding: 10px 20px;
font-weight: 300;
font-size: 14px;
line-height: 1.143;
letter-spacing: 0.02em;
border-radius: 15px;
color: var(--color-channel-page-panel);
background-color: var(--bg-channel-page-tags);
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.content-list .item:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.adding-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1px;
font-weight: 300;
font-size: 14px;
line-height: 1.143;
letter-spacing: 0.02em;
border-radius: 15px;
color: var(--color-channel-page-panel);
background-color: var(--bg-channel-page-tags);
}
@media screen and (min-width: 1025px) {
.adding-item:hover {
background-color: #777184;
}
.adding-item:hover a {
color: #fff;
}
.adding-item:hover i {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 1024px) {
.adding-item {
background-color: #777184;
}
.adding-item a {
color: #fff;
}
}
.adding-item a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.adding-item img {
width: 36px;
height: 36px;
border-radius: 14px;
}
.adding-item span {
padding: 0 10px;
}
.adding-item i {
padding-right: 10px;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 1024px) {
.adding-item i {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.button-add {
cursor: pointer;
}
.button-add use {
display: none;
}
.button-add[data-change-status-follow=false] use[href="#icon-check-plus"] {
display: block;
}
.button-add[data-change-status-follow=true] use[href="#icon-check-accept"] {
display: block;
color: #6CFF00;
}
@media screen and (min-width: 1025px) {
.button-add[data-change-status-follow=true]:hover use[href="#icon-check-accept"] {
display: none;
}
.button-add[data-change-status-follow=true]:hover use[href="#icon-check-minus"] {
display: block;
}
}
.form-comment {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid var(--border-color-row);
}
.form-comment .title {
font-weight: 400;
font-size: 24px;
margin-bottom: 20px;
}
.form-comment .textarea {
height: 100px;
width: 100%;
max-width: 845px;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-main);
padding: 20px;
font-family: inherit;
}
.form-comment .btn {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 20px;
min-height: 50px;
min-width: 150px;
padding: 0 10px;
font-weight: 300;
font-size: 18px;
cursor: pointer;
font-family: inherit;
color: var(--color-item--active);
background: var(--bg-active);
border: none;
text-transform: uppercase;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.form-comment .btn:hover {
background-color: var(--color-footer-list--active);
}
}
.notify-list {
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
}
.notify-row {
padding: 10px 15px;
border-radius: 20px;
background-color: var(--bg-comment-notify-row);
color: var(--color-comment-notify-row);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
gap: 10px;
font-size: 20px;
}
.notify-row.error {
background-color: var(--bg-comment-notify-error-row);
color: var(--color-comment-icon);
}
.notify-row.error span {
color: var(--color-comment-notify-error-row);
}
.notify-row svg {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.notify-row span {
font-size: 14px;
-ms-flex-item-align: center;
align-self: center;
}
.comment-list {
margin-top: 30px;
}
.comment-list .check-box-label {
position: absolute;
top: 0;
left: auto;
right: 0;
}
.comment-list .item {
position: relative;
margin-bottom: 25px;
}
.comment-list .item.reply .reply-btn {
opacity: 1;
visibility: visible;
}
.comment-list .item:last-child {
margin-bottom: 0;
}
.comment-list .content {
margin-top: 30px;
}
.comment-list .wrap {
max-width: 845px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
@media screen and (min-width: 1025px) {
.comment-list .wrap:hover .reply-btn {
opacity: 1;
visibility: visible;
}
}
.comment-list .ava {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--color-ava-user);
background: var(--bg-user-avatar);
font-size: 20px;
}
.comment-list img {
width: 100%;
height: 100%;
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 100%;
}
.comment-list .detail .ava {
width: 30px;
height: 30px;
}
.comment-list .top-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
}
.comment-list .name {
font-weight: 300;
font-size: 18px;
color: var(--color-comment-name);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.comment-list .name:hover {
color: var(--color-active);
}
}
.comment-list .reply-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 20px;
border: none;
cursor: pointer;
background: none;
color: var(--color-comment-reply-icon);
-webkit-transition: color 0.3s, visibility 0.3s, opacity 0.3s;
transition: color 0.3s, visibility 0.3s, opacity 0.3s;
opacity: 0;
visibility: hidden;
}
@media screen and (min-width: 1025px) {
.comment-list .reply-btn:hover {
color: var(--color-active);
}
}
.comment-list .date {
font-weight: 300;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--color-gray);
}
.comment-list .messege {
margin-top: 12px;
border-radius: 0 20px 20px 20px;
padding: 15px 20px;
-webkit-box-shadow: var(--shadow-comment-box);
box-shadow: var(--shadow-comment-box);
background: var(--bg-gradient-comment-message);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-comment-message);
}
.comment-list .check {
color: var(--color-comment-check-user);
}
.comment-list .icon {
font-size: 8px;
color: var(--color-comment-reply-icon);
}
.comment-list .tag {
font-weight: 300;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--color-comment-tag);
}
.form-frame {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 479px) {
.form-frame {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.form-frame .textarea {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.form-frame .btn {
margin: 0;
}
.form-textarea {
height: 50px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: #7e778e;
padding: 13px 20px;
font-family: inherit;
}
.player-screens[data-attr-screens=false] {
display: none;
}
.player-screens[data-attr-screens=true] {
display: block;
}
.screens-slider {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.screens-slider {
margin: 30px -10px;
padding: 0 10px;
}
}
.screens-slider .swiper-prev:not(.swiper-button-prev),
.screens-slider .swiper-next:not(.swiper-button-next) {
top: 50%;
}
@media screen and (min-width: 1025px) {
.screens-slider .swiper-prev:not(.swiper-button-prev):hover,
.screens-slider .swiper-next:not(.swiper-button-next):hover {
color: var(--color-primary);
background-color: rgba(var(--bg-rgb-button--swiper), 0.8);
}
}
.screen-card {
display: block;
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 55.9%;
}
@media screen and (min-width: 1025px) {
.screen-card:hover img {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
}
.screen-card img {
position: absolute;
bottom: 0;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
right: 0;
top: 0;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
}
.player-report {
margin-top: 20px;
}
.player-report[data-attr-report=false] {
display: none;
}
.player-report .btn {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 20px;
min-height: 50px;
min-width: 150px;
padding: 0 10px;
font-weight: 300;
font-size: 18px;
cursor: pointer;
font-family: inherit;
color: var(--color-item--active);
background: var(--bg-active);
border: none;
text-transform: uppercase;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.player-report .btn:hover {
background-color: var(--color-footer-list--active);
}
}
.box-report {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px 80px;
}
@media screen and (max-width: 767px) {
.box-report {
gap: 20px 40px;
}
}
@media screen and (max-width: 479px) {
.box-report {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.box-report .title {
font-weight: 400;
font-size: 24px;
margin-bottom: 15px;
color: var(--color-title-report);
}
.radio-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
}
.radio-list .label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
font-weight: 300;
font-size: 16px;
color: var(--color-list-report);
}
.ratio-choice {
display: none;
}
.ratio-choice:checked + .radio-info::before {
background-color: var(--bg-radio-active-report);
border-color: var(--bg-radio-active-report);
}
.ratio-choice:checked + .radio-info::after {
-webkit-transform: translate3d(0, -50%, 0) scale(1);
transform: translate3d(0, -50%, 0) scale(1);
background-color: var(--bg-radio-active-dot-report);
}
.radio-info {
cursor: pointer;
display: inline-block;
vertical-align: top;
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding-left: 34px;
}
.radio-info::before, .radio-info::after {
content: "";
position: absolute;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
top: 50%;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: 100%;
background-color: var(--bg-radio-report);
}
.radio-info::before {
left: 0;
width: 20px;
height: 20px;
border: 2px solid var(--bg-radio-border-report);
border-radius: 100%;
}
.radio-info::after {
content: "";
left: 7px;
width: 10px;
height: 10px;
margin: auto;
-webkit-transform: translate3d(0, -50%, 0) scale(0);
transform: translate3d(0, -50%, 0) scale(0);
}
.field-textarea {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.box-textarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.box-textarea .title {
font-weight: 300;
font-size: 16px;
margin-bottom: 10px;
color: var(--color-title-report);
}
.box-textarea .textarea {
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: 2px solid var(--bg-textarea-border-report);
background-color: var(--bg-textarea-report);
border-radius: 20px;
margin: 0;
padding: 20px;
resize: none;
max-width: 905px;
min-height: 100px;
color: var(--color-textarea-report);
}
.general-filter {
margin-bottom: 30px;
}
.general-filter select {
display: none;
}
.wrap-cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 15px 20px;
}
.wrap-cols .col {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media screen and (max-width: 479px) {
.wrap-cols .col {
width: 100%;
}
}
.wrap-cols .col.secondary {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 1366px) {
.wrap-cols .col.secondary {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.wrap-cols .name {
display: block;
margin-bottom: 5px;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-general-filter-name);
}
.wrap-cols .input {
border-radius: 20px;
height: 50px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
background: var(--bg-search);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-main);
padding: 10px 20px;
font-family: inherit;
}
.wrap-cols .wrapped {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 767px) {
.wrap-cols .wrapped {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 1366px) {
.wrap-cols .wrap {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
}
.wrap-cols .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.wrap-cols .box {
width: 50%;
}
.wrap-cols .btn {
max-width: 200px;
width: 100%;
border: none;
cursor: pointer;
font-family: inherit;
border-radius: 20px;
padding: 15px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--bg-general-filter-bg);
color: var(--color-primary);
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
}
@media screen and (min-width: 1025px) {
.wrap-cols .btn:hover {
background-color: var(--color-active);
}
}
@media screen and (max-width: 1366px) {
.wrap-cols .btn {
max-width: 100%;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.checkbox-label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 5px 10px;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 100%;
overflow: hidden;
}
.checkbox-label.secondary .check-box {
border: 2px solid #170f29;
background-color: rgba(255, 255, 255, 0.6);
}
.checkbox-label.secondary .checkbox-input:checked + .check-box {
background-color: var(--bg-active);
border-color: var(--bg-active);
}
.checkbox-label .check-box {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
position: relative;
width: 24px;
height: 24px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border: 2px solid var(--border-color-comment-textarea);
-webkit-transition: background-color 0.2s, border 0.2s;
transition: background-color 0.2s, border 0.2s;
border-radius: 8px;
}
.checkbox-label .check-box::after {
content: "";
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
left: 6px;
top: 2px;
width: 6px;
height: 10px;
border: solid var(--color-primary);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkbox-label span:not(.check-box) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: #7e778e;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .check-box {
background-color: var(--bg-input-check);
border-color: var(--bg-input-check);
}
.checkbox-input:checked + .check-box::after {
opacity: 1;
}
.select2-dropdown {
background-color: var(--bg-main);
}
.select2-container .select2-selection--single {
height: 50px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: inherit;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-placeholder-select);
border: 2px solid var(--border-color-comment-textarea);
}
.select2-container--default .select2-selection--single {
background: var(--bg-search);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0 15px;
color: var(--color-main);
min-width: 128px;
width: 100%;
}
.select2-selection__arrow b {
display: none;
}
.select2-selection__arrow::before {
background-image: url("../images/down-arrow.svg");
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 10px;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
position: absolute;
width: 10px;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 10px;
position: absolute;
top: 50%;
right: 15px;
width: 10px;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
.select2-container--open .select2-selection__arrow::before {
-webkit-transform: translate3d(-50%, -50%, 0) rotate(180deg);
transform: translate3d(-50%, -50%, 0) rotate(180deg);
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: var(--bg-pagination-item--active);
color: var(--color-primary);
}
.select2-dropdown {
border: 2px solid var(--border-color-comment-textarea);
border-radius: 20px;
overflow: hidden;
color: var(--color-placeholder-select);
}
.select2-container--open .select2-dropdown--below {
border-top: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--color-active);
}
.select2-results__option[aria-selected] {
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--border-color-comment-textarea);
padding: 10px 18px;
background: var(--bg-search);
color: var(--color-main);
}
.select2-results__option {
padding: 8px 18px;
font-size: 16px;
font-weight: 300;
}
.select2-search__field {
height: 40px;
border-radius: 20px;
}
.grid-memebers {
--flex-gap: 10px;
--flex-items: 8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 20px var(--flex-gap);
}
@media screen and (max-width: 1280px) {
.grid-memebers {
--flex-items: 7;
}
}
@media screen and (max-width: 1160px) {
.grid-memebers {
--flex-items: 6;
}
}
@media screen and (max-width: 991px) {
.grid-memebers {
--flex-items: 5;
}
}
@media screen and (max-width: 860px) {
.grid-memebers {
--flex-items: 4;
}
}
@media screen and (max-width: 640px) {
.grid-memebers {
--flex-items: 3;
}
}
@media screen and (max-width: 480px) {
.grid-memebers {
--flex-items: 2;
}
}
.grid-memebers-primary {
--flex-gap: 10px;
--flex-items: 7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 20px var(--flex-gap);
}
@media screen and (max-width: 1280px) {
.grid-memebers-primary {
--flex-items: 6;
}
}
@media screen and (max-width: 1160px) {
.grid-memebers-primary {
--flex-items: 5;
}
}
@media screen and (max-width: 991px) {
.grid-memebers-primary {
--flex-items: 4;
}
}
@media screen and (max-width: 860px) {
.grid-memebers-primary {
--flex-items: 3;
}
}
@media screen and (max-width: 480px) {
.grid-memebers-primary {
--flex-items: 2;
}
}
.grid-memebers-primary .check-box-label {
top: 0;
left: 0;
}
.grid-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
}
@media screen and (min-width: 1025px) {
.grid-item:hover .avatar {
-webkit-box-shadow: 0 0 0 4px var(--color-active);
box-shadow: 0 0 0 4px var(--color-active);
}
.grid-item:hover .name {
color: var(--color-active);
}
}
.grid-item .wrap-avatar {
position: relative;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: 150px;
}
.grid-item .avatar {
max-width: 150px;
width: 100%;
overflow: hidden;
border-radius: 75px;
font-size: 76px;
background-color: var(--bg-community-user-avatar);
color: var(--color-community-user-avatar);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-shadow: 0 0 0 0 var(--color-active);
box-shadow: 0 0 0 0 var(--color-active);
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
padding-bottom: 100%;
position: relative;
}
@media screen and (max-width: 374px) {
.grid-item .avatar {
font-size: 60px;
}
}
.grid-item .avatar svg,
.grid-item .avatar img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.grid-item .avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.grid-item .name {
text-align: center;
font-weight: 400;
font-size: 18px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.grid-item .date {
font-weight: 300;
font-size: 14px;
color: var(--color-community-user-avatar);
margin-top: 4px;
}
.grid-item .sticky-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.grid-item .group-item {
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
background-color: var(--bg-community-group-item);
color: var(--color-primary);
font-weight: 300;
font-size: 16px;
min-height: 36px;
min-width: 70px;
padding: 10px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 6px;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
.grid-item .group-item span {
font-size: 14px;
white-space: nowrap;
}
.view-layout-verified {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
margin-bottom: 100px;
}
@media screen and (max-width: 860px) {
.view-layout-verified {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 40px;
}
}
.view-layout-verified .column {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 860px) {
.view-layout-verified .column {
width: 100%;
}
}
.verified-text {
font-size: 20px;
font-weight: 300;
color: #7e778e;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 15px;
position: relative;
}
@media screen and (max-width: 860px) {
.verified-text {
text-align: center;
}
}
.verified-text::after {
content: "";
position: absolute;
top: calc(100% + 20px);
left: 0;
background: url('data:image/svg+xml,') no-repeat;
background-size: 100% 100%;
width: 12vw;
height: 12vw;
max-width: 203px;
max-height: 203px;
}
@media screen and (max-width: 860px) {
.verified-text::after {
display: none;
}
}
.verified-text .text {
font-size: clamp(40px, 4.48vw - 5.9px, 60px);
font-weight: 900;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--color-verified-text);
}
.verified-text .text span {
color: var(--color-active);
}
[data-theme=dark] .verified-text::after {
background: url('data:image/svg+xml,') no-repeat;
background-size: 100% 100%;
}
.verified-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
@media screen and (max-width: 860px) {
.verified-image {
max-width: 414px;
margin: 0 auto;
}
}
.verified-image img {
max-width: 641px;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.verify-content {
padding-top: 20px;
font-weight: 300;
font-size: 16px;
}
.verify-content .title {
font-weight: 900;
font-size: 40px;
line-height: 1;
letter-spacing: 0.02em;
margin-bottom: 45px;
color: var(--color-title-verify);
}
.verify-content .cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 50px;
}
@media screen and (max-width: 860px) {
.verify-content .cols {
gap: 0 20px;
}
}
@media screen and (max-width: 640px) {
.verify-content .cols {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.verify-content .col {
width: 50%;
}
@media screen and (max-width: 640px) {
.verify-content .col {
width: 100%;
}
}
.verify-content .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px;
}
@media screen and (max-width: 860px) {
.verify-content .group {
gap: 10px;
}
}
.verify-content .group .item {
width: 50%;
}
.verify-content .row {
margin-bottom: 30px;
}
.verify-content .row:last-child {
margin-bottom: 0;
}
.verify-content .title-content {
margin-bottom: 14px;
color: #170F29;
font-weight: 400;
}
.verify-content .title-name {
font-size: 24px;
color: var(--color-title-verify);
}
.verify-content .sub-name {
font-size: 20px;
margin-top: 2px;
color: var(--color-title-verify);
}
.verify-content .item-name {
padding: 0;
}
.verify-content .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.verify-content .box {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.verify-content .box.second {
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
-ms-flex-negative: 3;
flex-shrink: 3;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.verify-content .select2-container--default .select2-selection--single .select2-selection__rendered {
min-width: 1px;
}
.verify-content .group-item {
width: 50%;
}
.verify-content .bottom {
margin-top: 68px;
}
@media screen and (max-width: 640px) {
.verify-content .bottom {
margin-top: 30px;
}
}
.verify-content .btn {
border: none;
cursor: pointer;
font-family: inherit;
border-radius: 20px;
min-height: 50px;
font-weight: 300;
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
width: 100%;
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
background-color: var(--bg-active);
color: var(--color-white);
}
@media screen and (min-width: 1025px) {
.verify-content .btn:hover {
background-color: #ee461e;
}
}
.mask-button {
position: relative;
}
.mask-button .file-wrap {
border-radius: 15px;
cursor: pointer;
color: var(--color-file);
font-weight: 300;
font-size: 16px;
padding: 0 20px;
min-height: 36px;
position: absolute;
left: 7px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
z-index: 2;
background: var(--bg-file);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.mask-button .file-wrap:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.mask-button input[type=file] {
display: none;
}
.mask-input {
font-size: 14px;
height: 50px;
border-radius: 20px;
font-weight: 300;
font-size: 15px;
position: relative;
background: transparent;
padding: 14px 20px 14px 105px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 2px solid var(--bg-border-input);
background: var(--bg-search);
color: #999;
}
.verified-text-info {
margin-top: 50px;
font-weight: 300;
font-size: 16px;
line-height: 1.625;
letter-spacing: 0.02em;
text-align: center;
}
.verified-text-info a {
color: var(--color-active);
}
@media screen and (min-width: 1025px) {
.verified-text-info a:hover {
text-decoration: underline;
}
}
.accordion-field {
max-width: 1000px;
margin: 0 auto;
}
.accordion-panel {
border-radius: 20px;
padding: 20px;
background-color: var(--bg-accordion);
margin-bottom: 20px;
cursor: pointer;
}
.accordion-panel:last-child {
margin: 0;
}
.accordion-panel[data-attr-accordion-item=true] .accordion .text {
color: var(--color-active);
}
.accordion-panel[data-attr-accordion-item=true] .question-icon {
color: var(--color-accordion-question-icon--active);
}
.accordion-panel[data-attr-accordion-item=true] .icon {
-webkit-box-shadow: inset 0 0 0 2px var(--color-active);
box-shadow: inset 0 0 0 2px var(--color-active);
color: var(--color-active);
}
.accordion-panel[data-attr-accordion-item=true] .icon svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-panel .detail {
font-weight: 300;
font-size: 18px;
color: var(--color-accordion-text);
line-height: 1.4;
letter-spacing: 0.02em;
margin-top: 15px;
}
[data-theme=light] img[data-theme-image] {
content: url("../images/foxy-verified.png");
}
[data-theme=dark] img[data-theme-image] {
content: url("../images/foxy-verified-dark.png");
}
.accordion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
}
@media screen and (max-width: 640px) {
.accordion {
gap: 10px;
}
}
.accordion .text {
font-weight: 400;
font-size: 30px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media screen and (max-width: 640px) {
.accordion .text {
font-size: 24px;
}
}
.accordion .question-icon,
.accordion .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.accordion .question-icon {
font-size: 30px;
-ms-flex-item-align: center;
align-self: center;
color: var(--color-accordion-question-icon);
}
.accordion .icon {
width: 30px;
height: 30px;
-ms-flex-item-align: center;
align-self: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: inset 0 0 0 2px var(--border-accordion-icon);
box-shadow: inset 0 0 0 2px var(--border-accordion-icon);
border-radius: 10px;
font-size: 14px;
}
.accordion .icon svg {
-webkit-transform: translate3d(0, 1px, 0);
transform: translate3d(0, 1px, 0);
}
.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.tab-item {
cursor: pointer;
padding: 10px 20px;
font-weight: 300;
font-size: 14px;
line-height: 1.143;
letter-spacing: 0.02em;
border-radius: 15px;
color: var(--color-channel-page-panel);
background-color: var(--bg-channel-page-tags);
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.tab-item:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
[data-attr-tab=true] {
background-color: var(--bg-active);
color: var(--color-item--active);
}
[data-attr-tab-content=false] {
display: none;
}
[data-attr-tab-content=true] {
display: block;
}
.group-text-general,
.group-text {
font-weight: 300;
font-size: 20px;
line-height: 1.4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.group-text-general .wrap,
.group-text .wrap {
max-width: 500px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
@media screen and (max-width: 1024px) {
.group-text-general .wrap,
.group-text .wrap {
max-width: 440px;
}
}
.group-text-general .icon,
.group-text .icon {
max-width: 150px;
margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
.group-text-general .icon,
.group-text .icon {
max-width: 100px;
margin-bottom: 20px;
}
}
.group-text-general .icon img,
.group-text .icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.group-text-general .title,
.group-text .title {
font-weight: 900;
font-size: 60px;
line-height: 1;
margin-bottom: 22px;
color: var(--check-access-title);
}
@media screen and (max-width: 768px) {
.group-text-general .title,
.group-text .title {
font-size: 40px;
margin-bottom: 16px;
}
}
.group-text-general .text,
.group-text .text {
color: #7e778e;
font-weight: 300;
font-size: 20px;
letter-spacing: 0.02em;
margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
.group-text-general .text,
.group-text .text {
font-size: 18px;
margin-bottom: 25px;
}
}
.group-text-general .btn,
.group-text .btn {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-radius: 20px;
padding: 20px;
color: var(--color-btn-splash);
background-color: var(--color-active);
border: none;
cursor: pointer;
font-weight: 400;
font-size: 24px;
line-height: 1.25;
font-family: inherit;
max-width: 296px;
width: 100%;
text-align: center;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
@media screen and (min-width: 1025px) {
.group-text-general .btn:hover,
.group-text .btn:hover {
background-color: var(--color-active-darkness);
}
}
.group-text-general .btn:active,
.group-text .btn:active {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
.group-text {
padding-top: 50px;
}
@media screen and (max-width: 768px) {
.group-text {
padding-top: 30px;
}
}
.group-text-general {
position: relative;
padding: 130px 0;
}
@media screen and (max-width: 1024px) {
.group-text-general {
padding: 80px 0;
}
}
@media screen and (max-width: 768px) {
.group-text-general {
margin: 0 -20px;
}
}
@media screen and (max-width: 568px) {
.group-text-general {
padding: 0 0 30px;
}
}
.group-text-general::before, .group-text-general::after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: clamp(200px, 24vw, 490px);
aspect-ratio: 490/403;
top: 50%;
-webkit-transform: translate3d(0, calc(-50% - 50px), 0);
transform: translate3d(0, calc(-50% - 50px), 0);
}
@media screen and (max-width: 1024px) {
.group-text-general::before, .group-text-general::after {
width: clamp(120px, 19vw, 490px);
}
}
.group-text-general::before {
background-image: url("../images/become-creator-before.png");
left: 0;
}
@media screen and (max-width: 768px) {
.group-text-general::before {
display: none;
}
}
.group-text-general::after {
background-image: url("../images/become-creator-after.png");
right: 0;
}
@media screen and (max-width: 768px) {
.group-text-general::after {
background-image: url("../images/become-creator-mobile.png");
top: auto;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: none;
transform: none;
aspect-ratio: auto;
width: 100%;
height: 100%;
max-height: 266px;
z-index: -1;
}
}
@media screen and (max-width: 568px) {
.group-text-general::after {
bottom: -25px;
}
}
.card-row {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding-bottom: 70px;
}
.card-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px 40px;
padding: 0 70px;
}
@media screen and (max-width: 1024px) {
.card-group {
padding: 0;
}
}
@media screen and (max-width: 568px) {
.card-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px 0;
}
}
.card-group .content {
max-width: 480px;
width: 100%;
}
@media screen and (max-width: 1024px) {
.card-group .content {
max-width: 100%;
}
}
@media screen and (max-width: 568px) {
.card-group .content {
text-align: center;
}
}
.card-group .content.reverse {
text-align: right;
}
@media screen and (max-width: 568px) {
.card-group .content.reverse {
text-align: center;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.card-group .title {
font-size: 40px;
font-weight: 900;
margin-bottom: 15px;
text-transform: uppercase;
}
@media screen and (max-width: 568px) {
.card-group .title {
font-size: 30px;
}
}
.card-group .desc {
font-weight: 300;
font-size: 20px;
line-height: 1.5;
color: var(--color-gray);
}
@media screen and (max-width: 568px) {
.card-group .desc {
font-size: 18px;
}
}
.card-icon {
max-width: 304px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 640px) {
.card-icon {
max-width: 200px;
}
}
.card-icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.notfound {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.notfound .bottom {
margin-top: 30px;
}
.notfound .btn {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
font-family: inherit;
gap: 0 10px;
font-size: 13px;
min-width: 50px;
min-height: 50px;
padding: 0 30px;
font-weight: 300;
border-radius: 20px;
background-color: var(--bg-channel-page-panel);
color: var(--color-channel-page-panel);
letter-spacing: 0.02em;
-webkit-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.notfound .btn:hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.notfound .btn span {
font-weight: 300;
font-size: 18px;
}
.img-found {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 60px;
}
.img-found img {
max-width: 356px;
width: 100%;
height: auto;
}
.title-found {
font-weight: 900;
font-size: 60px;
}
.desc-found {
margin-top: 10px;
font-weight: 300;
font-size: 18px;
color: #7e778e;
text-align: center;
}
.upload-columns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 100px;
font-weight: 300;
font-size: 16px;
}
@media screen and (max-width: 991px) {
.upload-columns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px 0;
}
}
.upload-columns .column {
width: 100%;
}
.upload-columns .column.secondary {
max-width: 400px;
}
@media screen and (max-width: 991px) {
.upload-columns .column.secondary {
max-width: 100%;
}
}
.upload-columns [data-tab-content] {
display: none;
}
.upload-columns .title {
font-size: 40px;
color: var(--color-rules);
margin-bottom: 40px;
}
.upload-columns .row {
margin-bottom: 30px;
}
.upload-columns .row:last-child {
margin-bottom: 0;
}
.upload-columns .item-name {
padding: 0;
}
.upload-columns .textarea {
height: 100px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-main);
padding: 20px;
font-family: inherit;
}
.upload-columns .label-title {
font-weight: 400;
font-size: 24px;
margin-bottom: 20px;
}
.upload-columns .radio-list {
gap: 15px;
}
.upload-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px 30px;
margin-bottom: 50px;
}
@media screen and (max-width: 640px) {
.upload-tabs {
margin-bottom: 25px;
}
}
.upload-tabs .link {
position: relative;
font-weight: 900;
font-size: 40px;
color: #7e778e;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (max-width: 640px) {
.upload-tabs .link {
font-size: 30px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
}
.upload-tabs .link.selected {
color: var(--color-active);
}
.upload-tabs .link.selected::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.upload-tabs .link::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
height: 3px;
background-color: var(--bg-active);
-webkit-transform: translate3d(0, 3px, 0);
transform: translate3d(0, 3px, 0);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
.upload-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
@media screen and (max-width: 640px) {
.upload-box {
gap: 20px;
}
}
.upload-box .mask-button {
pointer-events: none;
opacity: 0.3;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.radio-box.checked .mask-button,
.radio-box.checked .input-field {
pointer-events: all;
opacity: 1;
}
.radio-box .input-field {
pointer-events: none;
opacity: 0.3;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.radio-box .label-choice {
font-weight: 300;
font-size: 16px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
margin-bottom: 10px;
}
.radio-box .mask-input {
padding: 14px 105px 14px 20px;
}
.radio-box .file-wrap {
left: auto;
right: 7px;
}
.upload-button {
margin-top: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 20px;
min-height: 50px;
min-width: 150px;
padding: 0 10px;
font-weight: 300;
font-size: 18px;
cursor: pointer;
font-family: inherit;
color: var(--color-item--active);
background: var(--bg-active);
border: none;
text-transform: uppercase;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
@media screen and (min-width: 1025px) {
.upload-button:hover {
background-color: var(--color-footer-list--active);
}
}
@media screen and (max-width: 640px) {
.upload-button {
margin-top: 20px;
}
}
.upload-button:first-child {
margin-top: 0;
}
.dropped-list-selector {
margin-top: 20px;
display: none;
}
.dropped-list-selector.active {
display: block;
}
.dropped-list-selector .hold {
--flex-gap: 15px;
--flex-items: 4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-gap);
max-height: 142px;
height: 100%;
overflow: auto;
}
@media screen and (max-width: 767px) {
.dropped-list-selector .hold {
--flex-items: 3;
}
}
@media screen and (max-width: 374px) {
.dropped-list-selector .hold {
--flex-items: 2;
}
}
.dropped-list-selector .item {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
}
.container-rules {
font-weight: 300;
font-size: 16px;
line-height: 1.625;
letter-spacing: 0.02em;
color: var(--color-rules);
}
.container-rules ul {
margin-left: 20px;
padding: 20px 0;
list-style-type: disc;
}
.container-rules a {
color: var(--color-active);
}
.container-rules a:hover {
text-decoration: underline;
}
.box-upload-info {
margin-bottom: 50px;
color: var(--color-rules);
}
.box-upload-info .media {
border-radius: 15px;
overflow: hidden;
position: relative;
padding-bottom: 55.9%;
margin-bottom: 10px;
}
.box-upload-info .media img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.box-upload-info .sticky {
position: absolute;
right: 10px;
bottom: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
}
.box-upload-info .time {
background: rgba(255, 255, 255, 0.7);
font-weight: 300;
font-size: 14px;
line-height: 1.3;
border-radius: 8px;
padding: 2px 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
color: var(--color-thumb-time);
}
.upload-title {
font-weight: 900;
font-size: 24px;
letter-spacing: 0.02em;
line-height: 1.2;
margin-bottom: 10px;
}
.box-price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
background-color: var(--bg-box-price);
padding: 15px 20px;
border-radius: 20px;
margin-bottom: 20px;
letter-spacing: 0.02em;
}
.box-price.primary {
background-color: var(--bg-active);
}
.box-price.primary .icon,
.box-price.primary .content,
.box-price.primary .content-title {
color: var(--color-white);
}
.box-price:last-child {
margin-bottom: 0;
}
.box-price .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
font-size: 40px;
color: var(--color-active);
}
.box-price .content {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: 300;
font-size: 16px;
color: var(--color-content-box-price);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.box-price .content-title {
font-weight: 400;
font-size: 24px;
color: var(--color-content-box-price-title);
}
.box-price .content-desc {
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
}
.box-price .content-desc svg {
-ms-flex-item-align: center;
align-self: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.box-price .button {
font-weight: 400;
font-size: 24px;
letter-spacing: 0.02em;
color: #fa4a1f;
border-radius: 20px;
padding: 15px 30px;
background: #fff;
margin-top: 15px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (min-width: 1025px) {
.box-price .button:hover {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
}
.box-price .button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.tab-box {
display: none;
}
.tab-box.active {
display: block;
}
.chat-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
min-height: 772px;
position: relative;
z-index: 2;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--bg-border-chat);
-webkit-box-shadow: 2px 11px 24px 0 rgba(0, 0, 0, 0.1), 8px 43px 44px 0 rgba(0, 0, 0, 0.09), 18px 97px 59px 0 rgba(0, 0, 0, 0.05), 32px 173px 70px 0 rgba(0, 0, 0, 0.01), 51px 270px 77px 0 rgba(0, 0, 0, 0);
box-shadow: 2px 11px 24px 0 rgba(0, 0, 0, 0.1), 8px 43px 44px 0 rgba(0, 0, 0, 0.09), 18px 97px 59px 0 rgba(0, 0, 0, 0.05), 32px 173px 70px 0 rgba(0, 0, 0, 0.01), 51px 270px 77px 0 rgba(0, 0, 0, 0);
}
@media screen and (max-width: 1024px) {
.chat-section.visible .aside {
display: none;
}
.chat-section.visible .chat-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 768px) {
.chat-section {
margin: 0 -10px;
width: auto;
border-radius: 0;
border-left: none;
border-right: none;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.chat-aside {
max-width: 462px;
width: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
border-right: 1px solid var(--bg-border-chat);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: var(--bg-aside-chat);
}
@media screen and (max-width: 1470px) {
.chat-aside {
max-width: 345px;
}
}
@media screen and (max-width: 1024px) {
.chat-aside {
max-width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
}
.chat-headline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--bg-border-chat);
padding: 0 20px;
min-height: 60px;
}
@media screen and (max-width: 768px) {
.chat-headline {
padding: 0 10px;
}
}
.chat-headline .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 36px;
height: 36px;
background-color: var(--bg-icon-chat);
border-radius: 36px;
color: var(--color-icon-chat);
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.chat-headline .title {
font-weight: 400;
font-size: 18px;
letter-spacing: 0.02em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.search-aside {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding: 20px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border-bottom: 1px solid var(--bg-border-chat);
}
@media screen and (max-width: 768px) {
.search-aside {
padding: 10px;
}
}
.search-aside .wrap {
border: 2px solid #7e778e;
background-color: var(--bg-search-chat);
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.search-aside input {
background: none;
border: none;
height: 40px;
width: 100%;
padding: 0 20px;
font-family: inherit;
font-weight: 300;
font-size: 16px;
color: var(--color-input);
}
.search-aside .btn {
padding: 0 15px;
border: none;
background: none;
position: relative;
cursor: pointer;
font-size: 20px;
color: var(--color-search-button);
}
.search-aside .btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 24px;
width: 1px;
margin: auto 0;
background-color: var(--color-search-button);
}
.wrapped-message {
position: relative;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
}
.list-messages {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
@media screen and (max-width: 1024px) {
.list-messages {
overflow: inherit;
}
}
.chat-aside .list-messages .item {
padding: 12px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.chat-aside .list-messages .item:hover {
background-color: var(--bg-selected-chat);
}
}
@media screen and (max-width: 768px) {
.chat-aside .list-messages .item {
padding: 12px 10px;
}
}
.chat-aside .list-messages .item.selected {
background-color: var(--bg-selected-chat);
cursor: default;
}
.list-messages .user {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.list-messages .avatar {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 40px;
height: 40px;
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-white);
font-size: 16px;
position: relative;
margin-right: 10px;
background-image: linear-gradient(140deg, #fa4a1f 0%, #fff 100%);
}
.list-messages .avatar span {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 10px;
}
@media screen and (max-width: 1024px) {
.list-messages .avatar span {
bottom: 2px;
right: 2px;
}
}
.list-messages .avatar span.network {
background-color: #00e109;
}
.list-messages img {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 25px;
overflow: hidden;
}
.list-messages .info {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
}
.list-messages .sup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 4px;
}
.list-messages .name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
color: #FA4A1F;
}
.list-messages .name span {
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
color: var(--color-name-chat);
font-weight: 300;
font-size: 16px;
}
.list-messages .name svg {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.list-messages .time {
margin-left: 10px;
color: #7e778e;
font-weight: 300;
font-size: 12px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.list-messages .sub {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
}
.list-messages .message {
color: #7e778e;
font-family: inherit;
font-weight: 300;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.list-messages .notify {
background-color: var(--bg-active);
font-weight: 300;
font-size: 12px;
color: var(--color-white);
min-width: 18px;
height: 18px;
padding: 0 2px;
border-radius: 10px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.chat-content {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
@media screen and (max-width: 1024px) {
.chat-content {
display: none;
}
}
.message-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
padding: 0 20px;
min-height: 60px;
background-color: var(--bg-chat);
border-bottom: 1px solid var(--bg-border-chat);
}
@media screen and (max-width: 768px) {
.message-head {
padding: 0 10px;
}
}
.message-head.show .btn-detail:before, .message-head.show .btn-detail:after,
.message-head.show .btn-detail span {
background-color: var(--bg-active);
}
.message-head.show .drop-detail {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0) rotateY(0) scale(1);
transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}
.message-head .avatar {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 36px;
height: 36px;
position: relative;
margin-right: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.message-head img {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 36px;
}
.switch-back {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
color: #87878C;
display: none;
}
@media screen and (max-width: 1024px) {
.switch-back {
display: block;
}
}
.message-content {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 1px;
font-size: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.message-content .primary {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
}
.message-content .name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-weight: 300;
font-size: 13px;
color: var(--color-active);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.message-content .name a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-name-chat);
font-size: 16px;
}
.message-content .name svg {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.message-content .checked {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
margin-left: 5px;
}
.message-content .tag {
display: inline-block;
vertical-align: top;
font-weight: 300;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.message-content .tag a {
color: #7e778e;
}
@media screen and (min-width: 1025px) {
.message-content .tag a:hover {
text-decoration: underline;
}
}
.message-content .secondary {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.message-content .description {
margin-bottom: 5px;
}
.btn-detail {
width: 18px;
background: none;
cursor: pointer;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (min-width: 1025px) {
.btn-detail:hover:before, .btn-detail:hover:after,
.btn-detail:hover span {
background-color: var(--bg-active);
}
}
.btn-detail:before, .btn-detail:after {
content: "";
}
.btn-detail:before, .btn-detail:after,
.btn-detail span {
display: block;
background-color: #87878C;
width: 3px;
height: 3px;
border-radius: 3px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.btn-detail:before,
.btn-detail span {
margin-bottom: 3px;
}
.drop-detail {
position: absolute;
top: calc(100% + 30px);
right: 0;
z-index: 3;
white-space: nowrap;
border-radius: 20px;
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
background-color: var(--bg-chat);
color: var(--color-name-chat);
-webkit-box-shadow: 0 0 0 1px var(--bg-border-chat);
box-shadow: 0 0 0 1px var(--bg-border-chat);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
visibility: hidden;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: translate3d(0, -4px, 0) rotateX(45deg) scale(1.08);
transform: translate3d(0, -4px, 0) rotateX(45deg) scale(1.08);
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
font-weight: 300;
font-size: 16px;
overflow: hidden;
}
.drop-detail a {
display: block;
padding: 10px 20px;
color: var(--color-name-chat);
}
@media screen and (min-width: 1025px) {
.drop-detail a:hover {
background-color: var(--bg-active);
color: var(--color-white);
}
}
.area-message {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
min-height: 200px;
background: var(--bg-chat-area) url("../images/bg-chat.png");
background-size: cover;
}
.area-message .hold {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
padding: 15px 20px;
}
@media screen and (max-width: 767px) {
.area-message .hold {
padding: 10px;
}
}
.area-message .nano-content {
padding: 15px 20px;
}
@media screen and (max-width: 767px) {
.area-message .nano-content {
padding: 10px;
}
}
.row-date {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
}
.row-date span {
font-weight: 300;
font-size: 12px;
line-height: 0.8125rem;
color: var(--color-date-chat);
border-radius: 20px;
padding: 10px 15px;
background: var(--bg-date-chat);
}
.row-message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 15px;
font-weight: 300;
font-size: 16px;
}
.row-message:last-child {
margin-bottom: 0;
}
.row-message.second {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.row-message.second .head-message {
font-weight: 300;
font-size: 12px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.row-message.second .avatar {
width: 20px;
height: 20px;
}
.row-message.second .name {
font-size: 14px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
color: #a2a2a2;
}
.row-message.second .message {
border-radius: 15px 0 15px 15px;
background: linear-gradient(84deg, #108ca6 0%, #44a2e8 100%);
}
.row-message .wrap {
max-width: 75%;
}
@media screen and (max-width: 767px) {
.row-message .wrap {
max-width: 100%;
}
}
.row-message .message {
border-radius: 5px 20px 20px 20px;
padding: 15px 20px;
-webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
background: var(--liner-gradient-chat-message);
color: var(--color-white);
margin-top: 7px;
line-height: 1.4;
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.row-message .media {
--flex-gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--flex-gap);
}
.row-message .media img {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
}
.head-message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.head-message .avatar {
width: 30px;
height: 30px;
border-radius: 30px;
overflow: hidden;
background-image: linear-gradient(140deg, #fa4a1f 0%, #fff 100%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-white);
font-size: 10px;
}
.head-message img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.head-message .name {
font-weight: 300;
font-size: 16px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.head-message .time {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
font-weight: 300;
font-size: 12px;
color: #7e778e;
}
.notify-typing {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.notify-typing .typing {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.notify-typing .dots {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 3px;
}
.notify-typing .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-active);
-webkit-animation: bounce 0.6s ease-in-out infinite;
animation: bounce 0.6s ease-in-out infinite;
}
.notify-typing .dot:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.notify-typing .dot:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.notify-typing .avatar {
position: relative;
width: 20px;
height: 20px;
border-radius: 20px;
overflow: hidden;
color: var(--color-white);
background-image: linear-gradient(140deg, #fa4a1f 0%, #fff 100%);
font-size: 11px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.notify-typing .avatar img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.text-typing {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
gap: 4px;
font-weight: 300;
font-size: 16px;
color: var(--color-text-typing);
}
.text-typing strong {
font-weight: 300;
}
.text-typing span {
font-size: 12px;
color: var(--color-text-typing-secondary);
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.panel-message {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border-top: 1px solid var(--bg-border-chat);
background-color: var(--bg-chat);
}
.panel-message .form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
width: 100%;
padding: 0 20px;
min-height: 50px;
}
@media screen and (max-width: 768px) {
.panel-message .form {
padding: 0 15px;
gap: 15px;
}
}
.panel-message .col {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
/* position: relative; */
}
.panel-message .col.second {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.panel-message .message {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
border: none;
resize: none;
display: block;
height: 24px;
font-weight: 300;
font-size: 16px;
line-height: 1.2;
padding: 2px 0;
background: none;
font-family: inherit;
color: var(--color-message-chat);
}
.button-message {
background: none;
border: none;
cursor: pointer;
display: block;
font-size: 24px;
color: #87878C;
}
.button-message input[type=file] {
display: none;
}
.button-message.primary {
color: var(--color-button-message-chat);
}
.button-message:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
@media screen and (min-width: 1025px) {
.button-message:hover {
color: var(--color-active);
}
}
.nano > .nano-pane {
background: transparent;
border-radius: 0;
width: 6px;
right: 2px;
}
.nano > .nano-pane > .nano-slider {
background: rgba(135, 135, 140, 0.5);
}
.aside-bar {
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
width: 250px;
opacity: 0;
visibility: hidden;
z-index: 9992;
background-color: var(--bg-aside-bar);
-webkit-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
-webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 0 20px 0 0;
}
@media screen and (max-width: 1460px) {
.aside-bar {
width: 100%;
max-width: 411px;
left: auto;
-webkit-transform: translate3d(411px, 0, 0);
transform: translate3d(411px, 0, 0);
border-radius: 0;
background-color: var(--bg-aside-bar-secondary);
position: fixed;
height: calc(100svh - (var(--header-height)));
}
}
@media screen and (max-width: 768px) {
.aside-bar {
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: 100svh;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.aside-bar .hold {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
padding: 20px 10px;
}
@media screen and (max-width: 1460px) {
.aside-bar .hold {
padding: 30px;
}
}
@media screen and (max-width: 374px) {
.aside-bar .hold {
padding: 10px;
}
}
.aside-bar .box {
margin-bottom: 30px;
}
.aside-bar .box:last-child {
margin-bottom: 0;
}
.aside-bar .box.second {
display: none;
}
@media screen and (max-width: 1460px) {
.aside-bar .box.second {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.aside-bar .title {
font-size: 24px;
font-weight: 400;
margin-bottom: 15px;
color: var(--color-aside-title);
}
.aside-bar .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.aside-bar .close {
background: none;
color: var(--color-main);
font-size: 24px;
border: none;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
display: none;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.aside-bar .close:hover {
color: var(--color-active);
}
}
@media screen and (max-width: 768px) {
.aside-bar .close {
display: block;
}
}
.aside-main-title {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
font-weight: 900;
font-size: 30px;
letter-spacing: 0.02em;
}
.irs-grid-text {
font-weight: 400;
font-size: 14px;
line-height: 1.2;
padding: 0 4px 0 0;
color: var(--color-secondary);
width: 37px;
}
.irs-grid-text:last-child::after {
display: none;
}
.irs--flat.irs-with-grid {
height: 38px;
}
.irs--flat .irs-handle {
top: -6px;
border-radius: 10px;
width: 16px;
height: 16px;
background-color: var(--color-active);
cursor: pointer;
}
.irs--flat .irs-handle > i:first-child {
background-color: var(--color-active);
}
.irs--flat .irs-line {
height: 4px;
top: 0;
background-color: var(--bg-irs-line);
}
.irs--flat .irs-handle.state_hover > i:first-child, .irs--flat .irs-handle:hover > i:first-child {
background-color: var(--color-active);
}
.irs--flat .irs-bar {
height: 4px;
top: 0;
background-color: var(--color-active);
}
.irs--flat .irs-to,
.irs--flat .irs-from,
.irs-max,
.irs-min {
display: none;
}
.irs-grid-pol {
display: none;
}
.irs-grid-pol .small {
display: none;
}
.btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.btn-group .input {
display: none;
}
.btn-group .input:checked + .btn {
background-color: var(--bg-filter-btn--active);
color: var(--color-filter-btn--active);
}
.btn-group .btn {
font-weight: 300;
font-size: 16px;
padding: 8px 20px;
min-width: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 15px;
background-color: var(--bg-filter-btn);
color: var(--color-filter-btn);
line-height: 1.25;
}
@media screen and (min-width: 1025px) {
.btn-group .btn:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
@media screen and (max-width: 1460px) {
.btn-group .btn {
background-color: var(--bg-item);
color: var(--color-main);
}
}
.aside-tags {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
}
.aside-tags a {
font-weight: 300;
font-size: 16px;
padding: 8px 20px;
min-width: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 15px;
background-color: var(--bg-filter-btn);
color: var(--color-filter-btn);
line-height: 1.25;
}
@media screen and (min-width: 1025px) {
.aside-tags a:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
@media screen and (max-width: 1460px) {
.aside-tags a {
background-color: var(--bg-filter-btn-secondary);
color: var(--color-main);
}
}
.categories-list a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
line-height: 1.25;
padding: 15px 20px;
color: var(--color-category-item);
border-radius: 20px;
-webkit-transition: background-color 0.2s, color 0.2s;
transition: background-color 0.2s, color 0.2s;
}
@media screen and (min-width: 1025px) {
.categories-list a:hover {
background-color: var(--bg-category-item--hover);
color: var(--color-active);
}
.categories-list a:hover span:last-child {
color: var(--color-main);
}
}
@media only screen and (max-width: 1460px) and (min-width: 1025px) {
.categories-list a:hover {
background-color: var(--bg-category-item-secondary--hover);
color: var(--color-active);
}
.categories-list a:hover span:last-child {
color: var(--color-main);
}
}
.categories-list a span:first-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.categories-list a span:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--color-category-item--secondary);
font-weight: 300;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.view-all {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 15px 20px;
font-weight: 300;
font-size: 18px;
text-transform: uppercase;
color: var(--color-btn-view-all);
background-color: var(--bg-btn-view-all);
border-radius: 20px;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.view-all:hover {
background-color: var(--color-active);
color: var(--color-primary);
}
}
@media screen and (max-width: 1460px) {
.view-all {
background-color: var(--bg-item);
}
}
.mobile-navigation {
position: fixed;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(15px);
background-color: var(--bg-mobile-navigation);
border-radius: 20px 20px 0 0;
padding: 0 10px;
display: none;
z-index: 9991;
}
@media screen and (max-width: 767px) {
.mobile-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.mobile-navigation .item {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mobile-navigation .item.active .btn {
color: var(--color-active);
}
.mobile-navigation .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px 0;
background: none;
border: none;
font-family: inherit;
padding: 12px 0;
font-size: 24px;
font-weight: 400;
color: var(--color-mobile-navigation);
}
.mobile-navigation .btn span {
font-size: 16px;
}
.footer {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
margin-top: 50px;
}
@media screen and (max-width: 767px) {
.footer {
padding-bottom: 60px;
}
}
.footer .holder {
background-color: var(--bg-white);
padding: 30px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 30px 40px;
}
@media screen and (max-width: 1160px) {
.footer .holder {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.footer .wrap {
position: relative;
}
@media screen and (max-width: 767px) {
.logo-footer {
padding: 0 10px;
}
}
.logo-footer.christmas .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-christmas.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 227;
height: 44px;
-webkit-transform: translate3d(3px, -5px, 0);
transform: translate3d(3px, -5px, 0);
}
.logo-footer.halloween .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url("../images/mask-halloween.svg") no-repeat;
background-size: contain;
z-index: 1;
width: 192px;
height: 46px;
-webkit-transform: translate3d(10px, -5px, 0);
transform: translate3d(10px, -5px, 0);
}
.logo-footer a {
display: inline-block;
vertical-align: top;
position: relative;
font-size: 249px;
height: 36px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media (hover: hover) {
.logo-footer a:hover {
color: var(--color-active);
}
.logo-footer a:hover .ear-before,
.logo-footer a:hover .ear-after {
fill: var(--color-active);
}
.logo-footer a:hover .ear-before {
-webkit-animation: slide-in-left 0.5s infinite;
animation: slide-in-left 0.5s infinite;
}
.logo-footer a:hover .ear-after {
-webkit-animation: slide-in-right 0.5s infinite;
animation: slide-in-right 0.5s infinite;
}
}
.logo-footer .ears {
position: absolute;
top: -20px;
left: -9px;
}
.logo-footer .ear-before,
.logo-footer .ear-after {
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: fill 0.3s;
transition: fill 0.3s;
}
.logo-footer svg {
display: block;
}
.logo-footer .svg-icon {
height: 36px;
}
.footer-info {
width: 50%;
color: var(--color-footer);
font-weight: 300;
font-size: 14px;
line-height: 1.5;
}
@media screen and (max-width: 1160px) {
.footer-info {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.footer-info {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.footer-info .row {
margin-bottom: 25px;
}
@media screen and (max-width: 1160px) {
.footer-info .row {
margin: 0;
}
.footer-info .row:not(.secondary) {
display: none;
}
}
.footer-info .row:last-child {
margin-bottom: 0;
}
.footer-list {
--gap: 30px;
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
gap: var(--gap);
font-weight: 300;
font-size: 16px;
text-transform: uppercase;
}
@media screen and (max-width: 1160px) {
.footer-list {
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.footer-list {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
@media screen and (max-width: 414px) {
.footer-list {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.footer-list a {
cursor: pointer;
color: var(--color-footer);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.footer-list a:hover {
color: var(--color-footer-list--active);
}
}
@media screen and (max-width: 767px) {
.footer-list .col {
width: calc(50% - var(--gap));
}
}
@media screen and (max-width: 414px) {
.footer-list .col {
width: auto;
}
}
.footer-list .title {
font-weight: 400;
font-size: 20px;
margin-bottom: 24px;
color: var(--color-footer-list--title);
}
.footer-list .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 14px 0;
}
.copy-hidden {
font-weight: 300;
font-size: 14px;
line-height: 1.5;
text-align: center;
display: none;
color: var(--color-footer);
}
@media screen and (max-width: 1160px) {
.copy-hidden {
display: block;
}
}
@media screen and (max-width: 767px) {
.copy-hidden {
text-align: left;
}
}
.fancybox-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 91;
padding: 10px;
backdrop-filter: blur(15px);
background: rgba(var(--bg-rgb-popup), 0.7);
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.popup .title {
font-weight: 900;
font-size: 40px;
margin-bottom: 20px;
color: var(--color-item-name);
letter-spacing: 0.02em;
}
.popup .row {
margin-bottom: 25px;
}
.popup .row:last-child {
margin-bottom: 0;
}
.popup .btn {
background-color: var(--bg-button);
color: var(--color-button);
border: none;
cursor: pointer;
font-family: inherit;
border-radius: 20px;
min-height: 50px;
font-weight: 300;
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
width: 100%;
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.popup .btn:hover {
background-color: var(--bg-active);
color: var(--color-white);
}
}
.popup .btn.primary {
background-color: var(--bg-active);
color: var(--color-white);
}
@media screen and (min-width: 1025px) {
.popup .btn.primary:hover {
background-color: #ee461e;
}
}
.close-popup {
position: absolute;
top: 20px;
right: 20px;
font-size: 20px;
background: none;
border: none;
cursor: pointer;
color: var(--color-sub-popup);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.close-popup:hover {
color: var(--color-active);
}
}
.popup-premium,
.popup-login,
.popup-signup,
.popup-edit,
.popup-age,
.popup-playlist,
.popup-playlist-add {
position: relative;
margin: auto;
border-radius: 20px;
width: 100%;
background: var(--bg-popup);
font-weight: 300;
font-size: 16px;
}
.popup-playlist,
.popup-playlist-add,
.popup-login,
.popup-signup {
max-width: 990px;
overflow: hidden;
}
.popup-playlist-add,
.popup-playlist{
width: 420px;
}
@media screen and (max-width: 560px) {
.popup-playlist-add,
.popup-playlist{
width: 300px;
}
}
.popup-playlist-add .form,
.popup-playlist .form{
width: 100%;
}
.popup-login .form,
.popup-signup .form {
padding: 85px 10px 60px;
max-width: 400px;
width: 100%;
margin: 0 auto;
}
.popup-playlist-add .form,
.popup-playlist .form{
padding: 50px 15px 15px;
}
@media screen and (max-width: 860px) {
.popup-login .form,
.popup-signup .form {
max-width: 100%;
padding: 10px;
}
.popup-playlist .form,
.popup-playlist-add .form{
padding-top: 40px;
}
}
.popup-login .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.popup-login .btn-re-pass {
color: #7e778e;
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.popup-login .btn-re-pass:hover {
text-decoration: underline;
}
}
.popup-premium {
max-width: 1000px;
overflow: hidden;
padding: 68px 18px 48px;
text-align: center;
overflow: visible;
background: var(--bg-premium-popup);
border: 2px solid var(--border-popup-premium);
width: 1000px;
}
@media screen and (max-width: 1050px) {
.popup-premium {
width: 800px;
}
}
@media screen and (max-width: 640px) {
.popup-premium {
padding: 28px 18px;
}
}
.popup-premium::after {
content: "";
position: absolute;
bottom: -10px;
right: -55px;
background: url("../images/foxy-premium.png") no-repeat;
background-size: contain;
width: 284px;
height: 488px;
}
@media screen and (max-width: 960px) {
.popup-premium::after {
display: none;
}
.popup-premium {
width: auto;
}
}
.popup-premium .hold {
max-width: 630px;
margin: 0 auto;
}
.popup-premium .heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px 20px;
font-size: 100px;
}
@media screen and (max-width: 640px) {
.popup-premium .heading {
font-size: 60px;
}
}
@media screen and (max-width: 479px) {
.popup-premium .heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.popup-premium .heading svg {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--color-active);
}
.popup-premium .sub {
font-weight: 300;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-sub-popup);
margin-top: 20px;
}
@media screen and (max-width: 640px) {
.popup-premium .sub {
margin-top: 15px;
}
}
.popup-premium .text {
text-align: start;
font-weight: 900;
font-size: 60px;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-item-name);
}
@media screen and (max-width: 1024px) {
.popup-premium .text {
font-size: 50px;
}
}
@media screen and (max-width: 640px) {
.popup-premium .text {
font-size: 40px;
}
}
@media screen and (max-width: 479px) {
.popup-premium .text {
text-align: center;
}
}
@media screen and (max-width: 390px) {
.popup-premium .text {
font-size: 36px;
}
}
.popup-premium .wrapped {
max-width: 465px;
margin: 25px auto 0;
}
.popup-premium .bottom {
font-weight: 300;
font-size: 14px;
line-height: 1.358;
color: var(--color-sub-popup);
text-align: start;
}
@media screen and (max-width: 479px) {
.popup-premium .bottom {
text-align: center;
}
}
.popup-premium .submit {
font-family: inherit;
border: none;
cursor: pointer;
max-width: 284px;
width: 100%;
margin: 25px auto 0;
border-radius: 20px;
padding: 18px 15px;
border: 2px solid var(--color-active);
font-weight: 400;
font-size: 24px;
line-height: 1.25;
letter-spacing: 0.02em;
color: #fff;
background: #fa4a1f;
-webkit-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.popup-premium .submit:hover {
background: none;
color: var(--color-active);
}
}
@media screen and (max-width: 479px) {
.popup-premium .submit {
max-width: 100%;
}
}
.popup-list {
--flex-gap: 10px;
--flex-items: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
color: var(--color-active);
gap: 20px var(--flex-gap);
font-weight: 400;
font-size: 24px;
letter-spacing: 0.02em;
}
@media screen and (max-width: 640px) {
.popup-list {
font-size: 20px;
--flex-items: auto;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
@media screen and (max-width: 390px) {
.popup-list {
gap: 8px;
}
}
.popup-list .item {
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
text-align: start;
}
@media screen and (max-width: 479px) {
.popup-list .item:nth-child(odd) {
min-width: 160px;
width: auto;
}
}
.popup-list span {
position: relative;
padding-left: 40px;
display: inline-block;
vertical-align: top;
text-align: left;
}
@media screen and (max-width: 479px) {
.popup-list span {
padding-left: 34px;
}
}
.popup-list span::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('data:image/svg+xml,');
background-size: contain;
width: 30px;
height: 30px;
}
@media screen and (max-width: 479px) {
.popup-list span::before {
width: 24px;
height: 24px;
}
}
.label-radio-choice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
cursor: pointer;
}
.label-radio-choice:last-child {
margin-bottom: 0;
}
.label-radio-choice .input {
display: none;
}
.label-radio-choice .input:checked + .input-radio-info {
background: var(--color-active);
}
.label-radio-choice .input:checked + .input-radio-info .price,
.label-radio-choice .input:checked + .input-radio-info .sup {
color: #fff;
}
.label-radio-choice .input:checked + .input-radio-info .radio-text {
color: #e5e1ed;
}
.input-radio-info {
width: 100%;
background: var(--bg-radio-info-popup);
border-radius: 20px;
padding: 5px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 10px;
-webkit-transition: background 0.3s, -webkit-box-shadow 0.3s;
transition: background 0.3s, -webkit-box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
.input-radio-info:hover {
-webkit-box-shadow: 0 0 0 2px inset var(--color-active);
box-shadow: 0 0 0 2px inset var(--color-active);
}
.input-radio-info .price {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
font-weight: 900;
font-size: 50px;
letter-spacing: 0.02em;
color: var(--color-active);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (max-width: 390px) {
.input-radio-info .price {
font-size: 40px;
}
}
.radio-text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-sub-popup);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
text-align: start;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (max-width: 390px) {
.radio-text {
font-size: 14px;
}
}
.radio-text .sup {
font-weight: 400;
font-size: 24px;
line-height: 1.25;
color: var(--color-item-name);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
@media screen and (max-width: 390px) {
.radio-text .sup {
font-size: 22px;
}
}
.popup-age {
max-width: 1000px;
overflow: hidden;
padding: 48px;
background: var(--bg-premium-popup);
border: 2px solid var(--border-popup-premium);
}
@media screen and (max-width: 860px) {
.popup-age {
padding: 20px;
}
}
.popup-age .hold {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
}
.popup-age .column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: end;
align-self: flex-end;
width: 100%;
}
.popup-age .column.secondary {
width: 100%;
max-width: 278px;
}
@media screen and (max-width: 860px) {
.popup-age .column.secondary {
display: none;
}
}
.popup-age .column img {
display: block;
width: 100%;
height: auto;
}
.popup-age .heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px 20px;
font-size: 100px;
}
@media screen and (max-width: 860px) {
.popup-age .heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.popup-age .heading svg {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--color-active);
}
.popup-age .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.popup-age .text {
text-align: start;
font-weight: 900;
font-size: 60px;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-item-name);
}
@media screen and (max-width: 640px) {
.popup-age .text {
font-size: 40px;
}
}
@media screen and (max-width: 479px) {
.popup-age .text {
text-align: center;
}
}
@media screen and (max-width: 390px) {
.popup-age .text {
font-size: 36px;
}
}
.popup-age .sub {
font-weight: 300;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-sub-popup);
margin-top: 50px;
}
@media screen and (max-width: 860px) {
.popup-age .sub {
margin-top: 15px;
text-align: center;
}
}
.popup-age .bottom {
margin-top: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
white-space: nowrap;
gap: 20px;
}
@media screen and (max-width: 860px) {
.popup-age .bottom {
margin-top: 15px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.popup-age .btn.real {
width: auto;
text-transform: capitalize;
min-height: 70px;
padding: 0 70px;
font-weight: 300;
font-size: 24px;
}
.popup-age .btn.secondary {
background-color: var(--bg-active);
color: var(--color-white);
border: 2px solid var(--color-active);
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.popup-age .btn.secondary:hover {
background: none;
color: var(--color-active);
}
}
.item-name {
margin-bottom: 10px;
display: inline-block;
vertical-align: top;
padding-left: 10px;
color: var(--color-item-name);
}
.input-field {
border: 2px solid var(--bg-border-input);
background: var(--bg-search);
border-radius: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 20px;
padding-left: 20px;
}
.input-field .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 10px;
width: 24px;
}
.input-field .input {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 46px;
background: none;
border: none;
width: 100%;
font-family: inherit;
padding: 14px 20px 14px 0;
font-weight: 300;
font-size: 16px;
color: var(--color-main);
}
.text-popup {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-text-popup);
}
.text-popup a {
color: var(--color-text-popup-link);
}
@media screen and (min-width: 1025px) {
.text-popup a:hover {
text-decoration: underline;
}
}
.group-columns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--color-item);
}
.group-columns .row {
margin: 30px 0 0;
}
.group-columns .row:first-child {
margin: 0;
}
.group-columns .text {
margin-bottom: 15px;
text-align: center;
padding: 18px 10px 0;
position: relative;
}
.group-columns .text::before {
content: "";
background: url('data:image/svg+xml,') no-repeat;
height: 2px;
width: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.popup-colums {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 860px) {
.popup-colums {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.popup-column {
width: 60%;
}
@media screen and (max-width: 860px) {
.popup-column {
width: 100%;
}
}
.popup-column.secondary {
width: 40%;
}
@media screen and (max-width: 860px) {
.popup-column.secondary {
width: 100%;
}
}
.panel-aside-signup {
background: var(--bg-image-aside-signup) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: relative;
padding: 60px 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 860px) {
.panel-aside-signup {
padding: 35px 10px 20px;
}
}
.panel-aside-signup::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: url("../images/fox-signup-desktop.png") no-repeat;
width: 100%;
height: 100%;
background-size: contain;
}
@media screen and (max-width: 860px) {
.panel-aside-signup::before {
background: url("../images/fox-signup-mobile.png") no-repeat;
background-position: 0 100%;
}
}
.panel-aside-signup .list {
--flex-gap: 10px;
--flex-items: 1;
max-width: 290px;
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--flex-gap);
position: relative;
z-index: 2;
}
@media screen and (max-width: 860px) {
.panel-aside-signup .list {
--flex-items: 2;
max-width: 100%;
}
}
.panel-aside-signup .list-item {
border-radius: 10px;
padding: 20px 20px 20px 10px;
background: var(--liner-gradient-aside-signup);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.09), 0 19px 11px 0 rgba(0, 0, 0, 0.05), 0 33px 13px 0 rgba(0, 0, 0, 0.01), 0 52px 15px 0 rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.09), 0 19px 11px 0 rgba(0, 0, 0, 0.05), 0 33px 13px 0 rgba(0, 0, 0, 0.01), 0 52px 15px 0 rgba(0, 0, 0, 0);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
width: calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
}
.panel-aside-signup .list-item.last {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media screen and (max-width: 640px) {
.panel-aside-signup .list-item {
padding: 10px;
}
.panel-aside-signup .list-item:not(.last) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
}
.panel-aside-signup .icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 80px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 860px) {
.panel-aside-signup .icon {
width: 60px;
height: 60px;
}
}
.panel-aside-signup .icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.panel-aside-signup .list-title {
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
margin-bottom: 4px;
color: var(--color-list-title);
}
.panel-aside-signup .list-desc {
font-weight: 300;
font-size: 16px;
line-height: 1.25;
color: var(--color-list-desc);
}
.panel-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 290px;
width: 100%;
margin: 0 auto 25px;
font-size: 117px;
position: relative;
padding: 0 10px;
color: var(--color-panel-head);
}
@media screen and (max-width: 860px) {
.panel-head {
max-width: 100%;
margin: 0 0 15px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.panel-head svg {
margin-bottom: 5px;
height: 17px;
}
.panel-head .sub {
font-weight: 900;
font-size: 40px;
letter-spacing: 0.02em;
}
.panel-aside-login {
background: var(--bg-image-aside-login) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: relative;
}
@media screen and (max-width: 860px) {
.panel-aside-login {
min-height: 230px;
}
}
@media screen and (max-width: 479px) {
.panel-aside-login {
padding-bottom: 59.25%;
min-height: auto;
}
}
.panel-aside-login::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: url("../images/fox-login-desktop.png") no-repeat;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
}
@media screen and (max-width: 860px) {
.panel-aside-login::before {
background: url("../images/fox-login-mobile.png") no-repeat;
background-position: 60% 100%;
background-size: contain;
}
}
@media screen and (max-width: 479px) {
.panel-aside-login::before {
background-position: 100% 100%;
background-size: 90%;
}
}
.popup-edit {
max-width: 742px;
width: 100%;
overflow: hidden;
}
.popup-edit .holder {
padding: 164px 20px 50px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 767px) {
.popup-edit .holder {
padding: 164px 20px 20px;
}
}
@media screen and (max-width: 374px) {
.popup-edit .holder {
padding: 164px 10px 10px;
}
}
.popup-edit .holder::before, .popup-edit .holder::after {
content: "";
height: 164px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.popup-edit .holder::before {
background: var(--liner-gradient-frame);
}
.popup-edit .holder::after {
z-index: 2;
background-color: rgba(var(--bg-popup-frame), var(--opacity-gradient-frame));
}
.popup-edit .form {
max-width: 636px;
width: 100%;
margin: 0 auto;
}
.popup-edit .panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: -120px;
margin-bottom: 40px;
position: relative;
z-index: 3;
}
.popup-edit .avatar {
margin-bottom: 20px;
position: relative;
}
.popup-edit .avatar[data-attr-avatar=true]::before {
content: "";
background: url("../images/foxy-edit.png") no-repeat;
position: absolute;
bottom: -5px;
left: -50%;
background-size: contain;
background-position: center;
width: 334px;
height: 211px;
margin: 0 auto;
}
.popup-edit .image {
width: 165px;
height: 165px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-size: 50px;
color: var(--color-white);
border-radius: 165px;
border: 4px solid rgba(255, 255, 255, 0.4);
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 18px 18px 0 rgba(0, 0, 0, 0.09), 0 41px 25px 0 rgba(0, 0, 0, 0.05), 0 73px 29px 0 rgba(0, 0, 0, 0.01), 0 113px 32px 0 rgba(0, 0, 0, 0);
}
.popup-edit .image::before, .popup-edit .image::after {
position: absolute;
content: "";
border-radius: 100%;
}
.popup-edit .image::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--liner-gradient-edit-avatar);
-webkit-box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.1);
}
.popup-edit .image::after {
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: linear-gradient(140deg, #ffc6b8 0%, #5f89ea 100%);
}
.popup-edit .image img,
.popup-edit .image svg {
position: relative;
z-index: 2;
}
.popup-edit .image img {
width: 149px;
height: 149px;
border-radius: 149px;
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.popup-edit .tag {
font-weight: 400;
font-size: 26px;
letter-spacing: 0.02em;
color: var(--color-popup-edit-tag);
}
.popup-edit .adress {
color: var(--color-community-user-avatar);
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
margin-bottom: 22px;
}
.popup-edit .title {
text-align: center;
font-size: 30px;
}
.popup-edit .cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
}
@media screen and (max-width: 640px) {
.popup-edit .cols {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.popup-edit .col {
width: 50%;
}
@media screen and (max-width: 640px) {
.popup-edit .col {
width: 100%;
}
}
.popup-edit .group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.popup-edit .group-item {
width: 50%;
}
.popup-edit .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.popup-edit .box {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 28%;
flex-basis: 28%;
}
.popup-edit .box.second {
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
-ms-flex-negative: 3;
flex-shrink: 3;
-ms-flex-preferred-size: 44%;
flex-basis: 44%;
}
.popup-edit .select2-container--default .select2-selection--single .select2-selection__rendered {
min-width: 1px;
}
.popup-edit .item-name {
padding: 0;
margin-bottom: 6px;
}
.popup-edit .textarea {
height: 100px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-main);
padding: 20px;
font-family: inherit;
}
.choice-file {
position: absolute;
bottom: 14px;
right: 0;
z-index: 2;
border-radius: 100%;
background: rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
width: 36px;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.choice-file .file {
display: none;
}
.account-detail {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 10px;
width: 100%;
max-width: 368px;
padding: 12px 30px;
border-radius: 20px;
background: var(--bg-account-detail);
color: var(--color-account-detail);
}
.account-detail .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.25;
text-align: center;
}
.account-detail strong {
font-weight: 400;
font-size: 20px;
margin-bottom: 3px;
}
.account-detail span {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--color-popup-edit-span);
}
@media screen and (max-width: 374px) {
.account-detail span {
font-size: 14px;
}
}
.account-detail .second {
color: var(--color-green);
}
.player-wrap {
position: relative;
}
#kt_player {
position: absolute !important;
}
.popup.age {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 91;
padding: 10px;
backdrop-filter: blur(15px);
background: rgba(var(--bg-rgb-popup), 0.7);
overflow: auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: none;
}
.popup.age.show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.player-panel .svg-avatar {
width: 63px;
height: 100%;
z-index: 1;
}
.fancybox-wrap:not(.fancybox-type-image) .fancybox-close {
opacity: 0;
visibility: hidden;
}
.popup-login, .popup-signup {
min-width: 990px;
}
@media screen and (max-width: 1050px) {
.popup-login, .popup-signup {
min-width: auto;
}
}
.generic-error {
margin: 0 0 10px;
color: red;
}
.field-error {
position: absolute;
top: calc(100% + 2px);
color: red;
font-size: 14px;
left: 0;
}
.row {
position: relative;
}
.popup .textarea {
height: 100px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: var(--color-main);
padding: 20px;
font-family: inherit;
}
.no-thumb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item-members {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.hidden {
display: none ;
}
.navigation-switch .active .btn:hover {
color: var(--color-btn-navigation--hover);
background-color: var(--bg-btn-navigation--hover);
}
.btn-favourites .sort-btn svg.icon-arrow-down {
width: 10px;
}
.btn-favourites .wrap-sort.show .sort-btn svg.icon-playlist {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.btn-favourites .hidden-box a {
white-space: nowrap;
}
.adding-item span {
height: 36px;
display: flex;
align-items: center;
}
.input {
height: 50px;
width: 100%;
resize: none;
border: 2px solid var(--border-color-comment-textarea);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 20px;
background-color: var(--bg-comment-box-textarea);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
letter-spacing: 0.02em;
color: #7e778e;
padding: 13px 20px;
font-family: inherit;
}
.comment-list .messege img {
max-width: 20px;
}
.comment-item .form-holder-reply {
display: none;
padding: 0 0 20px;
}
.comment-form-wrapper .row {
margin: 0 0 15px;
}
.comment-form-wrapper .row .input {
max-width: 845px;
}
.comment-form-wrapper .image {
margin: 0 0 15px;
}
.btn-favourites .wrap-sort li span {
display: flex;
}
.btn-favourites .hidden-box a.delete {
white-space: nowrap;
padding: 8px 12px;
}
.thumb-landscape .card.selected .desc {
color: var(--color-active);
}
.profile-aside .wrap-sort,
.profile-aside .hidden-box {
width: 100%;
}
.profile-aside .wrap-sort .arrow {
width: 10px;
}
.close-popup {
z-index: 9;
}
.section .bottom {
margin: 10px -10px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.load-more {
width: fit-content;
margin: 10px auto;
}
.section .bottom .submit,
.message .bottom .btn,
.load-more .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-family: inherit;
background: var(--bg-button);
color: var(--color-button);
border-radius: 15px;
font-weight: 300;
font-size: 10px;
padding: 5px 20px;
min-height: 36px;
cursor: pointer;
-webkit-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
border: none;
font-size: 14px;
}
.section .bottom .submit:disabled {
cursor: not-allowed;
}
[data-theme=dark] .section .bottom .submit:disabled {
background-color: #241c33;
}
[data-theme=light] .section .bottom .submit:disabled {
background: #a9a9ab;
color: #000000;
}
@media screen and (min-width: 1025px) {
.section .bottom .submit:not(:disabled):hover,
.message .bottom .btn:not(:disabled):hover,
.load-more .btn:not(:disabled):hover {
background-color: var(--bg-active);
color: var(--color-item--active);
}
}
.item {
position: relative;
}
.item-control {
position: absolute;
z-index: 9;
right: 10px;
top: 10px;
}
.upload-holder svg {
width: 20px;
height: 20px;
}
.upload-holder .button svg{
width: 1em;
height: 1em;
}
.upload-holder.wrap-sort.show .sort-btn svg {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.uploading .upload-box,
.uploading .upload-button {
display: none;
}
/* Upload progressbar */
.form-upload {
position: relative;
}
.form-upload.uploading {
min-height: 80px;
cursor: wait;
}
.form-upload.uploading > *:not(.progressbar) {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.form-upload.uploading-finished {
cursor: default;
}
.progressbar {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
height: 50px;
border-radius: 20px;
background: var(--bg-search, #f0ecf5);
border: 2px solid var(--bg-border-input, #e5e1ed);
overflow: hidden;
opacity: 1;
visibility: visible;
}
.progressbar .progress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: var(--bg-active, #fa4a1f);
border-radius: 18px;
}
.progressbar .text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 18px;
color: var(--color-main, #170f29);
z-index: 1;
}
.progressbar.half-done .text {
color: var(--color-item--active, #fff);
}
.radio-box .mask-button.file-control {
margin: 0 0 10px;
}
.comment-item .form-holder-reply.open {
display: block;
}
.smileys-bar {
margin: 0 0 10px;
}
.smileys-bar img {
width: 20px;
cursor: pointer;
max-height: 20px;
}
.form-frame {
-ms-flex-align: flex-end;
align-items: flex-end;
}
.success {
color: var(--color-item-name);
}
.list-messages .message img,
.list-messages .message-text img {
max-width: 20px;
}
.panel-message {
position: relative;
}
.message-form .smileys-bar {
position: absolute;
bottom: 100%;
border-top: 1px solid var(--bg-border-chat);
background-color: var(--bg-chat);
width: 100%;
left: 0;
padding: 5px;
margin: 0 0 1px;
display: none;
}
.message-form .smileys-bar.show {
display: flex;
flex-wrap: wrap;
gap: 5px;
z-index: 99;
}
#previewContainer {
display: flex;
gap: 10px;
position: absolute;
z-index: 99;
bottom: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--bg-border-chat);
background-color: var(--bg-chat);
width: 100%;
padding: 5px;
margin: 0 0 1px;
}
#preview_container {
display: flex;
gap: 10px;
width: 100%;
overflow-x: scroll;
min-height: 86px;
overflow-x: auto;
white-space: nowrap;
}
/* Chrome, Edge, Safari */
.scroll-x::-webkit-scrollbar {
height: 5px;
}
.scroll-x::-webkit-scrollbar-thumb {
background-color: #1A1A1A;
border-radius: 2px;
}
.scroll-x::-webkit-scrollbar-track {
background: transparent;
}
/* Удаляем стрелки в Chrome */
.scroll-x::-webkit-scrollbar-button {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
@media screen and (max-width: 1050px) {
#previewContainer {
position: static;
max-width: -webkit-fill-available;
}
}
.preview {
position: relative;
width: 70px;
height: 70px;
min-width: 70px;
margin: 7px 0 0 0;
}
.thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
#previewContainer .remove-file {
position: absolute;
top: -7px;
right: -7px;
background: #35363A;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #1A1B1F;
box-sizing: border-box;
cursor: pointer;
}
#previewContainer .title-preview {
width: 100%;
}
#previewContainer .remove-file svg {
width: 8px;
height: 8px;
}
#previewContainer .remove {
position: absolute;
cursor: pointer;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#previewContainer .icon-img-message,
#previewContainer .icon-video-message {
position: absolute;
bottom: 5px;
left: 5px;
}
.loader {
position: absolute;
width: 30px;
height: 30px;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
border-radius: 50%;
overflow: hidden;
transition: background-color 0.3s;
}
.loader.done {
display: none;
}
.progress-ring {
width: 30px;
height: 30px;
}
.progress-ring.rotating {
animation: rotate 2s linear infinite; /* Вращаем весь круг */
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.progress-ring__background,
.progress-ring__progress {
fill: none;
stroke-width: 10;
stroke-linecap: round;
}
.progress-ring__background {
stroke: gray;
}
.progress-ring__progress {
stroke: #fff;
stroke-dasharray: 283;
stroke-dashoffset: 283;
transition: stroke-dashoffset 0.5s linear; /* Двигаем шкалу */
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #fff;
}
.play-svg {
z-index: 99;
width: 1rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1.2rem;
}
.button-message:disabled {
cursor: not-allowed;
}
@media screen and (min-width: 1025px) {
.button-message:disabled:hover {
color: var(--color-button-message-chat);
}
}
.message-form .field-error {
bottom: calc(100% + 2px);
top: auto;
left: 10px;
z-index: 99;
}
.row-message.me {
display: flex!important;
}
.row-message .message .media img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
max-width: none;
}
.row-message .media {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
max-width: 500px;
margin: auto;
}
.row-message .media a {
position: relative;
}
.post .profile-item .media {
position: relative;
}
.post .profile-item .media .no-thumb {
position: relative;
left: 0;
right: 0;
transform: translate(0, 0);
height: 100%;
display: block;
text-align: center;
top: 0;
}
.popup .dropped-list-selector .hold {
gap: 15px;
--flex-gap: 15px;
--flex-items: 0;
overflow-x: hidden;
}
.popup .label-title {
margin-bottom: 20px;
}
.autocomplete-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--bg-search-autocomplete);
z-index: 3;
border-radius: 20px;
-webkit-box-shadow: var(--shadow-search-autocomplete);
box-shadow: var(--shadow-search-autocomplete);
font-weight: 300;
font-size: 16px;
line-height: 1.25;
overflow: auto;
max-height: 350px;
max-width: calc(100% - 74px);
display: none;
margin: 20px 0 0;
}
.autocomplete-group {
font-weight: 400;
font-size: 24px;
padding: 0 20px;
margin: 20px 0 10px 0;
color: var(--color-autocomplete--title);
}
.autocomplete-suggestion {
color: var(--color-autocomplete);
display: block;
padding: 15px 20px;
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.autocomplete-suggestion:hover {
background-color: var(--bg-list-auto-complete--hover);
}
}
.autocomplete-suggestion strong {
color: var(--color-active);
}
@media screen and (max-width: 767px) {
.autocomplete-suggestions {
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: static;
width: 100% !important;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
max-height: 100%;
margin-bottom: -10px;
padding-bottom: 10px;
max-width: 760px;
margin: 0 auto;
left: 0 !important;
top: 65px !important;
}
}
.switcher-lang .button-lang img{
object-fit: contain;
height: 100%;
}
.row label {
color: var(--color-item-name);
cursor: pointer;
}
.row-message .message .original-text {
white-space: normal;
}
.no-player img {
width: 100%;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
object-fit: cover;
}
.no-player .message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-slider .no-thumb {
color: var(--color-main);
z-index: 9;
}
.section .row .bottom {
flex-direction: column;
margin: 10px 0;
}
.list-subscriptions .grid-item a {
width: 100%;
text-align: center;
}
.link-offer img {
width: 100%;
max-width: 883px;
}
.empty-content{
font-size: 16px;
}
.popup-colums .radio-list{
padding-bottom: 10px;
}
.radio-info {
color: var(--color-item-name);
}
.label-title{
margin-bottom: 10px;
display: inline-block;
vertical-align: top;
padding-left: 10px;
font-weight: 300;
color: var(--color-item-name);
}
.album-inner {
position: relative;
}
.album-inner .message {
position: absolute;
text-align: center;
padding: 40px 20px 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
line-height: 3.6rem;
font-weight: 500;
background-color: var(--bg-channel-page-tags);
}
.album-inner .message a {
color: var(--bg-active);
}