:root {
    --Q-app-font-family-default: apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Ubuntu', 'Cantarell', sans-serif;
    --Q-app-font-family: var(--Q-app-font-family-default);
    --Q-app-font-family-headers: var(--Q-app-font-family-default);
    --Q-app-font-color-1: #fff;
    --Q-app-font-color-2: #d6d6d6;
    --Q-app-font-color-3: #b9b9b9;

    --Q-app-spacing-1: 0.25rem;
    --Q-app-spacing-2: 0.5rem;
    --Q-app-spacing-3: 0.75rem;
    --Q-app-spacing-4: 1rem;
    --Q-app-spacing-5: 1.5rem;
    --Q-app-spacing-6: 2rem;

    --Q-app-item-color-standard: #4378da;
    --Q-app-item-color-standard-2: #5793ff;
    --Q-app-item-color-standard-3: #346fdd;
    --Q-app-item-color-green: #25bb00;
    --Q-app-item-color-orange: #bb7900;
    --Q-app-item-color-red: #ca0000;

    --Q-app-item-border-radius: 0.75rem;

    --Q-app-focus-outline: 0.25rem solid red;
    --Q-app-focus-outline-offset: -0.25rem;

    --Q-app-background-1: #0d0f13;
    --Q-app-background-2: #1b1f27;
    --Q-app-background-3: ;
    --Q-app-background-4: #262a35;
    --Q-app-background-5: #2f3541;

    --Q-app-box-shadow-color: #000000c0;

    --Q-app-panels-margin: var(--Q-app-spacing-2);
    --Q-app-panels-border: none;
    --Q-app-panels-border-radius: 1rem;
    --Q-app-side-panels-open-ms: 300ms;
    --Q-app-sections-fadein-ms: 300ms;
    --Q-app-loader-opacity-transition: 500ms ease-in;
    --Q-app-window-resize-time-ms: 250ms;
    --Q-app-dual-push-panels-min-width-px: 900px;

    --Q-app-nav-height: 4rem;
    --Q-app-nav-sides-width: 3rem;
    --Q-app-nav-sides-margin: var(--Q-app-spacing-3);
    --Q-app-nav-background: var(--Q-app-background-2);

    --Q-app-menu-width-desktop: 20vw;
    --Q-app-menu-width-tablet: 30vw;
    --Q-app-menu-background-push: var(--Q-app-background-2);
    --Q-app-menu-background-float: #16191fd8;

    --Q-app-aside-width-desktop: 25vw;
    --Q-app-aside-width-tablet: 40vw;
    --Q-app-aside-header-padding: 0.5rem;
    --Q-app-aside-background-push: var(--Q-app-background-2);
    --Q-app-aside-background-float: #16191fd8;

    --Q-app-main-background: var(--Q-app-background-2);
    --Q-app-main-header-padding: var(--Q-app-spacing-2);
    --Q-app-main-header-border-bottom: var(--Q-app-panels-margin) solid var(--Q-app-background-1);
    --Q-app-main-header-side-width: 3rem;
    --Q-app-main-header-center-width: 100%;
    --Q-app-header-row-margin: 0;
    --Q-app-header-row-border: none;
    --Q-app-main-body-padding: var(--Q-app-spacing-4);
    --Q-app-main-footer-padding: var(--Q-app-spacing-2);
    --Q-app-main-footer-border-top: var(--Q-app-main-header-border-bottom);

    --Q-app-dialog-backdrop-background: #000000cc;
    --Q-app-dialog-background: var(--Q-app-background-2);
    --Q-app-dialog-min-height: 20vh;
    --Q-app-dialog-max-height: 95vh;
    --Q-app-dialog-min-width: 30vw;
    --Q-app-dialog-max-width: 80vw;
    --Q-app-dialog-border-radius: var(--Q-app-panels-border-radius);
    --Q-app-dialog-padding: var(--Q-app-spacing-4);
    --Q-app-dialog-header-margin: 0 0 var(--Q-app-spacing-4) 0;
    --Q-app-dialog-body-margin: 0 0 var(--Q-app-spacing-4) 0;

    --Q-app-context-backdrop-background: transparent;
    --Q-app-context-background: var(--Q-app-background-4);
    --Q-app-context-border-radius: var(--Q-app-panels-border-radius);
    --Q-app-context-padding: var(--Q-app-spacing-4);
}

/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    text-decoration: none;
    scroll-behavior: smooth;
}

* {
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: NeverMindRounded-Bold, sans-serif;
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.8rem;
}

* {
    font-size: 1rem;
}

/* HTML & BODY */

html {
    color: var(--Q-app-font-color-1);
    background: var(--Q-app-background-1);
    font-family: NeverMindRounded-Regular, sans-serif;
}

.Q-app {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* LOADER */

.Q-app-loader {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: var(--Q-app-panels-border-radius);
    background: none;
    z-index:100;
}

.Q-app-loader[hidden] {
    display: none;
}

.Q-app-loader._show svg {
    opacity: 1;
    transition: opacity var(--Q-app-loader-opacity-transition);
}

.Q-app-loader svg {
    opacity: 0;
    transition: opacity 1ms;
    height: 3rem;
    width: 3rem;
    animation: rotate 1s linear infinite;
}

.Q-app-context-loader, .Q-app-dialog-loader {
    position: unset;
}

.Q-app-context-loader svg {
    height: 2rem;
    width: 2rem;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg)
    }
}

/* NAV */

.Q-app-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--Q-app-nav-height);
    width: calc(100% - 2 * var(--Q-app-panels-margin));
    margin: var(--Q-app-panels-margin);
    border: var(--Q-app-panels-border);
    border-radius: var(--Q-app-panels-border-radius);
    background: var(--Q-app-nav-background);
}

.Q-app-nav .Q-app-sections section {
    flex-direction: row;
}

.Q-app-nav-left, .Q-app-nav-center, .Q-app-nav-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.Q-app-nav-left, .Q-app-nav-right {
    width: var(--Q-app-nav-sides-width);
}

.Q-app-nav-left {
    justify-content: flex-start;
    margin-left: var(--Q-app-nav-sides-margin);
}

.Q-app-nav-center {
    width: 100%;
    justify-content: center;
}

.Q-app-nav-right {
    justify-content: flex-end;
    margin-right: var(--Q-app-nav-sides-margin);
}

/* CENTER PANELS CONTAINER */

.Q-app-panels-container {
    display: flex;
    flex: 1;
    overflow: auto;
    width: calc(100% - 2 * var(--Q-app-panels-margin));
    margin: 0 var(--Q-app-panels-margin) var(--Q-app-panels-margin) var(--Q-app-panels-margin);
}

/* MENU */

.Q-app-menu {
    background: var(--Q-app-menu-background-push);
    border: none;
    appearance: none;
}

.Q-app-menu._float {
    left: var(--Q-app-panels-margin);
    background: var(--Q-app-menu-background-float);
}

.Q-app-menu._open {
    margin-right: var(--Q-app-panels-margin);
}

.Q-app-menu._float._open, .Q-app-menu._push._open {
    width: var(--Q-app-menu-width-desktop);
    border: var(--Q-app-panels-border);
}

/* ASIDE */

.Q-app-aside {
    border: none;
    background: var(--Q-app-aside-background-push);
}

.Q-app-aside._float {
    right: var(--Q-app-panels-margin);
    background: var(--Q-app-aside-background-float);
}

.Q-app-aside._push._open {
    margin-left: var(--Q-app-panels-margin);
}

.Q-app-aside._float._open, .Q-app-aside._push._open {
    width: var(--Q-app-aside-width-desktop);
    border: var(--Q-app-panels-border);
}

.Q-app-aside._float .Q-app-loader {
    background: var(--Q-app-aside-background-float);
}

.Q-app-aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--Q-app-aside-header-padding);
    width: 100%;
}

/* MENU & ASIDE */

.Q-app-menu, .Q-app-aside {
    position: relative;
    overflow: hidden;
    transition: width var(--Q-app-side-panels-open-ms) ease-in-out;
    width: 0;
    border-radius: var(--Q-app-panels-border-radius);
}

.Q-app-menu._float, .Q-app-aside._float {
    position: absolute;
    top: calc(var(--Q-app-nav-height) + 2 * var(--Q-app-panels-margin));
    height: calc(100% - var(--Q-app-nav-height) - (3 * var(--Q-app-panels-margin)));
    z-index: 101;
}

.Q-app-menu._push, .Q-app-aside._push {
    transition: margin 0ms var(--Q-app-side-panels-open-ms), width var(--Q-app-side-panels-open-ms) ease-in-out;
}

.Q-app-menu._push._open, .Q-app-aside._push._open {
    transition: width var(--Q-app-side-panels-open-ms) ease-in-out;
}

.Q-app-menu._disabled, .Q-app-aside._disabled {
    display: none;
}

/* MAIN */

.Q-app-main .Q-app-loader {
    background: var(--Q-app-main-background);
}

.Q-app-main .Q-app-loader svg {
    height: 3rem;
    width: 3rem;
}

.Q-app-main {
    position: relative;
    display: flex;
    overflow: auto;
    height: 100%;
    width: 100%;
    border: var(--Q-app-panels-border);
    border-radius: var(--Q-app-panels-border-radius);
    background: var(--Q-app-main-background);
}

.Q-app-main .Q-app-sections.resizing {
    opacity: 0;
    transition: none;
}

.Q-app-main-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--Q-app-main-header-padding);
    border-bottom: var(--Q-app-main-header-border-bottom);
}

.Q-app-main-header-row {
    display: flex;
    width: 100%;
}

.Q-app-main-header-row:not(:last-child) {
    margin: var(--Q-app-header-row-margin);
    border: var(--Q-app-header-row-border);
}

.Q-app-main-header-left {
    justify-content: flex-start;
}

.Q-app-main-header-right {
    justify-content: flex-end;
}

.Q-app-main-header-left, .Q-app-main-header-right {
    display: flex;
    align-items: center;
    width: var(--Q-app-main-header-side-width);
}

.Q-app-main-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--Q-app-main-header-center-width);
    text-align: center;
}

.Q-app-main-body {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: var(--Q-app-main-body-padding);
}

.Q-app-main-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--Q-app-main-footer-padding);
    border-top: var(--Q-app-main-footer-border-top);
}

/* SECTIONS */

.Q-app-sections {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border: none;
    border-radius: var(--Q-app-panels-border-radius);
    opacity: 0;
    transition: opacity 1ms;
}

.Q-app-sections._show {
    opacity: 1;
    transition: opacity var(--Q-app-sections-fadein-ms);
}

.Q-app-section {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}

.Q-app-section._show {
    display: flex;
}

/* DIALOG */

.Q-app-dialog-backdrop {
    position: absolute;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    z-index: 1000;
    background: var(--Q-app-dialog-backdrop-background);
    opacity: 0;
    transition: opacity 1ms;
}

.Q-app-dialog-backdrop._show {
    visibility: visible;
    transition: opacity var(--Q-app-sections-fadein-ms);
    opacity: 1;
}

.Q-app-dialog {
    all: unset;
    position: relative;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    max-height: var(--Q-app-dialog-max-height);
    width: fit-content;
    max-width: var(--Q-app-dialog-max-width);
    border-radius: var(--Q-app-dialog-border-radius);
    background: var(--Q-app-dialog-background);
    padding: var(--Q-app-dialog-padding);
}

.Q-app-dialog .Q-app-section {
    align-items: flex-start;
    justify-content: flex-start;
}

.Q-app-dialog .Q-app-section[type=prompt] {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.Q-app-dialog .Q-app-section[type=prompt] p:not(:last-child) {
    margin-bottom: var(--Q-app-spacing-2);
}

.Q-app-dialog-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: var(--Q-app-dialog-header-margin);
    width: 100%;
}

.Q-app-dialog-body {
    max-height: 80vh;
    width: 100%;
    overflow: auto;
    margin: var(--Q-app-dialog-body-margin);
}

.Q-app-dialog-footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

/* Context */

.Q-app-context-backdrop {
    position: absolute;
    display: flex;
    visibility: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 100;
    background: var(--Q-app-context-backdrop-background);
    opacity: 0;
    transition: opacity 1ms;
}

.Q-app-context-backdrop._show {
    visibility: visible;
    transition: opacity var(--Q-app-sections-fadein-ms);
    opacity: 1;
}

.Q-app-context {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--Q-app-context-border-radius);
    background: var(--Q-app-context-background);
    padding: var(--Q-app-context-padding);
    box-shadow: var(--Q-card-box-shadow);
}

.Q-app-context-sections {
    width: max-content;
}

.Q-app-context .Q-button {
    justify-content: flex-start;
    width: 100%;
}

.Q-app-context .Q-button:not(:last-child) {
    margin-bottom: 0.75rem;
}

.Q-app-tab {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    opacity: 0;
    transition: opacity 1ms;
}

.Q-app-tab[hidden] {
    display: none;
}

.Q-app-tab._show {
    opacity: 1;
    transition: opacity var(--Q-app-sections-fadein-ms);
}

/* MEDIA QUERIES */

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

    .Q-app-aside._float._open, .Q-app-aside._push._open {
        width: var(--Q-app-aside-width-tablet);
    }

    .Q-app-menu._float._open, .Q-app-menu._push._open {
        width: var(--Q-app-menu-width-tablet);
    }

}

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

    /* FLOAT TO 100% */
    
    .Q-app-menu._float._open, .Q-app-aside._float._open {
        width: calc(100% - 2 * var(--Q-app-panels-margin));
    }

    /* PUSH TO FLOAT */

    .Q-app-menu._push, .Q-app-aside._push {
        position: absolute;
        top: calc(var(--Q-app-nav-height) + 2 * var(--Q-app-panels-margin));
        height: calc(100% - var(--Q-app-nav-height) - (3 * var(--Q-app-panels-margin)));
        z-index: 101;
    }

    .Q-app-menu._push._open, .Q-app-aside._push._open {
        width: calc(100% - 2 * var(--Q-app-panels-margin));
    }

    .Q-app-menu._push {
        background: var(--Q-app-menu-background-float);
    }

    .Q-app-aside._push {
        background: var(--Q-app-aside-background-float);
    }
    
}