/**
 *  NEUI Application Base Styles
 */
:root{

    /* Margin and GAP */
    --desktop-margin: 20px;
    --mobile-margin: 10px;
    --desktop-gap: 15px;
    --mobile-gap: 10px;

    /* Effects */
    --blur: 15px;
}

/* Application Loaders */
.app_loader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.app_loader.shown{
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 1;
    top: 0;
}
.app_loader.hidden{
    display: flex;
    width: 100%;
    height: 0;
    opacity: 0;
    top: -500px;
}

/* Theme Switcher */
.theme-switcher{
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Google Icons */
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' 0,
        'opsz' 24
}

.material-symbols-rounded.active {
    font-variation-settings:
        'FILL' 1,
        'wght' 100,
        'GRAD' 0,
        'opsz' 24
}

/* Sidebar */
.app_sidebar{
    @media (max-width: 640px) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 35;
    }
}

.app_view{
    @media (max-width: 640px) {
        margin-top: 60px;
    }
}

/* Navigator Space */
.bottom_navigator_space{
    height: 76px;
    width: 100%;
}

/* Navbar Overrides */
.navbar_mobile{
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.navbar_mbut{
    width: 60px;
    overflow: hidden;
}

/* Dialogue Container */
.dialogue_container{
    background-color: rgba(0,0,0,0.25);
    backdrop-filter: blur(var(--blur));
    position: fixed;
    top: auto;
    left: 0;
    width: 100%;
    height: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 9999;
}

.dialogue_container.shown{
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.dialogue_container.hidden{
    top: auto;
    left: 0;
    width: 100%;
    height: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
}

/* Bottom Navigator */
.bottom_navigator{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
}

/* Alerts */
.alert.shown{
    display: flex;
    height: auto;
}
.alert.hidden{
    display: flex;
    height: 0;
    overflow: hidden;
    padding: 0;
}

/* Toast and Toast Containers */
.toast_container{
    position: fixed;
    gap: var(--desktop-gap);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    padding: var(--desktop-margin);
    z-index: 999991;
    pointer-events: none;

    @media (max-width: 768px) {
        gap: var(--mobile-gap);
        padding: var(--mobile-margin);
    }
}

.toast_container.top{
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 250px;
    justify-content: flex-end;
}
.toast_container.left{
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 350px;
    justify-content: flex-start;
}
.toast_container.right{
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 350px;
    justify-content: flex-start;
}
.toast_container.bottom{
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 250px;
    justify-content: flex-start;
}
.toast_container .alert{
    pointer-events: all;
}

/* Preview Styles */
.preview_container{
    position: relative;
}

.preview_container .preview_hint{
    position: absolute;
    bottom: 25px;
    z-index: 45;
    width: auto;
}

/* Util Classes */
.clickable{
    cursor: pointer;
}

.blurred{
    backdrop-filter: blur(var(--blur));
}

/* Transition Classes */
.transition-3000{
    -webkit-transition: all ease-in-out 3000ms;
    -moz-transition: all ease-in-out 3000ms;
    -ms-transition: all ease-in-out 3000ms;
    -o-transition: all ease-in-out 3000ms;
    transition: all ease-in-out 3000ms;
}
.transition-2000{
    -webkit-transition: all ease-in-out 2000ms;
    -moz-transition: all ease-in-out 2000ms;
    -ms-transition: all ease-in-out 2000ms;
    -o-transition: all ease-in-out 2000ms;
    transition: all ease-in-out 2000ms;
}
.transition-1000{
    -webkit-transition: all ease-in-out 1000ms;
    -moz-transition: all ease-in-out 1000ms;
    -ms-transition: all ease-in-out 1000ms;
    -o-transition: all ease-in-out 1000ms;
    transition: all ease-in-out 1000ms;
}
.transition-500{
    -webkit-transition: all ease-in-out 500ms;
    -moz-transition: all ease-in-out 500ms;
    -ms-transition: all ease-in-out 500ms;
    -o-transition: all ease-in-out 500ms;
    transition: all ease-in-out 500ms;
}
.transition-250{
    -webkit-transition: all ease-in-out 250ms;
    -moz-transition: all ease-in-out 250ms;
    -ms-transition: all ease-in-out 250ms;
    -o-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}
.transition-150{
    -webkit-transition: all ease-in-out 150ms;
    -moz-transition: all ease-in-out 150ms;
    -ms-transition: all ease-in-out 150ms;
    -o-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
}