@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 24px;
    outline: none;
    border: none;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    margin: 0;
    width: fit-content;
    height: fit-content;
    border: none;
    border-radius: 0;
}
p, a, h1, h2, h3, h4, h5, h6, span {
    display: inline-block;
}
ul, li {
    display: flex;
    flex-direction: column;
}
:is(p, a, h1, h2, h3, h4, h5, h6, span) :is(ul, li) {
    display: inline-flex;
    flex-direction: column;
}
body {
    position: absolute;
    width: 100lvw;
    height: 100lvh;
    overflow: hidden;
    left: 0px;
    top: 0px;
}
body.resizing-bottomRight *, body.resizing-bottomLeft *, body.resizing-bottom *, body.resizing-top *, body.resizing-left *, body.resizing-right *, body.resizing-topLeft *, body.resizing-topRight *, body.windowMoving * {
    user-select: none;
    touch-action: none;
    pointer-events: none;
    -webkit-user-select:none;
}
body.resizing-bottomRight, .window>.resizers>.resizePoint.bottomRight:not(.disabled) {
    cursor: se-resize;
}
body.resizing-bottomLeft, .window>.resizers>.resizePoint.bottomLeft:not(.disabled) {
    cursor: sw-resize;
}
body.resizing-bottom, .window>.resizers>.resizePoint.bottom:not(.disabled) {
    cursor: s-resize;
}
body.resizing-top, .window>.resizers>.resizePoint.top:not(.disabled) {
    cursor: n-resize;
}
body.resizing-topLeft, .window>.resizers>.resizePoint.topLeft:not(.disabled) {
    cursor: nw-resize;
}
body.resizing-topRight, .window>.resizers>.resizePoint.topRight:not(.disabled) {
    cursor: ne-resize;
}
body.resizing-right, .window>.resizers>.resizePoint.right:not(.disabled) {
    cursor: e-resize;
}
body.windowMoving, .window>.resizers>.movePoint:not(.disabled) {
    cursor: move;
}
:root {
    --color1: #8C876D;
    --color2: #F2BFA2;
    --color3: #A2D92B;
    --color4: #C7CFD9;
    --color5: #A5A2F2;
    --color6: #D9462B;
    --color7: #A69F61;
    --color8: #84A660;
    --color9: #AB2BD9;
    --color10: #2B66D9;
    --color11: #D9A32B;
    --color12: #2BD98F;
}
:root { /* color1 light */
    --color1-light-90: #f4f3f0;
    --color1-light-80: #e8e7e2;
    --color1-light-70: #dddbd3;
    --color1-light-60: #d1cfc5;
    --color1-light-50: #c6c3b6;
    --color1-light-40: #bab7a7;
    --color1-light-30: #afab99;
    --color1-light-20: #a39f8a;
    --color1-light-10: #98937c;
}
:root { /* color1 dark */
    --color1-dark-10: #7e7a62;
    --color1-dark-20: #706c57;
    --color1-dark-30: #625f4c;
    --color1-dark-40: #545141;
    --color1-dark-50: #464437;
    --color1-dark-60: #38362c;
    --color1-dark-70: #2a2921;
    --color1-dark-80: #1c1b16;
    --color1-dark-90: #0e0d0b;
}
:root { /* color2 light */
    --color2-light-90: #fef9f6;
    --color2-light-80: #fcf2ec;
    --color2-light-70: #fbece3;
    --color2-light-60: #fae5da;
    --color2-light-50: #f9dfd1;
    --color2-light-40: #f7d9c7;
    --color2-light-30: #f6d2be;
    --color2-light-20: #f5ccb5;
    --color2-light-10: #f3c5ab;
}
:root { /* color2 dark */
    --color2-dark-10: #daac92;
    --color2-dark-20: #c29982;
    --color2-dark-30: #a98671;
    --color2-dark-40: #917361;
    --color2-dark-50: #796051;
    --color2-dark-60: #614c41;
    --color2-dark-70: #493931;
    --color2-dark-80: #302620;
    --color2-dark-90: #181310;
}
:root { /* color3 light */
    --color3-light-90: #f6fbea;
    --color3-light-80: #ecf7d5;
    --color3-light-70: #e3f4bf;
    --color3-light-60: #daf0aa;
    --color3-light-50: #d1ec95;
    --color3-light-40: #c7e880;
    --color3-light-30: #bee46b;
    --color3-light-20: #b5e155;
    --color3-light-10: #abdd40;
}
:root { /* color3 dark */
    --color3-dark-10: #92c327;
    --color3-dark-20: #82ae22;
    --color3-dark-30: #71981e;
    --color3-dark-40: #61821a;
    --color3-dark-50: #516d16;
    --color3-dark-60: #415711;
    --color3-dark-70: #31410d;
    --color3-dark-80: #202b09;
    --color3-dark-90: #101604;
}
:root { /* color4 light */
    --color4-light-90: #f9fafb;
    --color4-light-80: #f4f5f7;
    --color4-light-70: #eef1f4;
    --color4-light-60: #e9ecf0;
    --color4-light-50: #e3e7ec;
    --color4-light-40: #dde2e8;
    --color4-light-30: #d8dde4;
    --color4-light-20: #d2d9e1;
    --color4-light-10: #cdd4dd;
}
:root { /* color4 dark */
    --color4-dark-10: #b3bac3;
    --color4-dark-20: #9fa6ae;
    --color4-dark-30: #8b9198;
    --color4-dark-40: #777c82;
    --color4-dark-50: #64686d;
    --color4-dark-60: #505357;
    --color4-dark-70: #3c3e41;
    --color4-dark-80: #28292b;
    --color4-dark-90: #141516;
}
:root { /* color5 light */
    --color5-light-90: #f6f6fe;
    --color5-light-80: #edecfc;
    --color5-light-70: #e4e3fb;
    --color5-light-60: #dbdafa;
    --color5-light-50: #d2d1f9;
    --color5-light-40: #c9c7f7;
    --color5-light-30: #c0bef6;
    --color5-light-20: #b7b5f5;
    --color5-light-10: #aeabf3;
}
:root { /* color5 dark */
    --color5-dark-10: #9592da;
    --color5-dark-20: #8482c2;
    --color5-dark-30: #7371a9;
    --color5-dark-40: #636191;
    --color5-dark-50: #535179;
    --color5-dark-60: #424161;
    --color5-dark-70: #323149;
    --color5-dark-80: #212030;
    --color5-dark-90: #101018;
}
:root { /* color6 light */
    --color6-light-90: #fbedea;
    --color6-light-80: #f7dad5;
    --color6-light-70: #f4c8bf;
    --color6-light-60: #f0b5aa;
    --color6-light-50: #eca395;
    --color6-light-40: #e89080;
    --color6-light-30: #e47e6b;
    --color6-light-20: #e16b55;
    --color6-light-10: #dd5940;
}
:root { /* color6 dark */
    --color6-dark-10: #c33f27;
    --color6-dark-20: #ae3822;
    --color6-dark-30: #98311e;
    --color6-dark-40: #822a1a;
    --color6-dark-50: #6d2316;
    --color6-dark-60: #571c11;
    --color6-dark-70: #41150d;
    --color6-dark-80: #2b0e09;
    --color6-dark-90: #160704;
}
:root { /* color7 light */
    --color7-light-90: #f6f5ef;
    --color7-light-80: #edecdf;
    --color7-light-70: #e4e2d0;
    --color7-light-60: #dbd9c0;
    --color7-light-50: #d3cfb0;
    --color7-light-40: #cac5a0;
    --color7-light-30: #c1bc90;
    --color7-light-20: #b8b281;
    --color7-light-10: #afa971;
}
:root { /* color7 dark */
    --color7-dark-10: #958f57;
    --color7-dark-20: #857f4e;
    --color7-dark-30: #746f44;
    --color7-dark-40: #645f3a;
    --color7-dark-50: #535031;
    --color7-dark-60: #424027;
    --color7-dark-70: #32301d;
    --color7-dark-80: #212013;
    --color7-dark-90: #11100a;
}
:root { /* color8 light */
    --color8-light-90: #f3f6ef;
    --color8-light-80: #e6eddf;
    --color8-light-70: #dae4cf;
    --color8-light-60: #cedbbf;
    --color8-light-50: #c2d3b0;
    --color8-light-40: #b5caa0;
    --color8-light-30: #a9c190;
    --color8-light-20: #9db880;
    --color8-light-10: #90af70;
}
:root { /* color8 dark */
    --color8-dark-10: #779556;
    --color8-dark-20: #6a854d;
    --color8-dark-30: #5c7443;
    --color8-dark-40: #4f643a;
    --color8-dark-50: #425330;
    --color8-dark-60: #354226;
    --color8-dark-70: #28321d;
    --color8-dark-80: #1a2113;
    --color8-dark-90: #0d110a;
}
:root { /* color9 light */
    --color9-light-90: #f7eafb;
    --color9-light-80: #eed5f7;
    --color9-light-70: #e6bff4;
    --color9-light-60: #ddaaf0;
    --color9-light-50: #d595ec;
    --color9-light-40: #cd80e8;
    --color9-light-30: #c46be4;
    --color9-light-20: #bc55e1;
    --color9-light-10: #b340dd;
}
:root { /* color9 dark */
    --color9-dark-10: #9a27c3;
    --color9-dark-20: #8922ae;
    --color9-dark-30: #781e98;
    --color9-dark-40: #671a82;
    --color9-dark-50: #56166d;
    --color9-dark-60: #441157;
    --color9-dark-70: #330d41;
    --color9-dark-80: #22092b;
    --color9-dark-90: #110416;
}
:root { /* color10 light */
    --color10-light-90: #eaf0fb;
    --color10-light-80: #d5e0f7;
    --color10-light-70: #bfd1f4;
    --color10-light-60: #aac2f0;
    --color10-light-50: #95b3ec;
    --color10-light-40: #80a3e8;
    --color10-light-30: #6b94e4;
    --color10-light-20: #5585e1;
    --color10-light-10: #4075dd;
}
:root { /* color10 dark */
    --color10-dark-10: #275cc3;
    --color10-dark-20: #2252ae;
    --color10-dark-30: #1e4798;
    --color10-dark-40: #1a3d82;
    --color10-dark-50: #16336d;
    --color10-dark-60: #112957;
    --color10-dark-70: #0d1f41;
    --color10-dark-80: #09142b;
    --color10-dark-90: #040a16;
}
:root { /* color11 light */
    --color11-light-90: #fbf6ea;
    --color11-light-80: #f7edd5;
    --color11-light-70: #f4e3bf;
    --color11-light-60: #f0daaa;
    --color11-light-50: #ecd195;
    --color11-light-40: #e8c880;
    --color11-light-30: #e4bf6b;
    --color11-light-20: #e1b555;
    --color11-light-10: #ddac40;
}
:root { /* color11 dark */
    --color11-dark-10: #c39327;
    --color11-dark-20: #ae8222;
    --color11-dark-30: #98721e;
    --color11-dark-40: #82621a;
    --color11-dark-50: #6d5216;
    --color11-dark-60: #574111;
    --color11-dark-70: #41310d;
    --color11-dark-80: #2b2109;
    --color11-dark-90: #161004;
}
:root { /* color12 light */
    --color12-light-90: #eafbf4;
    --color12-light-80: #d5f7e9;
    --color12-light-70: #bff4dd;
    --color12-light-60: #aaf0d2;
    --color12-light-50: #95ecc7;
    --color12-light-40: #80e8bc;
    --color12-light-30: #6be4b1;
    --color12-light-20: #55e1a5;
    --color12-light-10: #40dd9a;
}
:root { /* color12 dark */
    --color12-dark-10: #27c381;
    --color12-dark-20: #22ae72;
    --color12-dark-30: #1e9864;
    --color12-dark-40: #1a8256;
    --color12-dark-50: #166d48;
    --color12-dark-60: #115739;
    --color12-dark-70: #0d412b;
    --color12-dark-80: #092b1d;
    --color12-dark-90: #04160e;
}
.cutCorners, .cutCornersBefore, .cutCornersAfter {
    --cutRadius:0px;
}
.cutCorners, .cutCornersBefore::before, .cutCornersAfter::after {
    clip-path: polygon(var(--cutRadius) 0%, calc(100% - var(--cutRadius)) 0%, 100% var(--cutRadius), 100% calc(100% - var(--cutRadius)), calc(100% - var(--cutRadius)) 100%, var(--cutRadius) 100%, 0% calc(100% - var(--cutRadius)), 0% var(--cutRadius));
}
.window {
    position: absolute;
    box-sizing: border-box;
    min-width: fit-content;
    min-height: fit-content;
    z-index: 1;
    filter: drop-shadow(2px 2px 4px #00000080);
}
.window.fullscreen {
    z-index: 100;
    width: 100% !important;
    height: 100% !important;
    filter: none;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-in-out;
}
.window.fullscreenExit {
    transition: all 0.3s ease-in-out;
}
.window > .resizers {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 100%;
    top: 0px;
}
.window.fullscreen>.resizers {
    display: none;
}
.window>.container {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: fit-content;
    min-height: fit-content;
}
.window>.deco {
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    left: 0px;
    top: 0px;
}
.window > .container > footer,
.window>.deco {
    user-select: none;
    touch-action: none;
    pointer-events: none;
}
.window>.deco::before,
.window>.deco::after {
    z-index: 3;
    content: '';
    user-select: none;
    pointer-events: none;
    touch-action: none;
    position: absolute;
    height: calc(100% + 2px);
    box-sizing: border-box;
    width: 10px;
    filter: blur(3px);
    top: -2px;
}
.window>.deco::before {
    left: -2px;
    border-left: 3px #000 solid;
    border-top-left-radius: 10px;
    border-top: 3px #000 solid;
}
.window>.deco::after {
    right: -2px;
    border-right: 3px #000 solid;
    border-top-right-radius: 10px;
    border-top: 3px #000 solid;
}
.window > .container {
    background: linear-gradient(180deg, var(--color1) 0%, var(--color1-dark-20) 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    
    display: flex;
    flex-direction: column;
}
.window.fullscreen>.container,.window.fullscreenExit>.container {
    transition: all 0.3s ease-in-out;
}
.window.fullscreen>.container {
    border-radius: 0;
}
.window > .container > header {
    position: relative;
    height: 30px;
    width: 100%;
    display: flex;
    align-content: space-between;
    padding-left: 15px;
    column-gap: 5px;
    padding-right: 5px;
    background: linear-gradient(180deg, var(--color1-dark-50) 0%, var(--color1-light-50) 5%, var(--color1-dark-50) 18%, var(--color1-dark-10) 55%, var(--color1) 95%, var(--color1-dark-20) 100%);
}
.window>.container>header > .info {
    height: 100%;
    width: 0%;
    min-width: 0px;
    overflow: hidden;
    display: flex;
    column-gap: 5px;
    flex-grow: 1;
    z-index: 2;
}
.window>.container>header>.info h1.empty, .window>.container>header>.info h1.empty {
    display: none;
}
.window>.container>header>.info h1 {
    font-size: 16px;
    font-weight: 500;
    text-fill-color: #fff;
    -webkit-text-fill-color: #fff;
    text-stroke: #000 2px;
    -webkit-text-stroke: #000 2px;
    white-space: nowrap;
    paint-order: stroke fill;
    line-height: 30px;
}
.window>.container>header>.info h2 {
    font-size: 12px;
    font-weight: 400;
    text-fill-color: #fff;
    white-space: nowrap;
    -webkit-text-fill-color: #fff;
    text-stroke: #000 2px;
    -webkit-text-stroke: #000 2px;
    paint-order: stroke fill;
    line-height: 34px;
}
.window>.container>header>.buttons {
    display: flex;
    height: 30px;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: fit-content;
    column-gap: 5px;
    z-index: 200;
}
.window>.container>header>.buttons>button {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px var(--color1-light-50) solid;
    overflow: hidden;
}
.window>.container>header>.buttons>button::after {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    content: '';
    left: -2px;
    top: -2px;
    border: 2px solid #000;
    opacity: 0;
    will-change: filter;
    z-index: 2;
    transition: all 0.2s ease-in-out;
}
.window>.container>header>.buttons>button:not(.disabled) {
    cursor: pointer;
}
.window>.container>header>.buttons>button:not(.disabled):hover::after {
    opacity: 0.2;
    filter: blur(3px);
}
.window>.container>header>.buttons>button.fullscreen {
    background: linear-gradient(150deg, var(--color8-light-40) 0%, var(--color8) 4%, var(--color8) 20%, var(--color8-dark-20) 100%);
}
.window>.container>header>.buttons>button.fullscreen::before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    left: 50%;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px #fff solid;
    border-bottom: 2.5px #fff solid;
}
.window>.container>header>.buttons>button.fullscreen.on::before {
    opacity: 0;
}
.window>.container>header>.buttons>button.fullscreen .face {
    opacity: 0;
    left: 50%;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 10px;
    height: 10px;
}
.window>.container>header>.buttons>button.fullscreen .face::before, .window>.container>header>.buttons>button.fullscreen .face::after {
    content: '';
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    border: 1.5px #fff solid;
    background: linear-gradient(150deg, var(--color8-light-40) 0%, var(--color8) 4%, var(--color8) 20%, var(--color8-dark-20) 100%);
}
.window>.container>header>.buttons>button.fullscreen .face::before {
    left: -1px;
    z-index: 2;
    top: 1px;
}
.window>.container>header>.buttons>button.fullscreen .face::after {
    left: 1px;
    top: -1px;
    z-index: 1;
}
.window>.container>header>.buttons>button.fullscreen.on .face {
    opacity: 1;
}
.window>.container>header>.buttons>button.close {
    background: linear-gradient(150deg, var(--color6-light-80) 0%, var(--color6-light-20) 4%, var(--color6-light-20) 20%, var(--color6-dark-20) 100%);
}
.window>.container>header>.buttons>button.close .face {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    left: 50%;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);
}
.window>.container>header>.buttons>button.close .face::before, .window>.container>header>.buttons>button.close .face::after {
    position: absolute;
    content: '';
    width: 14px;
    height: 2.5px;
    box-sizing: border-box;
    left: 50%;
    z-index: 1;
    top: 50%;
    background: #fff;
}
.window>.container>header>.buttons>button.close .face::before {
        transform: translate(-50%, -50%) rotateZ(45deg);
}
.window>.container>header>.buttons>button.close .face::after {
    transform: translate(-50%, -50%) rotateZ(135deg);
}
.window>.container>header>.buttons>button.minimize {
    background: linear-gradient(150deg, var(--color7-light-40) 0%, var(--color7) 4%, var(--color7) 20%, var(--color7-dark-20) 100%);
}
.window>.container>header>.buttons>button.minimize::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    left: 50%;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 2.5px #fff solid;
}
.window > .container > footer {
    z-index: 3;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
.window > .container > footer::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    z-index: 3;
    bottom: -3px;
    background: #000;
    filter: blur(3px);
}
.window > .resizers {
    z-index: unset;
    overflow: visible;
}
.window > .resizers > * {
    position: absolute;
    z-index: 100;
    background: transparent !important;
}
.window>.resizers>.resizePoint {
    position: absolute;
}
.window > .resizers > .resizePoint:is(.topLeft, .topRight, .bottomRight, .bottomLeft) {
    width: 15px;
    height: 15px;
    z-index: 102;
}
.window>.resizers>.resizePoint.topLeft {
    left: -3px;
    top: -3px;
}
.window>.resizers>.resizePoint.topRight {
    top: -3px;
    right: -3px;
}
.window>.resizers>.resizePoint.bottomRight {
    bottom: -3px;
    right: -3px;
}
.window>.resizers>.resizePoint.bottomLeft {
    bottom: -3px;
    left: -3px;
}
.window>.resizers>.resizePoint:is(.left, .right) {
    width: 15px;
    height: 100%;
    top: 0px;
    z-index: 101;
}
.window>.resizers>.resizePoint.left {
    left: -3px;
}
.window>.resizers>.resizePoint.left:not(.disabled) {
    cursor: w-resize;
}
.window>.resizers>.resizePoint.right {
    right: -3px;
}
.window>.resizers>.resizePoint:is(.bottom, .top) {
    height: 15px;
    width: 100%;
    left: 0px;
    z-index: 101;
}
.window>.resizers>.resizePoint.bottom {
    bottom: -3px;
}
.window>.resizers>.resizePoint.top {
    top: -3px;
}
.window>.resizers>.movePoint {
    position: absolute;
    height: 30px;
    left: 0px;
    top: 0px;
    width: 100%;
}
.window > .container > .contentHolder {
    position: absolute;
    width: calc(100% - 4px);
    flex-grow: 1;
    top: 30px;
    left: 2px;
    height: calc(100% - 32px);
    z-index: 2;
    background: var(--color4-light-90);
}
.loader {
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
    left: 0px;
    top: 0px;
    max-height: 100%;
    background: #000;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.loader > .cont {
    position: absolute;
    width: 15vw;
    height: 15vw;
    padding-bottom: 2vw;
    z-index: 1;
    left: 50%;
    box-sizing: border-box;
    top: 50%;
    transform: translate(-50%, -50%);
}
.loader > .cont .belt {
    position: absolute;
    width: 12vw;
    height: 1.2vw;
    background: transparent;
    box-sizing: border-box;
    --borderWidth:2px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 1;
}
.loader > .cont .belt .border {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}
.loader > .cont .belt .border::before, .loader > .cont .belt .border::after {
    content: '';
}
.loader > .cont .belt .border::before {
    z-index: 1;
    position: absolute;
    --cutRadius:5px;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #fff;
}
.loader > .cont .belt .border::after {
    z-index: 2;
    background: #000;
}
.loader > .cont .belt .symbols {
    z-index: 3;
}
.loader > .cont .belt .symbols, .loader > .cont .belt .border::after {
    --cutRadius:4px;
    position: absolute;
    width: calc(100% - calc(var(--borderWidth) + var(--borderWidth)));
    height: calc(100% - calc(var(--borderWidth) + var(--borderWidth)));
    left: var(--borderWidth);
    top: var(--borderWidth);
}
.loader > .cont .belt .symbols .symbolsBag {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    display: flex;
    column-gap: var(--borderWidth);
}
@keyframes loader_symbol_flicker {
    0% {
        opacity: 1;
    }
    19% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.loader > .cont .belt .symbols .symbolsBag > div {
    height: 100%;
    flex-basis: 100%;
    opacity: 0;
    background: linear-gradient(180deg, var(--color3) 0%, var(--color3-light-50) 12%, var(--color3-light-50) 15%, var(--color3) 30%, var(--color3-dark-50) 60%, var(--color3-dark-50) 70%, var(--color3) 100%) !important;
}
.loading .loader > .cont .belt .symbols .symbolsBag > div, .loading-close .loader > .cont .belt .symbols .symbolsBag > div {
    animation-name: loader_symbol_flicker;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.loading-close .loader, body:not(.loading) .loader {
    opacity: 0;
}
.window.map-window .contentHolder {
    box-sizing: border-box;
    padding: 5px;
}
.window.map-window .contentHolder .map.content {
    position: relative;
    width: 100%;
    height: 100%;
}
.window.map-window .contentHolder .map.content .screen {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.window.map-window .contentHolder .map.content {
    --currentMapScale: 1;
    --currentMapOffsetX: -50%;
    --currentMapOffsetY: -50%;
    --humanPixelWidth: 6px;
    --humanPixelHeight: 6px;
}
.window.map-window .contentHolder .map.content .screen.outlines {
    z-index: 1;
}
.window.map-window .contentHolder .map.content .screen.plots {
    z-index: 2;
}
.window.map-window .contentHolder .map.content .screen.humans {
    z-index: 3;
}
.window.map-window .contentHolder .map.content .screen.humans.pinned {
    z-index: 4;
}
.window.map-window .contentHolder .map.content .screen.fake {
    z-index: 5;
}
.window.map-window .contentHolder .map.content .screen.fake.hoverHuman {
    cursor: pointer;
}
.window.map-window .contentHolder .map.content .screen.fake .tooltips {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    touch-action: none !important;
    user-select: none !important;
    pointer-events: none !important;
}
.window.map-window .contentHolder .map.content .screen.fake canvas {
    z-index: 1;
}
.window.map-window .contentHolder .map.content .screen.fake.dragging {
    cursor: grabbing;
}
.window.map-window .contentHolder .map.content .zoom-controls {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    max-width: 10px;
    max-height: 200px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    --percent: 0%;
    --percentText: '0%';
    --thumbSize: 15px;
}
.window.map-window .contentHolder .map.content .zoom-controls :is(.bar, .thumb) {
    user-select: none;
    pointer-events: none;
    touch-action: none;
    position: absolute;
    box-sizing: border-box;
}
.window.map-window .contentHolder .map.content .zoom-controls :is(.bar .bar-inner, .thumb .thumb-inner) {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    box-sizing: border-box;
}
.window.map-window .contentHolder .map.content .zoom-controls .bar {
    z-index: 1;
    width: 8px;
    border-radius: 99999px;
    background: var(--color4-light-50);
    border: 1.5px var(--color4-dark-50) solid;
    height: calc(100% - var(--thumbSize));
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--thumbSize) / 2);
}
.window.map-window .contentHolder .map.content .zoom-controls .bar .bar-inner {
    bottom: 0px;
    height: var(--percent);
    border-radius: 9999px;
    box-shadow: inset -1px -1px 3px 0px rgba(0, 0, 0, 1), inset 1px 1px 5px 0px rgba(255, 255, 255, 1);
    background: var(--color12);
    /* background: linear-gradient(90deg, var(--color12-light-50) 0%, var(--color12) 50%, var(--color12-light-10) 60%, var(--color12-dark-50) 100%) !important; */
}
.window.map-window .contentHolder .map.content .zoom-controls:not(.disabled) {
    cursor: pointer !important;
}
.window.map-window .contentHolder .map.content .zoom-controls .thumb {
    z-index: 2;
    width: var(--thumbSize);
    height: var(--thumbSize);
    left: 50%;
    bottom: var(--percent);
    transform: translate(-50%, var(--percent));
}
.window.map-window .contentHolder .map.content .zoom-controls .thumb .thumb-inner {
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--color12-light-10);
    border: 1.5px var(--color4-dark-50) solid;
    box-shadow: inset -1px -1px 3px 0px rgba(0, 0, 0, 1), inset 1px 1px 5px 0px rgba(255, 255, 255, 1);
}
.window.map-window .contentHolder .map.content .zoom-controls .thumb::before {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translate(-50%, -50%);
    content: var(--percentText);
    background: var(--color4-light-50);
    border: 1.5px var(--color4-dark-50) solid;
    color:#000;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.2s ease-in-out 0.2s;
}
.window.map-window .contentHolder .map.content .zoom-controls.zooming .thumb::before, .window.map-window .contentHolder .map.content .zoom-controls:hover .thumb::before {
    opacity: 1;
    transform: translate(-100%, -50%);
    transition-delay: 0s;
}
.window.map-window .contentHolder .map.content .zoom-controls .zoom-input {
    position: absolute;
    top: 0px;
    left: 0px;
    transform-origin: top left;
    width: 200px;
    height: 10px;
    transform: rotateZ(-90deg) translate(-100%, 0%);
    z-index: 3;
    opacity: 0;
}
.window.map-window .contentHolder .map.content .zoom-controls:not(.disabled) .zoom-input {
    cursor: pointer;
}
.window.map-window .contentHolder .map.content .screen.humans canvas,
.window.map-window .contentHolder .map.content .screen.outlines canvas {
    touch-action: none;
    pointer-events: none;
    user-select: none;
}
.window.map-window .contentHolder .map.content .screen canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(var(--currentMapOffsetX), var(--currentMapOffsetY)) scale(var(--currentMapScale));
}
.window.map-window .contentHolder .map.content .controls {
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 10;
}
.window.map-window .contentHolder .map.content .controls .control {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.window.map-window .contentHolder .map.content .controls .control .tooltip {
    position: absolute;
    user-select: none;
    touch-action: none;
    font-size: 13px;
    line-height: 13px;
    padding: 2px 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #000000d0;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}
.window.map-window .contentHolder .map.content .controls .control:hover .tooltip {
    opacity: 1;
}
.window.map-window .contentHolder .map.content .controls .control::before {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    content: '';
}
.window.map-window .contentHolder .map.content .controls .control.magnifyingGlass::before {
    background-image: url('/glassIcon.webp');
    background-size: 100% 100%;
}
.window.map-window .contentHolder .map.content .screen.fake .tooltips {
    --sizeHalfWidth: calc(var(--humanPixelWidth) / 2);
    --arrowSize: 10px;
}
@keyframes tooltip_open {
    0% {
        opacity: 0;
        transform: translate(var(--sizeHalfWidth), -50%) scale(0);
    }
    100% {
        opacity: 1;
        transform: translate(var(--sizeHalfWidth), -50%);
    }
}
.tooltips .tooltip {
    position: absolute;
    box-sizing: border-box;
    padding-left: calc(10px + var(--arrowSize));
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 7px;
    transform-origin: left center;
    transform: translate(var(--sizeHalfWidth), -50%);
    animation-name: tooltip_open;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
}
@keyframes tooltip_close {
    0% {
        opacity: 1;
        transform: translate(var(--sizeHalfWidth), -50%);
    }
    100% {
        opacity: 0;
        transform: translate(var(--sizeHalfWidth), -50%) scale(0);
    }
}
.tooltips .tooltip.close {
    animation-name: tooltip_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
}
.tooltips .tooltip .face {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    --borderSize:2px;
}
.tooltips .tooltip .face .bg {
    position: absolute;
    z-index: 1;
    width: calc(100% - var(--arrowSize));
    left: var(--arrowSize);
    top: 0px;
    height: 100%;
    background: #000;
    box-sizing: border-box;
    border: var(--borderSize) solid var(--color3-light-10);
}
.tooltips .tooltip .face .arrow {
    width: calc(var(--arrowSize) * 1.41);
    height: calc(var(--arrowSize) * 1.41);
    left: calc(var(--arrowSize) * 0.4);
    top: 50%;
    position: absolute;
    z-index: 2;
    transform: translate(0, -50%);
}
.tooltips .tooltip .face .arrow::before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    box-sizing: border-box;
    border-left: var(--borderSize) solid var(--color3-light-10);
    border-top: var(--borderSize) solid var(--color3-light-10);
    background: #000;
    transform: rotateZ(-45deg);
}
/* .tooltips .tooltip.tooltip::after {
    z-index: 2;
    content: '';
    position: absolute;
    background: #000;
    top: 50%;
    left: 0px;
    transform: translate(0%, -50%);
    width: var(--arrowSize);
    height: var(--arrowSize);
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

.tooltips .tooltip::before {
    content: '';
    left: calc(var(--arrowSize) - 1px);
    top: 0px;
    position: absolute;
    width: calc(100% - calc(var(--arrowSize) - 1px));
    height: 100%;
    z-index: 1;
    background: #000;
} */
.tooltip .content {
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.tooltip .content p {
    width: 100%;
    text-align: center;
}
.tooltip .content p {
    font-family: "IBM Plex Mono", monospace !important;
    color: var(--color3-light-10);
    font-size: 0.85em;
    line-height: 0.85em;
    word-break: keep-all;
    white-space: nowrap;
}
.tooltip .content p span {
    color: inherit;
    font-family:  inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    word-break: inherit;
    white-space: inherit;
    letter-spacing: inherit;
}
.tooltip .content p.name {
    letter-spacing: 0.085em;
    font-weight: 600;
}
.tooltip .content p.action {
    font-size: 0.75em;
    line-height: 0.75em;
    letter-spacing: 0.075em;
    font-weight: 500;
    color: var(--color3-light-50);
}
.tooltip .content p.action .location {
    font-style: 500;
    /* color: var(--color12); */
}
/* .genderIcon.female::before {
    content: '♀';
}

.genderIcon.male::before {
    content: '♂';
}

.genderIcon.other::before {
    content: '⚧';
} */
.window.humanStatus {
    z-index: 2;
}
.window.humanStatus.focused {
    z-index: 3;
}
.window.humanStatus .valueCont {
    display: flex;
    column-gap: 5px;
}
.window.humanStatus .content {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}
@keyframes windowHuman_open {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    75% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.window.humanStatus.open, .window.magnifyingGlass.open {
    transform: scale(0);
    opacity: 0;
    animation-name: windowHuman_open;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 0.3s;
}
@keyframes windowHuman_close {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
.window.humanStatus.closing, .window.magnifyingGlass.closing {
    animation-name: windowHuman_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    transform-origin: center bottom;
}
.window.magnifyingGlass {
    z-index: 2;
}
.window.magnifyingGlass.focused {
    z-index: 3;
}
.content.magnifyingGlass {
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
    overflow: hidden;
    --currentMapOffsetX: -50%;
    --currentMapOffsetY: -50%;
}
.content.magnifyingGlass .cont {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    transform: scale(1.5);
}
.content.magnifyingGlass canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(var(--currentMapOffsetX), var(--currentMapOffsetY));
}
.app.bluescreen {
    background: darkblue !important;
    box-sizing: border-box;
    padding: 20px;
}
.app.bluescreen .bluescreen-msg, .app.bluescreen .bluescreen-msg * {
    font-family: 'IBM Plex Mono', monospace;
    color: #ccc;
    font-weight: 500;
}
.app.bluescreen .bluescreen-msg {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.app.bluescreen .bluescreen-msg .main-msg {
    font-size: 20px;
    font-weight: 600;
}
.window.map-window .contentHolder .map.content .optionsCont {
    z-index:  15;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 20px;
    height: 20px;
}
.optionsCont .btn-cont {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0px;
    top: 0px;
    z-index: 2;
}
.optionsCont .btn-cont button:not(.disabled) {
    cursor: pointer;
}
.optionsCont .btn-cont button {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0xp;
    background: url("/options.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.optionsCont .optionsList {
    position: absolute;
    width: fit-content;
    right: 0px;
    top: 100%;
    height: fit-content;
    --maxHeight: 120px;
    width: 100px;
}
.optionsCont .optionsList.init {
    opacity: 0;
}
.optionsCont .optionsList.noTransition, .optionsCont .optionsList.noTransition *  {
    transition: none !important;
    opacity: 1;
}
.optionsCont .optionsList.closed {
    height: 0px;
}
.optionsCont .optionsList.closing {
    height: 0px;
}
.optionsCont .optionsList:is(.closing, .opening) {
    transition: all 0.3s ease-in;
}
.optionsCont .optionsList .optionsList-cont {
    position: relative;
    overflow: hidden;
    height: fit-content;
    background: var(--color4-light-50);
    border: 1.5px var(--color4-dark-50) solid;
    width: 100%;
}
.optionsCont .optionsList.opened .optionsList-cont {
    overflow: visible;
}
.optionsCont .optionsList.open, .optionsCont .optionsList.opening {
    height: var(--targetHeight);
}
.optionsCont .optionsList:not(.init) .optionsList-cont {
    height: 100%;
}
.optionsCont .optionsList .optionsList-cont .optionsList-inner {
    position: relative;
    height: fit-content;
    width: 100%;
    color:#000;
    font-size: 12px;
    line-height: 16px;
}
.optionsCont .optionsList:not(.init) .optionsList-cont .optionsList-inner {
    height: 100%;
}
.optionsCont .optionsList:is(.opened, .opening) .optionsList-cont .optionsList-inner {
    overflow-x: hidden;
    overflow-y: scroll;
}
.optionsCont .optionsList .optionsList-cont .optionsList-inner .optionsList-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.optionsCont .optionsList .optionsList-cont .optionsList-inner .optionsList-menu .option {
    position: relative;
    padding: 2px 5px;
    width: 100%;
}
.optionsCont .optionsList:not(.closed, .disabled, .closing) .optionsList-cont .optionsList-inner .optionsList-menu .option:hover {
    background: #ddd;
    cursor: pointer;
}
.optionsCont .optionsList .optionsList-cont .optionsList-inner .optionsList-menu .option .toolTip {
    opacity: 0;
    position: absolute;
    background: #fff;
    cursor: #000;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
    touch-action: none;
    z-index: 2;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}
.optionsCont .optionsList:not(.closed, .disabled, .closing) .optionsList-cont .optionsList-inner .optionsList-menu .option:hover .toolTip:not(.empty) {
    opacity: 1;
}
.optionsCont .optionsList .optionsList-cont .optionsList-inner .optionsList-menu .option .toolTip {

}
.optionsCont .optionsList .optionsList-cont .optionsList-inner .optionsList-menu .option .name {
    white-space: nowrap;
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 19px;
}
.optionsCont .optionsList.init {
    height: fit-content !important;
}
.app {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    left: 0px;
    top: 0px;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(180deg, var(--color5) 0%, var(--color5-dark-50) 100%) !important;
}