:root {
    --font: SourceSans3;
}

html, body {
    padding: 0;
    margin: 0;
    background-color: var(--page_background);
    overflow-x: hidden;
}

span {
    font-family: var(--font), sans-serif;
    color: var(--primary-text);
}

.description {
    display: block;
    color: var(--secondary-text);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font), sans-serif;
    color: var(--primary-text);
    font-weight: 500;
    margin: 0;
}

h1.with_margin,
h2.with_margin,
h3.with_margin,
h4.with_margin,
h5.with_margin {
    margin-bottom: 20px;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

a {
    display: block;
    font-family: var(--font);
    color: var(--link);
    cursor: pointer;
}

.medium_text {
    font-weight: 500;
    color: var(--primary-dark);
}

.layout {
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.main {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    padding-top: 130px;
    height: 100vh;
    box-sizing: border-box;
}

#content {
    flex: 1;
    width: 100%;
}

.page_layout {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.page_wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    padding: 12px;
    font-family: var(--font), sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text_field_text);
    background-color: var(--text_field_background);
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    outline: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    opacity: 1;
    font-weight: normal;
    color: var(--text_field_placeholder);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border: solid 2px var(--primary);
    padding: 10px;
}

input[type="text"].invalid,
input[type="email"].invalid,
input[type="password"].invalid,
textarea.invalid {
    background-color: var(--text_field_invalid_background);
    color: var(--text_field_invalid_text);
}

input[type="text"].invalid::placeholder,
input[type="email"].invalid::placeholder,
input[type="password"].invalid::placeholder,
textarea.invalid::placeholder {
    opacity: 1;
    color: var(--text_field_invalid_placeholder);
}

textarea {
    max-width: 100%;
    min-width: 100%;
    min-height: 60px;
    max-height: 300px;
}

.text_field {
    appearance: none;
    display: block;
}

.text_field label {
    -webkit-tap-highlight-color: transparent;
}

.text_field input {
    width: 100%;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.text_field__name {
    display: block;
    margin-bottom: 3px;
    font-weight: 500;
    color: var(--primary-text);
}

.text_fields_wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.text_fields_wrapper .text_field {
    flex: 1;
}

.text_field__description {
    display: block;
    margin-top: 5px;
    color: var(--secondary-text);
}

.text_field__error_description {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--text_field_invalid_text);
}

button {
    font-family: var(--font), sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 12px;
    background-color: var(--button_background);
    color: var(--button_text);
    border: none;
    border-radius: 10px;
    outline: none;
    width: fit-content;
    appearance: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

button.small {
    padding: 5px;
    border-radius: 8px;
}

button:hover {
    background-color: var(--button_background-hover);
}

button.primary {
    background-color: var(--primary);
    color: var(--primary-text);
}

button.primary:hover {
    background-color: var(--primary-hover);
}

button.delete {
    background-color: var(--delete);
    color: white;
}

button.delete:hover {
    background-color: var(--delete-hover);
}

button.full_width {
    display: block;
    width: 100%;
}

.buttons_row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.buttons_row button {
    flex: 1;
}

.property_wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.property__name {
    display: block;
}

.property__value {
    display: block;
    font-weight: 500;
    color: var(--primary-dark);
}

.centered_title {
    text-align: center;
}

.header {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 100px 0 100px;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: var(--page_background);
    border-bottom: solid 1px var(--header_separator);
    z-index: 100;
}

.header__logo {
    display: block;
    width: 162px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='239.8px' height='75px' viewBox='0 0 239.8 75' style='enable-background:new 0 0 239.8 75;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F9CE19;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Ccircle class='st0' cx='37.5' cy='37.5' r='37.5'/%3E%3Cg%3E%3Cg%3E%3Cpath d='M10.2,32.3c3,5.1,6,10.2,9.3,15.2c1.1,1.7,2.6,4.6,4.8,5.3c5.6,1.8,7.9-8.3,8.7-11.9c-0.9,0.1-1.8,0.2-2.7,0.4 c1.7,2.8,7,12.5,11.8,9.1c2.9-2,3-7.6,3.7-10.6c1.5-5.8,3.7-11.4,6.4-16.8c0.9-1.7-1.7-3.2-2.6-1.5C46.4,27.6,44,34,42.4,40.8 c-0.5,1.9-0.8,7.5-3.3,6.9c-2.6-0.6-5-5.9-6.3-7.9c-0.7-1-2.4-0.9-2.7,0.4c-0.5,2.4-1.2,4.9-2.3,7.1c-1.2,2.3-1.9,3.2-3.7,1.4 c-2.1-1.9-3.7-5.5-5.2-7.9c-2-3.3-4-6.6-6-10C11.8,29.1,9.2,30.6,10.2,32.3L10.2,32.3z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M51.1,24c3.2,0.9,6.6,3.4,4.3,7.4c-0.8,1.5-2.6,2.3-4.2,2.6c-1.6,0.3-3.2,0.2-4.7-0.2c-1.2-0.3-2.1,0.7-1.8,1.8 c1.9,9.5,10.1,16.5,19.9,16.3c1.9,0,1.9-3,0-3c-8.5,0.2-15.4-5.9-17.1-14.1c-0.6,0.6-1.2,1.2-1.8,1.8c4.3,1.2,9.3,0.4,12.1-3.4 c3.9-5.3-0.3-10.7-5.8-12.2C50,20.6,49.3,23.5,51.1,24L51.1,24z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath d='M90,50.9l-7.4-26.6h4.2L92,44.9h0.2l5.4-20.6h4.2l5.4,20.6h0.2l5.2-20.6h4.2l-7.4,26.6h-4L99.8,31h-0.2L94,50.9H90z'/%3E%3Cpath d='M126.8,51.3c-2,0-3.6-0.4-5.1-1.3s-2.5-2-3.3-3.6c-0.8-1.5-1.1-3.3-1.1-5.4c0-2,0.4-3.8,1.1-5.4c0.8-1.6,1.8-2.8,3.2-3.6 c1.4-0.9,3-1.3,4.8-1.3c1.1,0,2.2,0.2,3.3,0.6s2,1,2.8,1.8c0.8,0.8,1.5,1.8,2,3.1c0.5,1.3,0.7,2.8,0.7,4.6v1.4h-15.8v-2.9h12 c0-1-0.2-1.9-0.6-2.7c-0.4-0.8-1-1.4-1.7-1.9c-0.7-0.5-1.6-0.7-2.6-0.7c-1.1,0-2,0.3-2.8,0.8c-0.8,0.5-1.4,1.2-1.9,2.1 c-0.4,0.9-0.7,1.8-0.7,2.8v2.3c0,1.3,0.2,2.5,0.7,3.4c0.5,0.9,1.1,1.6,2,2.1c0.8,0.5,1.8,0.7,3,0.7c0.7,0,1.4-0.1,2-0.3 c0.6-0.2,1.1-0.5,1.6-1c0.4-0.4,0.8-0.9,1-1.6l3.7,0.7c-0.3,1.1-0.8,2-1.6,2.8s-1.7,1.4-2.8,1.9C129.6,51.1,128.3,51.3,126.8,51.3z '/%3E%3Cpath d='M140,50.9V24.3h9.7c1.9,0,3.4,0.3,4.7,0.9c1.2,0.6,2.2,1.5,2.8,2.5s0.9,2.2,0.9,3.5c0,1.1-0.2,2-0.6,2.8s-0.9,1.4-1.6,1.8 c-0.7,0.5-1.4,0.8-2.2,1v0.3c0.9,0,1.7,0.3,2.6,0.8s1.5,1.3,2.1,2.2s0.8,2.1,0.8,3.5c0,1.4-0.3,2.6-1,3.6s-1.6,1.9-2.9,2.6 c-1.3,0.6-3,0.9-5.1,0.9H140z M144,35.8h5.4c0.9,0,1.7-0.2,2.4-0.5c0.7-0.3,1.3-0.8,1.7-1.5c0.4-0.6,0.6-1.4,0.6-2.2 c0-1.1-0.4-2-1.2-2.8c-0.8-0.7-1.9-1.1-3.5-1.1H144V35.8z M144,47.4h5.8c1.9,0,3.3-0.4,4.1-1.1c0.8-0.7,1.2-1.7,1.2-2.8 c0-0.8-0.2-1.6-0.6-2.3c-0.4-0.7-1-1.3-1.8-1.7c-0.8-0.4-1.7-0.6-2.8-0.6H144V47.4z'/%3E%3Cpath d='M163.9,50.9V24.3h9.5c2.1,0,3.8,0.4,5.1,1.1c1.4,0.7,2.4,1.7,3.1,2.9c0.7,1.2,1,2.7,1,4.3c0,1.6-0.3,3.1-1,4.3 c-0.7,1.2-1.7,2.2-3.1,2.9c-1.4,0.7-3.1,1-5.1,1h-7.2v-3.4h6.8c1.3,0,2.4-0.2,3.2-0.6c0.8-0.4,1.4-0.9,1.8-1.6 c0.4-0.7,0.6-1.6,0.6-2.6c0-1-0.2-1.9-0.6-2.6c-0.4-0.7-1-1.3-1.8-1.7c-0.8-0.4-1.9-0.6-3.2-0.6h-5v23.1H163.9z M177,38.9l6.6,12 H179l-6.4-12H177z'/%3E%3Cpath d='M195.4,51.3c-2,0-3.6-0.4-5.1-1.3s-2.5-2-3.3-3.6c-0.8-1.5-1.1-3.3-1.1-5.4c0-2,0.4-3.8,1.1-5.4c0.8-1.6,1.8-2.8,3.2-3.6 c1.4-0.9,3-1.3,4.8-1.3c1.1,0,2.2,0.2,3.3,0.6s2,1,2.8,1.8c0.8,0.8,1.5,1.8,2,3.1c0.5,1.3,0.7,2.8,0.7,4.6v1.4h-15.8v-2.9h12 c0-1-0.2-1.9-0.6-2.7c-0.4-0.8-1-1.4-1.7-1.9c-0.7-0.5-1.6-0.7-2.6-0.7c-1.1,0-2,0.3-2.8,0.8c-0.8,0.5-1.4,1.2-1.9,2.1 c-0.4,0.9-0.7,1.8-0.7,2.8v2.3c0,1.3,0.2,2.5,0.7,3.4c0.5,0.9,1.1,1.6,2,2.1c0.8,0.5,1.8,0.7,3,0.7c0.7,0,1.4-0.1,2-0.3 c0.6-0.2,1.1-0.5,1.6-1c0.4-0.4,0.8-0.9,1-1.6l3.7,0.7c-0.3,1.1-0.8,2-1.6,2.8s-1.7,1.4-2.8,1.9C198.2,51.1,196.9,51.3,195.4,51.3z '/%3E%3Cpath d='M212.2,39v11.8h-3.9V31h3.7v3.2h0.2c0.5-1.1,1.2-1.9,2.2-2.5s2.2-1,3.7-1c1.4,0,2.5,0.3,3.6,0.8c1,0.6,1.8,1.4,2.4,2.5 c0.6,1.1,0.8,2.5,0.8,4.1v12.7H221V38.7c0-1.4-0.4-2.6-1.1-3.4s-1.8-1.2-3.1-1.2c-0.9,0-1.7,0.2-2.4,0.6c-0.7,0.4-1.2,1-1.6,1.7 C212.4,37.1,212.2,38,212.2,39z'/%3E%3Cpath d='M239.4,31v3.1h-10.9V31H239.4z M231.4,26.2h3.9V45c0,0.8,0.1,1.3,0.3,1.7s0.5,0.6,0.9,0.8c0.4,0.1,0.7,0.2,1.2,0.2 c0.3,0,0.6,0,0.8-0.1c0.2,0,0.4-0.1,0.5-0.1l0.7,3.2c-0.2,0.1-0.5,0.2-1,0.3c-0.4,0.1-0.9,0.1-1.6,0.1c-1,0-2-0.2-2.9-0.5 c-0.9-0.4-1.6-1-2.1-1.8c-0.5-0.8-0.8-1.8-0.8-3V26.2z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M43.5,25.5c-0.8-2.9-3.8-5-6.8-4.2c-3,0.7-5.3,3.6-5,6.8c0.3,3.8,4.2,6.9,7.9,5.1C42.4,31.8,44,28.6,43.5,25.5 c-0.3-1.9-3.2-1.1-2.9,0.8c0.3,1.4-0.5,2.8-1.6,3.7c-2.2,1.9-5-0.7-4.3-3.2c0.8-2.8,5-3.7,5.9-0.5C41.1,28.1,44,27.3,43.5,25.5z' /%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M38.1,21.1c-6.2-0.8-12.2,0.3-17.8,2.8c-1.8,0.8-0.2,3.4,1.5,2.6c5.2-2.3,10.7-3,16.3-2.3C40,24.4,40,21.4,38.1,21.1 L38.1,21.1z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M27.5,24.5c-2.5-2.2-6.3-2.1-8.4,0.6c-2,2.6-1.9,6.4,0.5,8.7c2.7,2.5,7.2,2.2,9-1.2C29.9,30,29.5,26.6,27.5,24.5 c-1.3-1.4-3.5,0.7-2.1,2.1c1,1,1.2,2.4,0.8,3.8c-0.5,2.2-2.8,2.7-4.5,1.3c-2.9-2.5,0.5-7.8,3.7-5.1C26.8,27.8,28.9,25.7,27.5,24.5 z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    flex-shrink: 0;
}

.header__navigation {
    margin-left: 80px;
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.header__navigation__item {
    font-family: var(--font), sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--primary-text);
    cursor: pointer;
}

.header__search {
    position: relative;
    margin-left: 80px;
    width: 330px;
}

.header__search__input {
    width: 100%;
    text-indent: 25px;
}

.header__search__icon {
    position: absolute;
    left: 10px;
    top: 13px;
    display: block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
}

.header__user_notifications {
    position: relative;
    margin-left: auto;
}

.header__user_notifications__button {
    display: block;
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='25px' height='27px' viewBox='0 0 25 27' style='enable-background:new 0 0 25 27;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-miterlimit:10;%7D .st1%7Bfill:%23848484;stroke:%23848484;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%23848484;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M15,0.5'/%3E%3Cpath class='st1' d='M11,2.4V2c0-0.6,0.7-1,1.5-1h0C13.3,1,14,1.5,14,2v0.4'/%3E%3Cpath class='st2' d='M24.6,21.2c-0.3-0.3-0.6-0.6-0.9-0.9C22.3,18.6,22,16.5,22,15v-1v-2.5C22,6.3,17.7,2,12.5,2S3,6.3,3,11.5V14v1 c0,1.5-0.3,3.6-1.8,5.4C1,20.7,0.7,21,0.4,21.2c-0.3,0.3-0.4,0.7-0.3,1.1C0.2,22.7,0.6,23,1,23h7.1c0.3,2.2,2.1,4,4.4,4 s4.2-1.8,4.4-4H24c0.4,0,0.8-0.3,0.9-0.7C25.1,21.9,25,21.5,24.6,21.2z M12.5,25c-1.2,0-2.2-0.9-2.4-2H12h1h1.9 C14.7,24.1,13.7,25,12.5,25z M13,21h-1H3.3C4.7,18.9,5,16.6,5,15c0,0,0,0,0,0h0v-1v-1v-1.5C5,7.4,8.4,4,12.5,4S20,7.4,20,11.5V13v1 v1h0c0,0,0,0,0,0c0,1.6,0.3,3.9,1.7,6H13z'/%3E%3C/svg%3E%0A");
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
}

.header__user_notifications__button:hover {
    background-color: var(--block_background);
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='25px' height='27px' viewBox='0 0 25 27' style='enable-background:new 0 0 25 27;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-miterlimit:10;%7D .st1%7Bfill:%236D6D6D;stroke:%236D6D6D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%236D6D6D;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M15,0.5'/%3E%3Cpath class='st1' d='M11,2.4V2c0-0.6,0.7-1,1.5-1h0C13.3,1,14,1.5,14,2v0.4'/%3E%3Cpath class='st2' d='M24.6,21.2c-0.3-0.3-0.6-0.6-0.9-0.9C22.3,18.6,22,16.5,22,15v-1v-2.5C22,6.3,17.7,2,12.5,2S3,6.3,3,11.5V14v1 c0,1.5-0.3,3.6-1.8,5.4C1,20.7,0.7,21,0.4,21.2c-0.3,0.3-0.4,0.7-0.3,1.1C0.2,22.7,0.6,23,1,23h7.1c0.3,2.2,2.1,4,4.4,4 s4.2-1.8,4.4-4H24c0.4,0,0.8-0.3,0.9-0.7C25.1,21.9,25,21.5,24.6,21.2z M12.5,25c-1.2,0-2.2-0.9-2.4-2H12h1h1.9 C14.7,24.1,13.7,25,12.5,25z M13,21h-1H3.3C4.7,18.9,5,16.6,5,15c0,0,0,0,0,0h0v-1v-1v-1.5C5,7.4,8.4,4,12.5,4S20,7.4,20,11.5V13v1 v1h0c0,0,0,0,0,0c0,1.6,0.3,3.9,1.7,6H13z'/%3E%3C/svg%3E%0A");
}

.header__user_notifications__button.marked {
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='27px' height='27px' viewBox='0 0 27 27' style='enable-background:new 0 0 27 27;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-miterlimit:10;%7D .st1%7Bfill:%23848484;stroke:%23848484;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%23848484;%7D .st3%7Bfill:%23F9CE19;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M24.7,13'/%3E%3Cpath class='st1' d='M11,2.4V2c0-0.6,0.7-1,1.5-1h0C13.3,1,14,1.5,14,2v0.4'/%3E%3Cg%3E%3Cpath class='st2' d='M16.9,23H24c0.4,0,0.8-0.3,0.9-0.7c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.6-0.6-0.9-0.9C22.3,18.6,22,16.5,22,15 c-0.2,0-0.3,0-0.5,0c-0.5,0-1,0.1-1.5,0.2c0,1.6,0.4,3.8,1.7,5.8H16c0.1,0.9,0.4,1.7,0.8,2.4C16.9,23.3,16.9,23.2,16.9,23z'/%3E%3Cpath class='st2' d='M14.7,23.7c-0.4,0.8-1.2,1.3-2.2,1.3c-1.2,0-2.2-0.9-2.4-2H12h1h1.4c-0.2-0.6-0.4-1.3-0.4-2h-1h-1H3.3 C4.7,18.9,5,16.6,5,15c0,0,0,0,0,0h0v-1v-1v-1.5C5,7.4,8.4,4,12.5,4S20,7.4,20,11.5V13v0.2c0.5-0.1,1-0.2,1.5-0.2 c0.2,0,0.3,0,0.5,0v-1.5C22,6.3,17.7,2,12.5,2S3,6.3,3,11.5V14v1c0,1.5-0.3,3.6-1.8,5.4C1,20.7,0.7,21,0.4,21.2 c-0.3,0.3-0.4,0.7-0.3,1.1C0.2,22.7,0.6,23,1,23h7.1c0.3,2.2,2.1,4,4.4,4c1.4,0,2.5-0.6,3.4-1.6C15.4,24.9,15,24.3,14.7,23.7z'/%3E%3C/g%3E%3Ccircle class='st3' cx='21.5' cy='20.5' r='5.5'/%3E%3C/svg%3E%0A");
}

.header__user_notifications__button.marked:hover {
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='27px' height='27px' viewBox='0 0 27 27' style='enable-background:new 0 0 27 27;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-miterlimit:10;%7D .st1%7Bfill:%236D6D6D;stroke:%236D6D6D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%236D6D6D;%7D .st3%7Bfill:%23F9CE19;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M24.7,13'/%3E%3Cpath class='st1' d='M11,2.4V2c0-0.6,0.7-1,1.5-1h0C13.3,1,14,1.5,14,2v0.4'/%3E%3Cg%3E%3Cpath class='st2' d='M16.9,23H24c0.4,0,0.8-0.3,0.9-0.7c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.6-0.6-0.9-0.9C22.3,18.6,22,16.5,22,15 c-0.2,0-0.3,0-0.5,0c-0.5,0-1,0.1-1.5,0.2c0,1.6,0.4,3.8,1.7,5.8H16c0.1,0.9,0.4,1.7,0.8,2.4C16.9,23.3,16.9,23.2,16.9,23z'/%3E%3Cpath class='st2' d='M14.7,23.7c-0.4,0.8-1.2,1.3-2.2,1.3c-1.2,0-2.2-0.9-2.4-2H12h1h1.4c-0.2-0.6-0.4-1.3-0.4-2h-1h-1H3.3 C4.7,18.9,5,16.6,5,15c0,0,0,0,0,0h0v-1v-1v-1.5C5,7.4,8.4,4,12.5,4S20,7.4,20,11.5V13v0.2c0.5-0.1,1-0.2,1.5-0.2 c0.2,0,0.3,0,0.5,0v-1.5C22,6.3,17.7,2,12.5,2S3,6.3,3,11.5V14v1c0,1.5-0.3,3.6-1.8,5.4C1,20.7,0.7,21,0.4,21.2 c-0.3,0.3-0.4,0.7-0.3,1.1C0.2,22.7,0.6,23,1,23h7.1c0.3,2.2,2.1,4,4.4,4c1.4,0,2.5-0.6,3.4-1.6C15.4,24.9,15,24.3,14.7,23.7z'/%3E%3C/g%3E%3Ccircle class='st3' cx='21.5' cy='20.5' r='5.5'/%3E%3C/svg%3E%0A");
}

.header__user_notifications__popup {
    position: absolute;
    background-color: var(--page_background);
    padding: 20px;
    border-radius: 20px;
    width: 300px;
    height: 450px;
    flex-direction: column;
    display: none;
    box-shadow: 0 0 10px 5px var(--shadow);
    left: 12px;
    top: 50px;
    transform: translateX(-50%);
}

.header__user_notifications__popup.shown {
    display: flex;
}

.header__user_notifications__title {
    padding: 5px 5px 15px;
}

.header__user_notifications__scroll_wrapper {
    overflow-y: auto;
    scrollbar-color: var(--scroll_background) transparent;
    scrollbar-width: thin;
}

.header__user_notifications__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 5px;
}

.notification {
    padding: 10px;
    border: solid 1px var(--border);
    border-radius: 10px;
}

.notification.clickable {
    cursor: pointer;
}

.notification.clickable:hover {
    border-color: transparent;
    background-color: var(--block_background-hover);
}

.notification__timestamp {
    color: var(--secondary-text);
    font-size: 14px;
}

.notification.is_new {
    border: none;
    background-color: var(--block_background);
}

.header__user {
    margin-left: 20px;
}

.header__user_block {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.header__user_block:hover {
    background-color: var(--block_background);
}

.header__user_block__icon {
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='40px' height='40px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F9CE19;%7D .st1%7Bfill:none;stroke:%23232323;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M34.9,40H5.1C2.3,40,0,37.7,0,34.9V5.1C0,2.3,2.3,0,5.1,0h29.8C37.7,0,40,2.3,40,5.1v29.8 C40,37.7,37.7,40,34.9,40z'/%3E%3Cpath class='st1' d='M30,33v-4.6c0-3.5-2.9-6.4-6.4-6.4h-8.3C11.9,22,9,24.9,9,28.4V33'/%3E%3Ccircle class='st1' cx='19.5' cy='12' r='5.5'/%3E%3C/svg%3E%0A");
}

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

.header__user__popup_icon {
    display: block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='13.9px' height='7.9px' viewBox='0 0 13.9 7.9' style='enable-background:new 0 0 13.9 7.9;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23444444;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolyline class='st0' points='1,1 6.9,6.9 12.9,1 '/%3E%3C/svg%3E%0A");
}

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

.header__user__balance__text {
    color: var(--secondary-text);
}

.popup_window_layout {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup_window {
    position: relative;
    background-color: var(--page_background);
    padding: 20px;
    border-radius: 20px;
    width: 300px;
    max-height: 80%;
    overflow-y: auto;
}

.popup_window__close_button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
    background-color: var(--button_background);
    border-radius: 100%;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='17px' height='17px' viewBox='0 0 17 17' style='enable-background:new 0 0 17 17;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23444444;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cline class='st0' x1='16' y1='1' x2='1' y2='16'/%3E%3Cline class='st0' x1='1' y1='1' x2='16' y2='16'/%3E%3C/svg%3E%0A");
    -webkit-tap-highlight-color: transparent;
}

.popup_window__title {
    text-align: center;
    margin-bottom: 10px;
    color: var(--primary-text);
}

.popup_window__description {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    color: var(--secondary-text);
}

.photo_view_popup {
    width: 45%;
    max-height: 85%;
    overflow: hidden;
}

.photo_view_popup__image {
    width: 100%;
    border-radius: 10px;
    background-color: var(--block_background);
}

.top_margin {
    margin-top: 15px;
}

.bottom_margin {
    margin-bottom: 15px;
}

.registration_popup_window {
    width: 500px;
}

.registration_fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.registration_fields__fields_wrapper {
    flex: 1;
}

.code_verification {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin: 0 auto;
    width: fit-content;
}

.code_verification__field {
    width: 50px;
    text-align: center;
    font-size: 18px !important;
}

.tabs_wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 35px;
}

.tab {
    display: block;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-text);
    user-select: none;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}

.tab__line {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border);
}

.tab.selected {
    border-bottom: solid 2px var(--primary);
}

.loading_indicator_layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    width: 100%;
}

.loading_indicator {
    display: block;
    width: 20px;
    height: 20px;
    border: solid 2px var(--border);
    border-left-color: var(--primary);
    animation: loading_indicator linear 500ms infinite;
    border-radius: 100%;
}

.checkbox_wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    cursor: pointer;
}

.checkbox__box {
    display: block;
    width: 20px;
    height: 20px;
    border: solid 1px var(--border);
    border-radius: 5px;
    flex-shrink: 0;
    flex-grow: 0;
}

.checkbox_wrapper[checked] .checkbox__box {
    background-color: var(--primary);
    border-color: var(--primary);
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='12.5px' height='9px' viewBox='0 0 12.5 9' style='enable-background:new 0 0 12.5 9;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolyline class='st0' points='1,4.5 4.5,8 11.5,1 '/%3E%3C/svg%3E%0A");
}

.checkbox__name {
    color: var(--primary-text);
    user-select: none;
}

@keyframes loading_indicator {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .photo_view_popup.popup_window {
        padding: 5px;
    }

    .photo_view_popup {
        width: 90%;
        max-height: 90%;
        overflow: hidden;
    }

    .photo_view_popup__image {
        border-radius: 15px;
    }

    .photo_view_popup__information {
        padding: 0 10px;
    }
}

@media (max-width: 800px) {
    .header {
        padding: 0 10px 0 10px;
    }
}

@media (max-width: 500px) {
    .main {
        padding-top: 100px;
    }

    .header {
        height: 60px;
    }

    .header__logo {
        width: 70px;
    }

    .header__navigation {
        display: none;
        margin-left: 30px;
        gap: 10px;
    }

    .header__search {
        display: none;
    }

    .header__user__balance {
        display: none;
    }

    .popup_mobile_full_screen {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
        padding: 20px;
    }

    .text_fields_wrapper {
        flex-direction: column;
    }
}

@font-face {
    font-family: SourceSans3;
    font-weight: normal;
    src: url("/fonts/SourceSans3-Regular.ttf");
}

@font-face {
    font-family: SourceSans3;
    font-weight: 500;
    src: url("/fonts/SourceSans3-Medium.ttf");
}

@font-face {
    font-family: SourceSans3;
    font-weight: bold;
    src: url("/fonts/SourceSans3-Bold.ttf");
}