body
{
    margin : 0;
}
:root
{
    --topagain : 0px;
    --leftagain : 0px;
    --accent-color : black;
    --text-color : white;
    --accent-rgb : 0,0,0;
    --text-rgb : 255, 255, 255;
}
.workspace
{
    background-color: black;
    width: 100%;
    height: 100%;
    overflow:hidden;
    user-select: none;
}
.tab_bar
{
    position : absolute;
    background-color : color-mix(in srgb, var(--accent-color), #00000000 50%);
    padding: 8px;
    border-radius: 16px;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    height : 32px;
    display: flex;
    z-index: 100;
}
.tab_button
{
    background-color: color-mix(in srgb, var(--accent-color), #00000000 25%);
    color: var(--text-color);
    font-size: 24;
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    border: 2px solid var(--text-color);
    border-radius: 4px;
}
.tab_button:hover
{
    background-color: white;
    color: black;
}
.window
{
    position : absolute;
    background-color: white;
    width : 960px;
    height : 540px;
    border : 2px solid color-mix(in srgb, var(--accent-color), white 50%);
    border-radius: 16px;
    overflow : hidden;
    box-shadow: 8px 8px 16px #00000075;
    transform-origin : top left;
    transform: scale(1,1);
    resize : both;
    min-height: 32px;
    min-width: 213px;
    max-height: calc(100% - var(--topagain) - 4px);
    max-width: calc(100% - var(--leftagain) - 4px);
    transition-delay: 0;
}
.header
{
    top : 0;
    position : relative;
    width:100%;
    height:32px;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-color), white 50%);
    background-color: color-mix(in srgb, var(--accent-color), white 25%);
    display: flex;
}
.header_input
{
    width : calc(100% - 206px);
    height : 75%;
    position : relative;
    top : 4px;
    left : 39px;
    border : 2px solid color-mix(in srgb, var(--accent-color), grey 35%);
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--accent-color), black 35%);
    color : var(--text-color);
}
.header_button
{
    position: absolute;
    height : 75%;
    width : 32px;
    top : 4px;
    color : var(--text-color);
    background-color: #00000000;
    margin:0;
    padding:2px;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.header_button:hover
{
    margin:auto;
    background-color: #55555599;
}
.webcontent
{
    width : 100%;
    height : calc(100% - 52px);
    position : relative;
    top: 0;
    border : 0;
    zoom : 0.65;
    display : flex;
    scrollbar-color: var(--accent-color);
}
.tab_img
{
    background-color: #00000000;
    width:32px;
    height:32px;
    margin:0;
    padding:2px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
}
.tab_img:hover
{
    margin:auto;
    background-color: #55555599;
}
.click_disable
{
    pointer-events: none;
}
.minimized
{
    resize: none;
    opacity: 0;
    /*width : 128px;
    height : 32px;
    min-width: 128px;
    min-height: 32px;
    max-width: 128px;
    max-height: 32px;
    min-width: 0px;
    min-height: 0px;
    max-width: 0px;
    max-height: 0px;*/
    transform: scale(0,0);
}
.maximized
{
    resize: none;
    width : 100%;
    height : 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    border : none;
    border-radius: 0;
}
.corner_button
{
    position: absolute;
    height : 32px;
    width : 32px;
    bottom : 4px;
    color : var(--text-color);
    background-color: color-mix(in srgb, var(--accent-color), #00000000 75%);
    margin:0;
    padding:2px;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.corner_button:hover
{
    margin:auto;
    background-color: #55555599;
}
.hover_hidden
{
    opacity: 0.0;
    transition: all 0.7s ease-out;
    transition-delay: 0;
}
.hover_hidden:hover
{
    opacity: 1.0;
}
.menu
{
    position : absolute;
    background-color: color-mix(in srgb, var(--accent-color), black 25%);
    border : 2px solid color-mix(in srgb, var(--accent-color), white 50%);
    border-radius: 16px;
    overflow : hidden;
    box-shadow: 8px 8px 16px #00000075;
    transition : all 0.3s ease;
    transition-delay: 0;
    transform-origin : top left;
}
.menu_minimize
{
    opacity: 0;
    transform-origin : top left;
    transform: scaleY(0);
}
.menu_section
{
    box-sizing: border-box;
    padding: 8px;
    color : var(--text-color);
    width : 100%;
    background-color: #80808080;
    border: solid 4px #40404080;
    border-radius: 15px;
    border : 0;
}
.menu_button
{
    color : var(--text-color);
    padding : 8px;
    border : 2px var(--text-color) solid;
    background-color: var(--accent-color);
    border-radius: 16px;
    transform-origin: middle center;
    transform: scale(0.9,0.9);
    transition : all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: 0;
}
.menu_button:hover
{
    background-color: color-mix(in srgb, var(--accent-color), white 50%);
    transform: scale(1.1,1.1);
}
.split_hover
{
    background-color: #FFFFFF80;
    border-radius: 16px;
}
.split_bar
{
    position: absolute;
    background-color : var(--text-color);
    outline : solid 6px rgba(var(--text-rgb),0.5);
    top : 0px;
    height : 100%;
    width : 5px;
    cursor: e-resize;
    transform : translateX(-50%);
    z-index : 99;
    opacity : 0;
}
.split_bar:hover
{
    opacity : 1;
}
.docked
{
    top : 0px;
    height : 100%;
    border : 0;
    resize: none;
}