/* ---  R E S E T   C S S  --- */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
q:before {content:"\00AB";}
q:after {content:"\00BB";}
/*blockquote{quotes:none;}
blockquote:before, blockquote:after {content:""; content:none;}*/
table {border-collapse:collapse; border-spacing:0;}
/* ---  R E S E T   C S S  --- */
:focus, :active {outline:0;}
html {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; height:100%;}
body {background-color:var(--color-main-body); min-width:320px; width:100%; height:100%; height:auto; font-size:100%; -webkit-font-smoothing:subpixel-antialiased;}
html, body {font-family:Roboto,Open Sans,Helvetica Neue,sans-serif; line-height:1.30769231;}
* {margin:0; padding:0; border:0; vertical-align:baseline;}
*, *:before, *:after {-webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit;}
img {font-size:12px; color:#666; vertical-align:top; text-align:center;}
button {font-family:inherit; cursor:pointer;}
button:active, button:focus, button:hover, button::-moz-focus-inner, button::-moz-focusring {-moz-outline:0; -ms-outline:0; -o-outline:0; -webkit-outline:0; user-select:none;}
a:active, a:focus, a:hover {outline:0;}
a, a:visited {text-decoration:none;}
strong {font-weight:500;}
code {background:#F6F6F6;}


:root {
--height-page-header:48px;
--width-container-huge:1540px;
--width-container-big:1128px;
--width-container-medium:1024px;
--width-container-small:990px;
--width-container-tiny:780px;

--linear-gradient-shimmer:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right / 600% 100%;
--animation-shimmer:shimmer 2.5s infinite;

--font-size-logo:30px;

--z-index-wQkMmJeHNrhEfVnWXhZGvT:1200;
--z-index-fullscreenad:700;
--z-index-mobile-overmenu:600;
--z-index-dragndrop:500;
--z-index-mobile-uploadbtn:400;
--z-index-page-header:100;
--z-index-toaster-manager:50;
--z-index-purple-progress-bar:20;
--z-index-global__tooltip__body:10;
--z-index-mobile-tabs:10;
--global-offset-from-page-header:15px;
}




/* ---  E S E N T I A L  --- */
.m10 {margin:10px;}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml30 {margin-left:30px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb40 {margin-bottom:40px;}
.mb100 {margin-bottom:100px;}
.mb200 {margin-bottom:200px;}
.mb300 {margin-bottom:300px;}

.p10 {padding:10px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:15px;}
.pl0 {padding-left:0px;}
.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:15px;}
.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}

.h100 {height:100%;}
.w100 {width:100%;}
.fw500 {font-weight:500;}

.o-hidden {overflow:hidden;}
.v-hidden {visibility:hidden;}
.p-absolute {position:absolute;}
.p-relative {position:relative;}
.p-fixed {position:fixed;}
.p-sticky {position:sticky;}
.p-static {position:static;}
.d-none {display:none;}
.d-none--important {display:none !important;}
.d-flex {display:flex;}
.df-center--h {display:flex; justify-content:center;}
.df-center--v {display:flex; align-items:center;}
.ai-center {align-items:center;}
.ai-end {align-items:end;}
.jc-sbetween {justify-content:space-between;}
.jc-fstart {justify-content:flex-start;}
.jc-center {justify-content:center;}
.ta-center {text-align:center;}
.flex1 {flex:1;}
.cursor-default {cursor:default;}
.cursor-pointer {cursor:pointer;}

/*ошибка*/
.o-y-scroll {}
.o-y-hidden {}
.scroll-y--show {overflow-y:scroll;}
.scroll-y--hide {overflow-y:hidden;}
.color--blue {color:var(--color-blue-primary) !important;}
.text--green {color:var(--color-green-primary);}
.text--red {color:var(--color-red-primary);}
.display_block {display:block;}
.display_inline {display:inline-block;}
.text_center {text-align:center;}
.text_left {text-align:left;}
.color_black {color:#140C1A;}
.weight_400 {font-weight:400;}
.weight_500 {font-weight:500;}
.p_t_10 {padding-top:10px;}
.p_l_15 {padding-left:15px;}
.p_r_15 {padding-right:15px;}
/*ошибка*/
/* ---  E S E N T I A L  --- */



/* ---  A N I M A T I O N  --- */
.animation__shimmer {animation:shimmer 2.5s infinite; -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/600% 100%;}

/* ---  анимация точек (при публикации комментария) --- */
.animation__loading-dots {display:flex; justify-content:center; align-items:center; cursor:wait;}
.animation__loading-dots .animation-dot {background:#5F4781; margin-right:5px; width:5px; height:5px; border-radius:50px; animation-name:pr_bt_anim; animation-duration:750ms; animation-iteration-count:infinite;}
.animation__loading-dots .animation-dot:nth-child(1) {-webkit-animation-delay:0ms; -o-animation-delay:0ms; animation-delay:0ms;}
.animation__loading-dots .animation-dot:nth-child(2) {-webkit-animation-delay:180ms; -o-animation-delay:180ms; animation-delay:180ms;}
.animation__loading-dots .animation-dot:nth-child(3) {-webkit-animation-delay:360ms; -o-animation-delay:360ms; animation-delay:360ms;}

.animation__loading-dots--small:after {content:""; display:inline-flex; width:0px; color:inherit; animation:loadingDotsSmall steps(1,end) 1s infinite;}
/* ---  онлайн pulse индикатор --- */
.animation__online-indicator {position:relative; background:var(--color-red-primary); display:inline-block; border-radius:50%;}
.animation__online-indicator:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:#EC1313; border-radius:50%; -webkit-animation:tw-channel-status-indicator--pulse 1.5s infinite; animation:tw-channel-status-indicator--pulse 1.5s infinite; animation-timing-function:ease; animation-timing-function:ease; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; opacity:0.2;}

/* анимация дерганье при неправильном вводе */
.animation__validation--shake {animation:aerr 0.6s ease;}

.animation__bump {animation:bump 200ms;}

.animation__blink-change {animation-name:bgBlink; animation-duration:500ms;}
/* ---  A N I M A T I O N  --- */



/* ---  M A I N   C L A S S   N A M E S  --- */
#page {display:flex; flex-direction:column; height:100%; /*padding-top:var(--height-page-header);*/}
#page-content {flex:auto;}

.container {position:relative; margin-right:auto; margin-left:auto; width:100%;}
/* ---  M A I N   C L A S S   N A M E S  --- */



/* ---  G L O B A L   C L A S S   N A M E S  --- */
.global__dot {margin:0 5px; font-size:16px; font-weight:500;}
.global__dot:before {content:"\00B7"; display:flex; height:100%; vertical-align:middle;}
.global__blur {-webkit-filter:blur(15px); -moz-filter:blur(15px); -o-filter:blur(15px); -ms-filter:blur(15px); filter:blur(15px);}
.global__break-words {word-break:break-word; word-wrap:break-word; -ms-hyphens:auto; -moz-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;}


.global__url-link--dotted {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}



/* ---  крестик закрытия блоков --- */
.global__button--close {position:absolute; top:10px; right:10px; width:18px; height:18px; opacity:0.3; cursor:pointer;}
.global__button--close:before, .global__button--close:after {content:""; position:absolute; top:calc(50% - 1px); left:calc(50% - 8px); background:#000; width:16px; height:2px;}
.global__button--close:before {transform:rotate(45deg);}
.global__button--close:after {transform:rotate(-45deg);}
.global__button--close:hover {opacity:0.5;}

/* ---  тултип подробнее (?) --- */
.global__tooltip-help {position:relative; background-image:url(/assets/img/sprite/global.svg#icon__help); display:inline-block; flex-shrink:0; cursor:help;}
.global__tooltip-help__body {position:absolute; z-index:var(--z-index-global__tooltip__body); background:#FFF; padding:15px; border-radius:3px; font-size:13px; line-height:18px; color:#333; word-break:break-word; word-wrap:break-word; hyphens:auto; transition:all 300ms ease-in-out; visibility:hidden; opacity:0; box-shadow:rgba(0, 0, 0, 0.3) 0 2px 10px;}
.global__tooltip-help__body li {margin-left:15px; list-style:none;}
.global__tooltip-help__body li:before {content:"✓"; position:relative; bottom:-1px; padding-right:5px; font-size:16px; font-weight:500; color:var(--color-green-primary);}
.global__tooltip-help:hover .global__tooltip-help__body {visibility:visible; opacity:1;}
.global__tooltip-help__body a {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}



.global__tooltip-info {display:flex; align-items:center; flex-shrink:0; cursor:help;}
.global__tooltip-info .body {position:absolute; z-index:var(--z-index-global__tooltip__body); background:#FFF; padding:15px; border-radius:3px; font-size:13px; line-height:18px; color:#333; word-break:break-word; word-wrap:break-word; hyphens:auto; transition:all 300ms ease-in-out; visibility:hidden; opacity:0; box-shadow:rgba(0, 0, 0, 0.3) 0 2px 10px;}
.global__tooltip-info .body li {margin-left:15px; list-style:none;}
.global__tooltip-info .body li:before {content:"✓"; position:relative; bottom:-1px; padding-right:5px; font-size:16px; font-weight:500; color:var(--color-green-primary);}
.global__tooltip-info:hover .body {visibility:visible; opacity:1;}
.global__tooltip-info a {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}



.global__tooltip-options {position:absolute; top:5px; right:5px; z-index:3; border-radius:3px;}
.global__tooltip-options:not(.active) {visibility:hidden;}
.global__tooltip-options .dialog-btn {background-color:#FFF; padding:4px; border-radius:8px; cursor:pointer; box-shadow:0 0 0 1px #EDEAE9, 0 1px 4px 0 rgba(109, 110, 111, 0.08);}
.global__tooltip-options .dialog-btn .icon {display:flex; justify-content:center; align-items:center; width:28px; height:28px; border-radius:6px; transition:background-color 200ms ease-in-out;}
.global__tooltip-options .dialog-btn:hover .icon {background-color:rgba(0, 0, 0, 0.06);}
.global__tooltip-options .dialog-btn .icon svg {width:20px; height:20px; fill:#6D6E6F;}
.global__tooltip-options .dialog-btn .icon:hover svg {fill:#1E1F21;}
.global__tooltip-options .dialog-menu {position:absolute; top:28px; right:0px; z-index:10; background-color:#FFF; padding:4px 0; border-radius:4px; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.global__tooltip-options .dialog-menu .btn {background-color:transparent; display:flex; align-items:center; width:100%; height:36px; padding:0 12px; font-size:14px; color:#333; cursor:pointer;}
.global__tooltip-options .dialog-menu .btn:hover {background-color:rgba(0,0,0,0.05); color:#222;}
.global__tooltip-options .dialog-menu .btn svg {margin-right:8px; width:16px; height:16px; fill:#666;}
.global__tooltip-options .dialog-menu .check .btn:before {content:""; width:20px; padding-right:10px;}
.global__tooltip-options .dialog-menu .check .btn.active:before {content:"\2714";}
.global__tooltip-options .dialog-menu .delete .btn {color:var(--color-red-dark);}
.global__tooltip-options .dialog-menu .delete .btn:hover {color:var(--color-red-highlight);}
.global__tooltip-options .dialog-menu .delete .btn svg {fill:var(--color-red-dark);}
.global__tooltip-options .dialog-menu .delete .btn:hover svg {fill:var(--color-red-highlight);}
.global__tooltip-options .dialog-menu .separator {margin:4px 0; border-top:1px solid rgba(0,0,0,0.05);}


.global__tooltip-hover {position:relative;}
.global__tooltip-hover__body {position:absolute; z-index:-100; background-color:rgba(34, 34, 34, 0.8); display:flex; justify-content:center; align-items:center; border-radius:3px; font-size:14px; line-height:1.5; color:#FFF; white-space:nowrap; transition:all 200ms ease-in-out; visibility:hidden; opacity:0;}
.global__tooltip-hover:hover .global__tooltip-hover__body {z-index:20; visibility:visible; opacity:1;}


.global__tooltip-attention {display:inline-block; cursor:help;}
.global__tooltip-attention__body {position:absolute; z-index:var(--z-index-global__tooltip__body); background:#FFF; padding:15px; border-radius:3px; font-size:13px; line-height:18px; color:#333; word-break:break-word; word-wrap:break-word; hyphens:auto; transition:all 300ms ease-in-out; visibility:hidden; opacity:0; box-shadow:rgba(0, 0, 0, 0.3) 0 2px 10px;}
.global__tooltip-attention__body li {margin-left:15px; list-style:none;}
.global__tooltip-attention__body li:before {content:"✕"; position:relative; top:1px; padding-right:5px; font-size:16px ; font-weight:500; color:var(--color-red-primary);}
.global__tooltip-attention:hover .global__tooltip-attention__body {visibility:visible; opacity:1;}
.global__tooltip-attention__body a {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}

.global__input-checkbox {position:relative; display:flex; align-items:center; cursor:pointer;}
.global__input-checkbox input {display:none;}
.global__input-checkbox span:before {content:""; position:absolute; top:0px; left:0px;}
.global__input-checkbox input:checked ~ span:after {content:""; position:absolute; top:0px; left:0px; background-position:50% 50%; background-repeat:no-repeat;}
.global__input-checkbox.disabled {opacity:0.7; cursor:not-allowed;}
.global__input-checkbox.black span:before {background-color:rgba(0, 0, 0, 0.80);}
.global__input-checkbox.black input:checked ~ span:after {background-image:url(/assets/img/sprite/global.svg#icon__checkmark); background-color:rgba(0, 0, 0, 0.80);}
.global__input-checkbox.purple span:before {border:1px solid #B4B9C2;}
.global__input-checkbox.purple input:checked ~ span:after {background-image:url(/assets/img/sprite/global.svg#icon__checkmark); background-color:var(--color-purple-primary);}
.global__input-checkbox.green span:before {border:1px solid #B4B9C2;}
.global__input-checkbox.green input:checked ~ span:after {background-image:url(/assets/img/sprite/global.svg#icon__checkmark); background-color:var(--color-green-primary);}
.global__input-checkbox.size--16 span {padding-left:20px;}
.global__input-checkbox.size--16 span:before {width:16px; height:16px; border-radius:2px;}
.global__input-checkbox.size--16 input:checked ~ span:after {background-size:12px; width:16px; height:16px; border-radius:2px;}
.global__input-checkbox.size--40 span:before {width:40px; height:40px; border-radius:2px;}
.global__input-checkbox.size--40 input:checked ~ span:after {background-size:20px; width:40px; height:40px; border-radius:2px;}

.global__nickname {display:flex; align-items:center; font-weight:500;}
.global__nickname--identified {color:var(--color-purple-primary);}
.global__nickname--anonymous {color:#444;}

.global__user-icon {background-position:50% 50%; background-repeat:no-repeat; display:inline-flex;}
.global__user-icon--moderator {background-image:url(/assets/img/sprite/global.svg#user-icon__moderator); background-color:var(--color-green-highlight);}
.global__user-icon--administrator {background-image:url(/assets/img/sprite/global.svg#user-icon__administrator); background-color:#F3961E;}

.global__user-rating {display:flex; justify-content:center; align-items:center; cursor:default;}
.global__user-rating.neutral {background-color:rgba(0, 0, 0, 0.07); color:#666;}
.global__user-rating.positive {background-color:var(--color-green-light); color:var(--color-green-primary);}
.global__user-rating.negative {background-color:rgba(255, 0, 0, 0.10); color:var(--color-red-primary);}

.global__robot-icon {background-color:#4B4B4B; padding:0 5px; border-radius:5px; color:#FFF;}

.global__avatar {flex-shrink:0; border-radius:50%;}
.global__avatar--empty {background-color:#EC4E91; display:flex; justify-content:center; align-items:center; font-weight:500; color:#FFF; text-transform:uppercase; box-shadow:inset -12px -8px 30px var(--color-purple-primary);}
.global__avatar--anonymous {background-image:url(/assets/img/sprite/global.svg#icon__anonymous--white); background-color:#333; background-position:50% 50%; background-repeat:no-repeat;}

.global__emoji {font-style:normal; font-family:"Noto Color Emoji", sans-serif; font-weight:400;}

.global__email-admin {position:relative; top:3px; display:inline-flex; margin-left:2px; width:111px; height:16px;}
.global__email-admin svg {height:16px;}


.global__mob-side-scroll {flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
/* ---  G L O B A L   C L A S S   N A M E S  --- */

/* --- F A N C Y B O X --- */
#dialog-captcha .dialog-block-head {background:var(--color-green-highlight) !important; color:#FFF !important; text-align:left !important;}
#dialog-captcha .fancybox-button--close {color:#EFEFEF !important;}
#dialog-captcha .fancybox-button--close:hover {color:#FFF !important;}
#dialog-captcha .dialog-block-text {margin-bottom:0px !important; padding:5px 0 10px 0 !important; border-bottom:none !important; border-bottom:none !important;}
#dialog-captcha .fancybox-close-small {color:#FFF;}

/*dialog-block*/
/*:not(#dialog_delete) .dialog-block .fancybox-close-small {color:#FFF;}*/
.fancybox-content, .dialog-block {position:absolute !important; top:25%; left:50%; transform:translateX(-50%); margin:0 !important;}
.dialog-block {position:absolute !important; top:25%; left:50%; transform:translateX(-50%); display:none; margin:0!important; min-width:310px; padding:10px 20px !important; border-radius:3px;}
.dialog-block .dialog-block-head {background:#FCFCFC; margin:-10px -20px 10px -20px; padding:15px 20px 15px 20px; border-bottom:1px solid #DCDADE; text-align:center;}
.dialog-block .dialog-block-text {margin-bottom:10px; padding:5px 0 15px 0; border-bottom:1px solid #E9E9E9; line-height:28px; color:#140C1A;}
.dialog-block .dialog-block-text-row {display:flex; flex-direction:row-reverse; justify-content:space-between; font-size:14px;}
.dialog-block .dialog-block-text-left {margin-top:15px; padding-top:5px; border-top:1px solid #F0EEF2; color:#444;}
.dialog-block .dialog-block-timer {margin-top:15px; padding-top:5px; border-top:1px solid #F0EEF2; color:#444; text-align:right;}
.dialog-block .buttons-action {text-align:right;}
.dialog-block .buttons-action .btn-cancel {position:relative; background-color:var(--color-red-primary); display:inline-block; height:40px; float:left; padding:0 15px; border:1px solid var(--color-red-highlight); border-radius:30px; font-size:14px; line-height:38px; font-weight:500; color:#FFF; text-align:center;}
.dialog-block .buttons-action .btn-cancel:hover {background-color:var(--color-red-highlight);}
.dialog-block .buttons-action .btn-confirm {position:relative; background-color:#34A853; display:inline-block; height:40px; float:right; padding:0 15px; border:1px solid #329F4F; border-radius:30px; font-size:14px; line-height:38px; font-weight:500; color:#FFF; text-decoration:none; text-align:center;}
.dialog-block .buttons-action .btn-confirm:hover {background-color:#329F4F;}
.dialog-block .fancybox-button--close {position:absolute; top:0px; right:0; background:none; color:#C1C1C1;}
.dialog-block .fancybox-button--close:hover {background:none !important; color:#140C1A;}

/*dialog-delete*/
.dialog_delete-container.fancybox-is-open .fancybox-bg {background:#2B2B2B; opacity:0.9;}
#dialog_delete .dialog-block-head {text-align:left;}
#dialog_delete .btn-cancel {/*background-color: #f8f6f9;border: 1px solid #CED0D4;*/ background-color:#FFF; margin-right:10px; float:none; border:none; font-weight:normal; color:#140C1A;}
#dialog_delete .btn-cancel:hover {background-color:#F1F0F2;}
#dialog_delete .btn-confirm {background-color:var(--color-red-primary); border:1px solid var(--color-red-highlight);}
#dialog_delete .btn-confirm:hover {background-color:var(--color-red-highlight);}

/*dialog-adulthood*/
#adulthood .btn-cancel {position:relative; background-color:var(--color-red-primary); display:inline-block; height:40px; float:left; padding:0 10px; border:1px solid var(--color-red-highlight); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-size:14px; line-height:38px; font-weight:500; color:#FFF; text-align:center;}
#adulthood .btn-cancel:hover {background-color:var(--color-red-highlight);}
#adulthood .btn-confirm {position:relative; background-color:#34A853; display:inline-block; height:40px; float:right; padding:0 10px; border:1px solid #329F4F; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-size:14px; line-height:38px; font-weight:500; color:#FFF; text-decoration:none; text-align:center;}
#adulthood .btn-confirm:hover {background-color:#329F4F;}

/*video window*/
.fancybox-slide--video {}
.fancybox-slide--video .fancybox-content {border:3px solid #5F4781; border-top:none; border-radius:0 0 5px 5px;}
.fancybox-slide--video .fancybox-content:before {content:""; position:absolute; top:-44px; left:-3px; right:-3px; z-index:-1; background:#5F4781; display:block; height:44px; border-radius:4px 4px 0 0;}
.fancybox-slide--video .fancybox-content .video-popup-wrap {height:100%; overflow:hidden; border-radius:0 0 4px 4px;}
.fancybox-slide--video .fancybox-content .video-popup-wrap .video-popup-topblock {position:absolute; top:-38px; left:-2px; right:-2px; z-index:-1; background:#5F4781; display:block; height:40px; border:2px solid #5D297D; border-radius:4px 4px 0 0;}
.fancybox-slide--video .fancybox-content .fancybox-button--close {position:absolute; top:-40px; right:0; background:none;}
.fancybox-slide--video .fancybox-content .fancybox-button--close:hover {color:#FFF !important;}
.fancybox-slide--video .fancybox-button.global__button--close:before, .fancybox-slide--video .fancybox-button.global__button--close:after {background:#FFF;}
/* --- F A N C Y B O X --- */

#reaction-progress-bar {position:fixed; top:var(--height-page-header); z-index:var(--z-index-purple-progress-bar); width:100%;}
#reaction-progress-bar .status {background-image:linear-gradient(to right, transparent, var(--color-purple-primary)); width:0%; height:2px;}

#navigation-totop {position:fixed; top:0; bottom:0; right:20px; z-index:100; background-image:linear-gradient(to right, #5F4781, #EC4E91); background-size:350%; display:flex; justify-content:center; margin-top:auto; margin-bottom:auto; width:59px; height:59px; border-radius:50%; font-size:34px; color:#FFF; transition:transform 500ms ease-in-out, visibility 500ms ease-in-out, opacity 500ms ease-in-out; cursor:pointer; box-shadow:0 5px 8px rgba(95,71,129, 0.45); box-shadow:0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);}
#navigation-totop.hidden {transform:scale(0); visibility:hidden; opacity:0;}
#navigation-totop.visible {transform:scale(1); visibility:visible; opacity:1;}
#navigation-totop svg {position:absolute; top:11px; width:60%; height:60%; fill:#FFF;}
#navigation-totop span {position:absolute; top:7px; rotate:270deg;}
#navigation-totop:hover {background-size:200%;}

#navigation-updown {position:fixed; top:0; bottom:0; right:20px; z-index:100; background-image:linear-gradient(to right, #5F4781, #EC4E91); background-size:350%; display:flex; display:none !important; justify-content:center; align-items:center; margin-top:auto; margin-bottom:auto; width:59px; height:59px; border-radius:50%; font-size:34px; color:#FFF; transition:all 500ms ease-in-out; cursor:pointer; box-shadow:0 5px 8px rgba(95,71,129, 0.45); box-shadow:0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);}
#navigation-updown.hidden {transform:scale(0); visibility:hidden; opacity:0;}
#navigation-updown.visible {transform:scale(1); visibility:visible; opacity:1;}
#navigation-updown span {padding-bottom:5px;}
#navigation-updown:hover {background-size:200%;}



#toaster-manager {position:fixed; bottom:30px; left:20px; z-index:var(--z-index-toaster-manager);}
#toaster-manager .notification {background-color:#FFF; margin-top:10px; max-width:400px; min-width:300px ; width:100%; overflow:hidden; border-radius:5px; font-size:14px; color:#333; transition:all 500ms ease-in-out; visibility:hidden; opacity:0; box-shadow:rgba(0, 0, 0, 0.3) 0 2px 10px;}
#toaster-manager .notification.visible {visibility:visible; opacity:1;}
#toaster-manager .notification.hidden {transform:scale(0); transform:translateX(-440px); visibility:hidden; opacity:0;}
#toaster-manager .notification .header {display:flex; align-items:center; padding:10px;}
#toaster-manager .notification.error .header {/*background-color:#FFF9F9;*/}
#toaster-manager .notification .header .icon {display:flex; justify-content:center; align-items:center; flex-shrink:0; margin-right:5px; width:24px; height:24px; border-radius:100%;}
#toaster-manager .notification.success .header .icon {background-color:var(--color-green-highlight);}
#toaster-manager .notification.error .header .icon {background-color:var(--color-red-highlight);}
#toaster-manager .notification .header .icon svg {width:14px; height:14px; fill:#FFF;}
#toaster-manager .notification .header .loader {position:relative; margin-right:5px; width:40px; height:40px;}
#toaster-manager .notification .header .loader .spinner {position:relative; width:40px; height:40px; border-radius:100%; animation:rotation 1s linear infinite; border-width:1px; border-style:solid; border-color:var(--color-green-primary) transparent var(--color-green-primary) transparent;}
#toaster-manager .notification .header .loader .spinner:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:34px; height:34px; border-radius:100%; animation:rotation 0.5s linear infinite reverse; border-width:1px; border-style:solid; border-color:transparent var(--color-green-primary) transparent var(--color-green-primary);}
#toaster-manager .notification .header .loader .percent {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:14px; color:#228D1A;}
#toaster-manager .notification .header .title span {color:var(--color-green-primary);}
#toaster-manager .notification .body {padding:15px; border-top:1px solid rgba(0, 0, 0, 0.06);}
#toaster-manager .notification .footer {display:flex; justify-content:space-between; flex-wrap:wrap; padding:10px; column-gap:15px; row-gap:5px;}
#toaster-manager .notification.grey .footer {background-color:#FCFCFC;}
#toaster-manager .notification .footer a {color:var(--color-blue-highlight);}
#toaster-manager .notification .media {position:relative;}
#toaster-manager .notification .media-size {position:absolute; top:10px; right:10px; z-index:20; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;}
#toaster-manager .notification .media-description {position:absolute; bottom:0px; z-index:20; background:linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); display:flex; flex-flow:column; justify-content:flex-end; width:100%; height:90px; text-shadow:0 0 3px rgba(0, 0, 0, 0.75); color:#FFF;}
#toaster-manager .notification .media-description .top {width:100%; padding:0px 5px 5px; font-size:12px;}
#toaster-manager .notification .media-description .top .title {overflow:hidden; font-size:12px; line-height:22px; text-overflow:ellipsis; white-space:nowrap; letter-spacing:0.3px;}
#toaster-manager .notification .media-bg {position:absolute; top:50%; left:50%; z-index:1; transform:translate(-50%, -50%); background-color:var(--color-grey-skeleton); display:flex; justify-content:center; align-items:center; width:100%; height:100%; pointer-events:none; animation:var(--animation-shimmer); animation-delay:0.3s; -webkit-mask:var(--linear-gradient-shimmer);}
#toaster-manager .notification .media-bg span {background-color:#565656; -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; text-shadow:0px 2px 3px rgba(255,255,255,0.5); font-size:40px; color:transparent; color:rgba(255,255,255,0.3); opacity:0.6;}
#toaster-manager .notification .media-preview {position:relative; z-index:10; max-width:100%; width:100%; max-height:200px; object-fit:cover;}




#header-alert {background-color:var(--color-red-primary); display:flex; justify-content:center; align-items:center; padding:10px; font-weight:500; color:#FFF; text-align:center; column-gap:10px;}
#header-alert:hover {background-color:var(--color-red-primary-hover);}
#header-alert a {border-bottom:dotted 1px #FFF; color:#FFF;}


#page-header .main-bar .authentication .avatar--empty {background-color:#EDEDED; color:var(--color-purple-primary);}


#page-header {top:0; left:0; right:0; z-index:var(--z-index-page-header);}
#page-header .progress-bar {position:absolute; top:0px; width:100%;}
#page-header .progress-bar .status {height:48px;}
#page-header .progress-bar.red .status {background-image:linear-gradient(to right, transparent, var(--color-red-primary)); width:0%;}
#page-header .progress-bar.green .status {background-image:linear-gradient(to right, transparent, var(--color-green-highlight)); width:0%;}
#page-header .main-bar {display:flex; justify-content:space-between; height:var(--height-page-header); padding:0 15px;}
#page-header .main-bar.transparent {background-color:transparent;}
#page-header .main-bar.glass {backdrop-filter:brightness(0.5) blur(20px); box-shadow:5px 10px 10px rgba(0, 0, 0, 0.3);}
#page-header .main-bar.theme-color {background-color:#FFF; background-size:400%; box-shadow:0 1px 2px rgba(0,0,0,0.2);}
#page-header .main-bar .left-side {position:relative; display:flex; justify-content:flex-start; align-items:center;}
#page-header .main-bar .center-side {z-index:1; display:flex; justify-content:center; align-items:center;}
#page-header .main-bar .right-side {position:relative; display:flex; justify-content:flex-end; align-items:center; column-gap:15px;}
#page-header .main-bar .burger-btn {position:relative; display:flex; justify-content:center; align-items:center; height:100%; padding:0 15px; transition:background-color 200ms ease-out; cursor:pointer; user-select:none;}
/*#page-header .main-bar .burger-btn:hover {background-color:rgba(0, 0, 0, 0.1);}*/
#page-header .main-bar .burger-btn .icon {position:relative; background-color:#666; display:block; width:24px; height:2px; transition:background 0.2s ease-out;}
#page-header .main-bar .burger-btn .icon:before, #page-header .main-bar .burger-btn .icon:after {content:""; position:absolute; background-color:#666; display:block; width:100%; height:100%; transition:all 0.2s ease-out;}
#page-header .main-bar .burger-btn .icon:before {top:8px;}
#page-header .main-bar .burger-btn .icon:after {top:-8px;}
#page-header .main-bar.opened .burger-btn .icon {background-color:transparent;}
#page-header .main-bar.opened .burger-btn .icon:before {transform:rotate(-45deg);}
#page-header .main-bar.opened .burger-btn .icon:after {transform:rotate(45deg);}
#page-header .main-bar.opened .burger-btn:not(.steps) .icon:before {top:0;}
#page-header .main-bar.opened .burger-btn:not(.steps) .icon:after {top:0;}
#page-header .main-bar .logo {position:relative; display:flex; justify-content:center; align-items:center; height:100%; padding:0 10px; transition:all 200ms ease-out;}
#page-header .main-bar .logo svg.mascot {position:relative; top:-6px; margin-right:10px; width:auto; height:40px;}
#page-header .main-bar .logo svg.brand {width:auto; height:19px; fill:var(--color-purple-primary);}
#page-header .main-bar .logo.active {background-color:rgba(0, 0, 0, 0.1);}
#page-header .main-bar .logo:hover {background-color:rgba(0, 0, 0, 0.1);}
/*#page-header .main-bar .logo svg {position:absolute; top:-2px; left:10px; transform: scaleX(-1); width:24px; height:24px;}*/
#page-header .main-bar .link {display:flex; align-items:center; height:100%; padding:0 10px; font-size:15px; color:#333; transition:all 200ms ease-out; cursor:pointer; user-select:none;}
#page-header .main-bar .link:hover {background-color:rgba(0, 0, 0, 0.1);}
#page-header .main-bar .link.active {background-color:rgba(0, 0, 0, 0.1);}
#page-header .main-bar .link.disabled {opacity:0.7;}
/* в асане добавить класс uploading */
#page-header .main-bar.uploading .right-side .authentication .link {opacity:0.7; cursor:wait;}
#page-header .main-bar .more-links {position:relative;}
#page-header .main-bar .more-links .dialog-btn {margin-left:3px; padding:5px; border-radius:3px; transition:all 200ms ease-out; cursor:pointer;}
#page-header .main-bar .more-links .dialog-btn:hover {background-color:rgba(0, 0, 0, 0.1);}
#page-header .main-bar .more-links .dialog-btn .icon {display:flex; justify-content:center; align-items:center; width:24px; height:24px;}
#page-header .main-bar .more-links .dialog-btn .icon svg {width:100%; height:100%; fill:#666;}
#page-header .main-bar .upload-btn {display:flex; justify-content:center; align-items:center; height:34px; padding:0 20px; border-radius:34px; box-shadow:0 1px 2px rgba(0,0,0,0.1);}
#page-header .main-bar .upload-btn.gradient {background-image:linear-gradient(to right, #5F4781,#EC4E91); background-size:300%; transition:900ms ease-in-out;}
#page-header .main-bar .upload-btn.gradient:hover {background-size:150%;}
#page-header .main-bar .upload-btn.transparent {background-color:transparent; background-size:300%; border:1px solid #FFF; transition:all 900ms ease-out;}
#page-header .main-bar .upload-btn.transparent:hover {background-image:linear-gradient(110deg,rgb(252,96,118) 0%,rgb(255,154,68) 50%, rgb(252,96,118) 100%); background-position:right center; border:none;}
#page-header .main-bar .upload-btn svg {width:26px; height:26px;}
#page-header .main-bar .upload-btn:not(.white) svg {fill:#FFF;}
#page-header .main-bar .upload-btn.white svg {fill:var(--color-purple-primary);}
#page-header .main-bar .upload-btn .title {padding-left:7px; font-size:15px; color:#FFF;}

#page-header .main-bar .upgrade-btn {background-color:#000; display:flex; justify-content:center; align-items:center; height:34px; padding:0 20px; border-radius:34px; font-size:15px; line-height:15px; color:#FFF; box-shadow:0 1px 2px rgba(0,0,0,0.1);}
#page-header .main-bar .upgrade-btn:hover {background-color:#333;}
#page-header .main-bar .theme {display:flex; align-items:center; padding:4px 5px;}
#page-header .main-bar .theme .option {display:flex; justify-content:center; align-items:center; margin:0 5px; width:20px; height:20px; border-radius:50%; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.15);}
#page-header .main-bar .theme .option:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.16);}
#page-header .main-bar .theme .option.white {background-color:#FFF;}
#page-header .main-bar .theme .option.grey {background-color:#ACACAC;;}
#page-header .main-bar .theme .option.black {background-color:#2B2B2B;}
#page-header .main-bar .authentication {position:relative; display:flex; height:100%;}
#page-header .main-bar.opened .authentication {display:none;}
#page-header .main-bar .authentication .dialog-btn {display:flex; align-items:center; height:100%; font-size:15px; transition:all 200ms ease-out; cursor:pointer; user-select:none;}
#page-header .main-bar .authentication .nickname {margin-right:10px;}
#page-header .main-bar .dialog-btn .global__avatar {width:36px; height:36px;}
#page-header .main-bar .dialog-btn .avatar--empty {font-weight:500;}
#page-header .main-bar .authentication .avatar--empty {background-color:#EDEDED; color:var(--color-purple-primary);}
#page-header .main-bar .authentication .global__user-icon {margin-right:2px; width:18px; height:18px;}
#page-header .main-bar .authentication .global__user-icon--moderator {background-size:14px;}
#page-header .main-bar .authentication .global__user-icon--administrator {background-size:18px;}
#page-header .main-bar .dialog-menu {position:absolute; background-color:#FFF; padding:6px 0px; border-radius:3px; white-space:nowrap; box-shadow:0px 4px 32px 0px rgba(0,0,0,0.3);}
#page-header .main-bar .more-links .dialog-menu {top:36px; left:0px;}
#page-header .main-bar .authentication .dialog-menu {top:43px; right:10px; min-width:220px;}
#page-header .main-bar .dialog-menu .header {display:flex; align-items:center; padding:10px 15px;}
#page-header .main-bar .dialog-menu .header .global__avatar {width:40px; height:40px;}
#page-header .main-bar .dialog-menu .header .global__avatar--empty {font-size:16px; box-shadow:inset -12px -8px 40px var(--color-purple-primary);}
#page-header .main-bar .dialog-menu .header .global__avatar--anonymous {background-size:36px;}
#page-header .main-bar .dialog-menu .header .global__nickname {font-size:16px;}
#page-header .main-bar .dialog-menu .header .email {padding-top:5px; font-size:14px; color:#777;}
#page-header .main-bar .dialog-menu .header .ninja {display:block; padding-top:5px; border-bottom:1px dotted #888; font-size:14px; color:#888;}
#page-header .main-bar .dialog-menu__title {margin:0 10px; padding:10px 25px 10px 20px; padding:10px 10px 5px; border-bottom:1px solid rgba(0, 0, 0, 0.03); font-size:14px; font-weight:500; color:#666;}
#page-header .main-bar .dialog-menu__option {display:flex; align-items:center; padding:10px 25px 10px 15px; font-size:14px; color:#333; cursor:pointer;}
#page-header .main-bar .dialog-menu__option:hover {background-color:rgba(0,0,0,0.05); color:#222;}
#page-header .main-bar .dialog-menu__option .icon {margin-right:15px; width:24px; height:24px;}
#page-header .main-bar .dialog-menu__option .icon.albums {position:relative; left:-2px;}
#page-header .main-bar .dialog-menu__option .icon svg {width:100%; height:100%; fill:#777;}
#page-header .main-bar .dialog-menu .separator {margin:4px 0; border-top:1px solid rgba(0,0,0,0.05);}
#page-header .main-bar .tooltip-header {display:none;}
#page-header .main-bar .tooltip-header.animated {position:absolute; top:52px; right:5px; background-color:rgba(34, 34, 34, 0.9); display:flex; align-items:center; width:216px; height:44px; border-radius:3px; font-size:13px; color:#FFF; animation-name:tooltip-header; animation-duration:900ms; animation-timing-function:ease-in-out; text-align:center;}
#page-header .main-bar .tooltip-header.animated:after {content:""; position:absolute; top:-10px; left:108px; width:0; height:0; border-right:10px solid transparent; border-bottom:10px solid rgba(34, 34, 34, 0.9); border-left:10px solid transparent; animation-name:tooltipHeaderTriangle; -webkit-animation-name:tooltipHeaderTriangle; animation-duration:1s; -webkit-animation-duration:1s; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;}

#login-btn {/*background-color:#FFF;*/ display:flex; justify-content:center; align-items:center; height:36px; padding:0 15px; border:1px solid rgba(0,0,0,0.1); border-radius:18px;}
#login-btn:hover {border-color:rgba(0,0,0,0.2);}
#login-btn .icon {background-color:#333; display:flex; justify-content:center; align-items:center; margin-right:10px; width:24px; height:24px; border-radius:50%;}
#login-btn .icon svg {width:22px; height:22px; fill:#FFF;}
#login-btn .title {font-size:14px; font-weight:500; color:#333;}
#login-btn:hover .title {color:#222;}


/* ---  блок с нотификациями [профиль, media-uploader, логин, регистрация] --- */
.global__notification-alert {position:relative; padding:15px; border-radius:5px; font-size:14px; line-height:22px; text-align:left; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
.global__notification-alert.success {background-color:var(--color-green-light); color:var(--color-green-dark);}
.global__notification-alert.information {background-color:var(--color-blue-light); color:var(--color-blue-dark);}
.global__notification-alert.attention {background-color:#FFF8C4; color:#60440A;}
.global__notification-alert.warning {background-color:var(--color-red-light); color:var(--color-red-dark);}
.global__notification-alert li {margin-left:15px; list-style:none;}
.global__notification-alert.success li:before {content:"❤️"; position:relative; bottom:-3px; padding-right:5px; font-size:20px; color:#DD2E44;}
.global__notification-alert.warning li:before {content:"✕"; position:relative; top:1px; padding-right:5px; font-size:16px; color:var(--color-red-primary);}



/* ---  блок заголовков на страницах about и seo на основных страницах --- */
#promoheading {margin-top:100px; margin-bottom:80px;}
#promoheading .title {margin-bottom:15px; font-family:sans-serif; font-size:28px; line-height:36px; font-weight:400; color:var(--color-purple-primary); text-transform:uppercase; letter-spacing:6px; text-align:center;}
#promoheading .title .animation__online-indicator {top:-4px; right:15px; width:8px; height:8px;}
#promoheading .subtitle {padding:0 10px; font-size:18px; line-height:26px; font-weight:400; color:#444; letter-spacing:2px; text-align:center;}

#promoinfo {margin-top:50px; margin-bottom:20px; padding:0 15px; color:#333;}
#promoinfo h1 {margin-bottom:20px; font-size:36px; font-weight:500;}
#promoinfo .block {background-color:#FFF; padding:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
#promoinfo p {font-size:18px; line-height:30px; letter-spacing:1px;}
#promoinfo a {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}

#promodescription {padding:20px 15px; color:#333;}
#promodescription .block {background-color:#FFF; padding:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
#promodescription h2 {margin:30px 0 15px; font-family:sans-serif; font-size:24px; line-height:1.5; font-weight:600;}
#promodescription h3 {margin:30px 0 15px; font-family:sans-serif; font-size:24px; line-height:1.5; font-weight:600;}
#promodescription p {font-size:18px; line-height:30px;}
#promodescription a {border-bottom:dotted 1px var(--color-blue-primary); color:var(--color-blue-primary);}
#promodescription ul {padding-left:25px; font-size:18px; line-height:30px;}
#promodescription ul li {padding-left:5px;}
/* ---  блок заголовков на страницах about и seo на основных страницах --- */

#about .container {max-width:var(--width-container-small);}





/* ---  соц. иконки [view-image, media-uploader, code] --- */
#social-buttons {display:flex; justify-content:space-between;}
#social-buttons.monocolor[data-page="code"] {justify-content:flex-end; padding-top:3px;}
#social-buttons.monocolor .share-button {width:42px; height:38px; border:1px solid #E0DDE2; border-radius:3px;}
#social-buttons.monocolor[data-page="code"] .share-button {margin:0 3px;}
#social-buttons.monocolor[data-page="code"] .share-button:last-child {margin:0 0 0 3px;}
#social-buttons.monocolor .share-button svg {width:20px; height:20px;}
#social-buttons.monocolor .share-button.vkontakte svg {width:22px; height:22px;}
#social-buttons.monocolor .share-button:hover {border:none; transition:all 300ms ease; cursor:pointer;}
#social-buttons.monocolor .share-button:hover svg {transition:all 300ms ease; fill:#FFF;}
#social-buttons.monocolor .share-button.vkontakte:hover {background:#4A76A8; border:1px solid #4A76A8;}
#social-buttons.monocolor .share-button.facebook:hover {background:#3B5998; border:1px solid #3B5998;}
#social-buttons.monocolor .share-button.twitter:hover {background:#1DA1F2; border:1px solid #1DA1F2;}
#social-buttons.monocolor .share-button.odnoklassniki:hover {background:#F2720C; border:1px solid #F2720C;}
#social-buttons.monocolor .share-button.mailru:hover {background:#168DE2; border:1px solid #168DE2;}
#social-buttons.monocolor .share-button.telegram:hover {background:#08C; border:1px solid #08C;}
#social-buttons.monocolor .share-button.livejournal:hover {background:#306599; border:1px solid #306599;}
#social-buttons.monocolor .share-button__link {display:flex; justify-content:center; align-items:center; width:100%; height:100%; fill:#777;}
#social-buttons.multicolor {background-color:#F8F6F9; justify-content:space-around; margin-bottom:10px; padding:5px; border:1px solid #CED0D4; border-radius:3px;}
#social-buttons.multicolor .share-button {width:32px; height:32px; opacity:0.8;}
#social-buttons.multicolor .share-button svg {width:100%; height:100%;}
#social-buttons.multicolor .share-button:hover {border:none; transition:all ease 0.3s; opacity:1; cursor:pointer;}



#upload-unavailable {display:flex; flex-flow:column; justify-content:center; align-items:center; min-height:calc(100vh - 96px); padding:15px 5px;}
#upload-unavailable .block {background-color:#FFF; max-width:800px; width:100%; overflow:hidden; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,0.15);}
#upload-unavailable .header {position:relative; background-color:#FFF; padding:24px; border-bottom:1px solid rgba(0, 0, 0, 0.5); text-align:center;}
#upload-unavailable .header h1 {display:flex; justify-content:center; align-items:center; font-size:24px; font-weight:500; color:#000; gap:10px;}
#upload-unavailable .body {padding:32px 32px 0 32px;}
#upload-unavailable .body .info {display:flex; align-items:center; margin-bottom:20px; line-height:1.7; gap:20px;}
#upload-unavailable .body .info .image {display:flex; justify-content:center; align-items:center; flex-shrink:0; width:180px; height:180px; overflow:hidden; border-radius:50%;}
#upload-unavailable .body .info .image img {width:100%; height:100%; object-fit:cover;}
#upload-unavailable .body .info .text {flex-grow:1; color:#333;}
#upload-unavailable .footer .alert {min-height:54px; padding:15px; border:1px solid var(--color-red-primary); border-radius:8px; text-align:center;}
#upload-unavailable .footer .alert .text {color:var(--color-red-primary); animation:pulsate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
#upload-unavailable .footer {display:flex; flex-flow:column; align-items:center; padding:0 15px 32px 15px; row-gap:25px;}
#upload-unavailable .footer .btn { display:flex; justify-content:center; padding:12px 40px; border-radius:30px; font-size:16px; font-weight:500; color:#FFF;}
#upload-unavailable .footer .btn.upgrade {background-color:#000;}
#upload-unavailable .footer .btn.upgrade:hover {background-color:#222;}
#upload-unavailable .footer .btn.signup {background-image: linear-gradient(to right, #5F4781 0%, #EC4E91 51%, #5F4781 100%); background-size: 300%; transition: 900ms ease-in-out;}
#upload-unavailable .footer .btn.signup:hover {background-position: right center;}
#upload-unavailable p.small {font-size:12px; line-height:20px; color:#666; text-align:center;}




/* ---  большой и маленький footer внизу страниц --- */
#page-footer {padding-top:70px; padding-bottom:70px; color:#333;/*border-top:1px solid rgba(0, 0, 0, 0.05)*/;}
#page-footer .footer-container {margin:0 auto; max-width:1326px; padding:0 10px;}
#page-footer nav {display:flex; justify-content:space-between;}
#page-footer .column--about {max-width:370px; font-size:15px; line-height:20px;}
#page-footer .column--about .logo {line-height:26px; color:#888; transition:all 300ms ease-out;}
#page-footer .column--about .logo:hover {color:#5F4781;}
#page-footer .column--about .logo .title {font-size:41px;}
#page-footer .column--about .logo .description {height:26px; font-size:14px;}
#page-footer .column--about .yapx-description {padding-top:15px; color:#777;}
#page-footer .column-separator {border-right:1px solid rgba(0, 0, 0, 0.07);}
#page-footer .column--links {display:flex; flex-direction:column; text-transform:uppercase;}
#page-footer .column--links .title {margin-bottom:10px; font-size:14px; font-weight:500; color:#666;}
#page-footer .column--links a {font-size:13px; line-height:22px; color:#888; transition:all 300ms ease-out;}
#page-footer .column--links a:hover {color:#5F4781;}
#page-footer .block-separator {margin:40px 0; border-top:1px solid rgba(0, 0, 0, 0.05);}
#page-footer .lead-block {display:flex; justify-content:space-between; align-items:center;}
#page-footer .lead-block .left-side {line-height:24px;}
#page-footer .lead-block .left-side .title {font-size:26px; line-height:34px; color:#777;}
#page-footer .lead-block .left-side .description {font-size:16px; line-height:30px; color:#777;}
#page-footer .lead-block .left-side .description span {font-weight:500;}
#page-footer .lead-block .right-side a.btn-register {background-image:linear-gradient(to right,#48B93B 0%,#228D1A 51%, #48B93B 100%); background-size:300%; padding:15px 30px; border-radius:30px; color:#FFF; transition:all 900ms ease-in-out; box-shadow:0px 8px 32px rgba(0,0,0,0.1);}
#page-footer .lead-block .right-side a.btn-register:hover {background-position:right center;}
#page-footer .copyright-block {display:flex; justify-content:space-between; color:#777;}
#page-footer .copyright-block .right-side span {font-weight:500;}






/* ---  M E D I A   Q U E R I E S  --- */
@media (max-width: 1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */}

@media (max-width:991px) {/* Rules for tablets and smaller viewports */
    #page-header .main-bar .upgrade-btn {display:none;}}

@media (max-width:880px) {#page-header .main-bar .upload-btn {height:38px; padding:0 15px;}
    #page-header .main-bar .upload-btn svg {width:24px; height:24px;}
    #page-header .main-bar .upload-btn .title {display:none;}

    #page-footer nav {flex-flow:row wrap; justify-content:space-around;}
    #page-footer .column {margin:10px; width:45%; text-align:center;}
    #page-footer .column-separator {display:none;}
    #page-footer .separator {margin:40px 10px;}}


@media (max-width:767px) {/* Rules for smartphones only */
    body {background-color:#F1F1F1;}

    #toaster-manager {left:10px;}
    #toaster-manager .notification {max-width:calc(100vw - 20px);}

    #promoinfo {padding:0 5px;}
    #promoinfo .block {padding:15px 10px;}
    #promodescription {padding:20px 5px;}
    #promodescription .block {padding:15px 10px;}

    #page-header .main-bar {padding:0 5px;}
    #page-header .main-bar .left-side .link {display:none;}
    #page-footer {padding-right:0px; padding-left:0px;}

    #upload-unavailable .body .info .image {display:none;}
    #upload-unavailable .body {padding:26px 10px;}
    #upload-unavailable .footer {padding:0 10px 32px 10px;}
    #upload-unavailable .footer .alert {padding:15px 0;}}

@media (max-width:680px) {#page-footer .lead-block {flex-flow:column; text-align:center;}
    #page-footer .lead-block .right-side {display:flex; margin-top:20px;}
    #page-footer .copyright-block {flex-flow:column-reverse; text-align:center;}
    #page-footer .copyright-block .right-side {margin-bottom:20px; line-height:26px;}}


@media (max-width: 560px) {.dialog-block .dialog-block-text-row {flex-direction:column-reverse;}
    .dialog-block .dialog-block-timer {text-align:left;}}

@media (max-width:520px) {#page-footer .copyright-block .right-side span {display:block;}}

@media (max-width:480px) {#page-footer .lead-block .left-side .title span {display:block; margin-bottom:10px;}}

@media (max-width:460px) {#page-footer .column {width:100%;}
    #page-footer .column--about .yapx-description {display:block;}}

@media (max-width:360px) {#page-header .main-bar .more-links {display:none;}
    #toaster-manager .notification .footer {justify-content:center;}}
/* ---  M E D I A  Q U E R I E S  --- */


/* ОБСУДИТЬ */

#profile__comments .comment .comment__header .active .icon {visibility:visible; opacity:0.8; cursor:pointer;}
.pagination-block__set-page .input-page input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {margin:0; -webkit-appearance:none;}
/* ОБСУДИТЬ */


/* ---  K E Y F R A M E S --- */

/* для переливающего эффекта для загрузки изображений и тамбнелйлов*/
@keyframes shimmer {100% {-webkit-mask-position:left;}}

/* для спинерра лоаедера в тостер менеджере */
@keyframes rotation {0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}}

/* Точки в реакте */
@keyframes loadingDotsSmall {0% {content:"";}
    25% {content:".";}
    50% {content:"..";}
    75% {content:"...";}
    100% {content:"";}}

/* Изменения цвета bg */
@keyframes hue-rotate {from {-webkit-filter:hue-rotate(0); -moz-filter:hue-rotate(0); -ms-filter:hue-rotate(0); filter:hue-rotate(0);}
    to {-webkit-filter:hue-rotate(360deg); -moz-filter:hue-rotate(360deg); -ms-filter:hue-rotate(360deg); filter:hue-rotate(360deg);}}

@keyframes bump {30% {-webkit-transform:scale(1.2); transform:scale(1.2);}}

/* Пульсирующая анимация (Последнии комментарии сайдбар) */
@keyframes tw-channel-status-indicator--pulse {0% {-webkit-transform:scaleX(1); transform:scaleX(1); opacity:0.2;}
    100% {-webkit-transform:scale3d(4,4,4); transform:scale3d(4,4,4); opacity:0;}}

/* анимация точек загрузки (animation__loading-dots) */
@keyframes pr_bt_anim {0% {opacity:0.2;}
    30% {opacity:1;}
    to {opacity:0.2;}}

/*Ошибка валидации формы (Например: шатание заголовка media-uploader)*/
@keyframes aerr {0%, to {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
    20%, 60% {-webkit-transform:translate3d(-8px, 0, 0); transform:translate3d(-8px, 0, 0);}
    40%, 80% {-webkit-transform:translate3d(8px, 0, 0); transform:translate3d(8px, 0, 0);}}
/*Ошибка валидации формы*/

/* Тултип в хедере */
@keyframes tooltip-header {0% {top:28px;}
    50% {top:54px;}
    65% {top:49px;}
    80% {top:51px;}
    95% {top:50px;}
    100% {top:51px;}}

/* для появления комментариев в comments-feed */
@keyframes slideIn {0% {transform:translateX(-320px);}
    100% {transform:translateX(0);}}

/* Анимация треугольника для тултипа */
@keyframes tooltipHeaderTriangle {0% {transform:translateY(100%);}
    50% {transform:translateY(8%);}
    100% {transform:translateY(0%);}}

/* Мигание (Например: инпут при изменении размера изображения) */
@keyframes bgBlink {0% {background:initial;}
    75% {background:rgba(127, 82, 190, 0.3);}
    100% {background:rgba(255, 255, 255, 0.3);}}

@keyframes pulsate {0% {opacity:1;}
    50% {opacity:0.6;}
    100% {opacity:1;}}
/* ---  K E Y F R A M E S --- */