/*
    Dimensions file
    Used for define dimensions of project

    Every category must follow convention:
    * Category must contain only css property name

    Every entry must follow convention:
    * Must begins with category name
    * Further should be followed by tag/class/id/etc.

    By example: --height-body
*/

:root {
    /* 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-background-settings: 2.938rem;
    --top-button-squares-grid: 0.222rem;
    --top-port: 2.7rem;
    --top-header: 1.5rem;
    --top-label-hw-info: 0.562rem;
    --top-info-label: 4.188rem;
    --top-inner-dot: 0.375rem;
    --top-detailed-hw-info-div: 1.168rem;
    --top-announcement: 3.813rem;
    --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-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-background-settings: 1.5rem;
    --left-theme-buttons-first: 1.5rem;
    --left-background-settings-color-selector: 1.5rem;
    --left-port: 1.5rem;
    --left-submit: 6.563rem;
    --left-header: 1.5rem;
    --left-label-hw-info: 4.375rem;
    --left-usage: 1.5rem;
    --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-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 */
    --margin-hardware-icon: 0.65rem;

    /* 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-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-labels-grid-div: 0.313rem;

    /* height */
    --height-body: 100%;
    --height-setup: 26.706rem;
    --height-setup-div: 32.706rem;
    --height-clouds: 8.281rem;
    --height-clouds-img: 5.438rem;
    --height-background: 8.281rem;
    --height-form: 24.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-background-settings: 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-main-hw-info: 100%;
    --height-usage-value-span: 5.8rem;
    --height-usage-underline: 0.313rem;
    --height-footer: 3.125rem;
    --height-inner-dot: 0.75rem;
    --height-detailed-hw-info-div: 1.063rem;
    --height-dividers-div: 3.125rem;
    --height-uptime: 8.27rem;
    --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;
    --height-hardware-icon: 2.5rem;

    /* 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-background-settings-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-usage-value-span: 2.224rem;
    --width-info-label: 9.5rem;
    --width-usage-underline: 9.5rem;
    --width-footer: 100%;
    --width-inner-dot: 0.75rem;
    --width-detailed-hw-info-div: 5.625rem;
    --width-dividers-div: 0.063rem;
    --width-announcement: 21.875rem;
    --width-uptime: 100%;
    --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;
    --width-hardware-icon: 2.5rem;

    /* 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-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-inner-dot: 50%;
    --border-radius-error-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-chart-rectangle-grid-div-active: scale(0.9);
}