/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}* {-webkit-box-sizing: border-box;box-sizing: border-box;}
:root{
    --font-size: 17px;
    --font-size-xl: 24px;
    --font-size-lg: 20px;
    --font-size-sm: 15px;
    --font-size-xs: 13px;
    --font-size-xxs: 11px;
    --font-weight: 400;
    --line-height: 1.5;
    --font: var(--font-weight) var(--font-size)/var(--line-height) 'Roboto Flex', sans-serif;
    --container-width: 1400px;
    --color-background: #FFF;
    --color-sidebar: #f6f7fb;
    --color-sidebar-dark: #EDEFF7;
    --color-accent: #d65619;
    --color-accent-dark: #bb4a16;
    --color-white: #FFF;
    --color-text: #7F7F88;
    --color-text-dark: #494952;
    --color-links: #6A99F4;
    --color-links-soft: #8AB4F8;
    --header-height: 60px;
    --padding: 40px;
    --padding-sm: 24px;
    --padding-xs: 16px;
    --padding-xxs: 6px;
    --gap: 20px;
    --gap-lg: 32px;
    --gap-sm: 12px;
    --gap-xs: 8px;
    --gap-xxs: 2px;
    --border-radius: 2px;
    --shadow-line: 0 0 0 1px var(--color-sidebar-dark);
    --transition: ease-in-out .2s;
}
@media only screen and (max-width: 1366px){
    :root{
        --header-height: 50px;
        --font-size: 16px;
        --font-size-xl: 22px;
        --font-size-lg: 18px;
        --font-size-sm: 14px;
        --padding: 36px;
        --padding-sm: 20px;
        --padding-xs: 14px;
        --padding-xxs: 5px;
        --gap: 18px;
        --gap-lg: 28px;
        --gap-sm: 10px;
        --gap-xs: 6px;
    }
}

@media only screen and (max-width: 768px){
    :root{
        --header-height: 40px;
        --padding: 28px;
        --padding-sm: 18px;
        --padding-xs: 12px;
        --padding-xxs: 4px;
        --font-size: 15px;
        --font-size-xl: 20px;
        --font-size-lg: 16px;
        --gap: 16px;
        --gap-lg: 24px;
        --gap-sm: 8px;
        --gap-xs: 4px;
    }
}
@media only screen and (max-width: 375px){
    :root{--padding: 20px;}
}

html{background-color: var(--color-background);color: var(--color-text);}
body{font: var(--font);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga';}
a{text-decoration: none;color: var(--color-links);transition: all var(--transition);}
a:is(:focus, :hover){outline: none;color: var(--color-links-soft);}
:is(h1,h2,h3,h4,h5,h6){font-weight: 600;font-size: var(--font-size-lg);color: var(--color-text-dark);}
:is(h1,h2,h3,h4,h5,h6) > strong{font-weight: 800;}
.grow{flex-grow: 1;}
#header{position: sticky;top: 0;z-index: 2;height: var(--header-height);background-color: var(--color-accent);color: var(--color-white);border-bottom: 1px solid var(--color-accent-dark);}
#header > [class^="container-"]{height: var(--header-height);display: flex;align-items: center;gap: var(--gap);}
#header .app-name{font-size: var(--font-size);font-weight: 400;line-height: var(--header-height);white-space: nowrap;background-color: var(--color-accent-dark);
    
    color: var(--color-white);
    padding: 0 var(--padding-sm);display: inline-flex;align-items: center;gap: var(--gap-sm);}
#header .app-name > i{line-height: 1;font-size: 40px;}
#header > [class^="container-"] > a:not(.app-name){color: var(--color-white);font-size: var(--font-size-xs);display: inline-flex;align-items: center;gap: var(--gap-sm);}
#header > [class^="container-"] > a > i{font-size: 22px;}
section#login {background-color: var(--color-sidebar);}
section#login > [class^="container-"]{height: 100vh;display: flex;align-items: center;}
section#login > [class^="container-"] > form{width: 100%;padding: var(--padding);background-color: var(--color-background);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);}
[is-main-sidebar] {padding: var(--padding-sm) 0;background-color: var(--color-sidebar);overflow-y: auto;-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);}
#content{padding: var(--padding-sm) 0;}
body.login #content{padding: 0;}
/* OK: container */
[class^="container-"]{width: var(--container-width);max-width: 100%;margin-left: auto;margin-right: auto;padding-left: var(--padding);padding-right: var(--padding);}
[class^="container-"][class*="-full"] {width: 100%;}
[class^="container-"][class*="-sm"] {width: calc(var(--container-width) * .8);}
[class^="container-"][class*="-xs"] {width: calc(var(--container-width) * .6);}
[class^="container-"][class*="-xxs"] {width: calc(var(--container-width) * .4);}
/* OK: heading */
div[class^="heading-"]{overflow: hidden;}
div[class^="heading-"] > * + *{margin-top: var(--gap-xs);}
div[class^="heading-"] + *{margin-top: var(--gap);}
div[class^="heading-"] > :is(h1,h2,h3,h4,h5){display: flex;align-items: center;gap: var(--gap-xs);}
div[class^="heading-"][class*="-colorize"] strong {color: var(--color-accent);}
div[class^="heading-"][class*="-lg"] > :is(h1,h2,h3,h4,h5){font-size: var(--font-size-xl);}
div[class^="heading-"][class*="-line"] {padding-bottom: var(--gap-sm);border-bottom: 2px solid var(--color-sidebar-dark);}
div[class^="heading-"][class*="-line"] + * {margin-top: var(--gap-lg);}
/* OK: forms */
fieldset{display: grid;gap: var(--gap);grid-template-columns: 1fr;}
fieldset:is(.filters){grid-template-columns: repeat(3, 1fr);}
@media only screen and (max-width: 1024px){
    fieldset:is(.filters){grid-template-columns: 1fr;}
}
label{font-size: var(--font-size-xs);display: flex;gap: var(--gap-xs);align-items: center;text-transform: uppercase;font-weight: 500;color: var(--color-text-dark);}
label + *{margin-top: var(--gap);}
input, select {display: block;line-height: 1;padding: calc(var(--padding-xs) - 4px);width: 100%;border: none;-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: none;font: var(--font);font-size: var(--font-size-sm);background-color: var(--color-white);
    -webkit-appearance: none; appearance: none;
}
input:focus, select:focus{outline: 2px solid var(--color-links);}
option{line-height: 1;}
/* OK: actions */
* + [class^="actions-"]{margin-top: var(--gap-lg);}
[class^="actions-"]{display: flex;justify-content: flex-end;gap: var(--gap-xs);}
/* OK: btn */
[class^="btn-"]{color: var(--color-white);padding: var(--padding-xs) var(--padding-sm);border: none;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: none;font: var(--font);font-size: var(--font-size-xs);font-weight: 600;background-color: var(--color-links);-webkit-transition: all var(--transition);transition: all var(--transition);}
[class^="btn-"]:is(:hover, :focus){background-color: var(--color-links-soft);}
[class^="btn-"][class*="-full"]{width: 100%;text-align: center;}
/* OK: card */
[class^="card-"]{-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);}
[class^="card-"] > [class^="heading-"]{padding: var(--padding-xs);background-color: var(--color-sidebar);border-bottom: 1px solid var(--color-sidebar-dark);}
[class^="card-"] > .content{margin: 0;padding: var(--padding-xs);}
/* OK: tag */
[class^="tag-"]{display: inline-flex;background-color: var(--color-accent);color: var(--color-white);line-height: 1;padding: var(--padding-xxs);font-size: var(--font-size-xxs);border-radius: var(--border-radius);font-weight: 500;white-space: nowrap;}
/* TODO: card-vps */
.card-vps .content{display: flex;flex-direction: column;gap: var(--gap);}
.card-vps .content > *{margin: 0;}
#vpss .items > *  + * {margin-top: var(--gap);}
/* OK: card-results */
.card-results{display: grid;grid-template-columns: repeat(20, 1fr);gap: var(--gap-xxs);-webkit-box-shadow: none;box-shadow: none;-webkit-border-radius: none;border-radius: none;}
.card-results > div{aspect-ratio: 1.5;border-radius: var(--border-radius);background-color: var(--color-links-soft);color: var(--color-white);display: flex;align-items: center;justify-content: center;font-size: calc(var(--font-size-xxs) - 1px);user-select: none;}
.card-results > div.null{background-color: var(--color-sidebar);}
@media only screen and (max-width: 1536px){
    .card-results{grid-template-columns: repeat(15, 1fr);}
}
@media only screen and (max-width: 1366px){
    .card-results{grid-template-columns: repeat(12, 1fr);}
}
@media only screen and (max-width: 1024px){
    .card-results{grid-template-columns: repeat(10, 1fr);}
}
@media only screen and (max-width: 768px){
    .card-results{grid-template-columns: repeat(8, 1fr);}
}
@media only screen and (max-width: 568px){
    .card-results{grid-template-columns: repeat(6, 1fr);}
}
@media only screen and (max-width: 375px){
    .card-results{grid-template-columns: repeat(4, 1fr);}
}
/* notifications */
#notifications{position: fixed;top: 0;left: 0;padding: var(--gap-xs);pointer-events: none;z-index: 10;display: flex;flex-direction: column;gap: var(--gap-xs);}
#notifications > .notification{font-size: var(--font-size-sm);background-color: var(--color-links-soft);color: var(--color-white);padding: var(--padding-sm);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);pointer-events: all;display: flex;align-items: center;gap: var(--gap-sm);}
#notifications > .notification > i{font-size: 24px;}
#notifications > .notification.error{background-color: red;}
/* language-selector */
nav.language-selector{display: flex;align-items: center;gap: var(--gap-xs);text-transform: uppercase;font-size: var(--font-size-xs);font-weight: 600;user-select: none;}
nav.language-selector a{text-decoration: none;color: var(--color-white);}
nav.language-selector a.current{color: var(--color-accent-dark);}
/* averages */
#averages + * {margin-top: var(--gap-lg);}
#averages > .items {display: grid;grid-template-columns: repeat(3, 1fr);align-items: center;gap: var(--gap-sm);}
#averages [class^='average-']{display: flex;justify-content: space-between;align-items: center;text-align: right;padding: var(--padding);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);   background-color: var(--color-sidebar);}
#averages [class^='average-'] > .info > .name{color: var(--color-text-dark);font-weight: 700;font-size: var(--font-size-lg);}
#averages [class^='average-'] > .info > .count{color: var(--color-links);font-size: calc(var(--font-size-lg) * 1.5);font-weight: 800;}
#averages [class^='average-'] > i {background-color: var(--color-links-soft);color: var(--color-white);width: 96px;border-radius: 96px;font-size: 48px;aspect-ratio: 1;display: inline-flex;align-items: center;justify-content: center;}
@media only screen and (max-width: 1366px){
    #averages > .items{gap: var(--gap-xs);}
    #averages [class^='average-']{padding: var(--padding-sm);}
    #averages [class^='average-'] > i{width: 64px;height: 64px;font-size: 32px;}
    #averages [class^='average-'] > .info > .name, #averages [class^='average-'] > .info > .count{font-size: var(--font-size);}
}
@media only screen and (max-width: 992px){
    #averages > .items{grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 568px){
    #averages > .items{grid-template-columns: 1fr;}
    #averages [class^='average-'] > .info > .name{font-size: var(--font-size-xs);font-weight: 400;}
    #averages [class^='average-'] > i{width: 48px;height: 48px;font-size: 24px;}
}

.evolution-results{
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}
.evolution-results > * {
    margin: 0 !important;
}