body
{
    background: linear-gradient(#7ec64c73, #998365, #752be2);
    height: 100vh;
    font-family: var(--font-digital);

    text-shadow: 1px 1px 2px black;
    color: lightgray;

}

:root
{
    overflow-y: scroll;
    scrollbar-color: #00FFDB #9700FF4D;
}


@keyframes GradientLoop
{
    0% { background-position-x: 1px;  }
    50% { background-position-x: 50vw; }
    100% { background-position-x: 100vw; }
}

.loading-screen
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 100000000;
}

.loading-screen > .logo
{
    height: 70%;
    display: flex;
    justify-content: center;

    align-items: center;
    position: relative;
}

.loading-screen > .logo > .div > img
{
    height: 276px;
    filter: drop-shadow(6px 3px 1px #cd84ff70);
}

.loading-screen > .logo > .div-loader
{
    left: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 390px;
    background: black;
}

.loading-screen > .logo > .div
{
    text-align: center;
    margin: 0;
}

.loading-screen > .logo > .div > p
{
    font-size: 2em;
    margin: 0;
}

.loading-screen > .gradient
{
    background: linear-gradient(to right, #ae00ff, #00e7ff, #ad25d3);
    height: 12px;
    animation: GradientLoop 1.4s linear infinite;
    width: 445px;
    text-align: center;
    margin: 0 auto;
    border-radius: 8px;
}

.loading-screen > .gradient::after
{
    background: linear-gradient(to right, #ae00ff, #00e7ff, #ad25d3);
    content: '';
    left: 0;
    top: 0;
    position: relative;
    width: 100%;

    height: 100%;
    display: block;
    border-radius: 8px;
    z-index: -55;
    filter: blur(16px);
    animation: GradientLoop 1.4s linear infinite;
}

.loading-screen > .progress
{

}

.wx-block
{
    display: block;
    margin-bottom: 4px;
}

.wx-actions
{
    text-align: center;
}

.wx-pony
{
    border: 6px solid orchid;
    border-bottom: 6px solid purple;
    border-top: none;

    cursor: url('../../images/cursor_willow_whispers.png'), auto;
    background: linear-gradient(#7d4cc673, #561e75);
}

.wx-text
{
    color: white;
    display: inline-block;
    margin-bottom: 3px;
}

.wx-form-text
{
    width: 14ch;
}

.wx-group
{
    margin-top: 18px;
    position: relative;
    border: 1px solid white;
    padding: 3px;
    padding-top: 8px;
}

.wx-group-text
{
    position: absolute;
    top: -14px;
    left: 18px;
    background-color: #7b5c91;
}

.wx-browser-link, .wx-program-link, .wx-button-link
{
    color: aqua;
    border: 1px solid #0000;
}

a.wx-browser-link:hover, a.wx-program-link:hover
{
    color: #00d7d7;
}

a.wx-browser-link:active, a.wx-program-link:active
{
    border: 1px dotted #00b7ff;
}

.wx-title
{
    font-size: 1.6em;
}

.wx-button-img
{
    height: 25px;

    color: white;
    display: inline-block;

    border: none !important;
    margin-bottom: 2px;

    cursor: url('../../images/cursor_willow_whispers.png'), auto;
    background: linear-gradient(#7d4cc673, #561e75);

    user-select: none;
}

.wx-button
{
    color: white;
    display: inline-block;
    border: 2px solid orchid;
    border-bottom: 2px solid purple;
    border-top: 2px solid #db8695;
    margin-bottom: 2px;

    cursor: url('../../images/cursor_willow_whispers.png'), auto;
    background: linear-gradient(#7d4cc673, #561e75);

    user-select: none;
}

.wx-button:hover
{
    background: linear-gradient(#7d4cc673, #9e42d0);
}

.wx-button:active
{
    background: linear-gradient(#561e75, #7d4cc673);
    color: pink;
}

.wx-button-img:hover
{
    filter: brightness(0.7) contrast(1.2);
}

.wx-button-img:active
{
    filter: brightness(0.5);
}

.wx-floatr
{
    float: right;
}

.wx-bar
{
    border-top: 6px solid purple;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(#7d4cc673, #561e75);
    z-index: 3000000;
}

.wx-bar-item
{
    margin-left: 5px;

}

.is-mobile .desktop-newline
{
    display: none;
}

.is-mobile .desktop-newline-mobile
{
    height: 30px;
}

.wx-bar-portable
{
    border: 6px solid purple;
    width: auto;
}

.is-mobile .wx-bar-time
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(#7d4cc673, #561e75);
    z-index: 3000000
}

.is-mobile .wx-bar
{
    overflow-x: scroll;
    white-space: nowrap;
}

.is-mobile .wx-bar-items
{
    overflow-x: scroll;
    white-space: nowrap;
}
.wx-bar-tool
{
    margin: 0 4px;
    display: inline;
}

.wx-window-title
{
    display: flex;
    justify-content: space-between;
    border: 6px solid orchid;
    background: linear-gradient(to right, #3cd39473, #0762b3);
    color: white;
    border-bottom: 3px solid purple;
    padding: 0;
    justify-content: space-between;
    padding: 0 18px;
    box-shadow: 6px 6px 3px #15002052
}

.wx-window-title-unfocused
{
    background: linear-gradient(to right, #b5b5b573, #65abea);
}

.wx-window
{
    position: absolute;
    width: auto;
    height: auto;
}

.wx-window-title-close
{
    width: 18px;
    height: 18px;
    text-align: center;
    border: 2px solid orchid;
    border-top: 0;
    border-bottom: 0;
    border-bottom: 2px solid #561e75;
    margin-bottom: 0;

    color: white;
    display: inline-block;

    cursor: url('../../images/cursor_willow_whispers.png'), auto;
    background: linear-gradient(#7d4cc673, #561e75);

    user-select: none;
}

.wx-window-title-close:hover
{
    color: red;
}

.wx-window-title-icon
{
    width: 18px;
}

.wx-window-frame
{
    border: 6px solid orchid;
    border-bottom: 6px solid purple;
    border-top: none;
    margin-bottom: 1em;
    cursor: url('../../images/cursor_willow_whispers.png'), auto;
    background: linear-gradient(#4cc0c6c2, #610084);

    height: 100%;

    resize: both;
    overflow: clip;

    padding: 4px;
    box-shadow: 6px 6px 3px #15002052
}

.wx-window-frame.wx-window-frame-highlighted
{
    box-shadow: 0px 0px 28px #ffffffb5;
}

.wx-window-frame > div
{
    margin-bottom: 6px;
}

.wx-window-resizable > .wx-window-frame
{
    resize: both;
    overflow: scroll;
}

.wx-inner-frame
{
    background: url('../../images/tile_bayer.png'), linear-gradient(#11ac9e, #3d0046);
    border: 1px solid yellow;
}

.wx-fill
{
    width: 100%;
    height: 100%;
}

.wx-wide
{
    width: 96%;
}

.p-desktop-body
{
    margin: 0;
}

.p-desktop
{
    height: 100%;
    background: url('../../images/kicky_tile.png'), linear-gradient(#11ac9e, #3d0046);
    overflow: hidden;
}

.p-desktop-theme-1
{
    font-family: Serif;
}

.wx-de-icon
{
    display: inline-block;
    width: 150px;
    height: 120px;
    text-align: center;
    color: #14ffff;
    text-shadow: 0px 0px 3px black;
    margin: 15px;
}


.is-mobile .wx-de-icon
{
    width: 90px;
    height: 90px;
    font-size: 0.85em;
    margin: 8px;

}

.wx-de-icon > img
{
    height: 95px;
    margin-top: 3px;
}

.wx-de-icon:hover
{
    outline: 2px dotted #31000e85;
    outline-offset: -2px;
}

.wx-de-icon:active > .wx-de-icon-label
{
    color: #24d0d0;
}

.wx-de-icon .ui-selected
{
    background: url('../../images/tile_bayer.png'), linear-gradient(#11ac9e, #3d0046);
}

.wx-directory
{
    overflow: scroll;
}

.wx-rofl:hover
{
    margin-left: 20ch;
}

.wx-inset-col > div.wx-inset-header
{
    border: 4px outset #ff6aef;
    background: #d4d7ff !important;
    color: black;
    font-weight: bold;
}

.wx-inset
{
    background: #c0caf2;
    border: 4px inset #77006a;
    padding: 3px;

    display: flex;
}

.wx-inset-col > div
{
    color: black;
    text-shadow: none;
}

.wx-inset-col > div:nth-child(odd)
{
    color: black;
    text-shadow: none;
    background: #e8e8e8;
}

.wx-inset-col > div:hover
{
    background: #cecece;
}

.program-radio-volume
{
    float: right;
}

#contextMenu
{
    position: absolute;
    display: inline-block;
    color: white;
    background: #2e95ac;
    border: 1px solid #00cfff;
    z-index: 200000;
}

#contextMenu ul
{
    list-style-type: none;
    padding: 0;
}

#contextMenu li
{
    border-bottom: 1px solid #47668c;
}

#contextMenu li:hover
{
    background: darkgray;
    z-index: 999;

}

#web-browser
{
    background-color:white;
}

.wx-program-radio-text
{
    width: 374px;
    height: 34px;

    color: orange;
    background: linear-gradient(#4c0891c2, #803e7f);
    text-shadow: 1px 1px 5px #570000;

    border: 2px solid #1d006d;
    border-bottom: 3px solid #25005c;
    padding: 0 1ch;
}

.wx-program-radio-scroll
{
    font-size: 1em;
    padding-top: 6px;
}

.screensaver-background
{
    filter: brightness(0.3) blur(1px) saturate(0.8);
    backdrop-filter: brightness(0.6);
    transition: 0.8s;
}

.screensaver
{
    display: none;
    position: absolute;
    z-index: 10000000;
}

.screensaver > img
{
    width: 200px;
}

.wx-hidden
{
    display: none;
}

.wx-serial
{
    font-family: Monospace;
    width: calc(100% - 8px);
    margin-bottom: 4px;
}