/* Service classes */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
}

.container {
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 8px;
}

.spacer {
    box-sizing: border-box;
    width: 100%;
}

.spacer--16 {
    padding: 8px 0;
}

.spacer--cancel {
    padding: 16px 0;
}

.spacer--data-small {
    padding: 2px 0;
}

.spacer--data-big {
    padding: 6px 0;
}

.dimensional-container {
    padding: 8px;
}

.dimensional-container--full-width {
    width: 100%;
}

.dimensional-container--half-width {
    width: 50%;
}

.dimensional-container--inline {
    display: inline-block;
}

/* Typography */

.page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #ffffff;
    background-image: url("../img/background-mobile.png");
    background-position: top 0 left 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.page--modal {
    display: flex;
    flex-direction: column;
}

.page--modal .page__main {
    position: relative;
    flex-grow: 1;
}

h1 {
    margin: 0;
    padding: 8px;
    font-size: 40px;
    font-weight: 500;
    font-style: normal;
}

h2 {
    margin: 0;
    padding: 8px;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
}

h3 {
    margin: 0;
    padding: 8px;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
}

p {
    margin: 0;
    padding: 8px;
}

.p1 {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
}

.p2 {
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
}

.p3 {
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    color: #cccccc;
}

.p4 {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
}

.p5 {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: #ef4036;
}

.p5::before {
    content: url("../img/icon-attention.svg");
    display: inline-block;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.p6 {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    font-weight: 500;
}

.p7 {
    font-style: normal;
    font-size: 20px;
    font-weight: 500;
}

.p8 {
    font-style: normal;
    font-size: 24px;
    font-weight: 500;
}

/* Color legend */

.color-gallery {
    display: flex;
    flex-wrap: wrap;
}

.color-gallery__item {
    position: relative;
    width: 190px;
    height: 140px;
    border-radius: 10px;
}

.color-gallery__item--light-grey {
    background-color: #f8f8fa;
}

.color-gallery__item--disable-background {
    background-color: #f3f2f1;
}

.color-gallery__item--hover-textfield {
    background-color: #888888;
}

.color-gallery__item--textfield-pressed {
    background-color: #a5a4b1;
}

.color-gallery__item--hover-blue-color {
    background-color: #140c88;
}

.color-gallery__item--red {
    background-color: #ef4036;
}

.color-gallery__item--grey {
    background-color: #f2f2f2;
}

.color-gallery__item--placeholder-text {
    background-color: #f2f2f2;
}

.color-gallery__item--backgroung-color-mobile {
    background: rgba(51, 51, 51, 0.8);
}

.color-gallery__item--navy-blue {
    background-color: #1e1c3c;
}

.color-gallery__item--error {
    background-color: #cf241a;
}

.color-gallery__item--stroke-red-color {
    background-color: #f2665e;
}

.color-gallery__item--hover-button-google {
    background-color: #d7d7d7;
}

.color-gallery__item--second-text {
    background-color: #9a9999;
}

.color-gallery__item--dark-grey {
    background-color: #292b2d;
}

.color-gallery__item--black {
    background-color: #000000;
}

.color-gallery__item--green {
    background-color: #06881b;
}

.color-gallery__item--background-error-color {
    background-color: #ffdada;
}

.color-gallery__item-text {
    position: absolute;
    padding: 0;
    font-size: 20px;
    line-height: 23px;
}

.color-gallery__item-text--white {
    color: #ffffff;
}

.color-gallery__item-name {
    top: 15px;
    left: 15px;
    right: 15px;
}

.color-gallery__item-hex {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* buttons + links */

.button {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    margin: 0;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    cursor: pointer;
}

.button:disabled,
.button:hover:disabled,
.button:active:disabled {
    color: #cccccc;
    background-color: #f3f2f1;
    border-color: #f3f2f1;
    cursor: default;
}

.button-main {
    padding: 10px 20px;
    font-weight: 500;
    font-size: 20px;
}

.button--max {
    max-width: 330px;
}

.button-main--navy {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
}

.button-main--navy:hover {
    color: #ffffff;
    background-color: #46428a;
    border-color: #46428a;
}

.button-main--navy:focus {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
    box-shadow: 0 0 0 2px #1e1c3c inset, 0 0 0 3px #ffffff inset;
    outline: none;
}

.button-main--navy:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-main--navy:focus-visible {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
    box-shadow: 0 0 0 2px #1e1c3c inset, 0 0 0 3px #ffffff inset;
    outline: none;
}

.button-main--navy:active {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
}

.button-main--white {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
}

.button-main--white:hover {
    color: #ffffff;
    background-color: #46428a;
    border-color: #46428a;
}

.button-main--white:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 3px #1e1c3c inset;
    outline: none;
}

.button-main--white:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-main--white:focus-visible {
    outline: none;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 3px #1e1c3c inset;
    outline: none;
}

.button-main--white:active {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
}

.button-google {
    width: 100%;
    height: 44px;
    padding: 0;
    border-color: #f8f8fa;
    background-color: #f8f8fa;
    background-image: url("../img/google-icon.svg");
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;
}

.button-google:hover {
    border-color: #d7d7d7;
    background-color: #d7d7d7;
}

.button-google:disabled {
    background-image: url("../img/google-icon-disabled.svg");
}

.button-google:focus {
    border-color: #f8f8fa;
    background-color: #f8f8fa;
    box-shadow: 0 0 0 2px #f8f8fa inset, 0 0 0 3px #9a9999 inset;
    outline: none;
}

.button-google:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-google:focus-visible {
    border-color: #f8f8fa;
    background-color: #f8f8fa;
    box-shadow: 0 0 0 2px #f8f8fa inset, 0 0 0 3px #9a9999 inset;
    outline: none;
}

.button-google:active {
    border-color: #1e1c3c;
    background-color: #1e1c3c;
}

.button-submit {
    padding: 10px 20px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    background-color: #06881b;
    border-color: #06881b;
}

.button-submit:hover {
    color: #ffffff;
    background-color: #096417;
    border-color: #096417;
}

.button-submit:focus {
    color: #ffffff;
    background-color: #06881b;
    border-color: #06881b;
    box-shadow: 0 0 0 2px #06881b inset, 0 0 0 3px #ffffff inset;
    outline: none;
}

.button-submit:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-submit:focus-visible {
    color: #ffffff;
    background-color: #06881b;
    border-color: #06881b;
    box-shadow: 0 0 0 2px #06881b inset, 0 0 0 3px #ffffff inset;
    outline: none;
}

.button-submit:active {
    color: #ffffff;
    background-color: #12451a;
    border-color: #12451a;
}

.button-grey {
    width: auto;
    padding: 10px 20px;
    min-width: 180px;
    font-size: 16px;
    background-color: #f9f9f9;
    border-color: #d0cbcb;
}

.button-grey:hover {
    background-color: #d7d7d7;
    border-color: #d7d7d7;
}

.button-grey:focus {
    background-color: #f9f9f9;
    border-color: #d0cbcb;
    box-shadow: 0 0 0 2px #f9f9f9 inset, 0 0 0 3px #9a9999 inset;
    outline: none;
}

.button-grey:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-grey:focus-visible {
    background-color: #f9f9f9;
    border-color: #d0cbcb;
    box-shadow: 0 0 0 2px #f9f9f9 inset, 0 0 0 3px #9a9999 inset;
    outline: none;
}

.button-grey:active {
    color: #ffffff;
    background-color: #9a9999;
    border-color: #9a9999;
}

.button-grey--action,
.button-grey--action {
    color: #292b2d;
}

.button-grey--attention,
.button-grey--attention {
    color: #cf241a;
}

.button-tablet {
    padding: 5px 20px;
    min-width: 100px;
    width: auto;
    font-size: 15px;
    line-height: 125%;
    border-radius: 5px;
}

.button-tablet--underlined {
    text-decoration: underline;
}

.button-tablet--grey {
    color: #ffffff;
    background-color: #a5a4b1;
    border-color: #a5a4b1;
}

.button-tablet--grey:hover {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
}

.button-tablet--grey:focus {
    color: #ffffff;
    background-color: #a5a4b1;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #a5a4b1 inset, 0 0 0 2px #ffffff inset;
    outline: none;
}

.button-tablet--grey:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-tablet--grey:focus-visible {
    color: #ffffff;
    background-color: #a5a4b1;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #a5a4b1 inset, 0 0 0 2px #ffffff inset;
    outline: none;
}

.button-tablet--grey:active {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
}

.button-tablet--white {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
}

.button-tablet--white:hover {
    color: #ffffff;
    background-color: #4b4963;
    border-color: #4b4963;
}

.button-tablet--white:focus {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #ffffff inset, 0 0 0 2px #1e1c3c inset;
    outline: none;
}

.button-tablet--white:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-tablet--white:focus-visible {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #ffffff inset, 0 0 0 2px #1e1c3c inset;
    outline: none;
}

.button-tablet--white:active {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
}

.button-tablet--dark {
    color: #ffffff;
    background-color: #4b4963;
    border-color: #4b4963;
}

.button-tablet--dark:hover {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #4b4963;
}

.button-tablet--dark:focus {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #ffffff inset, 0 0 0 2px #1e1c3c inset;
    outline: none;
}

.button-tablet--dark:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.button-tablet--dark:focus-visible {
    color: #1e1c3c;
    background-color: #ffffff;
    border-color: #a5a4b1;
    box-shadow: 0 0 0 1px #ffffff inset, 0 0 0 2px #1e1c3c inset;
    outline: none;
}

.button-tablet--dark:active {
    color: #ffffff;
    background-color: #1e1c3c;
    border-color: #1e1c3c;
}

.cancel-button {
    box-sizing: border-box;
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    background-image: url("../img/cancel.svg");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    cursor: pointer;
}

.cancel-button:hover {
    background-color: #f3f2f1;
}

.cancel-button:disabled {
    background-image: url("../img/cancel-disabled.svg");
    background-color: #e5e5e5;
}

.cancel-button:focus {
    border-color: #000000;
    outline: none;
}

.cancel-button:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.cancel-button:focus-visible {
    border-color: #000000;
    outline: none;
}

.cancel-button:active {
    background-color: #9a9999;
}

.pagination-link {
    width: 26px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.pagination-link a,
.pagination-link button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 32px;
    padding: 0;
    color: #000000;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 1px;
    cursor: pointer;
}

.pagination-link__text {
    position: relative;
}

.pagination-link a:hover,
.pagination-link button:hover {
    background-color: #f3f2f1;
    border-color: #f3f2f1;
}

.pagination-link button:disabled {
    color: #cccccc;
    cursor: default;
}

.pagination-link button:disabled:hover {
    background-color: transparent;
    border-color: transparent;
}

.pagination-link a:focus,
.pagination-link button:focus {
    border-color: #000000;
    outline: none;
}

.pagination-link a:focus:not(:focus-visible),
.pagination-link button:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.pagination-link a:focus-visible,
.pagination-link button:focus-visible {
    border-color: #000000;
    outline: none;
}

.pagination-link a:active,
.pagination-link button:active,
.pagination-link--current a,
.pagination-link--current button {
    font-size: 20px;
    font-weight: 500;
}

.pagination-link a:active .pagination-link__text::after,
.pagination-link button:active .pagination-link__text::after,
.pagination-link--current .pagination-link__text::after,
.pagination-link--current .pagination-link__text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #ef4036;
    border-radius: 10px;
}

.dropdown-button {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 1px;
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.dropdown-button--light {
    background-color: transparent;
    background-image: url("../img/dropdown.svg");
}

.dropdown-button--light:hover {
    background-color: #f3f2f1;
}

.dropdown-button--light:disabled {
    background-color: #f3f2f1;
    background-image: url("../img/dropdown-disabled.svg");
}

.dropdown-button--light:focus {
    border-color: #000000;
    outline: none;
}

.dropdown-button--light:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.dropdown-button--light:focus-visible {
    border-color: #000000;
    outline: none;
}

.dropdown-button--light:active {
    background-color: #9a9999;
    background-image: url("../img/dropdown-white.svg");
}

.dropdown-button--dark {
    background-color: #1e1c3c;
    background-image: url("../img/dropdown-white.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
}

.dropdown-button--dark:hover {
    background: rgba(102, 102, 102, 0.8);
    background-image: url("../img/dropdown-white.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
}

.dropdown-button--dark:disabled {
    background-color: #f3f2f1;
    background-image: url("../img/dropdown-disabled.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
}

.dropdown-button--dark:focus {
    border-color: #ffffff;
    outline: none;
}

.dropdown-button--dark:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.dropdown-button--dark:focus-visible {
    border-color: #ffffff;
    outline: none;
}

.dropdown-button--dark:active {
    background-color: #9a9999;
    background-image: url("../img/dropdown-white.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
}

.block-link {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    color: #000000;
    text-align: left;
    background-color: transparent;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1px;
    cursor: pointer;
}

.block-link:hover {
    color: #000000;
    background-color: #f2f2f2;
    border-color: #f2f2f2;
}

.block-link:disabled {
    cursor: default;
    color: #cccccc;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

.block-link:disabled:hover {
    color: #cccccc;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

.block-link:focus{
    color: #000000;
    background-color: #ffffff;
    border-color: #9a9999;
}

.block-link:focus:not(:focus-visible) {
    background-color: transparent;
    border-color: transparent;
    outline: none;
}

.block-link:focus-visible {
    color: #000000;
    background-color: #ffffff;
    border-color: #9a9999;
}

.block-link:active {
    color: #ffffff;
    background-color: #9a9999;
    border-color: #9a9999;
}

.navigation-link {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 7px;
}

.navigation-link a {
    display: block;
    padding: 1px;
    font-size: 15px;
    color: #000000;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1px;
}

.navigation-link a::after {
    transition: all 0.2s ease-in-out;
}

.navigation-link a:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ef4036;
    border-radius: 10px;
}

.navigation-link a:focus{
    outline: none;
    border-color: #1e1c3c;
}

.navigation-link a:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.navigation-link a:focus-visible {
    outline: none;
    border-color: #1e1c3c;
}

.navigation-link a:active,
.navigation-link--current a {
    font-weight: 500;
}

.navigation-link a:active::after,
.navigation-link--current a::after {
    left: 50%;
    transform: translateX(-50%);
}

.red-link {
    display: inline-block;
    padding: 1px;
    border: 1px solid transparent;
    border-radius: 1px;
    color: #ef4036;
    text-decoration: none;
}

.red-link:hover {
    color: #cf241a;
    text-decoration: underline;
}

.red-link:focus{
    text-decoration: underline;
    border-color: #1e1c3c;
    outline: none;
}

.red-link:focus:not(:focus-visible) {
    border-color: transparent;
    text-decoration: none;
    outline: none;
}

.red-link:focus-visible {
    text-decoration: underline;
    border-color: #1e1c3c;
    outline: none;
}

.red-link:active {
    color: #1e1c3c;
    text-decoration: none;
}

.next-link {
    display: inline-block;
    width: auto;
    min-width: 185px;
}

.next-link a,
.next-link button {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 15px;
    font-size: 14px;
    text-decoration: none;
    color: #000000;
    cursor: pointer;
    background-color: #ffffff;
    background-image: url("../img/arrow-right-grey.svg");
    background-size: 10px 10px;
    background-position: center right 15px;
    background-repeat: no-repeat;
    border: 1px solid transparent;
}

.next-link a:hover,
.next-link button:hover {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
}

.next-link button:disabled {
    color: #cccccc;
    background-color: #f3f2f1;
    cursor: default;
}

.next-link button:focus,
.next-link a:focus {
    color: #000000;
    background-color: #ffffff;
    border-color: #9a9999;
    outline: none;
}

.next-link button:focus:not(:focus-visible),
.next-link a:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
}

.next-link button:focus-visible,
.next-link a:focus-visible {
    color: #000000;
    background-color: #ffffff;
    border-color: #9a9999;
    outline: none;
}

.next-link a:active,
.next-link button:active {
    color: #ffffff;
    background-color: #9a9999;
    border-color: #9a9999;
    background-image: url("../img/arrow-right-white.svg");
}

/* Text fields */

.text-field {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 11px;
    font-size: 14px;
    font-family: "Roboto", "Arial", sans-serif;
    font-style: normal;
    font-weight: normal;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
}

.text-field--max {
    max-width: 330px;
}

.text-field::placeholder {
    color: #cccccc;
}

.text-field:hover {
    border-color: #a5a4b1;
}

.text-field:focus {
    outline: none;
    border-color: #888888;
}

.text-field:disabled {
    cursor: default;
    border-color: #f3f2f1;
    background-color: #f3f2f1;
}

.text-field--error,
.text-field--error:hover,
.text-field--error:focus {
    border: 1px solid #cf241a;
}

.text-field--succes,
.text-field--succes:hover,
.text-field--succes:focus {
    border: 1px solid #06881b;
}

.select {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 330px;
    padding: 13px 16px;
    font-size: 12px;
    color: #000000;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
    background: #ffffff;
    background-image: url("../img/arrow-down-grey.svg");
    background-repeat: no-repeat;
    background-position: top 50% right 15px;
    background-size: 15px 9px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select--max {
    box-sizing: border-box;
    max-width: 100%;
}

.select--full {
    width: 100%;
}

.select:hover {
    border-color: #9a9999;
}

.select:focus {
    outline: none;
    border-color: #a5a4b1;
}

.select:disabled {
    background-color: #f3f2f1;
    border-color: #f3f2f1;
}

.table-field {
    box-sizing: border-box;
    width: 70px;
    height: 30px;
    margin: 0;
    padding: 5px;
    text-align: center;
    border: none;
    border-radius: 5px;
    background-color: #f8f8fa;
}

.table-field::placeholder {
    color: #cccccc;
}

/* Remove type=number arrow > */

.table-field::-webkit-outer-spin-button,
.table-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table-field {
    -moz-appearance: textfield;
}

.table-field:hover,
.table-field:focus {
    -moz-appearance: number-input;
}

/* < Remove type=number arrow */

.table-field:hover {
    background-color: #e9e9f0;
}

.table-field:disabled {
    background-color: #edebe9;
}

.table-field:disabled::placeholder {
    color: #9a9999;
}

.table-field:focus {
    color: #000000;
    background-color: #f8f8fa;
    outline: none;
}

.table-field--error,
.table-field--error:hover,
.table-field--error:focus {
    background-color: #ffdada;
}

.table-field--error::placeholder {
    color: #cf241a;
}

/* Tabs */

.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: flex;
    width: 100%;
    overflow-x: auto;
}

.tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #e3e0e0;
    border-radius: 10px;
}

.tab {
    position: relative;
    z-index: 5;
    display: inline-block;
    min-width: 144px;
    padding-bottom: 8px;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #7a7a7a;
    text-decoration: none;
    white-space: nowrap;
}

.tab::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 10px;
}

.tab:hover {
    color: #000000;
}

.tab:hover::after {
    content: "";
    background-color: #7a7a7a;
}

.tab--active::after,
.tab:active::after,
.tab--active:hover::after {
    content: "";
    background-color: #ef4036;
}

.tab:disabled {
    color: #7a7a7a;
    cursor: default;
}

.tab:focus {
    box-shadow: 0 0 0 1px #323130 inset;
    outline: none;
}

.tab:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.tab:focus-visible {
    box-shadow: 0 0 0 1px #323130 inset;
    outline: none;
}

.tab--active,
.tab:active {
    color: #000000;
}

/* 
  Table 
  For the table, we use the desktop-first method (for simplicity reasons).
*/

.table {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #eaeaea;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 20px 3px rgba(111, 111, 111, 0.1);
    box-shadow: 0 0 20px 3px rgba(111, 111, 111, 0.1);
    border-radius: 2px;
}

.table caption {
    margin: 0;
    padding: 0 0 24px 0;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
}

.table thead th,
.table thead td {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.table tbody {
    background-color: #ffffff;
}

.table thead th {
    /* position: sticky;
    top: -1px; */
    z-index: 5;
    padding: 8px 20px;
    background-color: #eeeeee;
}

.table td,
.table tbody th {
    padding: 16px 20px;
    color: #9a9999;
    text-align: center;
}

.table td:nth-child(1),
.table th:nth-child(1) {
    color: #000000;
}

.table tbody tr td,
.table tbody tr th {
    position: relative;
}

.table tbody tr td::after,
.table tbody tr th::after  {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #eaeaea;
}

.table tbody tr td:nth-child(1)::after,
.table tbody tr th:nth-child(1)::after {
    left: 20px;
    width: calc(100% - 20px);
}

.table tbody tr td:nth-last-child(1)::after,
.table tbody tr th:nth-last-child(1)::after {
    right: 20px;
    width: calc(100% - 20px);
}

.table tbody:nth-last-of-type(1) tr:nth-last-child(1) td::after,
.table tbody:nth-last-of-type(1) tr:nth-last-child(1) th::after {
    content: none;
}

.table thead th:nth-child(1),
.table td:nth-child(1),
.table tbody th:nth-child(1) {
    text-align: start;
}

.table--text-left td,
.table--text-left th {
    text-align: left;
}

.table--text-right td,
.table--text-right th {
    text-align: right;
}

.table--text-left td[colspan="2"],
.table--text-left th[colspan="2"],
.table .table__cell-center {
    text-align: center;
}

thead th.table--text-right {
    text-align: right;
}

thead th.one-third {
    width: 33.33%;
}

thead th.one-fourth {
    width: 33.33%;
}


@media (max-width: 959px) {
    .table,
    .table tbody,
    .table tr {
        display: block;
    }

    .table {
        border: 1px solid #eaeaea;
    }

    .table caption {
        /* position: sticky;
        top: 0;
        z-index: 5; */
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 12px;
        font-size: 18px;
        font-weight: bold;
        background-color: #eeeeee;
        text-align: center;
    }

    .table caption ~ tbody:nth-of-type(1) > tr:nth-child(1)::before {
        content: none;
    }

    .table:not(.table--empty) thead th:not(.table__cell-select),
    .table tbody tr th {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        border: 0;
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
    }

    .table tbody tr {
        font-size: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .table tbody tr::before {
        content: attr(data-title);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        padding: 12px 8px;
        color: #000000;
        background-color: #eeeeee;
    }

    .table tbody td::before {
        content: attr(data-title);
        margin-right: 20px;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        opacity: 0.7;
        white-space: nowrap;
    }

    .table .column-left {
        text-align: left;
    }

    .table .column-left > * {
        display: block;
        margin-left: auto;
    }

    .table .column-center {
        text-align: center;
    }

    .table .column-center > * {
        display: block;
        margin: 0 auto;
    }

    .table .column-right {
        text-align: right;
    }

    .table .column-center > * {
        display: block;
        margin-right: auto;
    }

    .table td {
        display: block;
        display: flex;
        justify-content: space-between;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 12px;
        font-size: 14px;
        text-align: end;
        white-space: nowrap;
    }

    .table tbody tr td::after,
    .table tbody tr td:nth-child(1)::after,
    .table tbody:nth-last-of-type(1) tr:nth-last-child(1) td::after,
    .table tbody tr th::after,
    .table tbody tr th:nth-child(1)::after,
    .table tbody:nth-last-of-type(1) tr:nth-last-child(1) th::after {
        content: "";
        width: calc(100% - 16px);
        left: 8px;
        right: 8px;
    }

    .table tbody tr td:nth-last-child(1)::after {
        content: none;
    }

    .table tbody tr .table__half-cell {
        margin: 0 auto;
        overflow: visible;
        flex-shrink: 0;
        display: inline-block;
        width: auto;
        box-sizing: border-box;
        text-align: center;
    }

    .table tbody tr .table__half-cell::before,
    .table tbody tr .table__half-cell::after,
    .table tbody tr .table__full-cell::before,
    .table tbody tr .table__full-cell::after {
        content: none;
    }

    .table tbody tr .table__full-cell > * {
        display: block;
        margin: 0 auto;
    }

    .table--empty thead,
    .table--empty thead tr {
        display: block;
        width: 100%;
    }

    .table--empty thead tr th {
        position: relative;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        padding: 12px;
        justify-content: space-between;
        color: #333333;
        white-space: nowrap;
        overflow-x: auto;
    }

    .table--empty thead tr th::before {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        content: "";
        width: calc(100% - 24px);
        height: 2px;
        border-radius: 1px;
        background-color: #9e9e9e;
    }

    .table--empty thead tr th::after {
        content: attr(data-title);
        margin-left: 20px;
        color: #333333;
    }

    .table--empty thead tr th:nth-last-child(1):before {
        content: none;
    }
}

@media (max-width: 590px) {
    .table td {
        overflow-x: auto;
        padding: 12px 8px;
    }

    .table tbody tr::before {
        padding: 8px;
    }

    .table--empty thead tr th {
        padding: 12px 8px;
    }

    .table--empty thead tr th::before {
        left: 8px;
        right: 8px;
        width: calc(100% - 16px);
    }
}

.table--select th.table__cell-select {
    width: 400px;
    padding: 16px 20px;
}

.table--select .table__cell-select label {
    padding: 0 12px 0 0;
}

@media (max-width: 959px) {
    .table--select thead {
        display: block;
    }

    .table--select th.table__cell-select {
        position: relative;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        width: 100%;
        padding: 12px 8px;
        padding-bottom: 15px;
        flex-wrap: wrap;
    }

    .table--select th.table__cell-select::after {
        content: "";
        position: absolute;
        width: calc(100% - 16px);
        height: 3px;
        left: 8px;
        right: 8px;
        bottom: 0;
        background-color: #AAA9A9;
        border-radius: 10px;
    }

    .table--select th.table__cell-select form > * {
        display: inline-block;
        vertical-align: middle;
    }

    .table--select tbody tr::before {
        text-align: start;
    }
}

/* 
  End of table style.
*/

/* header */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    color: #000000;
    background: #F8F8FA;
    box-shadow: 0px 2px 10px rgb(49 49 49 / 40%);
  }
  
  .header--admin {
    color: #FFFFFF;
    background-color: #1E1C3C;
  }
  
  .header__container {
    position: relative;
    box-sizing: border-box;
    padding: 8px;
  }
  
  .header__logo {
    position: absolute;
    top: 8px;
    left: 8px;
  }

.logo a {
    position: relative;
    display: block;
    padding: 8px;
}

.logo a[href]::after {
    transition: all 0.2s ease-in-out;
    position: absolute;
    bottom: 4px;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ef4036;
    border-radius: 10px;
}

.logo a[href]:hover::after {
    content: "";
    left: 6px;
    transform: none;
}

.logo a[href]:active::after {
    content: "";
    left: 50%;
    transform: translateX(-50%);
}

.logo a[href]:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
    -moz-box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
    box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
}

  .logo a[href]:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
  }

  .logo a[href]:focus:not(:focus-visible)::after {
    content: "";
    left: 50%;
    transform: translateX(-50%);
  }

  .logo a[href]:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
    -moz-box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
    box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #323130;
  }

.header--admin .logo a[href]:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
    -moz-box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
    box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
}

.header--admin .logo a[href]:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.header--admin .logo a[href]:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
    -moz-box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
    box-shadow: 0 0 0 1px #323130, 0 0 0 2px #FFFFFF;
}
  
  .main-menu {
    margin: 0;
    padding: 8px 0; /* We make top/bottom padding, because lists items is inline, and there don't work vertical padding, only horizontal: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline */
    list-style: none;
  }
  
  .main-menu__item {
    display: block;
  }
  
  .main-menu__link {
    display: block;
    padding: 4px 8px;
  }
  
  .main-menu__link--submenu {
    padding-right: 30px;
    background-image: url("../img/arrow-down-black.svg");
    background-position: right 10px center;
    background-size: 12px 7px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .header--admin .main-menu__link--submenu {
    background-image: url("../img/arrow-down-white.svg");
  }
  
  /* This is a utility class with which we hide text prompts (needed for reader programs and bots). */
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
  }
  
  /* CSS rules with class 'js' will only be executed if the browser can run the script. */
  
  .js .header__container {
    position: relative;
    min-height: 88px;
    padding: 4px 12px;
  }
  
  .js .main-menu {
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 0; /* Block children have a property display: inline-block/inline. To get rid of extra spaces, we zero the font to the parent element, and assign it again to the links ("main-menu__link") */
  }
  
  .js .main-menu__item {
    display: inline;
    display: inline-block;
    vertical-align: middle;
    margin-right: 70px;
  }
  
  .js .main-menu__item:nth-last-child(1) {
    margin-right: 0;
  }
  
  .js .main-menu__submenu {
    display: none;
    color: #000000;
    background-color: #FFFFFF; 
  }
  
  .js .main-menu__submenu--opened {
    display: block;
    position: absolute;
    top: 100%;
    z-index: 5;
    padding: 0;
    -webkit-box-shadow: rgb(0 0 0 / 13%) 0 3.2px 7.2px 0, rgb(0 0 0 / 11%) 0 0.6px 1.8px 0;
    box-shadow: rgb(0 0 0 / 13%) 0 3.2px 7.2px 0, rgb(0 0 0 / 11%) 0 0.6px 1.8px 0;
  }
  
  .js .main-menu__submenu--opened.main-menu__submenu--profile {
    right: 0;
  }
  
  .js .main-menu__submenu .main-menu__item {
    display: block;
    margin-right: 0;
    white-space: nowrap;
  }
  
  .js .main-menu__link {
    display: inline;
    display: inline-block;
    padding: 8px;
    font-size: 15px; /* Setting the font and line-height. */
    line-height: 18px;
  }
  
  .js .main-menu__submenu .main-menu__link{
    display: block;
  }
  
  .header__toolbar-burger {
    display: none;
  }
  
  @media (max-width: 959px) {
    .js .header__container {
      min-height: 64px;
      padding: 8px;
    }
  
    .js .header__toolbar {
        display: none;
    }
  
    .js .header__toolbar--opened {
        position: absolute;
        z-index: 5;
        max-height: calc(100vh - 65px); /* max-height + overflow-y дают возможность проскроллить меню, если оно слишком большое и экрана не хватает. Тут 65px - высота хедера + отступ в один пиксель (меню позиционируется так: calc(100% + 1px).*/
        overflow-y: auto;
        top: 100%;
        top: calc(100% + 1px);
        left: 0;
        display: block;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        background-color: #FFFFFF;
        border-bottom: 1px solid #F3F3F3;
    }
  
    .js .header__toolbar-burger  {
        position: absolute;
        display: block;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
  
    .js .burger {
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        padding: 8px;
    }
  
    .js .main-menu {
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #F8F8F8;
    }
  
    .js .header__logo {
        position: static;
    }
  
    .js .main-menu__item {
        display: block;
        margin: 0;
    }
  
    .js .main-menu__link {
        display: block;
    }
  
    .js .main-menu__submenu--opened {
        position: static;
        z-index: 5;
        padding: 0;
        -webkit-box-shadow: rgb(0 0 0 / 13%) 0 3.2px 7.2px 0, rgb(0 0 0 / 11%) 0 0.6px 1.8px 0;
        box-shadow: rgb(0 0 0 / 13%) 0 3.2px 7.2px 0, rgb(0 0 0 / 11%) 0 0.6px 1.8px 0;
    }
  }
  
  @media (max-width: 599px) {
    .js .header__logo {
        width: 48px;
    }
  }
  
  .header__main-menu-container--opened {
    border: none;
    box-shadow: none;
  }
  
  @media (max-width: 959px) {
    .js .header__main-menu-container--opened {
        border: none;
        -moz-box-shadow: rgba(0, 0, 0, 0.133) 0 3.2px 7.2px 0, rgba(0, 0, 0, 0.11) 0 0.6px 1.8px 0;
        box-shadow: rgba(0, 0, 0, 0.133) 0 3.2px 7.2px 0, rgba(0, 0, 0, 0.11) 0 0.6px 1.8px 0;
    }
  }
  
  .header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header--push .header__container {
    flex-wrap: wrap;
  }
  
  @media (min-width: 960px) {
    .header__logo {
        position: static;
    }
  
    .header__main-menu-container {
        margin: 0;
    }
  }
  
  /*
    proxy panel control
  */
  
  .header__admin-area {
    margin: 0 auto 0 4px;
  }
  
  .admin-area {
    padding: 0 8px;
  }
  
  .admin-switch {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 91px;
    height: 44px;
    display: inline-block;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px;
    background: #F8F8FA;
    box-shadow: 0px 4px 4px rgba(129, 129, 129, 0.25);
    border-radius: 100px;
  }
  
  .admin-switch__account {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 30px;
    height: 30px;
    margin: 0 0 0 4px;
    padding: 0;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    background-color: #1E1C3C;
    border: none;
    border-radius: 50%;
  }
  
  .admin-switch__logout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    border: none;
    background-color: #EF4036;
    background-image: url("../img/logout.svg");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .admin-switch__logout:hover {
    background-color: #CF241A;
  }
  
  .admin-switch__logout:disabled {
    background-image: url("../img/logout-disabled.svg");
    background-color: #F3F2F1;
  }
  
  .admin-switch__logout:focus {
    background-color: #EF4036;
    box-shadow: 0 0 0 2px #EF4036 inset, 0 0 0 3px #FFFFFF inset;
    outline: none;
  }

  .admin-switch__logout:focus:not(:focus-visible) {
    box-shadow: transparent;
    box-shadow: none;
    outline: none;
  }

  .admin-switch__logout:focus {
    background-color: #EF4036;
    box-shadow: 0 0 0 2px #EF4036 inset, 0 0 0 3px #FFFFFF inset;
    outline: none;
  }

  .admin-switch__logout:active {
    background-color: #1E1C3C;
  }
  
  .profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
    background-color: #F8F8FA;
  }
  
  .profile__photo {
    display: inline-block;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 27px;
    color: #000000;
    border-radius: 50%;
    background-color: #E1E1E1;
  }
  
  .profile__data {
    display: inline-block;
  }
  
  .profile__name {
    display: block;
    font-size: 15px;
    color: #000000;
  }
  
  .profile__id {
    display: block;
    font-size: 13px;
    color: #CCCCCC;
  }
  
  .profile--desktop {
    display: none;
  }
  
  /* 
    proxy decorative styles
  */
  
  .js .burger__button {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid transparent;
    background-color: transparent;
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  
  .js .burger__button--light {
    background-image: url("../img/burger.svg");
  }
  
  .js .burger__button--light:hover {
    background-color: #F3F2F1;
  }
  
  .js .burger__button--light:disabled {
    background-color: #F3F2F1;
    border-color: #F3F2F1;
    background-image: url("../img/burger-disabled.svg");
  }

  .js .burger__button--light:focus {
    border-color: #000000;
    outline: none;
  }

  .js .burger__button--light:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
  }

  .js .burger__button--light:focus-visible {
    border-color: #000000;
    outline: none;
  }

  .js .burger__button--light:active {
    background-image: url("../img/burger-white.svg");
    background-color: #9A9999;
  }
  
  .js .burger__button--dark {
    background-color: #1E1C3C;
    background-image: url("../img/burger-white.svg");
  }
  
  .js .burger__button--dark:hover {
    background-color: rgba(102, 102, 102, 0.8);;
  }
    
  .js .burger__button--dark:disabled {
    background-color: #F3F2F1;
    border-color: #F3F2F1;
    background-image: url("../img/burger-disabled.svg");
  }

  .js .burger__button--dark:focus {
    border-color: #FFFFFF;
    outline: none;
  }

  .js .burger__button--dark:focus:not(:focus-visible) {
    border-color: transparent;
    outline: none;
  }

  .js .burger__button--dark:focus-visible {
    border-color: #FFFFFF;
    outline: none;
  }

  .js .burger__button--dark:active {
    background-image: url("../img/burger-white.svg");
    background-color: #9A9999;
  }
  
  .main-menu .main-menu__item .main-menu__link--current,
  .main-menu .main-menu__item .main-menu__link--current * { 
    font-weight: 600;
  }
  
  @media (max-width: 959px) {
    .js .main-menu__link {
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      color: #000000;
      text-align: left;
      background-color: transparent;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 1px;
      cursor: pointer;
    }
    
    .js .main-menu__link--submenu {
      background-position: right 14px center;
      cursor: pointer;
      background-image: url("../img/arrow-down-black.svg");
    }
    
    .main-menu__link:hover {
      color: #000000;
      background-color: #F2F2F2;
      border-color: #F2F2F2;
    }

    .main-menu__link--submenu:hover {
        color: #000000;
        background-color: #F2F2F2;
        border-color: #F2F2F2;
    }
    
    .main-menu__link:disabled,
    .main-menu__link--submenu:disabled {
      cursor: default;
      color: #CCCCCC;
      background-color: #E5E5E5;
      border-color: #E5E5E5;
    }
    
    .main-menu__link:disabled:hover,
    .main-menu__link--submenu:disabled:hover {
      color: #CCCCCC;
      background-color: #E5E5E5;
      border-color: #E5E5E5;
    }

    .main-menu__link:focus,
    .main-menu__link--submenu:focus {
        color: #000000;
        background-color: #FFFFFF;
        border-color: #9A9999;
        outline: none;
    }

    .main-menu__link:focus *,
    .main-menu__link--submenu:focus * {
        color: #000000;
    }
    
    .main-menu__link:focus:not(:focus-visible),
    .main-menu__link--submenu:focus:not(:focus-visible) {
        border-color: transparent;
        outline: none;
    }
    
    .main-menu__link:focus-visible,
    .main-menu__link--submenu:focus-visible {
        color: #000000;
        background-color: #FFFFFF;
        border-color: #9A9999;
        outline: none;
    }

    .main-menu__link:focus-visible *,
    .main-menu__link--submenu:focus-visible * {
        color: #000000;
    }

    .main-menu__link:active,
    .main-menu__link--submenu:active,
    .main-menu__link[aria-expanded="true"] {
      color: #FFFFFF;
      background-color: #9A9999;
      border-color: #9A9999;
    }

    .main-menu__link--submenu:active,
    .main-menu__link[aria-expanded="true"] {
        background-image: url("../img/arrow-down-white.svg");
    }
  
    .main-menu__link:active *,
    .main-menu__link--submenu:active *,
    .main-menu__link[aria-expanded="true"] * {
      color: #FFFFFF;
    }
  
    .admin-area__text {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
      clip: rect(0 0 0 0);
      -webkit-clip-path: inset(100%);
      clip-path: inset(100%);
    }
  
    .link-profile__text--mobile {
      display: block;
      color: #000000;
      font-size: 18px;
      line-height: normal;
    }
  
    .link-profile__text--desktop {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
      clip: rect(0 0 0 0);
      -webkit-clip-path: inset(100%);
      clip-path: inset(100%);
    }
  }
  
  @media (min-width: 960px) {
    .logo a {
      position: relative;
      padding: 12px;
    }
  
    .logo a[href]::after {
      bottom: 7px;
    }
  
    .logo a[href]:hover::after {
      left: 10px;
    }
  
    .admin-area {
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .admin-area__text {
      display: inline-block;
      margin-right: 30px;
      padding: 0;
      color: #EF4036;
    }
  
    .header-panel {
      display: inline-block;
    }
  
    .profile--mobile {
      display: none;
    }
  
    .profile--desktop {
      display: block;
    }
  
    .main-menu > .main-menu__item > .main-menu__link {
      position: relative;
      padding: 1px;
      font-size: 15px;
      line-height: 18px;
      color: #000000;
      text-decoration: none;
      background-color: transparent;
      border: 1px solid transparent;
      border-radius: 1px;
      cursor: pointer;
    }
  
    .header--admin .main-menu > .main-menu__item > .main-menu__link {
      color: #FFFFFF;
    }
  
    .main-menu > .main-menu__item > .main-menu__link--submenu {
      padding-right: 30px;
      background-image: url("../img/arrow-down-black.svg");
      background-position: right 10px center;
      background-size: 12px 7px;
      background-repeat: no-repeat;
    }

    .header--admin .main-menu > .main-menu__item > .main-menu__link--submenu:not(.link-profile) {
        background-image: url("../img/arrow-down-white.svg");
    }
  
    .main-menu > .main-menu__item > .main-menu__link::after {
      transition: all 0.2s ease-in-out;
      position: absolute;
      bottom: -7px;
      display: block;
      width: 30px;
      height: 2px;
      background-color: #EF4036;
      border-radius: 10px;
    }
  
    .main-menu > .main-menu__item > .main-menu__link:hover::after {
      content: "";
      left: 0;
      transform: none;
    }
  
    .main-menu > .main-menu__item > .main-menu__link:focus {
      outline: none;
      border-color: #1E1C3C;
    }
  
    .header--admin .main-menu > .main-menu__item > .main-menu__link:focus {
      outline: none;
      border-color: #FFFFFF;
    }
  
    .header--admin .main-menu > .main-menu__item > .link-profile:focus {
      border-color: #EF4036;
      outline: none;
    }
  
    .main-menu > .main-menu__item > .main-menu__link:focus:not(:focus-visible),
    .header--admin .main-menu > .main-menu__item > .main-menu__link:focus:not(:focus-visible).main-menu__link--submenu,
    .header--admin .main-menu > .main-menu__item > .link-profile:focus:not(:focus-visible) {
      border-color: transparent;
      outline: none;
    }

    .main-menu > .main-menu__item > .main-menu__link:focus-visible {
      outline: none;
      border-color: #1E1C3C;
    }
  
    .header--admin .main-menu > .main-menu__item > .main-menu__link:focus-visible {
      outline: none;
      border-color: #FFFFFF;
    }
  
    .header--admin .main-menu > .main-menu__item > .link-profile:focus-visible {
      border-color: #EF4036;
      outline: none;
    }

    .main-menu > .main-menu__item > .main-menu__link:active::after,
    .main-menu > .main-menu__item > .main-menu__link--current::after,
    .main-menu > .main-menu__item > .main-menu__link[aria-expanded="true"]::after {
      content: "";
      left: 50%;
      transform: translateX(-50%);
    }

    .main-menu > .main-menu__item > .link-profile[aria-expanded="true"] {
        background-color: #737373;
    }

    .main-menu > .main-menu__item > .link-profile[aria-expanded="true"] .link-profile__text {
        color: #FFFFFF;
    }

    .main-menu > .main-menu__item > .link-profile[aria-expanded="true"]::after {
        content: none;
    }
  
    .js .main-menu__submenu .main-menu__link {
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      color: #000000;
      text-align: left;
      background-color: transparent;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 1px;
      cursor: pointer;
    }
  
    .js .main-menu__submenu .main-menu__link:hover {
      color: #000000;
      background-color: #F2F2F2;
      border-color: #F2F2F2;
    }
    
    .js .main-menu__submenu .main-menu__link:disabled {
      cursor: default;
      color: #CCCCCC;
      background-color: #E5E5E5;
      border-color: #E5E5E5;
    }
    
    .js .main-menu__submenu .main-menu__link:disabled:hover {
      color: #CCCCCC;
      background-color: #E5E5E5;
      border-color: #E5E5E5;
    }

    .js .main-menu__submenu .main-menu__link:focus {
        color: #000000;
        background-color: #FFFFFF;
        border-color: #9A9999;
        outline: none;
    }
    
    .js .main-menu__submenu .main-menu__link:focus:not(:focus-visible):not(:active) {
        border-color: transparent;
        background-color: transparent;
        outline: none;
    }
    
    .js .main-menu__submenu .main-menu__link:focus-visible {
        color: #000000;
        background-color: #FFFFFF;
        border-color: #9A9999;
        outline: none;
    }

    .js .main-menu__submenu .main-menu__link:active{
        color: #FFFFFF;
        background-color: #9A9999;
        border-color: #9A9999;
    }
  
    .js .main-menu__submenu--opened {
      position: absolute;
      top: 100%;
      margin: 0;
      padding: 0;
      width: auto;
      background-color: #FFFFFF;
    }
  
    .main-menu__submenu--profile {
      position: absolute;
      top: 100%;
      right: 0;
      margin: 0;
      padding: 0;
      min-width: 185px;
      background-color: #FFFFFF;
    }
  
    .link-profile__text--mobile {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
      clip: rect(0 0 0 0);
      -webkit-clip-path: inset(100%);
      clip-path: inset(100%);
    }
  
    .link-profile__text--desktop {
      display: block;
      font-size: 15px;
      line-height: 18px;
      color: #000000;
    }
  
    .main-menu > .main-menu__item > .link-profile {
      box-sizing: border-box;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      padding: 0;
      display: inline-block;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #E1E1E1;
      background-image: none;
    }
  
    .main-menu > .main-menu__item > .link-profile:hover {
      background-color: #9A9999;
    }
  
    .main-menu > .main-menu__item > .link-profile:active {
      background-color: #737373;
    }
  
    .main-menu > .main-menu__item > .link-profile:active .link-profile__text {
      color: #FFFFFF;
    }
  
    .main-menu > .main-menu__item > .link-profile:hover::after,
    .main-menu > .main-menu__item > .link-profile:active::after {
      content: none;
    }
  }

/* End of header styles */

/* Page styles */

.modal {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 32px);
    margin: 0 auto;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
}

.modal--error {
    text-align: center;
}

.modal--error h1 {
    color: #CF241A;
}

.modal-main--small {
    max-width: 394px;
    padding: 12px;
}

.modal-main--big {
    max-width: 604px;
    padding: 12px;
}

.modal__image-login {
    max-width: 120px;
    max-height: 120px;
}

.modal__image-login .image__inner {
    background-image: url("../img/log-in.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.modal__button-column {
    max-width: none;
    display: block;
    margin: 0 auto;
}

.modal__button-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.modal__field-label {
    display: block;
    margin: 0 auto 5px;
}

.modal__field {
    display: block;
    margin: 0 auto;
}

.modal__text-grey {
    color: #888888;
}

.modal__cancel-button {
    position: absolute;
    right: 12px;
    top: 12px;
}

.create-key__title {
    text-align: center;
}

.create-key__image {
    max-width: 147px;
    max-height: 144px;
}

.create-key__image .image__inner {
    background-image: url("../img/keys.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Table elements */

.data-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.data-section > * {
    display: inline-block;
}

.data-section .data-section__element-full {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.data-section__button-container {
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.data-section__button {
    display: block;
    margin-left: auto;
    width: 180px;
    max-width: 100%;
}

.data-section__form-container {
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.data-section__form {
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.data-section__form-label {
    display: block;
    padding: 8px;
    white-space: nowrap;
}

.table-form__container {
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px;
    max-width: 600px;
}

.table-form__container-field.table-form__container-field--error {
    position: relative;
    padding-bottom: 32px;
}

.table-form__field-label {
    display: block;
    margin-bottom: 5px;
}

.table-form__error-message {
    position: absolute;
    padding-left: 0;
    padding-right: 0;
}

.table-form__submit {
    display: block;
    margin: 0 auto;
}

.data-additional {
    display: flex;
    justify-content: space-between;
}

@media (min-width: 600px) {
    .header {
        min-height: 72px;
    }

    .spacer--data-small {
        padding: 3px 0;
    }

    .spacer--data-big {
        padding: 9px 0;
    }

    .dimensional-container {
        padding: 12px;
    }

    h1,
    h2,
    h3,
    p {
        padding: 12px;
    }

    .button {
        border-radius: 10px;
    }

    .image {
        padding: 12px;
    }

    .create-key__image {
        max-width: 200px;
        max-height: 200px;
    }

    .create-key__title {
        text-align: left;
    }

    .modal-main--small {
        padding: 18px;
    }

    .modal__button-container {
        flex-wrap: nowrap;
    }

    .table-form__container-field.table-form__container-field--error {
        padding-bottom: 40px;
    }


    .modal-main--small .modal__cancel-button {
        position: absolute;
        right: 18px;
        top: 18px;
    }

    .modal-main--big .modal__cancel-button {
        position: absolute;
        right: 12px;
        top: 12px;
    }
}

@media (min-width: 960px) {
    .header {
        min-height: 80px;
    }
    .container {
        padding: 0 12px;
    }

    .data-section--inline > * {
        display: inline-block;
    }

    .data-section__form-label {
        padding: 12px;
    }

    .table-form__inner {
        display: flex;
        align-items: flex-end;
    }

    .table-form__container {
        padding: 12px;
        width: 33.33%;
    }

    .table-form__container.table-form__container--error {
        padding-bottom: 40px;
    }

    .table-form__submit {
        max-width: none;
    }

    .overflow-content {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
    }
}


/* Responsive sсhedule */

.sсhedule-container {
    overflow-x: auto;
    margin: 12px;
}

.sсhedule-container__inner {
    width: 100%;
    min-height: 616px;
    min-width: 616px;
}

@media (max-width: 959px) {
    .sсhedule-container {
        margin: 8px;
    }
}

/* Page overlay */

@media screen and (max-width: 959px) {
    .page__overlay {
      display: none;
      position: fixed;
      visibility: hidden;
      z-index: 5;
      min-height: 100vh;
      width: 100vw;
      opacity: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(51, 51, 51, 0.8);
    }
  
    .page__overlay--show {
      display: block;
      top: 0;
      visibility: visible;
      opacity: 1;
    }
}