@import 'reset.css';
@import 'fancy.css';
/* https://dribbble.com/shots/17494735-Music-Dashboard-UI-Concept/attachments/12632226?mode=media */


:root{

    --menu-height: 180px;
    --footer-height: 20vh;
    --footer-actions-height: 100px;

    --color-background: #F8F7FF;
    --color-background-dark: #EAE8FF;
    --color-background-rgb: 248,247,255;
    --color-white: #FFFFFF;

    --color-black: #202124;
    --color-black-rgb: 32,33,36;
    --color-black-soft: #303134;
    --color-black-extra-soft: #57595D;
    --color-purple: #4F46BB;
    --color-purple-rgb: 79,70,187;
    --color-purple-dark: #181389;
    --color-purple-soft: #8679ED;
    --color-purple-pastel: #BDB0F3;
    --color-purple-pastel-dark: #9389DC;
    --color-green: #51cc56;
    --color-green-dark: #1AA31D;
    --color-green-pastel: #92F59B;
    --color-green-pastel-dark: #71E078;
    --color-green-rgb: 81,204,86; 
    --color-red: #eb6464;
    --color-red-dark: #D92727;
    --color-red-pastel: #FBB4B4;
    --color-red-pastel-dark: #F38C8C;
    --color-red-rgb: 235,100,100;

    
    --color-wordpress: #02719c;
    --color-laravel: #e3382b;
    --color-git: #e94e31;

    --container-width: 1500px;
    --container-padding: 50px;

    --padding-sections: 80px;
    --padding: 32px;
    --padding-sm: 24px;
    --padding-xs: 16px;
    --padding-xxs: 8px;

    --gap-sections: 48px;
    --gap-lg: 48px;
    --gap: 32px;
    --gap-sm: 24px;
    --gap-xs: 16px;
    --gap-xxs: 8px;

    --border-radius: 3px;

    --font-family: 'Radio Canada', sans-serif;
    --font-weight-light: 300;
    --font-weight: 400;
    --font-weight-bold: 500;
    --font-weight-strong: 600;

    --font-size-xl: 32px;
    --font-size-lg: 24px;
    --font-size: 16px;
    --font-size-sm: 15px;
    --font-size-xs: 12px;
    --font-size-xxs: 10px;
    --font-line-height: 1.5;

    --font: var(--font-weight) var(--font-size)/var(--font-line-height) var(--font-family);
    --font-sm: var(--font-weight) var(--font-size-sm)/var(--font-line-height) var(--font-family);
    --font-lg: var(--font-weight-bold) var(--font-size-lg)/var(--font-line-height) var(--font-family);
    --font-xl: var(--font-weight-bold) var(--font-size-xl)/var(--font-line-height) var(--font-family);

    --transition: ease-in .2s;

    --fancybox-color: var(--color-purple-soft);
    --fancybox-bg: rgba(var(--color-background-rgb),.9);
    --fancybox-content-bg: transparent;


    --shadow: 0 var(--gap-xs) var(--gap) rgba(var(--color-purple-rgb),.2);
    --shadow-soft: 0 0 var(--gap) rgba(var(--color-purple-rgb),.1);
    --shadow-line: 0 0 0 1px rgba(var(--color-purple-rgb),.1);

} 
@media only screen and (max-width: 1920px){
   
}
@media only screen and (max-width: 1536px){
    :root{
        --menu-height: 160px;
        --font-size-xl: 30px;
        --font-size-lg: 22px;

        --gap-lg: 44px;
        --gap: 30px;
        --gap-sm: 22px;
    

    }
}
@media only screen and (max-width: 1366px){
    :root{
        --menu-height: 140px;
        --container-padding: 40px;
        --font-size-xl: 28px;
        --font-size-lg: 21px;

        --gap-lg: 42px;
        --gap: 28px;
        --gap-sm: 20px;
        --gap-xs: 14px;

    }
}
@media only screen and (max-width: 1024px){
    :root{
        --menu-height: 120px;
        --font-size-xl: 26px;
        --font-size-lg: 20px;
        --font-size: 15px;
        --font-size-sm: 14px;

        --gap-lg: 36px;
        --gap: 26px;
        --gap-sm: 18px;
        --gap-xs: 12px;
  

    }
}
@media only screen and (max-width: 768px){
    :root{
        --menu-height: 100px;
        --container-padding: 36px;

        --gap-lg: 34px;
        --gap: 24px;
        --gap-sm: 16px;
        --gap-xs: 10px;

    }
}
@media only screen and (max-width: 568px){
    :root{
        --container-padding: 32px;
        --font-size-xl: 24px;
        --font-size-lg: 18px;
        --gap-lg: 32px;
        --gap: 22px;
        --gap-sm: 14px;

    }
}
@media only screen and (max-width: 375px){
    :root{
        --container-padding: 24px;
        --font-size-xl: 22px;
        --gap-lg: 28px;
        --gap: 20px;
    }
}


/* INFO: scroll related */
html, textarea, iframe {scrollbar-width: thin;scrollbar-color: var(--color-purple-dark) var(--color-background-dark);scrollbar-gutter: auto;scroll-behavior: smooth;scroll-padding-top: var(--scroll-padding-top-ovewrite);}
body::-webkit-scrollbar, textarea::-webkit-scrollbar, iframe::-webkit-scrollbar, .scrollable::-webkit-scrollbar, [scrollable]::-webkit-scrollbar {width: 6px;height: 6px;}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb, .scrollable::-webkit-scrollbar-thumb, [scrollable]::-webkit-scrollbar-thumb  {background-color: var(--color-purple-dark);}
body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track, .scrollable::-webkit-scrollbar-track, [scrollable]::-webkit-scrollbar-track {background: var(--color-background-dark);}


html {
    background-color: var(--color-background);
}
body{
    color: var(--color-black);
    background-color: var(--color-background);
    font: var(--font);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga';
}
picture {
    display: block;
}
img{
    user-select: none;
    width: 100%;
    height: auto;
    display: block;
}
img[src$=".gif"], img[src$=".png"] {transform: translateZ(0) scale(0.999999);}

a{
    color: var(--color-purple);
    transition: all var(--transition);
}
a:is(:hover, :focus){
    color: var(--color-purple-dark);
    outline: none;
}
a[disabled]{
    opacity: .25;
    pointer-events: none;
}

section {
    position: relative;
}
section + :is(section) {
    margin-top: var(--gap-sections);
}

small{
    font-size: var(--font-size-sm);
}

::selection {color: var(--color-white);
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    /*text-shadow: 0 0 var(--gap-sm) var(--color-white),  0 0 var(--gap) var(--color-white);*/
}

[class^="material-icon"]{user-select: none;}

progress::-moz-progress-bar { background: rgba(var(--color-purple-rgb), .3); }
progress::-webkit-progress-value { background: rgba(var(--color-purple-rgb), .3); width: 100%; }
progress[value]::-webkit-progress-bar {background-color: var(--color-background);}
progress {-webkit-appearance: none; appearance: none;color: rgba(var(--color-purple-rgb), .3);display: flex;border: none;width: 100%;height: 20px;background-color: var(--color-background);overflow: hidden;}

[copyable]{
    cursor:copy;
}

[generate-secure-password] > * {
    pointer-events: none;

}

.hide{
    visibility: hidden;
    display: none !important;
}
.hide :is(input, textarea){
    display: none;
    visibility:hidden;
}

.grow {
    flex-grow: 1;
}

.ip, [crontab], code{
    font-family:  monospace;
    font-size: 14px;
    color: var(--color-purple-soft);
}
input[crontab]{
    text-align: center;
    font-size: 20px;
    letter-spacing: 0;
    vertical-align: middle;
}
code{
    display: block;
    padding: var(--padding-xs);
    color: rgba(var(--color-background-rgb), .75);
    background-color: var(--color-purple-dark);
    -wekbit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);

}
code > strong{
    color: var(--color-white);
    font-weight: var(--font-weight-strong);
}
code + *, * + code{
    margin-top: var(--gap);
}

/* helpers */
[class*="-justify-start"]{justify-content: flex-start !important;}
[class*="-justify-end"]{justify-content: flex-end !important;}

/* .screenshot */
.screenshot {position: relative;overflow: hidden;-webkit-border-radius: calc(var(--border-radius) - 1px);border-radius: calc(var(--border-radius) - 1px);aspect-ratio: 1.78;-webkit-box-shadow: var(--shadow-line), var(--shadow-soft);box-shadow: var(--shadow-line), var(--shadow-soft);display: block;object-fit: contain;}
.screenshot img{position: absolute;width: 100%;object-fit: cover;}
.screenshot + * {margin-top: var(--gap-lg);}
.screenshot span[class^="material-"]{color: var(--color-background-dark);position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: var(--font-size-xl);}

/* TODO: actions */
[class^="actions-"]{display: flex;flex-wrap: wrap;justify-content: flex-end;align-items: center;gap: var(--gap-xs);margin-top: var(--gap);}
[class^="actions-"][class*="-centered"]{justify-content: center;}

[class^="actions-"][class*="-nomargin"]{margin: 0;}
[class^="actions-"][class*="-margin-sm"]{margin-top: var(--gap-sm);}
[class^="actions-"][class*="-margin-lg"]{margin-top: var(--gap-lg);}
@media only screen and (max-width: 1024px){
    [class^="actions-"] > .grow{order: -1;}
}





.ace_editor {aspect-ratio: 4; }
.ace-container {position: relative; -webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);
padding: var(--padding-sm);
background-color: #181818;
}
.ace-container > textarea{visibility: hidden;pointer-events: none;position: absolute;}



@media only screen and (max-width: 1366px){
    .ace_editor {aspect-ratio: 3;}
}
@media only screen and (max-width: 1024px){
    .ace_editor {aspect-ratio: 2;}
}
@media only screen and (max-width: 568px){
    .ace_editor {aspect-ratio: 1;}
}


/* OK: container */
[class^="container-"]{width: var(--container-width);max-width: 100%;margin-left: auto;margin-right: auto;padding-left: var(--container-padding);padding-right: var(--container-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) * .5);}
/* OK: count- */
[class^="count-"]{font-size: calc(var(--font-size-xxs) - 1px);font-weight: var(--font-weight-bold);vertical-align: middle;display: inline-flex;align-self: center;text-align: center;color: var(--color-white);background-color: var(--color-purple-soft);height: calc(var(--font-size-xxs) * 2);min-width: calc(var(--font-size-xxs) * 2);align-items: center;justify-content: center;-webkit-border-radius: var(--font-size-xxs);border-radius: var(--font-size-xxs);}
[class^="count-"][class*="-green"]{background-color: var(--color-green);}
[class^="count-"][class*="-red"]{background-color: var(--color-red);}
/* OK: ball */
[class^="ball-"]{width: 8px;height: 8px;background-color: var(--color-purple);align-self: center;-webkit-border-radius: 8px;border-radius: 8px;will-change: opacity;-webkit-animation: ball linear 3s infinite;animation: ball linear 3s infinite;display: inline-block;vertical-align: middle;}
[class^="ball-"][class*="-info"]{background-color: var(--color-green);}
[class^="ball-"][class*="-error"]{background-color: var(--color-red); }
@-webkit-keyframes ball {
    0% {opacity: .2;}
    10% {opacity: 2;}
    60% {opacity: 1;}
    70% {opacity: .2;}
    100% {opacity: .2;}
}
@keyframes ball {
    0% {opacity: .2;}
    10% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: .2;}
    100% {opacity: .2;}
}


.animated-loading-hourglass{
    animation: loading-hourglass ease-in-out 1s infinite;
}

@keyframes loading-hourglass {
    50% { transform: rotateZ(0);}
    100% { transform: rotateZ(180deg);}
}



/* TODO: btn */
[class^="btn-"]{--percentage-increment: 1;--base-padding: 14px;font: var(--font);font-size: calc(var(--font-size-sm) * var(--percentage-increment));font-weight: var(--font-weight-bold);background-color: var(--color-purple);color: var(--color-white);text-decoration: none;padding: calc(var(--base-padding) * var(--percentage-increment)) calc(var(--base-padding) * 1.6 * var(--percentage-increment));-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: none;display: inline-flex; justify-content: center; gap:  calc(var(--font-size-sm) * var(--percentage-increment) );align-items: center;line-height: 1;/*white-space: nowrap;*/border: none;/*-webkit-transition: all var(--transition);transition: all var(--transition);user-select: none;*/}
[class^="btn-"] > span.label{display: block;}
[class^="btn-"] > span.label::first-letter {text-transform: uppercase;}
[class^="btn-"]:is(:hover, :focus){background-color: var(--color-white);color: var(--color-purple);-webkit-box-shadow: 0 0 0 2px var(--color-purple-soft);box-shadow: 0 0 0 2px var(--color-purple-soft);}
[class^="btn-"][class*="-xs"]{--percentage-increment: .8;}
[class^="btn-"][class*="-sm"]{--percentage-increment: .9;}
[class^="btn-"][class*="-lg"]{--percentage-increment: 1.2;}
[class^="btn-"][class*="-xl"]{--percentage-increment: 1.4;}
[class^="btn-"] > [class^="material-icons"]{font-size: calc(var(--font-size-sm) * var(--percentage-increment) * 1.5 );opacity: .5;pointer-events: none;}
[class^="btn-"][class*="-green"]{background-color: var(--color-green);color: var(--color-white);}
[class^="btn-"][class*="-green"]:is(:hover, :focus){background-color: var(--color-white);color: var(--color-purple);-webkit-box-shadow: 0 0 0 2px var(--color-purple-soft);box-shadow: 0 0 0 2px var(--color-purple-soft);}
[class^="btn-"][class*="-soft"]{font-weight: var(--font-weight); background-color: var(--color-background);color: var(--color-purple-soft);-webkit-box-shadow: inset 0 0 0 1px var(--color-purple-soft);box-shadow: inset 0 0 0 1px var(--color-purple-soft);}
[class^="btn-"][class*="-soft"]:is(:hover, :focus){background-color: var(--color-white);color: var(--color-purple-dark);-webkit-box-shadow: 0 0 0 2px var(--color-purple-dark);box-shadow: 0 0 0 2px var(--color-purple-dark);}
[class^="btn-"][class*="-red"]{background-color: var(--color-red);color: var(--color-white);}
[class^="btn-"][class*="-red"]:is(:hover, :focus){background-color: var(--color-white);color: var(--color-purple);-webkit-box-shadow: 0 0 0 2px var(--color-purple-soft);box-shadow: 0 0 0 2px var(--color-purple-soft);}
/* TODO: heading */
[class^="heading-"]{
    --percentage-increment: 1;
}
[class^="heading-"][class*="-sm"]{
    --percentage-increment: .9;   
}
[class^="heading-"][class*="-xs"]{
    --percentage-increment: .7;   
}
[class^="heading-"][class*="-lg"]{
    --percentage-increment: 1.2;   
}
[class^="heading-"][class*="-xl"]{
    --percentage-increment: 1.5;   
}
[class^="heading-"][class*="-xxl"]{
    --percentage-increment: 2;   
}
[class^="heading-"] > :is(h1,h2,h3,h4,h5,.h){font: var(--font-xl);font-size: calc(var(--font-size-xl) * var(--percentage-increment));line-height: 1.2;

}

[class^="heading-"] > :is(h1,h2,h3,h4,h5,.h)::first-letter {text-transform: uppercase;}
[class^="heading-"] > * + * {margin-top: var(--gap-xxs);}
[class^="heading-"] + * {margin-top: var(--gap-sm);}
[class^="heading-"] > :is(h1,h2,h3,h4,h5,.h) > strong{font-weight: var(--font-weight-strong);}
[class^="heading-"][class*="-colorized"] :is(h1,h2,h3,h4,h5,.h) > strong {color: var(--color-purple);}
[class^="heading-"][class*="-white"]{color: var(--color-background);}
[class^="heading-"][class*="-white"] :is(h1,h2,h3,h4,h5,.h) > strong {color: var(--color-white);}
[class^="heading-"] > small{color: var(--color-purple-soft);display: block;}
[class^="heading-"] > small::first-letter{text-transform: uppercase;}
[class^="heading-"][class*="-white"] > small{color: var(--color-white);}

[class^="heading-"][class*="-shadow"]{text-shadow: 0 1px 3px rgba(var(--color-purple-rgb), .2);}
[class^="heading-"][class*="-white"][class*="-shadow"]{text-shadow: 0 1px 3px rgba(var(--color-black-rgb), .2);}
[class^="heading-"] > .intro{font-size: var(--font-size-lg);font-weight: lighter;}
[class^="heading-"] > .intro strong{font-weight: normal;}
[class^="heading-"][class*="-xxl"] > .intro {
    font-size: var(--font-size-xl);
}
[class^="heading-"] > * + .intro {margin-top: var(--gap-sm);}



@media only screen and (max-width: 1920px){
   
}

@media only screen and (max-width: 1536px){
  
}
@media only screen and (max-width: 1366px){
 
}
@media only screen and (max-width: 1024px){
   
}
@media only screen and (max-width: 768px){
   
}
@media only screen and (max-width: 568px){
   
}
@media only screen and (max-width: 375px){
  
}


[class*="-centered"]{
    text-align: center;
}




[class^="shield-"]{color: var(--color-red);
font-size: var(--font-size-xs);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--gap-xxs);

}
[class^="shield-"] > [class^="material-icon"]{
    font-size: 20px;
}
[class^="shield-"][class*="-certified"]{
    color: var(--color-green);
}



/* TODO: title */
[class^="title-"]{--percentage-increment: 1;}
[class^="title-"] > :is(h1,h2,h3,h4,h5,.h){font: var(--font-lg);line-height: 1.2;font-size: calc(var(--font-size-lg) * var(--percentage-increment));}
[class^="title-"] + * {margin-top: var(--gap);}
[class^="title-"] > [class^="material-icons-"]{font-size: 28px;background-color: var(--color-background);color: var(--color-purple-soft);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);padding: var(--gap-xs);}
[class^="title-"] > * + * {margin-top: var(--gap-xxs);}
[class^="title-"] > small{display: block;}
[class^="title-"] > [class^="material-icons-"] + * {margin-top: var(--gap-xs);}
/* TODO: container */
[class^="grid-"] {display: grid;gap: var(--gap);grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 5fr));}
[class^="grid-"][class*="-certificates"] {grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 2fr));}
[class^="grid-"][class*="-database-users"] {grid-template-columns: 1fr;}
[class^="grid-"][class*="-rows"] {grid-template-columns: 1fr;}
[class^="grid-"][class*="-half"] {grid-template-columns: repeat(2, 1fr);}
@media only screen and (max-width: 1024px){
    [class^="grid-"][class*="-half"] {grid-template-columns: 1fr;}
}
/* TODO: card-site */
[class^="card"]{position: relative;z-index: 1;}
[class^="card"]:hover{z-index: 2;}
[class^="card"][class*="-boxed"] {display: block;background-color: var(--color-white);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);}
[class^="card"][class*="-boxed"] > .content {padding: var(--padding) var(--padding-sm);}
[class^="card"][class*="-boxed"] > [class^="actions-"]{background-color: var(--color-background);padding: var(--padding-sm);}
[class^="card"][class*="-boxed"] > * + [class^="actions-"]{border-top: 1px solid rgba(var(--color-purple-rgb),.05);margin-top: 0;}
[class^="card"][class*="-boxed"] > * + [class^="actions-"]:is(:last-child){-webkit-border-radius: 0 0 var(--border-radius) var(--border-radius);border-radius: 0 0 var(--border-radius) var(--border-radius);}
[class^="card"] > progress{-webkit-border-radius: var(--border-radius) var(--border-radius) 0 0;border-radius: var(--border-radius) var(--border-radius) 0 0;border-bottom: 1px solid rgba(var(--color-purple-rgb),.05);}
[class^="card"][class*="-boxed"][class*="-modal"] {width: 600px;max-width: calc(100vw - var(--gap-xs) * 2);}
[class^="card"][class*="-boxed"][class*="-purple"]{background-color: var(--color-purple-soft);}
[class^="card"][class*="-boxed"][class*="-green"]{background-color: var(--color-green);}
[class^="card"][class*="-boxed"][class*="-red"]{background-color: var(--color-red);}
[class^="card"][class*="-boxed"][class*="-black"]{background-color: var(--color-black-extra-soft);}
/* TODO: menu */
#menu{position: sticky;top: 0;background-color: var(--color-background);z-index: 5;background: -webkit-linear-gradient(to bottom, rgba(var(--color-background-rgb), .99) 50%, rgba(var(--color-background-rgb), 0) 100%);background: linear-gradient(to bottom, rgba(var(--color-background-rgb), .99) 50%, rgba(var(--color-background-rgb), 0) 100%);}
#menu > [class^="container-"]{height: var(--menu-height);display: flex;align-items: center;gap: var(--gap);vertical-align: middle;}
#menu .logo img{height: 38px;}
#menu nav.menu{display: flex;gap: var(--gap-sm);align-items: center;}
#menu nav.menu a{display: inline-flex;align-items: center;gap: var(--gap-xxs);font-weight: var(--font-weight-bold);text-decoration: none;color: var(--color-black-soft);font-size: var(--font-size-sm);user-select: none;}
#menu nav.menu a:is(:hover, :focus){color: var(--color-purple-soft);}
#menu nav.menu a > span[class^="material"]{color: var(--color-purple-soft);}
#menu nav.menu a > span.label{
    display: block;
}
#menu nav.menu a > span.label::first-letter{text-transform: uppercase;}
#menu nav.menu a.current{padding: 10px 12px;background-color: var(--color-white);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: 1px solid var(--color-purple-soft);}
#menu nav.language-selector{display: flex;align-items: center;gap: var(--gap-xxs);text-transform: uppercase;font-size: var(--font-size-xxs);font-weight: var(--font-weight-bold);user-select: none;}
#menu nav.language-selector a{text-decoration: none;color: var(--color-purple-soft);background-color: var(--color-purple-pastel-dark);line-height: 1;color: var(--color-white);padding: 4px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
#menu nav.language-selector a.current{color: var(--color-background-dark);background-color: var(--color-purple-dark);font-weight: var(--font-weight-strong);pointer-events: none;}
#menu .burger{line-height: 1;align-items: center;justify-content: center;text-decoration: none;width: 44px;height: 44px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);background-color: var(--color-purple-pastel);color: var(--color-white);display: none;}
#menu .burger:is(:hover, :focus){background-color: var(--color-purple);}
#menu .burger > *{font-size: 24px;}
#menu .burger > span::before{content: "menu";}
@media only screen and (max-width: 1366px){
    #menu-user  a > .label{display: none;}
    #menu .burger{display: flex;}
    #menu nav#menu-default {order: 5;transform-origin: right top;position: absolute;right: var(--container-padding);top: calc(100% - var(--padding));gap: var(--gap-sm);flex-direction: column;align-items: flex-start;background-color: var(--color-white);padding: var(--padding-sm);box-shadow: var(--shadow-line), var(--shadow-soft);-webkit-box-shadow: var(--shadow-line), var(--shadow-soft);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);opacity: 0;-webkit-transition: var(--transition);transition: var(--transition);pointer-events: none;-webkit-transform: scale(0);transform: scale(0);}
    body.mobile-menu-opened #menu nav#menu-default  {opacity: 1;transform: scale(1);pointer-events: all;}
    body.mobile-menu-opened #menu .burger > span::before{content:"close";}
}

@media only screen and (max-width: 768px){
    #menu > [class^="container-"]{gap: var(--gap-sm);}
}


#menu-user-notifications > a{  
    color: var(--color-red);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xxs);
    padding: 10px 12px;
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    text-decoration: none;
    outline: 1px solid var(--color-red);
}
#menu-user-notifications > a > .count{font-size: var(--font-size-xs);color: var(--color-re);}


#notifications{position: fixed;top: 0;left: 0;padding: var(--gap-sm) var(--gap-sm) var(--gap-sm)  var(--gap-sm);pointer-events: none;z-index: 10;display: flex;flex-direction: column;gap: var(--gap-xxs);}
#notifications > .notification{background-color: var(--color-green);color: var(--color-white);padding: var(--gap);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);pointer-events: all;flex-wrap: wrap;display: flex;align-items: center;gap: var(--gap-sm);-webkit-box-shadow: 0 var(--gap) var(--gap) var(--color-background);box-shadow: 0 0 0 2px var(--color-background);}
#notifications > .notification.error{background-color: var(--color-red);}
#notifications > .notification > .message > .description{margin-top: var(--gap-xxs);font-size: var(--font-size-xs);color: rgba(255, 255, 255, .75);}
#notifications > .notification > div::first-letter {text-transform: uppercase;}
/* footer */
#footer{background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-white) 50%);padding: var(--container-padding);display: flex;align-items: center;justify-content: center;height: var(--footer-height);}
#footer .copyright{font: var(--font-sm);text-align: center;color: var(--color-background-dark);user-select: none;}
#footer .copyright strong{font-weight: var(--font-weight-bold);}
/* TODO: footer-actions */
body.has-footer-actions{padding-bottom: var(--footer-actions-height);}
#footer-actions {position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;background-color: var(--color-white);-webkit-box-shadow: var(--shadow-line), var(--shadow-soft);box-shadow: var(--shadow-line), var(--shadow-soft);}
#footer-actions > [class^="container-"]{height: var(--footer-actions-height);display: flex;align-items: center;gap: var(--gap-xxs);}
@media only screen and (max-width: 1024px){
    #footer-actions{position: relative;margin-top: var(--gap-lg);border: none;}
    #footer-actions > [class^="container-"]{height: auto;padding-top: var(--gap-lg);padding-bottom: var(--gap-lg);flex-wrap: wrap;justify-content: flex-end;}
    #footer-actions > [class^="container-"] > .grow{order: 2;width: 100%;}
    body.has-footer-actions{padding-bottom: 0;}
}
/* TODO: inline-notification- */
[class^="inline-notification-"]::first-letter{text-transform: uppercase;}
[class^="inline-notification-"] {padding: calc(var(--padding-xs) - 4px);color: var(--color-purple-soft);background-color: var(--color-background);font: var(--font-sm);font-weight: var(--font-weight);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
[class^="inline-notification-"] strong {font-weight: var(--font-weight-strong);}
[class^="inline-notification-"] + *, * + [class^="inline-notification-"]{margin-top: var(--gap-xs);}
[class^="inline-notification-"][class*="-green"] {color: var(--color-green);background-color: rgba(var(--color-green-rgb), .05);outline: 1px solid var(--color-green);}
[class^="inline-notification-"][class*="-red"] {color: var(--color-red);background-color: rgba(var(--color-red-rgb), .05);}
[class^="inline-notification-"] > [class^="material-icons-"]{display: inline-flex;line-height: 1;vertical-align: middle;margin-right: var(--gap-xs);}
/* OK: tags */
[class^="tags-"]{display: flex;gap: var(--gap-xxs);flex-wrap: wrap;user-select: none;}
[class^="tags-"] + * , * + [class^="tags-"]{margin-top: var(--gap);}
/* OK: tag */
[class^="tag-"] {line-height: 1;text-decoration: none;font-size: var(--font-size-xxs);font-weight: var(--font-weight-strong);text-transform: uppercase;padding: 8px 10px;background-color: var(--color-purple);color: var(--color-white);display: inline-flex;align-items: center;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);vertical-align: middle;white-space: nowrap;user-select: none;}
[class^="tag-"][class*="-xs"] {font-size: calc(var(--font-size-xxs) - 1px);padding: 6px 7px;}
/* TODO: -background-* */
[class*="-background-wordpress"] { background-color: var(--color-wordpress); }
[class*="-background-laravel"] { background-color: var(--color-laravel); }

[class*="-background-active"], [class*="-background-info"], [class*="-background-enabled"], [class*="-background-easy"], [class*="-background-unread"] { background-color: var(--color-green); }
[class*="-background-error"],  [class*="-background-disabled"], [class*="-background-deploy-failed"], [class*="-background-admin"], [class*="-background-suspended"] {
    background-color: var(--color-red);
}

[class*="-background-soft"], [class*="-background-customer"] {
    background-color: var(--color-purple-soft);
}
[class*="-background-gray"] {
    background-color: rgba(var(--color-purple-rgb), .25);
}

[class*="-background-black"] {
    background-color: var(--color-black)
}

[class*="-background-git"] {
    background-color: var(--color-git);
}



/* TODO: list-details- */
[class^="list-details-"] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    font-size: var(--font-size-sm);
}
[class^="list-details-"][class*="-half"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

}


[class^="list-details-"] + *, * + [class^="list-details-"]  {
    margin-top: var(--gap);
}
[class^="list-details-"] > li {
    color: var(--color-black-soft);
    font-weight: var(--font-weight-bold);
}
[class^="list-details-"] > li > small {
    display: block;
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    color: var(--color-black-extra-soft);
}
[class^="list-details-"] > li > small + *, [class^="list-details-"] > li > * + small {margin-top: var(--gap-xxs);}
/* TODO: -info-grid */
.info-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--gap-sm);}
.info-grid > .item{display: flex; flex-direction: column;background-color: var(--color-white);padding: var(--padding-sm);-webkit-box-shadow: 0 var(--gap-xxs) var(--gap) rgba(var(--color-purple-rgb),.1);box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.05), 0 var(--gap-xxs) var(--gap) rgba(var(--color-purple-rgb),.1);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
.info-grid > .item > .info{flex-grow: 1;}
.info-grid > .item > [class^="heading-"]{padding-right: 25%;}
@media only screen and (max-width: 1366px){
    .info-grid {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 992px){
    .info-grid {grid-template-columns: 1fr;}
}
/* TODO: submenu */
section.submenu {background-color: var(--color-white);padding: var(--padding-xs) 0;   margin-top: var(--gap-sm);-webkit-box-shadow: var(--shadow-soft);box-shadow: var(--shadow-soft)}
section.submenu nav{display: flex;gap: var(--gap-sm);align-items: center;flex-wrap: wrap;}
section.submenu nav > a{order: 2;color: var(--color-purple-soft);text-decoration: none;font-size: var(--font-size-sm);font-weight: var(--font-weight-bold);display: inline-flex;gap: var(--gap-xxs);white-space: nowrap;}
section.submenu nav > a > span.label{display: block;}
section.submenu nav > a > span.label::first-letter{text-transform: uppercase;}
section.submenu nav > a.current{-webkit-box-shadow: 0 0 0 1px var(--color-purple);box-shadow: var(--shadow-line);color: var(--color-background-dark);padding: 8px 12px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
section.submenu nav > .show-more{order: 3;color: var(--color-purple-soft);cursor: pointer;font-size: var(--font-size-sm);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);text-align: center;font-size: 20px;display: none;}
section.submenu:not(.expanded) nav > *:nth-child(n+10):is(.show-more) {display: block;}
section.submenu:not(.expanded) nav > a:nth-child(n+9) {display: none;}
@media only screen and (max-width: 1024px){
    section.submenu nav{display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap-xxs);}
    section.submenu nav > a{background-color: var(--color-background);padding: 12px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);justify-content: center;}
    section.submenu nav > a.current{padding: 10px;background-color: var(--color-white);}
    section.submenu:not(.expanded) nav > a:nth-child(n+6) {display: none;}
    section.submenu:not(.expanded) nav > *:nth-child(n+7):is(.show-more) {display: block;}
}
@media only screen and (max-width: 568px){
    section.submenu:not(.expanded) nav > a:nth-child(n+4) {display: none;}
    section.submenu:not(.expanded) nav > *:nth-child(n+5):is(.show-more) {display: block;}
    section.submenu nav {grid-template-columns: 1fr;}
}


section.site-logs [class^="grid-"]{
   
    gap: var(--gap-xxs);
    padding: var(--gap-xs);
    background-color: var(--color-white);
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    -webkit-box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);
    box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);
}
section.site-logs .card-log-boxed > .content{
    padding: var(--gap-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


div[class^="card-log"] div.description{display: flex;gap: var(--gap-xxs);align-items: center;flex-wrap: wrap;font-size: var(--font-size-xs);color: var(--color-black-extra-soft);width: 100%;text-align: right;}
div[class^="card-log"] span.description{flex-grow: 1;}



form{width: 100%;}
legend +  *, * + legend{margin-top: var(--gap);}
legend{font: var(--font-lg);color: var(--color-purple-soft);}
legend strong{font-weight: var(--font-weight-strong);color: var(--color-purple);}
::placeholder {
    font-size: var(--font-size-sm);
    color: var(--color-purple-soft);
}



/* OK: fields */
.fields + *, *:not([type='hidden']) + .fields{margin-top: var(--gap-lg);}
.fields {display: grid;grid-template-columns: repeat(4, 1fr);gap: var(--gap);}
.fields > .field {grid-column: auto / span 2;}
.fields > .field.full {grid-column: auto / span 4;}
.fields > .field.half {grid-column: auto / span 1;}
@media only screen and (max-width: 1366px){
    .fields{grid-template-columns: repeat(2, 1fr);}
    .fields > .field {grid-column: auto / span 1;}
    .fields > .field.full {grid-column: auto / span 2;}
    .fields > .field.half {grid-column: auto / span 1;}
}
@media only screen and (max-width: 768px){
    .fields{gap: var(--gap-xs);gap: var(--gap-sm)}
    .fields > .field {grid-column: auto / span 2;}
}
@media only screen and (max-width: 375px){
    .fields{grid-template-columns: 1fr;}
    .fields > .field {grid-column: auto / span 1;}
    .fields > .field.full {grid-column: auto / span 1;}
}

/* INFO: field */
.field{display: flex;flex-direction: column;gap: var(--gap-xxs);}
.field > label{font: var(--font-sm);}
label::first-letter {text-transform: uppercase;}
.field > .input{display: flex;gap: var(--gap-xxs);align-items: center;}
.field > .input > [class^="material-icons-"]{
    background-color: rgba(var(--color-purple-rgb), .25);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 var(--padding-xs);
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
}
.field > .input > a[class^="material-icons-"]{text-decoration: none;background-color: var(--color-purple-soft);}
.field > .input > a[class^="material-icons-"]:is(:hover, :focus){background-color: var(--color-purple);}




.field.required > label::after{content: "*";margin-left: 2px;color: var(--color-red);display: inline-block;}

input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url], [type=datetime-local]), select, textarea{
    font: var(--font);
    font-size: calc(var(--font-size) + 2px);
    line-height: 1;
    background-color: var(--color-white);
    border: none;
    outline: none;
    width: 100%;
    padding: var(--padding-xs);
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    -webkit-box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);
    box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);
    -webkit-transition: all var(--transition);
    transition: all var(--transition);
    color: var(--color-black-soft);
}
input:is([type="radio"], [type="checkbox"]) {width: var(--font-size);height: var(--font-size);display: inline-flex;margin-right: var(--gap-xxs);vertical-align: center;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);accent-color: var(--color-purple-soft);cursor: pointer;margin: var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;}
input:is([type="radio"], [type="checkbox"]) + .description{font-size: var(--font-size);color: var(--color-black-extra-soft);cursor: pointer;user-select: none;}
input:is([type="radio"], [type="checkbox"]):checked + .description{color: var(--color-purple-dark);}
input.sm:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url], [type=datetime-local]), select.sm, textarea.sm{padding: 12px;font-size: var(--font-size-sm);}
input:is([type="radio"], [type="checkbox"]).sm{width: var(--font-size-sm);height: var(--font-size-sm);margin: 12px 0;}
textarea{resize: none;line-height: 1.4;}
.code:is(input,textarea){font-family: monospace;font-size: 14px;}
input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url], [type=datetime-local]):is(:hover, :focus), select:is(:hover, :focus), textarea:is(:hover, :focus){-webkit-box-shadow: 0 0 0 1px var(--color-purple),  0 0 var(--gap-sm) rgba(var(--color-purple-rgb),.1);box-shadow: 0 0 0 1px var(--color-purple),  0 0 var(--gap-sm) rgba(var(--color-purple-rgb),.1);}
input:disabled{-webkit-box-shadow: none;box-shadow: none;background-color: rgba(var(--color-purple-rgb), .05);pointer-events: none;color: var(--color-black-extra-soft);}
/* INFO: .filters */
section.filters{padding: var(--gap) 0;background-color: var(--color-background);-webkit-box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);box-shadow: 0 0 0 1px rgba(var(--color-purple-rgb),.1),  0 0 var(--gap) rgba(var(--color-purple-rgb),.1);}
section.filters > [class^="container-"]{ display: flex; flex-direction: column; gap: var(--gap);}
section.filters form {display: flex;gap: var(--gap);align-items: flex-end;justify-content: space-between;}
section.filters form > .fields + *{margin-top: 0;}
section.filters form > .fields {display: flex;flex-wrap: wrap;}
@media only screen and (max-width: 1024px){
    section.filters form{flex-wrap: wrap;justify-content: flex-end;}
    section.filters form  > .fields{width: 100%;}
}


/* INFO: .empty-results */
.empty-results + *, * + .empty-results{margin-top: var(--gap-lg);}
.empty-results{padding: var(--gap-lg) var(--gap);background-color: var(--color-background-dark);color: var(--color-purple-soft);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);text-align: center;font-size: var(--font-size-xl);font-weight: var(--font-weight-bold);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);}
.empty-results > [class^="material-"]{font-size: 28px;color: var(--color-purple-soft);padding: var(--gap-sm);background-color: var(--color-white);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: var(--shadow-line), var(--shadow);box-shadow: var(--shadow-line), var(--shadow);margin-bottom: var(--gap);}
section.login > [class^="container-"]{min-height: calc(100vh - var(--footer-height) - var(--menu-height));display: flex;align-items: center;justify-content: space-between;}
/* chart-boxed */
.charts-boxed {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap-xxs);user-select: none;}
.charts-boxed > div{background-color: var(--color-purple-pastel);border-radius: var(--border-radius);position: relative;display: flex;gap: var(--gap-sm);flex-direction: column;padding: var(--padding);}
.charts-boxed > div > .result{font-size: calc(var(--font-size-xl) * 1.2);line-height: 1;color: var(--color-white);text-align: right;font-weight: var(--font-weight-bold);text-shadow: 0 2px 1px rgba(0,0,0,.15);}
.charts-boxed > div > .info{display: flex;align-items: center;gap: var(--gap-xs);text-transform: uppercase;font-size: var(--font-size-xs);color: var(--color-white);line-height: 1;}
@media only screen and (max-width: 1024px){
    .charts-boxed{grid-template-columns: 1fr;}
    .charts-boxed > div{aspect-ratio: auto;padding: var(--gap-xs);}
    .charts-boxed > div > .result, .charts-boxed > div > .info{position: relative;padding: 0;}
    .charts-boxed > div > .result{text-align: right;display: block;}
}
/* ol.services */
ol.services{display: grid;grid-template-columns: repeat(2, 1fr);background-color: var(--color-background-dark);gap: 1px;padding: 1px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);overflow: hidden;}
ol.services > li{display: flex;align-items: center;justify-content: space-between;gap: var(--gap);background-color: var(--color-background);padding: var(--gap-xs);}
ol.services > li > .name{color: var(--color-purple-dark);font-weight: var(--font-weight-bold);}
@media only screen and (max-width: 1024px){
    ol.services{grid-template-columns: 1fr;}
}

ol.ssh-keys{display: flex;flex-direction: column;gap: var(--gap-xxs);}
ol.ssh-keys > li{display: flex;align-items: center;justify-content: space-between;gap: var(--gap);background-color: var(--color-background);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);padding: var(--gap-xs);-webkit-box-shadow: var(--shadow-line);box-shadow: var(--shadow-line);}
ol.ssh-keys > li > .info{
    display: flex;
    gap: var(--gap-xs);
    color: var(--color-purple-dark);font-weight: var(--font-weight-strong);font-size: calc(var(--font-size) + 1px);
}

.card-boxed-app{overflow: hidden;}
.card-boxed-app > picture {aspect-ratio: 1.5;background-color: var(--color-purple-soft);padding: 25% 20%;}
.card-boxed-app.current > picture {background-color: var(--color-purple);}
.card-boxed-app > picture > img{object-fit: contain;width: 100%;height: 100%;}





.list-dns-records {display: grid;gap: var(--gap-xs);grid-template-columns: repeat(2, 1fr);}
[class^="card-dns-record"] > .content{display: flex;align-items: center;gap: var(--gap-sm);}
[class^="card-dns-record"] > .content > [class^="type-"]{background-color: var(--color-purple-soft);color: var(--color-white);width: 48px;height: 48px;font-size: var(--font-size-xs);display: flex;align-items: center;justify-content: center;-webkit-border-radius: 48px;border-radius: 48px;font-weight: var(--font-weight-strong);position: relative;}
[class^="card-dns-record"] > .content > [class^="type-"] > [class^="status-"]{width: 10px;height: 10px;border-radius: 10px;background-color: var(--color-red);position: absolute;top: 0;right: 0;-webkit-box-shadow: 0 0 0 2px var(--color-white);box-shadow: 0 0 0 2px var(--color-white);}
[class^="card-dns-record"] > .content > [class^="type-"] > .status-1{background-color: var(--color-green);}
[class^="card-dns-record"] > .content > .type-A{background-color: var(--color-green);}
[class^="card-dns-record"] > .content > .type-NS{background-color: var(--color-purple-dark);}
[class^="card-dns-record"] > .content > div:is(.ttl, .record){display: flex;flex-direction: column;}
[class^="card-dns-record"] > .content > div:is(.ttl, .record) > small{color: var(--color-black-extra-soft);color: rgba(var(--color-purple-rgb), .3);font-size: var(--font-size-xs);font-weight: var(--font-weight-bold);}





[class^="card-info"] > .content{aspect-ratio: 2;position: relative}
[class^="card-info"] > .content > [class^="heading-"]{padding-right: 25%;}
[class^="card-info"] > .content > [class^="material-"]{position: absolute;right: var(--padding);bottom: var(--padding);margin: 0;display: flex;align-items: center;justify-content: center;color: var(--color-white);font-size: calc(var(--font-size-xl) * 2);z-index: -1;}

@media only screen and (max-width: 768px){
    [class^="card-info"] > .content{aspect-ratio: 1.5; padding-bottom: calc(var(--padding) * 2 + var(--font-size-xl) * 2) !important;}
}

section.image .content {-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);position: relative;background-color: var(--color-purple-soft);height: 20vh;}
section.image .content picture{position: absolute;top: calc(0px - var(--gap));right: 0;left: 50%;bottom: 0;display: block;}
section.image .content picture img{object-position: bottom right;position: absolute;width: 100%;height: 100%;object-fit: contain;}




/* INFO: illustration-block */
[class^="illustration-block"]{background-color: var(--color-purple-pastel);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);aspect-ratio: 1.6;display: block;position: relative;overflow: hidden;
pointer-events: none;
user-select: none;
}
[class^="illustration-block"] img{position: absolute;top: var(--gap-sm);left: 0;width: 100%;height: calc(100% - var(--gap-sm));object-fit: contain;object-position: bottom center;filter: drop-shadow(0 var(--gap) var(--gap) var(--color-purple-pastel-dark));}
[class^="illustration-block"]::before{content: " ";display: block;position: absolute;}
[class^="illustration-block"] + *, * +  [class^="illustration-block"]{margin-top: var(--gap-sm);}
[class^="illustration-block"][class*="-error"]{background-color: var(--color-red-pastel);}
[class^="illustration-block"][class*="-error"] img{filter: drop-shadow(0 var(--gap) var(--gap) var(--color-red-pastel-dark));    }
[class^="illustration-block"][class*="-active"]{background-color: var(--color-green-pastel);}
[class^="illustration-block"][class*="-active"] img{filter: drop-shadow(0 var(--gap) var(--gap) var(--color-green-pastel-dark));}
/* OK: section.help */
section.help  > [class^="container-"]{display: flex;flex-direction: column;gap: var(--gap);}
section.help .head{overflow: hidden;background-color: var(--color-background-dark);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap-lg);}
section.help .head > .info{padding: var(--padding-sections);}
section.help .head > .image{padding-top: var(--padding);user-select: none;pointer-events: none;display: flex;justify-content: flex-end;align-items: flex-end;}
section.help .head > .image img{max-width: 100%;width: auto;-webkit-filter: drop-shadow(0px var(--gap-sm) var(--gap) rgba(var(--color-purple-rgb), .5));filter: drop-shadow(0px var(--gap-sm) var(--gap) rgba(var(--color-purple-rgb), .5));}
section.help .intro {color: var(--color-black);}
@media only screen and (max-width: 1366px){
    section.help .head > .info{padding: var(--padding);}
}
@media only screen and (max-width: 768px){
    section.help .head{grid-template-columns: 1fr;}
    section.help .head > .info{padding-bottom: 0;}
    section.help .head > .image{padding: 0 0 0 var(--padding)}
}

/* OK: section.error */
section.error  > [class^="container-"]{display: flex;flex-direction: column;gap: var(--gap);}
section.error .head{overflow: hidden;background-color: var(--color-red);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap-lg);}
section.error .head > .info{padding: var(--padding-sections);}
section.error .head > .image{padding-top: var(--padding);user-select: none;pointer-events: none;display: flex;justify-content: flex-end;align-items: flex-end;}
section.error .head > .image img{max-width: 100%;width: auto;-webkit-filter: drop-shadow(0px var(--gap-sm) var(--gap) var(--color-red-dark));filter: drop-shadow(0px var(--gap-sm) var(--gap) var(--color-red-dark));}
@media only screen and (max-width: 1366px){
    section.error .head > .info{padding: var(--padding);}
}
@media only screen and (max-width: 768px){
    section.error .head{grid-template-columns: 1fr;}
    section.error .head > .info{padding-bottom: 0;}
    section.error .head > .image{padding: 0 0 0 var(--padding)}
}





/* INFO */
.site-welcome-picture .content{overflow: hidden;border-radius: var(--border-radius);background-color: var(--color-background-dark);padding-right: 35%;position: relative;}

.site-welcome-picture .content > .desktop {mix-blend-mode: multiply;position: relative;}
.site-welcome-picture .content > .desktop::after {
    content: " ";
    position: absolute;
    inset: 0;
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
}

.site-welcome-picture .content > .mobile {
    position: absolute;
    top: calc(var(--gap-sections) * 2);
    bottom: 0;
    right: calc(var(--gap-sections) * 2);
    width: 25%;
    object-fit: contain;
    overflow: hidden;
    box-shadow: var(--shadow-line), var(--shadow);
}

.site-welcome-picture .content > .mobile img{
    position: relative;
    width: 100%;

    object-fit: cover;
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
}
.site-welcome-picture .content > a{
 
    position: absolute;
    bottom: var(--gap-xs);
    left: var(--gap-xs);
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: var(--color-white);
    color: var(--color-purple-soft);
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

/* redirect-steps */
.redirect-steps{display: flex;justify-content: space-between; align-items: center;position: relative;gap: var(--gap-sm);}
.redirect-steps::before{content: " ";position: absolute;top: 50%;left: var(--gap);right: var(--gap);border-top: 1px dashed var(--color-background-dark);z-index: 0;-webkit-animation: redirect .1s linear infinite;animation: redirect .1s linear infinite;}
.redirect-steps > :is(.from, .to, [class^="redirect-type"]){background-color: var(--color-background);padding: var(--padding-xxs) var(--padding-xs);-webkit-box-shadow: var(--shadow-line), var(--shadow-soft);box-shadow: var(--shadow-line), var(--shadow-soft);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);font-size: var(--font-size-xs);color: var(--color-purple-pastel-dark);z-index: 2;
display: flex;
align-items: center;
gap: var(--gap-xs);
}
.redirect-steps > :is(.from, .to, [class^="redirect-type"]) > span{
    font-size: 28px;
}

.redirect-steps > [class^="redirect-type"]{background-color: var(--color-white);color: var(--color-purple-pastel);pointer-events: none;user-select: none;}
@-webkit-keyframes redirect { 
    100% {-webkit-transform: translateX(6px);}
}
@keyframes redirect { 
    100% {transform: translateX(6px);}
}

@-webkit-keyframes redirect_vertical { 
    100% {-webkit-transform: translateY(6px);}
}
@keyframes redirect_vertical { 
    100% {transform: translateY(6px);}
}
@media only screen and (max-width: 768px){
    .redirect-steps{flex-direction: column;gap: var(--gap-lg);}
    .redirect-steps::before{top: var(--gap-sm);bottom: var(--gap-sm);left: 50%;right: auto;
        border-top: none;
        border-right: 1px dashed var(--color-background-dark);
        -webkit-animation: redirect_vertical .2s linear infinite;animation: redirect_vertical .2s linear infinite;
    }
   

}


/* INFO: card-log */
section.log [class^="grid-"]{gap: var(--gap-xxs);}
.card-log {position: relative;background-color: var(--color-white);-webkit-box-shadow: var(--shadow-line), var(--shadow-soft);box-shadow: var(--shadow-line), var(--shadow-soft);padding: var(--padding);display: grid;gap: var(--gap);grid-template-columns: repeat(4, 1fr);}
.card-log > [class^="tags-"]{align-items: flex-start;gap: var(--gap-xxs);}
.card-log > .info{margin: 0;grid-column: 2 / span 3;display: flex;flex-direction: column;gap: var(--gap-xs);}
.card-log > .info > .date {display: flex;gap: var(--gap-xxs);align-items: center;font-size: var(--font-size);color: var(--color-purple);}
.card-log > .info > .date > .humans {font-size: var(--font-size-xs);color: var(--color-purple-soft);}
.card-log > .info > .message{background-color: var(--color-black);padding: var(--padding-xs);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);color: var(--color-purple-soft);font-family:  monospace;font-size: 13px;color: var(--color-purple-pastel);}
@media only screen and (max-width: 1366px){
    .card-log {grid-template-columns: repeat(3, 1fr);}
    .card-log > .info{grid-column: 2 / span 2;}
}
@media only screen and (max-width: 768px){

    .card-log {grid-template-columns: 1fr;padding: var(--padding-sm);}
    .card-log > .info{grid-column: 1 / 1;}
    .card-log > .info > .date{flex-direction: column;align-items: flex-start;gap: 0;}
}