:root {
    --font-1: "Outfit", sans-serif;

    --color-primary: #a333c8FF;
    --color-primary-light: #a333c8DD;
    --color-primary-dark: #431c76FF;
    --color-primary-dark-light: #431c76DD;
    --color-secondary: #6435c9FF;
    --color-secondary-light: #6435c9DD;
    --color-secondary-dark: #310047FF;
    --color-secondary-dark-light: #310047DD;
    --color-white: #FFFFFF;
    --color-white-warm: #F4F1F8;
    --dashboard-height: 72px;
}

* {
    font-family: "Outfit", sans-serif;
}

h1, h2, h3, h4, h5, textarea {
    font-family: var(--font-1);
}

a{
    color: var(--color-secondary) !important;
    cursor: pointer;
}

a:hover {
    color: var(--color-primary-dark) !important;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    overflow: auto;
    overscroll-behavior: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    margin: 0;
    font-family: "Outfit", sans-serif;
}

#pageWrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
}

#loader {
    z-index: 2026! important;
    position: fixed;
}

.glass{
    background: transparent !important;   
    backdrop-filter: blur(8px) brightness(120%) !important;    
    border: 1px solid rgba(255, 255, 255, 0.2) !important;    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;      
}

.si.background.feature{
    background: linear-gradient(45deg, #150d22, #4b3b97) !important; 
}

#login_form{
    color: #333;
    margin: 0 auto;
    padding: 16px;
    position: relative;
    width: 360px;     
}

#login_form h1{
    margin-top: -0.5em;
    color: var(--color-primary-dark);
}