@import url("https://fonts.cdnfonts.com/css/fixedsys-62");

@font-face
{
    font-family: "MS Sans Serif";
    src: url(res/MS\ Sans\ Serif\ 8pt.ttf);
}

@font-face
{
    font-family: "IBM VGA 8x14";
    src: url(res/PxPlus_IBM_EGA_8x14.ttf);
}

@font-face
{
    font-family: "System";
    src: url(res/System.ttf);
}

:root
{
    --font: "Microsoft Sans Serif";
}

button
{
    font-family: var(--font);
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
    border: none;
    background-color: #c0c0c0;
    min-width: 90px;
    height: 23px;
    font-size: 11px;
    width: auto;
    user-select: none;
    background-position: center;
}

button:active
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #000000,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #808080;
}

button:focus
{
    outline: none;
}

button *
{
    vertical-align: middle;
    padding-left: 0.5px;
    padding-right: 0.5px;
}

button.tray
{
    border-width: 0;
    border-image: 0;
}

[disabled]
{
    color: #808080;
    text-shadow: 1px 1px #fff;
}

#contextmenu>button[disabled]:hover,
#startoptions button[disabled]:hover,
.submenu>button[disabled]:hover
{
    text-shadow: none;
    color: #808080;
}

button[disabled]:active
{
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
}

#tray
{
    display: flex;
    align-items: center;
    height: 18px;
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #808080;
    margin-right: 2px;
    padding: 2px;
}

#startmenu
{
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
    background-color: #c0c0c0;
    position: absolute;
    bottom: 24px;
    left: 2px;
    display: flex;
    padding: 3px;
    z-index: 1;
}

#sidemenu
{
    text-align: left;
    background: #808080;
    transform: rotate(180deg);
    width: 21px;
}

#sidemenu span
{
    font-size: 14pt;
    color: #fff;
    font-weight: lighter;
    font-family: "Franklin Gothic Book";
    writing-mode: vertical-rl;
}

span
{
    user-select: none;
}

#windowstext
{
    font-family: "Franklin Gothic Medium" !important;
    color: #c0c0c0 !important;
    font-weight: bold !important;
    margin-top: 20px;
}

#startoptions
{
    display: flex;
    flex-direction: column;
}

#startoptions div,
#contextmenu
{
    display: flex;
    flex-direction: column;
    padding-right: 29px !important;
}

#contextmenu button,
.menu-bar .submenu button
{
    width: calc(100% + 15px);
    height: 17px !important;
    padding-left: 22px !important;
    box-shadow: none;
    text-align: left;
}

#contextmenu
{
    gap: 0 !important;
    box-sizing: border-box;
    position: absolute;
    padding: 1px;
    display: flex;
    flex-direction: column;
    padding-right: 18px !important;
}

.menu-bar .submenu
{
    padding-right: 18px !important;
}

#contextmenu .sep,
.menu-bar .submenu .sep
{
    box-sizing: border-box;
    width: calc(100% + 15px);
}

#startoptions div>button
{
    width: calc(100% + 26px);
}

#startoptions div>button.dropdown::after,
#contextmenu button.dropdown::after,
.submenu button.dropdown::after
{
    content: "";
    width: 4px;
    height: 7px;
    background-image: url(res/arrow.png);
    position: absolute;
    right: 7px;
}

#startoptions div>button.dropdown:hover::after,
#contextmenu button.dropdown:hover::after,
.submenu button.dropdown:hover::after
{
    filter: invert(100%);
}

.sep
{
    border-top: #808080 1px solid;
    border-bottom: #fff 1px solid;
    margin-bottom: 5px;
    margin-top: 2px;
}

#startmenu button
{
    height: auto;
    box-shadow: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: auto;
    padding: 0px 5px;
}

#startmenu button:hover,
#contextmenu button:hover,
.submenu button:hover
{
    background-color: #000080;
    color: #fff;
}

#startmenu button img:nth-child(1)
{
    width: 32px;
    height: 32px;
}

#clock
{
    width: 46px;
    letter-spacing: 1px;
}

#start
{
    margin-left: 2px;
    min-width: 0px;
    padding: 0 4px 0 4px;
    display: flex;
    align-items: center;
    gap: 1px;
}

#start span
{
    text-shadow: 0.5px 0px black, 1.5px 0px black;
    color: transparent;
    letter-spacing: 1px;
}

#start.pressed
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #000000,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #808080;
}

#startbar
{
    box-shadow: inset 0px 1px 0px 0px #DFDFDF,
        inset 0px 2px 0px 0px #FFFFFF;
    background-color: #c0c0c0;
    bottom: 0%;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    position: fixed;
    justify-content: space-between;
    padding-top: 2px;
}

#clock
{
    font-family: var(--font);
    text-align: center;
    margin-top: 1px;
}

#bg
{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -4;
    background: #008080;
}

.monitor
{
    background: url(res/monitor.png);
    width: 184px;
    height: 169px;
}

#desktop
{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -3;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    column-gap: 2px;
    row-gap: 2px;
    overflow: hidden;
}

#windows
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    flex: 0 0 auto;
    overflow: hidden;
}

.window
{
    position: absolute;
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
    background-color: #c0c0c0;
    padding: 4px;
    pointer-events: auto;
    min-width: 112px;
    min-height: 27px;
    flex-shrink: none;
    box-sizing: border-box;
}

.window>.header
{
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 3px;
    z-index: -1;
    background-color: #808080;
    user-select: none;
}

.header img,
.windowdisplay img
{
    width: 16px;
    height: 16px;
}

.window>.header>div:not(.windowbuttons)
{
    flex-shrink: 1;
    min-width: 0;
}

.window>.header span
{
    text-shadow: 0.5px 0px #c0c0c0, 1.5px 0px #c0c0c0;
    color: transparent;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.window:focus>.header
{
    background: #000080;
}

.window:focus>.header span
{
    text-shadow: 0.5px 0px #fff, 1.5px 0px #fff;
}

.window:focus
{
    outline: none;
}

.window>.buttons
{
    padding: 5px 11px 11px 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.window.system>.buttons
{
    float: right;
}

.window>desc>img
{
    width: 32px;
    height: 32px;
}

.window>.desc
{
    display: flex;
    flex-direction: row;
    align-items: self-start;
    padding: 11px;
    gap: 24px;
    margin-top: 10px;
    word-break: none;
    user-select: none;
}

.windowbuttons div
{
    display: flex;
    align-items: center;
    margin-right: 2px;
}

.windowbuttons button
{
    width: 16px;
    height: 14px;
    min-width: 0px;
}

.window>.blocker
{
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: 200;
}

.close
{
    background-image: url("res/x.png");
}

.maximize
{
    background-image: url("res/maximize.png");
}

.restore
{
    background-image: url("res/restore.png");
}

.minimize
{
    background-image: url("res/minimize.png");
}

body
{
    margin: 0;
    image-rendering: pixelated;
    overflow: hidden;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: none;
    font-smooth: none;
}

img
{
    pointer-events: none;
    align-self: center;
    user-select: none;
}

span
{
    font-family: var(--font);
    font-size: 11px;
    text-align: center;
}

.shortcut
{
    width: 99px;
    height: 75px;
    display: flex;
    gap: 6px;
    flex-direction: column;
    align-items: center;
    position: absolute;
}

.shortcutpreview
{
    z-index: -1;
}

.shortcutpreview img
{
    opacity: 0.5;
}

.shortcutpreview span
{
    color: #000 !important;
}

.shortcut span
{
    color: #000;
    pointer-events: none;
    text-align: center;
    padding: 2px;
    position: relative;
}

#desktop .shortcut span
{
    background: #008080;
    color: #fff;
}

.shortcut img
{
    width: 32px;
    height: 32px;
    margin-top: 2px;
    user-select: none;
}

.shortcut.selected img
{
    filter: opacity(0.5) drop-shadow(0.1px 0 0 #000080) drop-shadow(0.1px 0 0 #000080);
}

.shortcut.selected span
{
    background: #000080 !important;
    color: #fff !important;
}

.shortcut.selected span::before
{
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    outline: dotted 1px white;
    mix-blend-mode: difference;
    position: absolute;
    outline-offset: -1px;
}

.header>div
{
    display: flex;
    align-items: center;
}

.header>div>img
{
    margin-left: -1px;
}

.menu-bar
{
    padding-top: 1px;
    height: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: start;
}

.menu-bar>button
{
    padding: 0px 6px 0px 7px;
    font-family: var(--font);
    float: left;
    font-size: 11px;
    cursor: default;
    user-select: none;
    box-shadow: none;
    min-width: 0;
    height: 18px;
    position: relative;
}

.menu-bar button.selected
{
    background-color: #000080;
    color: #fff;
}

.notepadcontent
{
    resize: none;
    overflow: scroll;
    height: calc(100% - 40px);
    width: calc(100% - 1px);
    box-shadow: inset 1px 1px 0px 0px #808080,
        inset -1px -1px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #000000;
    border: none;
    font-family: "Fixedsys 62";
    line-height: 16px;
    padding: 0;
}

.notepadcontent:focus
{
    outline: none;
}

.expcontent
{
    resize: none;
    overflow: scroll;
    height: calc(100% - 58px);
    width: calc(100% - 1px);
    box-shadow: inset 1px 1px 0px 0px #808080,
        inset -1px -1px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #000000;
    background-color: #fff;
}

.statusbar
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #808080;
    height: 18px;
    margin-top: 2px;
    display: flex;
    padding-left: 3px;
    padding-top: 3px;
    box-sizing: border-box;
    width: 100%;
}

.window.program
{
    min-width: 180px;
    min-height: 77px;
    padding: 4px;
}

.window.program.maximized
{
    top: 0px !important;
    left: 0px !important;
    width: 100vw !important;
    height: calc(100vh - 28px) !important;
    padding: 0px;
    border-width: 0px;
}

.window.program.maximized>.resizers
{
    display: none;
}

.resizer
{
    position: absolute;
    min-width: 4px;
    min-height: 4px;
}

.resizer.ne,
.resizer.nw,
.resizer.n
{
    top: -2px;
}

.resizer.ne,
.resizer.se,
.resizer.e
{
    right: -2px;
}

.resizer.se,
.resizer.sw,
.resizer.s
{
    bottom: -2px;
}

.resizer.nw,
.resizer.sw,
.resizer.w
{
    left: -2px;
}

.resizer.n,
.resizer.s
{
    left: 1px;
    width: calc(100% - 2px);
    cursor: ns-resize;
}

.resizer.e,
.resizer.w
{
    top: 1px;
    height: calc(100% - 2px);
    cursor: ew-resize;
}

.resizer.nw,
.resizer.se
{
    cursor: nwse-resize;
}

.resizer.ne,
.resizer.sw
{
    cursor: nesw-resize;
}

.windowpreview
{
    border-image: url(res/checkers.png) 4;
    border-width: 4px;
    border-style: solid;
    border-image-repeat: repeat;
    box-sizing: border-box;
    mix-blend-mode: difference;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
}

button:focus
{
    outline: dotted 1px black;
    outline-offset: -4px;
}

#startmenu button:focus
{
    outline: none;
}

.selection-box
{
    border-image: url(res/checkers.png) 1;
    border-width: 1px;
    border-style: solid;
    border-image-repeat: repeat;
    mix-blend-mode: difference;
    position: absolute;
    z-index: -2;
}

ul
{
    list-style-type: none;
}

#shutdown .desc .radiolist
{
    padding: 0px;
}

#shutdown .desc>div
{
    margin-left: -10px;
    margin-top: -2px;
}

.radiolistH
{
    display: flex;
    flex-direction: row;
    margin: 0px;
    justify-content: space-between;
    padding: 0px;
    align-items: center;
    white-space: nowrap;
}

input:not([type="radio"])
{
    border: none;
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #000000,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #808080;
    font-family: var(--font);
    font-size: 11px;
    height: 20px;
}

input:not([type="radio"]):not([type="checkbox"]):focus
{
    outline: none;
}

.radiolistH input[type="radio"]+label
{
    padding-left: 18px;
}

input[type="radio"]
{
    display: none;
}

input[type="radio"]+label
{
    position: relative;
    padding-left: 21px;
    font-family: var(--font);
    font-size: 11px;
    user-select: none;
}

input[type="radio"]+label:before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    background: url(res/radio.png);
}

input[type="radio"]:checked+label:before
{
    background: url(res/selectedradio.png);
}

input[type="checkbox"]
{
    display: none;
}

input[type="checkbox"]+label
{
    position: relative;
    padding-left: 20px;
    font-family: var(--font);
    font-size: 11px;
    user-select: none;
    cursor: default;
}

input[type="checkbox"][disabled]+label
{
    color: #808080;
}

input[type="checkbox"]+label:before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    background: url(res/checkbox.png);
}

input[type="checkbox"]:checked+label:before
{
    background: url(res/checkboxchecked.png);
}

input[type="checkbox"][disabled]+label:before
{
    background: url(res/checkboxdisabled.png);
}

.window.system .buttons
{
    padding: 5px 11px 13px 11px;
    gap: 8px;
}

.boxcontain
{
    display: flex;
    justify-content: space-between;
    gap: 9px;
}

.tabcontent
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px;
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
    margin-top: -2px;
    position: relative;
    z-index: 4;
    gap: 10px;
    box-sizing: border-box;
}

#properties .buttons
{
    padding: 0px 6px 7px 6px;
    gap: 7px;
}

#properties button:not(.close)
{
    min-width: 75px;
}

#properties select[size]
{
    width: 155px;
    height: 68px;
}

select[size]
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #000000,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #808080;
    border: none;
    font-family: var(--font);
    font-size: 11px;
    padding: 2px;
    padding-left: 3px;
    scroll-behavior: smooth;
}

select[size] option
{
    padding: 1px;
    padding-left: 2px;
}

select[size] option:checked
{
    background-image: linear-gradient(#000080, #000080);
    color: #fff;
}

.groupBox
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #808080,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #FFFFFF;
    margin-top: 8px;
    padding: 12px 9px 12px 9px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.groupBox::before
{
    content: attr(text);
    font-family: var(--font);
    font-size: 11px;
    position: absolute;
    top: -5px;
    left: 5px;
    background: #c0c0c0;
    padding: 0 5px;
}

.groupBox>button
{
    float: right;
    min-width: 72px;
}

.tabMenu
{
    padding: 6px;
    padding-top: 10px;
}

.tabs
{
    display: flex;
    margin-left: 2px;
}

.tab
{
    font-family: var(--font);
    font-size: 11px;
    border-image: url(res/tab.png) 3;
    border-width: 3px;
    border-style: solid;
    border-image-repeat: repeat;
    min-width: 30px;
    user-select: none;
    background-color: #c0c0c0;
    padding: 1px 3px;
    position: relative;
    z-index: 3;
}

.tab.selected
{
    margin-top: -2px;
    margin-left: -2px;
    margin-right: -2px;
    padding: 1px 5px 3px 5px;
    z-index: 5;
}

#properties .tabcontent
{
    width: 387px;
    height: 357px;
}

#shutdown .buttons>button
{
    min-width: 78px;
    min-height: 23px;
}

#shutdowntext
{
    color: orange;
    font-size: 36px;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    font-family: "Arial Narrow";
    font-weight: bold;
    user-select: none;
}

.header.clone
{
    position: absolute;
    transition: all 0.25s linear;
    z-index: 2;
    display: flex;
    background: #000080;
    color: #fff;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    padding: 0px 3px;
}

#left
{
    display: flex;
    align-items: center;
    gap: 4px;
}

.windowdisplay
{
    display: flex;
    align-items: center;
    width: 150px;
    gap: 2px;
}

.windowdisplay.pressed
{
    padding-top: 1px;
}

button.pressed:not(#start)
{
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #000000,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #808080;
    background-image: url(res/selectedwindowdisplay.png);
    background-repeat: repeat;
    text-shadow: 0.5px 0px black, 1.5px 0px black;
    color: transparent;
    letter-spacing: 1px;
}

#windowdisplays
{
    display: flex;
    align-items: center;
    gap: 3px;
}

.window.minimized
{
    visibility: hidden;
}

button:hover .dropdown-content
{
    display: block;
}

.submenu,
#contextmenu
{
    box-shadow: inset -1px -1px 0px 0px #000000,
        inset 1px 1px 0px 0px #FFFFFF,
        inset -2px -2px 0px 0px #808080,
        inset 2px 2px 0px 0px #DFDFDF;
    position: absolute;
    padding: 3px 2px;
    background: #c0c0c0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 3;
}

#contextmenu .submenu button
{
    width: auto;
}

.submenu button
{
    height: 20px !important;
    gap: 7px !important;
    text-wrap: nowrap;
}

.submenu button img,
#contextmenu button img
{
    width: 16px !important;
    height: 16px !important;
}

.monitorbg,
.monitorimg
{
    position: absolute;
    top: -218px;
    left: -206px;
    width: 800px;
    height: 600px;
    transform: scale(0.19);
    z-index: -1;
}

.monitorbg
{
    background: #008080;
}

#paint
{
    iframe
    {
        width: calc(100% - 4px);
        height: calc(100% - 25px);
    }

    .content
    {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: calc(100% - 38px);
        box-sizing: border-box;
    }

    .sidebar
    {
        box-shadow: inset 0px 1px 0px 0px #808080,
            inset 0px 2px 0px 0px #FFFFFF,
            inset 0px -1px 0px 0px #FFFFFF,
            inset 0px -2px 0px 0px #808080;

        div
        {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .tools
        {
            width: 56px;
            gap: 3px;
        }

        .options
        {
            width: 41px;
            height: 66px;
            display: flex;
            flex-wrap: wrap;
            box-shadow: inset -1px -1px 0px 0px #FFFFFF,
                inset 1px 1px 0px 0px #808080;
        }

        button
        {
            min-width: 0px;
            width: 25px;
            height: 25px;
            padding: 0px;

            img
            {
                padding: 0px;
            }
        }
    }

    .draw
    {
        width: calc(100% - 56px);
        height: calc(100% - 76px);
        background: #808080;
        overflow: scroll;
        padding: 3px;
        box-sizing: border-box;

        #paintCanvas
        {
            transform-origin: top left;
        }
    }

    .footer
    {
        width: 100%;
        height: 47px;
        display: flex;
        align-items: center;
        justify-content: start;

        .colormenu
        {
            display: flex;
            height: 32px;
            gap: 1px;

            .colordisplay
            {
                width: 31px;
                height: 32px;
                box-shadow: inset -1px -1px 0px 0px #FFFFFF,
                    inset 1px 1px 0px 0px #808080,
                    inset -2px -2px 0px 0px #DFDFDF,
                    inset 2px 2px 0px 0px #000000;
                background: #dfdfdf;
                position: relative;

                .color1
                {
                    width: 15px;
                    height: 15px;
                    box-shadow: inset 1px 1px 0px 0px #FFFFFF,
                        inset -1px -1px 0px 0px #808080,
                        inset 0px 0px 0px 2px #DFDFDF;
                    left: 4px;
                    top: 5px;
                    position: absolute;
                    background: #000;
                }

                .color2
                {
                    width: 15px;
                    height: 15px;
                    box-shadow: inset 1px 1px 0px 0px #FFFFFF,
                        inset -1px -1px 0px 0px #808080,
                        inset 0px 0px 0px 2px #DFDFDF;
                    position: absolute;
                    left: 11px;
                    top: 12px;
                    background: #fff;
                }
            }

            .colors
            {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                width: calc(16px * 14);
                box-shadow: 1px 1px 0px 0px #808080;

                .color
                {
                    width: 16px;
                    height: 16px;
                    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
                        inset 1px 1px 0px 0px #808080,
                        inset -2px -2px 0px 0px #DFDFDF,
                        inset 2px 2px 0px 0px #000000;
                }
            }
        }
    }
}

#calc
{
    width: 276px;
    height: 272px;

    *
    {
        font-family: var(--font);
        font-size: 11px;
    }

    .content
    {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        gap: 6px;
        justify-content: space-between;

        button:not(.windowbuttons button)
        {
            min-width: 36px;
            height: 28px;
            color: transparent;
            letter-spacing: 1px;
            font-size: 11px;
        }

        button.big
        {
            width: 49px;
        }

        button.red
        {
            text-shadow: 0.5px 0px #f00, 1.5px 0px #f00;
        }

        button.dkrd
        {
            text-shadow: 0.5px 0px #800000, 1.5px 0px #800000;
        }

        button.blue
        {
            text-shadow: 0.5px 0px #00f, 1.5px 0px #00f;
        }

        button.dkbl
        {
            text-shadow: 0.5px 0px #000080, 1.5px 0px #000080;
        }

        input
        {
            pointer-events: none;
        }

        .result
        {
            width: 100%;
            height: 26px;
            text-align: right;
        }

        .toprow
        {
            display: flex;
            justify-content: space-between;
            width: 100%;

            .mem
            {
                width: 36px;
                height: 26px;
                background: #c0c0c0;
                box-sizing: border-box;
                text-align: center;
            }

            div
            {
                display: flex;
                gap: 4px;
            }
        }

        .leftcolumn
        {
            display: flex;
            flex-direction: column;
            width: 36px;
            gap: 6px;
        }

        .btns
        {
            width: 196px;
            height: 130px;
            float: right;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 4px;
        }
    }
}

#msdos
{
    .console
    {
        height: calc(100% - 23px);
        top: 2px;
        max-width: 644px;
        max-height: 304px;
        position: relative;
        background: #000;
        overflow: scroll;
        display: flex;
        flex-direction: column;
        background-color: #000;
        color: #c0c0c0;
        font-family: "IBM VGA 8x14";
        cursor: default;
        padding: 1px;

        .input
        {
            display: flex;
            flex-direction: row;

            input
            {
                background-color: #000;
                color: #c0c0c0;
                font-family: "IBM VGA 8x14";
                font-size: 16px;
                flex-grow: 1;
                border: none;
                outline: none;
                padding: 0 !important;
                box-shadow: none;
                resize: none;
                box-sizing: border-box;
                margin: 0;
                overflow-y: auto;
            }
        }
    }
}

#winmine
{
    min-width: 0;

    .content
    {
        padding: 9px;
        box-shadow: inset 1px 1px 0px 0px #FFFFFF, inset -1px -1px 0px 0px #808080,
            inset 2px 2px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #808080,
            inset 3px 3px 0px 0px #FFFFFF, inset -3px -3px 0px 0px #808080;

        .top
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 6px 8px;
            box-shadow: inset -1px -1px 0px 0px #FFFFFF, inset 1px 1px 0px 0px #808080,
                inset -2px -2px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #808080;

            .counter
            {
                box-shadow: 1px 1px 0px 0px #FFFFFF, -1px -1px 0px 0px #808080;
                height: 23px;
            }

            #newgame
            {
                box-shadow: 1px 1px 0px 0px #808080, -1px -1px 0px 0px #808080;
                min-width: 0;
                width: 24px;
                height: 24px;
                background: url("res/minesweeper/face/smile.png");
            }

            #newgame.dead
            {
                background: url("res/minesweeper/face/dead.png");
            }

            #newgame.surprised
            {
                background: url("res/minesweeper/face/surprise.png");
            }

            #newgame.cool
            {
                background: url("res/minesweeper/face/cool.png");
            }

            #newgame:hover:active
            {
                background: url("res/minesweeper/face/pressed.png");
            }
        }

        .field
        {
            display: flex;
            flex-direction: column;
            padding: 3px;
            margin-top: 6px;
            box-shadow: inset -1px -1px 0px 0px #FFFFFF, inset 1px 1px 0px 0px #808080,
                inset -2px -2px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #808080,
                inset -3px -3px 0px 0px #FFFFFF, inset 3px 3px 0px 0px #808080;

            .column
            {
                display: flex;
                flex-direction: row;
            }

            .cell
            {
                width: 16px;
                height: 16px;
                background: url("res/minesweeper/cells/normal.png");
            }

            .cell.pressed,
            .cell:hover:active:not(.pressed):not(.mine):not(.flag):not(.questionmark)
            {
                background: url("res/minesweeper/cells/0.png");
            }

            .cell.m1
            {
                background: url("res/minesweeper/cells/1.png");
            }

            .cell.m2
            {
                background: url("res/minesweeper/cells/2.png");
            }

            .cell.m3
            {
                background: url("res/minesweeper/cells/3.png");
            }

            .cell.m4
            {
                background: url("res/minesweeper/cells/4.png");
            }

            .cell.m5
            {
                background: url("res/minesweeper/cells/5.png");
            }

            .cell.m6
            {
                background: url("res/minesweeper/cells/6.png");
            }

            .cell.m7
            {
                background: url("res/minesweeper/cells/7.png");
            }

            .cell.m8
            {
                background: url("res/minesweeper/cells/8.png");
            }

            .cell.flag
            {
                background: url("res/minesweeper/cells/flag.png");
            }

            .cell.mine
            {
                background: url("res/minesweeper/cells/mine.png");
            }

            .cell.minepressed
            {
                background: url("res/minesweeper/cells/pressedmine.png");
            }

            .cell.questionmark
            {
                background: url("res/minesweeper/cells/questionmark.png");
            }

            .cell.questionmark:hover:active
            {
                background: url("res/minesweeper/cells/pressedquestionmark.png");
            }
        }
    }
}

#winminedialog
{
    .content
    {
        display: flex;
        flex-direction: row;
        padding: 12px;
        gap: 10px;

        .left
        {
            display: flex;
            flex-direction: column;
            gap: 15px;

            div
            {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 123px;

                span
                {
                    line-height: 20px;
                }

                input
                {
                    width: 60px;
                    height: 20px;
                }
            }
        }

        .btns
        {
            display: flex;
            flex-direction: column;
            gap: 5px;

            button
            {
                min-width: 0;
                width: 75px;
            }
        }
    }
}

#sol>.content
{
    --back: url("res/cards/00-04.png");
    background-color: #008000;
    width: 100%;
    height: calc(100% - 41px);
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: inset -1px -1px 0px 0px #FFFFFF,
        inset 1px 1px 0px 0px #808080,
        inset -2px -2px 0px 0px #DFDFDF,
        inset 2px 2px 0px 0px #000000;

    #stack,
    #waste,
    #draggedcards,
    .card,
    .cardstack,
    .foundation,
    .zalupa
    {
        width: 71px;
        height: 96px;
    }

    .card
    {
        background: var(--back);
        user-select: none;

        img
        {
            display: none;
            user-select: none;
        }
    }

    .card.up
    {
        img
        {
            display: inline;
        }
    }

    #top
    {
        padding-top: 5px;
        padding-bottom: 6px;
        width: 100%;
        min-height: 0;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

        #stack
        {
            position: relative;
            background: url("res/cards/10-04.png");
        }

        #waste,
        .foundation
        {
            position: relative;
        }

        #stack>.card,
        #waste>.card,
        .foundation>.card
        {
            position: absolute;
        }

        #stack>.card:nth-child(-n+10),
        #waste>.card:nth-child(-n+10),
        .foundation>.card:nth-child(-n+5)
        {
            margin-top: 0px;
        }

        #stack>.card:nth-child(n+11):nth-child(-n+20),
        #waste>.card:nth-child(n+11):nth-child(-n+20),
        .foundation>.card:nth-child(n+6):nth-child(-n+9)
        {
            margin-top: 1px;
            margin-left: 2px;
        }

        #stack>.card:nth-child(n+20):nth-child(-n+24),
        #waste>.card:nth-child(n+20):nth-child(-n+24),
        .foundation>.card:nth-child(n+10):nth-child(-n+12)
        {
            margin-top: 2px;
            margin-left: 4px;
        }

        .foundation>.card:nth-child(13)
        {
            margin-top: 3px;
            margin-left: 6px;
        }

        .foundation
        {
            background: url("res/cards/12-04.png");
            position: relative;
        }
    }

    #cardstacks
    {
        width: 100%;
        min-height: 0;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-grow: 1;

        .card:not(:first-child)
        {
            margin-top: -93px;
        }

        .card.up~.card.up
        {
            margin-top: -81px;
        }
    }

    #statusbar
    {
        width: 100%;
        height: 16px;
        flex-shrink: 0;
        border-top: solid 1px #000000;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        span
        {
            font-family: "System";
            font-size: 13px;
            letter-spacing: 1px;
        }
    }

    #draggedcards
    {
        position: absolute;
        display: flex;
        flex-direction: column;
        pointer-events: none;

        .card:not(:first-child)
        {
            margin-top: -81px;
        }
    }
}

#soldialog
{
    width: 273px;

    #backs
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
        justify-content: center;
        padding: 10px;

        .back
        {
            width: 35px;
            height: 64px;
            border: solid 1px #c0c0c0;
            outline: solid 2px #ffffff;
            box-shadow: none;
            box-sizing: border-box;

            img
            {
                width: 100%;
                height: 100%;
            }
        }

        .back.selected
        {
            outline: solid 2px #000080;
        }

        .back:hover:active>img
        {
            filter: invert();
        }
    }

    #btns
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 12px;
        padding-top: 0;

        button
        {
            min-width: 83px;
        }
    }
}

#solsettings
{
    width: 342px;

    #radios
    {
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding: 12px;

        .groupBox
        {
            width: 50%;

            .radiolist
            {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding-left: 9px;
                margin: 0;
                height: 100%;
            }
        }
    }

    #checks
    {
        display: flex;
        flex-direction: row;
        padding: 12px;
        padding-top: 0px;
        gap: 12px;

        div
        {
            display: flex;
            flex-direction: column;
            gap: 9px;
            flex: 1;
        }
    }

    #buttons
    {
        display: flex;
        justify-content: end;
        gap: 6px;
        padding: 12px;
        padding-top: 4px;
    }
}