@import url('./font-faces.css');

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
ul,li,ol{margin:0; padding:0;}
p{all:unset;}

:root {
    --color-body-background: #f2f0f0;
    --color-main-background: var(--color-body-background);   
    --color-second-background: #253851; 
    --color-third-background: #ffffff;
    --color-main-element: #1a2e48;
    --color-link:var(--color-main-element);
    --color-link-hover: #162538;
    --color-element-border: #8da0b8;

    --color-white-hover: rgba(255, 255, 255, 0.148);
    --color-black-hover: rgba(0, 0, 0, 0.148);
    --color-second-bg-hover: #2538512e;

    --size-site-max-width: 100%;

    --size-topnav-height: 57px;
    --size-container-h-padding: 20px;
    --size-container-v-padding: 20px;

    --size-paragraph-spacing: 10px;
    --size-line-height: 20px;

}


/* :root {
    --color-body-background: #cae1ff;
    --color-main-background: #375479;
    --color-second-background: #253851;
    --color-third-background: #456082;
    --color-main-element: #E9ECF0;

    --size-site-max-width: 680px;

    --size-topnav-height: 57px;
    --size-container-h-padding: 20px;
    --size-container-v-padding: 20px;

    --size-paragraph-spacing: 10px;
    --size-line-height: 20px;
} */


body {
    /* background-color: var(--color-body-background); */
    background-color: var(--color-second-background);
    font-family: 'Montserrat';
    font-size: 16px;
    color: var(--color-main-element);
}

#wrapper {
    max-width: var(--size-site-max-width);
    margin: 0 auto;
    background: var(--color-main-background);
    height: 100%;

    /* background-color: var(--); */
}

#wrapper > * {
    /* padding-left: 20px;
    padding-right: 20px; */
    /* padding: 0 20px; */
}

#container {
    /* padding-top: 20px;
    padding-bottom: 20px; */
    padding: 20px;
}


p ul li {
    margin-left: 20px;
}


/* img {
    overflow:initial;
} */



.text-block {
    font-size: 14px;
    font-weight: 200;
    line-height: var(--size-line-height);
}
.text-block__body > p {
    display: block;
    margin-bottom: var(--size-paragraph-spacing);
}
.text-block__body > p:not(:last-child) {
    margin-bottom: var(--size-paragraph-spacing);
}

.hidden {
    display: none;
}



.topnav {
    display: flex;
    align-items: center;
    height: var(--size-topnav-height);
    padding: 0 20px;
    background-color: var(--color-second-background);
}
.topnav__sep {
    width: 100%;
}
.topnav__logo {
    display: flex;
    align-items: center;
}
.topnav__menu {
    position: relative;
}

/* Стиль для меню */
.topnav__menu-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.topnav__menu-list li:not(.topnav__profile) a {
    display: block; 
    white-space: nowrap;
    color: white;
    text-decoration: none;
    padding: 20px 10px;
}
.topnav__menu-list li.topnav__profile {
    padding-left: 10px;
}
.topnav__menu-list li.topnav__profile object {
    display: flex;
    justify-content: center;
    align-items: center;
}
.topnav__menu-list li:not(.topnav__profile) a:hover {
    background-color: var(--color-white-hover);
}

/* Адаптивность */
.topnav__burger-button {
    display: none;
    cursor: pointer;
}


@media (max-width: 640px) {
    .topnav__burger-button {
        display: block;
    }

    .topnav__menu-list {
        display: none;
        flex-direction: column;
        position: absolute;
        background-color: var(--color-second-background);
        max-width: 320px;
        right: calc(var(--size-container-h-padding) * -1);
        top: calc((var(--size-topnav-height) + var(--size-container-h-padding) * -1) + 1px);
        z-index: 999;
    }

    .topnav__menu-list.active {
        display: flex;
    }

    .topnav__profile {
        display: none;
    }


    .topnav__menu-list * {
        display: block;
        min-width: 200px;
        max-width: 320px; 
    }

    .topnav__menu-list li a {
        padding: 10px 0;
        border-bottom: 1px solid var(--color-main-background);
        text-align: center; 
    }

    /* .topnav__menu-list li a {
        padding: 10px 0;
        min-width: 200px;
        max-width: inherit;
        border-bottom: 1px solid var(--color-main-background);
        text-align: center; 
    } */
}


.footer {
    display: flex;
    /* padding: 20px; */
    background-color: var(--color-second-background);
}


.label-vertical {
    display: block;
}

.label-vertical > * {
    margin-top: 10px;
}

.label-horizontal {
    display: flex;
    align-items: center;
}
.label-horizontal > * {
    margin-left: 10px;
}

.input::placeholder {
    color: var(--color-main-element);
}
.input {
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 3px;
    border: 1px solid var(--color-main-element);
    color: var(--color-main-element);
    font-weight: 400;
    background-color: var(--color-third-background);
    outline: none;
}
.input--justify, .checker--justify {
    width: 100%;  
}

.checker {
    display: block;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 3px;
    color: var(--color-main-element);
    font-size: 14px;
    font-weight: 200;
    background-color: var(--color-third-background);
    outline: none;
}
.checker--bordered {
    border: 1px solid var(--color-main-element);
}
.checker > input {
    margin-right: 10px;
}

.autocomplete-input {
    display: flex;
    flex-direction: column;
    /* box-sizing: border-box; */
    /* position: relative; */
}
.autocomplete-input > .selected-items {
    display: none;
}
.autocomplete-input > .items-to-select {
    /* display: none; */
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;

    /* position: absolute;
    top: 57px; */
    /* box-sizing: border-box; */
    /* border: 2px solid black; */
    margin-top: 10px;
    /* height: 200px; */
    /* padding: var(--size-container-h-padding); */
}
.autocomplete-input > .items-to-select > label {
    display: flex;
    align-items: start;
    /* max-height: fit-content; */
    /* box-sizing: border-box; */
    /* padding: 10px 20px; */
    margin-right: 10px;
    margin-bottom: 10px;
    /* border-radius: 3px; */
}
.autocomplete-input > .items-to-select > * span {
    background-color: var(--color-third-background);
    cursor: pointer;
    /* padding: 10px 20px; */
    padding: 10px 20px;
    border-radius: 3px;
    /* -webkit-user-select: none;  
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; */
}
.autocomplete-input > .items-to-select input[type="checkbox"] {
    display: none;
    
}
.autocomplete-input > .items-to-select input[type="checkbox"]:checked + span {
    background-color: var(--color-second-background);
}

a {
    /* display: inline-block; */
    color: var(--color-link);
    transition: .2s;
}
a:hover {
    color: var(--color-link-hover);
    /* color: var(--color-body-background); */
    /* color: rgb(255, 255, 255); */
}
/* a:visited {
    color: var(--color-body-background);
} */

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 3px;
    transition: .3s;

    min-height: 34px;

    /* text-transform: uppercase; */
    font-weight: 400;
    letter-spacing: 1px;
    box-sizing: border-box;
}
a.button {
    align-content: center;
}
.button--primary {
    background-color: var(--color-second-background);
    border: 1px solid var(--color-second-background);
    color: white;
}
a.button--primary:hover {
    color: white;
}
.button--primary:hover {
    background-color: #375479;
}
.button--secondary {
    border: 1px solid var(--color-second-background);
    background-color: rgba(0, 0, 0, 0);
}
.button--secondary:hover {
    background-color: rgba(0, 0, 0, 0.188);
}
.button--light {
    border: 1px solid var(--color-third-background);
    background-color: var(--color-third-background);
}
.button--light:hover {
    background-color: rgba(0, 0, 0, 0.188);
}

.icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-second-background);
    width: 34px;
    height: calc(width);
    padding: 5px;
    border-radius: 3px;
}
.icon-button--rounded {
    border-radius: 50px;
}


.up-panel {
    display: flex;
    justify-content: center;
}
.up-panel > form {
    position: flex;
    background-color: var(--color-second-background);
    box-sizing: border-box;
    padding: 20px 20px;
}
.up-panel--bottom-fixed {
    position: fixed;
    width: 100%;
    z-index: 500;
    bottom: 0;
    left: 0;
    /* -webkit-box-shadow: 0px -3px 7px -5px rgba(0, 0, 0, 0.77);
    -moz-box-shadow: 0px -3px 7px -5px rgba(0, 0, 0, 0.77);
    box-shadow: 0px -3px 7px -5px rgba(0, 0, 0, 0.77); */
}
.up-panel--bottom-fixed > form {
    max-width: var(--size-site-max-width);
    width: 100%;
}

.send-message-panel > form > textarea {
    margin-bottom: 10px;
}




.profile-link > a > span {
    color: var(--color-main-element);
    font-weight: 400;
}
.profile-link--horizontal > a {
    display: inline-flex;
    align-items: center;
}
.profile-link--horizontal > a > *:not(:last-child){
    margin-right: 5px;
}


.icon-link > a {
    color: var(--color-main-element);
}
.icon-link--horizontal {
    display: flex;
    align-items: center;
}
.icon-link--horizontal > *:not(:last-child){
    margin-right: 10px;
}
.icon-link--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.icon-link--vertical > *:not(:last-child){
    margin-bottom: 5px;
}

.icon-counter {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.icon-counter > *:not(:last-child){
    margin-right: 5px;
}
.icon-counter--medium > span {
    font-size: 16px;
    font-weight: 600;
}
.icon-counter--normal > object {
    width: 15px;
    height: 15px;
}
.icon-counter--normal > span {
    font-size: 12px;
    font-weight: normal;
}
.icon-counter object, .icon-counter img {
    /* От глюка с неотработкой события клика в JS */
    pointer-events: auto;
}


.content-separator {
    user-select: none;
    cursor: pointer;
    background-color: var(--color-third-background);
    padding: 10px 20px;
    box-sizing: border-box;
}
.content-separator > span > h1 {
    padding: 0;
    margin: 0;
}
.content-separator > span, .content-separator > span > h1 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;  
}
.content-separator > span {
    display: flex;
    justify-content: center;
    border-top: 1px dashed var(--color-main-element);
    color: var(--color-main-element);  
    padding-top: 5px;
}
.content-separator--normal-case > span {
    text-transform: none;
}


.profile-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.profile-username {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.profile-username object {
    border: 2px solid var(--color-main-element);
    border-radius: 3px;
    padding: 5px;
    width: 20px;
    height: 20px;
}
.profile-username > span {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-main-element);
}
.profile-username > *:not(:last-child){
    margin-right: 10px;
}


.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-main-background);
    background-color: var(--color-main-element);
}
.tag--outlined {
    background-color: rgba(255, 255, 255, 0.447);
    color: var(--color-second-background);
}

#swiper {
    display: flex;
    justify-content: space-between;
    position: fixed;
    box-sizing: border-box;
    max-width: var(--size-site-max-width);
    width: 100%;
    top: 50%;
    pointer-events: none;
}
#to-previous-item, #to-next-item {
    pointer-events: fill;
    cursor: pointer;
    transition: .3s;
    opacity: .5;
}
#to-previous-item {
    left: 15%;
}
#to-next-item {
    left: 100px;
}
#to-previous-item:hover, #to-next-item:hover {
    opacity: 1;
}

.swipe-items > .swipe-item > *:not(:last-child) {
    margin-bottom: 20px;
}
.swipe-items > .swipe-item {
    display: none;
}
.swipe-item.it-reads {
    display: block;
}

#on-top {
    position: fixed;
    box-sizing: border-box;
    max-width: var(--size-site-max-width);
    z-index: 9999;
    top: calc(100% - 34px - 27px);
    right: 1px;
    opacity: .5;
    cursor: pointer;
}
#on-top:hover {
    opacity: 1;
}

/* #flash-message-panel {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    padding: 10px;
}
#flash-message-panel > *:not(:last-child) {
    margin-bottom: 10px;
}
.flash-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--size-site-max-width);
    pointer-events: fill;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;

    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
}
.flash-message__header {
    display: flex;
    width: 100%;
    height: 35px;
    font-weight: 600;
}
.flash-message__closer, .flash-message__title {
    user-select: none;
    height: 100%;
}
.flash-message__title {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding-left: 10px;
}
.flash-message__closer {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 35px;
    width: 35px;
    background-color: none;
}
.flash-message__loader {
    width: 100%;
    height: 5px;
}
.flash-message__progress {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    animation: width linear;
}
.flash-message__body {
    font-weight: 400;
    padding: 0 10px 10px 10px;
    letter-spacing: 1px;
}

.flash-message__progress {
    background-color: rgba(255, 255, 255, 0.725);
}

.flash-message--normal {
    box-sizing: border-box;
    border: 3px solid var(--color-second-background);
    background-color: var(--color-main-background);
}
.flash-message--green {
    box-sizing: border-box;
    border: 3px solid #20752E;
    background-color: #2AA33E;
}
.flash-message--red {
    box-sizing: border-box;
    border: 3px solid #9a2828;
    background-color: #ce3636;
}
.flash-message--yellow {
    box-sizing: border-box;
    border: 3px solid #929e29;
    background-color: #bfce36;
}
.flash-message--yellow * {
    color: #4e5516;
} */


#flash-message-panel {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    padding: 10px;
}
#flash-message-panel > *:not(:last-child) {
    margin-bottom: 10px;
}
.flash-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--size-site-max-width);
    pointer-events: fill;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;

    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.52);
}
.flash-message__header {
    display: flex;
    width: 100%;
    height: 35px;
    font-weight: 600;
}
.flash-message__closer, .flash-message__title {
    user-select: none;
    height: 100%;
}
.flash-message__title {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding-left: 10px;
}
.flash-message__closer {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 35px;
    width: 35px;
    background-color: none;
}
.flash-message__loader {
    width: 100%;
    height: 5px;
}
.flash-message__progress {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    animation: width linear;
}
.flash-message__body {
    font-weight: 400;
    padding: 0 10px 10px 10px;
    letter-spacing: 1px;
}

.flash-message__progress {
    background-color: rgba(255, 255, 255, 0.725);
}

.flash-message--info {
    box-sizing: border-box;
    border: 3px solid var(--color-second-background);
    background-color: var(--color-main-background);
}
.flash-message--success {
    box-sizing: border-box;
    border: 3px solid #20752E;
    background-color: #2AA33E;
}
.flash-message--error {
    box-sizing: border-box;
    border: 3px solid #9a2828;
    background-color: #ce3636;
}
.flash-message--warning {
    box-sizing: border-box;
    border: 3px solid #929e29;
    background-color: #bfce36;
}
.flash-message--warning * {
    color: #4e5516;
}


.item-list > *:not(:last-child) {
    margin-top: 20px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
a.tabs__item {
    text-decoration: none;
}
a.tabs__item:hover {
    text-decoration: none;
    color: white;
}
.tabs > *:not(:last-child) {
    margin-right: 4px;
}
.tabs__item {
    cursor: pointer;
    height: 28px;
    padding: 0 20px;
    transition: .3s;
    margin-bottom: 10px;
}
.tabs__item:hover {
    font-weight: 400;
    background-color: var(--color-second-background);
}
.tabs__informer {
    display: flex;
    justify-content: center;
    align-items: center;
}


.float--left {
    float: left;
}
.float--right {
    float: right;
}

.column {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
}
.row-revers {
    display: flex;
    flex-direction: row-reverse;
}
.column.revers {
    display: flex;
    flex-direction: column-reverse;
}
.column.center, .row.center, 
.column-revers.center, .row-revers.center {
    justify-content: center;
    align-items: center;
}
.column.ycenter, .column-revers.ycenter {
    justify-content: center;
}
.column.xcenter, .column-revers.xcenter {
    align-items: center;
}
.row.ycenter, .row-revers.ycenter {
    align-items: center;
}
.row.xcenter, .row-revers.xcenter {
    justify-content: center;
}

/* .centered-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */


.pagination {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.pagination__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination__item {
    display: flex;
}

.pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155; /* slate-700 */
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.pagination__link:hover:not(.pagination__link--disabled) {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}

.pagination__link--active {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-color: #3b82f6;
    cursor: default;
}

.pagination__link--disabled {
    color: #94a3b8; /* slate-400 */
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
    .pagination__link {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 0.9rem;
    }
}