@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
/*noinspection DuplicatedCode*/
:root {
    scroll-behavior: smooth;

    --main-color: #5f405e;
    --main-size: 2em;
    --main-align: left;

    --btn-color: #e2e5fc;
    --btn-border: 1px solid #C6CCFB;

    --orange-color: #FEE6C6B5;
    --orange-border: 1px solid #ffd092;

    --green-text: #fff;
    --green-color: #28a745;
    --green-border: 1px solid #28a745;

    --container-wrapper: 1240px;

    --main-margin: 3.5rem 1rem auto 2rem;

    --border: 1px solid lightsteelblue;

    --form-border: 1px solid #5F405E33;
    --form-template: repeat(2, 1fr);
    --form-margin: 2em;

    --fade-margin: 1em 0;

    --index-btn-color: aliceblue;
    --buttons-template: repeat(4, 1fr);
    --buttons-a-size: 16px;

    --tariff-template: 2fr .2fr 2fr 3fr;
    --name-index: repeat(2, 1fr);
    --name-index-gap: 0 1em;
    --index-data-title: -50%;
    --data-title: 100%;

    --provider-template: 4fr 5fr 2fr;
    --provider-data-title: -90%;
}
body {
    margin: 0;
    font-family: "Manrope", serif;
    overflow-x: scroll;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
input, select, textarea {
    font-family: "Open Sans", sans-serif;
}
body, a {
    color: var(--main-color);
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
hr {
    border: none;
    height: 1px;
    background: var(--btn-color);
    margin: 1.4em;
}

.conteiner {
    max-width: var(--container-wrapper);
    width: 100%;
    min-width: 900px;
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
    .common, .header {
        border-left: var(--border);
        border-right: var(--border);
        border-bottom: var(--border);
        display: grid;
    }
    .header {
        border-top: var(--border);
        grid-template-columns: 14em auto;
        position: relative;
        .logo {
            display: block;
            margin: 1em 2em;
            background-image: url('../images/IndexVPS.png');
            background-repeat: no-repeat;
            background-size: 10em;
            height: 10em;
            width: auto;
        }
        .main {
            margin: var(--main-margin);
            text-align: var(--main-align);
            h1 {
                font-family: "Canela Text", serif;
                font-size: var(--main-size);
                font-weight: normal;
            }
            .how {
                margin-top: 1em;
                display: inline-block;
                cursor: pointer;
                font-size: var(--buttons-a-size);
            }
            .more {
                position: relative;
                a {
                    width: fit-content;
                    background-color: var(--index-btn-color);
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
            .h2 {
                font-size: 1.2em;
                display: block;
                font-weight: bold;
            }
        }
        .lang {
            position: absolute;
            top: 0;
            right: 0;
            .select {
                position: relative;
                display: inline-block;
                cursor: pointer;
                text-decoration: none;
                line-height: 3;
                padding: 0 1em;
                .caret {
                    display: inline-block;
                    margin-left: 5px;
                    vertical-align: middle;
                    border-top: 4px dashed;
                    border-right: 4px solid transparent;
                    border-left: 4px solid transparent;
                }
                .another {
                    display: none;
                }
            }
            .select:hover, .select:focus {
                .another {
                    position: absolute;
                    display: block;
                    width: -webkit-fill-available;
                    background-color: white;
                    margin-left: -1em;
                    padding: 0 2.4em;
                    border-radius: 0 0 8px 8px;
                    border-top: 1px solid lightgrey;
                }
                .another:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .common {
        grid-template-columns: 14em auto;
        .options, .index {
            padding: 1rem;
        }
        .options {
            border-right: var(--border);
            .params {
                font-size: x-large;
                font-weight: 500;
                text-align: center;
            }
            .form {
                label.checkbox {
                    display: inline-block;
                    margin-left: 0;
                    input[type="checkbox"] {
                        margin: .7em 1em -2px auto;
                        appearance: none;
                        width: 1.5em;
                        height: 1.5em;
                        border-radius: 0.5em;
                        border: 2px solid var(--main-color);
                        transition: border .1s ease-out;
                        cursor: pointer;
                    }
                    input[type="checkbox"]:checked {
                        background: url("../images/check.svg") center center / 1.5em auto no-repeat rgba(255, 255, 255, 0);
                    }
                }
                label.checkbox:hover {
                    cursor: pointer;
                }
            }
        }
        .index {
            position: relative;
            .buttons {
                display: grid;
                grid-template-columns: var(--buttons-template);
                gap: 1em;
                a {
                    background-color: var(--index-btn-color);
                    display: inline-block;
                    text-align: center;
                    font-size: var(--buttons-a-size);
                }
                a.active {
                    background-color: var(--btn-color);
                }
            }
            .notice {
                margin: 3px 0;
                -webkit-animation: cssAnimation 10s ease-in;
                animation: cssAnimation 10s ease-in;
                -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
                -moz-animation-fill-mode: forwards;    /* FF 5+ */
                -o-animation-fill-mode: forwards;      /* Not implemented yet */
                animation-fill-mode: forwards;         /* When the spec is finished */
            }
            span {
                display: block;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                padding: .45rem 1.5rem;
                border-radius: 0.8em;
                -webkit-animation: Hide 10s forwards;
                animation: Hide 10s forwards;
            }
            .error {
                background-color: gold;
                border: 1px solid goldenrod;
            }
            .warning, .form input[type="submit"]:hover, .form button.result:hover {
                background-color: oldlace;
                border: 1px solid orange;
            }
            .success {
                background-color: palegreen;
                border: 1px solid limegreen;
            }
            .basic {
                margin: 2em 1em 1em;
                ul, ol {
                    margin-left: 3em;
                }
                h2, h3, h4 {
                    margin: 1em auto 0.5em 1.5em;
                    font-family: "Canela Text", serif;
                    font-weight: normal;
                }
                h2 {
                    font-size: 1.8em;
                }
                h3, .vps-header {
                    font-size: 1.6em;
                }
                h4 {
                    font-size: 1.4em;
                }
                p {
                    text-indent: 1.5em;
                    font-size: 16px;
                }
                p + p, p + ol {
                    margin-top: 0.6em;
                }
                ul + p, ol + p {
                    margin-top: 1.2em;
                }
                p.center {
                    text-align: center;
                    margin-right: 10%;
                }
                .faq {
                    i.fa-sharp {
                        float: right;
                        padding-top: 0.5em;
                    }
                    h2, h4, .answer_container {
                        cursor: pointer;
                    }
                    h2:hover, h2:hover {
                        text-decoration: underline;
                    }
                    .answer_container {
                        display: none;
                        .answer ul {
                            line-height: 2;
                        }
                    }
                }
                .h4 {
                    font-size: 1.4em;
                    text-align: center;
                    margin-top: 1.5em;
                    margin-bottom: 1.2em;
                }
                form {
                    margin-left: var(--form-margin);
                    margin-right: var(--form-margin);
                    .form {
                        display: grid;
                        grid-template-columns: var(--form-template);
                        gap: 1em 2em;
                        input {
                            text-align: center;
                            padding: 0.6em 0;
                            color: var(--main-color);
                        }
                        input[type="text"], input[name="pass"]:focus, input::placeholder, textarea::placeholder {
                            font-family: Menlo, sans-serif;
                        }
                        input[type="file"] {
                            padding: 0;
                        }
                        input[name="pass"] {
                            font-family: 'password', serif;
                        }
                        input[type="checkbox"] {
                            margin: auto 1.5em -3px var(--form-margin);
                            appearance: none;
                            width: 1.5em;
                            height: 1.5em;
                            border-radius: 0.5em;
                            border: 2px solid var(--main-color);
                            transition: border .1s ease-out;
                        }
                        input[type="checkbox"]:checked {
                            background: url("../images/check.svg") center center / 1.5em auto no-repeat rgba(255, 255, 255, 0);
                        }
                        label {
                            line-height: 35px;
                        }
                        label:hover {
                            cursor: pointer;
                        }
                    }
                }
                .vps-index {
                    cursor: pointer;
                    position: fixed;
                    top: 8%;
                    left: 24%;
                    width: 64%;
                    height: auto;
                    padding: 16px;
                    border: 16px solid orange;
                    background-color: white;
                    z-index: 1002;
                    overflow: auto;
                    .vps-header {
                        text-align: center;
                        font-family: "Canela Text", serif;
                        margin: .5em auto 1em;
                    }
                    .vps-tariff {
                        font-family: "Canela Text", serif;
                        font-size: 1.2em;
                        line-height: 1.8;
                        margin-left: 3em;
                        margin-bottom: .7em;
                    }
                    .form {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 1em 2em;
                        padding: .5em 0;
                        text-align: center;
                        border: 1px solid transparent;
                        border-radius: 0.8em;
                    }
                    .form:hover {
                        border: 1px solid orange;
                    }
                }
                .black_overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: black;
                    z-index: 1001;
                    -moz-opacity: 0.8;
                    opacity: .80;
                    filter: alpha(opacity=80);
                }
            }
            .basic.page {
                line-height: 1.8;
            }
            .basic.full {
                margin: 0;
            }
            .tariffs, .providers {
                margin-top: 1em;
                .tariff, .provider {
                    border: var(--orange-border);
                    border-radius: 0.8em;
                    display: grid;
                    gap: 1em 2em;
                    padding: 1em;
                    img {
                        width: 100%;
                        height: auto;
                    }
                    [data-title]:hover:after {
                        opacity: 1;
                        transition: all 0.1s ease 0.5s;
                        visibility: visible;
                    }
                    [data-title]:after {
                        content: attr(data-title);
                        position: absolute;
                        bottom: -2em;
                        left: var(--data-title);
                        padding: 4px 10px;
                        font-size: 16px;
                        white-space: nowrap;
                        -moz-border-radius: 5px;
                        -webkit-border-radius: 5px;
                        border-radius: 5px;
                        color: var(--main-color);
                        -moz-box-shadow: 0 0 4px #222;
                        -webkit-box-shadow: 0 0 4px #222;
                        box-shadow: 0 0 4px #222;
                        background: var(--btn-color);
                        opacity: 0;
                        z-index: 99999;
                        visibility: hidden;
                    }
                    [data-title] {
                        position: relative;
                    }
                }
                .clickable-new, .clickable-row {
                    cursor: pointer;
                }
                #add {
                    display: none;
                    .form.full {
                        grid-template-columns: 1fr;
                    }
                }
                img {
                    border-radius: 0.5em;
                }
            }
            .tariffs {
                h2 {
                    text-align: center;
                }
                .tariff {
                    grid-template-columns: var(--tariff-template);
                    a {
                        margin-top: 0.5em;
                        display: block;
                    }
                    .cf {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        .desc {
                            line-height: 1.5;
                            text-align: left;
                        }
                    }
                    .name-index {
                        display: grid;
                        grid-template-columns: var(--name-index);
                        gap: var(--name-index-gap);
                        text-align: center;
                        .name {
                            .normal {
                                margin-top: 0.2em;
                            }
                            .bold {
                                margin: .2em 0 .5em;
                                font-size: 1.2em;
                                font-weight: bold;
                            }
                        }
                        .index {
                            margin-top: 1.4em;
                            div {
                                font-size: 1.5em;
                                font-weight: bold;
                                color: orange;
                                border-radius: 0.8em;
                                border: var(--border);
                                cursor: pointer;
                                padding: .5em;
                            }
                            [data-title]:after {
                                left: var(--index-data-title);
                                bottom: -3em;
                            }
                        }
                    }
                }
                .tariff + .tariff {
                    margin-top: .5em;
                }
                .tariff.plan {
                    background-color: aliceblue;
                }
                .advertisement {
                    text-align: right;
                    .img {
                        display: flex;
                        justify-content: center;
                        img {
                            border-radius: 0.5em;
                            height: auto;
                            max-width: 100%;
                        }
                    }
                    a {
                        display: inline-block;
                        text-align: center;
                        font-size: var(--buttons-a-size);
                        cursor: pointer;
                        color: silver;
                        font-weight: 500;
                        padding-right: .5em;
                    }
                }
                #add {
                    margin-top: 0;
                    .rules {
                        padding: 0 3em;
                    }
                }
                #add + .tariff, .tariff + .advertisement {
                    margin-top: .5em;
                }
            }
            .providers {
                .provider {
                    grid-template-columns: var(--provider-template);
                    .desc {
                        line-height: 1.5;
                        text-align: left;
                        margin-left: 2em;
                        .full {
                            margin-top: 1em;
                            a {
                                cursor: pointer;
                                color: #5861fa;
                            }
                            .vps-index {
                                display: none;
                                .detailed {
                                    padding: 0 2em 2em;
                                    i.fa.fa-xmark {
                                        position: absolute;
                                        top: .5em;
                                        right: .2em;
                                        font-size: 28px;
                                        color: #ff0800;
                                    }
                                    i.fa.fa-xmark:hover {
                                        top: .45em;
                                        right: .15em;
                                        font-size: 30px;
                                    }
                                }
                                .vps-header {
                                    margin-bottom: .7em;
                                }
                                .form {
                                    margin: 0.3em 0;
                                }
                                .form + p {
                                    margin-top: 1.5em;
                                }
                            }
                        }
                    }
                    .place-center {
                        place-content: center;
                        text-align: center;
                    }
                    .index {
                        font-size: 1.5em;
                        font-weight: bold;
                        color: orange;
                        border-radius: 0.8em;
                        border: var(--border);
                        cursor: pointer;
                        padding: .5em 1em;
                        width: 5em;
                        text-align: center;
                        margin-left: auto;
                        margin-right: auto;
                        [data-title]:after {
                            left: var(--provider-data-title);
                            bottom: -3em;
                        }
                    }
                }
                .provider.discount {
                    grid-template-columns: 3fr 6fr;
                    .place-center {
                        div {
                            text-align: left;
                        }
                    }
                }
                .provider + .provider {
                    margin-top: .5em;
                }
                .add {
                    text-align: right;
                    margin-bottom: .5em;
                    a {
                        display: inline-block;
                        background-color: var(--btn-color);
                        border: var(--border);
                        border-radius: .8em;
                        padding: .5em 1em;
                        text-align: center;
                        font-size: var(--buttons-a-size);
                        cursor: pointer;
                    }
                }
                #add {
                    text-align: center;
                    .form {
                        label {
                            line-height: normal;
                            text-align: left;
                            margin-bottom: -.5em;
                        }
                    }
                }
            }
            .pages {
                margin: 2em .5em .5em .5em;
                font-size: var(--buttons-a-size);
                a, div {
                    position: relative;
                    display: initial;
                    padding: .2em .7em;
                    border-radius: 8px;
                    margin-left: .5em;
                }
                a {
                    border: var(--btn-border);
                }
                div {
                    border: var(--orange-border);
                }
                a:hover {
                    background-color: var(--btn-color);
                }
            }
        }
        .center {
            text-align: center;
        }
        .form {
            margin: 1em 0;
            label {
                margin-left: 1.3em;
            }
            input[type="submit"], button.result {
                background-color: var(--btn-color);
                font-size: var(--buttons-a-size);
            }
            input[type="submit"] {
                background-color: var(--btn-color);
                border: var(--btn-border);
            }
            button.result {
                background-color: var(--index-btn-color);
                border: 1px solid orange;
                padding: 0.7em 1.5em;
                margin-top: 1em;
            }
            input[type="submit"]:hover, button:hover {
                text-decoration: underline;
            }
            select {
                margin-top: 0.2em;
                -webkit-appearance: none;
                background: url(../images/select.svg) center right 6px no-repeat var(--btn-color);
            }
            button#reset {
                background-color: #fff;
                margin-top: 0.5em;
            }
            input[type="text"], select, button#reset, textarea {
                width: 100%;
                font-size: 14px;
            }
            textarea {
                color: var(--main-color);
                padding: 0.7em 1.5em;
                height: auto;
                place-content: center;
            }
            textarea:active, textarea:focus {
                height: 10em;
                place-content: normal;
            }
            textarea::placeholder {
                text-align: center;
            }
            input[type="file"] {
                background-color: var(--orange-color);
                border: var(--orange-border);
            }
            input[type="file"], input[type="file"]::file-selector-button {
                font-size: 14px;
                cursor: pointer;
            }
            input[type="file"]::file-selector-button {
                content: "Logo";
                color: var(--main-color);
                background-color: var(--btn-color);
                border: var(--border);
                padding: 0 3em;
                line-height: 35px;
                border-radius: .8em 0 0 .8em;
                margin: -1px;
            }
        }
        .form select, .form button, .form input[type="submit"], .index .buttons a {
            cursor: pointer;
            font-weight: 500;
            color: var(--main-color);
        }
    }
    .header .main .more a, .common .form select, .common .form button, .index .buttons a, .common .form input[type="text"], .common .form input[type="submit"], .common .form textarea, .common .form input[type="file"] {
        border-radius: 0.8em;
        border: var(--border);
    }
    .header .main .more a, .common .form select {
        padding: 0.5em 1.5em;
    }
    .common .form button#reset, .index .buttons a {
        padding: 0.5em;
    }
    i.fa, i.fa-regular {
        margin-right: 0.5em;
    }
    .hide {
        opacity: 0;
        height: 0;
    }
    .fade-in {
        opacity: 1;
        transition: opacity 1.8s ease-in;
    }
    .fade-out {
        opacity: 0;
        transition: opacity 1.8s ease;
        height: 0;
        animation: shrink 1.8s ease-in;
        -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
        -moz-animation-fill-mode: forwards;    /* FF 5+ */
        -o-animation-fill-mode: forwards;      /* Not implemented yet */
        animation-fill-mode: forwards;         /* When the spec is finished */
    }
    .fade-in, .fade-out {
        background-color: var(--btn-color);
        border: var(--border);
        text-align: left;
        border-radius: 0.8em;
        margin: var(--fade-margin);
        padding: 1em 1.5em 0.5em;
        h2 {
            font-size: 1.2em;
        }
        ul {
            margin: 1em auto 0.5em 2em;
        }
        li {
            padding: 0.3em;
            font-size: 14px;
        }
    }
    .fade-in, .fade-out, .common .form {
        position: relative;
    }
    .footer {
        padding: 8px 0;
        margin-top: .5em;
    }
    .footer, .microtime {
        text-align: center;
    }
    .microtime {
        margin: 0.5em auto 1.5em;
        font-size: 14px;
        color: darkgrey;
    }
}

#top {
    float: right;
    margin-top: -5em;
    margin-right: 3%;
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    opacity: 0.5;
    display: none;
    cursor: pointer;
}
#top:hover {
    opacity: 1;
}

@media (min-width: 1200px) and (max-width: 1299px) {
    :root {
        --container-wrapper: 1140px;
        --main-margin: 3rem 1rem auto 2rem;
        --buttons-template: repeat(3, 1fr);
        --tariff-template: 2fr .2fr 2fr 2.5fr;
        --name-index: repeat(2, 1fr);
        --name-index-gap: 0;
        --index-data-title: -75%;
        --data-title: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --container-wrapper: 960px;
        --main-margin: 2.7rem 1rem auto 2rem;
        --buttons-template: repeat(3, 1fr);
        --tariff-template: 2fr 0 2.2fr 1.6fr;
        --name-index: 1fr;
        --name-index-gap: 0;
        --index-data-title: -60%;
        --data-title: 100%;
        --provider-template: 4fr 8fr auto;
        --provider-data-title: -120%;
    }
    .conteiner .common .index {
        .tariffs .tariff .name-index {
            .index {
                margin-top: 0;
            }
            .name {
                .normal, :nth-child(1 of .bold) {
                    display: none;
                }
                .bold {
                    margin-bottom: 0;
                }
            }
        }
        .providers .provider {
            .place-center {
                .index {
                    padding: .5em;
                    width: 3.4em;
                }
                img {
                    margin-bottom: 1em;
                }
            }
            .desc {
                margin-left: 0;
            }
        }
    }
}
@media (max-width: 991px) {
    :root {
        --container-wrapper: 95%;
        --main-margin: 2.3rem 1rem auto 2rem;
        --buttons-template: repeat(2, 1fr);
        --buttons-a-size: 20px;
        --form-template: repeat(1, 1fr);
        --main-size: 2.2em;
        --tariff-template: 2fr 0 2.4fr 1.6fr;
        --name-index: 1fr;
        --name-index-gap: 0;
        --index-data-title: -105%;
        --data-title: 100%;
        --provider-template: 3fr 8fr auto;
        --provider-data-title: -150%;
    }
    input::placeholder, textarea::placeholder {
        color: grey;
        font-size: 16px;
    }
    .conteiner .header .main {
        ul + .more {
            margin-top: 3em;
        }
    }
    .conteiner .common .index {
        .tariffs .tariff .name-index {
            .index {
                margin-top: 0;
            }
            .name {
                .normal, :nth-child(1 of .bold) {
                    display: none;
                }
                .bold {
                    margin-bottom: 0;
                }
            }
        }
        .basic {
            .vps-index {
                top: 4%;
                left: 4%;
                width: 92%;
            }
            .providers .provider {
                .place-center {
                    .index {
                        padding: .5em;
                        width: 3.4em;
                    }

                    img {
                        margin-bottom: 1em;
                    }
                }

                .desc {
                    margin-left: 0;

                    .full .vps-index .detailed {
                        padding: 0 1em 1em;
                    }
                }
            }
        }
    }
}

@keyframes shrink {
    from {
        height: auto;
    }
    to {
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
    }
}
@-webkit-keyframes shrink {
    from {
        height: auto;
    }
    to {
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
    }
}

@keyframes cssAnimation {
    from    {opacity: 1;}
    to      {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    from    {opacity: 1;}
    to      {opacity: 0;}
}

@keyframes Hide {
    from    {display: block;}
    to      {display: none;}
}
@-webkit-keyframes Hide {
    from    {display: block;}
    to      {display: none;}
}

@font-face {
    font-family: 'password';
    src: url('../fonts/password.ttf');
}