@font-face {
    font-family: BiformWebRegular;
    src: url("../fonts/biform/biform_regular.woff2") format("woff2"),url("../fonts/biform/biform_regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

:root {
    --white: #fff;
    --f1f1f1: #f1f1f1;
    --light-gray: #d9d9d9;
    --gray: #596a73;
    --dark-gray: #22292d;
    --blue: #44b7db;
    --blue-hover: #00c1fe;
    --cl-white: var(--white);
    --cl-black: var(--dark-gray);
    --cl-gray-100: var(--f1f1f1);
    --cl-gray-200: var(--light-gray);
    --cl-gray-300: var(--gray);
    --cl-gray-400: #4b5a62;
    --cl-gray-800: #2c3439;
    --cl-red: #ff0000;
    --cl-green: #00ff00;
    --cl-blue: var(--blue);
    --cl-blue-hover: var(--blue-hover);
    --cl-blue-rgb: 68,183,219;
    --bg: var(--cl-white);
    --bg-light: var(--cl-gray-100);
    --bg-gray: var(--cl-gray-200);
    --bg-dark-gray: var(--cl-gray-300);
    --text: var(--cl-black);
    --text-light: var(--cl-gray-300);
    --primary: var(--cl-blue);
    --primary-hover: var(--cl-blue-hover);
    --primary-active: var(--cl-blue-hover);
    --bg-disabled: var(--cl-gray-100);
    --text-disabled: var(--cl-gray-200);
    --disabled: var(--cl-gray-200);
    --inverted: var(--cl-white);
    --error: var(--cl-red);
    --placeholder: var(--cl-gray-300);
    --border-color: var(--cl-black);
    --border-color-light: var(--cl-gray-200);
    --border-td: var(--cl-gray-100);
    --border-th: var(--cl-gray-300);
    --sidegap: 1.4em;
    --sidegap-n: calc(-1 * var(--sidegap));
    --header-height: 7.8em;
}

@media (min-width:480px) {
    :root {
        --sidegap: 2.4em;
    }
}

@media (min-width:768px) {
    :root {
        --sidegap: 3em;
    }
}

@media (min-width:1280px) {
    :root {
        --sidegap: 4em;
        --header-height: 9.8em;
    }
}

a, a:visited {
    color: var(--link-color,var(--primary));
    -webkit-text-decoration: var(--link-td,underline);
    text-decoration: var(--link-td,underline);
    transition: color .3s;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.15em;
}
    a:hover {
        color: var(--link-color-hover,var(--primary-hover));
        -webkit-text-decoration: var(--link-td-hover,underline);
        text-decoration: var(--link-td-hover,underline);
    }

.header {
    font-size: calc(16px * 0.625);
    font-family: BiformWebRegular, sans-serif;

    --link-td: none;
    --link-td-hover: none;
    position: fixed;
    z-index: 42;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    padding: .8em 0;
    box-sizing: border-box;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em 12.5em;
    flex-wrap: wrap;
}

@media (max-width:1439.98px) {
    .header__inner {
        gap: 1em 2em;
    }
}

.header__logo {
    flex-shrink: 0;
}

.header__logo-img {
    height: auto;
}

@media (max-width:1279.98px) {
    .header__logo-img {
        width: 10em;
        width: clamp(9em,13vw,18em);
    }
}

@media (max-width:767.98px) {
    .header__logo-img {
        width: 12em;
    }
}

.header__account {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: .2em 2em;
}

@media (max-width:767.98px) {
    .header__account {
        flex-direction: row-reverse;
        align-items: baseline;
        flex-wrap: wrap;
    }
}

.header__account-login, .header__account-reg {
    color: var(--link-color,var(--primary));
    transition: color .3s;
}

    .header__account-login:hover, .header__account-reg:hover {
        color: var(--link-color-hover,var(--primary-hover));
    }

.header__account-login {
    --link-color: var(--text);
}

@media (max-width:767.98px) {
    .header__account-login, .header__account-reg {
        font-size: 1.4em;
        font-size: clamp(1.4em, 1.4vw, 1.8em);
        line-height: 1.279;
    }
}

.nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

@media (max-width:1439.98px) {
    .nav {
        justify-content: center;
    }
}

@media (max-width:767.98px) {
    .nav {
        order: 3;
        width: 100%;
        flex: auto;
        justify-content: start;
    }
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .2em .96em;
}

.nav__item {
    display: flex;
    position: relative;
}

@media (max-width:479.98px) {
    .nav__item_ni {
        display: none;
    }
}

.nav__item:not(:last-child)::before {
    content: "";
    position: absolute;
    display: block;
    right: -.52em;
    top: 50%;
    transform: translate(0,-65%);
    width: 2px;
    height: .88em;
    background-color: var(--primary);
}

.nav__link {
    white-space: nowrap;
    --link-color: var(--text);
}

    .nav__link.m-active, .nav__link.m-current {
        --link-color: var(--primary);
    }

.nav__list {
    font-weight: 400;
    font-size: 1em;
    font-size: clamp(1.2em, 1.8vw, 2.5em);
    line-height: 1.139;
    margin: 0;
}

@media (min-width:1280px) {
    .nav__list {
        font-size: 2.5em;
    }
}

.configurator__tab, .configurator__tabtrigger, .footer, .form__top, .header, .hero, .m-inverted, .message, .newplan, .popup__head, .serverslist__item {
    background-color: var(--bg);
    color: var(--text);
    --inverted: var(--cl-black);
    --text: var(--cl-white);
    --bg: var(--cl-black);
}

.inside-wrapper, .inside-wrapper-xl {
    width: 100%;
    position: relative;
    margin: 0 auto;
    max-width: calc(107.2em + var(--sidegap) * 2);
    padding: 0 var(--sidegap);
    box-sizing: border-box;
}

.inside-wrapper-xl {
    max-width: 190em;
}

.site-content {
    margin-top: var(--header-height);
}