:root
{
    --background:rgba(30, 30, 30, 1);
    --window-border:rgba(255, 255, 255, 0.1);
    --window-background:rgba(50, 50, 50, 1);
    --window-shadow:2px 2px 5px 2px rgba(0,0,0,0.3);
    

    --top-bar-color:rgba(50, 50, 50, 1);
    --top-bar-height:40px;
    --top-bar-radius:10px;
    --top-bar-text-color:rgba(255, 255, 255, 1);
    --top-bar-padding:10px;
    --top-bar-grid-template:32px 1fr 16px 16px 32px;
    --top-bar-icon-size:32px;
    --top-bar-icon-hover:rgba(255, 255, 255, 1);

    --desktop-app-icon-size:60px;
    --desktop-app-icon-hover-color:rgba(255, 255, 255, 0.1);
    --desktop-padding:20px;

    --taskbar-color:rgba(50, 50, 50, 0.9);
    --taskbar-size:60px;
    --taskbar-icon-size:48px;

    --main-text: #000;
    --main-font-family: "Inter", sans-serif;
    --alt-text: #fff;
    --border-radius-sml: 5px;
    --border-radius-lrg: 10px;
    --box-shadow-sml: 0px 4px 7px 0px rgba(0, 0, 0, 0.2);
    --box-shadow-lrg: 0px 7px 13px 0px rgba(0, 0, 0, 0.2);
}

body
{
    margin:0px;
    padding:0px;
    background-color:var(--background);
    background-size: cover;
}

app-window
{
    position:absolute;
    left:10px;
    top:10px;
    width:1000px;
    height:800px;
    box-shadow: var(--window-shadow);
    border-top-left-radius: var(--top-bar-radius);
    border-top-right-radius: var(--top-bar-radius);
    border-bottom-left-radius: var(--top-bar-radius);
    border-bottom-right-radius: var(--top-bar-radius);
}

app-window[full]
{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    box-shadow: none;
}

app-window[full] iframe
{
    width:100%;
    height:100%;
    border:0px;
}

app-window app-window-top
{
    position: absolute;
    left: 0px;
    top: 0px;
    display:grid;
    grid-template-columns: var(--top-bar-grid-template);
    grid-column-gap: var(--top-bar-padding);
    padding-left:var(--top-bar-padding);
    padding-right:var(--top-bar-padding);
    width: calc(100% - var(--top-bar-padding)*2);
    height: var(--top-bar-height);
    background-color: var(--top-bar-color);
    border-top-left-radius: var(--top-bar-radius);
    border-top-right-radius: var(--top-bar-radius);
}

app-window app-window-top .window-icon
{
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    padding-left: 2px;
    padding-top: 3px;
    position: relative;
    top: 6px;
}

app-window app-window-top .window-icon i
{
    pointer-events:none;
    color: white;
    width: 32px;
    height: 32px;
    font-size: 22px;
    position: relative;
}

app-window app-window-top .window-icon:hover
{
    background-color:var(--desktop-app-icon-hover-color);
}

app-window app-window-top .app-window-title
{
    margin:auto 0;
    font-family:"arial";
    font-size:16px;
    color:var(--top-bar-text-color);
}

app-window app-window-top img
{
    grid-column:1;
    position:relative;
    top: calc((var(--top-bar-height) / 2) - (var(--top-bar-icon-size) / 2));
    width:var(--top-bar-icon-size);
    height:var(--top-bar-icon-size);
}

app-window app-window-client
{
    position:absolute;
    top:var(--top-bar-height);
    left:0px;
    width:100%;
    height:calc(100% - var(--top-bar-height));
    background-color:var(--window-background);
    border-bottom-left-radius: var(--top-bar-radius);
    border-bottom-right-radius: var(--top-bar-radius);
}

app-window app-window-client iframe
{
    border:0px;
    border-bottom-left-radius: var(--top-bar-radius);
    border-bottom-right-radius: var(--top-bar-radius);
}

app-window.closing
{
    transition:0.2s;
    transform:scale(0);
}

app-window.minimized
{
    transition:0.2s;
    transform: scaleY(0);
    opacity:0;
}

desktop app-icon
{
    cursor:hand;
    display:block;
    width:var(--desktop-app-icon-size);
    height:calc(var(--desktop-app-icon-size) + 20px);
    overflow:hidden;
    margin:20px;
}

desktop app-icon:hover
{
    background-color:var(--desktop-app-icon-hover-color);
    border-radius:10px;
}

desktop app-icon img
{
    pointer-events:none;
    width:var(--desktop-app-icon-size);
    height:var(--desktop-app-icon-size);
}

desktop app-icon .app-icon-text
{
    pointer-events:none;
    text-align:center;
    font-size:16px;
    color:white;
    font-family:"Arial";
}

desktop
{
    display:flex;
    overflow:hidden;
    user-select:none;
    position:absolute;
    padding:var(--desktop-padding);
    left:0px;
    top:0px;
    width:calc(100% - var(--desktop-padding)*2);
    height:calc(100% - var(--desktop-padding)*2);
}


taskbar
{
    position:absolute;
    width:100%;
    height:var(--taskbar-size);
    background-color:var(--taskbar-color);
    bottom:0px;
    overflow:hidden;
    display:flex;
    align-items: center;
}

taskbar taskbar-icon
{
    width:var(--taskbar-icon-size);
    height:var(--taskbar-icon-size);
}

taskbar taskbar-icon img
{
    pointer-events:none;
    width:var(--taskbar-icon-size);
    height:var(--taskbar-icon-size);
}

pages > *, pages > * > page, pages > * .login-wrapper > page
{
    display:none;
}

pages > *.show, pages > * > page.show
{
    display:block;
}
pages > login.show, pages > * .login-wrapper > page.show {
    display: flex;
}
pages > login
{
    width: 100%;
    height:100%;
    align-items: center;
    justify-content: center;
}
#invalid-helper.hide {
    display: none;
}
#invalid-helper.show {
    display: block;
}
pages .login-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1100px;
    max-height: 800px;
    border-radius: var(--border-radius-lrg);
    background: var(--window-background);
    box-shadow: var(--box-shadow-lrg);
    animation: fadeInUp 0.6s forwards ease-out;
}
page
{
    width:calc(100% - 40px);
    height:calc(100% - 40px);
    padding:20px;
}
.disabled {
    pointer-events: none;
    display: none;
}