/* @import url('https://fonts.googleapis.com/css2?family=Andika&family=Raleway:wght@100;300;400;500&display=swap'); */
/*@import url('https://fonts.googleapis.com/css2?family=Andika&family=Nunito:wght@500&family=Raleway:wght@100;300;400&display=swap');*/
/*h1 100 font-family: 'Raleway', sans-serif;*/
/*h2 400 font-family: 'Raleway', sans-serif;*/
/*h3, h4 300 font-family: 'Raleway', sans-serif;*/
/*... 400 font-family: 'Andika', sans-serif;*/
/*logo 500 'Nunito', sans-serif;*/
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap'); */


/* @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); */

/* подключаем в base */
/* 300 - Light
400 - Regular  
500 - Medium
600 - Semibold
700 - Bold
800 - ExtraBold
900 - Black */


:root {
    /* Color variables */
    /* --down-down-main-color: #17298F;
    --down-main-color: #2C1791;
    --main-color: #4A1A7A;
    --up-main-color: #7C1791;
    --up-up-main-color: #871667; */
    /* для вывода в админку можно использовать https://docs.wagtail.org/en/stable/reference/contrib/modeladmin/indexview.html */
    
    --background-light-color: #ffffff;
    --background-light-color-rgb: 255, 255, 255;
    --text-on-light-color: #333333;
    --text-on-light-color-rgb: 51, 51, 51;
    --background-dark-color: #333333;
    --background-dark-color-rgb: 51, 51, 51;
    --text-on-dark-color: #ffffffe1;
    --text-on-dark-color-rgb: 255, 255, 255;
    /* --psevdo-color: #d9dadc; */
    --psevdo-color: #e9ecef;
    --grey-back-color: #f7f7f7;
    --grey-back-color-rgb: 247, 247, 247;
    --grey-text-color: #6c757d;
    --green-color: green;
    --green-color-rgb: 0, 128, 0;
    --red-color: #f4989f;
    --accent-color: #17a2b8;
    --accent-color-rgb: 23, 162, 184;
    --left-bordered-color: var(--accent-color);
    --accent2-color: #007bff;

    /* DARK THEME */
    --dark-background-light-color: #333333;
    --dark-background-light-color-rgb: 51, 51, 51;
    --dark-text-on-light-color: #ffffffe1;
    --dark-text-on-light-color-rgb: 255, 255, 255;

    --dark-grey-back-color: #8491AD;
    --dark-grey-text-color: #8491AD;
    --dark-psevdo-color: #8491AD;
    
    --dark-background-dark-color: #ffffffe1;
    --dark-background-dark-color-rgb: 255, 255, 255;    
    --dark-text-on-dark-color: #333333;
    /* \DARK THEME */

    --down-down-main-color: #26201C;
    --down-down-main-color-rgb: 38, 32, 28;
    --down-main-color: #73461F;
    --down-main-color-rgb: 115, 70, 31;
    --main-color: #F2C288;
    --main-color-rgb: 242, 194, 136;
    --up-main-color: #BF8845;
    --up-up-main-color: #F2E4BB;
    --up-up-main-color-rgb: 242, 228, 187;
    
    --down-down-main-color: #00FFFF;
    --down-down-main-color-rgb: 0, 255, 255;
    --down-main-color: #397054;
    --down-main-color-rgb: 57, 112, 84;
    --main-color: #B795F5;
    --main-color-rgb: 183, 149, 245;
    --up-main-color: #F5AAA2;
    --up-main-color-rgb: 245, 170, 162;
    --up-up-main-color: #F5DFCF;
    --up-up-main-color-rgb: 245, 223, 207;
    
    --down-down-main-color: #7A87B8;
    --down-down-main-color: #7f8cc0;
    
    --down-down-main-color-rgb: 122, 135, 184;
    --down-down-main-color-rgb: 127, 140, 192;

    --down-main-color: #B2D6CD;
    --down-main-color-rgb: 178, 214, 205;
    --main-color: #a696b8;
    --main-color-rgb: 166, 150, 184;
    --up-main-color: #C8BAD3;
    --up-main-color-rgb: 200, 186, 211;
    /* --up-up-main-color: #EADADE; */
    --up-up-main-color: #ECDBDF;
    /* --up-up-main-color-rgb: 234, 218, 222; */
    --up-up-main-color-rgb: 236, 219, 223;
    
    /* --headline1: 300 96px/112px 'Roboto', sans-serif; */
    /* --headline1: 100 55px/60px 'Raleway', sans-serif; Было у меня */
    --headline1: 900 49px/55px 'TildaSans', sans-serif;
    --headline1-min: 900 35px/39px 'TildaSans', sans-serif;
    /* --subtitle1: 400 16px/24px 'Roboto', sans-serif; */
    /* --subtitle1: 300 18px/22px 'Raleway', sans-serif; Было у меня */
    --subtitle1: 400 16px/22px 'TildaSans', sans-serif;
    /* --headline2: 300 60px/72px 'Roboto', sans-serif; */
    /* --headline2: 400 28px/34px 'Raleway', sans-serif; Было у меня */
    --headline2: 600 35px/39px 'TildaSans', sans-serif;
    --headline2-min: 600 25px/27px 'TildaSans', sans-serif;
    /* --headline3: 400 48px/56px 'Roboto', sans-serif; */
    /* --headline3: 300 22px/28px 'Raleway', sans-serif; Было у меня */
    --headline3: 400 25px/27px 'TildaSans', sans-serif;
    --headline3-min: 400 21px/23px 'TildaSans', sans-serif;
    /* --headline4: 400 34px/36px 'Roboto', sans-serif; */
    /* --headline4: 300 18px/22px 'Raleway', sans-serif; Было у меня */
    --headline4: 600 21px/23px 'TildaSans', sans-serif;
    --headline4-min: 600 19px/21px 'TildaSans', sans-serif;
    /* --headline5: 400 24px/24px 'Roboto', sans-serif; */
    /* --headline5: 400 24px/24px 'Raleway', sans-serif; Было у меня */
    --headline5: 400 19px/21px 'TildaSans', sans-serif;
    --headline5-min: 400 17px/19px 'TildaSans', sans-serif;
    /* --headline6: 500 20px/24px 'Roboto', sans-serif; */
    /* --headline6: 500 20px/24px 'Raleway', sans-serif; Было у меня */
    --headline6: 500 17px/19px 'TildaSans', sans-serif;
    --headline6-min: 500 17px/19px 'TildaSans', sans-serif;

    /* --subtitle2: 500 14px/24px 'Roboto', sans-serif; */
    --subtitle2: 500 14px/16px 'TildaSans', sans-serif;

    /* --body1: 400 16px/24px 'Roboto', sans-serif; Было у меня */
    --body1: 400 17px/23px 'TildaSans', sans-serif;
    /* --body2: 400 14px/20px 'Roboto', sans-serif; */
    /* --body2: 400 14px/20px 'Andika', sans-serif;Было у меня */
    --body2: 400 15px/19px 'TildaSans', sans-serif;
    /* --button: 500 14px/16px 'Roboto', sans-serif; */
    /* --button: 500 14px/16px 'Andika', sans-serif;Было у меня */
    /* --button: 500 15px/17px 'Lato', sans-serif; */
    --button: 900 15px/17px 'TildaSans', sans-serif;
    --button-light: 600 15px/17px 'TildaSans', sans-serif;
    /* --caption: 400 12px/16px 'Roboto', sans-serif;Было у меня */
    --caption: 400 13px/17px 'TildaSans', sans-serif;
    /* --overline: 500 10px/16px 'Roboto', sans-serif;Было у меня */
    --overline: 400 11px/12px 'TildaSans', sans-serif;
    /* --label: 400 10px/14px 'Roboto', sans-serif; */
    /* --label: 400 10px/14px 'Andika', sans-serif;Было у меня */
    --label: 400 13px/17px 'TildaSans', sans-serif;

    /* --logotext: 300 28px/28px 'Raleway', sans-serif; */
    --logotext: 800 28px/28px 'TildaSans', sans-serif;
}
.green {
    --left-bordered-color: var(--green-color);
}
.red {
    --left-bordered-color: var(--red-color);
}
*, a {
    box-sizing: border-box;
    max-width: 100%;
    /* word-break: break-word; */
    overflow-wrap: break-word;
    /* NOTE это для мобильных. если нужно другое поведение, например, с overflow, переопределите */
}
.logo, .logo * {
    word-break: normal !important;
    overflow-wrap: normal !important;
}
/* .visually-hidden:not(:focus):not(:active), */
.visually-hidden,
a.visually-hidden,
input[type="checkbox"].visually-hidden,
input[type="file"].visually-hidden,
input[type="radio"].visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    margin: -1px !important;
    /* max-width: 1px !important; */
    max-height: 1px !important;
    border: 0;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap;
    clip-path: inset(100%);
}
.visually-hidden:not(.tab_content),
a.visually-hidden:not(.tab_content),
input[type="checkbox"].visually-hidden:not(.tab_content),
input[type="file"].visually-hidden:not(.tab_content),
input[type="radio"].visually-hidden:not(.tab_content) {
    width: 1px !important;
    height: 1px !important;

}
@media (max-width: 767px) {
    .visually-hidden-mobile,
    a.visually-hidden-mobile,
    input[type="checkbox"].visually-hidden-mobile,
    input[type="file"].visually-hidden-mobile,
    input[type="radio"].visually-hidden-mobile {
        position: absolute;
        clip: rect(0 0 0 0);
        margin: -1px !important;
        /* max-width: 1px !important; */
        max-height: 1px !important;
        border: 0;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap;
        clip-path: inset(100%);
    }
    .visually-hidden-mobile:not(.tab_content),
    a.visually-hidden-mobile:not(.tab_content),
    input[type="checkbox"].visually-hidden-mobile:not(.tab_content),
    input[type="file"].visually-hidden-mobile:not(.tab_content),
    input[type="radio"].visually-hidden-mobile:not(.tab_content) {
        width: 1px !important;
        height: 1px !important;
    }
}
@media (min-width: 768px) {
    .visually-hidden-desktop,
    a.visually-hidden-desktop,
    input[type="checkbox"].visually-hidden-desktop,
    input[type="file"].visually-hidden-desktop,
    input[type="radio"].visually-hidden-desktop {
        position: absolute;
        clip: rect(0 0 0 0);
        margin: -1px !important;
        /* max-width: 1px !important; */
        max-height: 1px !important;
        border: 0;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap;
        clip-path: inset(100%);
    }
    .visually-hidden-desktop:not(.tab_content),
    a.visually-hidden-desktop:not(.tab_content),
    input[type="checkbox"].visually-hidden-desktop:not(.tab_content),
    input[type="file"].visually-hidden-desktop:not(.tab_content),
    input[type="radio"].visually-hidden-desktop:not(.tab_content) {
        width: 1px !important;
        height: 1px !important;
    }
}
iframe {
    min-width: 100%;
}
.iframe-wrapper {
    width: 100%;
    height: fit-content;
    resize: vertical;
    border: 3px dotted rgba(var(--down-main-color-rgb), 0.3);
    overflow: hidden;
}
.iframe-wrapper::-webkit-resizer {
    display: block;
    position: static;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80 310-250l57-57 73 73v-206H235l73 72-58 58L80-480l169-169 57 57-72 72h206v-206l-73 73-57-57 170-170 170 170-57 57-73-73v206h205l-73-72 58-58 170 170-170 170-57-57 73-73H520v205l72-73 58 58L480-80Z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* border: 10px solid black; */
    /* background: var(--down-down-main-color); */
    /* box-shadow: 0 0 10px 10px blue; */
    outline: 6px solid rgba(var(--down-main-color-rgb), 0.3);
}
@media (min-width: 768px) {
    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
        /* для видео 4:3 используйте padding-bottom: 75% */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        /* background: #000; */
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}
/* @media (min-width: 768px) {
    .complex_block__block iframe {
        aspect-ratio: 16 / 9 !important;
    }
} */
@media (max-height: 480px) {
    .video-container iframe {
        height: 100vh;
    }
}
/* FIXME когда открыывается расшифровка сжимать до 60% экрана */

html, body {
    min-height: 100vh;
    /* min-width: 100vw; */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
html {
    overflow-x: hidden; /* да, жёстко. если что-то не адаптировано, то идёт нахуй. это не сайт грюнкраута сука. */

}
*::after, *::before {
    font: var(--body1);
}
body {
    font: var(--body1);
    /* font-family: 'Andika', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px; */
    padding: 0;
    margin: 0 auto;
    background: var(--background-light-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-behavior: smooth;
    justify-content: space-between;
}
.body-wrapper,
.header-nav,
.footer-body,
header > *, footer > * {
	width: 100%;
	flex-grow: 1;
	padding: 0;
	margin: 0;
    min-height: 48px;
}

@media (min-width: 768px) {

	.body-wrapper,
	.header-nav,
	.footer-body,
    header > *, footer > * {
		width: 720px;
	}
}

@media (min-width: 1024px) {

	.body-wrapper,
	.header-nav,
	.footer-body,
    header > *, footer > * {
		width: 1000px;
	}
}

@media (min-width: 1201px) {

	.body-wrapper,
	.header-nav,
	.footer-body,
    header > *, footer > * {
		width: 1200px;
	}
}


a {
	color: inherit;
}

a[target="blank"]:not(.without_blank_tag)::before,
a[target="_blank"]:not(.without_blank_tag)::before {
	content: "";
	vertical-align: middle;
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	background-color: var(--color-of-parent);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>') no-repeat center;
	mask-size: contain;
}

button {
    border: none;
    cursor: pointer;
}
.button, a.button,
.allauth-layout button,
input[type="file"]::-webkit-file-upload-button,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="datetime"],
select,
textarea {
    padding: 8px 16px;

    width: fit-content;
    max-width: 100%;
    min-height: 48px;

    border: none;
    border-radius: 24px;

    text-decoration: none;

}
.button, a.button,
.allauth-layout button,
input[type="file"]::-webkit-file-upload-button {
    letter-spacing: 1.25px;
    text-align: center;
    background: var(--main-color);
    font: var(--button);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    box-shadow: 4px 4px 4px rgba(var(--background-dark-color-rgb), 0.4);
    transition: box-shadow 0.3s;
    cursor: pointer;
}
.button, a.button,
.allauth-layout button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="datetime"],
select,
textarea {
    background: var(--background-light-color);
    color: var(--text-on-light-color);
    font: var(--body2);
    border: 1.5px solid rgba(var(--background-dark-color-rgb), 0.7);
    width: 100%;
    margin-top: 8px;
}
select {
    cursor: pointer;
}
textarea {
    height: auto;
}
input[type="date"]:placeholder-shown ~ .placeholder,
input[type="datetime-local"]:placeholder-shown ~ .placeholder,
input[type="email"]:placeholder-shown ~ .placeholder,
input[type="file"]:placeholder-shown ~ .placeholder,
input[type="month"]:placeholder-shown ~ .placeholder,
input[type="number"]:placeholder-shown ~ .placeholder,
input[type="password"]:placeholder-shown ~ .placeholder,
input[type="range"]:placeholder-shown ~ .placeholder,
input[type="search"]:placeholder-shown ~ .placeholder,
input[type="tel"]:placeholder-shown ~ .placeholder,
input[type="time"]:placeholder-shown ~ .placeholder,
input[type="url"]:placeholder-shown ~ .placeholder,
input[type="week"]:placeholder-shown ~ .placeholder,
input[type="datetime"]:placeholder-shown ~ .placeholder,
select:placeholder-shown ~ .placeholder,
input[type="text"]:placeholder-shown ~ .placeholder,
textarea:placeholder-shown ~ .placeholder {
    /* display: none; */
    /* visually-hidden */
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(100%);
    opacity: 0;
}
input[type="date"]:not(:placeholder-shown) ~ .placeholder,
input[type="datetime-local"]:not(:placeholder-shown) ~ .placeholder,
input[type="email"]:not(:placeholder-shown) ~ .placeholder,
input[type="file"]:not(:placeholder-shown) ~ .placeholder,
input[type="month"]:not(:placeholder-shown) ~ .placeholder,
input[type="number"]:not(:placeholder-shown) ~ .placeholder,
input[type="password"]:not(:placeholder-shown) ~ .placeholder,
input[type="range"]:not(:placeholder-shown) ~ .placeholder,
input[type="search"]:not(:placeholder-shown) ~ .placeholder,
input[type="tel"]:not(:placeholder-shown) ~ .placeholder,
input[type="time"]:not(:placeholder-shown) ~ .placeholder,
input[type="url"]:not(:placeholder-shown) ~ .placeholder,
input[type="week"]:not(:placeholder-shown) ~ .placeholder,
input[type="datetime"]:not(:placeholder-shown) ~ .placeholder,
select:not(:placeholder-shown) ~ .placeholder,
input[type="text"]:not(:placeholder-shown) ~ .placeholder,
textarea:not(:placeholder-shown) ~ .placeholder {
    position: absolute;
    border-radius: 3px;
    display: block;
    top: calc(8px - 6px);
    left: 16px;
    max-width: calc(100% - 12px - 16px);
    font: var(--overline);
    color: var(--main-color);
    --color-of-parent: var(--main-color);
    overflow: hidden;
    max-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    margin: 0;
    background: rgb(var(--background-light-color-rgb));
    opacity: 1;
    transition: 0.2s ease;
}
input[type="file"] {
    cursor: pointer;
    height: auto;

    background: linear-gradient(90deg, var(--grey-back-color) 20px, transparent 1%) 50%,
    linear-gradient(var(--grey-back-color) 20px, transparent 1%) 50%,
    var(--main-color);
    background-size: 22px 22px;
}

button a,
.button a {
    text-decoration: none;
}

.button.squarable {
    min-height: 48px;
    min-width: 48px;
    height: 48px;
    width: 48px;
    max-height: 48px;
    max-width: 48px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.squarable_title {
    display: none;
}
@media (min-width: 768px) {
    .button.squarable {
        /* Сбрасываем размеры, чтобы другие стили применились */
        min-height: unset;
        min-width: unset;
        height: unset;
        width: unset;
        max-height: unset;
        max-width: unset;
    }
    .squarable_title {
        display: inline;
    }
}
.button:hover,
a.button:hover,
input[type="file"]:hover::-webkit-file-upload-button,
.allauth-layout button:hover,
.button.active {
    box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8);
}
.button:focus,
.button:active,
.button.active,
.allauth-layout button:hover,
input[type="file"]:focus::-webkit-file-upload-button {
    background-color: var(--up-main-color);
    box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8);
}
.button.down-down, a.button.down-down {
    background-color: var(--down-down-main-color);
}
.button.down-down:focus,
.button.down-down:active,
.button.down-down.active,
input[type="file"].down-down:focus::-webkit-file-upload-button {
    background-color: var(--down-main-color);
}
.button.down, a.button.down {
    background-color: var(--down-main-color);
}
.button.down:focus,
.button.down:active,
.button.down.active,
input[type="file"].down-down:focus::-webkit-file-upload-button {
    background-color: var(--down-down-main-color);
}
.button.light, a.button.light, .switch.light {
    font: var(--button-light);
    background-color: var(--background-light-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    border: 1px solid var(--background-dark-color);
    box-shadow: none;
    /* box-shadow: 0 0 10px var(--main-color); */
}
.button.light:hover, a.button.light:hover, .switch.light:hover,
.button.light:focus, a.button.light:focus, .switch.light:focus,
.button.light.active {
    background-color: var(--up-up-main-color);
    /* color: var(--text-on-dark-color); */
    /* --color-of-parent: var(--text-on-dark-color); */
    /*color: var(--down-down-main-color);*/
    /*box-shadow: inset 0 0 20px var(--psevdo-color);*/

    /* box-shadow: 0 0 10px var(--text-on-dark-color); */
}
.mini-button {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}
.button:disabled,
.button[disabled],
button:disabled,
button[disabled] {
    background-color: var(--psevdo-color) !important;
}
.square {
    min-height: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    width: 48px !important;
    max-height: 48px !important;
    max-width: 48px !important;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.macro-square {
    min-height: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    width: 24px !important;
    max-height: 24px !important;
    max-width: 24px !important;
    /* margin: 0 8px 0 0; m8r */ 
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-square {
    min-height: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    width: 36px !important;
    max-height: 36px !important;
    max-width: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.big-square {
    min-height: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    width: 64px !important;
    max-height: 64px !important;
    max-width: 64px !important;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.big-button {
    min-height: 64px !important;
    /* min-width: 64px; */
}
.glitter,
.double-glitter {
    overflow: visible;
    position: relative;
}
.glitter:not(.visually-hidden),
.double-glitter:not(.visually-hidden) {
    margin-bottom: 16px;
    margin-top: 16px;
}
.glitter::before,
.double-glitter::before {
    content: "";
    display: block;
    position: absolute;
    left: -24px;
    bottom: -15px;
    width: 26px;
    height: 26px;
    background: var(--color-of-parent);
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 327.14 376.82"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="27" d="M12.63,366.69S92.29,155.29,12.63,7.2c0,0,101.11,160.34,302.3,37.79,0,0-85.79,181.79,0,321.7,0,0-171.57-151.15-302.3,0Z"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 327.14 376.82"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="27" d="M12.63,366.69S92.29,155.29,12.63,7.2c0,0,101.11,160.34,302.3,37.79,0,0-85.79,181.79,0,321.7,0,0-171.57-151.15-302.3,0Z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(15deg);
}


.glitter::before {
    top: -2px;
    transform: rotate(0deg);
}
.double-glitter::after {
    content: "";
    display: block;
    position: absolute;
    right: -27px;
    top: -15px;
    width: 31px;
    height: 31px;
    transform: rotate(-15deg);

    background: var(--color-of-parent);
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.01 233.93"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M1.02,121.47S91.02,105.92,107.02.92c0,0,17,109,133,85,0,0-91,32-26,144,0,0-103-115-157,0,0,0,21-104.91-56-108.45Z"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.01 233.93"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M1.02,121.47S91.02,105.92,107.02.92c0,0,17,109,133,85,0,0-91,32-26,144,0,0-103-115-157,0,0,0,21-104.91-56-108.45Z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
@keyframes glitter {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(25deg) scale(1.1);
    }
    50% {
        transform: rotate(0deg) scale(1);
    }
    75% {
        transform: rotate(-25deg) scale(0.9);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}
.glitter:hover::before,
.double-glitter:hover::before,
.double-glitter:hover::after {
    animation: glitter 0.4s infinite linear;
}
.button.cornered {
    border-radius: 10px;
}
.sup-wrap {
    position: relative;
}
.sup {
    /* transform: scale(0.5); */
    position: relative;
    top: -10px;
    overflow: hidden;
    white-space: nowrap;
}
svg {
    /* fill: var(--color-of-parent); */
    /* color: var(--color-of-parent); */
    /* width: 24px;
    height: 24px; */
    min-width: 24px;
    min-height: 24px;
}
svg rect,
svg path {
    stroke: var(--color-of-parent);
}
/* path {
    fill: var(--color-of-parent);
} */
/* svg.button, 
.button svg {
    fill: var(--text-on-dark-color);
} */
.center {
    text-align: center;
}
.p0,
.p0_0 {
    padding: 0 !important;
}
.p2_8 {
    padding: 2% 8% !important;
}
.p8,
.p8_8 {
    padding: 8px !important;
}
.p16,
.p16_16 {
    padding: 16px !important;
}
.m8l, .ml8 {
    margin: 0 0 0 8px !important;
}
.m8r, .mr8 {
    margin: 0 8px 0 0 !important;
}
.m8b, .mb8 {
    margin: 0 0 8px 0 !important;
}
.m8t, .mt8 {
    margin: 8px 0 0 0 !important;
}
.m8_0 {
    margin: 8px 0 !important;
}
.m0_8 {
    margin: 0 8px !important;
}
.m0_16 {
    margin: 0 16px !important;
}
.m8,
.m8_8 {
    margin: 8px !important;
}
.m0,
.m0_0 {
    margin: 0 !important;
}
.m16_0 {
    margin: 16px 0 !important;
}
.m16,
.m16_16 {
    margin: 16px !important;
}
.m16l {
    margin: 0 0 0 16px !important;
}
.relative {
    position: relative;
}
.sticky_top {
    position: sticky;
    top: 0;
}
h1, .h1, a.h1 {
    margin: 0 auto;
    font: var(--headline1-min);
    text-align: center;
    /* text-transform: uppercase; */
    word-break: break-word;
}
@media (min-width: 768px) {
    h1, .h1, a.h1 {
        font: var(--headline1);
        word-break: normal;
        overflow-wrap: normal;
    }
}
.subtitle1 {
    font: var(--subtitle1);
    /* text-align: left; */
}
@media (min-width: 768px) {
    .subtitle1 {
        font-size: 28px;
        line-height: 34px;
    }
}
h2, .h2, a.h2 {
    font: var(--headline2-min);
    color: var(--down-down-main-color);
    --color-of-parent: var(--down-down-main-color);
}
@media (min-width: 768px) {
    h2, .h2, a.h2 {
        font: var(--headline2);
    }
}
h3, .h3, a.h3 {
    font: var(--headline3-min);
}
@media (min-width: 768px) {
    h3, .h3, a.h3 {
        font: var(--headline3);
    }
}
.subtitle2 {
    font: var(--subtitle2);
    /* font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px; */
    /* text-align: left; */
    /* margin-top: 3%; */
}
.caption, caption {
    font: var(--caption);
}
h4, .h4, a.h4 {
    font: var(--headline4-min);
}
@media (min-width: 768px) {
    h4, .h4, a.h4 {
        font: var(--headline4);
    }
}
h5, .h5, a.h5 {
    font: var(--headline5-min);
}
@media (min-width: 768px) {
    h5, .h5, a.h5 {
        font: var(--headline5) !important;
    }
}
h6, .h6, a.h6 {
    font: var(--headline6-min) !important;
}
@media (min-width: 768px) {
    h6, .h6, a.h6 {
        font: var(--headline6) !important;
    }
}
img {
    max-width: 100%;
    height: auto;
}
P {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
}
.table-wrap {
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}
.table-wrap > table,
.table-wrap > .table {
    max-width: 10000%;

    overflow-wrap: break-word;

    /* word-break: break-all; */
    /* overflow-wrap: normal; */
    width: 100%;
}
td {
    border: 1px solid var(--psevdo-color);
}

summary {
    cursor: pointer;
    user-select: none;
}
details .details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s cubic-bezier(.2,.8,.2,1), opacity 1s ease;
    opacity: 0;
}
details[open] > .details-content {
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
    padding: 0 0.5em;
}

.wth-back {
    position: relative;
    /* background: no-repeat center / cover url("../img/backvert3.dc2d7ce37e10.png"); */
    background-color: var(--main-color);
    /* color: var(--text-on-dark-color); */
    /* --color-of-parent: var(--text-on-dark-color); */
    z-index: 0;
    overflow: hidden;
}
.wth-back > * {
    position: relative;
    z-index: 1;
}
@media (min-width: 1024px) {
    .wth-back {
        /* background: no-repeat center / cover url("../img/back3.8443a45bc138.png"); */
        background-color: var(--main-color);
    }
}
.grey-back {
    background-color: var(--grey-back-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    /* padding: 2% 8%; */
}
.horiz {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    /* max-width: 100% !important; */
}
@media (min-width: 768px) {
    .horiz {
        flex-wrap: nowrap !important;
    }
}

.horiz-psevdo-before::before,
.horiz-psevdo-after::after {
    content: "";
    display: block;
    width: 80%;
    margin: 16px auto;
    height: 2px;
    background-color: var(--psevdo-color);
    border-radius: 3px;
}
.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.logo, a.logo, .logo a {
    /*color: #ffffff;*/
    text-decoration: none;
}
.logo {
    font: var(--logotext);
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-size: 36px;
    line-height: 36px;
}
.logo svg {
    width: 32px;
    height: 32px;
}
.logo .sup {
    /* text-transform: none; */
    font: var(--logotext);
}
/* .logo:hover svg, .logo:focus svg, .logo:active svg {
    transform: scaleX(0.9);
    transition: transform 0.2s;
} */
@keyframes hoverScaleX {
    0% {
        transform: scaleX(1);
    }
    25% {
        transform: scaleX(0.9);
    }
    50% {
        transform: scaleX(1);
    }
    75% {
        transform: scaleX(1.1);
    }
    100% {
        transform: scaleX(1);
    }
}
.logo:hover svg, 
.logo:focus svg, 
.logo:active svg {
    animation: hoverScaleX 0.8s infinite linear;
}
.contentblock {
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--background-light-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
    position: relative;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    margin: 12px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    accent-color: var(--down-down-main-color);
}
input[type="checkbox"]::after,
input[type="radio"]::after {
    position: absolute;
    /* border: 1px solid black; */
    padding: 12px;
    top: -12px;
    left: -12px;
    bottom: -12px;
    right: -12px;
    /* top: calc(0px - (48px - 24px)/2); padding у checkbox не стилизуется */
    /* left: calc(0px - (48px - 24px)/2); */
    display: block;
    content: "";
}
.input-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.input-line label {
    width: 100%;
}
/* .input-line:not(:last-child) {
    margin-bottom: 8px;
} */

label {
    cursor: pointer;
}
ol li::marker {
    font: inherit;
}

.helptext {
    font: var(--label);
    margin-left: 16px;
}

header, footer {
    width: 100%;
    z-index: 2;
    background: var(--background-light-color);
    color: var(--text-on-light-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header {
    box-shadow: 0 2px 5px rgba(var(--text-on-light-color-rgb),0.1);
}
footer {
    margin-top: 40px;
    box-shadow: 0 -2px 5px rgba(var(--text-on-light-color-rgb),0.1);
}
.footer-body {
    margin: 0 auto;
    padding: 2% 0;
}
.header-nav {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    /* gap: 8px; */
}
@media (min-width: 768px) {
    .header-nav {
        flex-direction: row;
    }
}
header .contolls-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
@media (min-width: 768px) {
    header .contolls-wrapper {
        flex-grow: 0;
        flex-shrink: 4;
    }
}
header .items-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
    padding: 8px;
}
@media (min-width: 768px) {
    header .items-wrapper {
        margin-left: 2%;
        flex-direction: row;
        flex-grow: 2;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        padding: 8px 0;
    }
}
.header-nav__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    /* flex-wrap: wrap; */
}
.header-nav__item a, a.header-nav__item {
    text-decoration: none;
}
.header-nav__item a:hover, a.header-nav__item:hover,
.header-nav__item a:focus, a.header-nav__item:focus,
.header-nav__item a:active, a.header-nav__item:active {
    text-decoration: underline;
}
.logo.header-nav__item::before {
    transform: scale(1.1);
}
/* .h1-wrapper {
    display: flex;
} */


.contentblock > div:nth-child(8n) h2,
.system_functional_all > div:nth-child(8n) h2 {
    color: var(--down-down-main-color);
}
.contentblock > div:nth-child(8n+1) h2,
.system_functional_all > div:nth-child(8n+1) h2 {
    color: var(--down-main-color);
}
.contentblock > div:nth-child(8n+2) h2,
.system_functional_all > div:nth-child(8n+2) h2 {
    color: var(--main-color);
}
.contentblock > div:nth-child(8n+3) h2,
.system_functional_all > div:nth-child(8n+3) h2 {
    color: var(--up-main-color);
}
.contentblock > div:nth-child(8n+4) h2,
.system_functional_all > div:nth-child(8n+4) h2 {
    color: var(--up-up-main-color);
}
.contentblock > div:nth-child(8n+5) h2,
.system_functional_all > div:nth-child(8n+5) h2 {
    color: var(--up-main-color);
}
.contentblock > div:nth-child(8n+6) h2,
.system_functional_all > div:nth-child(8n+6) h2 {
    color: var(--main-color);
}
.contentblock > div:nth-child(8n+7) h2,
.system_functional_all > div:nth-child(8n+7) h2 {
    color: var(--down-main-color);
}

.tag {
    display: inline-block;
    background-color: var(--down-main-color);
    color: var(--text-on-dark-color);
    --color-of-parent: var(--text-on-dark-color);
    border-radius: 15px;
    padding: 2px 9px;
    margin: 3px;
    text-decoration: none;
    cursor: pointer !important;
    user-select: none;
}
.inactive_tags .tag,
.tag.inactive {
    background-color: var(--main-color);
}
.active_tags .tag,
.tag.active {
    background-color: var(--green-color);
}
.tags .toggle-icon {
    fill: var(--color-of-parent);
}

.message_block-wrapper {
    position: sticky;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 0;
}
.message_block {
    background: var(--background-light-color);
    position: sticky;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    top: 0;
    right: 0;
    padding: 2% 4%;
    margin: 6px;
    border-radius: 5px;
    box-shadow: 0 0 5px 5px var(--up-up-main-color);
}
@media (min-width: 768px) {
    .message_block-wrapper {
        align-items: flex-end;
        /* justify-content: flex-end; */
    }
    .message_block {
        width: 50vw;
    }
}
@media (min-width: 1201px) {
    .message_block {
        width: 30vw;
    }
}
.message_block > *:not(:first-child) {
    margin-top: 15px;
}
.message_block:not(.visually-hidden)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(var(--up-up-main-color-rgb), 0.3);
    animation: slideBackground 10s linear;
}
@keyframes slideBackground {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
.show {
    animation: message_blockslideIn 0.5s ease;
}
.hide {
    animation: message_blockslideOut 0.5s ease;
}
@keyframes message_blockslideIn {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message_blockslideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}
.circle {
    padding: 0;
    clip-path: circle(50% at center center);
}
.heart {
    clip-path: url(#heart_path);
}
.star {
    /* -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg id="e6b0396d-6aa6-4090-9a36-a7b63a7a2ec4" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="10 1.91 8.29 5 10 8.09 6.38 7.5 3.82 10 3.29 6.54 0 5 3.29 3.46 3.82 0 6.38 2.5 10 1.91" style="fill:white"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg id="e6b0396d-6aa6-4090-9a36-a7b63a7a2ec4" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="10 1.91 8.29 5 10 8.09 6.38 7.5 3.82 10 3.29 6.54 0 5 3.29 3.46 3.82 0 6.38 2.5 10 1.91" style="fill:white"/></svg>'); */

    mask-size: cover;

    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.01 233.93"><path fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M1.02,121.47S91.02,105.92,107.02.92c0,0,17,109,133,85,0,0-91,32-26,144,0,0-103-115-157,0,0,0,21-104.91-56-108.45Z"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.01 233.93"><path fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M1.02,121.47S91.02,105.92,107.02.92c0,0,17,109,133,85,0,0-91,32-26,144,0,0-103-115-157,0,0,0,21-104.91-56-108.45Z"/></svg>');
}
/* .star_reverse {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.25 10.25"><path d="M3.82,10H10V8.09L6.38,7.5ZM0,5v5H3.82L3.29,6.55ZM3.82,0H0V5L3.29,3.45ZM10,8.09V1.91L8.29,5ZM3.82,0,6.38,2.5,10,1.91V0Z" transform="translate(0.13 0.13)" fill="%231d1d1b"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.25 10.25"><path d="M3.82,10H10V8.09L6.38,7.5ZM0,5v5H3.82L3.29,6.55ZM3.82,0H0V5L3.29,3.45ZM10,8.09V1.91L8.29,5ZM3.82,0,6.38,2.5,10,1.91V0Z" transform="translate(0.13 0.13)" fill="%231d1d1b"/></svg>');
    mask-size: cover;
} */

:root {
    --big-star-stroke: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.47 68.92"> <path fill="none" stroke="black" stroke-miterlimit="10" stroke-width="5.91" d="M24.83,17.43l5.42-11.1c2.19-4.48,8.57-4.51,10.8-.04l5.51,11.05c.88,1.77,2.58,3,4.55,3.27l12.23,1.73c4.94.7,6.94,6.76,3.38,10.25l-8.81,8.66c-1.41,1.39-2.05,3.38-1.71,5.34l2.14,12.16c.86,4.91-4.28,8.68-8.71,6.38l-10.95-5.7c-1.76-.91-3.85-.91-5.6.02l-10.91,5.79c-4.41,2.34-9.58-1.39-8.76-6.31l2.04-12.18c.33-1.95-.33-3.94-1.75-5.32l-8.88-8.58c-3.59-3.47-1.64-9.54,3.29-10.28l12.21-1.83c1.96-.29,3.65-1.53,4.52-3.31Z"/></svg>');
    --big-star-fill: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.47 68.92"> <path fill="black" stroke="black" stroke-miterlimit="10" stroke-width="5.91" d="M24.83,17.43l5.42-11.1c2.19-4.48,8.57-4.51,10.8-.04l5.51,11.05c.88,1.77,2.58,3,4.55,3.27l12.23,1.73c4.94.7,6.94,6.76,3.38,10.25l-8.81,8.66c-1.41,1.39-2.05,3.38-1.71,5.34l2.14,12.16c.86,4.91-4.28,8.68-8.71,6.38l-10.95-5.7c-1.76-.91-3.85-.91-5.6.02l-10.91,5.79c-4.41,2.34-9.58-1.39-8.76-6.31l2.04-12.18c.33-1.95-.33-3.94-1.75-5.32l-8.88-8.58c-3.59-3.47-1.64-9.54,3.29-10.28l12.21-1.83c1.96-.29,3.65-1.53,4.52-3.31Z"/></svg>');
}
.big-star-stroke {
    mask-size: contain;

    /* stroke="#7f8cc0" */

    -webkit-mask-image: var(--big-star-stroke);
    mask-image: var(--big-star-stroke);
}
.big-star-fill {
    mask-size: contain;

    -webkit-mask-image: var(--big-star-fill);
    mask-image: var(--big-star-fill);
}
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.animate_heart {
    animation-duration: 1.1s;
    animation-name: heartbeat;
    animation-iteration-count: 2;
}

.cardholder {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* flex-wrap: wrap; */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px var(--psevdo-color);
    margin: 8px;
    max-width: 100%;
    border-radius: 32px;
}
.card > * {
    width: 100%;
}
.color-main {
    box-shadow: none;
    background-color: var(--main-color);
}
.gradient-down-to-main-color {
    box-shadow: none;
    background: linear-gradient(to right, var(--down-main-color), var(--main-color));
}
.card.grow {
    flex-grow: 1;
}
.card > *:not(input) {
    margin: 0;
    padding: 8px;
}
.card .media {
    background-color: var(--grey-back-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.card .media > *:not(:first-child) {
    margin-left: 16px;
}
.card .button.circle {
    margin-left: -8px;
    margin-top: -8px;
}
.card .circle_block {
    background-color: var(--background-light-color);
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
    border: solid 3px var(--grey-back-color);
    /* padding: 3%; */
    min-width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card .colored {
    background-color: var(--psevdo-color);
}
.card .correct_solution.colored,
.card .correct_solution .colored,
.card.correct_solution .colored {
    background-color: rgba(var(--green-color-rgb), 0.1);
}
.card .not_correct_solution.colored,
.card .not_correct_solution .colored,
.card.not_correct_solution .colored,
.card.not_correct_solution.colored {
    background-color: rgba(var(--main-color-rgb), 0.5);
}
/* FIXME .card ОГРАНИЧИТЬ ВЫСОТУ ДЕТЕЙ, ЧТОБ ОВЕРФЛОУ ПОЯВЛЯЛСЯ */

.cover-back {
    position: relative;
    z-index: 0;
    background-color: var(--grey-back-color);
    color: var(--text-on-light-color);
    border-radius: 12px;
    overflow: hidden;
}
.cover-back::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .5;
    z-index: -1;
    background: no-repeat center / cover url("../img/logo_symb.5c411e729778.png");
}
.cover-back.light-back::after {
    opacity: .1;
}

.image_n_buttons {
    position: relative;
    width: 200px;
    height: 300px;
}
.image_n_buttons .buttons_wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 8px;
    width: 100%;
    max-width: 100%;
}
.top_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}
.stream .card:nth-child(even) .top_buttons {
    flex-direction: row-reverse;
}
.bottom_buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100% + 16px);
    width: calc(100% + 16px);
    background-color: rgba(var(--background-light-color-rgb), 0.7);
    margin-bottom: -8px;
    padding: 8px;
}
.bottom_buttons > *:not(:first-child) {
    margin-top: 2%;
}
.card .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    min-height: 300px;
    flex-grow: 1;
}
.card .text > *:not(:first-child) {
    margin-top: 32px;
}
.richtext > *:not(:last-child) {
    margin-bottom: 8px;
}

/* TASK */
.task {
    position: relative;
}
.task_info_toggle_parent {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.task_info_toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999 !important;
    background-color: var(--up-up-main-color);
    font: var(--headline3);
    font-weight: bold;
    user-select: none;
}
.task_info {
    display: none;

    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 42px 12px 12px 12px;
    width: 100%;
    /* height: 100%; */
    background-color: rgb(var(--background-light-color-rgb));
    color: var(--text-on-light-color);
    --color-of-parent: var(--text-on-light-color);
}
.task_info_toggle_input:checked + .task_info {
    display: block;
}

.variant_select_visualisation_container {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 8px;
    gap: 8px;
}
.variant_select_visualisation_container > * {
    height: 100%;
}
.variant_select_visualisation caption {
    padding: 8px;
}
.variant_select_visualisation th,
.variant_select_visualisation .th,
.variant_select_visualisation .td,
.variant_select_visualisation td {
    border: solid 1px var(--psevdo-color);
    padding: 8px;
}
.variant_select_visualisation.clean_blank {
    border-collapse: separate;
}
.variant_select_visualisation.clean_blank th,
.variant_select_visualisation.clean_blank .th {
    border: none;
}
.variant_select_visualisation.clean_blank td,
.variant_select_visualisation.clean_blank .td {
    display: inline-block;
    border: dashed 1px var(--psevdo-color);
    border-radius: 10px;
}
.variant_select_visualisation th.task_variant_header,
.variant_select_visualisation .th.task_variant_header {
    display: inline-block;
    border-bottom: 3px solid black;
}
/* \TASK */

/* TASK COMPARISON */
.task_variants_comparison {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.task_variants_comparison > * {
    flex-shrink: 2;
    flex-grow: 1;
}
.task_variants_comparison .group_compare_at {
    flex-shrink: 1;
    flex-grow: 2;
}
.task_variants_comparison > *:not(:first-child) {
    margin-left: 16px;
}
.task_variants_comparison .task_variant_visual_id_at {
    margin: 4px;
}
.group_compare_that {
    display: none;
}
.group_compare_at__aim {
    display: none;
}
@media (min-width: 1024px) {
    .group_compare_that {
        display: block;
    }
    .group_compare_at__aim {
        display: block;
    }
    .variants_at {
        /* visually-hidden */
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        clip-path: inset(100%);
    }
}
.group_compare_at__aim {
    padding: 24px;
    background: linear-gradient(90deg,var(--grey-back-color) 20px,transparent 1%) 50%, linear-gradient(var(--grey-back-color) 20px,transparent 1%) 50%, rgba(var(--down-main-color-rgb), 0.8);
    background-size: 22px 22px;
    min-height: calc(20px * 3);
    min-width: calc(20px * 5);
}
.group_compare_that__item {
    padding: 16px;
    background-color: var(--background-light-color);
    background-image: url("data:image/svg+xml; utf8, <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill: none; stroke: grey; stroke-width: 4; stroke-dasharray: 10 7;'/></svg>");
}
.task_variants_comparison .group_compare_that__item {
    cursor: grab;
}
.group_compare_at__item:not(:first-child),
.group_compare_that__item:not(:first-child) {
    margin-top: 8px;
}

.before_animate_sticker_in {
    transform: rotate3d(1, 1, 1, -90deg) scaleX(0) scaleY(50%);
    transform-origin: 100% 100%;
    transition: transform 0.5s ease;
    opacity: 0.5;
}
.animate_sticker_in {
    transform: rotate3d(1, 1, 1, 0deg) scaleX(1) scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
}
/* \TASK COMPARISON */

/* СОДЕРЖАНИЕ СВОРАЧИВАНИЕ РАЗВОРАЧИВАНИЕ */
.contents .contents-child {
    /* position: relative; */
    /* transition: max-height 0.3s ease-in; */
} 
.loading-container {
    height: 100px;
    width: 100%;
    min-width: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 8px;
    /* gap: 16px; */
}
/* .loading-container > *:not(:first-child) {
    margin-top: 16px;
} */
.loading-spinner {
    /* border: 3px solid var(--down-main-color);
    border-top: 3px solid var(--main-color);
    border-radius: 24px;
    width: 48px;
    height: 48px;
    margin: 16px;
    animation: spin 1s linear infinite; */
    /* margin-bottom: 20px; */
}
.loading-spinner {
    width: 100px;
    height: 100px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="161.7mm" height="251.4mm" viewBox="0 0 458.3 712.5"><path d="M300.7,339.3c-10.6,14.6-3.2,33.2-.5,38.9a2.7,2.7,0,0,1-.6,3.2L295,386a3,3,0,0,0-.8,2.1c1.3,89.4,66.7,124.5,90.3,145s34.2,48.9,35.9,53.2a3.1,3.1,0,0,1,.1,1v33.4a2.8,2.8,0,0,0,2.9,2.8h.5a2.7,2.7,0,0,0,2.8-2.8V587.3a3,3,0,0,1,.2-1c1.7-4.3,13.8-34,35.8-53.2,23.7-20.5,89.1-55.6,90.4-145a2.7,2.7,0,0,0-.9-2.1l-4.5-4.6a2.7,2.7,0,0,1-.6-3.2c2.7-5.7,10.1-24.3-.5-38.9a2.7,2.7,0,0,1-.2-3c5.2-9.2,28.4-57.6-17-119.5-49.4-67.4-45.5-25-103.2-139.6a2.9,2.9,0,0,0-5.1,0c-57.7,114.6-53.8,72.2-103.2,139.6-45.4,61.9-22.2,110.3-17,119.5A2.7,2.7,0,0,1,300.7,339.3ZM438.3,136.4c.3.8.7,1.5,1,2.2l.2.3c3.1,4.9,14.1,19.5,51.8,62.3,16.4,18.6,84.9,64.3,27.8,140.4a2.9,2.9,0,0,1-5.1-1.4c-2-18.7-13.1-75.7-74.5-201.3l-.2-.2C438.1,136.6,438.3,136.4,438.3,136.4Zm-85,64.8c31.3-35.6,43.6-51.7,48.4-58.9l.2-.3,2.7-5.6s.7.4-2.7,5.6l-.2.3C342.2,264.8,332,321,330.4,339.9a2.8,2.8,0,0,1-5.1,1.4C268.5,265.4,336.9,219.8,353.3,201.2ZM522.9,682.8s-61.9,25-79.6,47.8a14.2,14.2,0,0,1-11,5.3,11.2,11.2,0,0,1,1.4-5.5c31-56.5,56.9-63.2,130.3-96.9S652.9,514,652.9,514C641.1,547.2,562,580.4,516,606.4s-89.4,126.5-89.4,126.5,8.8-36.8,47.6-104c30.9-53.6,83.1-82.6,103-92.1a156.5,156.5,0,0,0,33.4-21.6c65.9-56.6,29.8-124.5,29.8-124.5-32.2,58.2-51.5,72.1-114.9,137.1S421.7,732.9,421.7,732.9,407.3,607.4,319.4,527.8,209.1,383.3,209.1,383.3,168.3,493.6,258.2,564c0,0-19.1,2.1-58.3-41.8,0,0,3.7,77.1,119.5,131.2,0,0,64.4,20.7,96,79.5l1.7,3a14.1,14.1,0,0,1-11-5.3c-17.7-22.8-79.6-47.8-79.6-47.8-68.3-22.1-112.6-78.4-112.6-78.4,17.5,161.5,187.4,143,198.1,139.4s11,6.1,11,6.1v33.2h3.4V749.9s.3-9.7,11-6.1S618,765.9,635.5,604.4C635.5,604.4,591.2,660.7,522.9,682.8Z" transform="translate(-197 -73.1)" fill="none" stroke="white" stroke-miterlimit="10" stroke-width="12"/></svg>');
    mask-size: contain;
    position: relative;
    overflow: hidden;
}
  
.loading-spinner-back {
    position: absolute;
    height: 200px;
    width: 200px;
    min-width: 200px;
    position: absolute;
    top: -50px;
    left: -50px;
    /* inset: 0; */

    /* background: conic-gradient(var(--down-down-main-color) 0%, var(--main-color) 10%, var(--down-main-color) 50%, var(--up-main-color) 90%, var(--down-down-main-color) 100%); */
    
    background: conic-gradient(rgba(var(--down-down-main-color-rgb), 0.9) 0%, rgba(var(--down-down-main-color-rgb), 0.9) 2%, var(--up-main-color) 25%, var(--down-main-color) 45%, var(--up-up-main-color) 70%, rgba(var(--down-down-main-color-rgb), 0.9) 98%, rgba(var(--down-down-main-color-rgb), 0.9) 100%);
    animation: spin 2s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* .loading-text {
    font-size: 24px;
    font-weight: bold;
} */
.loading-bar-container {
    width: 100%;
    height: 16px;
    background-color: var(--main-color);
    border-radius: 8px;
    overflow: hidden;
    /* margin-top: 20px; */
}
.loading-bar {
    height: 100%;
    width: 0;
    background-color: var(--down-main-color);
    border-radius: 8px;
    animation: fill 5s ease-out infinite;
}
@keyframes fill {
    0% { width: 0; }
    50% { width: 100%; }
    100% { width: 0; }
}

.limited-height-parent {
    position: relative;
    /* padding-bottom: 24px; */
}
.limited-height-block {
    transition: all 0.5s;
}
.limited-height-200 {
    --limited-height: 200px;
    max-height: var(--limited-height);
    /* overflow: auto; */
    overflow-x: hidden;
    /* overflow-y: auto; */
}
.limited-height-200-click-area {
    /* position: absolute; */
    bottom: 0;
    position: sticky;
    /* bottom: calc(24px/2); */
    right: 0;
    left: 0;
    height: 4px;
    max-height: 4px;
    text-align: center;
    background-color: var(--down-down-main-color);
    color: var(--text-on-dark-color);
    line-height: 2px;
    cursor: row-resize;
}
.limited-height-200-click-area::after {
    position: absolute;
    content: "";
    top: calc(-24px/2);
    width: 100%;
    height: 24px;
    left: 0;
}
.limited-height-200-click-area::before {
    position: absolute;
    content: "";
    bottom: calc(0px - (24px - 4px)/2);
    width: 100%;
    height: calc((24px - 4px)/2);
    left: 0;
    background-color: var(--background-light-color);
}
.limited-height-200-click-area:hover,
.limited-height-200-click-area:focus,
.limited-height-200-click-area:active {
    height: 8px;
    max-height: 8px;
    line-height: 4px;
    box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8);
}

[contents_container].limited-height-parent {
    border-radius: 16px 16px 0 0;
}
[contents_container].limited-height-parent [contents_toggle] {
    margin: 0;
    margin-left: -8px;
    top: 0;
    position: sticky;
    width: calc(100% + 16px);
    min-width: calc(100% + 16px);
    padding: 8px;
    background: rgba(var(--background-light-color-rgb), 0.6); 
    backdrop-filter: blur(3px) saturate(150%);
    -webkit-backdrop-filter: blur(3px) saturate(150%);
    border: 1px solid rgba(var(--background-light-color-rgb), 0.25);
    box-shadow: 0 1px 8px rgba(var(--background-dark-color-rgb), 0.15);
    border-radius: 16px 16px 0 0;
}
/* .contents .contents-child::after {
    content: ". . .";
    display: block;
    position: absolute;
    bottom: 0;
    right: 5px;
    background: var(--background-light-color);
} */
.input-line.contents-child label {
    max-height: 200px;
}
.input-line.contents-child input[type="checkbox"] {
    position: sticky;
    top: calc(50% - 24px/2);
}
.contents-header {
    /* text-decoration: underline dotted; */
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.contents-header.no-text-deco {
    text-decoration: none;
}
/* .contents-child.horizontal > *:not(:first-child) {
    margin-left: 16px;
} */
.contents-header .toggle-icon {
    transform: rotate(-90deg);
    transition: transform 0.3s ease-out;
}
.contents-header .toggle-icon.arrow-insert {
    transform: rotate(135deg);
}
.contents.opened > .contents-header > .toggle-icon,
.contents-header.opened > .toggle-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in;
}
.contents.opened > .contents-header > .toggle-icon.arrow-insert {
    transform: rotate(405deg);
}
.comment_pattern {
    border-radius: 16px;
    /* background: rgba(var(--down-main-color-rgb), 0.2); */

    background: linear-gradient(90deg, var(--grey-back-color) 20px, transparent 1%) 50%,
    linear-gradient(var(--grey-back-color) 20px, transparent 1%) 50%,
    var(--main-color);
    background-size: 22px 22px;
}
.contents .child-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 12px;
}
.contents .child-form > * {
    margin: 8px;
}
/* \СОДЕРЖАНИЕ СВОРАЧИВАНИЕ РАЗВОРАЧИВАНИЕ */

.task_solution {
    align-items: flex-start;
}
.task_solution > * {
    width: 100%;
}
.task_solution .user_solution {
    border-radius: 16px;
    border: 3px solid rgba(var(--down-main-color-rgb), 0.8);
    padding: 8px;
}
/* .expert_comment .text_input {
    min-height: 100px;
} */

.type_of_solution_select-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.type_of_solution_select-container > *:not(:first-child) {
    margin-left: 16px;
}
.profile-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.profile-actions > * {
    margin: 8px;
}


.line {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    /* flex-wrap: wrap; */
    overflow-y: hidden;
    overflow-x: auto;
    align-items: center;
    justify-content: flex-start;
    /* margin: 8px; */
    gap: 16px;
}
@media (min-width: 768px) {
    .line {
        flex-direction: row !important;
    }
}

.forced-line, .force-line {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    align-items: center;
    justify-content: flex-start;
    /* margin: 8px; */
    /* gap: 8px; */
}

.centered-line {
    display: flex;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
}

input[type="checkbox"][name="gender"] {
    
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    color: transparent;
    background-color: transparent;
    
}
input[type="checkbox"][name="gender"]::before,
input[type="checkbox"][name="gender"]::after {
    cursor: pointer;
    position: absolute;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 58px;
    height: 32px;
    top: 0;
    margin: 0;
    padding: 0;

    padding: 0;
    margin: 6px 5px;
    border: solid 3px var(--down-down-main-color);
    border-radius: 12px;
    color: var(--text-on-light-color);
}
input[type="checkbox"][name="gender"]::before {
    content: "Муж.";
    left: 0;
}
input[type="checkbox"][name="gender"]::after {
    content: "Жен.";
    left: calc(58px + 10px);
}
input[type="checkbox"][name="gender"]::before {
    background: none;
}
input[type="checkbox"][name="gender"]:checked::before {
    background: var(--down-down-main-color);
}
input[type="checkbox"][name="gender"]::after {
    background: var(--down-down-main-color);
}
input[type="checkbox"][name="gender"]:checked::after {
    background: none;
}

.template-404 .img {
    background: no-repeat center / cover url("../img/labyrinth.bfd9df294376.png");
    width: 100%;
    height: 50vh;
}

.child-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.child-header > * {
    padding: 0;
    margin: 8px;
}
@media (min-width: 1024px) {
    .child-header {
        flex-wrap: nowrap;
    }
}
.button.light:hover img,
.button.light:focus img,
.button.light.active img,
.button.light:hover .ICON::after,
.button.light:focus .ICON::after,
.button.light.active .ICON::after {
    filter: invert(100%);
}

s {
    text-decoration: none;
    position: relative;
}
s::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAwCAYAAADab77TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1Q0MyQzgxMDg2MjUxMUU3QkQ4QjkxMjM1NUZDM0E1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q5REM5MDg2MjYxMUU3QkQ4QjkxMjM1NUZDM0E1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVDQzJDODBFODYyNTExRTdCRDhCOTEyMzU1RkMzQTUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVDQzJDODBGODYyNTExRTdCRDhCOTEyMzU1RkMzQTUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpS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');
}
s::before {
    content: "";
    display: block;
    position: absolute;
    left: -30%;
    top: -28%;
    height: 150%;
    width: 162%;
    background-size: 100%;
    clip-path: polygon(0% 10%,
            20% 20%,
            40% 33%,
            60% 48%,
            80% 65%,
        105% 90%,
            80% 79%,
            60% 68%,
            40% 53%,
            20% 35%,
            -5% 10%);
    filter: invert(1) brightness(2) sepia(1) saturate(10) hue-rotate(-80deg);

    opacity: 0.6; /* ← прозрачность */
    pointer-events: none; /* чтобы не мешал кликам */
}
@media (min-width: 768px) {
    s::before {
        height: 140%;
        width: 140%;
    }
}

/* свичи */
@media (min-width: 768px) {
    .switches-line > * {
        margin: 0;
    }
    .switches-line > *:not(:last-child) {
        position: relative;
        margin-right: 16px;
    }
    .switches-line > *:not(:first-child) {
        margin-left: 16px;
    }
    .switches-line > *:not(:last-child)::before {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        bottom: 0;
        right: -16px;
        width: 2px;
        background-color: var(--psevdo-color);
    }
}
.switch {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* border-radius: 24px; */
}
.switch > *:not(:first-child) {
    margin-left: 6px;
}
.switch-track {
    position: relative;
    display: block;
    background-color: var(--grey-back-color);
    /* border: solid 2px var(--psevdo-color); */
    outline: 2px solid var(--psevdo-color);
    transition: background-color 0.4s;
    border-radius: 12px;
    height: 24px;
    min-height: 24px;
    width: 39px;
    min-width: 39px;
}
.switch-track::before {
    /* Handle */
    position: absolute;
    transition: 0.4s;
    content: "";
    height: 12px;
    width: 12px;
    min-height: 12px;
    min-width: 12px;
    border-radius: 50%;
    left: 6px;
    top: 6px;
    background-color: var(--psevdo-color);
}
input:checked + .switch-track {
    background-color: var(--main-color); /* Основной цвет */
    outline: none;
}
input:checked + .switch-track::before {
    /* transform: translateX(16px); */
    height: 18px;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
    left: auto;
    right: 3px;
    top: 3px;
    background-color: var(--background-light-color);
}
/* \свичи */

/* куки */
.cookie-consent-form a {
    --color-of-parent: var(--main-color);
    color: var(--main-color);
    text-decoration: none;
}
.cookie-consent-form a:hover {
    text-decoration: underline;
}
/* \куки */

.color_theme {
    --clr-ico-size: calc(36px - 6px - 6px - 3px);
    --clr-ico-padding: 6px;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    width: calc(36px * 2 - (3px * 2));
    padding: 0;
}
.color_theme .switch-track {
    background: none !important;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    outline: none;
    padding: 0;
    margin: 0;
}
.color_theme .switch-track::before {
    background-color: var(--down-down-main-color) !important;
    z-index: 1;
    border: none;
    /* border-radius: unset; */
    background: no-repeat center/var(--clr-ico-size) url("../img/moon бел.050bd43983e9.png");
    width: var(--clr-ico-size);
    height: var(--clr-ico-size);
    min-width: var(--clr-ico-size);
    min-height: var(--clr-ico-size);
    right: 1px;
    left: unset;
    padding: var(--clr-ico-padding);
    top: 1px;
}
.color_theme input:checked + .switch-track::before {
    background-color: var(--up-up-main-color) !important;
    z-index: 1;
    /* background-color: none !important;
    border: none;
    border-radius: unset; */
    background: no-repeat center/var(--clr-ico-size) url("../img/sun.896a044ebadc.png");
    width: var(--clr-ico-size);
    height: var(--clr-ico-size);
    min-width: var(--clr-ico-size);
    min-height: var(--clr-ico-size);
    left: 1px;
    right: unset;
    padding: var(--clr-ico-padding);
    top: 1px;
}
.color_theme .switch-track::after {
    content: "";
    position: absolute;
    z-index: 0;
    background: no-repeat center/var(--clr-ico-size) url("../img/sun бел.0b1ef43fad97.png");
    width: var(--clr-ico-size);
    height: var(--clr-ico-size);
    min-width: var(--clr-ico-size);
    min-height: var(--clr-ico-size);
    left: 1px;
    right: unset;
    padding: var(--clr-ico-padding);
    top: 1px;
}
.color_theme input:checked + .switch-track::after {
    content: "";
    position: absolute;
    z-index: 0;
    background: no-repeat center/var(--clr-ico-size) url("../img/moon.1106e2f14d81.png");
    width: var(--clr-ico-size);
    height: var(--clr-ico-size);
    min-width: var(--clr-ico-size);
    min-height: var(--clr-ico-size);
    right: 1px;
    left: unset;
    padding: var(--clr-ico-padding);
    top: 1px;
}
/* \color_theme */

/* tip training_item_page */
.prev_next {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    gap: 16px;
}
.prev_next:not(.prev_next_top) {
    margin-top: 50px;
}
.prev_next > * {
    flex-grow: 2;
    /* margin: 8px; */
}
/* tip training_item_page */


.EGE-results-table tr {
    border: 1px solid var(--background-light-color);
    background-color: #ffccb1;
}
.EGE-results-table td {
    border: 2px solid #ffccb1;
    text-align: center;
    background-color: var(--background-light-color);
}
.EGE-results-table .hd {
    background-color: #ff9760;
    border: 2px solid #ff9760;
    color: #9f2e04;
}
.EGE-results-table .subhd {
    background-color: #ffccb1;
    color: #9f2e04;
}
.EGE-results-table .subsubhd {
    background-color: #ffccb1;
    color: #d88c7c;
}
.EGE-results-table .bold {
    text-shadow: -1px -1px 0 var(--text-on-light-color), 1px -1px 0 var(--text-on-light-color), -1px 1px 0 var(--text-on-light-color), 1px 1px 0 var(--text-on-light-color);
}
.EGE-results-table.secondary {
    /* opacity: 0.7; */
}

.progress-container {
    isolation: isolate;
    position: relative;
    /* text-align: center;
    vertical-align: center; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    --progress: 0%;
    /* width: 100%; */
    /* height: 64px; */
    min-height: 64px;
    background-color: var(--up-up-main-color);
    border-radius: 32px;
    overflow: hidden;
    margin: 8px;
    padding: 8px 16px;
    gap: 8px;
    user-select: none;
    font: var(--headline4-min);
    font-weight: bold;
}
.progress-container > * {
    position: relative;
    z-index: 2; /* чтоб поверх бара */
    /* height: 100%; */
}
.progress-container .label {
    word-break: break-word;
    /* max-width: 90%; */

    width: auto; /* вместо fit-content */
    flex-shrink: 1; /* позволяет элементу сжиматься */
    min-width: 0; /* важно для правильной работы flex-shrink с текстом */
}
.progress-bar {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    width: var(--progress);
    height: 100%;
    background-color: var(--down-main-color);
    /* background: linear-gradient(90deg, #4caf50, #81c784); */
    transition: width 0.2s ease-in-out;
}

.progress-mask {
    display: flex;
    height: 64px;
    padding: 0 !important;
    /* gap: 8px; */
}
.progress-mask > * {
    
    background-color: var(--grey-text-color);
    /* width: 50px;
    height: 100%; */

    padding: 0;
    margin: 8px;

    width: 48px;
    height: 48px;
    /* background-color: var(--up-up-main-color); */
}

.sidebar {
    /* background-color: var(--background-light-color);
    color: var(--text-on-light-color); */
    z-index: 9;
    max-height: 80vh;
    /* width: 100%; */
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
    box-shadow: 0px 3px 3px 0px rgba(var(--text-on-light-color-rgb), 0.1);
}
.body-wrapper {
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
/* На мобильных — меняем порядок */
#sidebarLeft {
    order: 1;
}
.contentblock {
    order: 3;
}
#sidebarRight {
    order: 2;
}
@media (min-width: 768px) {
    /* обычный порядок */
    #sidebarLeft {
        order: 1;
        border-radius: 0 0 12px 0;
        box-shadow: 3px 3px 3px 0px rgba(var(--text-on-light-color-rgb), 0.1);
    }
    .contentblock {
        order: 2;
        flex: 1 1 0%;   /* позволяет занимать оставшееся место и сжиматься */
        min-width: 0;   /* разрешает сжатие меньше, чем auto */
    }
    #sidebarRight {
        order: 3;
        border-radius: 0 0 0 12px;
        box-shadow: -3px 3px 3px 0px rgba(var(--text-on-light-color-rgb), 0.1);
    }
    .body-wrapper {
        flex-direction: row;
        gap: 16px;
    }
    .sidebar {
        top: 0;
        position: sticky;
    }
    .sidebar { width: 30%; min-width: 30%; max-width: 30%; }
    /* когда оба сайдбара заполнены */
    .body-wrapper.two-sidebars .sidebar { width: 25%; min-width: 25%; max-width: 25%; }

    .sidebar.collapsed { width: fit-content !important; min-width: fit-content !important; max-width: fit-content !important; }

    .body-wrapper.two-sidebars.right-collapsed #sidebarLeft:not(.empty):not(.collapsed) { width: 29%; min-width: 29%; max-width: 29%; }

    /* скрываем пустые сайдбары (класс ставит JS) */
    .sidebar.empty { display: none; }

    #sidebarRight h3,
    #sidebarRight .h3 {
        display: block;
        /* margin: 10px; */
        padding: 10px;
        font-size: 18px;
        border-bottom: 1px solid var(--psevdo-color);
    }
}

#sidebarRight summary {
    padding: 10px;
    font-size: 18px;
    border-bottom: 1px solid var(--psevdo-color);
}
#sidebarRight .details-content {
    padding: 0;
}
#sidebarRight a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1.4;
}
#sidebarRight a:hover {
    background: var(--psevdo-color);
    padding-left: 16px;
}

.copy-anchor { text-decoration: none; cursor: pointer; display: inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; transition: transform .08s, background-color .12s; user-select: none; text-decoration:none; }
.copy-anchor:hover { transform: scale(1.08); background-color: rgba(var(--background-dark-color-rgb),0.06); }
.copy-anchor:active { transform: translateY(1px) scale(.98); }
.section-header { display:flex; align-items:center; gap:10px; margin:14px 0 8px 0; }
.section-title { font-weight:600; margin:0; }
.section-title .title-text { text-decoration: none; color: inherit; }

.sidebar-toggle {
    position: sticky;
    top: 10px;
    border: 1px solid rgba(var(--background-dark-color-rgb),0.1);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    background: rgba(var(--background-light-color-rgb), 0.9);
    box-shadow: 0 2px 4px rgba(var(--background-dark-color-rgb),0.1);
}
.sidebar-toggle:hover {
    background: rgba(var(--background-light-color-rgb), 1);
    box-shadow: 0 2px 8px rgba(var(--background-dark-color-rgb),0.2);
    transform: translateY(-1px);
}
.sidebar-toggle svg {
    transition: transform 0.3s ease;
}
.sidebar-toggle-left {
    margin-left: auto;
    margin-right: 10px;
}
.sidebar-toggle-right {
    margin-right: auto;
    margin-left: 10px;
}
/* Скрытое состояние сайдбара */
.sidebar.collapsed .sidebar-toggle {
    margin-right: auto;
    margin-left: auto;
}
.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}
/* Скрываем кнопки на мобильных */
@media (max-width: 768px) {
    .sidebar-toggle {
        display: none !important;
    }
}
/* responsive */
@media (max-width: 768px) {
    .sidebar-layout { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
}

/* Burger buttons base styles */

:root {
    --burger-size: 48px;
    --burger-transition-duration: 0.3s;
}
.burger-btn {
    width: var(--burger-size);
    height: var(--burger-size);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 1001;
    position: relative;
}
.burger-btn.processing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(var(--background-dark-color-rgb), 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.3s ease-out;
    z-index: 0;
}
.burger-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.burger-line {
    width: 100%;
    height: 2px;
    background-color: var(--text-on-light-color);
    border-radius: 2px;
    transition: all var(--burger-transition-duration) ease;
    position: absolute;
}
.burger-line:nth-child(1) {
    top: 0;
}
.burger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.burger-line:nth-child(3) {
    bottom: 0;
}
/* Animated burger states - Standard animation */
.burger-btn.active .burger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.burger-btn.active .burger-line:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scale(0);
}
.burger-btn.active .burger-line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
@media (min-width: 768px) {
    /* Show mobile header layout */
    .burger-btn {
        display: none;
    }
}
/* Hide logo text on very small screens */
@media (max-width: 380px) {
    .logo a {
        display: none;
    }
}
/* Smooth animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .bugrer-controlled:not(.not-visually-hidden) {
        /* visually-hidden */
        position: absolute;
        clip: rect(0 0 0 0);
        margin: -1px !important;
        /* max-width: 1px !important; */
        max-height: 1px !important;
        border: 0;
        padding: 0;
        overflow: hidden !important;
        white-space: nowrap;
        clip-path: inset(100%);
    }
}
/* Animate menu items */
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item {
    animation: slideInRight 0.3s ease forwards;
    opacity: 0;
}

.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(1) { animation-delay: 0.04s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(2) { animation-delay: 0.08s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(3) { animation-delay: 0.12s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(4) { animation-delay: 0.16s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(5) { animation-delay: 0.20s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(6) { animation-delay: 0.24s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(7) { animation-delay: 0.28s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(8) { animation-delay: 0.32s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(9) { animation-delay: 0.36s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(10) { animation-delay: 0.40s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(11) { animation-delay: 0.44s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(12) { animation-delay: 0.48s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(13) { animation-delay: 0.52s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(14) { animation-delay: 0.56s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(15) { animation-delay: 0.60s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(16) { animation-delay: 0.64s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(17) { animation-delay: 0.68s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(18) { animation-delay: 0.72s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(19) { animation-delay: 0.76s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(20) { animation-delay: 0.80s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(21) { animation-delay: 0.84s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(22) { animation-delay: 0.88s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(23) { animation-delay: 0.92s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(24) { animation-delay: 0.96s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(25) { animation-delay: 1.00s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(26) { animation-delay: 1.04s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(27) { animation-delay: 1.08s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(28) { animation-delay: 1.12s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(29) { animation-delay: 1.16s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(30) { animation-delay: 1.20s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(31) { animation-delay: 1.24s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(32) { animation-delay: 1.28s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(33) { animation-delay: 1.32s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(34) { animation-delay: 1.36s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(35) { animation-delay: 1.40s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(36) { animation-delay: 1.44s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(37) { animation-delay: 1.48s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(38) { animation-delay: 1.52s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(39) { animation-delay: 1.56s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(40) { animation-delay: 1.60s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(41) { animation-delay: 1.64s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(42) { animation-delay: 1.68s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(43) { animation-delay: 1.72s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(44) { animation-delay: 1.76s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(45) { animation-delay: 1.80s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(46) { animation-delay: 1.84s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(47) { animation-delay: 1.88s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(48) { animation-delay: 1.92s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(49) { animation-delay: 1.96s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(50) { animation-delay: 2.00s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(51) { animation-delay: 2.04s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(52) { animation-delay: 2.08s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(53) { animation-delay: 2.12s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(54) { animation-delay: 2.16s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(55) { animation-delay: 2.20s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(56) { animation-delay: 2.24s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(57) { animation-delay: 2.28s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(58) { animation-delay: 2.32s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(59) { animation-delay: 2.36s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(60) { animation-delay: 2.40s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(61) { animation-delay: 2.44s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(62) { animation-delay: 2.48s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(63) { animation-delay: 2.52s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(64) { animation-delay: 2.56s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(65) { animation-delay: 2.60s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(66) { animation-delay: 2.64s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(67) { animation-delay: 2.68s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(68) { animation-delay: 2.72s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(69) { animation-delay: 2.76s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(70) { animation-delay: 2.80s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(71) { animation-delay: 2.84s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(72) { animation-delay: 2.88s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(73) { animation-delay: 2.92s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(74) { animation-delay: 2.96s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(75) { animation-delay: 3.00s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(76) { animation-delay: 3.04s; }
.bugrer-controlled.not-visually-hidden .bugrer-controlled-item:nth-child(77) { animation-delay: 3.08s; }

.aimitwellcarousel-wrap .lt-block-wrapper {padding-top: 0px; padding-bottom: 0px}
.aimitwellcarousel .fotorama__nav--thumbs .fotorama__nav__frame {padding: 2px;height: 64px;}
.aimitwellcarousel .fotorama__thumb-border {height: 60px;border-width: 2px;margin-top: 2px}
/* у нас кастомные стрелочки. такие мне больше нравятся. */

.fotorama__arr--prev, .fotorama__arr--next {
    width: 10% !important;
    background: none !important;
    width: 44px !important;
    height: 44px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 44px 44px !important;
}
.fotorama__arr--prev {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><filter id='s' x='-50%' y='-50%' width='200%' height='200%'><feDropShadow dx='0' dy='1' stdDeviation='2' flood-color='%23999' flood-opacity='0.6'/></filter></defs><path d='M16 4 L8 12 L16 20 Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round' filter='url(%23s)'/></svg>") !important;
}
.fotorama__arr--next {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><filter id='s' x='-50%' y='-50%' width='200%' height='200%'><feDropShadow dx='0' dy='1' stdDeviation='2' flood-color='%23999' flood-opacity='0.6'/></filter></defs><path d='M8 4 L16 12 L8 20 Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round' filter='url(%23s)'/></svg>") !important;
}
.flashcards .fotorama__stage {
    width: 100%;
    margin: 0 auto;
}
.fotorama__nav__shaft {
    overflow: auto; /* для переполнения, например, в карточках Конституции */
}
/* Центрируем текст заголовка на фронтальной стороне карточки */
.flashcard .front, .flashcard .back {

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--background-light-color); /* фон, чтобы тень была заметна */
    color: var(--text-on-light-color-rgb);

    border-radius: 16px;

    /* внутренняя тень */
    box-shadow:
    inset 0 4px 8px rgba(var(--background-dark-color-rgb), 0.25),   /* нижняя мягкая */
    inset 0 -2px 4px rgba(var(--background-dark-color-rgb), 0.15); /* верхняя для глубины */

    /* внешняя тень */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  */

    --min-font-size: 6px;
    overflow: auto;
}
.flashcard .front {
    text-align: center;
}
/* .flashcard * {
    font: var(--base-font);
}
.flashcard .front { --base-font: var(--headline2-min); }
.flashcard .back { --base-font: var(--body2); }
@media (min-width: 768px) {
    .flashcard .front { --base-font: var(--headline2); }
    .flashcard .back  { --base-font: var(--body1); }
} */

.flashcard * {
    margin: 0;
    padding: 0;
    list-style: none;

    /* transition: all 0.05s; */
}
/* Стили карточки и флипа */
.flashcard {
    position: relative;
    width: 100%;
    padding-top: 75%; /* соотношение сторон 4:3 */
    /* background-color: #fff; */
    perspective: 1000px;
}
.flashcard .flashcard-inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.6s;
    transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}
.flashcard .front, .flashcard .back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
}
.flashcard .back {
    transform: rotateY(180deg);
}

/* Стили списка */

.flashcard ul li {
    /* margin: 10px; */
    padding-left: 20px;
    position: relative;
}
.flashcard li::before {
    content: "❖";
    position: absolute;
    left: 0;
}
.flashcard .no-before li {
    padding-left: 0;
}
.flashcard li:not(:last-child) {
    margin-bottom: 10px;
}
.flashcard .no-before li::before {
    content: none;
}


[for="is_fav"] {
    -webkit-mask-size: 90%;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* stroke="#7f8cc0" */
    background-color: var(--down-down-main-color);

    -webkit-mask-image: var(--big-star-stroke);
    mask-image: var(--big-star-stroke);

    /* filter: drop-shadow(0 0 5px rgba(var(--background-dark-color-rgb),0.5)); */
    z-index: 0;

}
[for="is_fav"]::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--background-dark-color);
    -webkit-mask-image: var(--big-star-stroke);
    mask-image: var(--big-star-stroke);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 90%;
    mask-size: 90%;
    filter: blur(4px);
    opacity: 0.5;
    transform: translate(2px, 2px);
    transition: all 0.3s ease;
    z-index: -1;
}
[for="is_fav"]:hover::before {
    transform: translate(-2px, -2px);
}
.is_fav:checked + [for="is_fav"] {
    -webkit-mask-image: var(--big-star-fill);
    mask-image: var(--big-star-fill);
}
.is_fav:checked + [for="is_fav"]::before {
    display: none;
}
.is_fav:checked + [for="is_fav"]:hover {
    transform: scale(1.05);
}


@keyframes portalAnimation {
    0% {    box-shadow: 0 0 10px 0 rgba(var(--down-main-color-rgb), 0.9); }
    50% {   box-shadow: 0 0 12px 2px rgba(var(--up-up-main-color-rgb), 0.9); }
    100% {  box-shadow: 0 0 10px 0 rgba(var(--down-main-color-rgb), 0.9); }
}
.portal {
    background: rgb(var(--background-light-color-rgb));
    position: relative;
    z-index: 2;
    animation: portalAnimation 5s infinite;
    padding: 0 0 2px 0;

}
.portal > * {
    z-index: 2;
}
/* NOTE именно то, что overflow-x: hidden у html и даёт возможность пользоваться этим */
.portal-helper {
    border-radius: 32px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Важно для обрезки по border-radius */
    
    /* Используем padding для создания рамки */
    padding: 2px !important;
    background: transparent;
    box-sizing: border-box;
}

.portal-helper::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgb(var(--background-light-color-rgb));
    border-radius: calc(32px - 2px); /* Уменьшаем радиус на толщину рамки */
    z-index: 1;
}

.portal-helper::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    background: conic-gradient(
        rgba(var(--down-down-main-color-rgb), 0.9) 0%, 
        /* rgba(var(--down-down-main-color-rgb), 0.9) 2%,  */
        var(--up-main-color) 25%, 
        /* var(--down-main-color) 45%, */
        var(--down-main-color) 50%,
        var(--up-up-main-color) 70%, 
        /* rgba(var(--down-down-main-color-rgb), 0.9) 98%,  */
        rgba(var(--down-down-main-color-rgb), 0.9) 100%
    );

    aspect-ratio: 1 / 1;
    min-width: 125%;
    min-height: 125%;
    border-radius: 20%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* clip-path: circle(50%); */

    z-index: 0;
    animation: spin2 8s linear infinite;
    filter: blur(10px);
}
@keyframes spin2 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.notifications-wrapper {
    max-height: 70vh;
    overflow-y: auto !important;
    background: rgb(var(--background-light-color-rgb));
    z-index: 999 !important;
}
@media (min-width: 768px) {
    .notifications-wrapper {
        position: absolute;
        right: 0;
        top: 0;
    }
}
.notifications-wrapper__close-container {
    position: sticky;
    top: 0;
    z-index: 1000 !important;
}
.notifications-wrapper__close {
    float: right;
}
.notification {
    border-radius: 32px;
    max-width: min(375px, 100vw);
    position: relative;
}
.notification.unread {
    background-color: rgba(173, 216, 230, 0.3);
}
.notifications_load_more-visualisation {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.notifications_load_more-visualisation::before {
    display: block;
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(var(--main-color) calc(var(--overscroll, 0) * 3.6deg), var(--background-light-color) 0);
    -webkit-mask: radial-gradient(closest-side, transparent 59%, var(--background-light-color) 60%);
    mask: radial-gradient(closest-side, transparent 59%, var(--background-light-color) 60%);
}
.notifications-wrapper-toggler {
    position: relative;
}
.notifications-wrapper-toggler.income {
    position: fixed;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    border-radius: 32px;
    right: 32px;
    top: 32px;
    animation: glitter 0.3s 2 linear;
    z-index: 1000 !important;
}
.notifications-wrapper-toggler.income .macro-square {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 32px;
}
.new_notifications {
    position: absolute;
    top: -8px;
    right: -8px;
    max-width: 24px;
    max-height: 24px;
    padding: 8px;
    background: var(--up-up-main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.left-bordered {
    background: color-mix(in srgb, var(--left-bordered-color) 10%, transparent);
    border-left: 4px solid var(--left-bordered-color);
    border-radius: 4px 0 0 4px;
    padding: 12px;
}
.left-bordered:not(:last-child) {
    border-bottom: 1px solid color-mix(in srgb, var(--left-bordered-color) 30%, transparent);
}

.bordered,
.task-solution .comparison-table th,
.task-solution .comparison-table td {
    background: color-mix(in srgb, var(--left-bordered-color) 10%, transparent);
    border: 2px solid var(--left-bordered-color);
    border-radius: 4px;
    padding: 12px;
    /* TODO не знаю, стоит ли */
    margin: 8px 0;
}



.task-solution .left-bordered {
    --left-bordered-color: var(--psevdo-color);
}
.task-solution .status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}
.task-solution .status-icon {
    font-size: 24px;
}
.task-solution .solution-score {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
}
.task-solution .earned-mark {
    color: var(--left-bordered-color);
}
.task-solution .separator {
    color: var(--grey-text-color);
}
.task-solution .max-mark {
    color: var(--grey-text-color);
}
.task-solution .score-label {
    font-size: 14px;
    color: var(--grey-text-color);
    margin-left: 5px;
}
.task-solution .file-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.task-solution .file-item {
    padding: 8px;
    margin: 5px 0;
    background: var(--background-light-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-solution .variants-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-solution .bordered {
    --left-bordered-color: var(--grey-back-color);
}
.task-solution .bordered.selected {
    --left-bordered-color: var(--accent2-color);
}

.task-solution .bordered.match {
    --left-bordered-color: var(--green-color);
}

.task-solution .bordered.error {
    --left-bordered-color: var(--red-color);
}

.task-solution .bordered.correct {
    --left-bordered-color: var(--green-color);
}

.task-solution .variant-markers {
    margin-right: 10px;
}

.task-solution .marker {
    font-size: 18px;
}

.task-solution .legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    flex-wrap: wrap;
}

.task-solution .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.task-solution .comparison-table {
    --left-bordered-color: var(--psevdo-color);
}

.task-solution .comparison-table th {
    font-weight: 600;
}

.task-solution .comparison-table tr.correct {
    --left-bordered-color: var(--green-color);
}

.task-solution .comparison-table tr.incorrect {
    --left-bordered-color: var(--red-color);
}

.task-solution .status-cell {
    text-align: center;
    width: 80px;
}

.task-solution .expert-comment {
    --left-bordered-color: var(--accent-color);
}
.task-solution .correct_answer {
    --left-bordered-color: var(--accent2-color);
}
.task-solution .expert-keys {
    --left-bordered-color: var(--accent2-color);
}

.task-solution .options-reference {
    margin-top: 15px;
    padding: 15px;
    border-radius: 4px;
}

.task-solution .options-reference h5 {
    margin: 0 0 10px 0;
    color: var(--grey-text-color);
}

.task-solution .options-reference ul {
    margin: 0;
    padding-left: 20px;
}

.task-solution .options-reference li {
    margin: 5px 0;
}

.navigate-button:hover {
    margin-top: -2px !important;
    margin-bottom: 2px !important;
}