/**
     small screens or large zoom factor
 */
@media screen and (max-width: 1080px) {
    :root, .g-mh > *, .g-md > *, .g-ph > *, .g-pd > * {
        --r-fs: clamp(2px, 12px, 24px);
        --r-ff: Arial;
        --r-fw: 400;
        --r-br: 3px;
        --r-bw: 0.5px;
        --r-p1: 1.5vw;
        --r-p2: 2vw;
        --r-p3: 2.5vw;
        --r-p4: 0;
        --r-p5: 0;
        --r-m1: 1vw;
        --r-m2: 1.5vw;
        --r-m3: 1vw;
        --r-m4: 0;
        --r-m5: 0;
    }
}

/**
     normal screens
 */
@media screen and (min-width: 1080px) {
    :root, .g-mh > *, .g-md > *, .g-ph > *, .g-pd > * {
        --r-fs: clamp(2px, 12px, 24px);
        --r-ff: Arial;
        --r-fw: 400;
        --r-br: 4px;
        --r-bw: 1px;
        --r-p1: 1vw;
        --r-p2: 1.5vw;
        --r-p3: 2vw;
        --r-p4: 5vw;
        --r-p5: 10vw;
        --r-m1: 1vw;
        --r-m2: 1.5vw;
        --r-m3: 2vw;
        --r-m4: 5vw;
        --r-m5: 10vw;
    }
}

:root {
    --r-bg: #373b3e;
    --r-c: #e3e3e3;
    --r-b: #777777;
    --r-bs: #86b7fe;
    --bg: var(--r-bg);
    --c: var(--r-c);
    --bgi: var(--r-c);
    --ci: var(--r-bg);
    --b: var(--r-b);
    --bs: var(--r-bs);
}

:root, .gl-hh > *, .gs-hh > *, .gl-hd > *, .gs-hd > *, .g-hh > *, .g-hd > * {
    --r-s1: 10%;
    --r-s2: 20%;
    --r-s3: 30%;
    --r-s4: 40%;
    --r-s5: 50%;
    --r-s6: 60%;
    --r-s7: 70%;
    --r-s8: 80%;
    --r-s9: 90%;
    --r-s: 100%;
    --p1: var(--r-p1);
    --p2: var(--r-p2);
    --p3: var(--r-p3);
    --p4: var(--r-p4);
    --p5: var(--r-p5);
    --m1: var(--r-p1);
    --m2: var(--r-p2);
    --m3: var(--r-p3);
    --m4: var(--r-p4);
    --m5: var(--r-p5);
    --s1: var(--r-s1);
    --s2: var(--r-s2);
    --s3: var(--r-s3);
    --s4: var(--r-s4);
    --s5: var(--r-s5);
    --s6: var(--r-s6);
    --s7: var(--r-s7);
    --s8: var(--r-s8);
    --s9: var(--r-s9);
    --s: var(--r-s);
    --w1: var(--r-s1);
    --w2: var(--r-s2);
    --w3: var(--r-s3);
    --w4: var(--r-s4);
    --w5: var(--r-s5);
    --w6: var(--r-s6);
    --w7: var(--r-s7);
    --w8: var(--r-s8);
    --w9: var(--r-s9);
    --w: var(--r-s);
    --br: var(--r-br);
    --bw: var(--r-bw);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--c) var(--b);
    background-color: var(--bg);
    color: var(--c);
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    margin-inline-end: 0;
    margin-inline-start: 0;
    padding-block-end: 0;
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-inline-start: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    font-size: var(--r-fs);
    font-family: var(--r-ff);
    font-weight: var(--r-fw);
    /*font-stretch: 100%;*/
    /*font-size-adjust: none;*/
    /*font-style: normal;*/
    /*font-variant-alternates: normal;*/
    /*font-variant-caps: normal;*/
    /*font-variant-east-asian: normal;*/
    /*font-variant-ligatures: normal;*/
    /*font-variant-numeric: normal;*/
    /*font-variant-position: normal;*/
    /*font-variation-settings: normal;*/
    /*letter-spacing: normal;*/
    /*line-height: normal;*/
    /*text-indent: 0px;*/
    /*text-shadow: none;*/
    /*text-transform: none;*/
    /*word-spacing: 0px;*/
}

b, strong {
    font-weight: bolder;
}

i {
    font-style: italic;
}

u {
    text-decoration: underline;
}

h1 {
    font-size: 1.3rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.15rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1.05rem;
}

ul {
    list-style-type: disc;
    padding-left: var(--r-p1);
    margin-bottom: var(--r-m1);
}

ol {
    list-style-type: decimal;
    padding-left: var(--r-p1);
    margin-bottom: var(--r-m1);
}

li {
    margin: 0 0 var(--r-m1) 0;
}

progress {
    accent-color: var(--bs);
    height: 14px;
}

progress::-webkit-progress-bar {
    background-color: var(--c);
}

progress::-webkit-progress-value {
    background-color: var(--bs);
}

progress::-moz-progress-bar {
    background-color: var(--bs);
}

/**
    pre
 */

.g-tp, pre, code {
    white-space: pre !important;
}

/**
    cursor pointer
 */
a, button, .g-c {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

/**
    active focus
 */
:focus, :focus-visible, input:focus, .g-active, input[type="checkbox"]:checked + .g-c, .g-c:focus {
    color: var(--c) !important;
    background-color: var(--bg) !important;
    border-color: var(--bs) !important;
    outline: none;
    /*box-shadow: 0 0 0 .25rem 0;*/
    border-style: solid;
}

/**
    hover
 */
a:hover, button:hover, .g-c:hover {
    color: var(--ci) !important;
    background-color: var(--bgi) !important;
    outline: 0;
}

/**
    border top radius
 */

svg {
    stroke: var(--b);
    stroke-width: 0.5px;
    overflow: hidden;
}
/**
    inverter
 */
.g-inv {
    --bg: var(--r-c);
    --c: var(--r-bg);
}

.g-inv .g-inv {
    --bg: var(--r-bg);
    --c: var(--r-c);
}

/**
    height half
 */
.g-hh, .g-hhc > * {
    --s1: calc(var(--r-s1) / 2);
    --s2: calc(var(--r-s2) / 2);
    --s3: calc(var(--r-s3) / 2);
    --s4: calc(var(--r-s4) / 2);
    --s5: calc(var(--r-s5) / 2);
    --s6: calc(var(--r-s6) / 2);
    --s7: calc(var(--r-s7) / 2);
    --s8: calc(var(--r-s8) / 2);
    --s9: calc(var(--r-s9) / 2);
    --s: calc(var(--r-s) / 2);
}

/**
    height double
 */
.g-hd, .g-hdc > * {
    --s1: calc(var(--r-s1) * 2);
    --s2: calc(var(--r-s2) * 2);
    --s3: calc(var(--r-s3) * 2);
    --s4: calc(var(--r-s4) * 2);
    --s5: calc(var(--r-s5) * 2);
    --s6: calc(var(--r-s6) * 2);
    --s7: calc(var(--r-s7) * 2);
    --s8: calc(var(--r-s8) * 2);
    --s9: calc(var(--r-s9) * 2);
    --s: calc(var(--r-s) * 2);
}

/**
    half size
 */
.g-wh, .g-whc > * {
    --w1: calc(var(--r-s1) / 2);
    --w2: calc(var(--r-s2) / 2);
    --w3: calc(var(--r-s3) / 2);
    --w4: calc(var(--r-s4) / 2);
    --w5: calc(var(--r-s5) / 2);
    --w6: calc(var(--r-s6) / 2);
    --w7: calc(var(--r-s7) / 2);
    --w8: calc(var(--r-s8) / 2);
    --w9: calc(var(--r-s9) / 2);
    --w: calc(var(--r-s) / 2);
}

.g-mh, .g-mhc > * {
    --m1: calc(var(--r-m1) / 2);
    --m2: calc(var(--r-m2) / 2);
    --m3: calc(var(--r-m3) / 2);
    --m4: calc(var(--r-m4) / 2);
    --m5: calc(var(--r-m5) / 2);
}

.g-ph, .g-phc > * {
    --p1: calc(var(--r-p1) / 2);
    --p2: calc(var(--r-p2) / 2);
    --p3: calc(var(--r-p3) / 2);
    --p4: calc(var(--r-p4) / 2);
    --p5: calc(var(--r-p5) / 2);
}


/**
    double size
 */
.g-wd, .g-wdc > * {
    --w1: calc(var(--r-s1) * 2);
    --w2: calc(var(--r-s2) * 2);
    --w3: calc(var(--r-s3) * 2);
    --w4: calc(var(--r-s4) * 2);
    --w5: calc(var(--r-s5) * 2);
    --w6: calc(var(--r-s6) * 2);
    --w7: calc(var(--r-s7) * 2);
    --w8: calc(var(--r-s8) * 2);
    --w9: calc(var(--r-s9) * 2);
    --w: calc(var(--r-s) * 2);
}

.g-md, .g-mdc > * {
    --m1: calc(var(--r-m1) * 2);
    --m2: calc(var(--r-m2) * 2);
    --m3: calc(var(--r-m3) * 2);
    --m4: calc(var(--r-m4) * 2);
    --m5: calc(var(--r-m5) * 2);
}

.g-pd, .g-pdc > * {
    --p1: calc(var(--r-p1) * 2);
    --p2: calc(var(--r-p2) * 2);
    --p3: calc(var(--r-p3) * 2);
    --p4: calc(var(--r-p4) * 2);
    --p5: calc(var(--r-p5) * 2);
}


/**
    background color none
 */
.g-t-bg {
    background-color: transparent !important;
}

/**
    overlay
 */
.g-t-o {
    mix-blend-mode: overlay;
}


/**
    border top radius
 */
.g-btr, .g-btrc > * {
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
}

/**
    border top radius right none
 */
.g-btrr, .g-btrrc > * {
    border-top-right-radius: 0 !important;
}

/**
    border top radius left none
 */
.g-btrl, .g-btrlc > * {
    border-top-left-radius: 0 !important;
}

/**
    border bottom radius
 */
.g-bbr, .g-bbrc > * {
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}

/**
    border bottom radius right none
 */
.g-bbrr, .g-bbrrc > * {
    border-bottom-right-radius: 0 !important;
}

/**
    border bottom radius left none
 */
.g-bbrl, .g-bbrlc > * {
    border-bottom-left-radius: 0 !important;
}

/**
    border top 0
 */
.g-bt, .g-btc > * {
    border-top: 0 !important;
}

/**
    border top 0
 */
.g-bb, .g-bbc > * {
    border-bottom: 0 !important;
}

/**
    border top 0
 */
.g-bl, .g-blc > * {
    border-left: 0 !important;
}

/**
    border right 0
 */
.g-br, .g-brc > * {
    border-right: 0 !important;
}

/**
    border
 */
.g-b, .g-bc > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: var(--b);
    border-block-color: var(--b);
    border-inline-color: var(--b);
}

.g-b2, .g-b2c > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: transparent;
    border-block-color: transparent;
    border-inline-color: transparent;
}

/**
    no click handler
 */
.g-npe, .g-npec > * {
    pointer-events: none;
}

/**
    padding 0
 */
.g-pr, .g-prc > * {
    padding-right: 0 !important;
}

/**
    padding 0
 */
.g-pl, .g-plc > * {
    padding-left: 0 !important;
}

/**
    padding 0
 */
.g-pt, .g-ptc > * {
    padding-top: 0 !important;
}

/**
    padding 0
 */
.g-pb, .g-pbc > * {
    padding-bottom: 0 !important;
}

/**
    padding
 */
.g-p1, .g-p1c > * {
    padding: var(--p1);
}

/**
    padding
 */
.g-p2, .g-p2c > * {
    padding: var(--p2);
}

/**
    padding 10%
 */
.g-p3, .g-p3c > * {
    padding: var(--p3);
}

/**
    padding 10%
 */
.g-p4, .g-p4c > * {
    padding: var(--p4);
}

/**
    padding 10%
 */
.g-p5, .g-p5c > * {
    padding: var(--p5);
}

/**
    margin 0
 */
.g-mbcl > *:last-child {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.g-m, .g-mc > * {
    margin: 0 !important;
}

/**
    margin 0
 */
.g-mb, .g-mbc > * {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.g-mt, .g-mtc > * {
    margin-top: 0 !important;
}

/**
    margin 0
 */
.g-mr, .g-mrc > * {
    margin-right: 0 !important;
}

/**
    margin 0
 */
.g-ml, .g-mlc > * {
    margin-left: 0 !important;
}

/**
    margin
 */
.g-m1, .g-mc1 > * {
    margin: var(--m1);
}

/**
    margin
 */
.g-m2, .g-mc2 > * {
    margin: var(--m2);
}

/**
    margin
 */
.g-m3, .g-mc3 > * {
    margin: var(--m3);
}

/**
    margin
 */
.g-m4, .g-mc4 > * {
    margin: var(--m4);
}

/**
    margin
 */
.g-m5, .g-mc5 > * {
    margin: var(--m5);
}

/**
    margin -1 hide bottom border helper
 */
.g-mb-1 {
    margin-bottom: -1px !important;
}

/**
    list style none
 */
.g-li, .g-lic > * {
    list-style: none;
}

/**
    z index 100
 */
.g-z {
    z-index: 100;
}

/**
    overflow auto
 */
.g-oa, .g-oac > * {
    overflow: auto;
}

/**
    overflow hidden
 */
.g-oh, .g-ohc > * {
    overflow: hidden;
}

/**
    width %
 */
.g-w1, .g-w1c > * {
    width: var(--w1) !important;
}

/**
    width %
 */
.g-w2, .g-w2c > * {
    width: var(--w2) !important;
}

/**
    width %
 */
.g-w3, .g-w3c > * {
    width: var(--w3) !important;
}

/**
    width %
 */
.g-w4, .g-w4c > * {
    width: var(--w4) !important;
}

/**
    width %
 */
.g-w5, .g-w5c > * {
    width: var(--w5) !important;
}

/**
    width %
 */
.g-w6, .g-w6c > * {
    width: var(--w6) !important;
}

/**
    width %
 */
.g-w7, .g-w7c > * {
    width: var(--w7) !important;
}

/**
    width %
 */
.g-w8, .g-w8c > * {
    width: var(--w8) !important;
}

/**
    width %
 */
.g-w9, .g-w9c > * {
    width: var(--w9) !important;
}

/**
    width %
 */
.g-w, .g-wc > * {
    width: var(--w) !important;
}

/**
    height %
 */
.g-h1, .g-hc1 > * {
    height: var(--s1) !important;
}

/**
    height %
 */
.g-h2, .g-hc2 > * {
    height: var(--s2) !important;
}

/**
    height %
 */
.g-h3, .g-hc3 > * {
    height: var(--s3) !important;
}

/**
    height %
 */
.g-h4, .g-hc4 > * {
    height: var(--s4) !important;
}

/**
    height %
 */
.g-h5, .g-hc5 > * {
    height: var(--s5) !important;
}

/**
    height %
 */
.g-h6, .g-hc6 > * {
    height: var(--s6) !important;
}

/**
    height %
 */
.g-h7, .g-hc7 > * {
    height: var(--s7) !important;
}

/**
    height %
 */
.g-h8, .g-hc8 > * {
    height: var(--s8) !important;
}

/**
    height %
 */
.g-h9, .g-hc9 > * {
    height: var(--s9) !important;
}

/**
    height more then screen
 */
.g-h11, .g-hc11 > * {
    min-height: calc(100vh + 100px)
}

/**
    height %
 */
.g-h, .g-hc > * {
    height: var(--s) !important;
}

/**
    view height 100%
 */
.g-vh {
    height: 100vh !important;
}

/**
    display none
 */
.g-dn, .g-dn.g-fc, .g-dn.gl-fc, .g-dn.gs-fc, .g-dn.g-fr, .g-dn.gl-fr, .g-dn.gs-fr {
    display: none;
}

/**
    display block
 */
.g-db, .g-dbc > * {
    display: block;
}

/**
    display inline block
 */
.g-dib, .g-dibc > * {
    display: inline-block;
}

/**
    display hidden
   its for every situation where a rerender would take too long
 */
.g-dh, .g-dhc > * {
    position: absolute;
    left: -9999px;
    top: -9999px;
    display: block;
    pointer-events: none;
    visibility: hidden;
}

/**
    display visibility hidden
 */
.g-dvh, .g-dvhc > * {
    visibility: hidden;
    height:0 !important;
}

/**
    display position absolute
 */
.g-dpa, .g-dpac > * {
    position: absolute;
}

/**
    display position relative
 */
.g-dpr, .g-dprc > * {
    position: relative;
}

/**
    display position fixed
 */
.g-dpf, .g-dpfc > * {
    position: fixed;
}

/**
   @documentation display top 1
 */
.g-d-t1, .g-d-t1c > * {
    top: var(--s1);
}

/**
    display top 100%
 */
.g-d-t100, .g-d-t100c > * {
    top: 100%;
}

/**
    display bottom 1
 */
.g-d-b1, .g-d-b1c > * {
    bottom: var(--s1);
}

/**
    display left  1
 */
.g-d-l1, .g-d-l1c > * {
    left: var(--s1);
}

/**
    display right 1
 */
.g-d-r1, .g-d-r1c > * {
    right: var(--s1);
}

/**
    display top 0
 */
.g-d-t, .g-d-tc > * {
    top: 0;
}

/**
    display bottom 0
 */
.g-d-b, .g-d-bc > * {
    bottom: 0;
}

/**
    display left 0
 */
.g-d-l, .g-d-lc > * {
    left: 0;
}

/**
    display right 0
 */
.g-d-r, .g-d-rc > * {
    right: 0;
}

/**
    flex fill
 */
.g-ff, .g-ffc > * {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex grow
 */
.g-fg, .g-fgc > * {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex row
 */
.g-fr, .g-frc > * {
    display: flex;
    flex-direction: row;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex column
 */
.g-fc, .g-fcc > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}


/**
    flex middle
 */
.g-fm, .g-fmc > * {
    display: flex;
    align-content: center;
    align-items: center;
}

/**
    flex wrap
 */
.g-fw, .g-fwc > * {
    display: flex;
    flex-wrap: wrap;
}

/**
    flex wrap middle
 */
.g-fwm, .g-fwmc > * {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}


/**
    flex object fit contain
 */
.g-foc, .g-focc > * {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/**
     grid
 */
.g-g, .g-gc > * {
    display: grid;
}

/**
     grid
 */
.g-gi, .g-gic > * {
    display: inline-grid;
}

/**
     grid gap 1
 */
.g-gg1 {
    gap: 1rem;
}


/**
     grid row
 */
.g-gr {
    display: contents;
    grid-template-columns: 1fr;
}

/**
     grid column
 */
.g-gc {
    grid-row: span 1;
}

.g-gcm {
    justify-content: center;
    align-items: center;
}

.g-gcb {
    justify-content: start;
    align-items: start;
}

.g-gce {
    justify-content: end;
    align-items: end;
}

.g-gr1 {
    grid-template-columns: repeat(1, 1fr);
}

.g-gr2 {
    grid-template-columns: repeat(2, 1fr);
}

.g-gr3 {
    grid-template-columns: repeat(3, 1fr);
}

.g-gr4 {
    grid-template-columns: repeat(4, 1fr);
}

.g-gr5 {
    grid-template-columns: repeat(5, 1fr);
}

.g-gr6 {
    grid-template-columns: repeat(6, 1fr);
}

.g-gr7 {
    grid-template-columns: repeat(7, 1fr);
}

.g-gr8 {
    grid-template-columns: repeat(8, 1fr);
}

.g-gr9 {
    grid-template-columns: repeat(9, 1fr);
}

.g-gc1 {
    grid-column: span 1;
}

.g-gc2 {
    grid-column: span 2;
}

.g-gc3 {
    grid-column: span 3;
}

.g-gc4 {
    grid-column: span 4;
}

.g-gc5 {
    grid-column: span 5;
}

.g-gc6 {
    grid-column: span 6;
}

.g-gc7 {
    grid-column: span 7;
}

.g-gc8 {
    grid-column: span 8;
}

.g-gc9 {
    grid-column: span 9;
}


/**
    fadeout
 */
.g-fadeout {
    animation: fadeOut 3s forwards;
    animation-delay: 3s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        height: auto;
    }
    100% {
        opacity: 0;
        position: absolute;
        top: -10vh;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }
}

/**
    text uppercase first
 */
.g-tucf::first-letter {
    text-transform: uppercase;
}

/**
    break word
 */
.g-tbw, .g-tbwc > * {
    word-wrap: break-word !important;
    word-break: break-all !important;
}

/**
    white space no wrap
 */
.g-tnw, .g-tnwc > * {
    white-space: nowrap !important;
}

/**
    justify content center
 */
.g-tjcc, .g-tjccc > * {
    justify-content: center;
}

/**
    justify content between
 */
.g-tjcb, .g-tjcbc > * {
    justify-content: space-between;
}

/**
    align items center
 */
.g-taic, .g-taicc > * {
    align-items: center;
}

/**
    no selection
 */
.g-tusn, .g-tusnc > * {
    user-select: none;
}
/*,(min-resolution: 200dpi)*/
@media screen and (max-device-width: 1080px), (min-resolution: 200dpi) {
    /**
    inverter
 */
.gs-inv {
    --bg: var(--r-c);
    --c: var(--r-bg);
}

.gs-inv .gs-inv {
    --bg: var(--r-bg);
    --c: var(--r-c);
}

/**
    height half
 */
.gs-hh, .gs-hhc > * {
    --s1: calc(var(--r-s1) / 2);
    --s2: calc(var(--r-s2) / 2);
    --s3: calc(var(--r-s3) / 2);
    --s4: calc(var(--r-s4) / 2);
    --s5: calc(var(--r-s5) / 2);
    --s6: calc(var(--r-s6) / 2);
    --s7: calc(var(--r-s7) / 2);
    --s8: calc(var(--r-s8) / 2);
    --s9: calc(var(--r-s9) / 2);
    --s: calc(var(--r-s) / 2);
}

/**
    height double
 */
.gs-hd, .gs-hdc > * {
    --s1: calc(var(--r-s1) * 2);
    --s2: calc(var(--r-s2) * 2);
    --s3: calc(var(--r-s3) * 2);
    --s4: calc(var(--r-s4) * 2);
    --s5: calc(var(--r-s5) * 2);
    --s6: calc(var(--r-s6) * 2);
    --s7: calc(var(--r-s7) * 2);
    --s8: calc(var(--r-s8) * 2);
    --s9: calc(var(--r-s9) * 2);
    --s: calc(var(--r-s) * 2);
}

/**
    half size
 */
.gs-wh, .gs-whc > * {
    --w1: calc(var(--r-s1) / 2);
    --w2: calc(var(--r-s2) / 2);
    --w3: calc(var(--r-s3) / 2);
    --w4: calc(var(--r-s4) / 2);
    --w5: calc(var(--r-s5) / 2);
    --w6: calc(var(--r-s6) / 2);
    --w7: calc(var(--r-s7) / 2);
    --w8: calc(var(--r-s8) / 2);
    --w9: calc(var(--r-s9) / 2);
    --w: calc(var(--r-s) / 2);
}

.gs-mh, .gs-mhc > * {
    --m1: calc(var(--r-m1) / 2);
    --m2: calc(var(--r-m2) / 2);
    --m3: calc(var(--r-m3) / 2);
    --m4: calc(var(--r-m4) / 2);
    --m5: calc(var(--r-m5) / 2);
}

.gs-ph, .gs-phc > * {
    --p1: calc(var(--r-p1) / 2);
    --p2: calc(var(--r-p2) / 2);
    --p3: calc(var(--r-p3) / 2);
    --p4: calc(var(--r-p4) / 2);
    --p5: calc(var(--r-p5) / 2);
}


/**
    double size
 */
.gs-wd, .gs-wdc > * {
    --w1: calc(var(--r-s1) * 2);
    --w2: calc(var(--r-s2) * 2);
    --w3: calc(var(--r-s3) * 2);
    --w4: calc(var(--r-s4) * 2);
    --w5: calc(var(--r-s5) * 2);
    --w6: calc(var(--r-s6) * 2);
    --w7: calc(var(--r-s7) * 2);
    --w8: calc(var(--r-s8) * 2);
    --w9: calc(var(--r-s9) * 2);
    --w: calc(var(--r-s) * 2);
}

.gs-md, .gs-mdc > * {
    --m1: calc(var(--r-m1) * 2);
    --m2: calc(var(--r-m2) * 2);
    --m3: calc(var(--r-m3) * 2);
    --m4: calc(var(--r-m4) * 2);
    --m5: calc(var(--r-m5) * 2);
}

.gs-pd, .gs-pdc > * {
    --p1: calc(var(--r-p1) * 2);
    --p2: calc(var(--r-p2) * 2);
    --p3: calc(var(--r-p3) * 2);
    --p4: calc(var(--r-p4) * 2);
    --p5: calc(var(--r-p5) * 2);
}


/**
    background color none
 */
.gs-t-bg {
    background-color: transparent !important;
}

/**
    overlay
 */
.gs-t-o {
    mix-blend-mode: overlay;
}


/**
    border top radius
 */
.gs-btr, .gs-btrc > * {
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
}

/**
    border top radius right none
 */
.gs-btrr, .gs-btrrc > * {
    border-top-right-radius: 0 !important;
}

/**
    border top radius left none
 */
.gs-btrl, .gs-btrlc > * {
    border-top-left-radius: 0 !important;
}

/**
    border bottom radius
 */
.gs-bbr, .gs-bbrc > * {
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}

/**
    border bottom radius right none
 */
.gs-bbrr, .gs-bbrrc > * {
    border-bottom-right-radius: 0 !important;
}

/**
    border bottom radius left none
 */
.gs-bbrl, .gs-bbrlc > * {
    border-bottom-left-radius: 0 !important;
}

/**
    border top 0
 */
.gs-bt, .gs-btc > * {
    border-top: 0 !important;
}

/**
    border top 0
 */
.gs-bb, .gs-bbc > * {
    border-bottom: 0 !important;
}

/**
    border top 0
 */
.gs-bl, .gs-blc > * {
    border-left: 0 !important;
}

/**
    border right 0
 */
.gs-br, .gs-brc > * {
    border-right: 0 !important;
}

/**
    border
 */
.gs-b, .gs-bc > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: var(--b);
    border-block-color: var(--b);
    border-inline-color: var(--b);
}

.gs-b2, .gs-b2c > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: transparent;
    border-block-color: transparent;
    border-inline-color: transparent;
}

/**
    no click handler
 */
.gs-npe, .gs-npec > * {
    pointer-events: none;
}

/**
    padding 0
 */
.gs-pr, .gs-prc > * {
    padding-right: 0 !important;
}

/**
    padding 0
 */
.gs-pl, .gs-plc > * {
    padding-left: 0 !important;
}

/**
    padding 0
 */
.gs-pt, .gs-ptc > * {
    padding-top: 0 !important;
}

/**
    padding 0
 */
.gs-pb, .gs-pbc > * {
    padding-bottom: 0 !important;
}

/**
    padding
 */
.gs-p1, .gs-p1c > * {
    padding: var(--p1);
}

/**
    padding
 */
.gs-p2, .gs-p2c > * {
    padding: var(--p2);
}

/**
    padding 10%
 */
.gs-p3, .gs-p3c > * {
    padding: var(--p3);
}

/**
    padding 10%
 */
.gs-p4, .gs-p4c > * {
    padding: var(--p4);
}

/**
    padding 10%
 */
.gs-p5, .gs-p5c > * {
    padding: var(--p5);
}

/**
    margin 0
 */
.gs-mbcl > *:last-child {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.gs-m, .gs-mc > * {
    margin: 0 !important;
}

/**
    margin 0
 */
.gs-mb, .gs-mbc > * {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.gs-mt, .gs-mtc > * {
    margin-top: 0 !important;
}

/**
    margin 0
 */
.gs-mr, .gs-mrc > * {
    margin-right: 0 !important;
}

/**
    margin 0
 */
.gs-ml, .gs-mlc > * {
    margin-left: 0 !important;
}

/**
    margin
 */
.gs-m1, .gs-mc1 > * {
    margin: var(--m1);
}

/**
    margin
 */
.gs-m2, .gs-mc2 > * {
    margin: var(--m2);
}

/**
    margin
 */
.gs-m3, .gs-mc3 > * {
    margin: var(--m3);
}

/**
    margin
 */
.gs-m4, .gs-mc4 > * {
    margin: var(--m4);
}

/**
    margin
 */
.gs-m5, .gs-mc5 > * {
    margin: var(--m5);
}

/**
    margin -1 hide bottom border helper
 */
.gs-mb-1 {
    margin-bottom: -1px !important;
}

/**
    list style none
 */
.gs-li, .gs-lic > * {
    list-style: none;
}

/**
    z index 100
 */
.gs-z {
    z-index: 100;
}

/**
    overflow auto
 */
.gs-oa, .gs-oac > * {
    overflow: auto;
}

/**
    overflow hidden
 */
.gs-oh, .gs-ohc > * {
    overflow: hidden;
}

/**
    width %
 */
.gs-w1, .gs-w1c > * {
    width: var(--w1) !important;
}

/**
    width %
 */
.gs-w2, .gs-w2c > * {
    width: var(--w2) !important;
}

/**
    width %
 */
.gs-w3, .gs-w3c > * {
    width: var(--w3) !important;
}

/**
    width %
 */
.gs-w4, .gs-w4c > * {
    width: var(--w4) !important;
}

/**
    width %
 */
.gs-w5, .gs-w5c > * {
    width: var(--w5) !important;
}

/**
    width %
 */
.gs-w6, .gs-w6c > * {
    width: var(--w6) !important;
}

/**
    width %
 */
.gs-w7, .gs-w7c > * {
    width: var(--w7) !important;
}

/**
    width %
 */
.gs-w8, .gs-w8c > * {
    width: var(--w8) !important;
}

/**
    width %
 */
.gs-w9, .gs-w9c > * {
    width: var(--w9) !important;
}

/**
    width %
 */
.gs-w, .gs-wc > * {
    width: var(--w) !important;
}

/**
    height %
 */
.gs-h1, .gs-hc1 > * {
    height: var(--s1) !important;
}

/**
    height %
 */
.gs-h2, .gs-hc2 > * {
    height: var(--s2) !important;
}

/**
    height %
 */
.gs-h3, .gs-hc3 > * {
    height: var(--s3) !important;
}

/**
    height %
 */
.gs-h4, .gs-hc4 > * {
    height: var(--s4) !important;
}

/**
    height %
 */
.gs-h5, .gs-hc5 > * {
    height: var(--s5) !important;
}

/**
    height %
 */
.gs-h6, .gs-hc6 > * {
    height: var(--s6) !important;
}

/**
    height %
 */
.gs-h7, .gs-hc7 > * {
    height: var(--s7) !important;
}

/**
    height %
 */
.gs-h8, .gs-hc8 > * {
    height: var(--s8) !important;
}

/**
    height %
 */
.gs-h9, .gs-hc9 > * {
    height: var(--s9) !important;
}

/**
    height more then screen
 */
.gs-h11, .gs-hc11 > * {
    min-height: calc(100vh + 100px)
}

/**
    height %
 */
.gs-h, .gs-hc > * {
    height: var(--s) !important;
}

/**
    view height 100%
 */
.gs-vh {
    height: 100vh !important;
}

/**
    display none
 */
.gs-dn, .gs-dn.gs-fc, .gs-dn.gl-fc, .gs-dn.gs-fc, .gs-dn.gs-fr, .gs-dn.gl-fr, .gs-dn.gs-fr {
    display: none;
}

/**
    display block
 */
.gs-db, .gs-dbc > * {
    display: block;
}

/**
    display inline block
 */
.gs-dib, .gs-dibc > * {
    display: inline-block;
}

/**
    display hidden
   its for every situation where a rerender would take too long
 */
.gs-dh, .gs-dhc > * {
    position: absolute;
    left: -9999px;
    top: -9999px;
    display: block;
    pointer-events: none;
    visibility: hidden;
}

/**
    display visibility hidden
 */
.gs-dvh, .gs-dvhc > * {
    visibility: hidden;
    height:0 !important;
}

/**
    display position absolute
 */
.gs-dpa, .gs-dpac > * {
    position: absolute;
}

/**
    display position relative
 */
.gs-dpr, .gs-dprc > * {
    position: relative;
}

/**
    display position fixed
 */
.gs-dpf, .gs-dpfc > * {
    position: fixed;
}

/**
   @documentation display top 1
 */
.gs-d-t1, .gs-d-t1c > * {
    top: var(--s1);
}

/**
    display top 100%
 */
.gs-d-t100, .gs-d-t100c > * {
    top: 100%;
}

/**
    display bottom 1
 */
.gs-d-b1, .gs-d-b1c > * {
    bottom: var(--s1);
}

/**
    display left  1
 */
.gs-d-l1, .gs-d-l1c > * {
    left: var(--s1);
}

/**
    display right 1
 */
.gs-d-r1, .gs-d-r1c > * {
    right: var(--s1);
}

/**
    display top 0
 */
.gs-d-t, .gs-d-tc > * {
    top: 0;
}

/**
    display bottom 0
 */
.gs-d-b, .gs-d-bc > * {
    bottom: 0;
}

/**
    display left 0
 */
.gs-d-l, .gs-d-lc > * {
    left: 0;
}

/**
    display right 0
 */
.gs-d-r, .gs-d-rc > * {
    right: 0;
}

/**
    flex fill
 */
.gs-ff, .gs-ffc > * {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex grow
 */
.gs-fg, .gs-fgc > * {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex row
 */
.gs-fr, .gs-frc > * {
    display: flex;
    flex-direction: row;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex column
 */
.gs-fc, .gs-fcc > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}


/**
    flex middle
 */
.gs-fm, .gs-fmc > * {
    display: flex;
    align-content: center;
    align-items: center;
}

/**
    flex wrap
 */
.gs-fw, .gs-fwc > * {
    display: flex;
    flex-wrap: wrap;
}

/**
    flex wrap middle
 */
.gs-fwm, .gs-fwmc > * {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}


/**
    flex object fit contain
 */
.gs-foc, .gs-focc > * {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/**
     grid
 */
.gs-g, .gs-gc > * {
    display: grid;
}

/**
     grid
 */
.gs-gi, .gs-gic > * {
    display: inline-grid;
}

/**
     grid gap 1
 */
.gs-gg1 {
    gap: 1rem;
}


/**
     grid row
 */
.gs-gr {
    display: contents;
    grid-template-columns: 1fr;
}

/**
     grid column
 */
.gs-gc {
    grid-row: span 1;
}

.gs-gcm {
    justify-content: center;
    align-items: center;
}

.gs-gcb {
    justify-content: start;
    align-items: start;
}

.gs-gce {
    justify-content: end;
    align-items: end;
}

.gs-gr1 {
    grid-template-columns: repeat(1, 1fr);
}

.gs-gr2 {
    grid-template-columns: repeat(2, 1fr);
}

.gs-gr3 {
    grid-template-columns: repeat(3, 1fr);
}

.gs-gr4 {
    grid-template-columns: repeat(4, 1fr);
}

.gs-gr5 {
    grid-template-columns: repeat(5, 1fr);
}

.gs-gr6 {
    grid-template-columns: repeat(6, 1fr);
}

.gs-gr7 {
    grid-template-columns: repeat(7, 1fr);
}

.gs-gr8 {
    grid-template-columns: repeat(8, 1fr);
}

.gs-gr9 {
    grid-template-columns: repeat(9, 1fr);
}

.gs-gc1 {
    grid-column: span 1;
}

.gs-gc2 {
    grid-column: span 2;
}

.gs-gc3 {
    grid-column: span 3;
}

.gs-gc4 {
    grid-column: span 4;
}

.gs-gc5 {
    grid-column: span 5;
}

.gs-gc6 {
    grid-column: span 6;
}

.gs-gc7 {
    grid-column: span 7;
}

.gs-gc8 {
    grid-column: span 8;
}

.gs-gc9 {
    grid-column: span 9;
}


/**
    fadeout
 */
.gs-fadeout {
    animation: fadeOut 3s forwards;
    animation-delay: 3s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        height: auto;
    }
    100% {
        opacity: 0;
        position: absolute;
        top: -10vh;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }
}

/**
    text uppercase first
 */
.gs-tucf::first-letter {
    text-transform: uppercase;
}

/**
    break word
 */
.gs-tbw, .gs-tbwc > * {
    word-wrap: break-word !important;
    word-break: break-all !important;
}

/**
    white space no wrap
 */
.gs-tnw, .gs-tnwc > * {
    white-space: nowrap !important;
}

/**
    justify content center
 */
.gs-tjcc, .gs-tjccc > * {
    justify-content: center;
}

/**
    justify content between
 */
.gs-tjcb, .gs-tjcbc > * {
    justify-content: space-between;
}

/**
    align items center
 */
.gs-taic, .gs-taicc > * {
    align-items: center;
}

/**
    no selection
 */
.gs-tusn, .gs-tusnc > * {
    user-select: none;
}

}

@media screen and (min-device-width: 1080px), (max-resolution: 200dpi)  {
    /**
    inverter
 */
.gl-inv {
    --bg: var(--r-c);
    --c: var(--r-bg);
}

.gl-inv .gl-inv {
    --bg: var(--r-bg);
    --c: var(--r-c);
}

/**
    height half
 */
.gl-hh, .gl-hhc > * {
    --s1: calc(var(--r-s1) / 2);
    --s2: calc(var(--r-s2) / 2);
    --s3: calc(var(--r-s3) / 2);
    --s4: calc(var(--r-s4) / 2);
    --s5: calc(var(--r-s5) / 2);
    --s6: calc(var(--r-s6) / 2);
    --s7: calc(var(--r-s7) / 2);
    --s8: calc(var(--r-s8) / 2);
    --s9: calc(var(--r-s9) / 2);
    --s: calc(var(--r-s) / 2);
}

/**
    height double
 */
.gl-hd, .gl-hdc > * {
    --s1: calc(var(--r-s1) * 2);
    --s2: calc(var(--r-s2) * 2);
    --s3: calc(var(--r-s3) * 2);
    --s4: calc(var(--r-s4) * 2);
    --s5: calc(var(--r-s5) * 2);
    --s6: calc(var(--r-s6) * 2);
    --s7: calc(var(--r-s7) * 2);
    --s8: calc(var(--r-s8) * 2);
    --s9: calc(var(--r-s9) * 2);
    --s: calc(var(--r-s) * 2);
}

/**
    half size
 */
.gl-wh, .gl-whc > * {
    --w1: calc(var(--r-s1) / 2);
    --w2: calc(var(--r-s2) / 2);
    --w3: calc(var(--r-s3) / 2);
    --w4: calc(var(--r-s4) / 2);
    --w5: calc(var(--r-s5) / 2);
    --w6: calc(var(--r-s6) / 2);
    --w7: calc(var(--r-s7) / 2);
    --w8: calc(var(--r-s8) / 2);
    --w9: calc(var(--r-s9) / 2);
    --w: calc(var(--r-s) / 2);
}

.gl-mh, .gl-mhc > * {
    --m1: calc(var(--r-m1) / 2);
    --m2: calc(var(--r-m2) / 2);
    --m3: calc(var(--r-m3) / 2);
    --m4: calc(var(--r-m4) / 2);
    --m5: calc(var(--r-m5) / 2);
}

.gl-ph, .gl-phc > * {
    --p1: calc(var(--r-p1) / 2);
    --p2: calc(var(--r-p2) / 2);
    --p3: calc(var(--r-p3) / 2);
    --p4: calc(var(--r-p4) / 2);
    --p5: calc(var(--r-p5) / 2);
}


/**
    double size
 */
.gl-wd, .gl-wdc > * {
    --w1: calc(var(--r-s1) * 2);
    --w2: calc(var(--r-s2) * 2);
    --w3: calc(var(--r-s3) * 2);
    --w4: calc(var(--r-s4) * 2);
    --w5: calc(var(--r-s5) * 2);
    --w6: calc(var(--r-s6) * 2);
    --w7: calc(var(--r-s7) * 2);
    --w8: calc(var(--r-s8) * 2);
    --w9: calc(var(--r-s9) * 2);
    --w: calc(var(--r-s) * 2);
}

.gl-md, .gl-mdc > * {
    --m1: calc(var(--r-m1) * 2);
    --m2: calc(var(--r-m2) * 2);
    --m3: calc(var(--r-m3) * 2);
    --m4: calc(var(--r-m4) * 2);
    --m5: calc(var(--r-m5) * 2);
}

.gl-pd, .gl-pdc > * {
    --p1: calc(var(--r-p1) * 2);
    --p2: calc(var(--r-p2) * 2);
    --p3: calc(var(--r-p3) * 2);
    --p4: calc(var(--r-p4) * 2);
    --p5: calc(var(--r-p5) * 2);
}


/**
    background color none
 */
.gl-t-bg {
    background-color: transparent !important;
}

/**
    overlay
 */
.gl-t-o {
    mix-blend-mode: overlay;
}


/**
    border top radius
 */
.gl-btr, .gl-btrc > * {
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
}

/**
    border top radius right none
 */
.gl-btrr, .gl-btrrc > * {
    border-top-right-radius: 0 !important;
}

/**
    border top radius left none
 */
.gl-btrl, .gl-btrlc > * {
    border-top-left-radius: 0 !important;
}

/**
    border bottom radius
 */
.gl-bbr, .gl-bbrc > * {
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}

/**
    border bottom radius right none
 */
.gl-bbrr, .gl-bbrrc > * {
    border-bottom-right-radius: 0 !important;
}

/**
    border bottom radius left none
 */
.gl-bbrl, .gl-bbrlc > * {
    border-bottom-left-radius: 0 !important;
}

/**
    border top 0
 */
.gl-bt, .gl-btc > * {
    border-top: 0 !important;
}

/**
    border top 0
 */
.gl-bb, .gl-bbc > * {
    border-bottom: 0 !important;
}

/**
    border top 0
 */
.gl-bl, .gl-blc > * {
    border-left: 0 !important;
}

/**
    border right 0
 */
.gl-br, .gl-brc > * {
    border-right: 0 !important;
}

/**
    border
 */
.gl-b, .gl-bc > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: var(--b);
    border-block-color: var(--b);
    border-inline-color: var(--b);
}

.gl-b2, .gl-b2c > * {
    border-width: var(--bw);
    border-style: solid;
    border-color: transparent;
    border-block-color: transparent;
    border-inline-color: transparent;
}

/**
    no click handler
 */
.gl-npe, .gl-npec > * {
    pointer-events: none;
}

/**
    padding 0
 */
.gl-pr, .gl-prc > * {
    padding-right: 0 !important;
}

/**
    padding 0
 */
.gl-pl, .gl-plc > * {
    padding-left: 0 !important;
}

/**
    padding 0
 */
.gl-pt, .gl-ptc > * {
    padding-top: 0 !important;
}

/**
    padding 0
 */
.gl-pb, .gl-pbc > * {
    padding-bottom: 0 !important;
}

/**
    padding
 */
.gl-p1, .gl-p1c > * {
    padding: var(--p1);
}

/**
    padding
 */
.gl-p2, .gl-p2c > * {
    padding: var(--p2);
}

/**
    padding 10%
 */
.gl-p3, .gl-p3c > * {
    padding: var(--p3);
}

/**
    padding 10%
 */
.gl-p4, .gl-p4c > * {
    padding: var(--p4);
}

/**
    padding 10%
 */
.gl-p5, .gl-p5c > * {
    padding: var(--p5);
}

/**
    margin 0
 */
.gl-mbcl > *:last-child {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.gl-m, .gl-mc > * {
    margin: 0 !important;
}

/**
    margin 0
 */
.gl-mb, .gl-mbc > * {
    margin-bottom: 0 !important;
}

/**
    margin 0
 */
.gl-mt, .gl-mtc > * {
    margin-top: 0 !important;
}

/**
    margin 0
 */
.gl-mr, .gl-mrc > * {
    margin-right: 0 !important;
}

/**
    margin 0
 */
.gl-ml, .gl-mlc > * {
    margin-left: 0 !important;
}

/**
    margin
 */
.gl-m1, .gl-mc1 > * {
    margin: var(--m1);
}

/**
    margin
 */
.gl-m2, .gl-mc2 > * {
    margin: var(--m2);
}

/**
    margin
 */
.gl-m3, .gl-mc3 > * {
    margin: var(--m3);
}

/**
    margin
 */
.gl-m4, .gl-mc4 > * {
    margin: var(--m4);
}

/**
    margin
 */
.gl-m5, .gl-mc5 > * {
    margin: var(--m5);
}

/**
    margin -1 hide bottom border helper
 */
.gl-mb-1 {
    margin-bottom: -1px !important;
}

/**
    list style none
 */
.gl-li, .gl-lic > * {
    list-style: none;
}

/**
    z index 100
 */
.gl-z {
    z-index: 100;
}

/**
    overflow auto
 */
.gl-oa, .gl-oac > * {
    overflow: auto;
}

/**
    overflow hidden
 */
.gl-oh, .gl-ohc > * {
    overflow: hidden;
}

/**
    width %
 */
.gl-w1, .gl-w1c > * {
    width: var(--w1) !important;
}

/**
    width %
 */
.gl-w2, .gl-w2c > * {
    width: var(--w2) !important;
}

/**
    width %
 */
.gl-w3, .gl-w3c > * {
    width: var(--w3) !important;
}

/**
    width %
 */
.gl-w4, .gl-w4c > * {
    width: var(--w4) !important;
}

/**
    width %
 */
.gl-w5, .gl-w5c > * {
    width: var(--w5) !important;
}

/**
    width %
 */
.gl-w6, .gl-w6c > * {
    width: var(--w6) !important;
}

/**
    width %
 */
.gl-w7, .gl-w7c > * {
    width: var(--w7) !important;
}

/**
    width %
 */
.gl-w8, .gl-w8c > * {
    width: var(--w8) !important;
}

/**
    width %
 */
.gl-w9, .gl-w9c > * {
    width: var(--w9) !important;
}

/**
    width %
 */
.gl-w, .gl-wc > * {
    width: var(--w) !important;
}

/**
    height %
 */
.gl-h1, .gl-hc1 > * {
    height: var(--s1) !important;
}

/**
    height %
 */
.gl-h2, .gl-hc2 > * {
    height: var(--s2) !important;
}

/**
    height %
 */
.gl-h3, .gl-hc3 > * {
    height: var(--s3) !important;
}

/**
    height %
 */
.gl-h4, .gl-hc4 > * {
    height: var(--s4) !important;
}

/**
    height %
 */
.gl-h5, .gl-hc5 > * {
    height: var(--s5) !important;
}

/**
    height %
 */
.gl-h6, .gl-hc6 > * {
    height: var(--s6) !important;
}

/**
    height %
 */
.gl-h7, .gl-hc7 > * {
    height: var(--s7) !important;
}

/**
    height %
 */
.gl-h8, .gl-hc8 > * {
    height: var(--s8) !important;
}

/**
    height %
 */
.gl-h9, .gl-hc9 > * {
    height: var(--s9) !important;
}

/**
    height more then screen
 */
.gl-h11, .gl-hc11 > * {
    min-height: calc(100vh + 100px)
}

/**
    height %
 */
.gl-h, .gl-hc > * {
    height: var(--s) !important;
}

/**
    view height 100%
 */
.gl-vh {
    height: 100vh !important;
}

/**
    display none
 */
.gl-dn, .gl-dn.gl-fc, .gl-dn.gl-fc, .gl-dn.gs-fc, .gl-dn.gl-fr, .gl-dn.gl-fr, .gl-dn.gs-fr {
    display: none;
}

/**
    display block
 */
.gl-db, .gl-dbc > * {
    display: block;
}

/**
    display inline block
 */
.gl-dib, .gl-dibc > * {
    display: inline-block;
}

/**
    display hidden
   its for every situation where a rerender would take too long
 */
.gl-dh, .gl-dhc > * {
    position: absolute;
    left: -9999px;
    top: -9999px;
    display: block;
    pointer-events: none;
    visibility: hidden;
}

/**
    display visibility hidden
 */
.gl-dvh, .gl-dvhc > * {
    visibility: hidden;
    height:0 !important;
}

/**
    display position absolute
 */
.gl-dpa, .gl-dpac > * {
    position: absolute;
}

/**
    display position relative
 */
.gl-dpr, .gl-dprc > * {
    position: relative;
}

/**
    display position fixed
 */
.gl-dpf, .gl-dpfc > * {
    position: fixed;
}

/**
   @documentation display top 1
 */
.gl-d-t1, .gl-d-t1c > * {
    top: var(--s1);
}

/**
    display top 100%
 */
.gl-d-t100, .gl-d-t100c > * {
    top: 100%;
}

/**
    display bottom 1
 */
.gl-d-b1, .gl-d-b1c > * {
    bottom: var(--s1);
}

/**
    display left  1
 */
.gl-d-l1, .gl-d-l1c > * {
    left: var(--s1);
}

/**
    display right 1
 */
.gl-d-r1, .gl-d-r1c > * {
    right: var(--s1);
}

/**
    display top 0
 */
.gl-d-t, .gl-d-tc > * {
    top: 0;
}

/**
    display bottom 0
 */
.gl-d-b, .gl-d-bc > * {
    bottom: 0;
}

/**
    display left 0
 */
.gl-d-l, .gl-d-lc > * {
    left: 0;
}

/**
    display right 0
 */
.gl-d-r, .gl-d-rc > * {
    right: 0;
}

/**
    flex fill
 */
.gl-ff, .gl-ffc > * {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex grow
 */
.gl-fg, .gl-fgc > * {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex row
 */
.gl-fr, .gl-frc > * {
    display: flex;
    flex-direction: row;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}

/**
    flex column
 */
.gl-fc, .gl-fcc > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
}


/**
    flex middle
 */
.gl-fm, .gl-fmc > * {
    display: flex;
    align-content: center;
    align-items: center;
}

/**
    flex wrap
 */
.gl-fw, .gl-fwc > * {
    display: flex;
    flex-wrap: wrap;
}

/**
    flex wrap middle
 */
.gl-fwm, .gl-fwmc > * {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}


/**
    flex object fit contain
 */
.gl-foc, .gl-focc > * {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/**
     grid
 */
.gl-g, .gl-gc > * {
    display: grid;
}

/**
     grid
 */
.gl-gi, .gl-gic > * {
    display: inline-grid;
}

/**
     grid gap 1
 */
.gl-gg1 {
    gap: 1rem;
}


/**
     grid row
 */
.gl-gr {
    display: contents;
    grid-template-columns: 1fr;
}

/**
     grid column
 */
.gl-gc {
    grid-row: span 1;
}

.gl-gcm {
    justify-content: center;
    align-items: center;
}

.gl-gcb {
    justify-content: start;
    align-items: start;
}

.gl-gce {
    justify-content: end;
    align-items: end;
}

.gl-gr1 {
    grid-template-columns: repeat(1, 1fr);
}

.gl-gr2 {
    grid-template-columns: repeat(2, 1fr);
}

.gl-gr3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-gr4 {
    grid-template-columns: repeat(4, 1fr);
}

.gl-gr5 {
    grid-template-columns: repeat(5, 1fr);
}

.gl-gr6 {
    grid-template-columns: repeat(6, 1fr);
}

.gl-gr7 {
    grid-template-columns: repeat(7, 1fr);
}

.gl-gr8 {
    grid-template-columns: repeat(8, 1fr);
}

.gl-gr9 {
    grid-template-columns: repeat(9, 1fr);
}

.gl-gc1 {
    grid-column: span 1;
}

.gl-gc2 {
    grid-column: span 2;
}

.gl-gc3 {
    grid-column: span 3;
}

.gl-gc4 {
    grid-column: span 4;
}

.gl-gc5 {
    grid-column: span 5;
}

.gl-gc6 {
    grid-column: span 6;
}

.gl-gc7 {
    grid-column: span 7;
}

.gl-gc8 {
    grid-column: span 8;
}

.gl-gc9 {
    grid-column: span 9;
}


/**
    fadeout
 */
.gl-fadeout {
    animation: fadeOut 3s forwards;
    animation-delay: 3s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        height: auto;
    }
    100% {
        opacity: 0;
        position: absolute;
        top: -10vh;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }
}

/**
    text uppercase first
 */
.gl-tucf::first-letter {
    text-transform: uppercase;
}

/**
    break word
 */
.gl-tbw, .gl-tbwc > * {
    word-wrap: break-word !important;
    word-break: break-all !important;
}

/**
    white space no wrap
 */
.gl-tnw, .gl-tnwc > * {
    white-space: nowrap !important;
}

/**
    justify content center
 */
.gl-tjcc, .gl-tjccc > * {
    justify-content: center;
}

/**
    justify content between
 */
.gl-tjcb, .gl-tjcbc > * {
    justify-content: space-between;
}

/**
    align items center
 */
.gl-taic, .gl-taicc > * {
    align-items: center;
}

/**
    no selection
 */
.gl-tusn, .gl-tusnc > * {
    user-select: none;
}

}