/** Import CSS for other pages **/

@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css');
@import url('https://cdn.vacso.cloud/site-icons/css/veloxi.min.css');
@import url('./account.css');



/** Import fonts **/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'vlxico';
    src:
        url('/fonts/vlxico.eot?odwmjk');
    src:
        url('/fonts/vlxico.eot?odwmjk#iefix') format('embedded-opentype'),
        url('/fonts/vlxico.ttf?odwmjk') format('truetype'),
        url('/fonts/vlxico.woff?odwmjk') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/** General CSS **/

:root {


    /* Default Values */
    --padding-smal: 10px;
    --padding-big: 20px;

    --border-radius-small: 4px;
    --border-radius: 8px;
    --border-radius-large: 16px;
    --border-radius-round: 10000px;

    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Exo', sans-serif;
    --font-tertairy: 'Calistoga', cursive;
    --font-code: 'Roboto Mono', monospace;
    /**--font-secondary: 'Poppins', sans-serif;**/

    --height-navbar: 100px;
    --height-half-navbar: var(--height-navbar) / 2;

    --timing: .3s ease;

    --font-size: clamp(16px, 2vw, 16px);

    --fs-xxxx-larger: clamp(48px, 2vw, 32px);
    --fs-xxx-larger: clamp(40px, 2vw, 32px);
    --fs-xx-larger: clamp(32px, 2vw, 28px);
    --fs-x-larger: clamp(28px, 2vw, 24px);
    --fs-larger: clamp(24px, 2vw, 24px);
    --fs-large: clamp(20px, 2vw, 20px);
    --fs-medium: clamp(16px, 2vw, 16px);
    --fs-small: clamp(14px, 2vw, 14px);
    --fs-smaller: clamp(12px, 5vw, 12px);

    --grid-rows: 1;
    --grid-columns: 2;

    --gap: 32px;
    --row-temp: repeat(var(--grid-rows), auto);
    --column-temp: repeat(var(--grid-columns), 1fr);



    --navbar-height: 80px;
    --sidebar-width: 300px;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1140px;
    --container-width--xxl: 1360px;
    --container-width--xxxl: 1360px;




    /* Main Colors **/

    --text-clr: #ffffff;
    --text-clr-dark: #8c94a0;
    --text-clr-invert: #2f2f2f;
    --link-clr: #ef4444;
    --link-clr-invert: #ef4444;

    --hover-clr: #9098a7;
    --border-clr: #9098a7;

    --bg-clr-light: #27313f;
    --bg-clr: #18212f;
    --bg-clr-dark: #111827;
    --bg-clr-invert-light: #fff;
    --bg-clr-invert: #e4e4e4;
    --bg-clr-invert-dark: #d9d9d9;

    --nav-box-shadow: 0 1px 2px 0 #0000001a;




    --primary: #202020;
    --secondary: #f3f3f3;
    --accent: #ef4444;
    --accent-trans-50: rgba(239, 68, 68, .5);
    --accent-trans-20: rgba(239, 68, 68, .2);
    --secondary-accent: #ef4444;

    --primary-100: color-mix(in oklab, var(--primary) 10%, white);
    --primary-200: color-mix(in oklab, var(--primary) 20%, white);
    --primary-300: color-mix(in oklab, var(--primary) 30%, white);
    --primary-400: color-mix(in oklab, var(--primary) 40%, white);
    --primary-500: color-mix(in oklab, var(--primary) 50%, white);
    --primary-600: color-mix(in oklab, var(--primary) 60%, white);
    --primary-700: color-mix(in oklab, var(--primary) 70%, white);
    --primary-800: color-mix(in oklab, var(--primary) 80%, white);
    --primary-900: color-mix(in oklab, var(--primary) 90%, white);
    --primary-1000: color-mix(in oklab, var(--primary) 100%, white);

    --secondary-100: color-mix(in oklab, var(--secondary) 10%, black);
    --secondary-200: color-mix(in oklab, var(--secondary) 20%, black);
    --secondary-300: color-mix(in oklab, var(--secondary) 30%, black);
    --secondary-400: color-mix(in oklab, var(--secondary) 40%, black);
    --secondary-500: color-mix(in oklab, var(--secondary) 50%, black);
    --secondary-600: color-mix(in oklab, var(--secondary) 60%, black);
    --secondary-700: color-mix(in oklab, var(--secondary) 70%, black);
    --secondary-800: color-mix(in oklab, var(--secondary) 80%, black);
    --secondary-900: color-mix(in oklab, var(--secondary) 90%, black);
    --secondary-1000: color-mix(in oklab, var(--secondary) 100%, black);

    --accent-100: color-mix(in oklab, var(--accent) 20%, white);
    --accent-200: color-mix(in oklab, var(--accent) 40%, white);
    --accent-300: color-mix(in oklab, var(--accent) 60%, white);
    --accent-400: color-mix(in oklab, var(--accent) 80%, white);
    --accent-600: color-mix(in oklab, var(--accent) 100%, black);
    --accent-600: color-mix(in oklab, var(--accent) 90%, black);
    --accent-700: color-mix(in oklab, var(--accent) 80%, black);
    --accent-800: color-mix(in oklab, var(--accent) 70%, black);
    --accent-900: color-mix(in oklab, var(--accent) 60%, black);
    --accent-1000: color-mix(in oklab, var(--accent) 50%, black);


    /* Support Colors **/

    /** Success Color **/
    --green-200: hsl(120, 100%, 82%);
    --green-300: hsl(120, 100%, 65%);
    --green-500: hsl(120, 100%, 45%);
    --green-700: hsl(120, 100%, 28%);


    /** Warning Color **/
    --orange-200: hsl(38, 100%, 82%);
    --orange-300: hsl(38, 100%, 65%);
    --orange-500: hsl(38, 100%, 45%);
    --orange-700: hsl(38, 100%, 28%);

    /** Danger Color **/
    --red-200: hsl(356, 100%, 82%);
    --red-300: hsl(356, 100%, 65%);
    --red-500: hsl(356, 100%, 45%);
    --red-700: hsl(356, 100%, 28%);

    /** Info Color **/
    --blue-200: hsl(221, 100%, 82%);
    --blue-300: hsl(221, 100%, 65%);
    --blue-500: hsl(221, 100%, 45%);
    --blue-700: hsl(221, 100%, 28%);

}

/*
:root[data-theme="light"] {
    --text: #1C1C1C;
    --background: #d1d1d1;
    --primary: #dbdbdb;
    --secondary: #acaaaa;
    --accent: #004570;
}

:root[data-theme="dark"] {
    --text: #E4E4E4;
    --background: #2e2e2e;
    --primary: #242424;
    --secondary: #555353;
    --accent: #8fd4ff;
}


@media (prefers-color-scheme: light) {
    :root {
        --text: #1C1C1C;
        --background: #d1d1d1;
        --primary: #dbdbdb;
        --secondary: #acaaaa;
        --accent: #004570;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #E4E4E4;
        --background: #2e2e2e;
        --primary: #242424;
        --secondary: #555353;
        --accent: #8fd4ff;
    }
}
*/


* {
    margin: 0;
    padding: 0;
    line-height: var(--lh);
    font-family: var(--ff) !important;
    box-sizing: border-box;
    transition:
        color .3s ease-in-out,
        background-color .3s ease-in-out,
        box-shadow .3s ease-in-out,
        border-color .3s ease-in-out,
        text-decoration .3s ease-in-out
    ;
    transition: filter var(--timing);
}

html { overflow-x: hidden; font-size: 10px; min-height: 100vh; background-color: var(--bg-clr-dark); }

h1, .h1 { --fs: var(--fs-xxxx-larger); --lh: 1; --fw: 900; }
h2, .h2 { --fs: var(--fs-xxx-larger); --lh: 1; --fw: 900; }
h3, .h3 { --fs: var(--fs-xx-larger); --lh: 1; --fw: 700; }
h4, .h4 { --fs: var(--fs-x-larger); --lh: 1; --fw: 700; }
h5, .h5 { --fs: var(--fs-larger); --lh: 1; --fw: 700; }
h6, .h6 { --fs: var(--fs-large); --lh: 1; --fw: 700; }
p, .p { --fs: var(--fs-medium); --lh: 1.2; --fw: normal; }

div, .div { --fs: var(--fs-medium); --lh: 1.2; --fw: normal; }
a { --fs: var(--fs-x-medium); --lh: 1.2; text-decoration: none; }
li, .li { --fs: var(--fs-medium); --lh: 1.2; --fw: normal; }
span, .span { --fs: var(--fs-medium); --lh: 1.2; --fw: normal; }
input, .input { --fs: var(--fs-medium); --lh: 1.2; --fw: 500; }
select, .select { --fs: var(--fs-medium); --lh: 1.2; --fw: 500; }
textarea, .textarea { --fs: var(--fs-medium); --lh: 1.2; --fw: 500; }
button, .button { --fs: var(--fs-medium); --lh: 1.2; --fw: 500; }
small, .small, small *, .small * { --fs: var(--fs-small); --lh: 1.2; --fw: normal; }

*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,.p,a,.a,li,.li,span,.span,input,.input,select,.select,textarea,.textarea,button,.button,div,.div,::before,::after){ font-size: var(--fs) !important; --ff: var(--font-primary); font-weight: var(--fw) !important; color: var(--clr-text); --clr-text: var(--text-clr-dark); }
*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6) { --ff: var(--font-secondary); --clr-text: var(--text-clr) !important; }
*:is(div.toast-message) { --clr-text: var(--text-clr) !important; }
*:is(em) { font-style: italic; }
*:is(p strong, pre strong, a strong, li strong, span strong, h3 strong, h4 strong, h5 strong, h6 strong) { --fw: bold; }

.font-code { --ff: var(--font-code) !important; }

.--no-scroll { overflow: hidden; }

:not(.vlx-outer-modal, .btn).--loading {
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
    filter: blur(1px);
    animation: blur-pulse infinite 2s;
}




/** Scrollbar **/

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #ffffff2f; }
::-webkit-scrollbar-thumb { background: #ffffff2f; border-radius: 5px; transition: all var(--timing); }
::-webkit-scrollbar-thumb:hover { background: #ffffff64; transition: all var(--timing); }



/** Navbar **/

header { width: 100%; }
header nav .btn-group { padding: 32px 0 0 !important; margin: 0 !important; }

.show-nav-false header { display: none; }



/*** Footer ***/

footer { padding-top: 65px; background-color: var(--primary); min-height: 150px; }
footer hr { width: 80%; margin: 0 auto; border: 2px solid var(--darkgray); }
footer .flex-box { width: 80%; margin: 20px auto; display: flex; justify-content: space-between; align-items: start; flex-direction: row; }
footer .block-1 { display: flex; justify-content: start; align-items: start; flex-direction: column; }
footer .block-1 h3 { color: var(--accent); }
footer .block-1 p { margin-top: 10px; }
footer .block-2 { display: flex; flex-direction: column; justify-content: start; align-items: start; }
footer .block-2 a { margin-bottom: 10px; width: 40px; height: 40px; background-color: var(--accent); border-radius: 5px; transition: all .3s; }
footer .block-2 a:hover { transform: scale(1.02); transition: all .3s; }
footer .block-2 a img { width: 40px; height: 40px; }

@media only screen and (max-width: 750px) {
    footer .block-2-1 { width: 75%; }
    footer .block-2-1 p { width: 100%; margin: 0; }
}
@media only screen and (max-width: 500px) {
    footer .flex-box-1 { display: flex; justify-content: space-around; align-items: center; flex-direction: column; }
    footer .block-1 { width: 100%; }
    footer .block-2 { width: 100%; }
}



/** Animations **/

@keyframes load-animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes blur-pulse {
    0% { filter: blur(1px); }
    50% { filter: blur(5px); }
    100% { filter: blur(1px); }
}

@keyframes load-pulse {
    0% { background: #808080; }
    50% { background: #656565; }
    100% { background: #808080; }
}

.t1 { opacity: 0; animation: load-animation 1s ease-out 0s 1 normal forwards; }
.t2 { opacity: 0; animation: load-animation 1s ease-out 0.2s 1 normal forwards; }
.t3 { opacity: 0; animation: load-animation 1s ease-out 0.4s 1 normal forwards; }
.t4 { opacity: 0; animation: load-animation 1s ease-out 0.6s 1 normal forwards; }
.t5 { opacity: 0; animation: load-animation 1s ease-out 0.8s 1 normal forwards; }
.t6 { opacity: 0; animation: load-animation 1s ease-out 1.0s 1 normal forwards; }
.t7 { opacity: 0; animation: load-animation 1s ease-out 1.2s 1 normal forwards; }
.t8 { opacity: 0; animation: load-animation 1s ease-out 1.4s 1 normal forwards; }
.t9 { opacity: 0; animation: load-animation 1s ease-out 1.6s 1 normal forwards; }
.t10 { opacity: 0; animation: load-animation 1s ease-out 1.8s 1 normal forwards; }
.t11 { opacity: 0; animation: load-animation 1s ease-out 2.0s 1 normal forwards; }
.t12 { opacity: 0; animation: load-animation 1s ease-out 2.2s 1 normal forwards; }
.t13 { opacity: 0; animation: load-animation 1s ease-out 2.4s 1 normal forwards; }
.t14 { opacity: 0; animation: load-animation 1s ease-out 2.6s 1 normal forwards; }
.t15 { opacity: 0; animation: load-animation 1s ease-out 2.8s 1 normal forwards; }
.t16 { opacity: 0; animation: load-animation 1s ease-out 3.0s 1 normal forwards; }
.t17 { opacity: 0; animation: load-animation 1s ease-out 3.2s 1 normal forwards; }
.t18 { opacity: 0; animation: load-animation 1s ease-out 3.4s 1 normal forwards; }
.t19 { opacity: 0; animation: load-animation 1s ease-out 3.6s 1 normal forwards; }
.t20 { opacity: 0; animation: load-animation 1s ease-out 3.8s 1 normal forwards; }





/**** Components ****/


/*** Uncategorized ***/

/** Container **/
.container { --width: var(--container-width); --padding: 2rem; width: 100%; max-width: var(--width); margin-left: auto; margin-right: auto; padding-left: var(--padding); padding-right: var(--padding); position: relative; }

@media (min-width: 576px) {
    .container { --width: var(--container-width--sm); }
}

@media (min-width: 768px) {
    .container { --width: var(--container-width--md); }

    .container.container--x-small { --width: 700px; }
}

@media (min-width: 992px) {
    .container { --width: var(--container-width--lg); }
}

@media (min-width: 1200px) {
    .container { --width: var(--container-width--xl); }

    .container.container--small { --width: 1000px; }
    .container.container--medium { --width: 1100px; }
}

@media (min-width: 1400px) {
    .container { --width: var(--container-width--xxl); }

    .container.container--medium { --width: 1200px; }
}

@media (min-width: 1600px) {
    .container { --width: var(--container-width--xxxl); }

    .container.container--large { --width: 1500px; }
}
@media (min-width: 1700px) {
    .container.container--large { --width: 1655px; }
}


/** Whitespace **/
.wst--small { padding-top: 32px; }
.mt--small { margin-top: 32px; }
.wst--medium { padding-top: 64px; }
.mt--medium { margin-top: 64px; }
.wst--large { padding-top: 128px; }
.mt--large { margin-top: 128px; }
.wsb--small { padding-bottom: 32px; }
.mb--small { margin-bottom: 32px; }
.wsb--medium { padding-bottom: 64px; }
.mb--medium { margin-bottom: 64px; }
.wsb--large { padding-bottom: 128px; }
.mb--large { margin-bottom: 128px; }


/** Backgrounds **/
.bg--light { background-color: var(--bg-clr-light); }
.bg--normal { background-color: var(--bg-clr); }
.bg--dark { background-color: var(--bg-clr-dark); }
.bg--invert-light { background-color: var(--bg-clr-invert-light); }
.bg--invert-normal { background-color: var(--bg-clr-invert); }
.bg--invert-dark { background-color: var(--bg-clr-invert-dark); }


/** Text **/
.vlx-text * { text-align: start; }
.vlx-text.vlx-text--start * { text-align: start; }
.vlx-text.vlx-text--center * { text-align: center; display: block; }
.vlx-text.vlx-text--end * { text-align: end; }


/** Backgrounds **/
.vlx-text p.width--small { max-width: 60% !important; }
.vlx-text div p.width--small { max-width: 80% !important; }
.vlx-text p.width--normal { max-width: 80% !important; }
.vlx-text div p.width--normal { max-width: 90% !important; }
.vlx-text p.width--large { max-width: 100% !important; }


/** BTN Group **/
.btn-group { display: flex; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 32px; flex-wrap: wrap; }
.btn-group--left { justify-content: left; }
.btn-group--right { justify-content: right; }

@media (min-width: 1200px) {
    .btn-group { flex-wrap: nowrap; }
}


/** Display **/
.d-grid { display: grid !important; }
.d-grid--center { display: grid !important; place-content: center !important; }
.d-flex { display: flex !important; }
.d-flex--center { display: flex !important; justify-content: center !important; align-items: center; }
.d-flex.d-flex--ver { display: flex !important; flex-direction: column; }
.d-flex.d-flex--hor { display: flex !important; flex-direction: row; }
.d-none { display: none !important; }

.span--1 { grid-column: span 1; }
.span--2 { grid-column: span 2; }
.span--3 { grid-column: span 3; }
.span--4 { grid-column: span 4; }
.span--5 { grid-column: span 5; }
.span--6 { grid-column: span 6; }
.span--7 { grid-column: span 7; }
.span--8 { grid-column: span 8; }


/** Display **/
.d-grid { display: grid !important; }
.d-grid--center { display: grid !important; place-content: center !important; }
.d-flex { display: flex !important; }
.d-flex--center { display: flex !important; justify-content: center !important; align-items: center; }
.d-none { display: none !important; }


/** Gaps **/
.g-10  { row-gap: 1rem !important; column-gap: 1rem !important; }
.gx-10 { row-gap: 1rem !important; }
.gy-10 { column-gap: 1rem !important; }

.g-20  { row-gap: 2rem !important; column-gap: 2rem !important; }
.gx-20 { row-gap: 2rem !important; }
.gy-20 { column-gap: 2rem !important; }

.g-40  { row-gap: 4rem !important; column-gap: 4rem !important; }
.gx-40 { row-gap: 4rem !important; }
.gy-40 { column-gap: 4rem !important; }


/** Toasts (toastr) **/
.vlx-toast {
    position: relative;
    z-index: 999999;
}

#toast-container > .toast { border-radius: var(--border-radius-small); transition: opacity .3s; }
#toast-container > .toast {
    -moz-box-shadow: 0 0 8px var(--bg-clr-light) !important;
    -webkit-box-shadow: 0 0 8px var(--bg-clr-light) !important;
    box-shadow: 0 0 8px var(--bg-clr-light) !important;
}
#toast-container .toast .toast-message { font-family: var(--font-primary) !important; }

#toast-container > .toast:before { position: fixed; font-family: vlxico; font-size: 24px; line-height: 18px; float: left; color: #FFF; padding-right: 0.5em; margin: auto 0.5em auto -1.5em; }
#toast-container > .toast-info:before { content: "\e902"; }
#toast-container > .toast-success:before { content: "\e901"; }
#toast-container > .toast-warning:before { content: "\e903"; }
#toast-container > .toast-error:before { content: "\e900"; }









/*** Buttons ***/

.link { cursor: pointer; }

.btn { --clr: var(--text-clr); --clr-bg: var(--bg-clr); --border: 1px solid transparent; --padding: 0; color: var(--clr); cursor: pointer; position: relative; }
.btn:not(.btn.btn--link,.btn.btn--readmore) { background-color: var(--clr-bg); border: var(--border); padding: var(--padding); min-height: 56px; min-width: min(100%, 360px); border-radius: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn .vlx-icon { --clr: var(--text-clr); }

.btn.btn--small { --padding: 0; --fs: 14px; min-height: 36px !important; min-width: min(100%, 260px) !important; }
.btn.btn--disabled, .btn.--disabled { cursor: not-allowed; opacity: 0.5; }

.btn.btn--primary { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
.btn.btn--primary .vlx-icon { --clr: var(--text-clr-invert); }
.btn.btn--primary-outline { --clr: var(--accent); --border: 1px solid var(--accent); --clr-bg: transparent; }
.btn.btn--primary-outline .vlx-icon { --clr: var(--accent); }
.btn.btn--secondary { --clr: var(--text-clr); --border: 1px solid var(--bg-clr); --clr-bg: var(--bg-clr-light); }
.btn.btn--secondary .vlx-icon { --clr: var(--text-clr); }
.btn.btn--secondary:hover { --clr: var(--text-clr); --border: 1px solid var(--accent); --clr-bg: var(--bg-clr-light); }
.btn.btn--secondary-outline { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
.btn.btn--secondary-outline .vlx-icon { --clr: var(--text-clr-invert); }
.btn.btn--link { --clr: var(--accent); --fw: normal; text-decoration: underline; text-decoration-color: var(--accent); --fs: var(--fs-medium); }
.btn.btn--link .da-cion { --clr: var(--accent); }

.btn.btn--danger { --clr: var(--text-clr-invert); --border: 1px solid var(--red-300); --clr-bg: var(--red-300); }
.btn.btn--danger .vlx-icon { --clr: var(--text-clr-invert); }
.btn.btn--warning { --clr: var(--text-clr-invert); --border: 1px solid var(--orange-300); --clr-bg: var(--orange-300); }
.btn.btn--warning .vlx-icon { --clr: var(--text-clr-invert); }
.btn.btn--success { --clr: var(--text-clr-invert); --border: 1px solid var(--green-300); --clr-bg: var(--green-300); }
.btn.btn--success .vlx-icon { --clr: var(--text-clr-invert); }
.btn.btn--info { --clr: var(--text-clr-invert); --border: 1px solid var(--blue-300); --clr-bg: var(--blue-300); }
.btn.btn--info .vlx-icon { --clr: var(--text-clr-invert); }

.btn.--loading { cursor: not-allowed; animation: pulse 1.5s infinite; }




/*** Icons ***/
.vlx-icon { --clr: var(--accent); }
.vlx-icon.vlx-icon--dot { --w: 4px; --h: 4px; background: var(--clr); margin: 6px 0; border-radius: 50%; }
.vlx-icon, .vlx-icon--default { --w: 16px; --h: var(--w); }
.vlx-icon.vlx-icon--medium { --w: 24px; --h: var(--w); }
.vlx-icon.vlx-icon--large { --w: 32px; --h: var(--w); }
.vlx-icon.vlx-icon--x-large { --w: 36px; --h: var(--w); }
.vlx-icon.vlx-icon--xx-large { --w: 40px; --h: var(--w); }


.vlx-icon--wrapper { padding: 15px; background-color: var(--accent-trans-20); border-radius: var(--border-radius); }

.vlx-icon--wrapper:has(.vlx-icon--large) { padding: 12px; }
.vlx-icon--wrapper:has(.vlx-icon--x-large) { padding: 12px; }
.vlx-icon--wrapper:has(.vlx-icon--xx-large) { padding: 12px; }




/*** Modals ***/
.vlx-outer-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; place-content: center; background-color: rgba(0, 0, 0, 0.25); }
.vlx-outer-modal.--active { display: grid; }


.vlx-modal { position: relative; background-color: var(--bg-clr); padding: 64px; border-radius: var(--border-radius); max-height: 70vh; min-width: 540px; overflow-y: scroll; }
.vlx-modal .vlx-input { position: relative; }
.vlx-modal .vlx-input::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; width: calc(100% + 8px); height: calc(100% + 8px); background: gray; animation: load-pulse 1.5s infinite; border-radius: var(--border-radius); opacity: 0; pointer-events: none; transition: opacity .5s; }
.vlx-outer-modal.--loading .vlx-modal .vlx-input::after { opacity: 1; }

.vlx-modal .vlx-close-btn { position: absolute; top: 16px; right: 16px; cursor: pointer; }




/*** Forms ***/
.vlx-form__box { width: 100%; margin-bottom: 32px; }
.vlx-form__box--hor { display: flex; gap: 16px; }
.vlx-form__box--hor > .vlx-input-box { width: 50%; }

.vlx-form__box:not(.vlx-form__box--hor) :is(.vlx-input-box):not(:last-child) { margin-bottom: 16px; }

.vlx-form__box label { display: block; margin-bottom: 8px; }
.vlx-form__box :is(input:not([type="submit"]),select,textarea) { --fs: 16px; width: 100%; padding: 4px; border-radius: var(--border-radius); border: 0; outline: 0 !important; background-color: var(--bg-clr-light); }
.vlx-form__box textarea { min-height: 200px; max-height: 450px; min-width: 250px; max-width: 1200px; }
.vlx-form__box *:is([readonly]) { cursor: not-allowed; }






/*** Headers ***/
.vlx-header {  }

/** Header > Home **/
.vlx-header.vlx-header--main { min-height: calc(20vh); display: flex; align-items: center; justify-content: center; flex-direction: column; background-size: cover; background-position: top; }
.vlx-header.vlx-header--main *:is(h1,h2,h3) { --lh: 1.25; }
.vlx-header.vlx-header--main .vlx-icon { --w: 60px; --h: 60px; --clr: var(--accent); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: .7; }


/** Header > server **/
.vlx-header--server { padding-top: 32px; }
.vlx-header--server .inner { padding: 16px; border-radius: var(--border-radius); background-color: var(--bg-clr); }

.vlx-header--server .vlx-top-bar {}
.vlx-header--server .vlx-top-bar { display: flex; justify-content: space-between; }
.vlx-header--server .vlx-top-bar .vlx-breadcrumbs { display: flex; align-items: center; gap: 8px; }
.vlx-header--server .vlx-top-bar a:has(.vlx-icon) { display: grid; place-content: center; }
.vlx-header--server .vlx-top-bar .vlx-icon { --clr: var(--text-clr-dark); }

.vlx-header--server .vlx-info-center {}
.vlx-header--server .vlx-info-center { margin-top: 32px; display: flex; align-items: center; gap: 16px; }
.vlx-header--server .vlx-info-center h1 { position: relative; }
.vlx-header--server .vlx-info-center h1::after { content: "unkown"; position: absolute; top: 25%; margin-left: 16px; transform: translateY(20%); padding: 4px 8px; font-size: var(--fs-small); font-weight: 400; border-radius: var(--border-radius); background-color: var(--orange-300); color: var(--text-clr-invert); }
.vlx-header--server .vlx-info-center h1[data-status="unkown"]::after { content: "unkown"; background-color: var(--orange-300); color: var(--text-clr-invert); }
.vlx-header--server .vlx-info-center h1[data-status="online"]::after { content: "online"; background-color: var(--green-300); color: var(--text-clr-invert); }
.vlx-header--server .vlx-info-center h1[data-status="offline"]::after { content: "offline"; background-color: var(--red-300); color: var(--text-clr-invert); }
.vlx-header--server .vlx-info-center .vlx-subtext { display: flex; align-items: center; gap: 8px; }
.vlx-header--server .vlx-info-center .vlx-subtext * { display: flex; align-items: center; gap: 8px; }
.vlx-header--server .vlx-info-center .vlx-subtext .vlx-icon--dot { --clr: var(--text-clr-dark); }

.vlx-header--server .vlx-tabs {}
.vlx-header--server .vlx-tabs { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.vlx-header--server .vlx-tabs > a { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px; background-color: var(--accent-trans-20); color: var(--accent); border-radius: var(--border-radius); }
.vlx-header--server .vlx-tabs > a .vlx-icon { transition: background-color .3s; }
.vlx-header--server .vlx-tabs > a.active { background-color: var(--accent); color: var(--text-clr-invert); }
.vlx-header--server .vlx-tabs > a.active .vlx-icon { --clr: var(--text-clr-invert); }






/*** Blocks ***/
.vlx-block__header { margin-bottom: 32px; }


/** Blocks > Text **/
.vlx-block--text { }
.vlx-block--text h2 { max-width: 80%; margin-bottom: 32px; }
.vlx-block--text p { max-width: 80%; }
.vlx-block--text .btn.btn--link { --fs: var(--fs-medium); color: var(--accent); }
.vlx-block--text .text p { margin-bottom: 32px; }
.vlx-block--text .text:has(img) { display: flex; flex-wrap: wrap; gap: 64px 32px; margin-bottom: 32px; }
.vlx-block--text .text:has(img) p { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text:has(img) div { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text:has(img) div p { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text img { width: 100%; height: 100%; max-height: 500px; border-radius: 16px; object-fit: cover; object-position: center; }

@media (min-width:1200px) {
    .vlx-block-text .vlx-text:has(img) { flex-wrap: nowrap; }
    .vlx-block-text .vlx-text img { width: 50%; }
    .vlx-block-text .vlx-text:has(img) p { max-width: 60%; }
    .vlx-block-text .vlx-text:has(img) div { max-width: 60%; }
}



/** Blocks > Items **/
.vlx-block--node {}
.vlx-block--node .inner { display: none; margin-top: 32px; padding: 32px; background-color: var(--bg-clr); border-radius: var(--border-radius); }
.vlx-block--node .inner.active { display: block; padding: 32px; background-color: var(--bg-clr); }

.vlx-block--node .inner--overview.active { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px; }
.vlx-block--node .inner--overview .heading { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.vlx-block--node .inner--overview h3 { --fw: 600; --fs: var(--fs-larger); margin-bottom: 4px; }
.vlx-block--node .inner--overview p:not(:last-child) { margin-bottom: 8px; }


.vlx-block--node .inner--usage.active { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px; }
.vlx-block--node .inner--usage .block__usage:not(:last-of-type) { margin-bottom: 32px; }

.vlx-block--node .inner--usage .heading { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.vlx-block--node .inner--usage .heading .vlx-text { display: flex; flex-direction: column; }

.vlx-block--node .inner--usage .block__usage > .vlx-text { display: flex; flex-direction: column; margin-bottom: 8px; }
.vlx-block--node .inner--usage h3 { --fw: 600; --fs: var(--fs-larger); margin-bottom: 4px; }
.vlx-block--node .inner--usage p:not(:last-child) { margin-bottom: 8px; }

.vlx-block--node .inner--usage .progress-bar { width: 100%; background-color: var(--accent-trans-20); height: 4px; border-radius: var(--border-radius-small); }
.vlx-block--node .inner--usage .progress-bar .bar { background-color: var(--accent); height: 100%; border-radius: var(--border-radius-small); transition: width .5s; }


/** Blocks > Table **/
.vlx-block--table { display: flex; flex-direction: column; gap: 16px; }
.vlx-block--table .vlx-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; transition: opacity .3s; }
.vlx-block--table .vlx-row :is(input,select) { background: var(--bg-clr-dark); padding: 4px; border-radius: var(--border-radius-small); border: unset; outline: unset; --ff: var(--font-code); }
.vlx-block--table .vlx-row.--loading { opacity: .5; }


/** Blocks > Webapps **/
.vlx-block--webapps { }
.vlx-block--webapps { --gc: 3; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }


/** Blocks > Errors **/
.vlx-block--error { height: 100vh; }
.vlx-block--error *:is(.container, .inner) { height: 100%; }
.vlx-block--error .text { text-align: center; }
.vlx-block--error .text h1 { --fs: 250px; }


/** Blocks > Servers **/
.vlx-block--servers .inner { display: flex; justify-content: center; align-items: center; gap: 32px; }


/** Blocks > configs (webserver) **/
.vlx-block--configs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }


/** Blocks > Auth **/
.vlx-block--auth { height: 100vh; width: 100%; display: grid; place-content: center; }




/*** Cards ***/
.vlx-card { background-color: var(--bg-clr); border: 1px solid var(--border-clr); border-radius: var(--border-radius); }
.vlx-card:hover { border: 1px solid var(--accent);}
.vlx-card .vlx-card__header { --p: 2rem 2rem 1rem; padding: var(--p); }
.vlx-card .vlx-card__header img { width: 100%; height: auto; border-radius: var(--border-radius); }
.vlx-card .vlx-card__body { --p: 1rem 2rem 1rem; padding: var(--p); }
.vlx-card .vlx-card__footer { --p: 1rem 2rem 2rem; padding: var(--p); }
.vlx-card:hover .btn { --clr-bg: transparent; --clr: var(--text-clr); }

/** Cards > Auth **/
.vlx-card--auth { border: unset !important; background: var(--bg-clr-light); display: flex; flex-direction: column; border-radius: 30px; }
.vlx-card--auth .vlx-card__header { display: flex; justify-content: center; }
.vlx-card--auth .vlx-card__header .logo { max-height: 150px; height: 100%; width: 100%; object-fit: contain; }
.vlx-card--auth .input-wrapper { background: var(--bg-clr); padding: 10px 20px; display: flex; flex-direction: column; gap: 0.5em; border-radius: 10px; color: #4d4d4d; }
.vlx-card--auth .input-wrapper:not(:first-child) { margin-top: 10px; }
.vlx-card--auth .input-wrapper label { --fs: 14px; color: var(--text-clr-dark); }
.vlx-card--auth .input-wrapper input { outline: none; border: none; color: var(--text-clr-dark); background-color: transparent; }
.vlx-card--auth .input-wrapper .vlx-icon { --clr: var(--text-clr-dark); margin-bottom: -0.2em; }

.vlx-card--auth .password .show-hide { margin-right: -5em; }

.vlx-card--auth .vlx-card__footer .btn { padding: 10px; background: var(--accent); color: var(--text-clr-invert); border: none; border-radius: 10px; font-weight: 600; width: 100%; }
.vlx-card--auth .vlx-card__footer .vlx-btn-bar { display: flex; align-items: center; flex-direction: column; gap: 10px; margin-top: 10px }
.vlx-card--auth .vlx-card__footer .vlx-btn-bar > * { cursor: pointer; --fs: 14px; color: var(--text-clr-dark); }

/** Cards > Items **/
.vlx-card--server { display: flex; flex-direction: row; border: solid 2px gray; }
.vlx-card--server[data-status="unkown"] { border: solid 2px var(--orange-300); }
.vlx-card--server[data-status="online"] { border: solid 2px var(--green-300); }
.vlx-card--server[data-status="offline"] { border: solid 2px var(--red-300); }
.vlx-card--server .vlx-card__footer { display: grid; place-content: center; }

/** Cards > Webapp **/
.vlx-card--webapp { }
.vlx-card--webapp { position: relative; border-color: var(--bg-clr-dark); background-color: var(--bg-clr-dark); padding: 16px; }
.vlx-card--webapp .vlx-card__title { margin-top: 8px; }
.vlx-card--webapp .vlx-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vlx-card--webapp .vlx-meta .vlx-icon { --clr: var(--text-clr-dark); }
.vlx-card--webapp .vlx-floating-btn { position: absolute; top: 16px; right: 16px; }
.vlx-card--webapp .vlx-floating-btn .vlx-icon { --clr: var(--text-clr-dark); transition: background-color .3s; }
.vlx-card--webapp .vlx-floating-btn:hover .vlx-icon { --clr: var(--accent); }

/** Cards > Webapp new **/
.vlx-card--webapp-new { }
.vlx-card--webapp-new { cursor: pointer; position: relative; border: 4px dashed var(--bg-clr-dark); background-color: var(--bg-clr); padding: 16px; flex-direction: column; display: flex; justify-content: center; align-items: center; gap: 16px; }
.vlx-card--webapp-new:hover { border: 4px dashed var(--accent); }
.vlx-card--webapp-new .vlx-card__title { margin-top: 8px; }

/** Cards > Config **/
.vlx-card--config { }
.vlx-card--config { position: relative; border-color: var(--bg-clr-dark); background-color: var(--bg-clr-dark); padding: 16px; }
.vlx-card--config .vlx-card__title { margin-top: 8px; }
.vlx-card--config .vlx-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vlx-card--config .vlx-meta .vlx-icon { --clr: var(--text-clr-dark); }

/** Cards > Config new **/
.vlx-card--config-new { }
.vlx-card--config-new { cursor: pointer; position: relative; border: 4px dashed var(--bg-clr-dark); background-color: var(--bg-clr); padding: 16px; flex-direction: column; display: flex; justify-content: center; align-items: center; gap: 16px; }
.vlx-card--config-new:hover { border: 4px dashed var(--accent); }
.vlx-card--config-new .vlx-card__title { margin-top: 8px; }