:root
{
    /* animation-duration */
    --animation-duration-fade-in-setup-div: 0.4s;
    --animation-duration-fade-in-square: 0.5s;
    --animation-duration-wiggle-usage-value: 0.6s;
    --animation-duration-wiggle-first-control: 1s;
    --animation-duration-wiggle-second-control: 1s;
    --animation-duration-fade-in-triangle: 0.5s;
    --animation-duration-fade-in-error-div: 0.8s;

    /* animation-delay */
    --animation-delay-chart-triangle-grid-div: 1s;
    --animation-delay-usage-value-first: 0.2s;
    --animation-delay-usage-value-second: 0.4s;
    --animation-delay-usage-value-third: 0.6s;

    /* white */
    --white: rgba(255, 255, 255, 1);
    --white-opacity-40: rgba(255, 255, 255, 0.4);
    --white-opacity-70: rgba(255, 255, 255, 0.7);
    --white-opacity-90: rgba(255, 255, 255, 0.9);

    /* black */
    --black: rgba(0, 0, 0, 1);
    --black-opacity-10: rgba(0, 0, 0, 0.1);

    /* grey */
    --grey-light: rgba(188, 188, 188, 1);
    --grey: rgba(121, 121, 121, 1);
    --grey-opacity-90: rgba(121, 121, 121, 0.9);
    --grey-opacity-70: rgba(121, 121, 121, 0.7);
    --grey-dimmed: rgba(90, 90, 90, 1);
    --grey-dark: rgba(60, 60, 60, 1);

    /* blue */
    --blue-light: rgba(230, 232, 254, 1);
    --blue: rgba(89, 101, 249, 1);

    /* red */
    --red-light: rgba(249, 226, 226, 1);
    --red: rgba(255, 89, 89, 1);

    /* green */
    --green-light: rgba(212, 242, 225, 1);
    --green: rgba(8, 193, 141, 1);

    /* purple */
    --purple-light: rgba(228, 227, 239, 1);

    /* top */
    --top-logo: 2.188rem;
    --top-logo-description: 5.3rem;
    --top-clouds-first: 2.875rem;
    --top-clouds-second: 2.875rem;
    --top-main-settings-input: 0.125rem;
    --top-main-settings-underline: 0.313rem;
    --top-main-settings-select: 0.938rem;
    --top-label-additional-settings: 2.3rem;
    --top-additional-settings: 1rem;
    --top-theme-buttons-input: 1.938rem;
    --top-button-squares-grid: 0.222rem;
    --top-port: 2.75rem;
    --top-header: 1.5rem;
    --top-label-hw-info: 0.562rem;
    --top-card-body-squares-grid: 0.813rem;
    --top-info-label: 4.188rem;
    --top-inner-dot: 0.375rem;
    --top-detailed-hw-info-div: 1.168rem;
    --top-controls-img: 0.75rem;
    --top-announcement: 3.813rem;
    --top-contacts-label: 1.5rem;
    --top-contacts-description-first: 3.125rem;
    --top-contacts-description-second: 3.813rem;
    --top-contacts-links-a-img: 4.906rem;
    --top-uptime-rectangle-grid: 1.925rem;
    --top-chart-label: 1.5rem;
    --top-chart-triangle-grid: 0.5rem;
    --top-chart-rectangle-grid: 1.906rem;
    --top-chart-container: 3.375rem;
    --top-code: 1.813rem;
    --top-title: 3.5rem;
    --top-explanation: 6.688rem;

    /* bottom */
    --bottom-form-squares-grid: 0.813rem;
    --bottom-submit: 1.125rem;
    --bottom-usage: 4.625rem;
    --bottom-hw-usage-div: 0.25rem;
    --bottom-card-footer-dots-grid-div: -0.75rem;
    --bottom-uptime-squares-grid: 0.813rem;
    --bottom-values-grid-div-p: 0.25rem;
    --bottom-project-version: 1.25rem;
    --bottom-error-div: 7.5rem;
    --bottom-advice: 0.563rem;

    /* left */
    --left-clouds-second: 12.875rem;
    --left-form-squares-grid: 9.25rem;
    --left-main-settings: 1.5rem;
    --left-button-squares-grid-first: 1.5rem;
    --left-button-squares-grid-second: 19.688rem;
    --left-theme-buttons-first: 1.5rem;
    --left-port: 1.5rem;
    --left-submit: 6.563rem;
    --left-header: 1.5rem;
    --left-label-hw-info: 4.375rem;
    --left-usage: 1.5rem;
    --card-footer-dots-grid-first: 2.906rem;
    --card-footer-dots-grid-second: 10.187rem;
    --card-footer-dots-grid-third: 17.468rem;
    --left-inner-dot: 0.375rem;
    --left-detailed-hw-info-first: 0.822rem;
    --left-detailed-hw-info-second: 8.104rem;
    --left-detailed-hw-info-third: 15.385rem;
    --left-dividers-first: 7.313rem;
    --left-dividers-second: 14.563rem;
    --left-controls-first: 0.75rem;
    --left-controls-second: 19.25rem;
    --left-contacts-links-a-first: 8.075rem;
    --left-contacts-links-a-second: 11.7rem;
    --left-uptime-squares-grid: 9.25rem;
    --left-uptime-rectangle-grid: 2.23rem;
    --left-chart-label: 1.5rem;
    --left-chart-triangle-grid-first: 34.375rem;
    --left-chart-triangle-grid-second: 38.25rem;
    --left-chart-triangle-grid-third: 42.125rem;
    --left-chart-rectangle-grid-first: 33.25rem;
    --left-chart-rectangle-grid-second: 37.125rem;
    --left-chart-rectangle-grid-third: 41rem;
    --left-chart-container: 1.5rem;
    --left-error-div: 13.25rem;
    --left-code: 1.813rem;
    --left-title: 1.813rem;
    --left-explanation: 1.813rem;

    /* margin-right */
    --margin-right-form-squares-grid-div: 0.488rem;
    --margin-right-theme-buttons-first: 1.938rem;
    --margin-right-usage-value: 2.937rem;
    --margin-right-uptime-squares-grid-div: 0.488rem;
    --margin-right-values-grid-div: 0.125rem;
    --margin-right-labels-grid-div: 0.125rem;

    /* margin-bottom */
    --margin-bottom-label-main-settings: 0.438rem;
    --margin-bottom-card: 1.875rem;
    --margin-bottom-card-body-squares-grid-div: 0.75rem;
    --margin-bottom-labels-grid-div: 0.313rem;

    /* height */
    --height-body: 100%;
    --height-setup: 26.706rem;
    --height-setup-div: 26.706rem;
    --height-clouds: 8.281rem;
    --height-clouds-img: 5.438rem;
    --height-background: 8.281rem;
    --height-form: 18.425rem;
    --height-form-squares-grid-div: 0.625rem;
    --height-main-settings: 1.875rem;
    --height-main-settings-underline: 0.313rem;
    --height-main-settings-select: 1.875rem;
    --height-theme-buttons-input: 2.188rem;
    --height-button-squares-grid-div: 0.625rem;
    --height-port: 3.125rem;
    --height-submit: 1.875rem;
    --height-index-xl: 35.031rem;
    --height-index-lg: 53.438rem;
    --height-index-md: 53.438rem;
    --height-hw-logo: 3.75rem;
    --height-usage: 5.313rem;
    --height-card-body-squares-grid-div: 0.625rem;
    --height-main-hw-info: 100%;
    --height-usage-value-span: 5.8rem;
    --height-usage-underline: 0.313rem;
    --height-footer: 3.125rem;
    --height-card-footer-dots-grid-div: 1.5rem;
    --height-inner-dot: 0.75rem;
    --height-detailed-hw-info-div: 1.063rem;
    --height-dividers-div: 3.125rem;
    --height-controls: 2.625rem;
    --height-controls-img: 1.875rem;
    --height-contacts-links-a-img: 2.125rem;
    --height-uptime: 8.27rem;
    --height-uptime-squares-grid-div: 0.625rem;
    --height-values-grid-div: 3.188rem;
    --height-labels-grid-div: 0.813rem;
    --height-chart-rectangle-grid-div: 0.625rem;
    --height-chart-container: 11.688rem;
    --height-error: 25.75rem;
    --height-error-img: 19.313rem;
    --height-error-div: 12.125rem;

    /* max-height */
    --max-height-card: 16.562rem;

    /* min-height */
    --min-height-card: 16.562rem;

    /* width */
    --width-body: 100%;
    --width-dhtmlx-message-area: 21.875rem;
    --width-setup-div: 21.875rem;
    --width-logo: 21.875rem;
    --width-logo-description: 21.875rem;
    --width-clouds: 21.875rem;
    --width-clouds-img: 4.375rem;
    --width-background: 21.875rem;
    --width-form: 21.875rem;
    --width-form-squares-grid-div: 0.625rem;
    --width-main-settings: 18.875rem;
    --width-main-settings-input: 18.875rem;
    --width-main-settings-underline: 18.875rem;
    --width-main-settings-select: 18.875rem;
    --width-theme-buttons-input: 9.063rem;
    --width-button-squares-grid-div: 0.625rem;
    --width-port: 18.875rem;
    --width-submit: 8.75rem;
    --width-hw-logo: 3.75rem;
    --width-usage: 18.875rem;
    --width-card-body-squares-grid-div: 0.625rem;
    --width-usage-value-span: 2.224rem;
    --width-info-label: 9.5rem;
    --width-usage-underline: 9.5rem;
    --width-footer: 100%;
    --width-card-footer-dots-grid-div: 1.5rem;
    --width-inner-dot: 0.75rem;
    --width-detailed-hw-info-div: 5.625rem;
    --width-dividers-div: 0.063rem;
    --width-controls: 100%;
    --width-controls-img: 1.875rem;
    --width-announcement: 21.875rem;
    --width-contacts-label: 21.875rem;
    --width-contacts-description-div: 21.875rem;
    --width-contacts-links-a-img: 2.125rem;
    --width-uptime: 100%;
    --width-uptime-squares-grid-div: 0.625rem;
    --width-values-grid-div: 3.75rem;
    --width-labels-grid-div: 3.75rem;
    --day-width-values-grid-div: 5rem;
    --day-width-labels-grid-div: 5rem;
    --width-chart-rectangle-grid-div: 3.125rem;
    --width-chart-container: 42.625rem;
    --width-error-img: 19.313rem;
    --width-error-div: 23.875rem;
    --width-advice: 23.875rem;

    /* max-width */
    --max-width-setup: 71.25rem;
    --max-width-index-xl: 71.25rem;
    --max-width-index-lg: 47.5rem;
    --max-width-index-md: 23.75rem;
    --max-width-col-sm-12-col-md-6-col-lg-6-col-xl-4: 23.75rem;
    --max-width-col-lg-12-col-xl-8: 47.5rem;

    /* min-width */
    --min-width-setup: 71.25rem;
    --min-width-index-xl: 71.25rem;
    --min-width-index-lg: 47.5rem;
    --min-width-index-md: 23.75rem;
    --min-width-col-sm-12-col-md-6-col-lg-6-col-xl-4: 23.75rem;
    --min-width-col-lg-12-col-xl-8: 47.5rem;
    --min-width-error: 71.25rem;

    /* border */
    --border-chart-container: 0.063rem;

    /* border-width */
    --border-width-chart-triangle-grid-div: 0.438rem 0.438rem 0rem 0.438rem;

    /* border-radius */
    --border-radius-setup-div: 1.25rem;
    --border-radius-port: 0rem 0rem 0.625rem 0.625rem;
    --border-radius-card: 1.25rem;
    --border-radius-hw-logo: 50%;
    --border-radius-card-footer-dots-grid-div: 50%;
    --border-radius-inner-dot: 50%;
    --border-radius-error-img: 50%;
    --border-radius-controls-img: 50%;
    --border-radius-error-div: 1.25rem;

    /* letter-spacing */
    --letter-spacing-2px: 0.125rem;
    --letter-spacing-5px: 0.313rem;
    --letter-spacing-10px: 0.625rem;

    /* transition */
    --transition-all: color 0.2s, background 0.2s, transform 0.07s, opacity 0.4s;

    /* transform */
    --transform-form-squares-grid-second: scale(1.3);
    --transform-theme-buttons-input-active: scale(0.9);
    --transform-submit-active: scale(0.9);
    --transform-controls-first-active: scale(0.9);
    --transform-controls-second-active: scale(0.9);
    --transform-contacts-links-a-first-active: scale(0.9);
    --transform-contacts-links-a-second-active: scale(0.9);
    --transform-uptime-squares-grid-second: scale(1.3);
    --transform-chart-rectangle-grid-div-active: scale(0.9);

    /* font-family */
    --font-family-roboto: roboto;

    /* font-size */
    --font-size-9pt: 0.563em;
    --font-size-10pt: 0.625em;
    --font-size-11pt: 0.688em;
    --font-size-12pt: 0.750em;
    --font-size-13pt: 0.813em;
    --font-size-14pt: 0.875em;
    --font-size-18pt: 1.125em;
    --font-size-21pt: 1.313em;
    --font-size-31pt: 1.938em;
    --font-size-42pt: 2.625em;
    --font-size-62pt: 3.875em;

    /* font-weight */
    --font-weight-regular: 400;
    --font-weight-bold: 700;


    /* linear-gradient */
    --linear-gradient-form-light: linear-gradient(45deg, var(--blue-light) 0%, var(--red-light) 50%, var(--green-light) 100%);
    --linear-gradient-form-dark: linear-gradient(45deg, var(--grey) 0%, var(--grey-dimmed) 50%, var(--grey) 100%);
    --linear-gradient-uptime-light: linear-gradient(45deg, var(--blue-light) 0%, var(--red-light) 50%, var(--green-light) 100%);
    --linear-gradient-uptime-dark: linear-gradient(45deg, var(--grey) 0%, var(--grey-dimmed) 50%, var(--grey) 100%);


    /* box-shadow */
    --box-shadow-setup-div: 0.000rem 0.313rem 0.625rem 0.000rem;
    --box-shadow-form-squares-grid-div: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-main-settings-underline: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-button-squares-grid-div: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-theme-buttons-input: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-submit: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-card: 0.000rem 0.313rem 0.625rem 0.000rem;
    --box-shadow-uptime-squares-grid-div: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-error-img: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-error-div: 0.000rem 0.313rem 0.625rem 0.000rem;
}

@font-face
{
    font-family: roboto;
    font-weight: 400;
    src: url(/static/fonts/roboto/regular.woff2) format('woff2');
}
@font-face
{
    font-family: roboto;
    font-weight: 700;
    src: url(/static/fonts/roboto/bold.woff2) format('woff2');
}
* {
    font-family: var(--font-family-roboto);
    transition: var(--transition-all);
}

body {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--height-body);
    width: var(--width-body);
    background: var(--background-body);
}

.logo {
    position: absolute;
    top: var(--top-logo);
    z-index: 1;
    width: var(--width-logo);
    text-align: center;
    letter-spacing: var(--letter-spacing-10px);
    font-size: var(--font-size-42pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-logo);
}

.logo-description {
    position: absolute;
    top: var(--top-logo-description);
    z-index: 1;
    width: var(--width-logo-description);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-logo-description);
}

.clouds {
    height: var(--height-clouds);
    width: var(--width-clouds);
    overflow: hidden;
}

.clouds > img {
    position: relative;
    z-index: 1;
    height: var(--height-clouds-img);
    width: var(--width-clouds-img);
}

.clouds > .first {
    top: var(--top-clouds-first);
}

.clouds > .second {
    top: var(--top-clouds-second);
    left: var(--left-clouds-second);
}

.background {
    position: absolute;
    top: 0;
    height: var(--height-background);
    width: var(--width-background);
}


.index {
    margin-top: calc((100vh / 2) - (var(--height-index-xl) / 2));
    max-width: var(--max-width-index-xl);
    min-width: var(--min-width-index-xl);
}

@media only screen and (max-width: 75rem) {
    .index {
        margin-top: calc((100vh / 2) - (var(--height-index-lg) / 2));
        max-width: var(--max-width-index-lg);
        min-width: var(--min-width-index-lg);
    }
}

@media only screen and (max-width: 48rem) {
    .index {
        margin-top: calc((100vh / 2) - (var(--height-index-md) / 2));
        max-width: var(--max-width-index-md);
        min-width: var(--min-width-index-md);
    }

    .sm-hidden {
        visibility: hidden;
    }
}

.col-sm-12.col-md-6.col-lg-6.col-xl-4 {
    max-width: var(--max-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
    min-width: var(--min-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
}

.col-lg-12.col-xl-8 {
    max-width: var(--max-width-col-lg-12-col-xl-8);
    min-width: var(--min-width-col-lg-12-col-xl-8);
}

.card {
    margin-bottom: var(--margin-bottom-card);
    max-height: var(--max-height-card);
    min-height: var(--min-height-card);
    opacity: 0;
    border: none;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    background: var(--background-card);
    box-shadow: var(--box-shadow-card) var(--black-opacity-10);
}

.header {
    position: relative;
    display: flex;
    top: var(--top-header);
    left: var(--left-header);
}

.hw-logo {
    height: var(--height-hw-logo);
    width: var(--width-hw-logo);
    border-radius: var(--border-radius-hw-logo);
}

.hw-logo.first {
    background: var(--background-hw-logo-first);
}

.hw-logo.second {
    background: var(--background-hw-logo-second);
}

.hw-logo.third {
    background: var(--background-hw-logo-third);
}

.label-hw-info {
    position: absolute;
    top: var(--top-label-hw-info);
    left: var(--left-label-hw-info);
}

.hw-type {
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-hw-type);
}

.hw-name {
    font-size: var(--font-size-12pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-hw-name);
}

.usage {
    position: absolute;
    height: var(--height-usage);
    width: var(--width-usage);
    bottom: var(--bottom-usage);
    left: var(--left-usage);
}

.card-body-squares-grid {
    position: absolute;
    top: var(--top-card-body-squares-grid);
}

.card-body-squares-grid > div {
    margin-bottom: var(--margin-bottom-card-body-squares-grid-div);
    height: var(--height-card-body-squares-grid-div);
    width: var(--width-card-body-squares-grid-div);
}

.card-body-squares-grid.first > div {
    background: var(--background-card-body-squares-grid-first-div);
}

.card-body-squares-grid.second > div {
    background: var(--background-card-body-squares-grid-second-div);
}

.card-body-squares-grid.third > div {
    background: var(--background-card-body-squares-grid-third-div);
}

.main-hw-info {
    position: absolute;
    right: 0;
    height: var(--height-main-hw-info);
}

.hw-usage > div {
    position: absolute;
    right: 0;
    bottom: var(--bottom-hw-usage-div);
    font-size: var(--font-size-62pt);
    font-weight: var(--font-weight-bold);
}

.usage-value {
    display: flex;
    margin-right: var(--margin-right-usage-value);
}

.usage-value > span {
    position: relative;
    height: var(--height-usage-value-span);
    width: var(--width-usage-value-span);
    color: var(--color-usage-value-span);
    animation: wiggle-usage-value;
    animation-duration: var(--animation-duration-wiggle-usage-value);
}

.usage-value > .first {
    animation-delay: var(--animation-delay-usage-value-first);
}

.usage-value > .second {
    animation-delay: var(--animation-delay-usage-value-second);
}

.usage-value > .third {
    animation-delay: var(--animation-delay-usage-value-third);
}

.usage-postfix {
    color: var(--color-usage-postfix);
}

.info-label {
    position: relative;
    top: var(--top-info-label);
    width: var(--width-info-label);
    text-align: center;
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-info-label);
    background: transparent;
}

.usage-underline {
    position: absolute;
    right: 0;
    bottom: 0;
    height: var(--height-usage-underline);
    width: var(--width-usage-underline);
}

.usage-underline.first {
    background: var(--background-usage-underline-first);
}

.usage-underline.second {
    background: var(--background-usage-underline-second);
}

.usage-underline.third {
    background: var(--background-usage-underline-third);
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--height-footer);
    width: var(--width-footer);
}

.footer.first {
    background: var(--background-footer-first);
}

.footer.first > .card-footer-dots-grid > div > .inner-dot {
    background: var(--background-footer-first-card-footer-dots-grid-div-inner-dot);
}

.footer.second {
    background: var(--background-footer-second);
}

.footer.second > .card-footer-dots-grid > div > .inner-dot {
    background: var(--background-footer-second-card-footer-dots-grid-div-inner-dot);
}

.footer.third {
    background: var(--background-footer-third);
}

.footer.third > .card-footer-dots-grid > div > .inner-dot {
    background: var(--background-footer-third-card-footer-dots-grid-div-inner-dot);
}

.card-footer-dots-grid {
    position: absolute;
}

.card-footer-dots-grid > div {
    display: inline-block;
    position: absolute;
    bottom: var(--bottom-card-footer-dots-grid-div);
    height: var(--height-card-footer-dots-grid-div);
    width: var(--width-card-footer-dots-grid-div);
    border-radius: var(--border-radius-card-footer-dots-grid-div);
    background: var(--background-card-footer-dots-grid-div);
}

.card-footer-dots-grid > .first {
    left: var(--card-footer-dots-grid-first);
}

.card-footer-dots-grid > .second {
    left: var(--card-footer-dots-grid-second);
}

.card-footer-dots-grid > .third {
    left: var(--card-footer-dots-grid-third);
}

.inner-dot {
    position: absolute;
    top: var(--top-inner-dot);
    left: var(--left-inner-dot);
    height: var(--height-inner-dot);
    width: var(--width-inner-dot);
    border-radius: var(--border-radius-inner-dot);
}

.detailed-hw-info {
    position: absolute;
}

.detailed-hw-info > div {
    display: inline-block;
    position: absolute;
    top: var(--top-detailed-hw-info-div);
    height: var(--height-detailed-hw-info-div);
    width: var(--width-detailed-hw-info-div);
    text-align: center;
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-detailed-hw-info-div);
}

.detailed-hw-info > .first {
    left: var(--left-detailed-hw-info-first);
}

.detailed-hw-info > .second {
    left: var(--left-detailed-hw-info-second);
}

.detailed-hw-info > .third {
    left: var(--left-detailed-hw-info-third);
}

.dividers {
    position: absolute;
}

.dividers > div {
    display: inline-block;
    position: absolute;
    height: var(--height-dividers-div);
    width: var(--width-dividers-div);
    background: var(--background-dividers-div);
}

.dividers > .first {
    left: var(--left-dividers-first);
}

.dividers > .second {
    left: var(--left-dividers-second);
}

.controls {
    position: absolute;
    height: var(--height-controls);
    width: var(--width-controls);
}

.controls > img {
    position: absolute;
    top: var(--top-controls-img);
    z-index: 2;
    height: var(--height-controls-img);
    width: var(--width-controls-img);
    border-radius: var(--border-radius-controls-img);
}

.controls > .first {
    left: var(--left-controls-first);
    opacity: 0.5;
    animation: wiggle-first-control;
    animation-duration: var(--animation-duration-wiggle-first-control);
}

.controls > .second {
    left: var(--left-controls-second);
    animation: wiggle-second-control;
    animation-duration: var(--animation-duration-wiggle-second-control);
}

.controls > .first:active {
    transform: var(--transform-controls-first-active);
}

.controls > .second:active {
    transform: var(--transform-controls-second-active);
}

.pages {
    position: absolute;
}

.pages > div {
    position: absolute;
}

.contacts-label {
    position: absolute;
    top: var(--top-contacts-label);
    z-index: 1;
    width: var(--width-contacts-label);
    text-align: center;
    letter-spacing: var(--letter-spacing-5px);
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-contacts-label);
}

.contacts-description > div {
    position: absolute;
    z-index: 1;
    width: var(--width-contacts-description-div);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-10pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-contacts-description-div);
}

.contacts-description > .first {
    top: var(--top-contacts-description-first);
}

.contacts-description > .second {
    top: var(--top-contacts-description-second);
}

.contacts-links > a > img {
    position: absolute;
    top: var(--top-contacts-links-a-img);
    z-index: 1;
    height: var(--height-contacts-links-a-img);
    width: var(--width-contacts-links-a-img);
}

.contacts-links > a > .first {
    left: var(--left-contacts-links-a-first);
}

.contacts-links > a > .first:active {
    transform: var(--transform-contacts-links-a-first-active);
}

.contacts-links > a > .second {
    left: var(--left-contacts-links-a-second);
}

.contacts-links > a > .second:active {
    transform: var(--transform-contacts-links-a-second-active);
}

.uptime {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--height-uptime);
    width: var(--width-uptime);
    background: var(--background-uptime);
}

.uptime-squares-grid {
    position: relative;
    bottom: var(--bottom-uptime-squares-grid);
    left: var(--left-uptime-squares-grid);
}

.uptime-squares-grid > div {
    display: inline-block;
    margin-right: var(--margin-right-uptime-squares-grid-div);
    height: var(--height-uptime-squares-grid-div);
    width: var(--width-uptime-squares-grid-div);
    box-shadow: var(--box-shadow-uptime-squares-grid-div) var(--black-opacity-10);
}

.uptime-squares-grid > .first {
    background: var(--background-uptime-squares-grid-first);
}

.uptime-squares-grid > .second {
    background: var(--background-uptime-squares-grid-second);
    transform: var(--transform-uptime-squares-grid-second);
}

.uptime-squares-grid > .third {
    background: var(--background-uptime-squares-grid-third);
}

.uptime-rectangle-grid {
    position: absolute;
    top: var(--top-uptime-rectangle-grid);
    left: var(--left-uptime-rectangle-grid);
}

.values-grid > div {
    display: inline-block;
    margin-right: var(--margin-right-values-grid-div);
    height: var(--height-values-grid-div);
    width: var(--width-values-grid-div);
    text-align: center;
    font-size: var(--font-size-42pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-values-grid-div);
    background: var(--background-values-grid-div);
    border-radius: 2px
}

.values-grid > div:first-child {
    width: var(--day-width-values-grid-div);
}

.values-grid > div > p {
    position: relative;
    bottom: var(--bottom-values-grid-div-p);
}

.labels-grid > div {
    display: inline-block;
    margin-right: var(--margin-right-labels-grid-div);
    margin-bottom: var(--margin-bottom-labels-grid-div);
    height: var(--height-labels-grid-div);
    width: var(--width-labels-grid-div);
    text-align: center;
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-labels-grid-div);
    background: var(--background-labels-grid-div);
    border-radius: 2px
}

.labels-grid > div:first-child {
    width: var(--day-width-labels-grid-div);
}

.chart-label {
    position: absolute;
    top: var(--top-chart-label);
    left: var(--left-chart-label);
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-chart-label);
}

.chart-triangle-grid {
    position: absolute;
    top: var(--top-chart-triangle-grid);
}

.chart-triangle-grid > div {
    position: absolute;
    border-style: solid;
    border-width: var(--border-width-chart-triangle-grid-div);
    opacity: 0;
    animation: fade-in-triangle;
    animation-duration: var(--animation-duration-fade-in-triangle);
    animation-delay: var(--animation-delay-chart-triangle-grid-div);
    animation-fill-mode: forwards;
}

.chart-triangle-grid > .first {
    left: var(--left-chart-triangle-grid-first);
    border-color: var(--border-color-chart-triangle-grid-first) transparent;
}

.chart-triangle-grid > .second {
    left: var(--left-chart-triangle-grid-second);
    border-color: var(--border-color-chart-triangle-grid-second) transparent;
}

.chart-triangle-grid > .third {
    left: var(--left-chart-triangle-grid-third);
    border-color: var(--border-color-chart-triangle-grid-third) transparent;
}

.chart-rectangle-grid {
    position: absolute;
    top: var(--top-chart-rectangle-grid);
}

.chart-rectangle-grid > div {
    display: inline-block;
    position: absolute;
    height: var(--height-chart-rectangle-grid-div);
    width: var(--width-chart-rectangle-grid-div);
    cursor: pointer;
}

.chart-rectangle-grid > div:active {
    transform: var(--transform-chart-rectangle-grid-div-active);
}

.chart-rectangle-grid > .first {
    left: var(--left-chart-rectangle-grid-first);
    background: var(--background-chart-rectangle-grid-first);
}

.chart-rectangle-grid > .second {
    left: var(--left-chart-rectangle-grid-second);
    background: var(--background-chart-rectangle-grid-second);
}

.chart-rectangle-grid > .third {
    left: var(--left-chart-rectangle-grid-third);
    background: var(--background-chart-rectangle-grid-third);
}

.chart-container {
    position: absolute;
    top: var(--top-chart-container);
    left: var(--left-chart-container);
    height: var(--height-chart-container);
    width: var(--width-chart-container);
    overflow: hidden;
    border: var(--border-chart-container) solid var(--grey-light);
}

#project-version {
    position: relative;
    bottom: var(--bottom-project-version);
    opacity: 0;
    font-size: var(--font-size-12pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-project-version);
}

html[theme = "dark"]
{
    /* color */
    --color-logo: var(--white);
    --color-logo-description: var(--white);
    --color-label-main-settings: var(--white);
    --color-main-settings-input: var(--white);
    --color-main-settings-input-placeholder: var(--grey-light);
    --color-label-additional-settings: var(--white);
    --color-theme-buttons-input: var(--grey);
    --color-port: var(--white);
    --color-port-placeholder: var(--grey-light);
    --color-submit: var(--white);
    --color-hw-type: var(--white);
    --color-hw-name: var(--white);
    --color-usage-value-span: var(--white);
    --color-usage-postfix: var(--white);
    --color-info-label: var(--white);
    --color-detailed-hw-info-div: var(--white);
    --color-announcement: var(--white);
    --color-contacts-label: var(--white);
    --color-contacts-description-div: var(--white);
    --color-uptime-dashboard-logo: var(--grey-light);
    --color-uptime-dashboard-logo-description: var(--white);
    --color-values-grid-div: var(--white);
    --color-labels-grid-div: var(--white);
    --color-chart-label: var(--white);
    --color-project-version: var(--white);
    --color-code: var(--white);
    --color-title: var(--white);
    --color-explanation-div: var(--grey);
    --color-advice: var(--grey-light);

    /* background */
    --background-body: var(--grey-light);
    --background-form: var(--linear-gradient-form-dark);
    --background-form-squares-grid-first: var(--grey-light);
    --background-form-squares-grid-second: var(--grey-light);
    --background-form-squares-grid-third: var(--grey-light);
    --background-main-settings: var(--grey);
    --background-main-settings-input: var(--grey);
    --background-main-settings-select: var(--grey);
    --background-main-settings-underline: var(--grey-light);
    --background-button-squares-grid-first: var(--purple-light);
    --background-button-squares-grid-second: var(--grey-light);
    --background-theme-buttons-first: var(--purple-light);
    --background-theme-buttons-second: var(--grey-light);
    --background-port: var(--grey);
    --background-submit: var(--grey-light);
    --background-card: var(--grey-dark);
    --background-hw-logo-first: var(--blue-light);
    --background-hw-logo-second: var(--red-light);
    --background-hw-logo-third: var(--green-light);
    --background-card-body-squares-grid-first-div: var(--grey);
    --background-card-body-squares-grid-second-div: var(--grey);
    --background-card-body-squares-grid-third-div: var(--grey);
    --background-usage-underline-first: var(--blue-light);
    --background-usage-underline-second: var(--red-light);
    --background-usage-underline-third: var(--green-light);
    --background-footer-first: var(--blue);
    --background-footer-first-card-footer-dots-grid-div-inner-dot: var(--blue-light);
    --background-footer-second: var(--red);
    --background-footer-second-card-footer-dots-grid-div-inner-dot: var(--red-light);
    --background-footer-third: var(--green);
    --background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green-light);
    --background-dividers-div: var(--grey-dark);
    --background-uptime: var(--grey-dark);
    --background-uptime-squares-grid-first: var(--grey-light);
    --background-uptime-squares-grid-second: var(--grey-light);
    --background-uptime-squares-grid-third: var(--grey-light);
    --background-values-grid-div: var(--grey-opacity-70);
    --background-labels-grid-div: var(--grey-opacity-90);
    --background-chart-rectangle-grid-first: var(--blue-light);
    --background-chart-rectangle-grid-second: var(--red-light);
    --background-chart-rectangle-grid-third: var(--green-light);
    --background-error-div: var(--grey-dark);

    /* border-color */
    --border-color-chart-triangle-grid-first: var(--blue);
    --border-color-chart-triangle-grid-second: var(--red);
    --border-color-chart-triangle-grid-third: var(--green);
}