/** 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;



    /* Main Colors **/
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Exo', sans-serif;
    --font-code: 'Roboto Mono', monospace;



    /* Font sizing **/
    --font-size: clamp(16px, 2vw, 16px);

    --fs-h1: clamp(48px, 2vw, 32px);
    --fs-h2: clamp(40px, 2vw, 32px);
    --fs-h3: clamp(32px, 2vw, 28px);
    --fs-h4: clamp(28px, 2vw, 24px);
    --fs-h5: clamp(24px, 2vw, 24px);
    --fs-h6: clamp(20px, 2vw, 20px);
    --fs-p: clamp(16px, 2vw, 16px);
    --fs-small: clamp(14px, 2vw, 14px);
    --fs-xs: clamp(12px, 5vw, 12px);



    /** Width & Heigths **/
    --navbar-height: 90px;

    --sidebar-width: 300px;

    --timing: .3s ease;

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

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



    /** Container Widths **/
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1200px;
    --container-width--xxl: 1200px;
    --container-width--xxxl: 1200px;



    /** Design Colors **/
    --text-clr: #2f2f2f;
    --text-clr-dark: hsl(216, 10%, 41%);
    --text-clr-invert: #ffffff;
    --link-clr: #ef4444;
    --link-clr-invert: #ef4444;

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

    --bg-clr-light: #fff;
    --bg-clr: #f0f4f8;
    --bg-clr-dark: #cdd5db;
    --bg-clr-invert-light: #3f2727;
    --bg-clr-invert: #2f1818;
    --bg-clr-invert-dark: #271111;

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



    /** Main Colors **/
    --primary: #202020;
    --secondary: #f3f3f3;
    --accent: hsl(0, 84%, 60%);
    --accent-trans-50: #ef444480;
    --accent-trans-20: #ef444433;
    --secondary-accent: #ef4444;



    /** Support Colors **/

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


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

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

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

}



* {
    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
    ;
}

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

h1, .h1 { --fs: var(--fs-h1); --lh: 1.2; --fw: 900; }
h2, .h2 { --fs: var(--fs-h2); --lh: 1.2; --fw: 900; }
h3, .h3 { --fs: var(--fs-h3); --lh: 1.2; --fw: 700; }
h4, .h4 { --fs: var(--fs-h4); --lh: 1.2; --fw: 700; }
h5, .h5 { --fs: var(--fs-h5); --lh: 1.2; --fw: 700; }
h6, .h6 { --fs: var(--fs-h6); --lh: 1.2; --fw: 700; }
p, .p { --fs: var(--fs-p); --lh: 1.2; --fw: normal; }

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

*: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; }

.bold, .strong { font-weight: bold !important; }
.italic { font-style: italic !important; }

.--no-scroll { overflow: hidden; }
.--hidden { display: none !important; }




/** 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); }



/** Background image **/
.vlx-container-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
.vlx-container-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.7); }
:is(.vlx-block, .vlx-header):has(.vlx-container-bg) .container { position: relative; z-index: 2; }



/** Navbar **/
.vlx-navbar { --nav-bg: var(--bg-clr-invert); --nav-bg-light: var(--bg-clr-invert-light); position: fixed; top: 0; left: 0; z-index: 1000000; width: 100%; background: var(--nav-bg); display: flex; justify-content: center; align-items: center; padding: 16px 16px; min-height: var(--navbar-height); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.vlx-navbar::after { content: ''; position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity var(--timing); }

.vlx-navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width--xl); --padding: 16px; padding-left: var(--padding); padding-right: var(--padding); }
.vlx-navbar__sitename h2 { --clr-text: var(--text-clr-invert) !important; }
.vlx-navbar__menu { display: flex; gap: 16px; align-items: center; }

.vlx-navbar__link { padding: 16px 16px; border-radius: var(--border-radius); background-color: transparent; text-decoration: none; transition: background var(--timing); display: block; }
.vlx-navbar__link .vlx-navbar__text { --clr-text: var(--text-clr-invert) !important; }
.vlx-navbar__link:hover { background-color: var(--accent); }
.vlx-navbar__link:hover .vlx-navbar__text { --clr-text: var(--text-clr-invert) !important; }

.vlx-navbar__toggle { display: none !important; cursor: pointer; padding: 10px; }

/* Dropdown Menu */
.vlx-navbar__dropdown { position: relative; }

.vlx-navbar__dropdown-content { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--nav-bg-light); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border-radius: var(--border-radius); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--timing), transform var(--timing), visibility var(--timing); padding: 0; margin-top: 8px; z-index: 1000; }
.vlx-navbar__dropdown:hover .vlx-navbar__dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.vlx-navbar__dropdown-content .vlx-navbar__link { border-radius: 0; padding: 12px 20px; }
.vlx-navbar__dropdown-content .vlx-navbar__link:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
.vlx-navbar__dropdown-content .vlx-navbar__link:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.vlx-navbar__dropdown-content .vlx-navbar__dropdown { position: relative; }
.vlx-navbar__dropdown-content .vlx-navbar__dropdown-content { left: 100%; top: 0; margin-top: 0; margin-left: 4px; }




/* Responsive: Convert to Sidebar */
@media (max-width: 992px) {
    .vlx-navbar:has(.vlx-navbar__menu--open)::after { opacity: 1; pointer-events: all; }

    .vlx-navbar__menu { position: fixed; top: 0; left: 0; z-index: 1000000; height: 100vh; width: 250px; background: var(--nav-bg); flex-direction: column; align-items: start; transform: translateX(-100%); transition: transform var(--timing); padding: 32px 16px; overflow-y: auto; }
    .vlx-navbar__menu--open { transform: translateX(0); }
    .vlx-navbar__toggle { display: grid !important; }

    /* Mobile: Accordion-style Dropdowns */
    .vlx-navbar__dropdown { width: 100%; }
    .vlx-navbar__dropdown-content { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height var(--timing); }
    .vlx-navbar__dropdown.--open .vlx-navbar__dropdown-content { max-height: 500px; padding-left: 16px; margin-top: 8px; }
    .vlx-navbar__dropdown-content .vlx-navbar__link { padding: 10px 16px; }
}

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



/*** Footer ***/

.vlx-footer { background-color: var(--bg-clr-invert); padding: 32px 16px; }
.vlx-footer .vlx-text { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.vlx-footer .vlx-text * { --clr-text: var(--text-clr-invert); margin-top: 0 !important; }

@media (min-width: 768px) {
    .vlx-footer .vlx-text { flex-direction: row; }
}




/** Animations **/

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

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

@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: 16px; 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; }

.vlx-text * + *:not(.btn,.btn-group) { margin-top: 16px; }
.vlx-text * + :is(ul,ol,li) { margin-top: 8px; }
.vlx-text * + :is(h1,h2,h3,h4,h5,h6) { margin-top: 32px !important; }
.vlx-text :is(ul,ol) { margin-left: 16px; }


/** Media **/
.vlx-image { width: 100%; height: auto; display: block; border-radius: var(--border-radius); object-fit: cover; }
.vlx-video { width: 100%; height: auto; display: block; border-radius: var(--border-radius); object-fit: cover; }


/** Widths **/
.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; }

.btn-group--vert { flex-direction: column; align-items: center; }
.btn-group--vert-right { flex-direction: column; align-items: flex-end; }
.btn-group--vert-left { flex-direction: column; align-items: flex-start; }

@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; }

.media-align--left .vlx-text { order: 1; }
.media-align--left .vlx-image { order: -1; }
.media-align--right .vlx-text { order: -1; }
.media-align--right .vlx-image { order: 1; }


/** Columns **/
[class*="col-split--"] { grid-template-columns: 1fr !important; }

@media (min-width: 992px) {
    .col-split--100-0 { grid-template-columns: 100% 0% !important; }
    .col-split--75-25 { grid-template-columns: 75% 25% !important; }
    .col-split--67-33 { grid-template-columns: 67% 33% !important; }
    .col-split--60-40 { grid-template-columns: 60% 40% !important; }
    .col-split--50-50 { grid-template-columns: 1fr 1fr !important; }
    .col-split--40-60 { grid-template-columns: 40% 60% !important; }
    .col-split--33-67 { grid-template-columns: 33% 67% !important; }
    .col-split--25-75 { grid-template-columns: 25% 75% !important; }
    .col-split--0-100 { grid-template-columns: 0% 100% !important; }
}


/** Display Extra **/
.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; }


/** Aspect ratios **/
.aspect--1-1 { aspect-ratio: 1 / 1 !important; }
.aspect--16-9 { aspect-ratio: 16 / 9 !important; }
.aspect--4-3 { aspect-ratio: 4 / 3 !important; }
.aspect--3-2 { aspect-ratio: 3 / 2 !important; }


/** Gaps **/
.g-16  { row-gap: 16px !important; column-gap: 16px !important; }
.gx-16 { row-gap: 16px !important; }
.gy-16 { column-gap: 16px !important; }

.g-24  { row-gap: 24px !important; column-gap: 24px !important; }
.gx-24 { row-gap: 24px !important; }
.gy-24 { column-gap: 24px !important; }

.g-32  { row-gap: 32px !important; column-gap: 32px !important; }
.gx-32 { row-gap: 32px !important; }
.gy-32 { column-gap: 32px !important; }

.g-48  { row-gap: 48px !important; column-gap: 48px !important; }
.gx-48 { row-gap: 48px !important; }
.gy-48 { column-gap: 48px !important; }

.g-64  { row-gap: 64px !important; column-gap: 64px !important; }
.gx-64 { row-gap: 64px !important; }
.gy-64 { column-gap: 64px !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: var(--border-radius); display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn .vlx-icon { --clr: var(--text-clr); transition: background-color var(--timing); }

.btn.btn--small { --padding: 4px 8px; --fs: 14px; min-height: 36px !important; min-width: min(100%, 260px) !important; }
.btn.btn--xsmall { --padding: 0; --fs: 12px; min-height: 30px !important; min-width: min(100%, 130px) !important; }
.btn.btn--disabled, .btn.--disabled { cursor: not-allowed; opacity: 0.5; }
.btn.btn--no-width { min-width: unset !important; }
.btn.btn--no-height { min-height: unset !important; }

.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-p); background-color: unset; border: unset; padding: 0; min-height: unset; min-width: unset; }
.btn.btn--link .vlx-cion { --clr: var(--accent); }

.btn.btn--secondary.btn--link { --clr: var(--text-clr-invert); --fw: normal; text-decoration: underline; text-decoration-color: var(--text-clr-invert); --fs: var(--fs-p); }
.btn.btn--secondary.btn--link .vlx-icon { --clr: var(--text-clr-invert); }

.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); display: grid; place-content: center; }
.vlx-icon-wrapper--secondary { background-color: var(--bg-clr-light); }

.vlx-icon-wrapper:has(.vlx-icon--default) { padding: 8px; }
.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; }






/*** Alerts ***/
.vlx-alert { background-color: var(--bg-clr-light); border-left: 4px solid var(--bg-clr); border-radius: var(--border-radius-small); padding: 8px; display: flex; align-items: flex-start; gap: 8px; }
.vlx-alert__content .subtext { margin-top: 0.25rem; }

.vlx-alert--info { background-color: var(--blue-100); border-left: 4px solid var(--blue-500); }
.vlx-alert--info .vlx-alert__icon i { --clr: var(--blue-500); }
.vlx-alert--info p { color: var(--blue-500); }
.vlx-alert--info .subtext { color: var(--blue-400); }

.vlx-alert--success { background-color: var(--green-100); border-left: 4px solid var(--green-500); }
.vlx-alert--success .vlx-alert__icon i { --clr: var(--green-500); }
.vlx-alert--success p { color: var(--green-500); }
.vlx-alert--success .subtext { color: var(--green-400); }

.vlx-alert--warning { background-color: var(--orange-100); border-left: 4px solid var(--orange-500); }
.vlx-alert--warning .vlx-alert__icon i { --clr: var(--orange-500); }
.vlx-alert--warning p { color: var(--orange-500); }
.vlx-alert--warning .subtext { color: var(--orange-400); }

.vlx-alert--danger { background-color: var(--red-100); border-left: 4px solid var(--red-500); }
.vlx-alert--danger .vlx-alert__icon i { --clr: var(--red-500); }
.vlx-alert--danger p { color: var(--red-500); }
.vlx-alert--danger .subtext { color: var(--red-400); }







/*** 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: 32px; }
.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: 100px; max-height: 450px; min-width: 250px; max-width: min(100%,1200px); }
.vlx-form__box *:is([readonly]) { cursor: not-allowed; }
.vlx-form__box .vlx-input-box__desc { margin-top: 8px; }

.vlx-form__box .vlx-input-group { display: flex; gap: 8px; align-items: center; }
.vlx-form__box .vlx-input-group .vlx-icon-wrapper { padding: 8px; }

.vlx-switch { position: relative; display: block; width: 48px; height: 24px; margin: unset !important; flex-shrink: 0; }
.vlx-switch:has(input[disabled],input[readonly]) { opacity: 0.5; cursor: not-allowed !important; }
.vlx-switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-clr-light); transition: .4s; border-radius: 30px; }
.vlx-switch__slider:before { position: absolute; content: ""; height: 16px; width: 16px; border-radius: 100%; left: 4px; bottom: 4px; background-color: var(--accent); transition: all var(--timing); }
.vlx-switch__input { opacity: 0; width: 0; height: 0; }
.vlx-switch__input:checked  + .vlx-switch__slider { background-color: var(--accent); }
.vlx-switch__input:checked  + .vlx-switch__slider:before { transform: translateX(24px); background-color: var(--bg-clr-light); }
.vlx-switch__label { margin: unset !important; }






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

.vlx-card.--disabled { opacity: 0.5; cursor: not-allowed; }



/** Cards > Auth **/
.vlx-card--auth { border: unset !important; background: var(--bg-clr-light); display: flex; flex-direction: column; border-radius: var(--border-radius); }
.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: 8px 16px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--border-radius); color: #4d4d4d; }
.vlx-card--auth .input-wrapper:not(:first-child) { margin-top: 16px; }
.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: -2px; }
.vlx-card--auth .btn-group { margin-top: unset !important; }
.vlx-card--auth .btn-group .btn { width: 100%; }

.vlx-card--auth .password .show-hide { margin-right: -8px; }

.vlx-card--auth .vlx-card__footer .vlx-btn-bar { display: flex; align-items: center; flex-direction: column; gap: 16px; margin-top: 16px; }
.vlx-card--auth .vlx-card__footer .vlx-btn-bar > * { cursor: pointer; --fs: 14px; color: var(--text-clr-dark); text-decoration: unset; }



/** Cards > Dash > User **/
.vlx-card--user { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--user .vlx-card__header { padding-bottom: unset; }

.vlx-card--user-small { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); height: fit-content; display: flex; justify-content: space-between; }
.vlx-card--user-small .vlx-card__header { --p: 16px; }
.vlx-card--user-small .vlx-card__header p { width: 310px; height: fit-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlx-card--user-small .vlx-card__body { --p: 16px; display: flex; align-items: center; gap: 16px; }



/** Cards > Dash > Role **/
.vlx-card--role { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--role .vlx-card__header { padding-bottom: unset; }



/** Cards > Dash > Menu **/
.vlx-card--menu { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--menu .vlx-card__header { padding-bottom: unset; }



/** Cards > Dash > Page **/
.vlx-card--page { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--page .vlx-card__header { padding-bottom: unset; }



/** Cards > Dash > Media **/
.vlx-card--media { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); height: fit-content; }
.vlx-card--media .vlx-card__header { padding-bottom: unset; }
.vlx-card--media .vlx-card__header img { object-fit: contain; }
.vlx-card--media .vlx-card__header h3 { margin-top: 8px; --fs: var(--fs-h6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.vlx-card--media .vlx-card__footer { margin-top: unset; }



/** Cards > Dash > Product **/
.vlx-card--product { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); height: fit-content; }
.vlx-card--product .vlx-card__header { padding-bottom: unset; }
.vlx-card--product .vlx-card__header h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }

.vlx-card--product-small { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); height: fit-content; display: flex; justify-content: space-between; }
.vlx-card--product-small .vlx-card__header { --p: 16px; }
.vlx-card--product-small .vlx-card__header p { width: 310px; height: fit-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlx-card--product-small .vlx-card__body { --p: 16px; display: flex; align-items: center; gap: 16px; }



/** Cards > Dash > Order **/
.vlx-card--order { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--order .vlx-card__header { padding-bottom: unset; }



/** Cards > Dash > Contact **/
.vlx-card--contact { border: 1px solid var(--bg-clr-light); background: var(--bg-clr-light); }
.vlx-card--contact .vlx-card__header { padding-bottom: unset; }