/* Outspace theme adapted from the parent game's img/css.css.
   Original HUD palette, Chakra Petch weights, clipped windows and button frames.
   All fonts and branding are copied locally; the original stylesheet is not loaded. */
@font-face{
    font-family:Chakra;
    src:url('img/fonts/ChakraPetch-Light.ttf') format('truetype');
    font-weight:300;
    font-display:swap
}
@font-face{
    font-family:Chakra;
    src:url('img/fonts/ChakraPetch-Regular.ttf') format('truetype');
    font-weight:400;
    font-display:swap
}
@font-face{
    font-family:Chakra;
    src:url('img/fonts/ChakraPetch-SemiBold.ttf') format('truetype');
    font-weight:600;
    font-display:swap
}
@font-face{
    font-family:Chakra;
    src:url('img/fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight:700;
    font-display:swap
}
:root{
    color-scheme:dark;
    --hud_valuecolor:rgb(166,240,255);
    --hud_buttonlabelcolor:#b9dbff;
    --hud_health_bar_color:#fff;
    --hud_health_bar_color_050:#ffff00;
    --hud_health_bar_color_020:#ff3030;
    --hud_health_barbckg_color:#555;
    --hud_ammo_text_color:rgb(220,146,28);
    --border-command-fleets-effect-color:#2f3649;
    --border-command-fleets-effect-color2:#6d86c9;
    --border-button-color:#8c98b9;
    --border-button-color2:#bbbdc3;
    --background-command-fleets-effect-color:#070b14;
    --clip_dialog_box:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,5px 100%,5px calc(46% + 5px),0 46%);
    --clip_win_new:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,35% 100%,calc(35% - 3px) calc(100% - 3px),0 calc(100% - 3px));
    --clip_underline:polygon(0 0,100% 0,100% 1px,50px 1px,46px 4px,0 4px);
    --ink:#eee;
    --muted:#a3adbf;
    --accent:var(--hud_valuecolor);
    --gold:#ffbc00;
    --line:var(--border-command-fleets-effect-color);
}
*{
    box-sizing:border-box
}
body{
    margin:0;
    background:var(--background-command-fleets-effect-color);
    color:var(--ink);
    font:14px Chakra,sans-serif;
    overflow:hidden
}
button,input{
    font:inherit
}
button{
    --button-border:var(--border-button-color);
    --button-edge:var(--border-button-color2);
    --button-bg:rgba(18,24,41,.75);
    position:relative;
    isolation:isolate;
    border:0;
    background:transparent;
    color:var(--hud_buttonlabelcolor);
    cursor:pointer;
    padding:11px 18px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    line-height:1.4;
    transition:color .15s;
}
button::before{
    content:'';
    position:absolute;
    inset:3px;
    background:var(--button-bg);
    z-index:-1;
    transition:background .15s;
    pointer-events:none
}
/* The nine separate frame strokes are the original Outspace button treatment. */
button::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-edge),var(--button-edge)),linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-edge),var(--button-edge)),linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-border),var(--button-border)),linear-gradient(var(--button-border),var(--button-border));
    background-repeat:no-repeat;
    background-size:calc(100% - 4px) 1px,1px calc(20% - 2px),1px calc(60% - 4px),1px calc(20% - 2px),1px calc(20% - 2px),1px calc(60% - 4px),1px calc(20% - 2px),36% 3px,calc(100% - 4px) 1px;
    background-position:top 1px center,top 2px left 1px,center left 1px,bottom 2px left 1px,top 2px right 1px,center right 1px,bottom 2px right 1px,bottom center,bottom 1px center;
}
button:hover:not(:disabled){
    --button-bg:#163949;
    color:#fff
}
button:active:not(:disabled){
    --button-bg:#00709df0
}
button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px
}
button:disabled{
    opacity:.45;
    cursor:default
}
button.primary{
    --button-border:var(--gold);
    --button-edge:var(--gold);
    --button-bg:#bf85092b;
    color:var(--gold);
    font-size:14px;
    letter-spacing:1.4px;
    padding:18px 26px;
    min-width:275px
}
button.primary:hover:not(:disabled){
    --button-bg:#bf850966;
    color:#ffe49a
}
#viewport,#viewport canvas,.vignette,#damage-flash,#hud,.overlay{
    position:fixed;
    inset:0
}
#viewport canvas{
    width:100%;
    height:100%;
    display:block
}
#viewport{
    touch-action:none
}
.vignette{
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%,transparent 45%,#02040ab0 100%);
    box-shadow:inset 0 0 80px #02040a70
}
#freeze-vignette{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%,transparent 35%,#178ee838 62%,#167bdbb3 100%);
    box-shadow:inset 0 0 90px #64d5ff66;
    opacity:0;
    transition:opacity .25s ease-out
}
#damage-flash{
    pointer-events:none;
    background:radial-gradient(ellipse,transparent 25%,#c91f2bd0);
    opacity:0
}
#dazzle-flash{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse,#fffce9,#f9e7a8aa 55%,transparent);
    opacity:0
}
#hud{
    pointer-events:none
}
.eyebrow{
    font-size:10px;
    font-weight:400;
    letter-spacing:1.6px;
    color:var(--muted);
    display:block
}
.accent{
    color:var(--accent)
}
.topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin:24px 30px;
    position:relative;
    padding-bottom:18px
}
.topbar::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,#6d86c988,transparent 34%,transparent 66%,#6d86c988)
}
.brand strong{
    display:block;
    font-size:27px;
    font-weight:300;
    letter-spacing:5px;
    line-height:1.55
}
.brand-mark{
    font-size:12px;
    color:var(--muted);
    letter-spacing:1px
}
.brand .eyebrow{
    color:var(--accent)
}
.scorebox{
    position:absolute;
    left:50%;
    top:-5px;
    transform:translateX(-50%);
    text-align:center;
    min-width:218px;
    padding:4px 25px;
    background:linear-gradient(90deg,transparent,#070b1499,transparent)
}
.scorebox b{
    display:block;
    color:var(--accent);
    font-size:43px;
    font-weight:300;
    line-height:1.2;
    letter-spacing:4px;
    font-variant-numeric:tabular-nums
}
.scorebox .eyebrow{
    color:var(--ink);
    letter-spacing:3px
}
#score-pop{
    display:block;
    color:var(--gold);
    height:19px;
    font-size:12px
}
.mission{
    text-align:right;
    line-height:2;
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted)
}
#phase{
    color:var(--accent)
}
.status-dot{
    display:inline-block;
    width:5px;
    height:5px;
    background:var(--accent);
    box-shadow:0 0 8px #a6f0ff88;
    margin-right:3px
}
#clock{
    font-size:18px;
    color:var(--ink)
}
.slash{
    margin:0 9px;
    color:var(--line)
}
.xp-track{
    height:4px;
    background:#233940;
    margin:9px 0 5px;
    overflow:hidden
}
.xp-track i{
    display:block;
    height:100%;
    width:0;
    background:var(--gold)
}
#xp-value{
    font-size:10px;
    color:var(--gold)
}
#freeze-state{
    display:block;
    font-size:12px;
    color:#74d9ff;
    margin-top:4px
}
/* Thin, stepped window outlines match Outspace's --clip_dialog_box / --clip_win_new. */
.panel,.briefing,.menu-side,.dialog{
    isolation:isolate
}
.panel::before,.briefing::before,.menu-side::before,.dialog::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,var(--border-command-fleets-effect-color2),var(--line) 38%,var(--line) 72%,#8c98b9);
    clip-path:var(--clip_win_new);
    z-index:-2;
    pointer-events:none
}
.panel::after,.briefing::after,.menu-side::after,.dialog::after{
    content:'';
    position:absolute;
    inset:1px;
    background:rgba(7,11,20,.95);
    clip-path:var(--clip_win_new);
    z-index:-1;
    pointer-events:none
}
.briefing::before,.briefing::after,.dialog::before,.dialog::after{
    clip-path:var(--clip_dialog_box)
}
.fuse{
    position:absolute;
    left:30px;
    top:35%;
    width:207px;
    padding:18px
}
.fuse>.eyebrow,.telemetry>.eyebrow{
    padding-bottom:11px;
    border-bottom:1px solid var(--line);
    color:var(--hud_buttonlabelcolor);
    font-weight:600;
    font-size:10px;
    letter-spacing:1px
}
.range{
    margin:12px 0
}
.range b{
    font-size:41px;
    font-weight:300;
    letter-spacing:1px;
    color:var(--accent);
    font-variant-numeric:tabular-nums
}
.range span{
    color:var(--muted);
    margin-left:8px
}
.fuse-scale,.reload{
    height:4px;
    background:#394f65;
    overflow:hidden
}
.fuse-scale i,.reload i{
    display:block;
    height:100%;
    background:var(--accent)
}
.fuse-data{
    display:flex;
    justify-content:space-between;
    margin:13px 0;
    font-size:10px;
    color:var(--muted)
}
.fuse-data b{
    color:var(--accent);
    font-size:13px;
    font-weight:600
}
.fuse-buttons{
    display:flex;
    align-items:center;
    justify-content:space-between;
    pointer-events:auto
}
.fuse-buttons button{
    font-size:20px;
    font-weight:300;
    width:35px;
    height:34px;
    padding:0
}
.fuse-buttons span{
    font-size:9px;
    letter-spacing:.5px;
    color:var(--muted);
    text-align:center;
    line-height:1.6
}
.fuse-buttons span b{
    color:var(--accent);
    font-weight:600;
    font-variant-numeric:tabular-nums
}
.fuse p{
    color:var(--muted);
    font-size:11px;
    line-height:1.65;
    margin-bottom:0
}
.telemetry{
    position:absolute;
    right:30px;
    top:45%;
    text-align:right;
    width:167px;
    padding:16px;
    color:var(--muted);
    font-size:11px
}
.telemetry>span{
    display:block;
    margin:11px 0
}
.telemetry>.eyebrow{
    margin-top:0
}
.weapon-switch-hint{
    display:block;
    font-size:8px;
    letter-spacing:.2px;
    color:var(--gold);
    line-height:1.6
}
#weapon-description{
    font-size:9px;
    line-height:1.5
}
.fuse[data-active="false"] .range,.fuse[data-active="false"] .fuse-scale,.fuse[data-active="false"] .fuse-data,.fuse[data-active="false"] .fuse-buttons{
    opacity:.35
}
.dialog.upgrade-dialog{
    width:min(1040px,94vw);
    max-height:94vh;
    overflow:auto;
    text-align:left;
    padding:30px!important
}
.upgrade-dialog h2{
    margin:10px 0;
    font-size:38px
}
.upgrade-dialog>p{
    margin:10px 0 18px
}
/* Outspace cards.Card canvas: the whole card lifts and grows on hover. */
.upgrade-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(210px,1fr));
    gap:22px;
    padding:22px 16px 28px;
    align-items:start
}
.upgrade-card{
    --card-accent:#e9be64;
    display:block;
    position:relative;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:var(--ink);
    white-space:normal;
    text-transform:none;
    letter-spacing:0;
    text-align:center;
    transition:transform .15s ease,filter .15s ease;
    transform-origin:50% 60%;
    filter:drop-shadow(0 7px 6px #0008)
}
.upgrade-card[data-weapon="gatling"]{
    --card-accent:#a6f0ff
}
.upgrade-card[data-weapon="thel"]{
    --card-accent:#bce68b
}
.upgrade-card[data-weapon="player"]{
    --card-accent:#a4e8bc
}
.upgrade-card[data-weapon="dazzle"]{
    --card-accent:#ffe29c
}
.upgrade-card::before,.upgrade-card::after{
    display:none
}
.upgrade-card .imgcard{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:512/712
}
.upgrade-card:hover:not(:disabled),.upgrade-card:focus-visible{
    transform:translateY(-5px) scale(1.055);
    filter:drop-shadow(0 0 6px var(--card-accent));
    z-index:2;
    outline:none;
    color:var(--ink)
}
.upgrade-card-heading{
    position:absolute;
    top:4%;
    left:6%;
    right:6%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:var(--card-accent);
    text-shadow:0 1px 5px #000
}
.upgrade-card-heading .eyebrow{
    font-size:10px;
    letter-spacing:1px;
    color:inherit
}
.upgrade-shortcut{
    --border-ctrlkey-color:var(--card-accent)
}
.upgrade-card .upgrade-shortcut .ctrl-key{
    color:var(--card-accent)
}
.upgrade-values{
    position:absolute;
    top:75.5%;
    left:6%;
    right:6%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    font-variant-numeric:tabular-nums;
    text-shadow:0 1px 4px #000
}
.upgrade-before{
    font-size:12px;
    color:#a3adbf
}
.upgrade-after{
    font-size:18px;
    color:#fff;
    font-weight:700
}
.upgrade-delta{
    font-size:15px;
    font-weight:700;
    line-height:1.3
}
.upgrade-delta.good{
    color:#bce68b
}
.upgrade-delta.bad{
    color:#ff806b
}
.upgrade-card-footer{
    position:absolute;
    bottom:1.3%;
    left:25%;
    right:25%;
    font-size:8px;
    letter-spacing:.4px;
    color:var(--card-accent);
    line-height:1.2
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}
@media(prefers-reduced-motion:reduce){
    .upgrade-card{
        transition:none
    }
}
.stats-heading{
    margin-top:23px;
    padding-bottom:10px;
    font-size:10px;
    letter-spacing:2px;
    color:var(--gold);
    border-bottom:1px solid var(--line)
}
.weapon-stats{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:5px 15px;
    padding:10px 0;
    border-bottom:1px solid #394f6544;
    font-size:12px;
    line-height:1.5
}
.weapon-stats strong{
    grid-row:span 2;
    color:var(--accent)
}
.weapon-stats small{
    color:var(--muted);
    font-size:11px
}
.upgrade-help{
    margin-bottom:0!important
}
@media(max-width:760px){
    .dialog.upgrade-dialog{
        padding:16px!important
    }
    .upgrade-cards{
        gap:14px;
        padding:20px 12px 24px;
        grid-template-columns:repeat(3,minmax(210px,1fr))
    }
    .upgrade-card-heading .eyebrow{
        font-size:8px;
        letter-spacing:.4px
    }
    .upgrade-before{
        font-size:10px
    }
    .upgrade-after{
        font-size:14px
    }
    .upgrade-delta{
        font-size:12px
    }
    .upgrade-card-footer{
        font-size:7px
    }
    .weapon-stats{
        grid-template-columns:1fr
    }
    .weapon-stats strong{
        grid-row:auto
    }
}
.telemetry>span:last-child{
    margin-bottom:3px
}
#weapon-state{
    font-size:16px;
    font-weight:600;
    color:var(--accent);
    margin:13px 0
}
.reload{
    background:rgba(152,100,17,.35)
}
.reload i{
    background:var(--hud_ammo_text_color)
}
.weapon-heat{
    margin-top:17px;
    padding-top:12px;
    border-top:1px solid var(--line)
}
.heat-label{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:7px;
    font-size:9px;
    letter-spacing:.5px
}
.heat-label b{
    font-size:13px;
    font-weight:600;
    color:var(--accent);
    font-variant-numeric:tabular-nums
}
#heat-meter{
    height:6px;
    background:#2f3649
}
#heat-fill{
    display:block;
    width:0;
    height:100%;
    background:var(--accent);
    transition:width .1s linear,background-color .2s
}
#heat-meter[data-hot="warning"] #heat-fill{
    background:var(--gold)
}
#heat-meter[data-hot="locked"] #heat-fill{
    background:#ff634c
}
#heat-status{
    display:block;
    margin-top:7px;
    font-size:8px;
    letter-spacing:.3px;
    color:var(--muted)
}
#weapon-state[data-overheated="true"]{
    color:#ff806b
}
.bottom-bar{
    position:absolute;
    bottom:22px;
    left:30px;
    right:30px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px
}
.hull{
    width:280px;
    flex-shrink:0;
    padding:10px 14px 13px;
    background:#070b14bf;
    border-top:1px solid #6d86c966
}
.hull-title{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:8px
}
.hull-title .eyebrow{
    font-size:9px;
    letter-spacing:1px
}
.hull b{
    font-size:25px;
    font-weight:300
}
.hull small{
    font-size:12px;
    color:var(--muted);
    font-weight:400
}
.health-track{
    height:7px;
    background:var(--hud_health_barbckg_color)
}
.health-track i{
    display:block;
    width:100%;
    height:100%;
    background:var(--hud_health_bar_color);
    transition:width .2s
}
.controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
    color:var(--muted);
    font-size:10px;
    padding:8px 12px;
    background:#070b14a8;
    border-bottom:1px solid var(--line)
}

nav{
    display:flex;
    gap:6px;
    pointer-events:auto
}
nav button{
    height:36px;
    padding:8px 11px;
    font-size:10px;
    white-space:nowrap
}
#announcement{
    position:absolute;
    left:25%;
    right:25%;
    top:22%;
    text-align:center;
    font-size:17px;
    letter-spacing:2px;
    color:var(--gold);
    text-shadow:0 1px 4px #000,0 0 12px #000
}
#target-info{
    position:absolute;
    left:50%;
    top:68%;
    transform:translateX(-50%);
    text-align:center;
    font-size:10px;
    color:var(--muted);
    letter-spacing:1px;
    text-shadow:0 1px 3px #000
}
#target-info b{
    display:block;
    font-size:15px;
    font-weight:600;
    color:var(--accent);
    margin-top:3px
}
.overlay{
    z-index:5;
    background:linear-gradient(90deg,#03060be8 0%,#03060b99 38%,#03060b00 78%);
    display:flex;
    align-items:center;
    padding:28px 5vw;
    gap:7vw;
    overflow:auto
}
.overlay[hidden]{
    display:none
}
.briefing{
    position:relative;
    width:460px;
    max-width:51vw;
    padding:30px 32px
}
.briefing::after{
    background:rgba(7,11,20,.88)
}
.outspace-logo{
    display: block;
    width: 244px;
    max-width: 100%;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 7px #a6f0ff22);
    margin: 0px auto 25px;
}
.briefing>.eyebrow{
    font-size:9px;
    letter-spacing:1.3px
}
.briefing h1{
    font-size:clamp(46px,4.6vw,70px);
    font-weight:300;
    line-height:1.06;
    letter-spacing:2px;
    margin:23px 0 18px
}
.briefing h1 span{
    color:var(--accent)
}
.intro{
    font-size:16px;
    line-height:1.65;
    color:#c1c7d2;
    margin:0
}
.brief-rules{
    margin:24px 0
}
.brief-rules p{
    display:flex;
    gap:16px;
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin:13px 0
}
.brief-rules b{
    flex-shrink:0;
    font-size:11px;
    font-weight:600;
    color:var(--accent);
    padding-top:3px
}
.brief-rules strong{
    color:var(--ink);
    font-weight:600
}
.briefing .primary{
    width:100%
}
.brief-footer{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.8px;
    border-top:1px solid var(--line);
    padding-top:15px
}
.small{
    font-size:11px;
    line-height:1.65;
    color:var(--muted);
    min-height:18px;
    overflow-wrap:anywhere
}
.loading-track{
    width:100%;
    height:2px;
    background:#2f3649;
    margin-top:10px
}
.loading-track i{
    height:100%;
    display:block;
    background:var(--accent);
    width:0;
    transition:width .2s
}
#loading-status{
    margin-bottom:0
}
.menu-side{
    position:relative;
    align-self:flex-end;
    margin-left:auto;
    margin-bottom:6vh;
    width:280px;
    padding:24px;
    flex-shrink:0
}
.menu-side::after{
    background:rgba(7,11,20,.88)
}
.menu-side>strong{
    display:block;
    font-size:33px;
    font-weight:300;
    letter-spacing:3px;
    margin:14px 0;
    color:var(--ink)
}
.menu-side strong span{
    display:block;
    letter-spacing:1px;
    font-size:10px;
    font-weight:400;
    color:var(--muted);
    margin-top:6px
}
.menu-side>span:last-of-type{
    color:var(--accent);
    font-size:10px;
    letter-spacing:1px
}
.menu-line{
    height:4px;
    background:var(--border-command-fleets-effect-color2);
    clip-path:var(--clip_underline);
    margin:18px 0
}
.mini-scores{
    margin-top:28px
}
.mini-scores .eyebrow{
    color:var(--ink)
}
.mini-scores ol{
    font-size:12px;
    color:var(--muted);
    padding-left:19px;
    margin-bottom:0
}
.mini-scores li{
    padding:5px 0 5px 3px
}
.mini-scores li span{
    float:right;
    margin-left:18px;
    color:var(--accent)
}
.centered{
    justify-content:center;
    background:#03060bba;
    backdrop-filter:blur(5px);
    padding:22px
}
.dialog{
    position:relative;
    width:540px;
    max-width:100%;
    max-height:calc(100vh - 44px);
    overflow:auto;
    padding:32px;
    text-align:center
}
.dialog h2{
    font-size:34px;
    font-weight:300;
    letter-spacing:2px;
    margin:20px 0
}
.dialog p{
    color:var(--muted);
    line-height:1.8
}
.dialog>.eyebrow{
    color:var(--accent);
    padding-bottom:14px;
    border-bottom:1px solid var(--line)
}
.dialog .primary{
    max-width:100%
}
.result>.eyebrow{
    color:#e37171
}
.result-score{
    font-size:65px;
    font-weight:300;
    line-height:1.2;
    color:var(--accent);
    letter-spacing:3px;
    font-variant-numeric:tabular-nums
}
.result-stats{
    display:flex;
    justify-content:space-around;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    margin-bottom:20px
}
.result-stats span{
    font-size:9px;
    color:var(--muted);
    letter-spacing:1px
}
.result-stats b{
    font-size:23px;
    font-weight:300;
    display:block;
    color:var(--ink);
    letter-spacing:0;
    margin-bottom:3px
}
form{
    text-align:left
}
label{
    font-size:10px;
    color:var(--hud_buttonlabelcolor);
    letter-spacing:1.5px
}
.save-row{
    display:flex;
    gap:8px;
    margin-top:8px
}
input{
    width:100%;
    min-width:0;
    color:var(--accent);
    background:#03060b;
    border:1px solid var(--border-button-color);
    border-bottom-color:var(--border-button-color2);
    padding:11px
}
input::placeholder{
    color:#727c92
}
.save-row button{
    font-size:10px;
    white-space:nowrap
}
#save-status{
    text-align:left;
    margin:13px 0
}
.leaderboard{
    text-align:left;
    padding-left:24px;
    font-size:12px;
    max-height:110px;
    overflow:auto;
    color:var(--muted)
}
.leaderboard li{
    padding:5px 3px;
    border-bottom:1px solid #2f364977
}
.leaderboard li span{
    float:right;
    color:var(--accent)
}
.leaderboard li:first-child{
    color:var(--gold)
}
noscript{
    position:fixed;
    z-index:99;
    background:#070b14;
    padding:50px
}
body[data-mode="menu"] #hud,body[data-mode="result"] #hud{
    visibility:hidden
}
@media(max-height:800px){
    .overlay{
        padding-top:20px;
        padding-bottom:20px
    }
    .briefing{
        padding:24px 28px
    }
    .outspace-logo{
        width:224px;
        margin-bottom:20px
    }
    .briefing h1{
        font-size:53px;
        margin:18px 0 14px
    }
    .intro{
        font-size:14px
    }
    .brief-rules{
        margin:18px 0
    }
    .brief-rules p{
        margin:10px 0
    }
    .brief-footer{
        margin-top:15px;
        padding-top:12px
    }
    .briefing .primary{
        padding:16px 22px
    }
    .dialog{
        padding:24px 28px
    }
    .dialog h2{
        font-size:29px;
        margin:16px 0
    }
    .result-score{
        font-size:52px
    }
    .result-stats{
        padding:14px 0;
        margin-bottom:16px
    }
}
@media(max-width:1000px){
    .topbar{
        margin:18px
    }
    .brand strong{
        font-size:23px
    }
    .mission{
        font-size:9px
    }
    .scorebox b{
        font-size:35px
    }
    .fuse{
        left:18px;
        width:172px;
        padding:14px
    }
    .fuse>.eyebrow{
        font-size:9px
    }
    .range b{
        font-size:34px
    }
    .telemetry{
        right:18px;
        width:145px;
        padding:14px
    }
    .bottom-bar{
        left:18px;
        right:18px;
        bottom:18px;
        gap:14px
    }
    .hull{
        width:230px
    }
    .controls{
        max-width:250px;
        font-size:9px
    }
    .menu-side{
        width:250px;
        padding:20px
    }
    .briefing{
        max-width:58vw
    }
    .overlay{
        gap:28px;
        padding-left:4vw;
        padding-right:4vw
    }
}
@media(max-width:800px){
    .menu-side{
        display:none
    }
    .briefing{
        width:460px;
        max-width:100%
    }
    .overlay{
        background:linear-gradient(90deg,#03060bcc,#03060b33);
        padding-left:5vw;
        padding-right:5vw
    }
    .centered{
        background:#03060bba
    }
    .dialog{
        margin:auto
    }
    .controls{
        display:none
    }
}
@media(max-width:600px){
    .topbar{
        margin:16px
    }
    .mission{
        position:absolute;
        top:65px;
        left:0;
        width:170px;
        text-align:left
    }
    .mission>.status-dot,.mission>#phase,.mission>br{
        display:none
    }
    .mission #clock{
        font-size:13px
    }
    .mission .xp-track{
        margin-top:4px
    }
    .scorebox{
        left:auto;
        right:0;
        transform:none;
        min-width:130px;
        padding:3px 0
    }
    .scorebox b{
        font-size:32px;
        letter-spacing:2px
    }
    .brand strong{
        font-size:22px;
        letter-spacing:3px
    }
    .brand .eyebrow{
        font-size:8px
    }
    .fuse{
        top:30%;
        left:14px;
        width:142px;
        padding:12px
    }
    .fuse p{
        display:none
    }
    .fuse>.eyebrow{
        font-size:8px;
        letter-spacing:.5px
    }
    .fuse-buttons span{
        font-size:7px
    }
    .fuse-buttons button{
        width:29px;
        height:30px
    }
    .fuse-data{
        font-size:8px
    }
    .range b{
        font-size:30px
    }
    .telemetry{
        top:auto;
        bottom:127px;
        right:14px;
        width:119px;
        padding:12px
    }
    #weapon-state{
        font-size:13px
    }
    .bottom-bar{
        left:14px;
        right:14px;
        bottom:16px;
        gap:10px
    }
    .hull{
        width:163px;
        padding:8px 10px 11px
    }
    .hull-title .eyebrow{
        font-size:8px;
        letter-spacing:.2px
    }
    .hull b{
        font-size:21px
    }
    nav{
        gap:4px
    }
    nav button{
        font-size:9px;
        padding:8px 9px
    }
    #announcement{
        left:18%;
        right:18%;
        font-size:14px;
        top:19%
    }
    .briefing{
        padding:25px
    }
    .briefing h1{
        font-size:48px
    }
    .briefing>.eyebrow{
        font-size:8px;
        letter-spacing:1px
    }
    .outspace-logo{
        width:220px
    }
    .brief-footer{
        font-size:8px;
        letter-spacing:.3px;
        gap:6px
    }
    .dialog h2{
        font-size:24px
    }
    .dialog{
        padding:22px
    }
    .save-row{
        flex-direction:column
    }
    .primary{
        min-width:0!important;
        width:100%
    }
    .result-stats span{
        font-size:8px
    }
    .result-stats b{
        font-size:21px
    }
}
@media(max-height:620px){
    .overlay:not(.centered){
        align-items:flex-start
    }
    .briefing{
        margin:auto 0
    }
    .menu-side{
        margin-top:auto;
        margin-bottom:20px
    }
    .fuse{
        top:26%;
        padding-top:12px;
        padding-bottom:12px
    }
    .fuse p{
        display:none
    }
    .fuse-data{
        margin:9px 0
    }
    .range{
        margin:7px 0
    }
    .telemetry{
        top:38%;
        padding-top:10px;
        padding-bottom:10px
    }
    .telemetry>span{
        margin:8px 0
    }
    .topbar{
        margin-top:12px
    }
    .bottom-bar{
        bottom:12px
    }
}
@media(prefers-reduced-motion:reduce){
    button::before,.health-track i,.loading-track i{
        transition:none
    }
}

/* Original Outspace img/css.css button-shrotcut frames; JS: shortcuts.js. */
.button-shrotcut {
    position: absolute;
    top: 0px;
    left: 0px;
}

.stationbox .facilities .operations {
    position: relative;
    top: 20px;
    left: 0px;
    right: 0px;
}

.stationbox .facilities .operations .subdom {
    white-space: nowrap;
}

.stationbox .facilities .operations .public,
.stationbox .facilities .operations .pvt{


}

.stationbox .status {
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 3px;
    white-space: nowrap;
}

.stationbox .stats {


}

.stationbox .stats table {
    font-size: 14px;
    width: 210px;

}

.stationbox .stats th {
    text-align: left;
    vertical-align: top;
    color: white;
    padding: 0px 0px 0px 0px;
    filter: drop-shadow(0px 0px 0.05rem white);

}

.stationbox .stats th > img {
    margin-top: 5px;
    margin-right: 5px;
}

.stationbox .stats td {
    padding-left: 0px;
    text-align: left;

}

.stationbox .stats td th {
    text-align: left;

}
.stationbox .stats table table {
    margin-top: 0px;
}



.stationbox .stats table td th,
.stationbox .stats table td td {
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
    max-width: 200px;
}

.stationbox .stats td > span {
    color: gray;

}

.stationbox .stats td > span > span.hmainten {
    color: white;
}

.stationbox .stats td .hevolutiondom .hevolution_storage,
.stationbox .stats td .hevolutiondom .hevolution_genetics,
.stationbox .stats td .hevolutiondom .hevolution_cybernetics
{
    position: relative;
    padding-left: 23px;
    font-size: 13px;

}


.stationbox .stats td .hevolutiondom .hevolution_genetics small,
.stationbox .stats td .hevolutiondom .hevolution_cybernetics small
{
    text-transform: uppercase;

}

.stationbox .stats td .hevolutiondom .hevolution_storage:before,
.stationbox .stats td .hevolutiondom .hevolution_genetics:before,
.stationbox .stats td .hevolutiondom .hevolution_cybernetics:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 3px;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}


.stationbox .stats td .hevolutiondom .hevolution_storage:before {
    background-image: url(ico/warehousing_64.png);
}

.stationbox .stats td .hevolutiondom .hevolution_genetics:before {
    background-image: url(ico/genetics_64.png);
}

.stationbox .stats td .hevolutiondom .hevolution_cybernetics:before {
    background-image: url(ico/cybernetics_64.png);
}


.stationbox .stats td .hpopulation,
.stationbox .stats td .hevolution_points{
    color: white;
    font-size: 14px;
}
.stationbox .stats td .hnextstep-info {
    color: gray;
    position: relative;
    min-height: 43px;
    display: inline-block;
    padding-left: 65px;
    margin-top: 5px;

}

.stationbox .stats td .hnextstep-info .hnextstep-infimg {
    position: absolute;
    display: block;
    height: 40px;
    width: 57px;
    top: 0px;
    left: 0px;

}

.stationbox .stats td .hnextstep-info .hnextstep-infimg:before {
    content: '';
    position: absolute;
    left: -15px;
    right: -5px;
    top: 0px;
    bottom: 0px;
    background-image: url(./ico/arrow-32-32.png);
    background-size: 56px;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0.05;
    animation: moveArrow 0.9s cubic-bezier(0, 0, 0, 1.02) forwards;
}


@keyframes moveArrow {
    0% {
        background-position: left center; /* Start vlevo */
        opacity: 0.2;
    }
    100% {
        background-position: 100% center; /* Konec vpravo */
        opacity: 0.05;
    }
}

.stationbox .stats td .hnextstep-info .hnextstep-infimg .hnextstep-infimgg {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    filter: brightness(1.5) grayscale(1);
    background-position: center;
    background-repeat: no-repeat;

}

.stationbox .stats td .hnextstep-info .hnextstep-infbname {
    display: block;
}

.stationbox .stats td .hnextstep-info .hnextstep-inffname {
    display: block;
}
.stationbox .stats td .henergy {
    color: white;

}
.stationbox .stats td .hrepro {
    color: white;

}


.stationbox .stats .exp .exp_lvl  {
    font-size: 14px;
    color: white;
}

.stationbox .stats .exp .exp_perc {

    padding-left: 5px;
}
.stationbox .stats td span.zavorka {
    padding-left: 3px;
    padding-right: 3px;

}

.stationbox .stats td span.zavorka.lef {
    padding-left: 5px;

}

.stationbox .stats td span.organic {
    color: silver;

}
.stationbox .stats td span.bonus {
    color: gray;
    padding-left: 5px;

}


.stationbox .stats td span.nextlevelbutton {
    position: relative;
    text-align: center;
    border: 0px;
    z-index: 1;
    cursor: pointer;
    text-decoration: none;
    color: #ffbc00;
    padding: 7px 13px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
    box-sizing: border-box;
    animation: highlited 1000ms linear infinite;
    margin-left: 10px;
    text-shadow: none;

}

.stationbox .stats td span.nextlevelbutton:hover {
    animation: blink 100ms linear 2 alternate;
}

.stationbox .stats td span.nextlevelbutton:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

.stationbox .stats td span.nextlevelbutton:hover:before {
    box-shadow: 0px 0px 15px #ffbc00 inset !important;
    animation: blink 100ms linear 2 alternate;
}

.stationbox .stats td span.nextlevelbutton:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
    background-image: linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%);

}

.stationbox .stats td .energy-basic,
.stationbox .stats td .energy-solar,
.stationbox .stats td .energy-bonus {
    display: inline-block;
    padding-left: 0px;
    padding-right: 5px;
    background-position: center left;
    background-repeat: no-repeat;
    color: white;
}

.stationbox .stats td .energy-bonus {
    background-size: 12px;
    color: gray;
}

.stationbox .stats td .energy-solar {
    padding-left: 16px;
    background-image: url(./ico/solar_16.png);
    background-size: 14px;
}

.stationbox .stats td .biom {
    display: inline-block;
    padding-left: 15px;
    padding-right: 5px;
    background-size: 12px;
    background-position: center left;
    background-repeat: no-repeat;
    /* font-size: 14px; */
    line-height: 12px;
    background-image: url(./ico/ico_biomass.png);
    margin-left: 8px;
}


.stationbox .stats td .crewm {
    display: inline-block;
    padding-left: 13px;
    padding-right: 5px;
    background-size: 10px;
    background-position: center left;
    background-repeat: no-repeat;
    line-height: 12px;
}

.stationbox .stats td .crewm.hnonadult {
    background-image: url(./ico/colonists_nonadult_32.png);

}

.stationbox .stats td .crewm.hmales {
    background-image: url(./ico/male-2-24.png);
}

.stationbox .stats td .crewm.hfemales {
    background-image: url(./ico/female-2-24.png);
}

.stationbox .stats td .crewm.ghouls {
    background-image: url(./ico/ghoul_16.png);
}

.stationbox .stats td .crewm.infected {
    background-image: url(./ico/infected-red_16.png);
    color: #FF5722;
    animation: highlited 400ms linear infinite;


}

.stationbox .stats td .crewm.nothing {
    padding-left: 0px;
}

.stationbox .stats td .crewm.clickable {
    cursor: pointer;
}

.stationbox .stats td .crewm.clickable:hover {
    animation: blink 100ms linear 2 alternate;
}

.stationbox .stats td .reproduction-info {
    color: var(--hud_invalid_color);
    animation: highlited 1000ms linear infinite;
    text-transform: uppercase;
    padding-left: 5px;
    /*white-space: nowrap; toto ne*/
}


.stationbox .stats td .reproduction-info:hover {
    animation: none;
}


.stationbox .blocks {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid white;
}

.stationbox .blocks .block  {
    padding: 0px;
    position: relative;
    height: 38px;
    width: 100%;
}

.stationbox .blocks .block .name {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 11px;
    line-height: 11px;
    font-size: 12px;
    text-transform: uppercase;
}

.stationbox .blocks .block .health {
    position: absolute;
    left: 0px;
    top: 15px;
    right: 0px;
    height: 4px;
}

.stationbox .blocks .block .health .hpbar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    bottom: 0px;
    animation: blink 100ms linear 2;
    background-color: rgb(165,165,165);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}

.stationbox .blocks .block .health .hpbar .bar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    background: white;
}

.stationbox .blocks .block .health .txt {
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 6px;
    right: 0px;
    color: white;
    text-align: right;
    line-height: 13px;
    /*  */
    font-size: 10px;

}


.stationbox .facilities {
    padding-top: 0px;
    margin-top: 5px;

    position: relative;

}


.stationbox .facilities .subdom {
    display: block;
    position: relative;
    height: 43px;
}

.stationbox .facilities .subdom.shidden {
    display: none;
}

.stationbox .facilities .subdom:before  {
    content: '';
    line-height: 26px;
    color: white;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 1px;
    height: 25px;
    font-size: 12px;
    text-align: left;
    padding: 0px 0px 0px 30px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 16px;
    text-shadow: none;
    font-family: var(--fontFaimly_header);
}

.stationbox .facilities .subdom.crew:before{
    background-image: url('ico/ico_station_crew.png');
}
.stationbox .facilities .subdom.industry:before{
    background-image: url('ico/ico_station_ti.png');
}
.stationbox .facilities .subdom.trade:before{
    background-image: url('ico/ico_station_cargo.png');
}

.stationbox .facilities .subdom.com:before{
    background-image: url('ico/ico_station_com.png');
}

.stationbox .facilities .facility  {
    display: block;
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 0px;
    width: 60px;
    height: 40px;
}

.stationbox .facilities .facility > .subtext {
    animation: var(--animation-subtext-fadeinFast);
}



.stationbox .facilities .facility.comWindow   {
    top: 0px;
    left: 25px;
}

.stationbox .facilities .facility.nuclearsiloWindow   {
    top: 0px;
    left: 88px;
}

.stationbox .facilities .facility.crewWindow    {
    top: 0px;
    left: 25px;
}

.stationbox .facilities .facility.hospitalWindow   {
    top: 0px;
    left: 88px;
}

.stationbox .facilities .facility.templeWindow   {
    top: 0px;
    left: 151px;
}

.stationbox .facilities .facility.warehouseWindow {
    top: 0px;
    left: 25px;
}
.stationbox .facilities .facility.whControllerWindow {
    top: 44px;
    left: 25px;
}


.stationbox .facilities .facility.hangarWindow   {
    top: 0px;
    left: 88px;
}

.stationbox .facilities .facility.buyWindow {
    top: 0px;
    left: 151px;
}

.stationbox .facilities .facility.refineryWindow {
    top: 0px;
    left: 25px;
}

.stationbox .facilities .facility.factoryWindow   {
    top: 0px;
    left: 88px;
}

.stationbox .facilities .facility.ebeamWindow {
    top: 0px;
    left: 151px;
}


.stationbox .facilities .facility.quest-gray  {

    filter: grayscale(1) brightness(0.15);
}

.stationbox .facilities .facility.quest-hide  {
    display: none;
}

.stationbox .facilities .facility:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    box-shadow: 0px 0px 15px black inset;
    z-index: 1;
}

.stationbox .facilities .facility:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}
.stationbox .facilities .facility:not(.quest-gray):hover:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}

.stationbox .facilities .facility:not(.quest-gray):hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}


.stationbox .facilities .facility .thint  {
    left: 100%;
    text-align: center;
    top: 50%;
    right: unset;
    transform: translateY(-50%);
}

.stationbox .facilities .facility .thint:before  {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid #ffbc00;
    border-bottom: 10px solid transparent;
    border-left: none;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
    right: unset;
}



.stationbox .facilities .facility .icon  {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    overflow: hidden;
}

.stationbox .facilities .facility .icon:before  {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.stationbox .facilities .facility.buyWindow .icon:before  {
    background-image:url('facilities/fac_market.png');
    filter: sepia(1) saturate(2) hue-rotate(150deg);
}

.stationbox .facilities .facility.warehouseWindow .icon:before  {
    background-image:url('facilities/fac_warehouse.png');
    filter: sepia(1) saturate(2) hue-rotate(346deg);
}

.stationbox .facilities .facility.crewWindow .icon:before  {
    background-image:url('facilities/fac_habitat.png');
    filter: sepia(0) saturate(1.2);
}

.stationbox .facilities .facility.biorecyclerWindow .icon:before  {
    background-image:url('ico/hud_foto_station_biorecycler.png');
}

.stationbox .facilities .facility.hangarWindow .icon:before  {
    background-image:url('facilities/fac_hangar.png');
    filter: sepia(1) saturate(3) hue-rotate(185deg);
}

.stationbox .facilities .facility.templeWindow .icon:before  {
    background-image:url('facilities/fac_temple.png');
}

.stationbox .facilities .facility.refineryWindow .icon:before {
    background-image:url('facilities/fac_refinery.png');
    filter: sepia(1) saturate(2) hue-rotate(241deg);
}

.stationbox .facilities .facility.ebeamWindow .icon:before {
    background-image:url('facilities/fac_ebeam.png');
}

.stationbox .facilities .facility.factoryWindow .icon:before  {
    background-image:url('facilities/fac_factory.png');
    filter: sepia(1) saturate(2) hue-rotate(69deg);
}

.stationbox .facilities .facility.comWindow .icon:before  {
    background-image:url('facilities/fac_bridge.png');
    filter: saturate(3);
}

.stationbox .facilities .facility.hospitalWindow .icon:before  {
    background-image:url('facilities/fac_hospital.png');
}

.stationbox .facilities .facility.nuclearsiloWindow .icon:before  {
    background-image:url('facilities/fac_nsilo.png');
}

.stationbox .facilities .facility.whControllerWindow .icon:before  {
    background-image:url('facilities/fac_whcontroller.png');
}

.stationbox .facilities .facility .name {
    position: absolute;
    bottom: unset;
    left: 50%;
    top: calc(100% + 4px);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: white;
    display: block;
    text-shadow: none;
    line-height: 13px;
    transform: translateX(-50%);
    width: 100%;
    white-space: normal;
}



.right-column {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    transition: right 0.2s;
    z-index: 100000; /*nechat jinak pje prekryje radar*/
}

.right-column.hidden{
    right: -100%;
}

.right-column .wrank{
    position: absolute;
    top: 10px;
    right: 530px;
}



.right-column .wrank .rankval{
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    text-align: right;
    font-size: 14px;
    white-space: nowrap;
    line-height: 20px;
    text-shadow: var(--shadow_textfull);
    cursor: pointer;
}

.right-column .wrank .rankval .before{
    content: 'RANK:';
    position: absolute;
    top: 0px;
    right: calc(100% + 5px);
    color: gray;
    text-align: right;
    font-size: 12px;

    white-space: nowrap;
    line-height: 20px;
    text-shadow: none;
    cursor: pointer;
}

.right-column .wrank .rankval .change{


    padding-left: 6px;

    color: gray;



    font-size: 12px;
    line-height: 20px;
    text-shadow: none;

}

.right-column .wrank .rankval:hover{
    animation:blink 100ms linear 2 alternate;
}

.right-column .premium{
    position: absolute;
    top: 7px;
    right: 330px;
    color: white;
    text-align: right;


    white-space: nowrap;

    text-shadow: var(--shadow_textfull);
}



.right-column .premium .have-premium,
.right-column .premium .get-premium {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;

    background-repeat:no-repeat;


}



.right-column .premium .have-premium{
    color: #ffbc00;
    background-size:25px;
    background-image:url('store/4.png');
    padding: 0px 9px 0px 35px;
    background-position:5px center;
    line-height: 20px;
}

.right-column .premium .have-premium .counter{
    min-width: 90px;
    display: inline-block;
    text-align: left;
    font-size: 12px;
}

.right-column .premium .get-premium{
    color: gray;
    background-size: 20px;
    background-image: unset;
    animation: gold-shadowing 15s infinite;
    padding: 2px 10px 0px 10px;
    height: 28px;
    font-family: var(--fontFaimly_button);
    line-height: 13px;
    font-size: 12px;
    text-align: center;

}

.right-column .premium .get-premium:before {
    content: '';
    display: block;
    position: absolute;
    height: 20px;
    line-height: 19px;
    padding-left: 46px;
    top: 2px;
    left: -14px;
    color: white;
    background-image: url(prembanner_icon.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 19px;
    width: 20px;
}

.right-column .premium .have-premium.selected,
.right-column .premium .get-premium.selected{
    background-color: rgba(255,255,255,0.8);
    color: black;
    text-shadow: none;

    clip-path: var(--clip_rcbutton);
}

.right-column .premium .get-premium.selected:before {
    display: none;
}



.right-column .premium .have-premium:hover,
.right-column .premium .get-premium:hover {
    animation:blink 100ms linear 2 alternate;
}

.right-column .premium .premium_subdetail {
    display: block;
    position: absolute;
    width: 400px;
    height: 680px;
    right: -0px;
    top: 28px;

}

.right-column .premium .premium_subdetail:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 15%, rgba(0,0,0,1) 50%),url(prembanner_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,contain;
    background-position: top,top;
    background-color: black;
    clip-path: var(--clip_menu_premiumbox);
}


.right-column .premium .premium_subdetail .content {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    left: 0px;
    bottom: 85px;
    white-space: normal;
}

.right-column .premium .premium_subdetail .content .bafore {

    display: block;
    position: absolute;
    height: 40px;
    line-height: 19px;
    padding-left: 46px;
    top: 15px;
    left: 14px;
    color: white;
    background-image: url(prembanner_icon.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 40px;
    text-transform: uppercase;
    text-shadow: none;
    font-size: 16px;
    text-align: left;
    width: 200px;
}

.right-column .premium .premium_subdetail .content h1 {
    display: block;
    position: absolute;
    top: 215px;
    left: 40px;
    font-size: 30px;
    text-align: left;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    color: #ffbc00;
}

.right-column .premium .premium_subdetail .content h2 {
    display: block;
    position: absolute;
    top: 250px;
    left: 40px;
    right: 0px;
    font-size: 20px;
    text-align: left;
    padding: 0px;
    margin: 0px;
    color: #ffbc00;

    font-family: var(--fontFaimly_header);
}

.right-column .premium .premium_subdetail .content h3 {
    display: block;
    position: absolute;
    top: 280px;
    left: 0px;
    right: 0px;
    font-size: 23px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: gray;
    font-weight: normal;

    font-family: var(--fontFaimly_header);
}

.right-column .premium .premium_subdetail .content .tactic,
.right-column .premium .premium_subdetail .content .trade,
.right-column .premium .premium_subdetail .content .industry {
    display: block;
    position: absolute;
    left: 85px;
    right: 0px;
}

.right-column .premium .premium_subdetail .content .tactic ul,
.right-column .premium .premium_subdetail .content .trade ul,
.right-column .premium .premium_subdetail .content .industry ul {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    text-align: left;
}

.right-column .premium .premium_subdetail .content .tactic ul li,
.right-column .premium .premium_subdetail .content .trade ul li,
.right-column .premium .premium_subdetail .content .industry ul li {
    display: table;
    position: relative;
    padding: 0px;
    margin: 0px;
    text-align: left;
    text-transform: uppercase;
    line-height: 17px;
}

.right-column .premium .premium_subdetail .content ul li .infosight {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 12px;


}

.right-column .premium .premium_subdetail .content ul li .infosight:before {
    content: '';
    position: absolute;
    right: 0px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;
    cursor: help;
}

.right-column .premium .premium_subdetail .content ul li .infosight:hover .html {
    display: block;

}

.right-column .premium .premium_subdetail .content ul li .infosight .html {
    display: none;
    position: absolute;
    left: -1px;
    width: 260px;
    top: 25px;
    background-color: rgba(10,10,10,1);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    pointer-events: none;
    animation: var(--animation-subtext-fadein);
    filter: var(--subtext_shadow);

}

.right-column .premium .premium_subdetail .content ul li .infosight .html:before {
    content: "";
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    left: 0px;
    border-bottom: 10px solid rgba(10,10,10,1);
}

.right-column .premium .premium_subdetail .content ul li .infosight .html ul {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: circle;
}

.right-column .premium .premium_subdetail .content ul li .infosight .html ul li {
    font-size: 13px;
    color: #ffbc00;

    text-transform: none;
    padding: 5px 0px;

}


.right-column .premium .premium_subdetail .content .tactic ul li span,
.right-column .premium .premium_subdetail .content .trade ul li span,
.right-column .premium .premium_subdetail .content .industry ul li span {
    font-size: 14px;
    color: #ffbc00;
    text-transform: none;
}



.right-column .premium .premium_subdetail .content .tactic .img,
.right-column .premium .premium_subdetail .content .trade .img,
.right-column .premium .premium_subdetail .content .industry .img {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -50px;
    top: 5px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(prembanner_icon.png);


}

.right-column .premium .premium_subdetail .content .tactic {
    top: 340px;
}

.right-column .premium .premium_subdetail .content .trade {
    top: 480px;
}

.right-column .premium .premium_subdetail .content .industry {
    top: 410px;
}

.right-column .premium .premium_subdetail .extend,
.right-column .premium .premium_subdetail .buy {

    position: absolute;
    min-width: 156px;

    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;

    text-shadow: none;

}




@keyframes gold-shadowing{
    0% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.0), 0px 0px 0 rgba(126, 250, 255, .0);
    }
    76% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.0), 0px 0px 0 rgba(126, 250, 255, .0);
    }
    78% {
        text-shadow: -2px 0px 0 rgba(255,131,64,.3), 2px 0px 0 rgba(126, 250, 255, .3);
    }
    78.5% {
        text-shadow: -2px 0px 0 rgba(255,131,64,.3), 2px 0px 0 rgba(126, 250, 255, .3);
    }
    80.5% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.0), 0px 0px 0 rgba(126, 250, 255, .0);
    }
    100% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.0), 0px 0px 0 rgba(126, 250, 255, .0);
    }
    0%{
        opacity:1;
    }
    27.2%{
        opacity:1;
    }
    27.5%{
        opacity:0.95;
    }
    27.7%{
        opacity:1;
    }
    28.2%{
        opacity:1;
    }
    28.5%{
        opacity:0.95;
    }
    28.7%{
        opacity:1;
    }
    29.2%{
        opacity:1;
    }
    29.5%{
        opacity:0.95;
    }
    29.7%{
        opacity:1;
    }
    77.2%{
        opacity:1;
    }
    77.5%{
        opacity:0.4;
    }
    77.9%{
        opacity:1;
    }
    78.0%{
        opacity:0.6;
    }
    78.3%{
        opacity:1;
    }
    97%{
        opacity:1;
    }
    97.2%{
        opacity:0.3;
    }
    97.5%{
        opacity:1;
    }
    98%{
        opacity:0;
    }
    98.2%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


.right-column .credit{
    position: absolute;
    top: 6px;
    right: 86px;
    text-shadow: var(--shadow_textfull);

}



.right-column .credit .exc{
    position: absolute;
    right: 155px;
    text-align:right;
    font-size: 16px;

    letter-spacing: 0px;
    color: rgb(255,255,255);
    line-height: 18px;

    top: 4px;
    white-space: nowrap;
}

.right-column .credit .bonus{
    position: absolute;
    top: 4px;
    right: 60px;
    text-align:right;
    font-size: 16px;
    color: #ffbc00;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}



.right-column .credit .bonus .getmorale{
    position: absolute;
    top: 26px;
    left: 50%;
    text-align: left;
    font-size: 12px;
    height: 20px;
    color: #ffbc00;
    line-height: 20px;
    background-color: #ffbc00;
    white-space: nowrap;
    cursor: pointer;
    display: none;
    padding: 1px 10px 1px 25px;
    border-radius: 15px;
    transform: translateX(-50%);
}

.right-column .credit .bonus.opened .getmorale,
.right-column .credit .bonus:hover .getmorale {
    display: block;

}

.right-column .credit .bonus .getmorale:hover {
    animation: blink 100ms linear 2 alternate;
}

.right-column .credit .bonus .getmorale:after{
    content: '+';
    position: absolute;
    font-size: 20px;
    top: 0px;
    left: 7px;
    font-family: var(--fontFaimly_button) !important;
    line-height: 20px;
    height: 18px;


}

.right-column .credit .bonus .getmorale:before{
    content: '';
    position: absolute;

    top: -10px;
    left: -5px;
    right: -5px;
    bottom: -5px;
}

#telo.battlemap #own-ships{
    /*display: none;  */
}


#own-ships-parent {
    position: absolute;
    right: 0px;
    bottom: 30px;
    top: 650px;
    display: block;
    /*transition: bottom, right, .2s;*/

}




.telo.maphud #own-ships-parent:not(.shown) {
    top: 710px;

}

.telo.fleetships #own-ships-parent:not(.shown) {
    display: none;
}



#own-ships {
    position: absolute;
    right: 0px;
    bottom: 50%;
    transform: translateY(50%);

}





#own-ships .ship {
    height: 30px;
    width: 80px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    margin: 0px;

}

#own-ships .ship.active {
    cursor: default;
}



#own-ships .ship.hide:not(.alerted) {
    display: none;
}


#own-ships .ship .imgcontent {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#own-ships .ship .imgcontent .img {
    filter: brightness(1.5) grayscale(1);
}

#own-ships-parent.shown #own-ships .ship .imgcontent .img {
    filter: brightness(2) grayscale(1);
}

#own-ships .ship .imgcontent .img {
    position: absolute;
    top: -25px;
    left: 10px;
    right: 10px;
    bottom: -25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
#own-ships .ship .name {
    position: absolute;
    top: 50%;
    right: 0px;
    left: 0px;

    font-size: 10px;
    text-align: center;
    z-index: 1;
    opacity: 1;
    display: none;
    color: var(--subtext_color);
    text-transform: uppercase;
    transform: translateY(-50%);
}

#own-ships .ship:not(.active):hover {
    /*animation: blink 100ms linear 2 alternate;*/
}







#own-ships .ship .status {
    position: absolute;
    left: 5px;
    top: 0px;
    bottom: 0px;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
}



#own-ships .ship .status .sinfo{
    display: none;
    color: var(--subtext_color);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    white-space: nowrap;
    text-align: right;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 16px;
    background-size: 18px;
    background-position: 5px center;
    background-repeat: no-repeat;
    /*text-transform: uppercase;*/
    background-color: var(--subtext_color-background);
    text-shadow: none;
    clip-path: var(--clip_alerttext);
}

#own-ships .ship .status .sinfo .star-name{
    display: block;
    opacity: 0.7;

}
#own-ships .ship .status .sinfo .star-name span{
    display: inline-block;
    font-size: 10px;
    background-image: url(ico/sun-16.png);
    padding-left: 13px;
    background-position: 1px center;
    background-size: 9px;
    background-repeat: no-repeat;

}

#own-ships .ship .status:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    border-left: 5px solid var(--subtext_color-background);
}


#own-ships .ship:hover .status .alerttext  {
    display: block;
    animation: blink 100ms linear 2 alternate;
}

#own-ships .ship .status .alerttext{
    color: white;
    position: absolute;
    right: 5px;
    top: calc(50% - 10px);
    height: 20px;
    white-space: nowrap;
    text-align: right;
    padding-left: 8px;
    padding-right: 5px;
    line-height: 20px;
    background-size:18px;
    background-position: 5px center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: rgba(255,255,255,.8);
    text-shadow: none;
    text-transform: none;
    clip-path: var(--clip_alerttext);
}



#own-ships .ship .status .alerttext {
    color: var(--subtext_color);
    background-color: var(--subtext_color-background);
}


#own-ships .ship:hover .status .alerttext {
    display: none;
}


#own-ships .ship:hover .status .sinfo {
    display: block;
}


#own-ships-parent.shown {
    min-width: 450px;
    max-width: calc(100% - 80px);
    right: 50%;
    bottom: 50%;
    transform: translateY(50%) translateX(50%);
    z-index: 999999998;
    /*animation: blink 20ms linear 2 alternate;*/

    padding: 0px;

    top: unset;
    max-height: calc(100% - 80px);

}

#own-ships-parent.shown:before {
    content: '';
    position:absolute;
    display: block;
    top: -10px;
    right: -15px;
    left: -10px;
    bottom: -10px;
    clip-path: var(--clip_desktop_ownships);
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}

#own-ships-parent #own-ships-controls {
    display: none;
}



#own-ships-parent.shown .own-ships-info {
    display: block;
    position: relative;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    color: rgba(200,200,200,1);
    text-transform: uppercase;
    text-align: center;
    line-height: 19px;
}

#own-ships-parent.shown #own-ships-controls {
    display: block;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
    padding: 20px 0px 20px;
    width: 100%;
    min-height: 20px;


}




#own-ships-parent.shown #own-ships {
    position: relative;
    transform: unset;
    bottom: unset;
    max-height: unset;
    top: unset;
    right: unset;
}



#own-ships-parent.shown #own-ships #own-ships-scroll {
    max-height: calc(100vh - 135px);
    overflow-y: scroll;
    overflow-x: var(--grid-overflow-x, hidden);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 1), 445px);
    grid-gap: 10px;
    grid-auto-rows: auto;
}

#own-ships-parent.shown #own-ships .star_sector_dom {
    margin-bottom: 20px;
}

#own-ships-parent.shown #own-ships .star_sector_dom .ssheadtitle {
    margin: 20px 0px 10px;
}

#own-ships-parent:not(.shown) #own-ships .star_sector_dom .ssheadtitle {
    display: none;
}

#own-ships-parent.shown #own-ships .star_sector_dom .ssheadtitle .ssname {
    display: inline-block;
    color: white;
    margin-left: 50%;
    transform: translateX(-50%);
}

#own-ships-parent.shown #own-ships .star_sector_dom .ssheadtitle .ssname span {
    display: inline-block;
    font-size: 16px;
    background-image: url(ico/sun-16.png);
    padding-left: 21px;
    background-position: 1px center;
    background-size: 13px;
    background-repeat: no-repeat;
}

#own-ships-parent.shown #own-ships .ship {
    margin: 20px 37% 0px auto;


}

#own-ships-parent.shown #own-ships .ship.hide {
    display: block;
}

#own-ships-parent.shown #own-ships .ship .status .sinfo {
    display: block;
    padding-left: 6px;
    padding-right: 6px;
    height: unset;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    clip-path: var(--clip_alerttext);
}

#own-ships-parent.shown #own-ships .ship.active .status .sinfo {
    color: black;
    background: white;
}

#own-ships-parent.shown #own-ships .ship.active .status:before {
    border-left: 5px solid white;
}

#own-ships-parent.shown #own-ships .ship.active .status .sinfo .star-name span{
    filter: invert(1);
    color: white;

}

#own-ships-parent.shown #own-ships .ship .status .alerttext {
    display: none;
}

#own-ships-parent.shown #own-ships .ship .name {
    display: block;
    left: calc(100% + 10px);
    right: unset;
    width: 100px;
    text-align: left;
    text-shadow: none;
    padding: 3px;
    font-size: 12px;
    color: #bfbfbf;
}

#own-ships-parent.shown #own-ships .ship.active .name {
    color: white;
}

#own-ships-parent.shown #own-ships .ship:not(.active):hover .name {
    color: white;
}

#own-ships-parent.shown #own-ships .ship:not(.active):hover .imgcontent .img {
    animation: blink 100ms linear 2 alternate;

}






.right-column .buttons-right{
    position: absolute;
    top: 0px;
    right: 0px;
}

.right-column .buttons-right .main-buttons{
    position:absolute;
    top: 0px;
    right: 0px
}
.right-column .buttons-right .main-buttons div{
    position: absolute;
    display: block;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    min-width: 19px;
    height: 18px;
    right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    padding: 0px 5px;
    background-size: 16px;
    line-height: 18px;
    min-width: 18px;
    font-family: var(--fontFaimly_button);
    z-index: 1;
}
.right-column .buttons-right .main-buttons div:hover{
    animation:blink 100ms linear 2 alternate;
}
.right-column .buttons-right .main-buttons div.active{
    animation:highlited 1000ms linear infinite;
}


.right-column .buttons-right .main-buttons .btn.active:after{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;
}




#telo.rightcontext .right-column .buttons-right .main-buttons .btn:after{
    display: block;
    /*content: '';*/
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;

    clip-path: var(--clip_rcbutton);
    z-index: -1;
}

.right-column .buttons-right .main-buttons .btn.processes.active:after{
    content: 'W';
}     /*icon-spacecraft_16w.png*/




.right-column .buttons-right .main-buttons .btn.dataflows.active:after{
    content: 'A';
}     /*icon-spacecraft_16w.png*/







.right-column .buttons-right .main-buttons div.active:before {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 4px;
    left: -5px;
    border-right: 5px solid rgb(255,255,255,0.8);
}




.right-column .buttons-right .main-buttons div.hiligted:after{
    content: "!";
    position: absolute;
    bottom: -5px;
    right: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;

    color: black;
    background-color: white;
    font-size: 13px;

    animation: highlited 1000ms linear infinite;
}


.right-column .buttons-right .main-buttons div.menu{
    background-image:url('ico/ico_menu-48.png');
    top: 10px;
    background-color: transparent;
    width: 20px;
}

.right-column .buttons-right .main-buttons div.menu:hover{
    background-color: rgba(0,0,0,0.8);
    ;
    filter: invert(1);
}

.right-column .buttons-right .main-buttons div.quests{

    top: 10px;
    right: 33px;
    width: 80px;
}

.right-column .buttons-right .main-buttons div.quests:after{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;

    clip-path: var(--clip_rcbutton);
    background-color:  rgb(255,255,255,0.8);
    z-index: -1;
}


.right-column .buttons-right .main-buttons div.locality{
    top: 235px;
    /*width: unset;*/
}
.right-column .buttons-right .main-buttons div.locality:after{
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;

    clip-path: var(--clip_rcbutton);
    z-index: -1;
    background-color: rgba(255,255,255,.8);
    content: '';
}

.telo.rightcontext .right-column .buttons-right .main-buttons div:not(.quests) {
    width: 18px;
    color: rgba(0,0,0,0);

}


.telo.rightcontext .right-column .buttons-right .main-buttons div.locality:after {
    display: block;
    content: 'L';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;
    background-color: rgba(255,255,255,0.8);
}


.right-column .buttons-right .main-buttons div.dataflows{
    top: 205px;
}

.right-column .buttons-right .main-buttons div.dataflows:after{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;
    background-color: rgba(255,255,255,.8);

    clip-path: var(--clip_rcbutton);
    z-index: -1;
}


.right-column .buttons-right .main-buttons div.processes{
    top: 175px;
}



.right-column .buttons-right div.active:before {
    border-right: 5px solid rgb(188,136,0) !important;
}

#telo .right-column .buttons-right div.active:after{
    background-color: rgb(188,136,0) !important;
}

.right-column .buttons-right .sub-buttons{
    position: absolute;
    top: 170px;
    right: 8px;
    z-index: 9999;
    text-align: right;
}


.right-column .buttons-right .sub-buttons .sbtn {
    margin: 7px 0px 7px 0px;
    padding: 0px;
    display: block;
}


.right-column .buttons-right .sub-buttons .sbtn.active > .ctrl-key{
    background-color: black;
    color: white;
    animation:highlited 1000ms linear infinite;
    filter: invert(1);
    border-color: black;
}

.right-column .buttons-right .sub-buttons .sbtn.active > .ctrl-key:before {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: calc(50% - 5px);
    right: calc(100% - 0px);
    border-right: 5px solid rgba(255,255,255,1);
    filter: invert(1);
    left: unset;
    bottom: unset;
}

.right-column .buttons-right .sub-buttons .sbtn.active > .ctrl-key:after{
    background-image:
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%);
}


.right-column .buttons-right .sub-buttons .sbtn.locality > .ctrl-key{
    background-image: url(ico/ico_location_32.png);
    background-size: 10px;
}

.right-column .buttons-right .sub-buttons .sbtn.smap.ships > .ctrl-key{
    background-image: url(ico/ico_spacecraft_32.png);
    background-size: 10px;
}


.right-column .buttons-right .sub-buttons .sbtn.smap.stations > .ctrl-key{
    background-image: url('ico/viewcontrols_stations_32.png');
    background-size: 10px;
}

.right-column .buttons-right .sub-buttons .sbtn.smap.wormholes > .ctrl-key{
    background-image: url('ico/viewcontrols_wh_32.png');
    background-size: 10px;
}

.right-column .buttons-right .sub-buttons .sbtn.smap.asteroids > .ctrl-key{
    background-image: url('ico/viewcontrols_asteroids_32.png');
    background-size: 10px;
}

.right-column .buttons-right .sub-buttons .sbtn.smap.planets > .ctrl-key{
    background-image: url('ico/viewcontrols_planets_32.png');
    background-size: 10px;
}

.right-column .buttons-right .sub-buttons .sbtn.smap.waypoints > .ctrl-key{
    background-image: url('ico/ico_waypoint_32.png');
    background-size: 10px;
}

#telo.rightcontext .right-column .buttons-right .sub-buttons .sbtn .ctrl-title{
    display: none;
}
#telo.fleetships .right-column .buttons-right .sub-buttons .sbtn .ctrl-title{
    display: none;
}

#telo .right-column .buttons-right .main-buttons .btn.processes:after{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;
    background-color: rgba(255,255,255,.8);

    clip-path: var(--clip_rcbutton);
    z-index: -1;

}

.right-column .buttons-right .sub-buttons div.hiligted:hover:after{
    display: none;
}
.right-column .buttons-right .sub-buttons div.hiligted.active:after{
    display: none;
}

.right-column .buttons-right .main-buttons .thint {
    top: -3px;

}

.right-column .buttons-right .main-buttons .active .thint {
    visibility: hidden;
}

.right-column .buttons-right .sub-buttons .thint {
    top: 50%;
    transform: translateY(-50%);
    right: 26px;
}

.right-column .buttons-right .sub-buttons .active .thint {
    visibility: hidden;
}



.right-column .buttons-right .info-buttons{
    position:absolute;
    bottom: 50px;
    right: 0px
}
.right-column .buttons-right .info-buttons div {
    position:absolute;
    display:block;
    box-sizing: border-box;
    text-align:center;
    font-size:12px;
    font-weight:normal;
    width:35px;
    height:35px;
    right: 5px;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
    opacity:0.4;
    padding:0px;
    background-size:20px;
    background-color: rgba(0,0,0,.85);
    border-right: 2px solid white;
}
.right-column .buttons-right .info-buttons div:hover{
    opacity:1;
    filter: invert(100%);
    animation:blink 100ms linear 2 alternate;
    border-right: 2px solid black;
}
.right-column .buttons-right .info-buttons div.active{
    opacity:1;
    filter: invert(100%);
    animation:highlited 1000ms linear infinite;
    border-right: 2px solid black;
}
.right-column .buttons-right .info-buttons div.active:before {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid rgba(0,0,0,1);
    position: absolute;
    top: 12px;
    left: -5px;
}

.right-column .buttons-right .info-buttons div.log{
    background-image:url('ico/ico_log-64.png');
    bottom: 0px;
    left: auto;
}



.right-context {
    position: absolute;
    top: 35px;
    right: 34px;
    bottom: 40px;
    min-width: 300px;
    opacity: 1;
    z-index: 99999;
}

.right-context:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_right_context);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}


.right-context .info {
    text-transform: uppercase;
    text-align: center;
    color: silver;
    padding: 10px 0px 10px;
    font-size: 13px;
}

.right-context .info .negative {
    color: var(--hud_invalid_color);
}

.right-context.hidden {
    display: none;
}

.right-context.invisible {
    min-width: 0px;
    width: 0px;
}

.right-context.invisible:before {
    display: none;
}

.right-context.invisible:before {
    display: none;
}

.right-context table.radars-header  {
    position: absolute;
    top: 0px;
    height: 20px;
    right: 0px;
    left: -5px;
    width: calc(100% + 5px);
    border-spacing: 0px;
    table-layout: fixed;
}
.right-context table.radars-header tr th{
    background-color: white;
    font-size: 9px;
    color: white;

    text-transform: uppercase;
    line-height: 10px;
    height: 30px;
    box-sizing: border-box;
}

.right-context table.radars-header th.scrollbar{
    width: 17px;
    padding: 0px;
}

.right-context table.radars-header th.searchfield{
    position: relative;
    text-align: left;
}

.right-context table.radars-header th.counterfield{
    position: relative;
    text-align: left;
}

.right-context table.radars-header th.counterfield #radarcounter{
    padding-left: 10px;

}

.right-context table.radars-header th.counterfield  .ufilterbutton{
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;
    padding: 1px 10px;
    margin: 3px 3px;
    background-color: white;
    color: #898989;
    clip-path: var(--clip_whitelink);
    z-index: 1;
    line-height: 16px;
}

.right-context table.radars-header th.counterfield  .ufilterbutton.active{

    cursor: pointer;
    color: white;
}

.right-context table.radars-header th.counterfield  .ufilterbutton.active:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;

    clip-path: var(--clip_whitelink);
    z-index: -1;
    animation: highlited 1000ms linear infinite;
}

.right-context table.radars-header th.counterfield  .ufilterbutton.active:hover {
    animation: blink 100ms linear 2;
}

.right-context table.radars-header th.searchfield:before{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    width: 20px;
    background-image: url(ico/ico_search-30.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px;
    filter: invert(1);

}

.right-context table.radars-header th.searchfield input#radsearch{
    width: 100px;
    color: black;
    margin: 0px 22px 0px 0px;
    text-align: left;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 20px;
    font-size: 12px;
    text-transform: none;
    float: right;
    font-family: var(--fontFaimly_button);
    line-height: 18px;
    text-transform: uppercase;
    background-image:
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}

.right-context table.radars-header th.closefield{
    width: 30px;
    position: relative;
    text-align: right;
}

.right-context table.radars-header th.closefield .close{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 7px;
    right: 5px;
    background: black url(ico/close-window-16.png) center no-repeat;
}

.right-context .radars{
    position: absolute;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;
    padding-top: 10px;
}
.right-context .radars .radar{
    position: relative;
    left:0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    border-spacing: 0px;
    width: 100%;
}
.right-context .radars .radar .radarelemt{
    position: absolute;
    left: 0px;
    right: 0px;
    height: 20px;
    color: rgb(255,255,255);
    line-height: 20px;
    cursor: pointer;
    transition: top 0.2s;
}


.right-context .radars .radar .radarelemt:hover > .subtext {
    display: block;
}


.right-context .radars .radar .radarelemt.hidden {
    display: none;
}

.right-context .radars .radar .radarelemt.own_station {
    color: rgb(100,255,255);
}

.right-context .radars .radar .radarelemt.ally_station {
    color: rgb(163,210,174);
}

.right-context .radars .radar .radarelemt.satellite.own {
    color: rgb(100,255,255);
}


.right-context .radars .radar .radarelemt.enemy_station,
.right-context .radars .radar .radarelemt.neutral_station,
.right-context .radars .radar .radarelemt.enemy_player_base,
.right-context .radars .radar .radarelemt.enemy_player_fleetship,
.right-context .radars .radar .radarelemt.enemy-object{
    color: rgb(255,179,0);
}


.right-context .radars .radar .radarelemt.this_debris,
.right-context .radars .radar .radarelemt.this_cswreck,
.right-context .radars .radar .radarelemt.this_rescuepod,
.right-context .radars .radar .radarelemt.this_basemodule,
.right-context .radars .radar .radarelemt.this_container,
.right-context .radars .radar .radarelemt.this_corpse,
.right-context .radars .radar .radarelemt.this_salvagable,
.right-context .radars .radar .radarelemt.this_resourcecontainer{
    color: rgb(100,255,255);
}

.right-context .radars .radar .radarelemt.enemy_debris,
.right-context .radars .radar .radarelemt.enemy_cswreck,
.right-context .radars .radar .radarelemt.enemy_rescuepod,
.right-context .radars .radar .radarelemt.enemy_basemodule,
.right-context .radars .radar .radarelemt.enemy_container,
.right-context .radars .radar .radarelemt.enemy_corpse,
.right-context .radars .radar .radarelemt.enemy_salvagable,
.right-context .radars .radar .radarelemt.enemy_resourcecontainer{
    color: rgb(255,179,0);
}

.right-context .radars .radar .radarelemt.enemy_player_base.ai {
    color: rgb(255,255,255);
}

.right-context .radars .radar .radarelemt.zone_player_base {
    color: rgb(163,210,174);
}

.right-context .radars .radar .radarelemt.this_player_base {
    color: rgb(100,255,255);
}

.right-context .radars .radar .radarelemt.borehole.own {
    color: rgb(100,255,255);
}

.right-context .radars .radar .radarelemt.this_player_fleetship {
    color: rgb(100,255,255);
}

.right-context .radars .radar .radarelemt.zone_player_fleetship {
    color: rgb(163,210,174);
}

.right-context .radars .radar .radarelemt.npcs_group,
.right-context .radars .radar .radarelemt.npc{
    color: rgb(255,80,80);
}


.right-context .radars .radar .radarelemt:hover{
    background-color: rgba(255,255,255,0.1);


}
.right-context .radars .radar .radarelemt .dis{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    text-align: right;
    border-right: 1px solid rgba(255,255,255,.2);
    width: 80px;
    padding-right: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-transform: none;
}
.right-context .radars .radar .radarelemt .icon{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 80px;
    width: 20px;
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.right-context .radars .radar .radarelemt .icon .thint{
    top: -3px;
    right: 14px;
    width: auto;

}


.right-context .radars .radar .radarelemt .name{
    text-align: left;
    position: absolute;
    top: 0px;
    left: 100px;
    overflow: hidden;
    text-transform: uppercase;
    bottom: 0px;
    padding: 0px 5px 0px 5px;
}

.right-context .radars .radar .radarelemt.site .name,
.right-context .radars .radar .radarelemt.site .dis{
    color: #f9df10;
}

.right-context .radars .radar .radarelemt.locked .name{
    color: black;
    background-color: rgb(255,80,80);
    font-family: var(--fontFaimly_button);
}

.right-context .radars .radar .radarelemt.engaged .name{
    padding: 0px 20px 0px 5px;
}


.right-context .radars .radar .radarelemt.engaged .name:after{
    content: '';
    position: absolute;
    width: 20px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: url('ico/warning-7-16.png');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    box-sizing: border-box;

}










.right-context .right-context-berths {
    position: relative;
    width: 300px;
    border-spacing: 0px;
}
.right-context .right-context-berths .berthedship {
    position: relative;
    background-color: rgb(255,255,255);
    height: 80px;
    margin: 5px 0px 0px 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    color: black;
    cursor: pointer;
}
.right-context .right-context-berths .berthedship:hover {
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-berths .berthedship .img{
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    width: 98px;
    background-size: contain;
    filter: invert(1);
}
.right-context .right-context-berths .berthedship .name{
    position: absolute;
    top: 10px;
    left: 115px;
    right: 5px;
    height: 16px;
    color: black;
    font-size: 21px;
    text-transform: uppercase;
    line-height: 16px;
    font-family: var(--fontFaimly_header);
    overflow: hidden;
}
.right-context .right-context-berths .berthedship .type{
    position: absolute;
    top: 30px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .type:before {
    content: 'Type:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}
.right-context .right-context-berths .berthedship .crew{
    position: absolute;
    top: 44px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .crew:before {
    content: 'Crew:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}
.right-context .right-context-berths .berthedship .cargo{
    position: absolute;
    top: 58px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .cargo:before {
    content: 'Cargo:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}


.right-context .right-context-berths .berthedship .storage{
    position: absolute;
    top: 44px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .storage:before {
    content: 'Storage:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}
.right-context .right-context-berths .berthedship .drilling_speed{
    position: absolute;
    top: 58px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .drilling_speed:before {
    content: 'Dilling:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}
.right-context .right-context-berths .berthedship .quarters{
    position: absolute;
    top: 58px;
    left: 115px;
    height: 16px;
    font-size: 10px;
    right: 5px;
    line-height: 16px;
    padding-left: 80px;
    text-transform: uppercase;
}
.right-context .right-context-berths .berthedship .quarters:before {
    content: 'Quarters:';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    line-height: 16px;
    width: 80px;
}



.right-context .right-context-signals .base_signals {
    position: absolute;
    top: calc(50vh - 280px);
    right: calc(100% + 25px);
    height: 540px;
    width: calc(100vw - 360px - 40px);
    text-align: center;
    z-index: 9998;
}


.right-context .right-context-salvage{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}



.right-context .right-context-salvage .base_salvage {
    position: absolute;
    top: calc(50vh - 330px);
    right: calc(50vw - 480px);
    height: 600px;
    width: 960px;
    text-align: center;
    z-index: 999999998;

}

.right-context .right-context-salvage .base_salvage:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_right_context);
    z-index: -1;
    background-image: linear-gradient(rgb(10 16 31 / 96%) 0%, rgb(2 2 21 / 28%) 100%),url(./salvages/0.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;

}

.right-context .right-context-salvage .base_salvage .salvagelist {
    position: absolute;
    top: 45px;
    right: 10px;
    bottom: 10px;
    left: 10px;
}

.right-context .right-context-salvage .base_salvage .bdfl {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.right-context .right-context-salvage .base_salvage .bdfl .name {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    font-size: 26px;
    color: white;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}
.right-context .right-context-salvage .base_salvage .bdfl .description {
    position: absolute;
    top: 40px;
    right: 0px;
    left: 0px;
    font-size: 16px;
    color: #ffbc00;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

.right-context .right-context-salvage .base_salvage .bdfl .dtitle  {
    position: absolute;
    bottom: 165px;
    left: calc(50% - 75px);
    width: 150px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    color: rgba(200,200,200,0.5);
    animation: highlited 1000ms linear infinite;
}

.right-context .right-context-salvage .base_salvage .bdfl .time_left  {
    position: absolute;
    left: 10px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    color: white;
    font-size: 12px;
    text-decoration: none;
    text-shadow: none;
    bottom: 105px;
    text-align: center;
}

.right-context .right-context-salvage .base_salvage .bdfl .time_left_bar  {
    position: absolute;
    bottom: 130px;
    width: 80%;
    left: 10%;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgba(50,50,50,.8);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

.right-context .right-context-salvage .base_salvage .bdfl .time_left_bar .bar  {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-color: var(--hud_construction_bar_color);
}

.right-context .right-context-salvage .base_salvage .bdfl .results  {
    position: absolute;
    top: 75px;
    bottom: 205px;
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    overflow-y: scroll;

    overflow-x: hidden;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .sresults  {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);

}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable  {
    position: relative;
    height: 40px;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .stitle  {
    position: absolute;
    right: calc(100% - 70px);
    top: 50%;
    transform: translateY(-50%);
    text-transform: uppercase;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .qty  {
    position: absolute;
    right: 47%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .mu  {
    position: absolute;
    left: calc(53% + 10px);
    ;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .priority  {
    position: absolute;
    left: calc(54% + 45px);
    top: 50%;
    transform: translateY(-50%);
    color: white;
}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .sactions  {
    position: absolute;
    left: calc(55% + 70px);
    top: 0px;
    bottom: 0px;
    white-space: nowrap;

}

.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .sactions .ss_pick,
.right-context .right-context-salvage .base_salvage .bdfl .results .salvagable .sactions .ss_leave{
    line-height: 20px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    font-size: 12px;
    text-align: center;
    padding: 0px 13px;
    display: inline-block;
    position: relative;
    margin: 0px 3px;
    clip-path: unset;
}






.right-context .right-context-salvage .base_salvage .bdfl .actions  {
    position: absolute;
    bottom: 50px;
    left: 10px;
    right: 10px;
    box-sizing: border-box;
    text-align: center;
}

.right-context .right-context-salvage .base_salvage .bdfl .actions button {
    margin: 5px;
}




.right-context .right-context-salvage .base_salvage .salvagelist .info {
    top: calc(50% - 40px);
    transform: translateY(-50%);
    padding: 0px;
}

.right-context .right-context-salvage .base_salvage .salvagelist .info span {
    font-size: 14px;
}

.right-context .right-context-salvage .base_salvage .salvagelist .info p {
    font-size: 12px;
    padding: 3px 0px;
    margin: 0px;
}

/* */


.right-context .right-context-signals .base_signals:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_right_context);
    z-index: -1;
    /*background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);*/
    background-position: -10px 0px;
    background-size: cover;
}

.right-context .right-context-signals .base_signals .signallist {
    position: absolute;
    top: 40px;
    left: 10px;
    bottom: 0px;
    width: calc(100% - 20px);
}

.right-context .right-context-signals .base_signals .signallist .info {
    top: calc(50% - 40px);
    transform: translateY(-50%);
    padding: 0px;
}

.right-context .right-context-signals .base_signals .signallist .info span {
    font-size: 14px;
}

.right-context .right-context-signals .base_signals .signallist .info p {
    font-size: 12px;
    padding: 3px 0px;
    margin: 0px;
}

.right-context .right-context-signals .base_signals.completed {
    position: absolute;
    top: calc(50vh - 345px - 20px - 30px);

}


.right-context .right-context-signals .base_signals .bdfl  {
    position: relative;
    height: 430px;
    width: 280px;

    margin: 5px 5px 5px 5px;
    box-sizing: border-box;
    clear: both;
    color: white;
    display: inline-block;
    z-index: 1;
}

.right-context .right-context-signals .base_signals .bdfl:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(24 34 61);
    box-shadow: 0px 0px 44px #242e4b inset;
    clip-path: var(--clip_antenna_bdfl);
    z-index: -1;
}

.right-context .right-context-signals .base_signals .bdfl.downloaded:before {
    box-shadow: 0px 0px 44px #242e4b inset;
}

.right-context .right-context-signals .base_signals .bdfl.downloaded:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    clip-path: var(--clip_antenna_bdfl);
    z-index: -1;
    background-image: url(tape.png);
    background-size: 110px;
    background-repeat: no-repeat;
    background-position: center 35px;
    filter: invert(1) drop-shadow(0px 0px 30px white) drop-shadow(0px 0px 10px rgba(0, 112, 202, 0.5));
    animation: glowing-animation 5s infinite;
}


.right-context .right-context-signals .base_signals .bdfl .quality  {
    position: absolute;
    top: 73px;
    left: calc(50% - 64px);
    width: 128px;
    box-sizing: border-box;
    height: 64px;
    overflow: hidden;
    background-position: center;
}

.right-context .right-context-signals .base_signals .bdfl .quality canvas {
    position: absolute;
    left: calc(50% - 64px);
    top: calc(50% - 64px);

}

.right-context .right-context-signals .base_signals .bdfl.downloaded .quality canvas {
    filter: invert(1) brightness(1.5);
}


.right-context .right-context-signals .base_signals .bdfl .signal  {
    position: absolute;
    top: 40px;
    left: calc(50% - 90px);
    width: 180px;
    box-sizing: border-box;
    height: 86px;
    background-position: center;
}

.right-context .right-context-signals .base_signals .bdfl .signal canvas {
    position: absolute;
    left: calc(50% - 90px);
    top: calc(50% - 43px);
    filter: invert(0) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 2px rgba(0, 112, 202, 0.5));
}


.right-context .right-context-signals .base_signals .bdfl .base  {
    position: absolute;
    top: 10px;
    left: calc(50% - 80px);
    width: 160px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
}



.right-context .right-context-signals .base_signals .bdfl .dtitle  {
    position: absolute;
    top: 214px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow: hidden;
    font-size: 13px;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    color: white;
    animation: highlited 500ms linear infinite;
}

.right-context .right-context-signals .base_signals .bdfl.downloaded .dtitle  {
    display: none;

}

.right-context .right-context-signals .base_signals .bdfl .name  {
    position: absolute;
    top: 148px;
    left: 25px;
    right: 25px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;

    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    transform: translateY(-50%);
}

.right-context .right-context-signals .base_signals .bdfl .description  {
    position: absolute;
    top: 167px;
    left: 10px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
}

.right-context .right-context-signals .base_signals .bdfl .blueprints  {
    position: absolute;
    top: 204px;
    left: 20px;
    right: 15px;
    bottom: 0px;
    box-sizing: border-box;
    font-size: 10px;

    text-transform: uppercase;
    text-align: left;
}

.right-context .right-context-signals .base_signals .bdfl .blueprints .info  {

    text-shadow: none;
    font-family: var(--fontFaimly_button);
    line-height: 13px;
}

.right-context .right-context-signals .base_signals .bdfl .blueprint  {
    position: relative;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    font-size: 12px;
    color: #b9dbff;
    text-transform: uppercase;
    text-align: left;
    margin: 3px 0px;
    cursor: pointer;
}

body.pressedCTRL .right-context .right-context-signals .base_signals .bdfl .blueprint:before {
    background-color: rgb(28 43 83);
    cursor: pointer;
    animation: none; /* Zruší animaci */
    box-shadow: 0px 0px 40px var(--highlitedPRESSEDboxShadow_color) inset;
    transition: box-shadow 300ms ease-out;
}

body.pressedCTRL .right-context .right-context-signals .base_signals .bdfl .blueprint:before:hover{
    animation: highlitedPRESSED 800ms ease infinite;
}


.right-context .right-context-signals .base_signals .bdfl .blueprint:hover > .subtext {
    display: block;
}

.right-context .right-context-signals .base_signals .bdfl .blueprint .subtext {
    right: calc(50% - 40px);
    bottom: calc(50% - 5px);
}

.right-context .right-context-signals .base_signals .bdfl .blueprint:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

.right-context .right-context-signals .base_signals .bdfl .blueprint:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}


.right-context .right-context-signals .base_signals .bdfl .blueprint:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}
.right-context .right-context-signals .base_signals .bdfl .blueprint .thint  {
    top: 3px;
    right: 35px;
}
.right-context .right-context-signals .base_signals .bdfl .blueprint:hover .thint  {
    visibility: hidden;
}

.right-context .right-context-signals .base_signals .bdfl .blueprint.disabled  {
    color: var(--border-button-color-unactive);
}

.right-context .right-context-signals .base_signals .bdfl .blueprint.disabled:before{
    background-color: rgb(26 26 26 / 80%);
}

.right-context .right-context-signals .base_signals .bdfl .blueprint.disabled:after{
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);
}

.right-context .right-context-signals .base_signals .bdfl .blueprint.disabled:hover{
    color: var(--border-button-color-unactive);
    animation: initial;
}


.right-context .right-context-signals .base_signals .bdfl .blueprint .name {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    right: 70px;
    text-align: left;
    overflow: hidden;
    line-height: 12px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
}



.right-context .right-context-signals .base_signals .bdfl .blueprint .cycles {
    position: absolute;
    top: 50%;
    right: 15px;
    text-align: right;
    font-size: 12px;
    text-shadow: none;
    text-transform: none;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;
    transform: translateY(-50%);
}

.right-context .right-context-signals .base_signals .bdfl .blueprint .cycles .bcycles {
    position: relative;
    display: inline;
    color: #f1c13a;
    padding-left: 4px;
}

.right-context .right-context-signals .base_signals .bdfl .blueprint .actions {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}

.right-context .right-context-signals .base_signals .bdfl.downloaded .blueprint .actions .save_blueprint {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 30px;
    left: 0px;
    overflow: hidden;
    background-image: url(ico/save_blueprint.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    height: unset;
    filter: invert(1);
}

.right-context .right-context-signals .base_signals .bdfl.downloaded .blueprint .actions .save_blueprint:before {
    display: none;
}
.right-context .right-context-signals .base_signals .bdfl.downloaded .forget {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    cursor: pointer;
    top: 10px;
    right: 10px;
    background: transparent url(ico/close-window-16.png) center no-repeat;


}

.right-context .right-context-signals .base_signals .bdfl.downloaded .forget:hover {
    filter: invert(0);
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-signals .base_signals .bdfl .size_mb  {
    position: absolute;
    top: 286px;
    left: 10px;
    right: 5px;
    font-size: 14px;
    text-align: center;



}



.right-context .right-context-signals .base_signals .bdfl .time_left  {
    position: absolute;
    top: 250px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    color: white;
    font-size: 12px;


    text-decoration: none;
    text-shadow: none;
    text-align: center;
}

.right-context .right-context-signals .base_signals .bdfl .time_left_bar  {
    position: absolute;
    top: 237px;
    width: 65%;
    left: 50%;
    transform: translateX(-50%);
    height: 7px;
    box-sizing: border-box;
    background-color: rgb(40 62 95 / 98%);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

.right-context .right-context-signals .base_signals .bdfl .time_left_bar .bar  {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
}

.right-context .right-context-signals .base_signals .bdfl .actions {
    position: absolute;

    bottom: 40px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}



.right-context .right-context-signals .base_signals .bdfl.downloaded .actions button  {
    color: white;
}
.right-context .right-context-signals .base_signals .bdfl.downloaded .actions button:before  {
    background-color: black;
}

.right-context .right-context-signals .base_signals .bdfl .actions button .thint  {
    top: 5px;
}

.right-context .right-context-signals{
    position: absolute;
    top: 35px;
    right: 0px;
    bottom: 0px;
    left:0px;
}

.right-context .right-context-signals > .close{

    top: -25px;
    right: 10px;
}

.right-context .right-context-signals .signals{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}


.right-context .right-context-signals .signals .info {
    position: relative;
    padding: 80px 50px;
    color: rgb(200,200,200);

    text-align: center;
    text-transform: uppercase;
}


.right-context .right-context-signals .signals .dfl {
    position: relative;
    height: 220px;
    margin: 10px 0px 0px 0px;
    color: white;

}

.right-context .right-context-signals .signals .dfl .thint {
    right: 39px;
    top: 7px;
}




.right-context .right-context-signals .signals .dfl .signal_remarks {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 4px 0px 0px 4px;
    position: absolute;
    left: 21px;
    top: 75px;
    height: 136px;
    overflow: hidden;
    right: 5px;
    z-index: 1;
}
.right-context .right-context-signals .signals .dfl .signal_remarks:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    z-index: -1;

}

.right-context .right-context-signals .signals .dfl .signalc{
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    left: 1px;
    filter: invert(0) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 2px rgba(0, 112, 202, 0.5));
}



.right-context .right-context-signals .signals .dfl .name {
    position: absolute;
    top: 1px;
    left: 5px;
    font-family: var(--fontFaimly_header);
    font-size: 15px;
    width: 196px;
    right: 50px;
    text-transform: uppercase;
}

.right-context .right-context-signals .signals .dfl .name span {
    text-transform: uppercase;


    font-size: 12px;
    display: block;
    padding: 0px 0px 0px;
}

.right-context .right-context-signals .signals .dfl .signal {
    position: absolute;
    top: 0px;
    left: 0px;


    font-size: 12px;
    width: 80px;
    height: 80px;


}

.right-context .right-context-signals .signals .dfl .signal canvas {
    position: absolute;
    top: -29px;
    left: -14px;
}


.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain {
    display: inline-block;
    position: relative;
    background-color: transparent;
    white-space: nowrap;
    width: calc(100% / 6);
    overflow: hidden;
    height: 64px;
    margin: 0px;
    box-sizing: border-box;
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain canvas {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 105px);
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain.unknown {

}




.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain span {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    line-height: 64px;
    padding: 0px;
    font-size: 10px;

    text-transform: uppercase;
    text-shadow: none;

    white-space: nowrap;
    z-index: 1;
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain span span {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    padding: 0px 6px;
    text-align: right;
    transition: left 1.5s linear;
    color: rgba(0,0,0,0);
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain.known:hover {
    background-color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;

}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_contain.known:hover span span {
    left: calc(-100% + 6px); /* Posun o šířku elementu minus padding */
    color: rgba(0,0,0,1);
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_remark {
    display: block;
    position: relative;
    background-color: var(--hud_invalid_background);
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    height: 14px;
    margin-bottom: 3px;
    z-index: 1;
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_remark span {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    line-height: 14px;
    padding: 0px;
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;
    /*font-family: var(--fontFaimly_button);*/
    white-space: nowrap;

}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_remark span span {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    padding: 0px 6px;
    text-align: right;
    transition: 1.5s linear;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_remark:hover {
    background-color: rgba(255,255,255,0.8);
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-signals .signals .dfl .signal_remarks .signal_remark:hover span span {
    left: -100%;
}



.right-context .right-context-signals .signals .dfl .size_mb {

    position: absolute;
    top: 4px;
    right: 42px;


    font-size: 12px;



}
.right-context .right-context-signals .signals .dfl .time_download {
    position: absolute;
    top: 20px;
    right: 42px;


    font-size: 12px;


}



.right-context .right-context-signals .signals .dfl .download_dataflow {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    font-size: 12px;
    line-height: 18px;
    display: block;
    cursor: pointer;
}
.right-context .right-context-signals .signals .dfl .download_dataflow:hover > .subtext {
    display: block;
}




.right-context .right-context-signals .signals .dfl .download_dataflow .sicon {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    background-image: url(ico/save_blueprint.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    z-index: -1;
    filter: invert(1);
}

.right-context .right-context-signals .signals .dfl .download_dataflow:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

.right-context .right-context-signals .signals .dfl .download_dataflow:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-signals .signals .dfl .download_dataflow:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}



.right-context .right-context-fleetships{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}

.right-context .right-context-fleetships:before {
    content: "";
    position: absolute;
    display: block;
    width: 220px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_right_context);
    z-index: -1;
    background-image:
        linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),
        url('./effects/bckg_glitch.gif');
    background-position: -10px 0px;
    background-size: cover;
}

.right-context .right-context-fleetships .out_fleetships {
    position: absolute;
    top: 150px;
    right: calc(100% - -315px);
    width: 0px;
    text-align: right;
    /*z-index: 9998;*/
    /* transform: translateY(-50%); */
    /* max-height: 80%; */
    /* height: 80%; */
    bottom: 60px;
}

.right-context .right-context-fleetships .out_fleetships .fleet {
    position: relative;
    /* margin-top: 0px; */
    padding-top: 0px;
    width: 0px;
    min-height: 30px;
}


body.pressedCTRL .right-context .right-context-fleetships .out_fleetships .fleet .img,
body.pressedSHIFT .right-context .right-context-fleetships .out_fleetships .fleet .img{
    cursor: pointer;
    animation: none;
    opacity: 1;
}

body.pressedCTRL .right-context .right-context-fleetships .out_fleetships .fleet .img:before,
body.pressedSHIFT .right-context .right-context-fleetships .out_fleetships .fleet .img:before{
    background-color: rgb(28 43 83);
    animation: none;
    box-shadow: 0px 0px 5px var(--highlitedPRESSEDboxShadow_color) inset;
    transition: box-shadow 300ms ease-out;
}

body.pressedCTRL .right-context .right-context-fleetships .out_fleetships .fleet .img:hover:before,
body.pressedSHIFT .right-context .right-context-fleetships .out_fleetships .fleet .img:hover:before{
    animation: highlitedPRESSEDButton 800ms ease infinite;
}

body.pressedCTRL .right-context .right-context-fleetships .out_fleetships:hover .fleet .img,
body.pressedSHIFT .right-context .right-context-fleetships .out_fleetships:hover .fleet .img{
    animation:none;
}
.right-context .right-context-fleetships .out_fleetships .fleet .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    filter: opacity(0.8);
    background-color: var(--background-command-fleets-effect-color);
}

.right-context .right-context-fleetships .out_fleetships .fleet .img:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size:

        calc(100% - 4px) 1px,

        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        36% 3px,
        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,
        bottom center,
        bottom 1px center;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .img:hover > .subtext {
    display: block;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .img .subtext {
    position: absolute;
    display: none;
    right: 25px;
    width: 110px;
    font-size: 12px;
    background-color: var(--subtext_color-background);
    padding: 6px 8px;
    box-sizing: border-box;
    z-index: 1000;
    line-height: initial;
    text-align: left;
    color: var(--subtext_color);
    bottom: calc(100% - 11px);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .img .subtext .fname {
    text-transform: uppercase;


    font-family: var(--fontFaimly_button);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .img .subtext:before {
    content: "";
    display: block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    bottom: 0px;
    right: -5px;
    border-left: 5px solid var(--subtext_color-background);

}



.right-context .right-context-fleetships  .out_fleetships .fleet.hidden {
    display: none;
}



.right-context .right-context-fleetships  .out_fleetships .fleet .img {
    position: absolute;
    top: 0px;
    left: 60px;
    width: 20px;
    height: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    cursor: pointer;
}

.right-context .right-context-fleetships  .out_fleetships .fleet.a .img:before {
    background-image: url(fleets/a.png);
}
.right-context .right-context-fleetships  .out_fleetships .fleet.b .img:before {
    background-image: url(fleets/b.png);
}
.right-context .right-context-fleetships  .out_fleetships .fleet.c .img:before {
    background-image: url(fleets/c.png);
}
.right-context .right-context-fleetships  .out_fleetships .fleet.d .img:before {
    background-image: url(fleets/d.png);
}
.right-context .right-context-fleetships  .out_fleetships .fleet.unassigned .img:before {
    background-image: url(fleets/all.png);
}


body:not(.pressedCTRL):not(.pressedSHIFT) .right-context .right-context-fleetships  .out_fleetships .fleet .img:hover:after {
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-hover) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-hover) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%);
}


.right-context .right-context-fleetships  .out_fleetships .fleet .fmessage {
    position: relative;

    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 28px 8px 10px;
    text-align: center;


}

.right-context .right-context-fleetships  .out_fleetships .fleet .fmessage.empty {
    display: none;
}







.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons{
    position: absolute;
    top: -10px;
    right: 4px;
    width: 114px;
    display: grid;
    box-sizing: border-box;
    grid-gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(20px, 20px));
    direction: rtl;
    display: none;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command{
    position: relative;
    height: 20px;
    cursor: pointer;
    background-color: transparent;
    box-sizing: border-box;


}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: black;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.unactive{
    opacity: 0.1;
    cursor: default;
}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.dock:before{
    background-image: url('ico/ico_dock2_128.png');
}

.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.retreat:before{
    background-image: url('ico/ico_retreat_128.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.regroup:before{
    background-image: url('ico/regroup_225.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.release:before{
    background-image: url('ico/ico_detach2_128.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .commandbuttons .command.approach:before{
    background-image: url('ico/controls_arrive.png');
}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships {
    position: relative;
    width: 0px;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship {
    position: relative;
    height: 50px;
    width: 50px;

    margin: 0px 0px 16px;
    display: block;
    opacity: 0.35;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s linear;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship.selected {
    opacity: 1;


}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:hover {
    opacity: 1;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:hover {



}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right:-5px;
    top: -5px;
    bottom: -5px;




}




.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .pimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_fleetship);

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .pimg .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: -15px center;
    width:  unset;
    height: unset;
    filter: unset;
    display: none;


}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .simg {
    position: absolute;
    top: 50%;
    left: -37px;
    /* right: 0px; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* bottom: 0px; */
    height: 24px;
    width: 26px;
    transform: translateY(-50%);
    filter: grayscale(1) brightness(1.8);

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship.selected .simg {
    filter: grayscale(1) brightness(1.8) drop-shadow(0px 0px 8px #148997);

}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:hover .pimg .img {

    animation: crt 5000ms linear infinite;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .name {
    display: none;
    position: absolute;
    top: 29px;
    left: 5px;
    color: #bdbdbd;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .distance {
    display: none;
    position: absolute;
    top: calc(50% - 0px);
    right: calc(100% + 8px);
    transform: translateY(-50%);
    color: #b7b6b6;
    font-size: 10px;
    text-transform: none;
    text-align: right;
    white-space: nowrap;
    font-family: var(--fontFaimly_button);
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
    height: 15px;
}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .class {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    display: none;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons{
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
}


.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons .command{
    position: relative;
    height: 20px;
    width: 20px;
    background-color:unset;
    cursor: pointer;
    box-sizing: border-box;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons .command.unactive{
    background-color: unset;
    opacity: 0.2;
    cursor: default;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .flybuttons .command.unactive:before{
    color: gray;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .flybuttons .command.approach:before{
    background-image: url('ico/controls_arrive.png');
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: unset;
    bottom: unset;
    display: grid;
    box-sizing: border-box;
    grid-gap: 2px;
    width: unset;
    direction: ltr;
    grid-template-columns: repeat(2, minmax(20px, 20px));
    display: none;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons .command{
    position: relative;
    height: 20px;
    background-color:unset;
    cursor: pointer;

    box-sizing: border-box;

}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons .command.unactive{
    background-color: unset;
    opacity: 0.2;
    cursor: default;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .commandbuttons .command.unactive:before{
    color: gray;
}




.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons{
    position: absolute;
    top: 24px;
    right: 5px;
    width: 75px;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(4, minmax(11px, 1fr));
    display: none;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:hover .fleetbuttons {
    /*display: grid;*/
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship:hover .state {
    display: none;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn{
    position: relative;
    height: 16px;
    cursor: pointer;

    box-sizing: border-box;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn:before{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.3) grayscale(1);
    opacity: 0.2;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn:hover{
    animation: highlited 1000ms linear infinite;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.active:before{
    opacity: 1;
    filter: unset;
}




.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.a:before{
    background-image: url('fleets/a.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.b:before{
    background-image: url('fleets/b.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.c:before{
    background-image: url('fleets/c.png');
}
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.d:before{
    background-image: url('fleets/d.png');
}


.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health{
    position: absolute;
    top: calc(50% - 6px);
    height: 4px;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health:hover .counter {
    display: block;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health .counter,
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fuel .counter,
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo .weapf .counter{
    display: none;
    position: absolute;
    top: -4px;
    right: calc(100% + 5px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: var(--subtext_color-background);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    z-index: 1;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health .counter:before,
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fuel .counter:before,
.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo .weapf .counter:before{
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid var(--subtext_color-background);
    position: absolute;
    top: 0px;
    right: -6px;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health .bar.yellow{
    background-color: rgb(255,255,0);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .health .bar.red{
    background-color: rgb(255,0,0);
}


.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fuel{
    position: absolute;
    top: 50%;
    height: 4px;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
    box-sizing: border-box;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fuel:hover .counter {
    display: block;
}





.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .fuel .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo{
    position: absolute;
    top: calc(50% + 6px);
    height: 4px;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo .weapf{
    position: relative;
    width: 100%;
    height: 4px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_ammo_barbckg_color);
    box-sizing: border-box;

}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo .weapf:hover .counter {
    display: block;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .ammo .weapf .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_ammo_bar_color);
}



.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .state {
    position: absolute;
    top: 20px;
    right: 5px;
    color: rgb(188,136,0);
    font-size: 12px;
    left: 5px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    text-align: right;
    line-height: 13px;
    display: none;
}

.right-context .right-context-fleetships  .out_fleetships .fleet .ships .fleetship .crew {
    display: none;
}































.right-context .right-context-fleetships  .fleetships {
    position: absolute;
    bottom: 0px;
    right: calc(100% - 0px);
    width: calc(210px);
    text-align: left;
    z-index: 9998;

    top: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
}



.right-context .right-context-fleetships  .fleetships .fleet
{
    position: relative;
    margin-top: 0px;
    padding-top: 0px;
    left: 40px;
    width: calc(100% - 40px);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-top: 25px;
    padding-top: 8px;
    min-height: 8px;
}

/*
.right-context .right-context-fleetships  .fleetships .fleet:before,
.right-context .right-context-fleetships  .fleetships .fleetdock:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);

}*/

.right-context .right-context-fleetships  .fleetships .fleet .img {
    position: absolute;
    top: -0px;
    left: -42px;
    width: 40px;
    height: 40px;
    background-size: 66%;
    background-repeat: no-repeat;

    filter: grayscale(1) brightness(1);
    background-position: center;
    opacity: 0.2;
}

.right-context .right-context-fleetships  .fleetships .fleet .ffname,
.right-context .right-context-fleetships  .fleetships .fleetdock .ffname {
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 0px 8px;
    background-color: black;
    box-sizing: border-box;
    width: calc(100% - 5px);
    margin: 5px 0px 0px;

}

.right-context .right-context-fleetships  .fleetships .fleet .fmessage,
.right-context .right-context-fleetships  .fleetships .fleetdock .fmessage {
    position: relative;

    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 10px 8px 0px;
    text-align: center;


}

.right-context .right-context-fleetships  .fleetships .fleet .fmessage.empty,
.right-context .right-context-fleetships  .fleetships .fleetdock .fmessage.empty {
    display: none;
}



.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons{
    position: absolute;
    top: -10px;

    width: 114px;
    display: grid;
    box-sizing: border-box;
    grid-gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(20px, 20px));
    direction: rtl;
    display: none;
}

.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command{
    position: relative;
    height: 20px;
    cursor: pointer;
    background-color: transparent;
    box-sizing: border-box;
    background-color: black;

}
.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command:not(.unactive):hover,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: black;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;

}
.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.unactive,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.unactive{

    cursor: default;
}
.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.dock:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.dock:before{
    background-image: url('ico/ico_dock2_128.png');
}

.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.approach:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.approach:before{
    background-image: url('ico/controls_arrive.png');
}

.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.retreat:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.retreat:before{
    background-image: url('ico/ico_retreat_128.png');
}
.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.regroup:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.regroup:before{
    background-image: url('ico/regroup_225.png');
}
.right-context .right-context-fleetships  .fleetships .fleet .commandbuttons .command.release:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .commandbuttons .command.release:before{
    background-image: url('ico/ico_detach2_128.png');
}




.right-context .right-context-fleetships  .fleetships .fleet .ships {
    position: relative;
    margin-left: 5px;
    margin-bottom: 5px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship {
    position: relative;
    height: 100px;
    margin: 10px 0px 0px 0px;
}




.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(80,80,80);
    top: 25px;
    left: 0px;
    right: 5px;
    height: 61px;
    background-position: 97px 0px;
    background-repeat: no-repeat;
    background-size: 88px;
    clip-path: var(--clip_fleetship);
}




.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .pimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_fleetship);

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .pimg .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: -15px center;
    width:  unset;
    height: unset;
    filter: unset;
    display: none;


}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .simg {
    position: absolute;
    top: 0px;
    right: 27px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position:  center bottom;
    width:  130px;
    bottom: 20px;
    filter: unset;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship:hover .pimg .img {

    animation: crt 5000ms linear infinite;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .name {
    position: absolute;
    top: 29px;
    left: 5px;
    color: #bdbdbd;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .distance {
    position: absolute;
    top: 3px;
    right: 23px;
    color: #8b8b8b;
    font-size: 12px;
    text-transform: none;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .class {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    display: none;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons{
    position: absolute;
    top: 3px;
    right: 5px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons{
    position: absolute;
    top: 0px;
    right: 4px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons .command{
    position: relative;
    height: 20px;
    width: 20px;
    background-color:unset;
    cursor: pointer;
    box-sizing: border-box;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons .command.unactive{
    background-color: unset;
    opacity: 0.2;
    cursor: default;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .flybuttons .command.unactive:before{
    color: gray;
}

.right-context .right-context-fleetships  .fleetships .fleet .flybuttons .command.approach:before{
    background-image: url('ico/controls_arrive.png');
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons{
    position: absolute;
    top: 0px;
    left: 0px;
    right: unset;
    bottom: unset;
    display: grid;
    box-sizing: border-box;
    grid-gap: 2px;
    width: unset;
    direction: ltr;
    grid-template-columns: repeat(4, minmax(20px, 20px));


}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons .command{
    position: relative;
    height: 20px;
    background-color:unset;
    cursor: pointer;

    box-sizing: border-box;

}



.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons .command.unactive{
    background-color: unset;
    opacity: 0.2;
    cursor: default;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .commandbuttons .command.unactive:before{
    color: gray;
}




.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons{
    position: absolute;
    top: 75px;
    right: 5px;
    width: 75px;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(4, minmax(11px, 1fr));

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn{
    position: relative;
    height: 25px;
    cursor: pointer;

    box-sizing: border-box;

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn:before{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.3) grayscale(1);
    opacity: 0.2;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn:hover{
    animation: highlited 1000ms linear infinite;

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.active:before{
    opacity: 1;
    filter: unset;
}




.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.a:before{
    background-image: url('fleets/a.png');
}
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.b:before{
    background-image: url('fleets/b.png');
}
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.c:before{
    background-image: url('fleets/c.png');
}
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fleetbuttons .fbtn.d:before{
    background-image: url('fleets/d.png');
}


.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health{
    position: absolute;
    top: 79px;
    height: 7px;
    left: 0px;
    width: 71px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health:hover .counter {
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health .counter{
    display: none;
    position: absolute;
    top: -2px;
    left: calc(100% - 10px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(80,80,80,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    z-index: 1;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health .counter:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(80,80,80,1);
    position: absolute;
    top: 0px;
    left: -6px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health .bar.yellow{
    background-color: rgb(255,255,0);
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .health .bar.red{
    background-color: rgb(255,0,0);
}


.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fuel{
    position: absolute;
    top: 89px;
    height: 4px;
    left: 0px;
    right: 95px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
    box-sizing: border-box;

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fuel:hover .counter {
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fuel .counter{
    display: none;
    position: absolute;
    top: -4px;
    right: calc(10px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(80,80,80,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    z-index: 1;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fuel .counter:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(80,80,80,1);
    position: absolute;
    top: 0px;
    left: -6px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .fuel .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
}



.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo{
    position: absolute;
    top: 96px;
    left: 0px;
    right: 95px;


}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo .weapf{
    position: relative;
    width: 100%;
    height: 4px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_ammo_barbckg_color);
    box-sizing: border-box;

}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo .weapf:hover .counter {
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo .weapf .counter{
    display: none;
    position: absolute;
    top: -4px;
    right: calc(10px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(80,80,80,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    z-index: 1;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo .weapf .counter:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(80,80,80,1);
    position: absolute;
    top: 0px;
    left: -6px;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .ammo .weapf .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_ammo_bar_color);
}



.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .state {
    position: absolute;
    bottom: 38px;
    right: 12px;
    color: rgb(188,136,0);
    font-size: 12px;
    width: 127px;
    text-transform: none;
    text-shadow: var(--shadow_textfull);
    text-align: right;
}

.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew {
    position: absolute;
    top: 48px;
    right: unset;
    left: 5px;
    color: white;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(3, minmax(26px, 26px));
}



.right-context .right-context-fleetships  .fleetships .fleetdock {
    position: relative;
    width: 100%;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon{
    position: absolute;
    top: 5px;
    right: 7px;

}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon{
    position: relative;
    height: 18px;
    width: 18px;
    box-sizing: border-box;
    cursor: pointer;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon:hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon:hover > .subtext{
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon:before{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    filter: drop-shadow(0px 0px 8px gold);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon.a:before{
    background-image: url('fleets/a.png');
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon.b:before{
    background-image: url('fleets/b.png');
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon.c:before{
    background-image: url('fleets/c.png');
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fleeticon .ficon.d:before{
    background-image: url('fleets/d.png');
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships {
    position: relative;
    margin-left: 0px;
    margin-bottom: 22px;
    margin-right: 5px;
    padding-top: 5px;
    display: grid;
    box-sizing: border-box;
    grid-gap: 5px 3px;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot {
    position: relative;
    height: 110px;
}



.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot .health{
    position: absolute;
    bottom: 0px;
    height: 7px;
    left: 0px;
    right: 0px;
    background-color:rgb(30,30,30);
    box-sizing: border-box;
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot .fuel{
    position: absolute;
    bottom: -7px;
    height: 4px;
    left: 0px;
    right: 0px;
    background-color:rgb(30,30,30);
    box-sizing: border-box;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship {
    position: relative;
    height: 120px;
    box-shadow: 0px 0px 11px 6px #121212 inset, 0px 0px 11px 6px #152e31 inset;

    background-color: #04232a;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center 19px;
    background-repeat: no-repeat;
    background-size: 37px;
    opacity: 0.08;
    filter: invert(1);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot:after{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(60,60,60);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0.5;
    z-index: -1;
    box-shadow: 0px 0px 11px 6px #121212 inset;
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class1:before{
    background-image: url(ico/ico_class_1_gr.png);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class2:before{
    background-image: url(ico/ico_class_2_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class3:before{
    background-image: url(ico/ico_class_3_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class4:before{
    background-image: url(ico/ico_class_4_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class5:before{
    background-image: url(ico/ico_class_5_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class6:before{
    background-image: url(ico/ico_class_6_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class7:before{
    background-image: url(ico/ico_class_7_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class8:before{
    background-image: url(ico/ico_class_8_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class9:before{
    background-image: url(ico/ico_class_9_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class10:before{
    background-image: url(ico/ico_class_10_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class11:before{
    background-image: url(ico/ico_class_11_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class12:before{
    background-image: url(ico/ico_class_12_gr.png);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetslot.class13:before{
    background-image: url(ico/ico_class_13_gr.png);
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .pimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_dockfleetship);

}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .pimg .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: -15px center;
    width:  unset;
    height: unset;
    filter: unset;
    display: none;


}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .simg {
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    height: 89px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: unset;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship.outside .simg {
    cursor: pointer;
    opacity: 0.8;
    filter: grayscale(0.5);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship.outside .simg:hover {
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .name {
    position: absolute;
    top: 24px;
    left: 5px;
    color: gray;
    font-size: 12px;
    text-transform: uppercase;
    display: none;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .class {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    display: none;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons{
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: unset;
    display: grid;
    box-sizing: border-box;
    grid-gap: 2px;
    width: unset;
    direction: ltr;
    grid-template-columns: repeat(2, minmax(20px, 20px));


}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command{
    position: relative;
    height: 20px;

    cursor: pointer;

    box-sizing: border-box;
    background-color: unset;
}



.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command:before{
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command:hover > .subtext{
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command:not(.unactive):hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command.unactive{
    background-color: unset;

}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .commandbuttons .command.unactive:before{
    color: gray;
    opacity: 0.2;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health{
    position: absolute;
    top: 103px;
    height: 7px;
    left: 0px;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;

}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}





.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health:hover .counter,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fuel:hover .counter,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo .weapf:hover .counter{
    display: block;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health .counter,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fuel .counter,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo .weapf .counter{
    display: none;
    position: absolute;
    top: 1px;
    /* left: 0px; */
    right: calc(90% - 5px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: var(--subtext_color-background);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--subtext_color);
    z-index: 1;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health .counter:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fuel .counter:before,
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo .weapf .counter:before{
    content: "";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 5px solid var(--subtext_color-background);
    position: absolute;
    top: 0px;
    right: -5px;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health .bar.yellow{
    background-color: rgb(255,255,0);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .health .bar.red{
    background-color: rgb(255,0,0);
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fuel{
    position: absolute;
    top: 113px;
    height: 4px;
    left: 0px;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
    box-sizing: border-box;

}





.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .fuel .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo{
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;

}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo .weapf{
    position: relative;
    height: 4px;
    width: 100%;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_ammo_barbckg_color);
    box-sizing: border-box;
}



.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .ammo .weapf .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_ammo_bar_color);
}



.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew {
    position: absolute;
    top: 77px;
    right: 3px;
    left: 3px;
    color: white;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(4, 20px);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot
{
    position: relative;
    text-align: center;
    height: 22px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: none;
    background-position: center bottom;
    background-size: contain;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.outside,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.outside
{
    cursor: unset;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.outside .astronautface,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.outside .astronautface
{
    filter: grayscale(1);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.outside:before,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.outside:before
{
    filter: grayscale(1);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot:before,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(88 88 88);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_dockfleetcrew);
}




.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.t:before,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed.t:before{
    background-color: var(--color-t);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.e:before,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed.e:before{
    background-color: var(--color-e);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.s:before,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed.s:before{
    background-color: var(--color-s);
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot:before {
    background-image: linear-gradient(0deg, rgb(110 110 110 / 60%) 0%, rgba(0, 0, 0, 0) 100%);
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot .astronautface,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot .astronautface {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 39px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(0);
    background-position: -14px -7px;
    background-repeat: no-repeat;
    clip-path: var(--clip_dockfleetcrew);

}



.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot .astronautface:after,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(110 110 110 / 52%) 0%, rgba(0, 0, 0, 0) 100%);
}




.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.occupyed .health_bar,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed .health_bar {
    display: block;
    position: absolute;
    bottom: 0px;
    height: 7px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
    background-color: gray;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.occupyed .health_bar .abar,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed .health_bar .abar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}


.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.occupyed .value,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.occupyed .value {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);
    line-height: 20px;
}






.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot:hover,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot:hover{
    /*animation:blink 100ms linear 2 alternate;*/
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot:hover > .subtext,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot:hover>.subtext{
    display: block;
    min-width: 120px;
}

.right-context .right-context-fleetships  .fleetships .fleetdock .ships .fleetship .crew .slot.empty .min,
.right-context .right-context-fleetships  .fleetships .fleet .ships .fleetship .crew .slot.empty .min {
    display: block;
    position: absolute;
    color: silver;
    left: 0px;
    right: 0px;
    bottom: 0px;
    line-height: 20px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-cargo .rcgitems,
#showwindowgrabobject .scrollitems .itemlist {
    position: relative;
    width: 100%;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(auto-fill, 69px);
    min-height: 70px;
    padding: 0px 0px 50px;
}

.inventory-item{
    position: relative;
    height: 90px;
}


.inventory-item .stockpiledicon {
    display: block;
    position: absolute;
    left: 0px;
    width: 10px;
    height: 10px;
    left: 7px;
    bottom: 7px;
    opacity: 0.2;
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
    background-image: url(ico/stockpile_stockpiled_64.png);

}

.inventory-item:hover .stockpiledicon {
    display: none;
}

.inventory-item .inline_tes{
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    width: unset;
    grid-gap: 2px;
    grid-template-columns: repeat(3, minmax(2px, 1fr));
}

.inventory-item .inline_tes .tactical,
.inventory-item .inline_tes .engineer,
.inventory-item .inline_tes .science  {
    font-size: 10px;
    height: 16px;
    margin: 0px 0px;
    padding: 0px 2px;
    line-height: 16px;
}

.inventory-item .thint{
    top: unset;
    bottom: 5px;
    transform: translateX(-50%);
    right: unset;
    left: 50%;
}

.inventory-item .thint:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    position: absolute;
    top: -20px;
    right: calc(50% - 10px);
}

.inventory-item:before,
.graballitem:before,
#cstationbox #cstation .scroll table.itemlist td.item-image:before{
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    transition: box-shadow .1s;
    box-shadow: 0px 0px 11px 6px #121212 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 80%) 25%, rgb(0 0 0 / 71%) 100%);
}



.inventory-item.rg_blueprint:before,
.graballitem.rg_blueprint:before,
#cstationbox #cstation .scroll table.itemlist tr.rg_blueprint td.item-image:before{
    background-image: linear-gradient(180deg, rgb(20 57 101 / 70%) 25%, rgb(0 0 0 / 71%) 100%);
}

.inventory-item.rg_spacecraft:before,
.graballitem.rg_spacecraft:before,
.right-context .right-context-fleetships .fleetships .fleetdock .ships .fleetship,
#cstationbox #cstation .scroll table.itemlist tr.rg_spacecraft td.item-image:before {
    background-image: linear-gradient(180deg, rgb(20 101 78 / 53%) 25%, rgb(0 0 0 / 71%) 100%);
}

.inventory-item.artefacted:before,
#grabnearestbox .content .graballitem.artefacted:before,
#cstationbox #cstation .scroll table.itemlist tr.artefacted td.item-image:before{
    background: linear-gradient(180deg, rgba(20, 101, 78, 0.53) 25%, rgba(0, 0, 0, 0.71) 100%), radial-gradient(circle at center 40%, rgba(119, 99, 1, 0.9) 1%, rgba(0, 0, 0, 0) 50%);
}



.inventory-item.rgs_astronaut:before,
.graballitem.rgs_astronaut:before,
#cstationbox #cstation .scroll table.itemlist tr.rgs_astronaut td.item-image:before{
    background: linear-gradient(180deg, rgb(91 82 40 / 80%) 25%, rgb(0 0 0 / 71%) 100%);
}

.inventory-item.rg_module:before,
#grabnearestbox .content .graballitem-rg_module:before,
#cstationbox #cstation .scroll table.itemlist tr.rg_module td.item-image:before{
    background-image: linear-gradient(180deg, rgb(20 86 101 / 90%) 25%, rgb(0 0 0 / 71%) 100%);
}


.inventory-item.crewed:before,
.graballitem.crewed:before{
    background: linear-gradient(180deg, rgb(20 101 78 / 90%) 25%, rgb(0 0 0 / 71%) 100%), radial-gradient(circle at center 40%, rgba(20, 101, 78, 1) 1%, rgba(0, 0, 0, 0) 80%);
}

.right-context .right-context-fleetships .fleetships .fleetdock .ships .fleetship.outside{
    background-image: linear-gradient(180deg, rgb(60 60 60 / 90%) 25%, rgb(0 0 0 / 71%) 100%);
}

.inventory-item.rg_questitem:before,
.graballitem.rg_questitem:before,
#cstationbox #cstation .scroll table.itemlist tr.rg_questitem td.item-image:before{
    background-image: linear-gradient(180deg, rgb(245 190 27 / 45%) 25%, rgb(0 0 0 / 71%) 100%);
    border: 1px solid #ab960c;
}

.inventory-item.rg_item.rgs_artifact:before,
.graballitem.rgs_artifact:before,
#cstationbox #cstation .scroll table.itemlist tr.rg_artifact td.item-image:before{
    background-image: linear-gradient(180deg, rgb(193 138 22 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
    border: 1px solid #735519;
}



.inventory-item:hover:before,
.graballitem:hover:before{
    box-shadow: 0px 0px 11px 6px #19203a inset;
}


.inventory-item .gimage,
.graballitem .gimage{
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: 40px;
}

.graballitem .gimage{
    background-size: 60px;
    background-position: center;
}

.inventory-item.rgs_astronaut .gimage {
    background-size: 60px;
}

.inventory-item .clickable,
.graballitem .clickable{
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
}

.inventory-item.dragDrop{
    cursor: pointer;
}

.inventory-item .gqty{
    display: block;
    top: 9px;
    position: absolute;
    color: white;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
    right: 12px;
    text-shadow: var(--shadow_textfull);
}



.inventory-item ._gtitle{
    display: block;
    bottom: 7px;
    position: absolute;
    line-height: 14px;
    color: white;
    left: 5px;
    right: 5px;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
    overflow: hidden;
}




.inventory-item:hover > .subtext,
.graballitem:hover > .subtext{
    display: block;
}

.inventory-item .mu{
    display: none;
}

.inventory-item .weight{
    display: none;
}

.inventory-item .space{
    display: none;
}

.inventory-item .isp{

    position: absolute;
    bottom: 5px;
    right: 7px;
}

.inventory-item .isp .thint{
    bottom: 25px;
}

.inventory-item .isp .thint:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-bottom: unset;
    position: absolute;
    bottom: -10px;
    right: calc(50% - 10px);
    top: unset;
}

.inventory-item .isp .unstockpile,
.inventory-item .isp .stockpile {
    width: 20px;
    height: 20px;
}

.inventory-item .isj {
    display: none;
    position: absolute;
    top: 7px;
    left: 4px;
}

.inventory-item:hover .isj {
    display: block;
}

.inventory-item .isp .stockpile:hover > .subtext,
.inventory-item .isp .unstockpile:hover > .subtext,
.inventory-item .isj .jettison:hover > .subtext{
    display: block;
}



.right-context .right-context-cargo{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}

.right-context > .close{
    top: 8px;
    right: 8px;
    filter: invert(1);
}

.right-context .right-context-cargo .cargos{
    position: absolute;
    top: 100px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 10px;
}

.right-context .right-context-cargo .shipname,
.right-context .right-context-crew .shipname{
    position: absolute;
    top: 0px;
    left: -5px;
    right: 0px;
    height: 26px;
    background-color: white;
    overflow: hidden;

}

.right-context .right-context-crew .shipname{
    left: 0px;
}

.right-context .right-context-cargo .shipname .img,
.right-context .right-context-crew .shipname .img{
    position: absolute;
    top: -15px;
    width: 80%;
    right:-25%;
    bottom: -15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.right-context .right-context-cargo .shipname .snamev,
.right-context .right-context-crew .shipname .snamev{
    position: absolute;
    top: 17px;
    left: 10px;
    color: black;
    transform: translateY(-50%);
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-cargo .cargocapacity {
    position: absolute;
    top: 26px;
    left: -5px;
    right: 0px;
    height: 37px;
    background-color: white;
    text-transform: uppercase;
    font-size: 9px;
}
.right-context .right-context-cargo .cargocapacity .cargobar {
    position: absolute;
}
.right-context .right-context-cargo .cargocapacity .cargobar .cargobarbox{
    height: 7px;
    width: 285px;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid rgba(0,0,0,0.8);
    border-right: 2px solid rgba(0,0,0,0.8);
    background-color: rgba(0,0,0,0.4);
    box-sizing: border-box;
    top: 23px;
    left: 10px;
}
.right-context .right-context-cargo .cargocapacity .cargobar .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    bottom: 0px;
    max-width: 100%;
}

.right-context .right-context-cargo .cargocapacity .cargobar .cargobarbox .bar.red{
    background-color: var(--hud_invalid_background);
}

.right-context .right-context-cargo .cargocapacity .cargobar .cargobarbox span{
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: black;
    font-family: var(--fontFaimly_button);
    text-transform: none;
}

.right-context .right-context-cargo .cargocapacity .cargobar .cargobarbox .cbef {
    display: block;
    position: absolute;
    font-family: var(--fontFaimly_button);
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: black;
    white-space: nowrap;

}





.right-context .right-context-cargo .warpcapacity {
    position: absolute;
    top: 63px;
    left: -5px;
    right: 0px;
    height: 37px;
    background-color: white;
    text-transform: uppercase;
    font-size: 9px;
}
.right-context .right-context-cargo .warpcapacity .warpbar {
    position: absolute;
}
.right-context .right-context-cargo .warpcapacity .warpbar .warpbarbox{
    height: 7px;
    width: 285px;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid rgba(0,0,0,0.8);
    border-right: 2px solid rgba(0,0,0,0.8);
    background-color: rgba(0,0,0,0.4);
    box-sizing: border-box;
    top: 23px;
    left: 10px;
}
.right-context .right-context-cargo .warpcapacity .warpbar .warpbarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    bottom: 0px;
    max-width: 100%;
}

.right-context .right-context-cargo .warpcapacity .warpbar .warpbarbox .bar.red{
    background-color: var(--hud_invalid_background);
}
.right-context .right-context-cargo .warpcapacity .warpbar .warpbarbox span{
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: black;
    font-family: var(--fontFaimly_button);
    text-transform: none;
}

.right-context .right-context-cargo .warpcapacity .warpbar .warpbarbox .cbef {
    display: block;
    content: 'CARGO CAPACITY';
    position: absolute;
    font-family: var(--fontFaimly_button);
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: black;
    white-space: nowrap;

}


.right-context .right-context-cargo .rcitems {
    position: relative;
    width: 100%;
    border-spacing: 0px;
    table-layout: fixed;
}
.right-context .right-context-cargo .rcitems.header {
    position: absolute;
    top: 36px;
    height: 20px;
    table-layout: fixed;
}
.right-context .right-context-cargo .rcitems.header tr th{
    background-color: white;
    padding: 0px;
    line-height: 10px;
    color: black;
    font-family: var(--fontFaimly_button);
}
.right-context .right-context-cargo .rcitems.header tr th.cargoname{
    text-align: right;
}
.right-context .right-context-cargo .rcitems.header tr th .cargobarbox{
    height: 18px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    color: black;
}
.right-context .right-context-cargo .rcitems.header tr th .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    bottom: 0px;
}
.right-context .right-context-cargo .rcitems.header tr th .cargobarbox span{
    position: absolute;
    top: 0px;
    left: 0px;
    color: white;
    bottom: 0px;
    right: 0px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    width: auto;
}
.right-context .right-context-cargo .rcitems.header td,
.right-context .right-context-cargo .rcitems td {
    color: white;
    padding: 5px 5px 5px 0px;
    text-transform: uppercase;
    line-height: 11px;
}
.right-context .right-context-cargo .rcitems tr .name{
    text-align: right;
}
.right-context .right-context-cargo .rcitems tr .qty{
    width: 52px;
    text-align: right;
}
.right-context .right-context-cargo .rcitems tr .mu{
    width: 30px;
    text-align: left;
    text-transform: none;
}
.right-context .right-context-cargo .rcitems tr .weight{
    width: 43px;
    text-align: right;
    text-transform: none
}
.right-context .right-context-cargo .rcitems tr .space{
    width: 54px;
    text-align: right;
    text-transform: none
}
.right-context .right-context-cargo .rcitems tr .isp{
    width: 34px;
    text-align: right;
    text-transform: none;
    padding-right: 0px;
}

.right-context .right-context-cargo .rcitems tr .isp .thint{
    top: -2px;
    right: 22px;
    left: unset;
    bottom: unset;
}


.right-context .right-context-cargo .rcitems tr .isj{
    width: 20px;
    text-align: left;
    text-transform: none;
    padding-left: 4px;
    padding-right: 1px;
}
.right-context .right-context-cargo .rcitems tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-cargo .rcitems tr th.name,
.right-context .right-context-cargo .rcitems tr td.name {
    padding-right:10px;
}
.right-context .right-context-cargo .rcitems tr td.name {
    border-right: 1px solid rgba(255,255,255,.2);
}

.right-context .right-context-cargo .rcitems tr td.name .miniature-image{
    cursor: pointer;
}

.right-context .right-context-cargo .rcitems tr td.name:hover .miniature-image{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-cargo .rcitems tr th.type,
.right-context .right-context-cargo .rcitems tr td.type {
    padding-left:10px;
}
.right-context .right-context-cargo .rcitems tr:hover td{
    background-color: rgba(255,255,255,0.1);
}


.right-context .right-context-planets{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-planets .planetsscroll{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}
.right-context .right-context-planets .planets {
    position: relative;
    width: 100%;
    border-spacing: 0px;
}
.right-context .right-context-planets .planets.header {
    position: absolute;
    top: 0px;
    height: 30px;
}
.right-context .right-context-planets .planets.header tr th{
    background-color: white;
    font-size: 12px;
    color: black;
    padding: 5px 3px;
    text-transform: uppercase;
}
.right-context .right-context-planets .planets.header td,
.right-context .right-context-planets .planets td {
    font-size: 12px;
    color: white;
    padding: 5px 3px;
    text-transform: uppercase;
}
.right-context .right-context-planets .planets tr{
}
.right-context .right-context-planets .planets tr .name{
    text-align: left;
}
.right-context .right-context-planets .planets tr .name{
    text-align: left;
}

.right-context .right-context-planets .planets tr td.name .name{
    font-size: 12px;
    display: inline-block;
    padding: 1px 4px;
}
.right-context .right-context-planets .planets tr td.name .colonyes {
    font-size: 12px;
    color: gray;
    padding: 1px 4px;
    display: inline-block;
}
.right-context .right-context-planets .planets tr .icon{
    width: 140px;
}
.right-context .right-context-planets .planets tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-planets .planets tr th.name,
.right-context .right-context-planets .planets tr td.name {
    padding-left:5px;
    border-left: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
}
.right-context .right-context-planets .planets tr.moon td.name {
    position: relative;
    padding-left:55px;
}
.right-context .right-context-planets .planets tr.planet td.name .name{
    font-size: 12px;
}
.right-context .right-context-planets .planets tr.planet td.name .colonyes,
.right-context .right-context-planets .planets tr.moon td.name .colonyes{
    font-size: 12px;
    color: gray;
}
.right-context .right-context-planets .planets tr.moon td.name .moonline{
    position: absolute;
    left: 0px;
    width: 50px;
    bottom: calc(50% - 1px);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
    font-size: 8px;
    line-height: 10px;
    padding-left: 3px;
    transition: opacity 0.2s;
    opacity: 1;
    box-sizing: border-box;
    z-index: 100;
}
.right-context .right-context-planets .planets tr.planet {
    height: 100px;
}
.right-context .right-context-planets .planets tr td.icon {
    position: relative;
}
.right-context .right-context-planets .planets tr td.icon .distline{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: calc(50% - 1px);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
    font-size: 8px;
    line-height: 10px;
    padding-left: 3px;
    transition: opacity 0.2s;
    opacity: 1;
    box-sizing: border-box;
    z-index: 100;
}
.right-context .right-context-planets .planets tr:hover td.icon .distline{
    transition: opacity 0.6s;
    opacity: 0;
}
.right-context .right-context-planets .planets tr td.icon .picon{
    position: absolute;
    height: 100px;
    width: 100px;
    left: 40px;
    top: 0px;
    transition: left 0.2s;
}

.right-context .right-context-planets .planets tr td.icon  .picon span{
    position: absolute;
    display: block;
    border-radius: 2000px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    box-sizing: border-box;
    box-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
}
.right-context .right-context-planets .planets tr:hover td.icon  .picon span{
    margin: 5%  !important;
    box-shadow: -1px 0px 0 rgba(255,131,64,.1), 1px 0px 0 rgba(126, 250, 255, .1);
    width: 90%  !important;
    height: 90%  !important;
    animation: blink 100ms linear 2 alternate;
}
.right-context .right-context-planets .planets tr td.icon  .picon span:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 100%);
    z-index: 10;
    border-radius: 100px;
}
.right-context .right-context-planets .planets tr:hover td.name .name{
    background-color: white;
    color: black;
}
.right-context .right-context-planets .planets tr:hover td.name .colonyes{
    background-color: white;
    color: black;
}
.right-context .right-context-asteroids{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-asteroids .asteroidsscroll{
    position: absolute;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}
.right-context .right-context-asteroids .asteroids {
    position: relative;
    width: 100%;
    border-spacing: 0px;
}
.right-context .right-context-asteroids .asteroids.header {
    position: absolute;
    top: 0px;
    height: 30px;
    width: calc(100% + 5px);
    right: 0px;
}
.right-context .right-context-asteroids .asteroids.header tr th{
    background-color: white;
    font-size: 13px;
    color: black;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: left;
    padding-left: 10px;
}
.right-context .right-context-asteroids .asteroids.header td,
.right-context .right-context-asteroids .asteroids td {
    font-size: 12px;
    color: white;
    padding: 5px 3px;
    text-transform: uppercase;
    line-height: 13px;
}
.right-context .right-context-asteroids .asteroids tr{
}
.right-context .right-context-asteroids .asteroids tr .name{
    text-align: left;
}
.right-context .right-context-asteroids .asteroids tr .icon{
    width: 45px;
}
.right-context .right-context-asteroids .asteroids tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-asteroids .asteroids tr th.name,
.right-context .right-context-asteroids .asteroids tr td.name {
    padding-left:5px;
}

.right-context .right-context-asteroids .asteroids tr td.name .name{
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    padding: 1px 4px;
}
.right-context .right-context-asteroids .asteroids tr td.name .colonyes,
.right-context .right-context-asteroids .asteroids tr td.name .radius {
    color: gray;
    padding: 1px 4px;
    display: inline-block;
}
.right-context .right-context-asteroids .asteroids tr td.icon {
    position: relative;
    border-left: 1px solid rgba(255,255,255,.2);
}
.right-context .right-context-asteroids .asteroids tr td.icon .distline{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: calc(50% - 1px);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
    font-size: 8px;
    line-height: 10px;
    padding-left: 3px;
    transition: opacity 0.2s;
    opacity: 1;
    box-sizing: border-box;
    z-index: 100;
}
.right-context .right-context-asteroids .asteroids tr:hover td.icon .distline{
    transition: opacity 0.6s;
    opacity: 0;
}
.right-context .right-context-asteroids .asteroids tr:hover td .name,
.right-context .right-context-asteroids .asteroids tr:hover td .colonyes,
.right-context .right-context-asteroids .asteroids tr:hover td .radius {
    background-color: white;
    color: black;
    cursor: pointer;
}
.right-context .right-context-stations{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-stations .stationsscroll{
    position: absolute;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}
.right-context .right-context-stations .stations {
    position: relative;
    width: 100%;
    border-spacing: 0px;
}
.right-context .right-context-stations .stations.header {
    position: absolute;
    top: 0px;
    height: 30px;
    width: calc(100% + 5px);
    right: 0px;
}
.right-context .right-context-stations .stations.header tr th{
    background-color: white;
    font-size: 13px;
    color: black;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: left;
    padding-left: 10px;
}




.right-context .right-context-stations .stations.header tr th.searchfield{
    position: relative;
    text-align: left;
}


.right-context .right-context-stations .stations.header tr th.searchfield:before{
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    width: 20px;
    background-image: url(ico/ico_search-30.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px;
    filter: invert(1);
}

.right-context .right-context-stations .stations.header tr th.searchfield input#csearch{
    width: 100px;
    color: black;
    margin: 0px 22px 0px 0px;
    text-align: left;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 20px;
    font-size: 12px;
    text-transform: none;
    float: right;
    font-family: var(--fontFaimly_button);
    line-height: 18px;
    text-transform: uppercase;
    background-image:
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%),
        linear-gradient(0deg, black 0%, black 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}


.right-context .right-context-stations .stations.header td,
.right-context .right-context-stations .stations td {
    font-size: 12px;
    color: white;
    padding: 5px 3px;
    text-transform: uppercase;
    line-height: 13px;

}
.right-context .right-context-stations .stations tr td{
    cursor: pointer;
}
.right-context .right-context-stations .stations tr .name{
    text-align: left;
}
.right-context .right-context-stations .stations tr td.img{
    width: 80px;
    position: relative;
}
.right-context .right-context-stations .stations tr td.img .img{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(2) grayscale(1);
}
.right-context .right-context-stations .stations tr.station.enemy_station td{
    color: red;
}
.right-context .right-context-stations .stations tr.station.neutral_station td{
    color: white;
}
.right-context .right-context-stations .stations tr.station.ally_station td{
    color: white;
}
.right-context .right-context-stations .stations tr.station.own_station td{
    color: white;
}
.right-context .right-context-stations .stations tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-stations .stations tr th.name,
.right-context .right-context-stations .stations tr td.name {
    padding-left:5px;
}
.right-context .right-context-stations .stations tr td.name .name{
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    padding: 1px 4px;
}

.right-context .right-context-stations .stations tr td.name .name .sstatelabel{
    font-size: 10px;
    line-height: 11px;
    display: inline-block;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 2px 4px;
    color: black;
    margin: 0px 5px;
    background-color: white;

}

.right-context .right-context-stations .stations tr td.name .name .sstatelabel.sdanger{
    color: black;
    background-color: var(--hud_danger_color);
}



.right-context .right-context-stations .stations tr.own_station td.name .name {
    color:rgba(180,255,255,1)
}
.right-context .right-context-stations .stations tr td.name .owner,
.right-context .right-context-stations .stations tr td.name .corp {
    font-size: 12px;
    color: gray;
    padding: 1px 4px;
    display: inline-block;
}
.right-context .right-context-stations .stations tr td.icon {
    position: relative;
}
.right-context .right-context-stations .stations tr:hover td .name{
    color: black !important;
    background-color: white;
}

.right-context .right-context-stations .stations tr:hover td .name .sstatelabel{
    filter: invert(1);
    color: black;
    background-color: white !important;

}
.right-context .right-context-stations .stations tr:hover td .owner,
.right-context .right-context-stations .stations tr:hover td .corp{
    color: black;
    background-color: white;
}

.right-context .right-context-stations .stations tr:hover.own_station td.name .name {
    color:black;
}


.right-context .right-context-wormholes{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-wormholes .wormholesscroll{
    position: absolute;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}
.right-context .right-context-wormholes .wormholes {
    position: relative;
    width: 100%;
    border-spacing: 0px;
}
.right-context .right-context-wormholes .wormholes.header {
    position: absolute;
    top: 0px;
    height: 30px;
    width: calc(100% + 5px);
    right: 0px;
}
.right-context .right-context-wormholes .wormholes.header tr th{
    background-color: white;
    font-size: 13px;
    color: black;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: left;
    padding-left: 10px;
}
.right-context .right-context-wormholes .wormholes.header td,
.right-context .right-context-wormholes .wormholes td {
    font-size: 12px;
    color: white;
    padding: 5px 3px;
    text-transform: uppercase;
    line-height: 13px;
}
.right-context .right-context-wormholes .wormholes tr{
}
.right-context .right-context-wormholes .wormholes tr .name{
    text-align: left;
}
.right-context .right-context-wormholes .wormholes tr .icon{
    width: 20px;
}
.right-context .right-context-wormholes .wormholes tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-wormholes .wormholes tr th.name,
.right-context .right-context-wormholes .wormholes tr td.name {
    padding-left:5px;
    border-left: 1px solid rgba(255,255,255,.2);
}

.right-context .right-context-wormholes .wormholes tr td.name .name{
    font-size: 12px;
    color: white;
    cursor: pointer;
    line-height: 16px;
    display: inline-block;
    padding: 1px 4px;
}
.right-context .right-context-wormholes .wormholes tr td.name .name:hover {
    background-color: white;
    color: black;
}
.right-context .right-context-wormholes .wormholes tr td.icon {
    position: relative;
    background-image: url(ico/viewcontrols_wh_32.png);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.right-context .right-context-waypoints{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-waypoints .waypointsscroll{
    position: absolute;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;

}
.right-context .right-context-waypoints .waypoints {
    position: relative;
    width: 100%;
    border-spacing: 0px;
}
.right-context .right-context-waypoints .waypoints.header {
    position: absolute;
    top: 0px;
    height: 30px;
    width: calc(100% + 5px);
    right: 0px;
}
.right-context .right-context-waypoints .waypoints.header tr th{
    background-color: white;
    font-size: 13px;
    color: black;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: left;
    padding-left: 10px;
}
.right-context .right-context-waypoints .waypoints.header td,
.right-context .right-context-waypoints .waypoints td {
    font-size: 12px;
    color: white;
    padding: 5px 3px;
    text-transform: uppercase;
}
.right-context .right-context-waypoints .waypoints tr{
}
.right-context .right-context-waypoints .waypoints tr .name{
    text-align: left;
}
.right-context .right-context-waypoints .waypoints tr .relation{
    width: 80px;
    text-align: right;
    padding-right: 5px;
}
.right-context .right-context-waypoints .waypoints tr th.scrollbar{
    width: 17px;
    padding: 0px;
}
.right-context .right-context-waypoints .waypoints tr th.name {
    padding-left: 5px;
}
.right-context .right-context-waypoints .waypoints tr td.name {
    padding-left:5px;
    font-size: 12px;
    color: gray;
}
.right-context .right-context-waypoints .waypoints tr td.name .name{
    font-size: 12px;
    color: white;
    cursor: pointer;
    line-height: 16px;
    display: inline-block;
    padding: 1px 4px;
}
.right-context .right-context-waypoints .waypoints tr td.name:hover .name {
    background-color: white;
    color: black;
}
.right-context .right-context-waypoints .waypoints tr td.name .owner{
    line-height: 12px;
    font-size: 12px;
    color: gray;
    padding: 1px 4px;
    display: inline-block;
    cursor: pointer;
}
.right-context .right-context-waypoints .waypoints tr td.name:hover .owner {
    background-color: white;
    color: black;
}
.right-context .right-context-waypoints .waypoints tr .relation{
    width: 80px;
    text-align: right;
    padding-right: 5px;
    cursor: pointer;
}
.right-context .right-context-waypoints .waypoints tr.own div.name{
    color:rgba(180,255,255,1);
}
.right-context .right-context-waypoints .waypoints tr.own td.relation{
    color:rgba(180,255,255,1);
}


.right-context .right-context-ships{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
}
.right-context .right-context-ships .shipsscroll{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;
    overflow-x: hidden;

}




.right-context .right-context-ships .ship {
    font-size: 12px;
    color: white;
    text-transform: uppercase;
    height: 80px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;


}
.right-context .right-context-ships .ship.sectormap,
.right-context .right-context-ships .ship.maphud {
    height: 60px;
}

.right-context .right-context-ships .ship .img {
    position: absolute;
    top: -10px;
    left: 10px;
    right: 10px;
    bottom: -10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    filter: brightness(2) grayscale(1);
}
.right-context .right-context-ships .ship:hover .img {
    background-color: unset;
}

.right-context .right-context-ships .ship.sectormap .img,
.right-context .right-context-ships .ship.maphud .img {
    position: absolute;
    top: -5px;
    left: 20px;
    right: 160px;
    bottom: -5px;
    background-position: right center;
    background-size: cover;

}


.right-context .right-context-ships .ship.maphud:hover .img {
    animation: blink 100ms linear 2 alternate;

}

.right-context .right-context-ships .ship .name{
    position: absolute;
    left: 150px;
    top: calc(50% - 20px);
    font-size: 12px;
    color: rgba(255,255,255,1);
    padding: 1px 2px;
    white-space: nowrap;
}

.right-context .right-context-ships .ship.sectormap .name,
.right-context .right-context-ships .ship.maphud .name{
    position: absolute;
    left: 150px;
    top: calc(50% - 25px);
    font-size: 12px;
    color: rgba(255,255,255,1);
    padding: 1px 2px;
    white-space: nowrap;
}

.right-context .right-context-ships .ship.this_player_base  .name{
    color: rgba(180,255,255,1);
}
.right-context .right-context-ships .ship.enemy_player_base  .name{
    color: #FFEB00;
}


.right-context .right-context-ships .ship:hover .name {
    background-color: unset;
    background-image: unset;
    color: unset;

    background-color: white;
    color: black !important;
    text-shadow: none;
}

.right-context .right-context-ships .ship .username{
    position: absolute;
    left: 150px;
    bottom: calc(50% - 7px);
    font-size: 12px;
    color: rgba(155,155,155,1);
    padding: 1px 2px;
    white-space: nowrap;
}
.right-context .right-context-ships .ship:hover .username {
    background-color: unset;
    background-image: unset;
    color: unset;
    background-color: white;
    color: black;
    text-shadow: none;
}

.right-context .right-context-ships .ship .corpname{
    position: absolute;
    left: 150px;
    bottom: calc(50% - 22px);
    font-size: 12px;
    color: rgba(155,155,155,1);
    padding: 1px 2px;
    white-space: nowrap;
}
.right-context .right-context-ships .ship:hover .corpname {
    background-color: unset;
    background-image: unset;
    color: unset;
    background-color: white;
    color: black;
    text-shadow: none;
}

.right-context .right-context-ships .ship .sector{
    position: absolute;
    left: 150px;
    bottom: calc(50% - 23px);
    font-size: 10px;
    color: rgba(155,155,155,1);
    padding: 1px 2px;
    white-space: nowrap;
}
.right-context .right-context-ships .ship:hover .sector {
    background-color: unset;
    background-image: unset;
    color: unset;

    background-color: white;
    color: black;
    text-shadow: none;
}

.right-context .right-context-ships .ship .location{
    position: absolute;
    left: 150px;
    bottom: calc(50% - 9px);
    font-size: 10px;
    color: rgba(155,155,155,1);
    padding: 1px 2px;
    white-space: nowrap;
}
.right-context .right-context-ships .ship:hover .location {
    background-color: unset;
    background-image: unset;
    color: unset;

    background-color: white;
    color: black;
    text-shadow: none;
}





.right-context .right-context-processes{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    ;
}
.right-context .right-context-processes .processes{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 45px;


}

.right-context .right-context-processes .waiting_process{
    position: absolute;
    top: 0px;

    right: 0px;
    bottom: 0px;
    left: -10px;
    clip-path: var(--clip_right_context);
    background-image:url(./effects/RnWB.gif)  !important;
}

.right-context .right-context-processes .waiting_process .waiter{
    position: absolute;
    top: 30%;
    transform: tranlateX(-50%);
    right: 30px;
    height: 8px;
    left: 30px;
    border-left: 2px solid rgb(180,180,180);
    border-right: 2px solid rgb(180,180,180);
    background-color: rgb(40,40,40);

}

.right-context .right-context-processes .waiting_process .waiter .text{
    position: absolute;
    bottom: 18px;

    right: 20px;

    left: 20px;
    color: silver;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

.right-context .right-context-processes .waiting_process .waiter .bar{
    content: '';
    position: absolute;
    width: 1%;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(250,250,250);
    animation-name: bar_progress_width;
    animation-duration: 4s;
}


.right-context .right-context-processes .processes .proc_tac,
.right-context .right-context-processes .processes .proc_sci
{
    position: relative;
    clear:both;
    padding-top: 25px;
    margin-top: 25px;
    padding-left: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
    min-height: 14px;
}


.right-context .right-context-processes .processes .switcher
{

    position: absolute;
    display: block;
    top: -11px;
    left: 6px;
    width: 20px;
    height: 24px;
    text-transform: uppercase;
    padding: 0px;
    background-color: black;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;


}

.right-context .right-context-processes .processes .proc_eng .switcher {
    height: 42px;
}



.right-context .right-context-processes .processes .switcher:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 0.3;
    background-size: 8px;
    background-position: center right 3px;
    background-repeat: no-repeat;
    background-image:url('ico/minus-24.png');
}


.right-context .right-context-processes .processes .closed .switcher:before {
    background-image:url('ico/plus-24.png');
}

.right-context .right-context-processes .processes .switcher:hover:before {
    animation: blink 100ms linear 2 alternate;
    opacity: 1;
}


.right-context .right-context-processes .processes .closed .switcher:after {
    content: '...';
    display: block;
    position: absolute;
    top: 34px;
    opacity: 0.5;
    left: 126px;
    background-size: 28px;
    background-position: center right 3px;
    background-repeat: no-repeat;
    /* background-image: url(ico/plus-24.png); */
    /* height: 10px; */
    text-align: center;
    color: white;
    padding: 0px 0px 11px;
    letter-spacing: 4px;
    font-size: 20px;
    line-height: 5px;
    width: 20px;
    margin: 0px auto;
}

.right-context .right-context-processes .processes .proc_eng.closed .switcher:after {

    top: 50px;

}

.right-context .right-context-processes .processes .switcher:hover:after {

    animation: blink 100ms linear 2 alternate;
    opacity: 1;

}



.right-context .right-context-processes .processes .proc_eng {
    position: relative;
    clear:both;
}






.subtext_hoverable_parent {
    position: relative;
}

.subtext_hoverable_parent:hover > .subtext {
    display: block;
    z-index: 1000; /* jiank se schovavaji za jine */
}


.right-context .right-context-processes .processes .proc_tac:after,
.right-context .right-context-processes .processes .proc_sci:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
}

.right-context .right-context-processes .processes .proc_tac .collective,
.right-context .right-context-processes .processes .proc_eng .collective,
.right-context .right-context-processes .processes .proc_sci .collective
{
    position: absolute;
    top: -7px;
    right: 9px;
    height: 15px;

    text-transform: uppercase;
    color: #ffbc00;
    display: block;

    text-align: right;
}

.right-context .right-context-processes .processes .stext
{
    position: absolute;
    top: 12px;
    left: 76px;
    text-transform: uppercase;
    color: #bdbaba;

}

.right-context .right-context-processes .processes .collective .msdiv
{
    position: absolute;
    top: 0px;
    right: 0px;
}



.right-context .right-context-processes .processes .collective .msdiv.clickable
{
    cursor: pointer;
}

.right-context .right-context-processes .processes .collective .msdiv .rcexpbar
{
    position: absolute;
    top: -6px;
    right: -4px;
    height: 2px;
    width: 271px;
    background-color: rgb(16 20 26); /*var(--hud_sexp_barbckg_color);*/
    display: block;
    z-index: 1;
}

.right-context .right-context-processes .processes .collective .msdiv .rcexpbar .bar
{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0px;
    background-color: rgb(114 84 0); /*var(--hud_sexp_bar_color);*/
    display: block;

}

.right-context .right-context-processes .processes .collective .msdiv .rcexpbar.nextlevel
{
    background-color: #ffbc00;
}

.right-context .right-context-processes .processes .collective .msdiv .rcexpbar.nextlevel .bar
{
    background-color: #ffbc00; /*var(--hud_sexp_bar_color);*/
    animation: highlited 1000ms linear infinite;
    filter: drop-shadow(0px 0px 3px #ffbc00);
}

.right-context .right-context-processes .processes .collective .msdiv .msinfo
{
    position: absolute;
    top: 1px;
    right: 0px;
    text-transform: uppercase;
    color: #ffbc00;
    display: block;
    text-align: right;
    white-space: nowrap;
}

.right-context .right-context-processes .processes .collective .msdiv .msimg
{
    position: absolute;
    top: 1px;
    right: 0px;
    height: 30px;
    width: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(5) grayscale(1);
}

.right-context .right-context-processes .processes .collective .msdiv .msname
{
    position: absolute;
    top: 1px;
    right: 32px;
    height: 15px;
    text-transform: uppercase;
    color: #ffbc00;
    display: block;
    text-align: right;
    white-space: nowrap;
}

.right-context .right-context-processes .processes .collective .msdiv .mslvl
{
    position: relative;
    text-transform: uppercase;
    color: #ffbc00;
    padding: 0px 6px 0px 6px;
    white-space: nowrap;

}

.right-context .right-context-processes .processes .collective .msdiv .mslvl:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0.5;
}

.right-context .right-context-processes .processes .collective .msdiv .mslvl:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.5;
}

.right-context .right-context-processes .processes .collective .msdiv.clickable:hover .msimg
{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-processes .processes .ssdiv
{
    position: absolute;
    top: -6px;
    left: 29px;
}

.right-context .right-context-processes .processes .ssdiv.clickable
{
    cursor: pointer;
}



.right-context .right-context-processes .processes .ssdiv .ssimg
{
    position: absolute;
    top: -4px;
    left: 0px;
    height: 41px;
    width: 41px;
    display: block;
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
}





.right-context .right-context-processes .processes .ssdiv.clickable:hover .ssimg
{
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-processes .processes .completeds .completed
{
    position: absolute;
    top: 15px;
    right: 0px;
    height: 15px;
    text-transform: uppercase;
    color: #ffbc00;
    display: block;
    text-align: right;
    white-space: nowrap;

    text-align: right;
}



.right-context .right-context-processes .processes .cdom {
    position: relative;
    height: 50px;
    margin-top: 5px;
    color: rgb(255,255,255);
    width: calc(100% - 5px);
    text-transform: uppercase;
    background-color: rgb(24 34 61);

}

.right-context .right-context-processes .getpremium {
    position: relative;
    margin-top: 16px;
    color: rgb(255,255,255);
    width: calc(100% - 5px);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    background-image: url(prembanner_icon.png);
    background-position: center 42px;
    background-repeat: no-repeat;
    background-size: 28px;
    font-size: 12px;
    height: 80px;

}

.right-context .right-context-processes .getpremium:hover {
    animation: blink 100ms linear 2 alternate;

}

.right-context .right-context-processes .getpremium .gold {
    color: #ffbc00;
}


.right-context .right-context-processes .processes .cdom .etc {
    display: none;
    text-align: right;
    position: absolute;
    right: 5px;
    top: 6px;
    text-transform: none;
    white-space: nowrap;
    font-size: 10px;
    color: white;
    font-family: var(--fontFaimly_default);
}

.right-context .right-context-processes .processes .cdom .etc.finnished {
    animation: highlited 1000ms linear infinite;
}

.right-context .right-context-processes .processes .cdom .name {
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);

}

.right-context .right-context-processes .processes .cdom .onclick{
    background-color: white;
    text-shadow: none;
    color: black;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    clip-path: var(--clip_whitelink);
    cursor: pointer;
}

.right-context .right-context-processes .processes .cdom .onclick:hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-processes .processes .cdom .loc {
    text-align: right;
    position: absolute;
    top: 28px;
    left: 5px;
    color: #b1acac;
}


.right-context .right-context-processes .processes .cdom .trip,
.right-context .right-context-processes .processes .asatellites .satellite .trip,
.right-context .right-context-signals .signals .dfl .trip {
    text-align: right;
    position: absolute;
    top: 50%;
    right: 9px;
    height: 30px;
    color: #b1acac;
    font-size: 12px;
    line-height: 11px;
    text-transform: none;
    transform: translateY(-50%);
}

.right-context .right-context-signals .signals .dfl .trip {
    top: 40px;
    right: 5px;
    transform: unset;
}

.right-context .right-context-processes .processes .cdom .trip .distance,
.right-context .right-context-processes .processes .asatellites .satellite .trip .distance,
.right-context .right-context-signals .signals .dfl .trip .distance {
    position: absolute;
    bottom: 17px;
    right: 36px;
    white-space: nowrap;
}


.right-context .right-context-processes .processes .cdom .trip .onsite,
.right-context .right-context-processes .processes .asatellites .satellite .trip .onsite,
.right-context .right-context-signals .signals .dfl .trip .onsite {
    position: absolute;
    transform: translateY(-50%);
    right: 0px;
    top: 50%;
    white-space: nowrap;
}

.right-context .right-context-processes .processes .cdom .trip .duration,
.right-context .right-context-processes .processes .asatellites .satellite .trip .duration,
.right-context .right-context-signals .signals .dfl .trip .duration {
    position: absolute;
    bottom: 1px;
    right: 36px;
    white-space: nowrap;
}

.right-context .right-context-processes .processes .cdom .trip .flyto,
.right-context .right-context-processes .processes .asatellites .satellite .trip .flyto,
.right-context .right-context-signals .signals .dfl .trip .flyto {
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    height: 30px;
    width: 30px;
    background-position: 9px center;
    background-repeat: no-repeat;
    background-size: 12px;
    background-image: url(ico/controls_arrive.png);
    padding: 0px;
    z-index: 1;
}

.right-context .right-context-processes .processes .cdom .trip .flyto:before,
.right-context .right-context-processes .processes .asatellites .satellite .trip .flyto:before,
.right-context .right-context-signals .signals .dfl .trip .flyto:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

.right-context .right-context-processes .processes .cdom .trip .flyto:hover:before,
.right-context .right-context-processes .processes .asatellites .satellite .trip .flyto:hover:before,
.right-context .right-context-signals .signals .dfl .trip .flyto:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-processes .processes .cdom .trip .flyto:after,
.right-context .right-context-processes .processes .asatellites .satellite .trip .flyto:after,
.right-context .right-context-signals .signals .dfl .trip .flyto:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}



.right-context .right-context-processes .processes .productions {
    position: relative;
    clear: both;
    padding-top: 38px;
    margin-top: 25px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 7px;
    min-height: 19px;
}

.right-context .right-context-processes .processes .proc_eng.closed .productions .slots_dom
{
    display: none;
}

.right-context .right-context-processes .processes .proc_eng.closed .productions .completeds_dom
{
    display: none;
}

.right-context .right-context-processes .processes .completeds
{
    position: relative;
    clear: both;
    margin-top: 15px;

    padding-left: 0px;

}



.right-context .right-context-processes .processes .boreholes
{
    position: relative;
    clear:both;
    padding-top: 25px;
    margin-top: 25px;
    padding-left: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 5px;
    min-height: 19px;
}

.right-context .right-context-processes .processes .boreholes.closed .ctlist {
    display: none;
}

.right-context .right-context-processes .processes .boreholes .sorter {
    position: relative;
    padding: 0px 0px 10px 0px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;

    color: gray;
    text-transform: uppercase;
    text-align: center;


    line-height: 10px;

}


.right-context .right-context-processes .processes .boreholes .sorter .sortby {
    position: relative;
    display: inline-block;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 17px 0px 7px;
    line-height: 27px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
.right-context .right-context-processes .processes .boreholes .sorter .sortby.active {
    color: var(--hud_bookmarkcolor);

}
.right-context .right-context-processes .processes .boreholes .sorter .sortby:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-processes .processes .boreholes .sorter .sortby .direction {
    position: absolute;
    display: none;
    top: 0px;
    right: 4px;
    bottom: 0px;
    width: 10px;

    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center left;
}

.right-context .right-context-processes .processes .boreholes .sorter .sortby .direction.asc {
    background-image: url(ico/arrow-141-16.png);
}

.right-context .right-context-processes .processes .boreholes .sorter .sortby .direction.desc {
    background-image: url(ico/arrow-142-16.png);
}


.right-context .right-context-processes .processes .boreholes .sorter .sortby.active .direction {
    display: block;
}
.right-context .right-context-processes .processes .boreholes .sorter .sortby:hover .direction {
    display: block;
}

.right-context .right-context-processes .processes .boreholes .info {
    position: relative;
    padding: 10px 0px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;

    color: gray;
    text-transform: uppercase;
    text-align: center;




}

.right-context .right-context-processes .processes .asatellites {
    position: relative;
    clear:both;
    padding-top: 25px;
    margin-top: 25px;
    padding-left: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 5px;
    min-height: 19px;
}

.right-context .right-context-processes .processes .asatellites.closed .ctlist {
    display: none;
}

.right-context .right-context-processes .processes .asatellites .info {
    position: relative;
    padding: 10px 0px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;

    color: gray;
    text-transform: uppercase;
    text-align: center;




}

.right-context .right-context-processes .processes .productions .before
{
    position: absolute;
    top: -11px;
    left: 25px;
    right: 5px;
    height: 42px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 0px 8px;
    background-color: black;
    box-sizing: border-box;


}


.right-context .right-context-processes .processes .boreholes .before,
.right-context .right-context-processes .processes .asatellites .before,
.right-context .right-context-processes .processes .proc_tac .before,
.right-context .right-context-processes .processes .proc_sci .before
{
    position: absolute;
    top: -11px;
    left: 25px;
    right: 5px;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 0px 8px;
    background-color: black;
    box-sizing: border-box;


}

.right-context .right-context-processes .processes .completeds .before
{
    position: relative;
    top: 0px;
    left: 0px;
    margin-right: 5px;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: #bdbaba;
    display: block;
    padding: 0px 8px;
    background-color: black;
    box-sizing: border-box;


}



.right-context .right-context-processes .processes .cquty {
    margin: 0px 4px;
    font-size: 10px;
    padding: 0px 6px 0px 6px;
    color: #ffbc00;
    position: relative;
    white-space: nowrap;
    line-height: 14px;
    display: inline;
}

.right-context .right-context-processes .processes .cquty:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0.5;
}

.right-context .right-context-processes .processes .cquty:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.5;
}


.right-context .right-context-processes .processes .productions:after,
.right-context .right-context-processes .processes .boreholes:after,
.right-context .right-context-processes .processes .asatellites:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 25px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    z-index: -1;
}









.right-context .right-context-processes .processes .process{
    position:relative;
    height:60px;
    width:60px;
    border: 2px solid white;
    margin:2px;
    color:white;
    float: left;
}

.right-context .right-context-processes .processes .process:before{
    content: '';
    position:absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: white;
}

.right-context .right-context-processes .processes .process .name{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
    color: black;
    font-size: 12px;
    display: table;
    overflow: hidden;
}

.right-context .right-context-processes .processes .process .name span{
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}



.right-context .right-context-processes .processes .process.used:before{
    background-color: rgb(150,150,150);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}
.right-context .right-context-processes .processes .process.free:before{
    background-color: white;
}

.right-context .right-context-processes .processes .process.add{
    cursor: pointer;
}
.right-context .right-context-processes .processes .process.add:before{
    background-color: black;
}
.right-context .right-context-processes .processes .process.add .name{
    color: white;

}

.right-context .right-context-processes .processes .process.add:hover:before{
    background-color: white;
}
.right-context .right-context-processes .processes .process.add:hover .name{
    color: white;
}





.right-context .right-context-processes .processes .process .progressbar{
    position: absolute;
    bottom: 6px;
    right: 6px;
    color: white;
    height: 7px;
    left: 6px;
    background-color: rgb(33,39,43);
}
.right-context .right-context-processes .processes .process .progressbar .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgb(255,255,255);
    top:0px
}




.right-context .right-context-processes .processes .need {
    display: block;
    position: relative;
    min-height: 22px;

    color: rgb(255,255,255);

    text-transform: uppercase;
    transition: top 0.2s;
}

.right-context .right-context-processes .processes .proc_sci.closed .need {
    display: none;
}


.right-context .right-context-processes .processes .need .new {
    display: block;
    background-color: transparent;
    position: absolute;
    top: -5px;
    right: 7px;
    color: #b9dbff;
    height: 28px;
    /* width: 60px; */
    padding: 0px 9px 0px 25px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
    text-align: left;
    /* border-radius: 4px; */
    line-height: 28px;
    min-width: 28px;
}

.right-context .right-context-processes .processes .need .new.quest-gray {
    color: gray;
}

.right-context .right-context-processes .processes .need .new:before {
    content: '+';
    display: block;
    position: absolute;
    top: 1px;
    right: 1px;
    left: 1px;
    bottom: 1px;
    text-align: left;
    font-family: var(--fontFaimly_button);
    font-size: 26px;
    line-height: 22px;
    padding: 0px 0px 0px 5px;
}

.right-context .right-context-processes .processes .need .new:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;

}

.right-context .right-context-processes .processes .need .new.quest-gray:after {
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%);

}

.right-context .right-context-processes .processes .need .new:not(.quest-gray):hover {
    color: white;

}

.right-context .right-context-processes .processes .need .new:not(.quest-gray):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-processes .processes .need .label {
    position: absolute;
    top: 0px;
    left: 10px;
    max-width: 40%;
}

.right-context .right-context-processes .processes .need .vals {
    text-align: left;
    padding-left: 135px;
    padding-bottom: 0px;
    display: block;
    min-height: 48px;
    border-bottom: 1px solid #9dc8f314;
    margin-bottom: 12px;
}

.right-context .right-context-processes .processes .need .vals .used {
    font-size: 14px;
    padding-right: 5px;
}

.right-context .right-context-processes .processes .need .vals .limit {
    font-size: 14px;
    padding-left: 5px;
}

.right-context .right-context-processes .processes .need .vals .premium {
    font-size: 14px;
    padding-left: 3px;
    color: #ffbc00;
}

.right-context .right-context-processes .processes .need .remark {
    text-align: left;
    position: relative;
    display: block;
    padding-right: 5px;
    color: gray;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-processes .processes .need .premhilight {
    position: relative;
    display: block;
    padding-right: 5px;
    color: #ffbc00;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    margin-top: 10px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    background-image: url(prembanner_icon.png);
    background-position: 4px 4px;
    background-repeat: no-repeat;
    background-size: 20px;
    font-size: 12px;
    padding: 3px 0px 5px 31px;
    min-height: 30px;
}



.right-context .right-context-processes .processes .boreholes .borehole {
    position: relative;
    height: 84px;
    margin-top: 5px;
    width: calc(100% - 5px);
    text-transform: uppercase;
    background-color: rgb(24 34 61);
}

.right-context .right-context-processes .processes .boreholes .borehole .name:hover > .subtext  {
    display: block;
}



body.pressedCTRL .right-context .right-context-processes .processes .boreholes .borehole {
    background-color: rgb(28 43 83);
    cursor: pointer;
    animation: none; /* Zruší animaci */
    box-shadow: 0px 0px 40px var(--highlitedPRESSEDboxShadow_color) inset;
    transition: box-shadow 300ms ease-out;
}

body.pressedCTRL .right-context .right-context-processes .processes .boreholes .borehole:hover{
    animation: highlitedPRESSED 800ms ease infinite;
}

.right-context .right-context-processes .processes .boreholes .borehole.idle {
    background-color: rgb(24 34 61);
}

.right-context .right-context-processes .processes .boreholes .borehole .thint {
    top: 50%;
    left: calc(100% - 0px);
    right: unset;
    bottom: unset;
    transform: translateY(-50%);

}

.right-context .right-context-processes .processes .boreholes .borehole .thint:before {
    border-right: 10px solid #ffbc00;
    border-left: unset;
    right: unset;
    left: -10px;
}
.right-context .right-context-processes .processes .boreholes .borehole .name {
    position: absolute;
    top: 8px;
    left: 5px;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    background-color: white;
    color: black;
    cursor:pointer;
}

body:not(.pressedCTRL):not(.pressedSHIFT) .right-context .right-context-processes .processes .boreholes .borehole:not(.uncontrolable) .name:hover {
    animation: blink 100ms linear 2 alternate;
}



.right-context .right-context-processes .processes .boreholes .borehole .cycles {
    text-align: right;
    position: absolute;
    right: 9px;
    top: 6px;

}



.right-context .right-context-processes .processes .boreholes .borehole .locality {
    text-align: right;
    position: absolute;
    top: 34px;
    left: 5px;
    color: #b1acac;

}

.right-context .right-context-processes .processes .boreholes .borehole .richness {
    text-align: right;
    position: absolute;
    top: 25px;
    right: 5px;

}
.right-context .right-context-processes .processes .boreholes .borehole .richness span {
    vertical-align: middle;
}



.right-context .right-context-processes .processes .boreholes .borehole .richness .rich {
    margin: 0px 0px 0px 5px;
    vertical-align: middle;
    color: #b1acac;
    position: relative;
}

.right-context .right-context-processes .processes .boreholes .borehole .richness .rich .txt {
    padding: 0px 4px;
}

.right-context .right-context-processes .processes .boreholes .borehole .richness .rich:hover > .subtext{
    display: block;
}

.right-context .right-context-processes .processes .boreholes .borehole .bhprocess {
    text-align: left;
    position: absolute;
    top: 45px;
    left: 5px;
    right: 5px;
    bottom: 0px;
    color: gray;
    font-size: 12px;

}

.right-context .right-context-processes .processes .boreholes .borehole .bhprocess .progressbar {
    position: absolute;
    top: 10px;
    color: white;
    height: 7px;
    left: 0px;
    background-color: rgb(63,69,73);
    overflow: hidden;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

.right-context .right-context-processes .processes .boreholes .borehole.idle .bhprocess .progressbar {
    background-color: rgb(40 62 95 / 98%);
    border-left: 2px solid rgba(255,255,255,0.1);
    border-right: 2px solid rgba(255,255,255,0.1);
}

.right-context .right-context-processes .processes .boreholes .borehole .bhprocess .progressbar .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgb(255,255,255);
    top:0px;
}

.right-context .right-context-processes .processes .boreholes .borehole .bhprocess .resttime {
    color: white;
    left: 1px;
    position: absolute;
    white-space: nowrap;
    top: 21px;
    text-transform: initial;
}

.right-context .right-context-processes .processes .boreholes .borehole.idle .bhprocess .resttime {
    position: absolute;
    top: 22px;
    white-space: nowrap;
    color: #b1acac;
}

.right-context .right-context-processes .processes .boreholes .borehole.complete .bhprocess .resttime {
    animation: highlited 1000ms linear infinite;
    position: absolute;
    top: 22px;
    white-space: nowrap;
    color: white;
}

.right-context .right-context-processes .processes .boreholes .borehole .trip {
    text-align: right;
    position: absolute;
    top: 66px;
    right: 8px;
    height: 29px;
    color: #b1acac;
    font-size: 12px;

}

.right-context .right-context-processes .processes .boreholes .borehole .trip .distance {
    position: absolute;
    top: 0px;
    right: 0px;
    text-transform: initial;
    white-space: nowrap;


}


.right-context .right-context-processes .processes .boreholes .borehole .trip .arrived {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 10px;
    white-space: nowrap;
    display: none;

}

.right-context .right-context-processes .processes .boreholes .borehole .trip .duration {
    position: absolute;
    top: 12px;
    right: 30px;
    height: 10px;
    white-space: nowrap;
    display: none;
}

.right-context .right-context-processes .processes .boreholes .borehole .trip .flyto {

    display: none;

    position: absolute;
    right: 0px;
    bottom: 5px;
    color: rgba(0,0,0,1);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    height: 25px;
    width: 25px;
    background-color: rgba(255,255,255,0.05);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url(ico/controls_arrive.png);
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 0.5;
    padding: 0px;
}

.right-context .right-context-processes .processes .boreholes .borehole .trip .flyto:hover{

    animation: blink 100ms linear 2 alternate;

}


.right-context .right-context-processes .processes .asatellites .satellite {
    position: relative;
    height: 56px;
    margin-top: 5px;
    color: rgb(255,255,255);
    width: calc(100% - 5px);
    text-transform: uppercase;
    background-color: rgb(24 34 61);

}


.right-context .right-context-processes .processes .asatellites .satellite .servicelife {
    display: none;
    text-align: right;
    position: absolute;
    right: 9px;
    top: 6px;
}


.right-context .right-context-processes .processes .asatellites .satellite .satrechargetimer {
    display: block;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}
.right-context .right-context-processes .processes .asatellites .satellite .thint {
    top: -6px;
    left: 100px;
    right: unset;
    animation: highlited 1000ms linear infinite;
}

.right-context .right-context-processes .processes .asatellites .satellite .thint:before {
    border-right: 10px solid #ffbc00;
    border-left: unset;
    right: unset;
    left: -10px;
}
.right-context .right-context-processes .processes .asatellites .satellite .name {
    position: absolute;
    top: 8px;
    left: 5px;
    text-align: left;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);

}

.right-context .right-context-processes .processes .asatellites .satellite .name.clickable {
    cursor: pointer;
    background-color: white;
    text-shadow: none;
    color: black;
}

.right-context .right-context-processes .processes .asatellites .satellite .name.clickable:hover {
    background-color: white;
    text-shadow: none;
    color: black;

    animation: blink 100ms linear 2 alternate;
}



.right-context .right-context-processes .processes .asatellites .satellite .nextactviity {
    text-align: left;
    position: absolute;
    top: 20px;
    left: 10px;
    bottom: 0px;
    color: gray;
    font-size: 9px;
    line-height: 12px;
}

.right-context .right-context-processes .processes .asatellites .satellite .locality {
    text-align: right;
    position: absolute;
    top: 34px;
    left: 5px;
    color: gray;
}



.right-context .right-context-processes .processes .asatellites .satellite .bhprocess {
    text-align: left;
    position: absolute;
    top: 20px;
    left: 10px;
    bottom: 0px;
    color: gray;
    font-size: 9px;
    line-height: 12px;

}






.right-context .right-context-crew {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:-5px;
}
.right-context .right-context-crew .crewcapacity {
    position: absolute;
    top: 26px;
    left: 0px;
    right: 0px;
    height: 36px;
    background-color: white;
    text-transform: uppercase;
    font-size: 9px;
}
.right-context .right-context-crew .crewcapacity .crewbar {
    position: absolute;
}
.right-context .right-context-crew .crewcapacity .crewbar .crewbarbox{
    height: 7px;
    width: 280px;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid rgba(0,0,0,0.8);
    border-right: 2px solid rgba(0,0,0,0.8);
    background-color: rgba(0,0,0,0.4);
    top: 23px;
    left: 10px;
}
.right-context .right-context-crew .crewcapacity .crewbar .crewbarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    bottom: 0px;
}
.right-context .right-context-crew .crewcapacity .crewbar .crewbarbox span{
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: black;
    font-family: var(--fontFaimly_button);
}

.right-context .right-context-crew .crewcapacity .crewbar .crewbarbox .cbef {
    display: block;

    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: black;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;

}

.right-context .right-context-crew .astronauts{
    position: absolute;
    top: 63px;
    right: 0px;
    bottom: 0px;
    left:0px;
    overflow-y: scroll;
    padding-bottom: 45px;
    padding-top: 20px;

}


.right-context .right-context-crew .astronauts .module{
    position: relative;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 100px;
    padding-bottom: 0px;
    padding-right: 3px;
    min-height: 45px;
}
.right-context .right-context-crew .astronauts .module:not(.nostation) {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
    margin-bottom: 30px;
    padding-top: 15px;
}
.right-context .right-context-crew .astronauts .module:not(.nostation):before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);

}

.right-context .right-context-crew .astronauts .module .crew{

    padding-bottom: 10px;

}

.right-context .right-context-crew .astronauts .module .module-health{
    position: absolute;
    top: 0px;
    left: -90px;
    bottom: 0px;
    width: 0px;

}

.right-context .right-context-crew .astronauts .module .module-health .mhealth{
    position: absolute;
    top: calc(50% - 40px);
    height: 7px;
    left: 0px;
    width: 80px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
    transform: translateY(-50%);
}

.right-context .right-context-crew .astronauts .module .module-health  .mhealth .counter{
    position: absolute;
    bottom: 14px;
    line-height: 6px;
    left: 0px;
    right: 0px;
    color: white;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;

}

.right-context .right-context-crew .astronauts .module .module-health  .mhealth .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}

.right-context .right-context-crew .astronauts .module.yellow .module-health  .mhealth .bar{
    background-color: var(--hud_health_bar_color_050);
}
.right-context .right-context-crew .astronauts .module.red .module-health  .mhealth .bar{
    background-color: var(--hud_health_bar_color_020);
}

.right-context .right-context-crew .astronauts .module .module-info{
    position: absolute;
    top: 0px;
    left: 10px;
    right: 5px;
}
.right-context .right-context-crew .astronauts .module .module-info .name{
    font-size: 10px;
    position: absolute;
    top: -7px;
    text-transform: uppercase;
    color: white;
    display: inline-block;
    padding: 1px 7px;
}



.right-context .right-context-crew .astronauts .module .module-info .name.active{
    background-color: white;
    color: black;
    cursor: pointer;
}

.right-context .right-context-crew .astronauts .module .module-info .name.active:hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-crew .astronauts .module .module-info .weapons {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 0px;

}

.right-context .right-context-crew .astronauts .module .module-info .weapons .weapon {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 35px;
    margin: 0px 0px;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


.right-context .right-context-crew .astronauts .module .module-info .weapons .weapon .name {
    position: absolute;
    bottom: 10px;
    right: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    top: unset;
    display: block;
    text-shadow: var(--shadow_textfull);
}




.right-context .right-context-crew .astronauts .module .icon{
    position: absolute;
    top: 0px;
    right: calc(100% + 10px);
    bottom: 0px;
    width: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: center;
}

.right-context .right-context-crew .astronauts .module .icon .moduleminiature{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    /* bottom: 0px; */
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    filter: grayscale(1) brightness(1.5) drop-shadow(0px 0px 5px rgba(0, 112, 202, 0.5));
    background-position: center;
    transform: rotate(0deg) translateX(-50%) translateY(-49%);
    aspect-ratio: 1/1;
    max-height: 85px;
}

.right-context .right-context-crew .astronauts .module .icon .thint{
    top: calc(50% + 30px);
    bottom: unset;
    transform: translateX(-50%) translateY(-50%);
    right: unset;
    left: 50%;
}
.right-context .right-context-crew .astronauts .module .icon .thint:before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    position: absolute;
    top: -20px;
    right: calc(50% - 10px);
}

.right-context .right-context-crew .astronauts .module .icon .background {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: radial-gradient(ellipse at center, rgb(0 112 202 / 20%) 0%, transparent 75%);

}

.right-context .right-context-crew .astronauts .module .icon:hover .background {

    background-image: radial-gradient(ellipse at center, rgb(0 112 202 / 30%) 0%, transparent 75%);
}

.right-context .right-context-crew .astronauts .module .icon:hover{
    /*animation: blink 100ms linear 2 alternate;*/
}

.right-context .right-context-crew .astronauts .module .icon:hover .moduleminiature{
    filter: grayscale(1) brightness(1.8) drop-shadow(0px 0px 5px rgba(0, 112, 202, 0.5));
    animation: blink 100ms linear 2 alternate;
}


.right-context .right-context-crew .astronauts .fs{
    position: relative;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 100px;
    padding-bottom: 0px;
    padding-right: 3px;
}
.right-context .right-context-crew .astronauts .fs:not(.nostation) {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-top: 20px;

}
.right-context .right-context-crew .astronauts .fs:not(.nostation):before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);

}


.right-context .right-context-crew .astronauts .fs .icon{
    position: absolute;
    top: calc(50% - 54px);
    left: -80px;
    width: 60px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    filter: grayscale(1) brightness(1) drop-shadow(0px 0px 13px rgb(20 101 78 / 53%));
    background-position: center;
}

.right-context .right-context-crew .astronauts .fs .icon:hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-crew .astronauts .unsorted{
    position: relative;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 15px;
    padding-bottom: 0px;
    padding-right: 3px;
}
.right-context .right-context-crew .astronauts .unsorted:not(.nostation) {
    margin-top: 20px;
    padding-top: 0px;
}
.right-context .right-context-crew .astronauts .unsorted:not(.nostation):before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
}

.right-context .right-context-crew .astronauts .stasis {
    position: relative;
    padding-left: 0px;
    margin-right: 0px;
    padding-bottom: 0px;
    padding-right: 3px;
    margin-top: 20px;
    padding-top: 15px;
    margin-left: 15px;
    padding-right: 3px;
}

.right-context .right-context-crew .astronauts .stasis .astronaut .name{
    font-family: var(--fontFaimly_default);
    background-color: transparent;
    color: white;
    padding: 2px 6px;
    cursor: default;
}

.right-context .right-context-crew .astronauts .stasis .astronaut .name:hover{
    animation: none;
}

.right-context .right-context-crew .astronauts .astronaut{
    position: relative;
    height: 96px;
    margin: 0px 0px 0px 0px;
}

.right-context .right-context-crew .astronauts .astronaut .name{
    position: absolute;
    bottom: 62px;
    left: 83px;
    font-family: var(--fontFaimly_button);
    height: 14px;
    line-height: 14px;
    background-color: white;
    color: black;
    padding: 2px 6px;
    cursor: pointer;
    max-width: 100px;
    white-space: nowrap;
    clip-path: var(--clip_whitelink);
}
.right-context .right-context-crew .astronauts .astronaut .name:hover{
    animation: blink 100ms linear 2 alternate;
}

.right-context .right-context-crew .astronauts .unsorted .astronaut .name{
    max-width: 170px;
}

.right-context .right-context-crew .astronauts .stasis .astronaut .name{
    max-width: 170px;
}

.right-context .right-context-crew .astronauts .astronaut .alvl{

    position: absolute;
    bottom: 5px;
    left: 3px;


    font-size: 13px;
    width: 32px;
    height: 32px;
    text-shadow: var(--shadow_textfull);
    color: rgb(255,255,255);
    text-align: center;
    line-height: 60px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    display: none;

}

.right-context .bottom-rcactions {
    position: relative;
    text-align: center;
}

.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_1{
    background-image: url(./proffesions/ico/1.png);
}

.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_2{
    background-image: url(./proffesions/ico/2.png);
}

.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_3{
    background-image: url(./proffesions/ico/3.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_4{
    background-image: url(./proffesions/ico/4.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_5{
    background-image: url(./proffesions/ico/5.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_6{
    background-image: url(./proffesions/ico/6.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_7{
    background-image: url(./proffesions/ico/7.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_8{
    background-image: url(./proffesions/ico/8.png);
}
.right-context .right-context-crew .astronauts .astronaut .alvl.icon_proffesion_9{
    background-image: url(./proffesions/ico/9.png);
}


.right-context .right-context-crew .astronauts .astronaut .proffesion{
    position: absolute;
    bottom: 1px;
    left: 23px;


    font-size: 10px;
    text-transform: uppercase;
    width: 140px;
    height: 14px;
    line-height: 14px;

    text-shadow:var(--shadow_textfull);
}
.right-context .right-context-crew .astronauts .astronaut .race{
    position: absolute;
    top: 18px;
    left: 60px;
    color: rgb(255,255,255);
    font-size: 9px;
    text-transform: uppercase;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    height: 16px;
    line-height: 16px;
    width: 140px;
}
.right-context .right-context-crew .astronauts .astronaut .imgprofile{
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
    background-size: 108px;
    box-sizing: border-box;
    filter: brightness(1.0) grayscale(0.5);
    background-position: -17px bottom;
    background-repeat: no-repeat;
    z-index: -1;
}

.right-context .right-context-crew .astronauts .astronaut .imgprofile:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgba(20,20,20,1) 0%, rgba(0,0,0,0) 80%);
}



.right-context .right-context-crew .astronauts .astronaut.death {
    background-color: rgb(100,100,100);
}
.right-context .right-context-crew .astronauts .astronaut.death .name{
    color: rgb(0,0,0);
}
.right-context .right-context-crew .astronauts .astronaut.death .race{
    color: rgb(0,0,0);
}
.right-context .right-context-crew .astronauts .astronaut.death .proffesion{
    color: rgb(0,0,0);
}
.right-context .right-context-crew .astronauts .astronaut.death:before{
    display: none;
}
.right-context .right-context-crew .astronauts .astronaut.death:after{
    display: none;
}

.right-context .right-context-crew .astronauts .astronaut .button{
    position: absolute;
    top: 11px;
    left: 38px;
    height: 36px;
    line-height: 37px;
    width: 35px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    color: rgb(255 169 34);
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    padding: 0px;
    font-family: var(--fontFaimly_button);
    filter: drop-shadow(0px 0px 7px gold);
    font-weight: bold;
    text-shadow:
        -1px -1px 0px rgba(0,0,0,0.4),
        0px -1px 0px rgba(0,0,0,0.4),
        1px -1px 0px rgba(0,0,0,0.4),
        -1px  0px 0px rgba(0,0,0,0.4),
        1px  0px 0px rgba(0,0,0,0.4),
        -1px  1px 0px rgba(0,0,0,0.4),
        0px  1px 0px rgba(0,0,0,0.4),
        1px  1px 0px rgba(0,0,0,0.4);
}

.right-context .right-context-crew .astronauts .astronaut .button:before{
    background-color: unset;
    box-shadow: unset;
}

.right-context .right-context-crew .astronauts .astronaut .button.revivestasis:hover
.right-context .right-context-crew .astronauts .astronaut .button.lvl:hover,
.right-context .right-context-crew .astronauts .astronaut .button.prof:hover,
.right-context .right-context-crew .astronauts .astronaut .button.death:hover,
.right-context .right-context-crew .astronauts .astronaut .button.infectious:hover,
.right-context .right-context-crew .astronauts .astronaut .button.vaccinate:hover,
.right-context .right-context-crew .astronauts .astronaut .button.adult:hover,
.right-context .right-context-crew .astronauts .astronaut .button.healed-zombie:hover{
    animation: blink 100ms linear 2 alternate;
    background-color: unset;
}


.right-context .right-context-crew .astronauts .astronaut .button.revivestasis{
    background-image: url(./ico/stasisrevive.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.lvl{
    background-image: url(./ico/level_up.png), url(./ico/level_up.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.prof{
    background-image: url(ico/select_prof_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.death{
    background-image: url(ico/death_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.infectious{
    background-image: url(ico/hazard_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.vaccinate{
    background-image: url(ico/vacc_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.adult{
    background-image: url(ico/adult_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button.healed-zombie{
    background-image: url(ico/zombie_24.png);
}
.right-context .right-context-crew .astronauts .astronaut .button:after{
    display: none;
}





.right-context .right-context-crew .astronauts .astronaut .icon{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}


.right-context .right-context-crew .astronauts .astronaut .icon.robot{
    display: none;
    background-image: url(ico/robot_24.png);
}

.right-context .right-context-crew .astronauts .astronaut .adultcounter{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    font-size: 12px;
    width: 70px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    text-align: center;
    line-height: 15px;
}

.right-context .right-context-crew .astronauts .astronaut .adultcounter span{
    display: block;
}

.right-context .right-context-crew .astronauts .astronaut .skils{
    position: absolute;
    top: 15px;
    right: 11px;
    color: white;
    font-size: 12px;
}
.right-context .right-context-crew .astronauts .astronaut .skils .skill{
    width: 25px;
}


.right-context .right-context-crew .astronauts .astronaut .health{
    position: absolute;
    bottom: 34px;
    height: 7px;
    left: 83px;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}

.right-context .right-context-crew .astronauts .astronaut .health .counter{
    position: absolute;
    bottom: 0px;
    line-height: 6px;
    right: calc(100% + 5px);
    box-sizing: border-box;
    z-index: 1;
    font-size: 10px;
    text-align: right;
    display: none;
    white-space: nowrap;
}

.right-context .right-context-crew .astronauts .astronaut .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

.right-context .right-context-crew .astronauts .astronaut .exp{
    position: absolute;
    bottom: 47px;
    height: 7px;
    left: 83px;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_exp_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}
.right-context .right-context-crew .astronauts .astronaut .exp .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_exp_bar_color);
}

.right-context .right-context-crew .astronauts .astronaut .exp .counter{
    position: absolute;
    bottom: 0px;
    line-height: 6px;
    right: calc(100% + 5px);
    box-sizing: border-box;
    z-index: 1;
    font-size: 10px;
    text-align: right;

    white-space: nowrap;
    color: var(--hud_exp_text_color);
    display: none;
}

.right-context .right-context-crew .astronauts .astronaut .tes{
    position: absolute;
    bottom: 6px;
    right: 0px;
    z-index: 10;
}


.right-context .right-context-crew .astronauts .astronaut .tes .tactical,
.right-context .right-context-crew .astronauts .astronaut .tes .engineer,
.right-context .right-context-crew .astronauts .astronaut .tes .science{



    white-space: nowrap;

}



.right-context .right-context-crew .astronauts .astronaut .hover{
    position:absolute;
    left:0px;
    top:50px;
    height:70px;
    width:100%;
}
.right-context .right-context-crew .astronauts .astronaut .hover table{
    position: absolute;
    left: 5px;
    right: 5px;
    top: 7px;
    z-index: 1;
}
.right-context .right-context-crew .astronauts .astronaut .hover table th{
    color:white;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:25%;
    text-transform:uppercase;
}
.right-context .right-context-crew .astronauts .astronaut .hover table td{
    color: rgb(238,233,119);
    font-size: 12px;
    padding-left: 5px;
    width:25%;
    line-height: 14px;
}




.navigation{
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 50px;
    padding: 0px;
    cursor: default;
    width: 1px;
    transition: left 0.2s;
}

.navigation.hidden{

    left: -100%;

}

.navigation .location {
    background: url(ico/ico_solarsystem_128.png) 0px 3px no-repeat;
    padding-left: 23px;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    background-size: 16px;
}
.navigation .sectorname{
    display:inline-block;
    color:white;
    font-size:11px;
    height:23px;
    line-height:23px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);

}
.navigation a.sectorname{
    color:black;
    background-color: white;
    padding-left: 7px;
    padding-right: 7px;
    text-shadow: none;
}
.navigation a{
    text-decoration:none;
}
.navigation .basename{
    color:white;
    background:url('ico/ico_base2_128.png') 0px 0px no-repeat;
    padding-left:23px;
    font-size:14px;
    height:22px;
    line-height:23px;
    background-size:16px;
}
.navigation .csname{
    color:white;
    background:url('ico/ico_base2_128.png') 0px 0px no-repeat;
    padding-left:23px;
    font-size:14px;
    height:22px;
    line-height:23px;
    background-size:16px;
}
.navigation .flightinfo{
    color: white;
    padding-left: 23px;
    font-size: 13px;
    margin-top: 5px;
    min-height: 22px;
    width: 1px;
    background-size: 16px;
    white-space: nowrap;
    text-shadow: var(--shadow_textfull);

}
.navigation .commands{
    position: relative;
    margin-left:23px;
    margin-top:9px;
}
.navigation .commands #undockbutton {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    float: left;
}

.navigation .commands #undockbutton .thint {
    top: 1px;
    left: calc(100% + 8px);
    right: unset;
    animation: highlited 1000ms linear infinite;
}

.navigation .commands #undockbutton .thint:before {
    border-right: 10px solid #ffbc00;
    border-left: unset;
    right: unset;
    left: -10px;
}

.navigation .commands #stopbutton {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    float: left;
}
.navigation .commands #returnbutton {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    float: left;
}
.navigation .commands #warpbutton {
    position: relative;
    display: block;
    float: left;
    top: 0px;
    left:0px;
    padding-right: 10px;
    height: 24px;
    font-size: 12px;
    padding-left: 30px;
    line-height: 24px;
    cursor: pointer;
    filter: invert(1);
    margin-right: 5px;
    margin-top: 2px;
    text-transform: uppercase;
    /*font-family: var(--fontFaimly_button);*/
}

.navigation .commands #warpbutton:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;

    clip-path: var(--clip_button_right);
    z-index: -1;
    background-image:url('ico/ico_warp_128.png');
    background-size:18px;
    background-position: 8px 3px;
    background-repeat: no-repeat;
}




.navigation .commands #warpbutton:hover{
    animation:blink 100ms linear 2 alternate;
}
.navigation .commands #warpbutton.hidden {
    display: none;
}

.navigation .commands #warpbutton.disabled {
    cursor: default;
}
.navigation .commands #warpbutton.disabled:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: gray;

    clip-path: var(--clip_button_right);
    z-index: -1;
    background-image:url('ico/ico_warp_128.png');
    background-size:18px;
    background-position: 8px 3px;
    background-repeat: no-repeat;
}


.navigation .commands #warpbutton.disabled:hover{
    animation:none;
}
.navigation .commands #warpbutton .thint  {
    animation: unset;
    left: calc(50% - 30px);
    text-align: center;
    width: 60px;
    bottom: -40px;
    top: unset;
    right: unset;
    filter: invert(1);
}

.navigation .commands #warpbutton .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-top: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    bottom: unset;
    top: -10px;
}


.mapnavigation{
    color: white;
    z-index: 100;
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0px;
    cursor: default;
    background-color: rgba(0,0,0,.85);
    padding: 10px;
    width: 200px;
    border-left: 2px solid white;
}
.mapnavigation .location {
    background: url(ico/ico_solarsystem_128.png) 0px 0px no-repeat;
    padding-left: 23px;
    height: 22px;
    background-size: 16px;
}
.mapnavigation .sectorname{
    display: block;
    color: white;
    position: relative;
    cursor: default;
    text-transform: uppercase;
    font-size: 12px;
    padding: 0px 0px 0px 0px;
    height: auto;
    line-height: 18px;
}
.mapnavigation a{
    text-decoration:none;
}
.mapnavigation .basename{
    color:white;
    background:url('ico/ico_base2_128.png') 0px 5px no-repeat;
    padding-left:23px;
    font-size:14px;
    background-size:16px;
    color: white;
}

.mapnavigation .basename a{
    display: inline-block;
    color: black;
    font-size: 12px;
    height: 23px;
    line-height: 22px;
    text-transform: uppercase;
    background-color: white;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 25px;
    padding: 0px 7px;
    font-family: var(--fontFaimly_header);
}
.mapnavigation .csname{
    color:white;
    background:url('ico/ico_base2_128.png') 0px 0px no-repeat;
    padding-left:23px;
    font-size:14px;
    height:22px;
    line-height:23px;
    background-size:16px;
}
.mapnavigation .flightinfo{
    color:white;
    background:url('ico/ico_trip_128.png') 0px 5px  no-repeat;
    padding-left:23px;
    font-size:11px;
    margin-top:5px;
    min-height:22px;
    background-size:16px;
    text-transform: uppercase;
}
.mapnavigation .commands{
    position: relative;
    margin-left:23px;
}
.mapnavigation .commands #undockbutton {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    float: left;
}
.mapnavigation .commands .warp {
    position: relative;
    display: block;
    float: left;
    top: 0px;
    left:0px;
    background-image:url('ico/ico_warp_128.png');
    height: 24px;
    font-size: 12px;
    width: 24px;
    line-height: 24px;
    background-size:18px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: black;
    filter: invert(1);
    margin-right: 5px;
    margin-top: 2px;
}
.mapnavigation .commands warp:hover{
    animation:blink 100ms linear 2 alternate;
}

#selection {
    position: absolute;
    z-index: 9997;
    bottom: 110px;
    left: 18px;
    width: 100%;
    direction: rtl;
    max-width: calc(100% - 450px);
    display: flex;
    flex-wrap: wrap-reverse;
    height: 0px;
    align-content: flex-start;
}

.rightcontext #selection {

    max-width: calc(100% - 570px);
}

.fleetships #selection {

    max-width: calc(100% - 524px);
}


#selection-commands {
    position: absolute;
    z-index: 10000;
    bottom: 23px;
    left: calc(100% + 10px);
}

#selection-commands .command {
    position: absolute;
    width: 30px;
    height: 30px;
    direction: ltr;
    margin: 3px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 1;
    transition: opacity,box-shadow 0.2s linear;
}


#selection-commands .command:before {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    filter: opacity(0.8);
    background-color: var(--background-command-fleets-effect-color);
}

#selection-commands .command:hover > .subtext {
    display: block;

}

#selection-commands .command.bgoretreat:before {

    background-size: 16px;
}

#selection-commands .command.bgocontinue:before {

    background-size: 16px;
}

#selection-commands .command.bstop:before {

    background-color: var(--background-command-fleets-effect-color-red);
}
#selection-commands .command:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size:

        calc(100% - 4px) 1px,

        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        36% 3px,
        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,
        bottom center,
        bottom 1px center;
}


#selection-commands .command:hover {
    /*animation: blink 100ms linear 2 alternate;*/
}

#selection-commands .command:hover:after {
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-hover) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-hover) 0%, var(--border-command-fleets-effect-color2) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-hover) 0%, var(--border-command-fleets-effect-color) 100%);
}

#selection-commands .command.clicked:after {
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-clicked) 0%, var(--border-command-fleets-effect-color2-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-clicked) 0%, var(--border-command-fleets-effect-color2-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-clicked) 0%, var(--border-command-fleets-effect-color-clicked) 100%);
}

#selection-commands .command.clicked {
    box-shadow:
        14px 0px 20px -9px rgba(0,112,202,.6),
        14px 0px 10px -11px rgba(11,183,226,.65),
        -14px 0px 20px -9px rgba(0,112,202,.6),
        -14px 0px 10px -11px rgba(11,183,226,.65);
}



#selection-commands .command.clicked:before {
    background-color: var(--background-command-fleets-effect-color_hilight);
}

#selection-commands .command.goto {
    bottom: 38px;
    left: 38px;
}
#selection-commands .command.goto:before {
    background-image: url(ico/ico_crosshair_128.png);
}

#selection-commands .command.goat {
    bottom: 38px;
    left: 0px;
}
#selection-commands .command.goat:before {
    background-image: url(ico/ico_arrow_move_128.png);
}

#selection-commands .command.fretreat {
    bottom: 0px;
    left: 38px;
}
#selection-commands .command.fretreat:before {
    background-image: url(ico/weapon_reload_64.png);
}

#selection-commands .command.broll {
    bottom: 0px;
    left: 76px;
}
#selection-commands .command.broll:before {
    background-image: url(ico/cmd-roll-32.png);
}

#selection-commands .command.opendialog {
    bottom: -38px;
    left: 0px;
}
#selection-commands .command.opendialog:before {
    background-image: url(ico/list-2-64.png);
}


#selection-commands .command.unselectall {
    bottom: -38px;
    left: 38px;
}
#selection-commands .command.unselectall:before {
    background-image: url(ico/x-mark-4-64.png);
}

#selection-commands .command.fdockmothership {
    bottom: 0px;
    left: 0px;
}
#selection-commands .command.fdockmothership:before {
    background-image: url(ico/goin-32.png);
}

#selection-commands .command.bstop {
    bottom: 0px;
    left: 152px;
}
#selection-commands .command.bstop:before {
    background-image: url(ico/ico_x_128.png);
}

#selection-commands .command.bgoretreat {
    bottom: 38px;
    left: 114px;
}
#selection-commands .command.bgoretreat:before {
    background-image: url('ico/ico_retreat_32.png');
}

#selection-commands .command.bgohome {
    bottom: 38px;
    left: 152px;
}
#selection-commands .command.bgohome:before {
    background-image: url('ico/ico_return_32a.png');
}

#selection-commands .command.bgocontinue {
    bottom: 38px;
    left: 76px;
}
#selection-commands .command.bgocontinue:before {
    background-image: url('ico/ico_continue_32.png');
}


#selection-commands .command.brotate {
    bottom: 0px;
    left: 114px;
}
#selection-commands .command.brotate:before {
    background-image: url(ico/cmd-rotate-32.png);
}

#selection-commands .command.bfs_release {
    bottom: -38px;
    left: 76px;
}
#selection-commands .command.bfs_release:before {
    background-image: url(ico/goout-32.png);
}

#selection-commands .command.bfs_recall {
    bottom: -38px;
    left: 114px;
}
#selection-commands .command.bfs_recall:before {
    background-image: url(ico/goin-32.png);
}





#selection-commands .command.hidden {
    opacity: 0;
    cursor: default;
    visibility: hidden;
}
#selection-commands .command.hidden:hover {
    animation: none;
}

#selection .selection {
    position: relative;
    height: 66px;
    width: 86px;
    background-color: var(--background-fleets-effect-color);
    margin: 8px 8px;
    display: inline-block;
    cursor: pointer;
    direction: ltr;
}


#selection .selection:before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right:-5px;
    top: -5px;
    bottom: -5px;

    background-image:
        linear-gradient(0deg, var(--border-fleets-effect-color) 0%, var(--border-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color) 0%, var(--border-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color) 0%, var(--border-fleets-effect-color) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color) 0%, var(--border-fleets-effect-color) 100%),

        linear-gradient(0deg, var(--border-fleets-effect-color) 0%, var(--border-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size:
        36% 3px,
        calc(100% - 4px) 1px,
        1px calc(100% - 4px),
        1px calc(100% - 4px),

        calc(100% - 4px) 1px;
    background-position:
        top center,
        top 1px center,
        center left 1px,
        center right 1px,

        bottom 1px center;

}

#selection .selection {
    box-shadow:
        8px 0px 10px -11px rgba(11,183,226,.45),
        -8px 0px 10px -11px rgba(11,183,226,.45),
        0px 0px 11px 6px #121212 inset,
        0px 0px 11px 6px #19203a inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
}

#selection .selection.site {
    background-color: #674703;
    box-shadow: 8px 0px 10px -11px rgb(226 120 11 / 45%), -8px 0px 10px -11px rgb(226 180 11 / 45%), 0px 0px 11px 6px #121212 inset, 0px 0px 11px 6px #271702 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
}

#selection .selection.site .title {
    color: #f9df10;
}

#selection .selection.site .distance {
    color: #b9ab89;
}

#selection .selection.n,
#selection .selection.ng{
    background-color: #270708;
    box-shadow: 8px 0px 10px -11px rgb(226 11 11 / 45%), -8px 0px 10px -11px rgb(226 11 11 / 45%), 0px 0px 11px 6px #121212 inset, 0px 0px 11px 6px #270202 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
}
#selection .selection.f {
    background-color: #04232a;
    box-shadow: 8px 0px 10px -11px rgb(11 226 102 / 45%), -8px 0px 10px -11px rgb(11 226 102 / 45%), 0px 0px 11px 6px #121212 inset, 0px 0px 11px 6px #152e31 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
}

#selection .selection.m {

}
#selection .selection:hover:before {
    background-image:
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%),
        linear-gradient(0deg, var(--border-fleets-effect-color-hover) 0%, var(--border-fleets-effect-color-hover) 100%);

}

#selection .selection .title {
    position: absolute;
    top: 47px;
    right: 4px;
    color: white;
    font-size: 11px;
    left: 4px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    text-align: center;
    line-height: 13px;
    max-height: 26px;
    padding: 0px;
    overflow: hidden;
    transform: translateY(-50%);
    min-width: unset;
    max-width: unset;
    text-align: center;
    width: unset;
}



#selection .selection .aisublabel {
    position: absolute;
    display: none;
    right: 50%;
    transform: translateX(50%);
    font-size: 12px;
    bottom: calc(100% - 15px);
    background-color: var(--subtext_color-background);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 1000;
    line-height: initial;
    text-align: left;
    color: white;
}

#selection .selection .aisublabel:before {
    content: "";
    display: block;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    bottom: -5px;
    right: calc(50% - 5px);
    border-top: 5px solid var(--subtext_color-background);

}

#selection .selection:hover .aisublabel {
    display: block;
    animation: var(--animation-subtext-fadein);
    filter: var(--subtext_shadow);
    pointer-events: none;
}

#selection .selection .simg {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    bottom: 30px;
    filter: contrast(1.1) brightness(1.2);
}

#selection .selection.s .simg {
    top: 8px;
    bottom: 25px;

}

#selection .selection.b .simg,
#selection .selection.m .simg {
    top: 5px;
    bottom: 17px;
}

#selection .selection.n .simg {
    top: 4px;
    bottom: 30px;

}

#selection .selection.own .simg {
    filter: contrast(1.1) brightness(1.2) drop-shadow(0px 0px 6px rgba(100, 255, 255, 0.5));
}

#selection .selection.npc .simg {
    filter: contrast(1.1) brightness(1.2);
}

#selection .selection.evil .simg{
    filter: contrast(1.1) brightness(1.2) drop-shadow(0px 0px 6px rgba(255,80,80,0.5));
}

#selection .selection.ng .simg{
    filter: contrast(1.1) brightness(1.2) drop-shadow(0px 0px 6px rgba(255,80,80,0.5));
    background-image: url(battlelocks/npc/ng.png);
}

#selection .selection:not(.evil):not(.own):not(.npc):not(.ng) .simg {
    filter: contrast(1.1) brightness(1.2) drop-shadow(0px 0px 6px rgba(255,168,0,0.9));
}

#selection .selection .health{
    position: absolute;
    bottom: 12px;
    height: 4px;
    left: 2px;
    right: 2px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}

#selection .selection.n .health {
    bottom: 7px;
}

#selection .selection.n .title,
#selection .selection.ng .title{
    top: unset;
    color: rgb(255, 80, 80);
    transform: none;
    bottom: 16px;
}

#selection .selection.s:not(.npc) .title {
    top: 47px;
    color:  rgb(255,179,0);
}

#selection .selection.s.own .title {
    color:  rgb(100,255,255);
}



#selection .selection.b:not(.npc) .title {
    top: 47px;
    color:  rgb(255,179,0);
}

#selection .selection.b.own .title {
    color:  rgb(100,255,255);
    top: unset;
    transform: none;
    bottom: 12px;
}

#selection .selection.m .title {
    color:  rgb(100,255,255);
    top: unset;
    transform: none;
    bottom: 12px;
}

#selection .selection.o .title {
    top: 47px;
}

#selection .selection.o.own .title {
    color:  rgb(100,255,255);
}

#selection .selection.f.own .title {
    top: unset;
    color:  rgb(100,255,255);
    transform: none;
    bottom: 21px;
}

#selection .selection .health:hover .counter {
    display: block;
}

#selection .selection .health .counter,
#selection .selection .energy .counter,
#selection .selection .fuel .counter,
#selection .selection .ammo .weapf .counter{
    display: none;
    position: absolute;
    top: -3px;
    left: 10px;
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color:  var(--subtext_color-background);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--subtext_color);
    z-index: 10;
}

#selection .selection .health .counter:before,
#selection .selection .energy .counter:before,
#selection .selection .fuel .counter:before,
#selection .selection .ammo .weapf .counter:before{
    content: "";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: unset;
    border-right: 5px solid var(--subtext_color-background);
    position: absolute;
    top: 0px;
    left: -5px;
}

#selection .selection .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}

#selection .selection .health .bar.yellow{
    background-color: rgb(255,255,0);
}

#selection .selection .health .bar.red{
    background-color: rgb(255,0,0);
}

#selection .selection .energy{
    position: absolute;
    bottom: 6px;
    height: 4px;
    left: 2px;
    right: 2px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
    box-sizing: border-box;

}

#selection .selection .energy:hover .counter {
    display: block;
}

#selection .selection .energy .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
}

#selection .selection.f .energy{
    bottom: 6px;
}

#selection .selection.b .energy,
#selection .selection.m .energy{
    bottom: 3px;
}



#selection .selection .fuel{
    position: absolute;
    bottom: 6px;
    height: 4px;
    left: 2px;
    right: 2px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
    box-sizing: border-box;

}

#selection .selection .fuel:hover .counter {
    display: block;
}

#selection .selection .fuel .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
}

#selection .selection.f .fuel{
    bottom: 6px;
}


#selection .selection .ammo{
    position: absolute;
    bottom: 0px;
    height: 4px;
    left: 2px;
    right: 2px;
}

#selection .selection .ammo .weapf{
    position: relative;
    width: 100%;
    height: 4px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_ammo_barbckg_color);
    box-sizing: border-box;
}

#selection .selection .ammo .weapf:hover .counter {
    display: block;
}

#selection .selection .ammo .weapf .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_ammo_bar_color);
}

#selection .selection .distance {
    position: absolute;
    top: 2px;
    left: 4px;
    color: #ebebeb;
    font-size: 11px;
    text-transform: none;
    text-shadow: var(--shadow_textfull);
}

#viewcontrols {
    position: absolute;
    z-index: 100001; /*nechat jinak pje prekryje radar*/
    top: 330px;
    right: 18px;
    transition: top .2s;
    width: 0px;
}

#telo.maphud #viewcontrols {
    top: 410px;
}

#telo.tmodule-sectormap #viewcontrols {
    top: 435px;
}

#viewcontrols .off,
#viewcontrols .on
{
    display: block;
    cursor: pointer;
    position: relative;
    margin: 4px 0px;
    height: 18px;

    box-sizing: border-box;
    right: 8px;
    padding: 0px 6px;
    line-height: 18px;
    width: 18px;
}


#viewcontrols .off:hover,
#viewcontrols .on:hover
{
    animation:highlited 1000ms linear infinite;
    animation: blink 100ms linear 2 alternate;
}

#viewcontrols .off {

}
#viewcontrols .on {

}




#viewcontrols .on:before,
#viewcontrols .off:before {
    display: block;
    content: '';
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    animation: none;
    color: rgba(0,0,0,1);
    border: none;
    text-align: center;
    padding: 0px;

    text-shadow: none;
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
#viewcontrols .off:before {
    opacity: 0.3;
}

#viewcontrols .on:before {
    opacity: 0.8;
}



#viewcontrols .projected:before {
    background-image:url('ico/ico_projected_32.png');
}

#viewcontrols .my_ships:before {
    background-image:url('ico/ico_spacecraft_32.png');
}
#viewcontrols .enemy_ships:before {
    background-image:url('ico/viewcontrols_eships_32.png');
}
#viewcontrols .planets:before {
    background-image:url('ico/viewcontrols_planets_32.png');
}
#viewcontrols .asteroids:before {
    background-image:url('ico/viewcontrols_asteroids_32.png');
}
#viewcontrols .cs:before {
    background-image:url('ico/viewcontrols_stations_32.png');
}
#viewcontrols .objects:before {
    background-image:url('ico/ico_object_32.png');
}
#viewcontrols .sites:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><polygon points='32,62 2,2 62,2' stroke='rgb(255, 255, 255)' fill='none' stroke-width='4'/><polygon points='32,42 16,12 48,12' fill='rgb(255, 255, 255)'/></svg>");
}

#viewcontrols .wormholes:before {
    background-image:url('ico/viewcontrols_wh_32.png');
}
#viewcontrols .waypoints:before {
    background-image:url('ico/ico_waypoint_32.png');
}
#viewcontrols .cards:before {
    background-image:url('ico/viewcontrols_cards_32.png');
}
#viewcontrols .npcs:before {
    background-image:url('ico/viewcontrols_npc_16.png');
}
#viewcontrols .fleetships:before {
    background-image:url('ico/ico_fleetship_32.png');
}

#viewcontrols .satellites:before {
    background-image:url('ico/ico_satellite2_16.png');
}

#viewcontrols .boreholes:before {
    background-image:url('ico/ico_rig_16.png');
}

#viewcontrols .ebeams:before,
#viewcontrols .hyperways:before{
    background-image:url('ico/viewcontrols_ebeams_32.png');
}

#mapfilters {
    z-index: 10000;
    position: absolute;
    top: 200px;
    left: 20px;
}

#mapfilters .trades,
#mapfilters .signal,
#mapfilters .buyouts {
    display: block;
    position: relative;
    left: 4px;
    cursor: default;
    margin: 0px;
    width: 0px;
    height: 160px;
    opacity: 1;
    background-color: inherit;
    border: none;
    filter: none;
    transition: height 0.3s;
}

#mapfilters .signal {
    height: 65px;
}

#mapfilters .trades.off,
#mapfilters .signal.off,
#mapfilters .buyouts.off {
    height: 30px;
}

#mapfilters .signal .opener,
#mapfilters .signal .closer {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    width: 22px;
    height: 22px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-sizing: border-box;

    line-height: 16px;
    border: 1px solid #ffffff7a;
    border-radius: 3px;
    padding: 0px 3px;
    box-sizing: border-box;
    text-shadow: none;

}



#mapfilters .signal .closer {
    background-color: black;
    color: white;

    filter: invert(1);
}


#mapfilters .signal .closer:before {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(100% - 0px);
    border-left: 5px solid rgba(0,0,0,1);
}


#mapfilters .signal .opener,
#mapfilters .signal .closer {
    background-image:url('ico/icon_signal-64.png');
}

#mapfilters .signal.type_bio .opener,
#mapfilters .signal.type_bio .closer {
    background-image:url('ico/viewcontrols_lifeenergy_32.png');
}

#mapfilters .signal.type_tech .opener,
#mapfilters .signal.type_tech .closer {
    background-image:url('ico/data-16.png');
}

#mapfilters .signal.type_grav .opener,
#mapfilters .signal.type_grav .closer {
    background-image:url('ico/viewcontrols_asteroids_32.png');
}

#mapfilters .signal.on .opener {
    display: none;
}

#mapfilters .signal.on input {
    display: block;
}

#mapfilters .signal.on .closer {
    display: block;
}

#mapfilters .signal.off input {
    display: none;

}

#mapfilters .signal.off .closer {
    display: none;

}

#mapfilters .signal.off .opener {
    display: block;

}

#mapfilters .signal input {
    position: absolute;
}

#mapfilters .signal input.range-size {
    position: absolute;
    top: 7px;
    left: 37px;
    padding: 0px;
    margin: 0px;
    width: 300px;
}

#mapfilters .signal input.range-color {
    position: absolute;
    top: 40px;
    left: 37px;
    padding: 0px;
    margin: 0px;
    width: 300px;
}

#mapfilters .signal input.range-color:before {
    content: '';
    display: block;
    position: absolute;
    top: -3px;
    left: -4px;
    right: -4px;
    bottom: -3px;
    background-image: linear-gradient(to right, hsl(0deg, 100%, 50%) 0%, hsl(61.2deg, 100%, 50%) 17%, hsl(118deg, 100%, 50%) 33%, hsl(180deg, 100%, 50%) 50%, hsl(241deg, 100%, 50%) 67%, hsl(298deg, 100%, 50%) 83%, hsl(360deg, 100%, 50%) 100%);
    z-index: -1;
    border-radius: 0px;
}


#mapfilters .trades .opener,
#mapfilters .trades .closer,
#mapfilters .signals .opener,
#mapfilters .signals .closer,
#mapfilters .buyouts .opener,
#mapfilters .buyouts .closer {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    width: 22px;
    height: 22px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-sizing: border-box;

    line-height: 16px;
    border: 1px solid #ffffff7a;
    border-radius: 3px;
    padding: 0px 3px;
    box-sizing: border-box;
    text-shadow: none;

}



#mapfilters .trades .closer,
#mapfilters .signals .closer,
#mapfilters .buyouts .closer {
    background-color: black;
    color: white;

    filter: invert(1);
}


#mapfilters .trades .closer:before,
#mapfilters .signals .closer:before,
#mapfilters .buyouts .closer:before {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(100% - 0px);
    border-left: 5px solid rgba(0,0,0,1);
}

#mapfilters .trades .opener,
#mapfilters .trades .closer {
    background-image:url('ico/viewcontrols_trades_32.png');
}



#mapfilters .signals .opener,
#mapfilters .signals .closer {
    background-image:url('ico/icon-dataflow_16w.png');
}

#mapfilters .buyouts .opener,
#mapfilters .buyouts .closer {
    background-image:url('ico/viewcontrols_buyouts_32.png');
}

#mapfilters .trades .switchers,
#mapfilters .buyouts .switchers {
    display: block;
    position: absolute;
    top: 36px;
    left:33px;
    margin: 0px;
}


#mapfilters .buyouts .switchers div.active,
#mapfilters .trades .switchers div.active{
    filter: invert(1);
    cursor: default;
}

#mapfilters .buyouts .switchers .buyouttype,
#mapfilters .trades .switchers .tradetype {
    position: absolute;
    left: 0px;
    top: -7px;
    width: 180px;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

#mapfilters .buyouts .switchers .buyoutitem,
#mapfilters .trades .switchers .tradeitem {
    position: absolute;
    left: 0px;
    top: 30px;
    width: 180px;
    display: none;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

#mapfilters .buyouts .switchers .buyoutitem.active,
#mapfilters .trades .switchers .tradeitem.active {
    display: inline-block;
}




#mapfilters .buyouts.off .switchers,
#mapfilters .trades.off .switchers {
    display: none;
}

#mapfilters .buyouts.off .show_main,
#mapfilters .trades.off .show_main {
    display: none;
}

#mapfilters .buyouts.on .switchers,
#mapfilters .trades.on .switchers {
    display: block;
    white-space: nowrap;
}

#mapfilters .buyouts.on .switchers:before,
#mapfilters .trades.on .switchers:before {
    content: '';
    display: block;
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0px;
    color: rgba(255,255,255,0.2);
    width: 150px;
    font-size: 9px;
    line-height: 12px;
}

#mapfilters .buyouts.on .switchers select,
#mapfilters .trades.on .switchers select {

    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg,#878fa538 0%, #878fa538 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px,  calc(100% - 4px) calc(100% - 4px);
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center, center;
}


#mapfilters .buyouts.on .show_main,
#mapfilters .trades.on .show_main {
    display: block;
    position: absolute;
    left: 33px;
    margin: 0px;
    border: none;
    cursor: pointer;
    opacity: 1;
    box-sizing: border-box;
    top: 108px;
}
#mapfilters .buyouts.on .show_main.active,
#mapfilters .trades.on .show_main.active {
    filter: invert(1);
}

#mapfilters .buyouts.on .show_main.active .subtext,
#mapfilters .trades.on .show_main.active .subtext{
    filter: invert(1);
}

#mapfilters .buyouts.on .show_main .subptr,
#mapfilters .trades.on .show_main .subptr {
    display: block;
    position: relative;

    white-space: nowrap;
    color: black;
    background-color: white;
    padding: 0px 7px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    clip-path: var(--clip_alerttext);

}
#mapfilters .buyouts.on .show_main:hover,
#mapfilters .trades.on .show_main:hover {
    animation: blink 100ms linear 2 alternate;
}


#mapfilters .buyouts.on .opener,
#mapfilters .trades.on .opener,
#mapfilters .signals.on .opener {
    display: none;

}



#mapfilters .trades.off .opener,
#mapfilters .signals.off .opener,
#mapfilters .buyouts.off .opener {
    display: block;

}


#mapfilters .trades.off .opener:hover,
#mapfilters .signals.off .opener:hover,
#mapfilters .buyouts.off .opener:hover {
    animation: blink 100ms linear 2 alternate;
}





#mapfilters .trades.on .closer,
#mapfilters .signals.on .closer,
#mapfilters .buyouts.on .closer {
    display: block;
    opacity: 1;


}

#mapfilters .trades.off .closer,
#mapfilters .signals.off .closer,
#mapfilters .buyouts.off .closer {
    display: none;
}


#mapfilters .trades.on input,
#mapfilters .signals.on input,
#mapfilters .buyouts.on input {
    display: inline-block;
}


#mapfilters .trades.off input,
#mapfilters .signals.off input,
#mapfilters .buyouts.off input {
    display: none;
}

#mapfilters .buyouts input {
    position: absolute;
    top: 3px;
    left: 37px;
    padding: 0px;
    margin: 0px;
    width: 300px;
}

#mapfilters .trades input {
    position: absolute;
    top: 3px;
    left: 37px;
    padding: 0px;
    margin: 0px;
    width: 300px;
}

#mapfilters .signals input {
    position: absolute;
    top: 1px;
    left: 30px;
    padding: 0px;
    margin: 0px;
}














#mapmyships{
    color:white;
    z-index:10000;
    position:absolute;
    top:180px;
    left:10px;
    padding:0px;
    opacity:0.3;
    padding-left:23px;
    background:url('ico/ico_radar_128.png') 0px 0px no-repeat;
    background-size:16px;
}
#mapmyships:hover{
    opacity:1;
}
#mapmyships .resetzoom{
    display:block;
    position:absolute;
    top:20px;
    left:0px;
    height:20px;
    width:20px;
    background:url('ico/ico_resetview_128.png') 0px center no-repeat;
    background-size:16px;
    cursor:pointer;
}
#mapmyships a{
    display:block;
    color:white;
    text-decoration:none;
    cursor:pointer;
    font-size:10px;
    height:15px;
    line-height:15px;
    text-transform:uppercase;
    background:url('ico/ico_select_128.png') 0px 1px  no-repeat;
    padding-left:23px;
    background-size:10px;
}

#mapcursors{
    color: white;
    z-index: 10000;
    position: absolute;
    top: 240px;
    left: 10px;
    padding: 0px;
}

#mapcursors #center,
#mapcursors #zoomin,
#mapcursors #zoomout{
    display: block;
    cursor: pointer;
    position: absolute;
    height: 30px;
    width: 30px;
    /* border-radius: 3px; */

    /* background-color: rgba(255,255,255,0.9); */
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    opacity: 0.5;
}


#mapcursors #center{
    top: 0px;
}
#mapcursors #zoomin{
    top: 40px;
}
#mapcursors #zoomout{
    top: 80px;
}

#mapcursors #center{
    background-image: url(ico/os_spacecrafts_40.png);
}
#mapcursors #zoomin:before{
    display:block;
    content: '+';
    position: absolute;
    height: 30px;
    width: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    font-size: 35px;
}
#mapcursors #zoomout:before{
    display:block;
    content: '-';
    position: absolute;
    height: 30px;
    width: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    font-size: 35px;
}


#mapcursors #center:hover,
#mapcursors #zoomin:hover,
#mapcursors #zoomout:hover {
    animation: blink 100ms linear 2 alternate;
}

#map_switchers {
    position: absolute;
    top: 10px;
    left: 300px;
    padding: 0px;
    color: rgba(255,255,255,0.4);
    z-index: 10000;
}

#map_switchers .off,
#map_switchers .on
{
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    color: black;
    background-color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    font-size: 19px;
}

#map_switchers .off:hover
{
    animation:highlited 1000ms linear infinite;
}


#map_switchers .off {
    background-color: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.4);
}
#map_switchers .on {
    background-color: rgba(255,255,255,0.9);
    color: black;
}



.desktop{
    width:100%;
    height:99%;
}
.desktop  td{
    vertical-align:top;
}


.scroll{
    overflow-x:hidden;
    overflow-y:scroll;

    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    /*padding-bottom: max(50%, 50px); nefunguje vzdy sprave*/
    padding-bottom: 150px;
}
.close{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 14px;
    right: 14px;
    opacity: 1;
    z-index: 11;
    background-size: 12px;
    background-image: url('ico/close_128.png');
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;

}


.close .thint {
    bottom: -5px;
    top: unset;
}


.close:hover{
    animation:blink 100ms linear 2 alternate;
}



.showWindowItem{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 14px;
    right: 35px;
    opacity: 1;
    z-index: 10;
    background: black url('ico/info-window-16.png') center no-repeat;
    /*animation: highlited 1000ms linear infinite; */
}
.showWindowItem .thint {
    bottom: -5px;
    top: unset;
}


.showWindowItem:hover{
    filter: invert(1);
    animation:blink 100ms linear 2 alternate;
}

.showWindowItem:hover .thint{
    filter: invert(1);
}


._title_info:hover{
    opacity:1;
}
._title_info{
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 14px;
    right: 35px;
    opacity: 0.5;
    z-index: 999999999;
}

#hireastronautbox,
#disomissastronautbox,
#makecolonistbox,
#astasisastronautbox,
#axstasisastronautbox{
    position:absolute;
    width: 500px;
    height: 560px;
    z-index:99999999;
}

#astasisastronautbox{
    width: 640px;
    height: 640px;

}
#hireastronautbox:before,
#disomissastronautbox:before,
#makecolonistbox:before,
#astasisastronautbox:before,
#axstasisastronautbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #215c71;
    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(31 35 55) 26%, rgba(0, 0, 0, 0) 148%);
}

#axstasisastronautbox .bckgr {
    position: absolute;
    display: block;
    left: 30px;
    right: 30px;
    bottom: 48px;
    top: 282px;
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%);
    background-repeat: no-repeat;
    background-position: 32% center;
    background-size: contain;
    opacity: 0.3;
}


#extractastronautbox{
    position:absolute;
    width: 500px;
    height: 780px;
    z-index:99999999;
}

#extractastronautbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #215c71;
    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%);
    background-repeat: no-repeat;
    background-position: bottom,bottom;
    background-size: 105%;
    transition: opacity 0.3s;
    z-index: -1;
}

#extractastronautbox .bckgr {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%), url('astr_bckg_512x512.png');
    background-repeat: no-repeat;
    background-position: bottom,bottom,-10px 0px;
    background-size: 105%, 650px;

}

#extractastronautbox.m .bckgr,
#extractastronautbox.f .bckgr{

    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%);


}

#extractastronautbox .bckgr .bckgrm,
#extractastronautbox .bckgr .bckgrf {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;

    z-index: -1;

    background-repeat: no-repeat;
    background-position: bottom,bottom,-10px 0px;
    background-size: 105%, 654px;
    transition: opacity 0.8s;
    opacity: 0;
    transform: scaleX(-1);
}

#extractastronautbox.m .bckgr .bckgrm {
    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%), url('astr_bckg_m_1024x1024.png');
    background-position: bottom,right 149px;
    opacity: 1;
}

#extractastronautbox.f .bckgr .bckgrf {
    background-image: linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%), url('astr_bckg_w_1024x1024.png');
    background-position: bottom,left bottom;
    opacity: 1;
}


#extractastronautbox .qtxt .item {
    background-image: url('astr_bckg_512x512.png');
    background-position: center;
    opacity: 1;
}

#extractastronautbox.f .qtxt .item {
    background-image: url('astr_bckg_w_256x256.png');
    background-position: left center;
    background-size: 185px;
    opacity: 1;
}

#extractastronautbox.m .qtxt .item {
    background-image: url('astr_bckg_m_256x256.png');
    background-position: right center;
    background-size: 185px;
    opacity: 1;
}

#extractastronautbox .text1 {
    position: absolute;
    top: 135px;
    right: 20px;
    font-size: 18px;
    color: #ffbc00;
    text-align: center;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    transform: translateY(-50%);
    /* width: 290px; */
    left: 20px;
}

#hireastronautbox .einfo,
#disomissastronautbox .einfo,
#makecolonistbox .einfo,
#extractastronautbox .einfo,
#astasisastronautbox .einfo,
#axstasisastronautbox .einfo {
    position: absolute;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    color: rgba(200,200,200,1);
    text-transform: uppercase;
    text-align: center;

    line-height: 16px;
    top: 180px;
    left: 10px;
    right: 10px;
}

#hireastronautbox .name,
#disomissastronautbox .name,
#makecolonistbox .name,
#extractastronautbox .name,
#astasisastronautbox .name,
#axstasisastronautbox .name{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 193px;
    font-family: var(--fontFaimly_button);
    height: 14px;
    line-height: 14px;
    background-color: white;
    color: black;
    padding: 2px 6px;
    cursor: pointer;
}

#hireastronautbox.forhire .name,
#disomissastronautbox.forhire .name,
#makecolonistbox.forhire .name,
#extractastronautbox.forhire .name,
#astasisastronautbox.forhire .name,
#axstasisastronautbox.forhire .name{
    padding: 2px 6px 2px 22px;
}

#hireastronautbox.forhire .item .name,
#disomissastronautbox.forhire .item .name,
#makecolonistbox.forhire .item .name,
#extractastronautbox.forhire .item .name,
#astasisastronautbox.forhire .item .name,
#axstasisastronautbox.forhire .item .name{
    padding-left: 6px;
}

#hireastronautbox.forhire .name:before,
#disomissastronautbox.forhire .name:before,
#makecolonistbox.forhire .name:before,
#extractastronautbox.forhire .name:before,
#astasisastronautbox.forhire .name:before,
#axstasisastronautbox.forhire .name:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    filter: invert(1);
    background-image: url(ico/sale_256.png);
    background-size: 15px;
    background-position: 3px 1px;
    background-repeat: no-repeat;
    width: 22px;
}

#hireastronautbox.forhire .item .name:before,
#disomissastronautbox.forhire .item .name:before,
#makecolonistbox.forhire .item .name:before,
#extractastronautbox.forhire .item .name:before,
#astasisastronautbox.forhire .item .name:before,
#axstasisastronautbox.forhire .item .name:before{
    content: '';
    display: none;

}

#hireastronautbox .name:hover,
#disomissastronautbox .name:hover,
#makecolonistbox .name:hover,
#extractastronautbox .name:hover,
#astasisastronautbox .name:hover,
#axstasisastronautbox .name:hover{
    animation: blink 100ms linear 2 alternate;
}

#hireastronautbox .item .name:hover,
#disomissastronautbox .item .name:hover,
#makecolonistbox .item .name:hover,
#extractastronautbox .item .name:hover,
#astasisastronautbox .item .name:hover,
#axstasisastronautbox .item .name:hover{
    animation: none;
}

#hireastronautbox .race,
#disomissastronautbox .race,
#makecolonistbox .race,
#extractastronautbox .race,
#astasisastronautbox .race,
#axstasisastronautbox .race{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 214px;
    text-align: center;
    color: white;
    font-size: 10px;
    color: gray;
    text-transform: uppercase;
}

#hireastronautbox .proffesion,
#disomissastronautbox .proffesion,
#makecolonistbox .proffesion,
#extractastronautbox .proffesion,
#astasisastronautbox .proffesion,
#axstasisastronautbox .proffesion{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 278px;
    text-align: center;
    color: white;
    font-size: 12px;
    color: silver;
    text-transform: uppercase;
}

#hireastronautbox .lvl,
#disomissastronautbox .lvl,
#makecolonistbox .lvl,
#extractastronautbox .lvl,
#astasisastronautbox .lvl,
#axstasisastronautbox .lvl{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 260px;
    text-align: center;
    color: white;
    font-size: 12px;
    color: silver;
    text-transform: uppercase;
}


#hireastronautbox .skills,
#disomissastronautbox .skills,
#makecolonistbox .skills,
#extractastronautbox .skills,
#astasisastronautbox .skills,
#axstasisastronautbox .skills{
    position:absolute;
    left: 50%;
    top: 230px;
    text-align: center;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(3, minmax(30px, 1fr));
    min-height: 0;
    max-height: 100%;
    transform: translateX(-50%);
}

#extractastronautbox .nainfo{
    position:absolute;
    left: 10px;
    right: 10px;
    top: 425px;
    text-align: center;
    display: block;

}

#extractastronautbox .nainfo .ates{
    display: inline-block;
    margin: 0px auto;
}

#extractastronautbox .nainfo .ates .bfr{

    position: absolute;
    left: 0px;
    right: 0px;
    top: -30px;

    color: gray;
    font-size: 14px;
    text-transform: uppercase;


}

#extractastronautbox .nainfo .ates .bftes{
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: -6px;
    left: 0px;
    right: 0px;
}

#extractastronautbox .nainfo .ates .bftes .tactical,
#extractastronautbox .nainfo .ates .bftes .engineer,
#extractastronautbox .nainfo .ates .bftes .science {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0px 10px;
    width: unset;
    min-width: 75px;
}




#extractastronautbox .nainfo .araces{
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
}

#extractastronautbox .nainfo .araces .bfr{

    position: absolute;
    left: 0px;
    right: 0px;
    top: -20px;

    color: gray;

    font-size: 14px;
    text-transform: uppercase;

}

#extractastronautbox .nainfo .araces .bfraces{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 5px;


}

#extractastronautbox .nainfo .araces .bfraces .arace{

    display: inline-block;
    background-color: silver;
    color: black;
    font-size: 12px;
    margin: 2px;
    padding: 2px 8px;
    font-family: var(--fontFaimly_button);
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;

}

#extractastronautbox .hr_scroller_dom{
    position:absolute;
    left: 70px;
    right: 70px;
    top: 300px;
    text-align: center;
    display: block;

}

#extractastronautbox .hr_scroller_dom .hr_scroller_text{
    color: white;
    padding-top: 10px;
    font-size: 14px;
}

#extractastronautbox .eaconfig{
    position:absolute;
    left: 70px;
    right: 70px;
    top: 60px;
    text-align: center;
    display: block;

}

#extractastronautbox .eaconfig .age{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: 32px;
    background-position: center 18px;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    height: 94px;
}

#extractastronautbox .eaconfig .age .ageicon{
    position: absolute;
    left: 50%;
    top: 20px;
    width: 50px;
    height: 50px;
    transform: translateX(-50%);

    background-size: 32px;
    background-position: center 18px;
    background-repeat: no-repeat;
    z-index: 1;
}

#extractastronautbox .eaconfig .age .ageicon.young {
    background-image: url('ico/colonists_young_32.png');
}
#extractastronautbox .eaconfig .age .ageicon.middle {
    background-image: url(ico/colonists_middle_32.png);
}
#extractastronautbox .eaconfig .age .ageicon.old {
    background-image: url(ico/colonists_old_32.png);
}

#extractastronautbox .eaconfig .age .sex {
    position: relative;
}



#extractastronautbox .eaconfig .age .sex .selector {
    color: var(--border-button-color-unactive);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    box-sizing: border-box;
}

#extractastronautbox .eaconfig .age .sex .selector:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#extractastronautbox .eaconfig .age .sex .selector.online:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;

}

#extractastronautbox .eaconfig .age .sex .selector.online {
    color: #b9dbff;
    position: absolute;
    cursor: pointer;
}

#extractastronautbox .eaconfig .age .sex .selector:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center 38px, bottom, center -28px;
    background-size: 14px, cover, cover;
}


#extractastronautbox .eaconfig .age .sex .selector .thint {

    top: 50%;
    right: calc(100% - 25px);
    transform: translateY(-50%);
}

#extractastronautbox .eaconfig .age .sex .selector.selected .thint {

    display: none !important;
}


#extractastronautbox .eaconfig .age .sex.m .selector:before {

    background-image: url(ico/male-2-24.png), linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%);

}
#extractastronautbox .eaconfig .age .sex.f .selector:before {

    background-image: url(ico/female-2-24.png), linear-gradient(0deg, rgb(31 35 55) 5%, rgba(0, 0, 0, 0) 600%);

}




#extractastronautbox .eaconfig .age .sex .selector.active.selected:before {
    box-shadow: 0px 0px 30px #4d5b93 inset;

}

#extractastronautbox .eaconfig .age .sex .selector.active.online:hover {
    animation: blink 100ms linear 2 alternate;
}

#extractastronautbox .eaconfig .age .sex .selector.selected:before {

}

#extractastronautbox .eaconfig .age .sex .selector.selected:hover {
    animation: none;
}

#extractastronautbox .eaconfig .age .sex .selector .vals {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

#extractastronautbox .eaconfig .age .sex .selector .vals .qty {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 8px;
    font-size: 24px;
}

#extractastronautbox .eaconfig .age .sex .selector .vals .inf {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% - 20px);
    text-transform: uppercase;
    font-size: 12px;
    transform: translateY(-50%);
    line-height: 12px;
}

#extractastronautbox .eaconfig .age .sex .selector .vals .tes {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 10px;
}

#extractastronautbox .eaconfig .age .sex .selector .tes .tactical,
#extractastronautbox .eaconfig .age .sex .selector .tes .engineer,
#extractastronautbox .eaconfig .age .sex .selector .tes .science {
    position: absolute;
    width: 30%;
    height: 18px;
    bottom: 0px;
    font-size: 12px;
    padding: 0px;
    bottom: 0px;
    line-height: 18px;
}

#extractastronautbox .eaconfig .age .sex .selector .tes .tactical {
    left: 5px;
}

#extractastronautbox .eaconfig .age .sex .selector .tes .engineer {
    left: calc(50% - 2px);
    transform: translateX(-50%);
}

#extractastronautbox .eaconfig .age .sex .selector .tes .science {
    right: 5px;
}

#hireastronautbox .price,
#disomissastronautbox .price,
#makecolonistbox .price,
#extractastronautbox .price,
#astasisastronautbox .price,
#axstasisastronautbox .price{
    position: absolute;
    left: 50%;
    /* right: 20px; */
    transform: translateX(-50%);
    top: 413px;
    text-align: center;
    color: white;
    font-size: 18px;
    z-index: 10;
}
#extractastronautbox .price{
    top: 670px;
}


#astasisastronautbox .eu,
#axstasisastronautbox .eu{
    position:absolute;
    left: 20px;
    right: 20px;
    top: 413px;
    text-align: center;
    color: white;
    font-size: 18px
}


#astasisastronautbox .eu{
    top: 520px;
}


#axstasisastronautbox .eu{
    top: 420px;
}

#hireastronautbox .confirmation_html,
#disomissastronautbox .confirmation_html,
#makecolonistbox .confirmation_html,
#extractastronautbox .confirmation_html,
#astasisastronautbox .confirmation_html,
#axstasisastronautbox .confirmation_html{
    position: absolute;
    width: 450px;
    bottom: 50%;
    left: 50%;
    height: 250px;
    transform: translateX(-50%);
    text-align: center;
    color: var(--hud_invalid_text);
    font-size: 14px;

    z-index: 300;

    box-sizing: border-box;
}

#hireastronautbox .confirmation_html:before,
#disomissastronautbox .confirmation_html:before,
#makecolonistbox .confirmation_html:before,
#extractastronautbox .confirmation_html:before,
#astasisastronautbox .confirmation_html:before,
#axstasisastronautbox .confirmation_html:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #10172c;
    clip-path:  var(--clip_dialog_box);
    z-index: -1;
}

#hireastronautbox .confirmation_html .confirmation_chtml,
#disomissastronautbox .confirmation_html .confirmation_chtml,
#makecolonistbox .confirmation_html .confirmation_chtml,
#extractastronautbox .confirmation_html  .confirmation_chtml,
#astasisastronautbox .confirmation_html  .confirmation_chtml,
#axstasisastronautbox .confirmation_html  .confirmation_chtml{
    position: absolute;
    top: calc(50% - 30px);
    left: 20px;
    transform: translateY(-50%);
    right: 20px;
}

#hireastronautbox .confirmation_html .roger,
#disomissastronautbox .confirmation_html .roger,
#makecolonistbox .confirmation_html .roger,
#extractastronautbox .confirmation_html  .roger,
#astasisastronautbox .confirmation_html  .roger,
#axstasisastronautbox .confirmation_html  .roger{
    position: absolute;
    bottom: 40px;
    width: 120px;
    height: 30px;
    left: calc(50% - 60px);
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    text-transform: uppercase;
    border: 1px solid white;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
}

#hireastronautbox .confirmation_html .roger:hover,
#disomissastronautbox .confirmation_html .roger:hover,
#makecolonistbox .confirmation_html .roger:hover,
#extractastronautbox .confirmation_html .roger:hover,
#astasisastronautbox .confirmation_html .roger:hover,
#axstasisastronautbox .confirmation_html .roger:hover{
    position: absolute;
    color: rgba(0,0,0,1);
    border: 1px solid white;
    background: white;
    animation: blink 100ms linear 2 alternate;
}

#hireastronautbox .actions,
#disomissastronautbox .actions,
#makecolonistbox .actions,
#extractastronautbox .actions,
#astasisastronautbox .actions,
#axstasisastronautbox .actions{
    position:absolute;
    left: 20px;
    right: 20px;
    bottom: 40px;
    text-align: center;
    color: white;
}

#hireastronautbox .actions .info,
#disomissastronautbox .actions .info,
#makecolonistbox .actions .info,
#extractastronautbox .actions .info,
#astasisastronautbox .actions .info,
#axstasisastronautbox .actions .info{
    padding: 0px;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#hireastronautbox .actions .thint,
#disomissastronautbox .actions .thint,
#makecolonistbox .actions .thint,
#extractastronautbox .actions .thint,
#astasisastronautbox .actions .thint,
#axstasisastronautbox .actions .thint{
    animation: highlited 1000ms linear infinite;
    right: calc(100% - 10px);
    text-align: center;
    bottom: unset;
    left: unset;
    top: unset;

    top: 50%;

    transform: translateY(-50%);

}

#disomissastronautbox .actions button .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-top: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    bottom: unset;
    top: -10px;
}
#hireastronautbox .actions .button,
#disomissastronautbox .actions .button,
#makecolonistbox .actions .button,
#extractastronautbox .actions .button,
#astasisastronautbox .actions .button,
#axstasisastronautbox .actions .button{
    z-index: 1;
    min-width: 165px;
}



#astasisastronautbox .selections{
    position: absolute;
    left: 5px;
    right: 5px;
    top: 273px;

    text-align: center;
}

#astasisastronautbox .selections .selection{
    position: relative;
    display: inline-block;
    width: 160px;
    height: 220px;
    margin: 0px 7px;
    z-index: 1;

}

#astasisastronautbox .selections .selection:after{
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    /*background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);*/
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}


#astasisastronautbox .selections .selection.selectable {
    cursor: pointer;
}



#astasisastronautbox .selections .selection.selectable:before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
}

#astasisastronautbox .selections .selection.selectable:not(.selected):hover:before {
    box-shadow: 0px 0px 40px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#astasisastronautbox .selections .selection.selected:before {
    box-shadow: 0px 0px 40px #7685bf inset;

}

#astasisastronautbox .selections .selection.selectable:after{

    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;

}


#astasisastronautbox .selections .selection .sqtxt{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    padding: 8px 0px;
    box-sizing: border-box;

    font-size: 14px;
    text-align: center;

}






#astasisastronautbox .selections .selection .sqtxt .item{
    display: inline-block;
    position: relative;
    width: 120px;
    height: 80px;
    margin: 0px;
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center top;
}

#astasisastronautbox .selections .selection:not(.selectable) .sqtxt .item{
    filter: grayscale(1);
}

#astasisastronautbox .selections .selection .sqtxt .card{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 90px;
    margin: 0px 5px;
    background-size: cover;
}





#astasisastronautbox .selections .selection .sqtxt .item .name{
    display: block;
    position: absolute;
    bottom: -29px;
    left: -10px;
    right: -10px;
    color: var(--border-button-color-unactive);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    top: initial;
    background-color: unset;
    cursor: unset;
    font-family: unset;
    /* white-space: nowrap; */
    transform: none;
    padding: 0px;
    line-height: 16px;
}



#astasisastronautbox .selections .selection.selectable .sqtxt .name,
#astasisastronautbox .selections .selection.selected .sqtxt .name{
    color: white;
}


#astasisastronautbox .selections .selection .sqtxt .item .qty{
    display: block;
    top: 70px;
    position: absolute;
    line-height: 16px;
    color: black;
    background-color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 1px 7px;
    text-shadow: none;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}


#astasisastronautbox .selections .selection .html{
    display: block;
    position: absolute;
    top: 133px;
    left: -10px;
    right: -10px;
    color: #ababab;
    font-size: 12px;
    text-align: left;
    cursor: unset;
    padding: 0px 3px;
}

#astasisastronautbox .selections .selection .html .sqparm{
    display: block;
    position: relative;
    text-transform: uppercase;
    height: 17px;
    white-space: nowrap;
    line-height: 17px;
}

#astasisastronautbox .selections .selection .html .sqparm .sqparmval{
    display: block;
    float: right;
    color: #ffb300;
    font-size: 12px;
    text-transform: none;
    font-family: var(--fontFaimly_button);
}










#hireastronautbox .qtxt,
#disomissastronautbox .qtxt,
#makecolonistbox .qtxt,
#extractastronautbox .qtxt,
#slotspot .qtxt,
#resourcecontainer .qtxt,
#unmountartefact .qtxt,
#astasisastronautbox .qtxt,
#axstasisastronautbox .qtxt{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 275px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    padding: 8px 0px;
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    text-align: center;

}

#slotspot .qtxt {

}

#extractastronautbox .qtxt{
    top: 542px;
}

#hireastronautbox .qtxt .item,
#disomissastronautbox .qtxt .item,
#makecolonistbox .qtxt .item,
#extractastronautbox .qtxt .item,
#slotspot .qtxt .item,
#resourcecontainer .qtxt .item,
#unmountartefact .qtxt .item,
#astasisastronautbox .qtxt .item,
#axstasisastronautbox .qtxt .item{
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0px;
    background-size: cover;
    filter: drop-shadow(2px 4px 56px rgba(255, 255, 255, 0.4));
}


#hireastronautbox .qtxt .card,
#disomissastronautbox .qtxt .card,
#makecolonistbox .qtxt .card,
#extractastronautbox .qtxt .card,
#slotspot .qtxt .card,
#unmountartefact .qtxt .card,
#astasisastronautbox .qtxt .card,
#axstasisastronautbox .qtxt .card{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 90px;
    margin: 0px 5px;
    background-size: cover;
    filter: drop-shadow(2px 4px 56px rgba(255, 255, 255, 0.4));
}





#hireastronautbox .qtxt .item .name,
#disomissastronautbox .qtxt .item .name,
#makecolonistbox .qtxt .item .name,
#extractastronautbox .qtxt .item .name,
#slotspot .qtxt .item .name,
#resourcecontainer .qtxt .item .name,
#unmountartefact .qtxt .item .name,
#astasisastronautbox .qtxt .item .name,
#axstasisastronautbox .qtxt .item .name{
    display: block;
    position: absolute;
    bottom: -30px;
    left: -25px;
    right: -25px;
    color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    top: initial;
    background-color: unset;
    cursor: unset;
    font-family: unset;
    white-space: nowrap;
    transform: none;
}




#hireastronautbox .qtxt .item .qty,
#disomissastronautbox .qtxt .item .qty,
#makecolonistbox .qtxt .item .qty,
#extractastronautbox .qtxt .item .qty,
#slotspot .qtxt .item .qty,
#resourcecontainer .qtxt .item .qty,
#unmountartefact .qtxt .item .qty,
#astasisastronautbox .qtxt .item .qty,
#axstasisastronautbox .qtxt .item .qty{
    display: block;
    top: 70px;
    position: absolute;
    line-height: 16px;
    color: black;
    background-color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 1px 7px;
    text-shadow: none;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}


#makecolonistbox .warning {
    display: block;
    position: absolute;
    top: 347px;
    left: 10px;
    right: 10px;
    line-height: 17px;
    color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;

}


#hireastronautbox .actions .notpossible,
#disomissastronautbox .actions .notpossible,
#makecolonistbox .actions .notpossible,
#extractastronautbox .actions .notpossible,
#astasisastronautbox .actions .notpossible,
#axstasisastronautbox .actions .notpossible{
    font-size: 14px;

    line-height: 18px;
    padding: 0px 10px;
    display: block;
    position: absolute;

    right: 0px;
    left: 0px;
    bottom: 50%;
    transform: translateY(42%);
    color: var(--hud_invalid_color);
    font-family: var(--fontFaimly_button);
}

#makecolonistbox .img,
#disomissastronautbox .img,
#hireastronautbox .img,
#extractastronautbox .img,
#astasisastronautbox .img,
#axstasisastronautbox .img{
    padding: 0px;
    height: 253px;

    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;


}
#makecolonistbox .img .face,
#disomissastronautbox .img .face,
#hireastronautbox .img .face,
#extractastronautbox .img .face,
#astasisastronautbox .img .face,
#axstasisastronautbox .img .face{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 190px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(0.7) drop-shadow(0px 0px 20px black);
    background-position: center -8px;
    background-repeat: no-repeat;
}
#makecolonistbox .img .aid,
#disomissastronautbox .img .aid,
#hireastronautbox .img .aid,
#extractastronautbox .img .aid,
#astasisastronautbox .img .aid,
#axstasisastronautbox .img .aid{
    position: absolute;
    display: block;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: white;
    text-align: center;
    cursor: pointer;
}

#makecolonistbox .img:after,
#disomissastronautbox .img:after,
#hireastronautbox .img:after,
#extractastronautbox .img:after,
#astasisastronautbox .img:after,
#axstasisastronautbox .img:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(32 46 66) 33%, rgba(0, 0, 0, 0) 65%);
    clip-path: var(--clip_standardbox);
}
#makecolonistbox .health,
#disomissastronautbox .health,
#hireastronautbox .health,
#extractastronautbox .health,
#astasisastronautbox .health,
#axstasisastronautbox .health{
    position: absolute;
    height: 7px;
    top: 175px;
    left: calc(50% - 55px);
    width: 110px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--box-background);
    box-sizing: border-box;
    z-index: 1;

}

#makecolonistbox .health .bar,
#disomissastronautbox .health .bar,
#hireastronautbox .health .bar,
#extractastronautbox .health .bar,
#astasisastronautbox .health .bar,
#axstasisastronautbox .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#cstationbox{
    position: absolute;
    left: 310px;
    top: 35px;
    bottom: 90px;
    right: 130px;
    z-index: 9998;
    max-width: var(--hud-window-max-width);
    min-width: 830px;
}


#cstationbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_cstationbox);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(rgb(16 25 48) 0%, rgb(17 16 19 / 80%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}

#cstationbox .title{
    text-align: left;
    padding-left: 10px;

}

#growBase .title {
    text-align: left;
    padding-left: 10px;
}

#telo.rightcontext #cstationbox {
    right: 350px;
}

#telo.fleetships #cstationbox {
    right: 310px;
}

#cstationbox .bhangarcap {
    position: absolute;
    top: 70px;
    left: calc(33% + 5px);
    height: 110px;
    width: calc(33% - 10px);
    box-sizing: border-box;
    /*overflow: hidden;*/

}

#cstationbox .bhangarcap:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_csbox_st_cargo);
}

#cstationbox .bhangarcap .hhbefore {
    display: block;

    position: absolute;
    top: 15px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;

}





#cstationbox .bhangarcap .bhangarvals {
    position: absolute;
    top: 33px;
    left: 25px;
    right: 25px;
    grid-auto-flow: column;

}
#cstationbox .bhangarcap .bhangarvals .basehangarclass .basehangarclasscount {
    bottom: 4px;
}




#cstationbox .stationcapacity {
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(33% - 15px);
    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox .stationcapacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_cargo);
}

#cstationbox .stationcapacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .stationcapacity .cargobar .cargobarbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    top: 69px;
    right: 30px;
}
#cstationbox .stationcapacity .cargobar .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}
#cstationbox .stationcapacity .cargobar .cargobarbox #station_cargo_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .stationcapacity .cargobar .cargobarbox #station_cargo_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .stationcapacity .cargobar .cargobarbox .cbbefore {
    display: block;
    position: absolute;
    top: -55px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}

#cstationbox .shipcapacity {
    position: absolute;
    top: 70px;
    left: calc(66% + 5px);
    height: 110px;
    width: calc(33% - 15px);
    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox .shipcapacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_cargo);
}

#cstationbox .shipcapacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .shipcapacity .cargobar .cargobarbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    top: 69px;
    right: 30px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
#cstationbox .shipcapacity .cargobar .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
    max-width: 100%;
}
#cstationbox .shipcapacity .cargobar .cargobarbox #ship_cargo_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .shipcapacity .cargobar .cargobarbox #ship_cargo_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .shipcapacity .cargobar .cargobarbox .cbbefore {
    display: block;
    position: absolute;
    top: -55px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}


#cstationbox .engineeringcapacity {
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(33.33% - 15px);
    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}
#cstationbox .engineeringcapacity:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_engineering_capacity);
    z-index: -1;
}

#cstationbox .engineeringcapacity #engineering_capacity_txt{
    position: absolute;
    top: 83px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .engineeringcapacity #engineering_capacity_maintxt{
    position: absolute;
    top: 45px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .engineeringcapacity .enbefore {
    display: block;
    position: absolute;
    top: 15px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}
#cstationbox .engineeringcapacity .line {
    display: block;
    position: absolute;
    top: 70px;
    left: 10%;
    right: 10%;
    height: 5px;
    box-sizing: border-box;
    line-height: 1px;
    background-image: linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%), linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%), linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: center left, center right,center;
}


#cstationbox .stationcapacity .cargobar .cargobarbox #station_cargo_capacity_txt .dark,
#cstationbox .shipcapacity .cargobar .cargobarbox #ship_cargo_capacity_txt .dark,
#cstationbox .bhangarcap .dark,
#cstationbox .engineeringcapacity #engineering_capacity_txt .dark {
    color: var(--border-effect-color);
}



#cstationbox .error{
    position:absolute;
    top:250px;
    height:45px;
    right:0px;
    left:0px;
    text-transform: uppercase;
    text-align:center;
    padding: 20px 0px ;
    border-spacing:0px;
    text-align:center;
    font-size: 12px;
    color: rgba(200,200,200,1);
    border: none;
    animation: highlited 1000ms linear infinite;
    text-shadow: none;
}

#cstationbox .error strong{
}
#cstationbox #cstation{
    position:absolute;
    top:0px;
    left:10px;
    right:10px;
    bottom:10px;
}
#cstationbox #cstation .assembly_ship_schema{
    position:absolute;
    top: 70px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow: hidden;


}
#cstationbox #cstation .assembly_ship_schema .moveright,
#cstationbox #cstation .assembly_ship_schema .moveleft {
    position: absolute;
    top: calc(50% - 80px);
    height: 160px;
    width: 30px;
    z-index: 999999999;
    cursor: pointer;
}

#cstationbox #cstation .assembly_ship_schema .moveright {
    right: 0px;
    background:rgb(50,50,50) url('./ico/arrow-36-24.png') center no-repeat;
}
#cstationbox #cstation .assembly_ship_schema .moveleft {
    left: 0px;
    background:rgb(50,50,50) url('./ico/arrow-101-24.png') center no-repeat;
}

#cstationbox #cstation .assembly_ship_schema .bactions {
    position: absolute;
    right: 20px;
    top: 0px;

}

#cstationbox #cstation .assembly_ship_schema .bactions .addmodule {

    padding-left: 33px;

}


#cstationbox #cstation .assembly_ship_schema .bactions .addmodule:before {
    content: '+';
    font-family: var(--fontFaimly_button);
    font-size: 30px;
    line-height: 24px;
    text-align: left;
    padding-left: 6px;
}

#cstationbox #cstation .assembly_ship_schema .bactions .repairall {
    margin-right: 10px;
    padding-left: 33px;

}

#cstationbox #cstation .assembly_ship_schema .bactions .repairall:before {
    background-size: 16px;
    background-position: 7px center;
    background-repeat: no-repeat;
    background-image: url(ico/ico_repair.png);
}

#cstationbox #cstation .assembly_ship_schema .moveright:hover,
#cstationbox #cstation .assembly_ship_schema .moveleft:hover {
    animation: blink 100ms linear 2 alternate;
    color: black;
    background-color: #ffbc00;
}
#cstationbox #cstation .assembly_modules{
    position: absolute;
    top:45px;
    left:0px;
    bottom: 0px;
    transition: all 0.2s;
}

#cstationbox #cstation .assembly_modules .module_body {
    position:absolute;
    display: block;
    top:0px;
    bottom:0px;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image-source: linear-gradient(to top, #ff000000 0%, #7883973d 71%, #ff000000 100%);
    border-image-slice: 1;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

#cstationbox #cstation .assembly_modules .module_body:hover {
    border-image-source: linear-gradient(to top, #ff000000 0%, #788397cc 71%, #788397cc 100%);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(139 183 221 / 25%) 71%, rgb(0 0 0 / 0%) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#cstationbox #cstation .assembly_modules .module_body .thint  {
    animation: highlited 1000ms linear infinite;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: unset;
    top: 155px;
    width: unset;
    right: unset;
}

#cstationbox #cstation .assembly_modules .module_body .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}

#cstationbox #cstation .assembly_modules .module_body .module-img {
    position:absolute;
    display: block;
    top:0px;
    height:100%;
    max-height: 540px;
    left: 0px;
    right: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 0px 19px #3a4d7778) brightness(1.5) grayscale(0.4) contrast(1.1);
    transform: scale(-1, 1);
    transition: top 100ms;
}

#cstationbox #cstation .assembly_modules .module_body .module-img.e,
#cstationbox #cstation .assembly_modules .module_body .module-img.c{
    transform: scaleX(-1);
}

#cstationbox #cstation .assembly_modules .module_body .module-bckgr {
    position:absolute;
    display: block;
    top: 158px;
    height: 160px;
    left: 0px;
    right: 0px;
    z-index: -1;
}




#cstationbox #cstation .assembly_modules .module_body .module-artefacts {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 20px;
}




#cstationbox #cstation .assembly_modules .module_body:hover .module-img {
    filter: brightness(1.7) grayscale(0.4) contrast(1.1) drop-shadow(0px 0px 15px rgba(130, 194, 224, 0.5)) drop-shadow(0px 0px 40px #3a4d77ad);
    top: -20px;
}

#cstationbox #cstation .assembly_modules .module_body:hover .thint:not(.wfitting) {
    /*visibility: hidden;*/
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox{
    visibility: hidden; /* Skryje prvek pro začátek */
    opacity: 0;
    position: absolute;
    left: calc(50% - 175px);
    top: 315px;
    width: 350px;
    height: 380px;
    display: block;
    z-index: 999999;
    box-sizing: border-box;
    /*transform: perspective(150px) rotateX(1.5deg); */
    /*animation:showBox 150ms linear 1 alternate;*/
    pointer-events: none;
    transform: perspective(2000px) rotateY(30deg); /* Výchozí rotace */
    transition: transform 150ms linear, opacity 150ms linear, visibility 0s linear 150ms;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox:after {
    content: "";
    top: -60px;
    left: calc(50% - 5px);
    bottom: 100%;
    right: calc(50% - 5px);
    position: absolute;
    display: block;
    background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), linear-gradient(0deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 5px 5px, 1px 60px;
    background-position: top center, center top;
    z-index: -1;

}

#cstationbox #cstation .assembly_modules .module_body:hover .hoverbox{
    visibility: visible;
    opacity: 1;
    display: block;
    z-index: 99999;
    pointer-events: auto;
    transform: perspective(2000px) rotateY(0deg);
    transition: transform 150ms linear, opacity 50ms linear, visibility 0s linear 0s;
}

#cstationbox #cstation .assembly_modules .module_body:hover .hoverbox:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    background-color: rgb(17 19 29);

    clip-path: var(--clip_csbox_hangar_assembly_hoverbox);
    background-size: cover;
    background-color: var(--gitem-background);
    background-image: linear-gradient(rgb(37 63 129 / 80%) 0%, rgb(54 54 207 / 15%) 100%);
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .name{
    position:absolute;
    left: 10px;
    right: 10px;
    top: 90px;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;

}





#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
    height: 70px;

    box-sizing: border-box;
    padding-top: 12px;
}
#cstationbox #cstation .assembly_modules .module_body:hover .hoverbox .weapons{
    /*animation: blink 100ms linear 2;*/
}


#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons:before {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    right: 10px;
    top: 0px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline);
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .sweapons {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;

    text-align: center;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0px 0px;
    cursor: pointer;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon:hover {
    animation: blink 100ms linear 2 alternate;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .image {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: initial;

}


#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .name {
    position: absolute;
    bottom: 10px;

    font-size: 10px;
    left: 4px;
    right: 4px;
    text-align: center;
    top: unset;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .healthbar {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    height: 5px;
    top: initial;
    width:initial;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0px;
    background-color: white;
    right: unset;
    height: unset;
    background-image: none;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .healthbar:before {
    content: '';
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon:hover .whint {
    display: block;

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .whint {
    display: none;
    position: absolute;
    left: 100%;
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(50,50,50,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    top: -3px;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .weapons .weapon .whint:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(50,50,50,1);
    position: absolute;
    top: 0px;
    left: -6px;
}

#cstationbox #cstation .assembly_modules .module_body  .weapondamaged {
    display: block;
    position: absolute;
    top: 225px;
    left: calc(50% - 9px);
    color: black;
    height: 18px;
    background-color: white;
    line-height: 25px;
    font-size: 18px;
    text-transform: uppercase;
    width: 18px;
    text-align: center;
    font-family: var(--fontFaimly_header);
    box-sizing: border-box;
    max-width: 100%;
    padding: 0px;
    z-index: 100;
    background: url(ico/ico_repair.png) center no-repeat;
    background-size: 14px;
    animation:highlited 1000ms linear infinite;
}

#cstationbox #cstation .assembly_modules .module_body .healthbar {
    display: block;
    position: absolute;
    top: calc(50% - 185px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc( 100% - 10px);
    max-width: 100px;
    height: 7px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    animation: blink 100ms linear 2;
    background-color: var(--hud_health_barbckg_color);
}

#cstationbox #cstation .assembly_modules .module_body .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_health_bar_color);
}

#cstationbox #cstation .assembly_modules .module_body .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_health_bar_color);
}

#cstationbox #cstation .assembly_modules .module_body .healthbar .bar.hbred {
    background-color: var(--hud_health_bar_color_020);
}

#cstationbox #cstation .assembly_modules .module_body .healthbar .bar.hbyellow {
    background-color: var(--hud_health_bar_color_050);
}

#cstationbox #cstation .assembly_modules .module_body .storagebar {
    display: block;
    position: absolute;
    top: calc(50% - 174px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc( 100% - 10px);
    max-width: 100px;
    height: 7px;
    animation: blink 100ms linear 2;
    background-color: var(--hud_storage_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#cstationbox #cstation .assembly_modules .module_body .storagebar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_storage_bar_color);
}

#cstationbox #cstation .assembly_modules .module_body .repairmodule {
    display: block;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    color: black;


    background-color: transparent;
    line-height: 35px;
    font-size: 18px;
    text-transform: uppercase;
    right: 170px;
    width: 35px;
    height: 35px;
    text-align: center;
    box-sizing: border-box;
    padding: 0px;


}

#cstationbox #cstation .assembly_modules .module_body .repairmodule:before {
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(ico/ico_repair.png);

}

#cstationbox #cstation .assembly_modules .module_body .repairmodule:not(.unactive):before  {

    animation: highlited 400ms linear infinite;
}

#cstationbox #cstation .assembly_modules .module_body .repairmodule.unactive:before {
    opacity: 0.4;
}



#cstationbox #cstation .assembly_modules .module_body .crewbar {
    display: block;
    position: absolute;
    top: 125px;
    left: 20px;
    right: 20px;
    height: 55px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;

}

#cstationbox #cstation .assembly_modules .module_body:hover .crewbar{
    /*animation: blink 100ms linear 2;*/
}

#cstationbox #cstation .assembly_modules .module_body .crewbar:before {
    content: '';
    position: absolute;
    display: block;
    left: 10px;
    right: 10px;
    top: 0px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline);
}

#cstationbox #cstation .assembly_modules .module_body .crewbar:after {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    right: 10px;
    bottom: -2px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline_right);
}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 36px;
    /* background-color: white; */
    background-size: 55px;
    background-position: center;
    margin: 2px;
    cursor: pointer;

}


#cstationbox #cstation .assembly_modules .module_body  .crewbar .person:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;


    clip-path: var(--clip_hangar_crewbar);

}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;

    background-image: linear-gradient(0deg, rgb(110 110 110 / 82%) 0%, rgba(0,0,0,0) 100%);
    clip-path: var(--clip_hangar_crewbar);

}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person .image {

    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-size: 55px;
    background-position: center;

    clip-path: var(--clip_hangar_crewbar);

}

#cstationbox #cstation .assembly_modules .module_body .crewbar .person > span {
    position: absolute;
    top: 24px;
    left: 10px;
    right: 10px;
    text-align: center;
    color: var(--hud_popiseck_gray_color);
    font-size: 12px;
    text-transform: uppercase;
}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person.tes-T:before {
    background-color: var(--color-t);
}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person.tes-E:before {
    background-color: var(--color-e);
}

#cstationbox #cstation .assembly_modules .module_body  .crewbar .person.tes-S:before {
    background-color: var(--color-s);
}



#cstationbox #cstation .assembly_modules .module_body .hoverbox  .healthbar {
    display: block;
    position: absolute;
    top: 218px;
    left: calc(50%);
    height: 7px;
    width: 250px;
    max-width: unset;
    box-shadow: none;

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .healthbar .txt {
    position: absolute;
    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_health_text_color);
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .healthbar .sbefore {
    display: block;

    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_health_text_color);
    white-space: nowrap;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .storagebar {
    display: block;
    position: absolute;
    top: 256px;
    left: calc(50%);
    width: 250px;
    max-width: unset;
    height: 7px;
    box-shadow: none;

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .storagebar .txt {
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;

    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_storage_text_color);
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .storagebar .sbefore {
    display: block;
    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_storage_text_color);
    white-space: nowrap;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail,

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule,

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons,

#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft{
    position: absolute;
    left: calc(50% - 35px);
    top: 17px;
    width: 70px;
    height: 56px;
    line-height: 30px;
    padding: 0px;
    cursor: pointer;
    text-transform: uppercase;
    line-height: 10px;
    font-size: 10px;
    filter: drop-shadow(0px 0px 7px #3a4d77ad);


}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .unablebutton{
    filter: none;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .unablebutton:after{
    background-image:
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable2) 0%, var(--border-editor-effect-color-unavailable2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable2) 0%, var(--border-editor-effect-color-unavailable2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%) !important;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail {
    left: 14px;
    right: unset;
}





#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule  {
    right: unset;
    left: 98px;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft {
    right: 14px;
    left: unset;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons {
    right: 98px;
    left: unset;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail:before {
    /*background-image: url(ico/module_256.png);*/
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons:before {
    /*background-image: url(ico/modulewpn_256.png);*/
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule:before  {
    /*background-image: url(ico/moduledet_256.png);*/
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft:before  {
    /*background-image: url(ico/moduledet_256.png);*/
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail:after,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons:after,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule:after,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft:after{

    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%), linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft:before{
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    background-color: transparent;

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail .sbd,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule .sbd,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons .sbd,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft .sbd{
    display: block;
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    text-align: center;
    color: #b9dbff;
    font-family: var(--fontFaimly_button);
    transform: translateY(-50%);
    line-height: 13px;
    white-space: normal;
    font-size: 10px;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .unablebutton .sbd{
    color: gray;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox  .changemodule.unablebutton .unabletext,
#cstationbox #cstation .assembly_modules .module_body .hoverbox  .changeweapons.unablebutton .unabletext  {
    display: none;
    z-index: 99999999999;
    padding: 6px 10px;
    bottom: 60px;
    left: 50%;
    width: 120px;
    position: absolute;
    color: var(--hud_invalid_text);
    background-color: var(--hud_invalid_background);
    font-size: 12px;
    line-height: 15px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    text-transform: none;
    text-align: center;
    transform: translateX(-50%);

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox   .changemodule.unablebutton:hover .unabletext,
#cstationbox #cstation .assembly_modules .module_body .hoverbox   .changeweapons.unablebutton:hover .unabletext {
    display: block;
}

#cstationbox #cstation .assembly_modules .module_body .hoverbox   .changemodule.unablebutton .unabletext:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox   .changeweapons.unablebutton .unabletext:before {
    content: "";
    display: block;

    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    left: calc(50% - 5px);
    bottom: -5px;
    border-top: 5px solid var(--hud_invalid_background);
    ;

}




#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail:hover:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changemodule:hover:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons:hover:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .modulecraft:hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;

}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .unablebutton:hover:before{
    box-shadow: none;
    animation: none;
}


#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons .thint,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail .thint
{
    animation: highlited 1000ms linear infinite;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: unset;
    bottom: 60px;
    top: unset;


}

#cstationbox #cstation .assembly_modules .module_body .hoverbox .changeweapons .thint:before,
#cstationbox #cstation .assembly_modules .module_body .hoverbox .moduledetail .thint:before

{
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}


#cstationbox .buttons_swich{
    display: block;
    position: absolute;
    width: 38px;
    height: 16px;
    top: 14px;
    right: 35px;
    z-index: 1;
}

#cstationbox .buttons_swich .swich_table{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 0px;
    right: 0px;
    opacity: 0.5;

    background: black url(ico/list-window-16.png) center no-repeat;
}

#cstationbox .buttons_swich .swich_grid{
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 0px;
    left: 0px;
    opacity: 0.5;

    background: black url(ico/grid-window-16.png) center no-repeat;
}
#cstationbox .buttons_swich .swich_grid .thint{
    top: -5px;
}


#cstationbox .buttons_swich .swich_table:hover,
#cstationbox .buttons_swich .swich_grid:hover {
    opacity: 1;
}


#cstationbox #cstation .zalozky,
#growBase .zalozky,
#cstationbox .zalozky
{
    position:absolute;
    top:13px;
    left:225px;
    z-index: 1;
}

#cstationbox .zalozky span.quest-hide {
    display: none !important;
}


#cstationbox #cstation .zalozky span:not(.thint),
#growBase .zalozky span:not(.thint),
#cstationbox .zalozky span:not(.thint)
{
    display: block;
    float: left;
    height: 40px;
    padding: 0px 20px;
    line-height: 38px;
    cursor: pointer;
    color: #b9dbff;
    font-size: 14px;

    font-family: var(--fontFaimly_button);
    position: relative;
    margin: 0px 15px 0px 0px;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 65px;
}

#cstationbox #cstation .zalozky span.quest-gray:not(.thint),
#growBase .zalozky span.quest-gray:not(.thint),
#cstationbox .zalozky span.quest-gray:not(.thint)
{
    color: gray;
}

#cstationbox #cstation .zalozky span:not(.thint):not(.quest-gray):hover,
#growBase .zalozky span:not(.thint):not(.quest-gray):hover,
#cstationbox .zalozky span:not(.thint):not(.quest-gray):hover {
    animation: none;
    color: white;

}

#cstationbox #cstation .zalozky span:not(.thint):not(.quest-gray):hover:before,
#growBase .zalozky span:not(.thint):not(.quest-gray):hover:before,
#cstationbox .zalozky span:not(.thint):not(.quest-gray):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation:blink 100ms linear 2 alternate;
}

#cstationbox #cstation .zalozky span:not(.thint):before,
#growBase .zalozky span:not(.thint):before,
#cstationbox .zalozky span:not(.thint):before {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-color: transparent;
}

#cstationbox #cstation .zalozky span:not(.thint):after,
#growBase .zalozky span:not(.thint):after,
#cstationbox .zalozky span:not(.thint):after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox #cstation .zalozky span.quest-gray:not(.thint):after,
#growBase .zalozky span.quest-gray:not(.thint):after,
#cstationbox .zalozky span.quest-gray:not(.thint):after {

    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%);
}

#cstationbox #cstation .zalozky span:not(.thint) .thint,
#growBase .zalozky span:not(.thint) .thint,
#cstationbox .zalozky span:not(.thint) .thint  {

    left: calc(50% - 30px);
    text-align: center;
    bottom: 45px;
    top: unset;
    right: unset;
    width: auto;

    margin: 0px;
    min-width: 60px;
}


#cstationbox #cstation .zalozky span:not(.thint) .thint:before,
#growBase .zalozky span:not(.thint) .thint:before,
#cstationbox .zalozky span:not(.thint) .thint:before  {

    border-bottom: none;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
    right: unset;
}






#cstationbox #cstation .zalozky span.active,
#growBase .zalozky span.active,
#cstationbox .zalozky span.active{
    color: white;

}
#cstationbox #cstation .zalozky span.active:before,
#growBase .zalozky span.active:before,
#cstationbox .zalozky span.active:before{
    filter: drop-shadow(0px 0px 20px #b9dbff);
    box-shadow: 0px 0px 15px #3b466f inset;
}


#cstationbox #cstation .zalozky span.active:hover,
#growBase .zalozky span.active:hover,
#cstationbox .zalozky span.active:hover{
    animation:none;
}





#cstationbox #cstation .subzalozky {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 230px;
}

#cstationbox.sellwindow #cstation .subzalozky .thint {
    top: 5px;
    right: unset;
    left: -8px;
}
#cstationbox #cstation .subzalozky span:not(.q_qty):not(.thint) {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0);
}

#cstationbox #cstation .subzalozky span:not(.q_qty):not(.thint).active {
    color: var(--hud_bookmarkcolor);

}
#cstationbox #cstation .subzalozky span:not(.q_qty):not(.thint):hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);

}

#cstationbox #cstation .subzalozky span .thint {
    left: 100%;
    text-align: center;
    bottom: -1px;
    top: unset;
    right: unset;
}

#cstationbox #cstation .subzalozky span .thint:before {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid #ffbc00;
    border-bottom: 10px solid transparent;
    border-left: none;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
    right: unset;
}


#cstationbox.warehousewindow #cstation .subzalozky span,
#cstationbox.inventorywindow #cstation .subzalozky span {
    margin: 0px 0px 0px;
}



#cstationbox #cstation .subzalozky span.active:hover {
    animation: none;
}


#cstationbox #cstation .subzalozky .q_qty {
    margin: 0px 4px;
    font-size: 10px;
    padding: 0px 6px 0px 6px;
    color: #ffbc00;
    position: relative;
    white-space: nowrap;
    line-height: 14px;
}

#cstationbox #cstation .subzalozky .q_qty:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0.5;
}

#cstationbox #cstation .subzalozky .q_qty:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.5;
}

#cstationbox #cstation .subloadbox {
    position: absolute;
    top: 200px;
    left: 250px;
    bottom: 0px;
    right: 0px;
}



#cstationbox #cstation .scroll{
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 200px;
    left: 10px;
    bottom: 0px;
    right: 5px;
    padding-bottom: 260px;
    padding-right: 20px;
}

#cstationbox.crewwindow #cstation .filters{

    position: absolute;
    top: 200px;
    left: 10px;
    right: 5px;
    z-index: 100;
}

#cstationbox.crewwindow #cstation .scroll{
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 250px;
    left: 10px;
    bottom: 0px;
    right: 5px;
    padding-bottom: 260px;
}

#cstationbox.owncrewwindow #cstation .filters{

    position: absolute;
    top: 200px;
    left: 10px;
    right: 5px;
    z-index: 20;
}
#cstationbox.warehousewindow #cstation .filters,
#cstationbox.inventorywindow #cstation .filters{

    position: absolute;
    top: 200px;
    left: 250px;
    right: 5px;
    z-index: 20;
}
#cstationbox.warehousewindow #cstation .filters button,
#cstationbox.inventorywindow #cstation .filters button,
#cstationbox.owncrewwindow #cstation .filters button,
#cstationbox.crewwindow #cstation .filters button {
    margin: 0px 3px !important;
}
#cstationbox.warehousewindow #cstation .filters button:before,
#cstationbox.inventorywindow #cstation .filters button:before,
#cstationbox.owncrewwindow #cstation .filters button:before,
#cstationbox.crewwindow #cstation .filters button:before {
    background-color: transparent !important;
}
#cstationbox.warehousewindow #cstation .filters button:hover:before,
#cstationbox.inventorywindow #cstation .filters button:hover:before,
#cstationbox.owncrewwindow #cstation .filters button:hover:before,
#cstationbox.crewwindow #cstation .filters button:hover:before {
    box-shadow: none !important;
}
#cstationbox.warehousewindow #cstation .filters button:after,
#cstationbox.inventorywindow #cstation .filters button:after,
#cstationbox.owncrewwindow #cstation .filters button:after,
#cstationbox.crewwindow #cstation .filters button:after {
    background-image: none !important;
}
#cstationbox.warehousewindow #cstation .filters button .qty,
#cstationbox.inventorywindow #cstation .filters button .qty,
#cstationbox.owncrewwindow #cstation .filters button .qty,
#cstationbox.crewwindow #cstation .filters button .qty  {
    margin: 0px 4px;
    font-size: 10px;
    padding: 0px 6px 0px 6px;
    color: #ffbc00;
    position: relative;
    white-space: nowrap;
    line-height: 14px;
    display: inline;
}
#cstationbox.warehousewindow #cstation .filters button .qty:before,
#cstationbox.inventorywindow #cstation .filters button .qty:before,
#cstationbox.owncrewwindow #cstation .filters button .qty:before,
#cstationbox.crewwindow #cstation .filters button .qty:before  {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0.5;
}
#cstationbox.warehousewindow #cstation .filters button .qty:after,
#cstationbox.inventorywindow #cstation .filters button .qty:after,
#cstationbox.owncrewwindow #cstation .filters button .qty:after,
#cstationbox.crewwindow #cstation .filters button .qty:after  {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.5;
}

#cstationbox.owncrewwindow #cstation .scroll{
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 250px;
    left: 10px;
    bottom: 0px;
    right: 5px;
    padding-bottom: 260px;
}

#cstationbox #cstation .scroll.sub{
    left: 250px;
    top: 200px;
}





#cstationbox.inventorywindow #cstation .inventorywindow_header,
#cstationbox.warehousewindow #cstation .warehousewindow_header{
    position: absolute;
    top: 200px;
    left: 250px;
    padding: 0px;


    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    z-index: 10;
}
#cstationbox.inventorywindow #cstation .inventorywindow_header > span,
#cstationbox.warehousewindow #cstation .warehousewindow_header > span{
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}
#cstationbox.inventorywindow #cstation .inventorywindow_header > span:before,
#cstationbox.warehousewindow #cstation .warehousewindow_header > span:before{
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}
#cstationbox.inventorywindow #cstation .inventorywindow_header > span:hover:before,
#cstationbox.warehousewindow #cstation .warehousewindow_header > span:hover:before{
    background-color: black;
    filter: invert(0);
}


#cstationbox.inventorywindow #cstation .scroll.sub,
#cstationbox.warehousewindow #cstation .scroll.sub {
    top: 250px;
}

#cstationbox #cstation .scroll.sub .info,
#cstationbox.inventorywindow #cstation .scroll.sub .info,
#cstationbox.warehousewindow #cstation .scroll.sub .info,
#cstationbox .tradelink_content .info,
#boreholestopconfirmdom .info,
#cstationbox.refinerywindow  #cstation .scroll .info  {

    background-color: rgba(0,0,0,0);
    color: rgba(200,200,200,1);
    cursor: default;
    text-align: center;
    padding: 20px 5px 0px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 19px;
}

#cstationbox.constructionwindow #cstation .scroll{
    top: 80px;
}

#cstationbox.refineryavailablewindow #cstation .scroll{
    top: 200px;
}

#cstationbox #cstation .bars.hangars{
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(33.3% - 20px);
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox #cstation .bars.hangars:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_energy);
}

#cstationbox #cstation .bars.hangars .station-energy-div {
    display: block;
    position: absolute;
    width: calc(100% - 40px);
    top: 0px;
    text-align: center;
    left: 20px;

    box-sizing: border-box;


}

#cstationbox #cstation .bars .titler {


    box-sizing: border-box;
    text-transform: uppercase;
    top: 14px;
    position: relative;
    line-height: 10px;
    right: 0px;
    left: 0px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}



#cstationbox #cstation .bars.hangars .station-energy-div .station-energy {
    display: block;
    position: absolute;


    text-align: center;
    left: 20px;
    right: 20px;

    height: 7px;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    top: 72px;

}






#cstationbox #cstation .bars.hangars .station-energy .bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}

#cstationbox #cstation .bars.hangars .station-energy .bar-count {
    display: block;
    position: absolute;
    left: 0px;
    top: -38px;
    right: 0px;
    height: 30px;
    color: white;
    line-height: 30px;
    font-size: 14px;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
}

#cstationbox #cstation .bars.hangars .station-energy-div .capacity_txt{
    position: absolute;

    top: 88px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: gray;
}


#cstationbox #cstation .bars.hangars .station-hangarcapaity-div {
    display: block;
    position: absolute;
    width: calc(35% - 80px);
    top: 0px;
    text-align: center;
    right: 40px;

    box-sizing: border-box;


}

#cstationbox #cstation .bars.hangars .station-hangarcapaity-div .station-hangarcapaity {
    display: block;
    position: absolute;

    top: 60px;
    text-align: center;
    right: 0px;
    left: 0px;

    box-sizing: border-box;
    line-height: 30px;

    font-size: 33px;
    color: white;

}




#cstationbox #cstation .subloadbox .scroll  {
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    min-height: 0;
    max-height: 100%;
    padding-right: 10px;
    align-items: start
}

#cstationbox #cstation .scroll table.itemlist{
    width: calc(100% - 3px);
    border-spacing:0px;
    border-collapse:separate;
    grid-column: 1 / -1;



}

#cstationbox #cstation .scroll table.itemlist.production .item td{
    height: 80px;
    border-bottom: 1px solid gray;
    padding: 5px 15px;

}
#cstationbox #cstation .scroll table.itemlist.production th{

    padding: 2px 15px;

}
#cstationbox #cstation .scroll table.itemlist.production .item td.actions{
    vertical-align: middle;
    width: 185px;
}


#cstationbox #cstation .scroll table.itemlist .item td{
    height: 45px;



}

#cstationbox #cstation .scroll table.itemlist tr.spacer td{
    padding: 0px 0px;
    height: 3px;
}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable) td .miniature{
    cursor: pointer;
}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable):hover td .miniature:before,
#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable):hover td .miniature:after{
    filter:brightness(2);
}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable) td .miniature:before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-color: transparent;
    box-shadow: 0px 0px 15px #3b466f inset;

}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable) td .miniature:after {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px),  calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;

}


#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable) td{
    cursor: pointer;
}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable):hover td{
    background-color: rgb(33 50 72);

}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.bpc{
    white-space: nowrap;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.ttd{
    white-space: nowrap;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.mu{
    text-transform: none;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td{
    background-color: rgb(25 37 53);
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.name{
    text-align: center;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.name .returns{
    position: relative;
    float: right;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.name .miniature{
    position: relative;
    cursor: pointer;
    margin: 0px;

}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info):hover td.name .miniature{
    filter:brightness(2);
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.name > .miniature:before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-color: transparent;
    box-shadow: 0px 0px 15px #3b466f inset;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.name > .miniature:after {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    right: -8px;
    top: -8px;
    bottom: -8px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px),  calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;

}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.image{
    text-align: center;
    padding: 0px 12px 2px 12px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.namelink{
    padding-right: 5px;
    padding-left: 5px;
    font-size: 14px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.namelink .inline-stasis{

    padding-left: 47px;
}


#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.namelink .miniature{
    padding-right: 5px;
    padding-left: 5px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.namelink .miniature .miniature-image{
    left: 5px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-mu{
    text-transform: none;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-weight{
    text-transform: none;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-su{
    text-transform: none;
}

#cstationbox #cstation .scroll table.itemlist tr.unmanufacturable td{
    color: #595959;

}

#cstationbox #cstation .scroll table.itemlist tr td.actions td{
    border-top: none !important;
    border-bottom: none !important;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.info{
    background-color: rgba(0,0,0,0);
    border-top: 0px;
    border-bottom: 0px;
    cursor: default;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info):not(.unmanufacturable):hover td:not(.info){
    background-color: rgb(33 50 72);
}

#cstationbox.constructionwindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):hover td{

}

#cstationbox.factorywindow #cstation .scroll table.itemlist tr:not(.spacer):not(.info):hover td button{
    background-color: rgb(35,35,35);
}


#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select{
    text-align: center;
    padding: 0px 10px 0px 15px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox{

}




#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.firstleft:not(.namelink){
    text-align: center;
}





#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.lastright{
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px;
    background-position: top right, bottom right;
    padding-right: 15px;
}


#cstationbox #cstation .scroll table.itemlist td button .thint {
    right: calc(100% - 15px);
}


#cstationbox #cstation .scroll table.itemlist .hangar-qty{
    width: 120px;
    text-align: right;
}

#cstationbox .itemlist.hangars {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    min-height: 0;
    max-height: 100%;
    padding-right: 10px;
    padding-top: 30px;
}

#cstationbox #cstation .scroll table.itemlist td .stockpile .thint{

    right: 15px;
    text-align: center;
    bottom: 50%;
    transform: translateY(50%);
    top: unset;
    left: unset;
}

#cstationbox #cstation .scroll table.itemlist td .stockpile .thint:before{
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid #ffbc00;
    border-right: unset;
    left: unset;
    right: -10px;
}


#cstationbox .itemlist.hangars .ship {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 120px;

    color: white;
}

#cstationbox .itemlist.hangars .ship:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-image: linear-gradient(rgb(28 38 69 / 82%) 0%, rgb(60 72 91) 100%);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 8px;
    clip-path: var(--clip_csbox_hangar_ship);
}

#cstationbox .itemlist.hangars .ship.enemy {
    color: rgb(255,179,0);
}


#cstationbox .itemlist.hangars .ship.enemy:before {
    background-image: linear-gradient(rgb(29 33 45 / 38%) 0%, rgb(31 29 35) 100%);
}






#cstationbox .itemlist.hangars .ship .ship-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    font-family: var(--fontFaimly_button);
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;

}





#cstationbox .itemlist.hangars .ship .ship-img  {
    position: absolute;
    display: block;
    height: 190px;
    top: calc(50% - 99px);
    left: 0px;
    width: calc(100% - 109px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(3) grayscale(1) contrast(1.3);
}

#cstationbox .itemlist.hangars .ship.enemy .ship-img  {
    filter: brightness(3) grayscale(1) contrast(1.3);
}



#cstationbox .itemlist.hangars .ship .ship-corp {
    position: absolute;
    right: 0px;
    bottom: -2px;
    width: 170px;
    color: white;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    overflow: hidden;
    height: 12px;
    white-space: nowrap;
}

#cstationbox .itemlist.hangars .ship.enemy .ship-corp {
    color: rgb(60,60,60);
}

#cstationbox .itemlist.hangars .ship .ship-state {
    font-size: 10px;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 40px;
    color: gray;
    text-align: center;
    text-transform: uppercase;
}


#cstationbox .itemlist.hangars .ship .ship-energy{
    display: block;
    height: 7px;
    width: calc(100% - 207px);
    box-sizing: border-box;
    position: absolute;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    bottom: 18px;
    left: 17px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
}

#cstationbox .itemlist.hangars .ship .ship-energy .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
    ;
    bottom: 0px;
}

#cstationbox .itemlist.hangars .ship .ship-energy .bar-count{
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: white;

}



#cstationbox .itemlist.hangars .ship.enemy .ship-energy .bar{
    background: rgb(255,160,0,1);
}

#cstationbox .itemlist.hangars .ship.enemy .ship-energy .bar-count{
    color: rgb(255,160,0,1);

}

#cstationbox .itemlist.hangars .ship .ship-image img {
    position: absolute;
    top: 0px;
    left: calc(50% - 40px);
    height: 80px;
    width: 80px;
    background-size: contain;
}


#cstationbox .itemlist.hangars .ship .ship-bttns{
    display: block;

    position: absolute;

    bottom: 25px;
    right: 10px;
}


#cstationbox .itemlist.hangars .ship .sbtn {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 5px;
    text-align: center;
    text-transform: uppercase;
    line-height: 70px;
    font-size: 10px;

    padding: 0px;
    cursor: pointer;

    border: none;
    color: transparent;
    background-color: transparent;
}

#cstationbox .itemlist.hangars .ship .sbtn:before{
    content: "";
    position: absolute;
    display: block;
    left: 3px;
    right: 3px;
    bottom: 3px;
    top: 3px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;

}


#cstationbox .itemlist.hangars .ship .sbtn:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox .itemlist.hangars .ship .sbtn:hover:before {
    box-shadow: 0px 0px 15px #4d5d97 inset;
    animation: blink 100ms linear 2 alternate;
}


#cstationbox .itemlist.hangars .ship .sbtn.ship-recharge:before {
    background-image:url('ico/ico_recharge_128.png');
}
#cstationbox .itemlist.hangars .ship.enemy .sbtn.ship-recharge:before {
    box-shadow: 0px 0px 15px rgba(255, 160, 0, 1) inset;
}
#cstationbox .itemlist.hangars .ship .sbtn.ship-undock:before {
    background-image:url('ico/ico_detach2_128.png');
    background-size: 12px;
}
#cstationbox .itemlist.hangars .ship.enemy .sbtn.ship-undock:before {
    box-shadow: 0px 0px 15px rgba(255, 160, 0, 1) inset;
}
#cstationbox .itemlist.hangars .ship .sbtn.ship-assembly:before {
    background-image: url(ico/ico_assembly_128.png);
}
#cstationbox .itemlist.hangars .ship .sbtn.ship-swich:before {
    background-image:url('ico/ico_swich_128.png');
    background-size: 18px;
}

#cstationbox .itemlist.hangars .ship .sbtn:hover > .subtext {
    display: block;
}


#cstationbox #cstation .scroll .gitem {
    height: 90px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    animation: blink 100ms linear 2 alternate;
    color: white;
}

#cstationbox #cstation .scroll .gitem:hover {
    color: black;
}

#cstationbox #cstation .scroll .gitem:hover .img {
    display: none;
}

#cstationbox #cstation .scroll .gitem:before {
    content: "";
    display:block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(50,50,50);

    clip-path: var(--clip_market_catalog_item);
    z-index: -1;
}

#cstationbox #cstation .scroll .gitem:hover:before {
    background-color: rgb(255,255,255);
}



#cstationbox #cstation .scroll .gitem .promoted{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background-color: var(--gitem-site);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
    z-index: 1;
}

#cstationbox #cstation .scroll .gitem .promoted.ad1{
    background-image: url(ico/ico_ad_line-64.png);
}
#cstationbox #cstation .scroll .gitem .promoted.ad2{
    background-image: url(ico/ico_ad_box-64.png);
}
#cstationbox #cstation .scroll .gitem .promoted.ad3{
    background-image: url(ico/ico_ad_bigbox-64.png);
}

#cstationbox #cstation .scroll .gitem .thint{
    position: absolute;
    animation: highlited 1000ms linear infinite;
    left: 21px;
    text-align: center;
    bottom: unset;
    top: -5px;
    right: unset;
}

#cstationbox #cstation .scroll .gitem .thint:before {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}

#cstationbox #cstation .scroll .gitem .img {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background-color: rgb(10,10,10);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;


    clip-path: var(--clip_market_catalog_item);
}

#cstationbox #cstation .scroll .gitem .img:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(
        64deg
        , rgb(0 0 0) 0%, rgb(0 0 0 / 33%) 100%);
}

#cstationbox #cstation .scroll .gitem.own:before {
    background-color: rgb(255,255,255);
}

/*
#cstationbox #cstation .scroll .gitem .img:before {
    display: block;
    content: '';
    position: absolute;
    width: 10px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    border-top: 2px solid rgba(255,255,255,.2);
    border-left: 2px solid rgba(255,255,255,.2);
    border-bottom: 2px solid rgba(255,255,255,.2);
    z-index: 100;
} 
   
#cstationbox #cstation .scroll .gitem .img:after {
    display: block;
    content: '';
    position: absolute;
    width: 10px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    border-bottom: 2px solid rgba(255,255,255,.2);
    border-right: 2px solid rgba(255,255,255,.2);
    border-top: 2px solid rgba(255,255,255,.2);
    z-index: 100;
}  
*/





#cstationbox #cstation .scroll .gitem .healthbar {
    display: block;
    position: absolute;
    top: 26px;
    left: 14px;
    width: 90px;
    height: 5px;
    background-image: linear-gradient(
        45deg
        , var(--hud_health_barbckg_color) 25%, transparent 25%, transparent 75%, var(--hud_health_barbckg_color) 75%, var(--hud_health_barbckg_color)), linear-gradient(
        45deg
        , var(--hud_health_barbckg_color) 25%, transparent 25%, transparent 75%, var(--hud_health_barbckg_color) 75%, var(--hud_health_barbckg_color));
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    background-color: black;
}

#cstationbox #cstation .scroll .gitem .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_health_bar_color);
}

#cstationbox #cstation .scroll .gitem .healthbar .txt {
    position: absolute;
    top: 11px;
}

#cstationbox #cstation .scroll .gitem .namelink {
    position: absolute;
    top: 6px;
    left: 15px;
    right: 31px;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 15px;
    /* overflow: hidden; */
    /* height: 40px; */
    padding: 0px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
#cstationbox #cstation .scroll .gitem .namelink span {

}

#cstationbox #cstation .scroll .gitem .site {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background-color: rgba(255,255,255,0.3);
    z-index: 1;
}

#cstationbox #cstation .scroll .gitem .site.station {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background: rgba(255,255,255,0.3) url(./ico/ico_card_station.png) center no-repeat;
    background-size: 18px;
}

#cstationbox #cstation .scroll .gitem .site.base {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background: rgba(255,255,255,0.3) url(./ico/ico_card_ship.png) center no-repeat;
    background-size: 18px;
}

#cstationbox #cstation .scroll .gitem .site.combined {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background: var(--gitem-site) url(./ico/ico_card_ship.png) center no-repeat;
    background-size: 18px;
}

#cstationbox #cstation .scroll .gitem .qty {
    position: absolute;
    top: 20px;
    left: 14px;
    right: 5px;
    text-align: left;
    text-transform: uppercase;
    font-size: 27px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

#cstationbox #cstation .scroll .gitem .qty .mu {
    font-size: 10px;
}

#cstationbox #cstation .scroll .gitem .richness {
    position: absolute;
    top: 50px;
    left: 16px;
    right: 5px;
    text-align: left;
    text-transform: uppercase;
    font-size: 10px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

#cstationbox #cstation .scroll .gitem .price {
    position: absolute;
    bottom: 7px;
    left: 15px;
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}


#cstationbox #cstation .scroll .gitem .price:after {
    content: 'EXC';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: calc(100% + 5px);
    text-align: left;
    padding-right: 45px;

    text-transform: uppercase;
    line-height: 24px;

    font-size: 10px;

}




#cstationbox #cstation .scroll table.itemlist.storages tr.item:hover td {

    background-image: none;

    color: white;
    animation: none;
}




#cstationbox #cstation .scroll table.itemlist th{
    color: black;
    padding: 0px 5px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);

    text-align: left;
    text-transform: uppercase;
    vertical-align: top;
    line-height: 20px;
    background: white;

}
#cstationbox #cstation .scroll table.itemlist th.merch_name{

}
#cstationbox #cstation .scroll table.itemlist th.merch_qty{
    text-align: right;
    width: 100px;
}

#cstationbox #cstation .scroll table.itemlist th.merch_mu{
    width: 50px;
}

#cstationbox #cstation .scroll table.itemlist th.merch_price{
    text-align: right;
    width: 100px;
}
#cstationbox #cstation .scroll table.itemlist th.merch_tprice{
    text-align: right;
    width: 100px;
}

#cstationbox #cstation .scroll table.itemlist th.merch_fee{
    text-align: right;
    width: 100px;
}

#cstationbox #cstation .scroll table.itemlist th.merch_actions{
    text-align: right;
    width: 145px;
}

#cstationbox #cstation .scroll table.itemlist th.label{
    border-bottom: none;
    padding-bottom: 11px;
    font-size: 25px;
    font-family: var(--fontFaimly_header);
    padding-top: 10px;
    background-color: white;
    color: black;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}

#cstationbox #cstation .scroll table.itemlist tr.info td{
    text-align: center;
    padding: 20px 5px 0px;
    border: none;
}

#cstationbox #cstation .scroll table.itemlist tr.info td{
    text-align: center;
    padding: 20px 5px 0px;
    border: none;
}

#cstationbox #cstation .scroll table.itemlist.production .actions{
    padding: 10px 10px;
    text-align: center;
    vertical-align: top;
    width: 180px;
}

#cstationbox #cstation .itemlist.production .warehousetable {
    margin: 0px 0px;
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}
#cstationbox #cstation .itemlist.production table.warehousetable tr.buttn td {
    padding: 0px;
    height: 30px;
}

#cstationbox #cstation .itemlist.production table.warehousetable tr.price_warehouse td {
    padding: 0px;
    height: 30px;
}


#cstationbox #cstation .itemlist.production  button {
    min-width: 100px;
    margin: 3px 0px;
    width: 100%;
}

#cstationbox .refinery .refinery_option_actions button {
    min-width: 100px;
    margin: 3px 0px;
}



#cstationbox #cstation .itemlist.production .warehousetable .price_warehouse th {
    height: 11px;
    color: gray;
    width: 50%;
    text-align: right;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 12px;
    vertical-align: middle;
    padding: 0px 5px 0px 0px;
    background-color: transparent;
}

#cstationbox #cstation .itemlist.production .warehousetable .price_warehouse td {
    height: 11px;

    width: 50%;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 0px 0px;
    border-bottom: none;
}


#cstationbox .whitelink,
#cstationadtBox .whitelink,
#cstationsellBox .whitelink,
#cstationbuyBox .whitelink,
#cstationctBox .whitelink,

#cstationRefineBox .whitelink,
#zones .whitelink,
#messages .mbody .whitelink{
    color: black;
    background-color: white;
    padding: 0px 8px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 18px;
    font-size: 12px;
    clip-path: var(--clip_whitelink);
    display: inline-block;
    font-family: var(--fontFaimly_button);

}

#messages .mbody .whitelink{
    padding: 0px 8px;
    line-height: unset;
    font-size: unset;
}

#cstationbox .whitelink.premium,
#cstationadtBox .whitelink.premium,
#cstationsellBox .whitelink.premium,
#cstationbuyBox .whitelink.premium,
#cstationctBox .whitelink.premium,

#zones .whitelink.premium {
    background-color: #ffbc00;

}




#cstationbox .whitelink:hover,
#cstationadtBox .whitelink:hover,
#cstationsellBox .whitelink:hover,
#cstationbuyBox .whitelink:hover,
#cstationctBox .whitelink:hover,
#zones .whitelink:hover,
#messages .mbody .whitelink:hover{
    animation: blink 100ms linear 2;
}





#cstationbox #cstation .scroll table.itemlist td{
    font-size: 14px;
    color: rgba(255,255,255,1);
    text-transform: uppercase;

    padding: 5px 5px;
    cursor: pointer;
    position: relative;
}

#cstationbox.factorywindow #cstation .scroll table.itemlist td{
    cursor: default;

}



#cstationbox #cstation .scroll table.itemlist td .thint{

    right: 10px;
    text-align: center;
    bottom: 50%;
    transform: translateY(50%);
    top: unset;
    left: unset;
}

#cstationbox #cstation .scroll table.itemlist td .thint:before{
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid #ffbc00;
    border-right: unset;
    left: unset;
    right: -10px;
}


.inline-crew {
    position: relative;
    height: 22px;
    color: white;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fit, 20px);
}

.inline-crew .inline-crew-member
{
    position: relative;
    text-align: center;
    height: 22px;
    cursor: pointer;
}

.inline-crew .inline-crew-member:hover
{
    /*animation:blink 100ms linear 2 alternate;*/
}

.inline-crew .inline-crew-member:hover > .subtext
{
    display: block;
}

.inline-crew .inline-crew-member .astronautface{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 39px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(1);
    background-position: -14px -7px;
    background-repeat: no-repeat;
    clip-path: var(--clip_dockfleetcrew);
}

.inline-crew .inline-crew-member .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(110 110 110 / 52%) 0%, rgba(0, 0, 0, 0) 100%);
}

.inline-crew .inline-crew-member:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(88 88 88);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_dockfleetcrew);

}

.inline-crew .inline-crew-member.tes-t:before{
    background-color: var(--color-t);
}

.inline-crew .inline-crew-member.tes-e:before{
    background-color: var(--color-e);
}

.inline-crew .inline-crew-member.tes-s:before{
    background-color: var(--color-s);
}






.inline-stasis {
    position: relative;
    height: 22px;
    color: white;
    display: grid;
    box-sizing: border-box;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fit, 20px);

}

.inline-stasis .moreitems
{
    position: relative;
    text-align: center;
    height: 22px;
    cursor: default;
    color: #878787;
    font-size: 14px;
    line-height: 22px;
}



.inline-stasis .inline-stasis-member
{
    position: relative;
    text-align: center;
    height: 22px;
    cursor: pointer;
}

.inline-stasis .inline-stasis-member:hover
{
    /*animation:blink 100ms linear 2 alternate;*/
}

.inline-stasis .inline-stasis-member:hover > .subtext
{
    display: block;
}

.inline-stasis .inline-stasis-member .astronautface{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 39px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(1);
    background-position: -14px -7px;
    background-repeat: no-repeat;
    clip-path: var(--clip_dockfleetcrew);
}

.inline-stasis .inline-stasis-member .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(110 110 110 / 52%) 0%, rgba(0, 0, 0, 0) 100%);
}

.inline-stasis .inline-stasis-member:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(88 88 88);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_dockfleetcrew);

}

.inline-stasis .inline-stasis-member.tes-t:before{
    background-color: var(--color-t);
}

.inline-stasis .inline-stasis-member.tes-e:before{
    background-color: var(--color-e);
}

.inline-stasis .inline-stasis-member.tes-s:before{
    background-color: var(--color-s);
}




#cstationbox #cstation .scroll table.itemlist td.item-name{

    text-transform: uppercase;
}

#cstationbox #cstation .scroll table.itemlist td.item-name .module-artefacts{
    padding: 0px;
    text-align: left;
    height: 30px;
    z-index: 1;
}

#cstationbox #cstation .scroll table.itemlist td.item-image{

    min-height: 55px;
    min-width: 55px;
    padding: 0px;
}




#cstationbox #cstation .scroll table.itemlist td.item-inputembark{
    width: 95px;
    text-align: right;
    padding-right: 0px;
    padding-left: 0px;
}

#cstationbox #cstation .scroll table.itemlist td.item-input{
    width: 170px;
    text-align: right;
    padding-right: 0px;
    white-space: nowrap;
}



#cstationbox #cstation .scroll table.itemlist td.item-image img{
    position: absolute;

    height: 31px;
    top: 2px;
    left: 7px;
}

#cstationbox #cstation .scroll table.itemlist td.namelink{

    color: white;
}



#cstationbox #cstation .scroll table.itemlist th.item-qty,
#cstationbox #cstation .scroll table.itemlist td.item-qty{
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist th.item-weight,
#cstationbox #cstation .scroll table.itemlist td.item-weight{
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist th.item-su,
#cstationbox #cstation .scroll table.itemlist td.item-su{
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist th.item-sp,
#cstationbox #cstation .scroll table.itemlist td.item-sp{
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist th.item-input{
    text-align: center;
}


#cstationbox #cstation .scroll table.itemlist td.health {
    width: 100px;
    overflow: hidden;
}

#cstationbox #cstation .scroll table.itemlist td .healthbar {
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
    right: 2px;
    height: 7px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--box-background);

}

#cstationbox #cstation .scroll table.itemlist td .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_health_bar_color);
}

#cstationbox #cstation .scroll table.itemlist td .healthbar .txt {
    display: none;
}

#cstationbox #cstation .scroll table.itemlist th.thimage{
    width: 60px;
}

#cstationbox #cstation .scroll table.itemlist th.thnamelink{
    width: 200px;
}

#cstationbox #cstation .scroll table.itemlist th.thttd{
    width: 130px;
    text-align: right;
}
#cstationbox #cstation .scroll table.itemlist th.thprice{
    width: 130px;
    text-align: right;
}
#cstationbox #cstation .scroll table.itemlist th.thmin_tes{
    width: 130px;
    text-align: center;
}
#cstationbox #cstation .scroll table.itemlist th.thsite{
    width: 100px;

    text-align: left;
}

#cstationbox #cstation .scroll table.itemlist th.threason{
    width: 145px;
    padding-right: 10px;
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist th.thactions{
    width: 95px;
}


#cstationbox #cstation .scroll table.itemlist tr.own td{
    background-color: rgba(255,255,255,.2);
}



#cstationbox #cstation .scroll table.itemlist td.info{
    text-align: center;
    padding: 20px 5px 0px;
    border: none;
    color: rgba(200,200,200,1);
}


#cstationbox #cstation .scroll table.itemlist th.headline {
    font-size: 15px;
    padding: 20px 5px 5px 30px;
    font-style: italic;
}
#cstationbox #cstation .scroll table.itemlist td.ps {
    color: white;
}
#cstationbox #cstation .scroll table.itemlist th.qty{
    text-align: right;
}
#cstationbox #cstation .scroll table.itemlist td.qty{
    text-align: right;
    color: white;
    font-size: 18px;
}
#cstationbox #cstation .scroll table.itemlist td.ttd{
    text-align: right;
    color: white;
    text-transform: none;
}
#cstationbox #cstation .scroll table.itemlist td.bpn{
    text-align: left;
}
#cstationbox #cstation .scroll table.itemlist td.price{
    text-align: right;
    color: rgb(151,237,255);
}
#cstationbox #cstation .scroll table.itemlist td.bpreason{
    padding-right: 10px;
    text-align: right;

}

#cstationbox #cstation .scroll table.itemlist tr.unmanufacturable td.bpreason{
    white-space: nowrap;
    color: var(--hud_invalid_color);
}

#cstationbox #cstation .scroll table.itemlist td.bpsite{
    text-align: left;
}

#cstationbox #cstation .scroll table.itemlist td.bpsite .locsubinfo {
    color: black;
    background-color: white;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background-color: black;
    padding: 0px 8px 0px 8px;
    clip-path: var(--clip_personel_occupation);
    white-space: nowrap;
    display: inline-block;
    font-size: 10px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
}

#cstationbox #cstation .scroll table.itemlist th.mine{
    text-align:center;
    white-space: nowrap;
}
#cstationbox #cstation .scroll table.itemlist td.mine{
    text-align:center;
    white-space: nowrap;

}
#cstationbox #cstation .scroll table.itemlist td.min_tes {
    text-align: center;
    white-space: nowrap;

}
#cstationbox #cstation .scroll table.itemlist td .engeneering{
    display: inline-block;
    height: 18px;
    left: calc(50% - 15px);
    width: unset;
    padding:0px 5px;
    min-width: 30px;
    clip-path: var(--clip_e);
    font-size: 12px;
    color: white;
    text-align: center;
    background-color: var(--color-e);
    color: silver;
    line-height: 18px;
    font-family: var(--fontFaimly_button);
}





#cstationbox #cstation .scroll table.itemlist td.fee{
    text-align: right;
}

#cstationbox #cstation .scroll table.itemlist td.pricenormal{
    text-align:right;
    color:rgb(151,237,255);
}
#cstationbox #cstation .scroll table.itemlist td.pricemu{
    text-align:right;
    color:rgb(100,100,100);
}
#cstationbox #cstation .scroll table.itemlist td.actions{
    text-align:right;
    padding: 4px 5px;
    vertical-align: middle;
    width: 95px;
}
#cstationbox #cstation .scroll table.itemlist td.actions .thint{
    right: unset;
    bottom: unset;
    top: 0px;
    left: -60px;
}
#cstationbox #cstation .scroll table.itemlist td.infoline{
    text-align: center;
    padding: 20px 0px ;
    text-transform: uppercase;
    font-size: 25px;
    color: rgba(255,255,255,0.5);
    font-family: var(--fontFaimly_header);
    border: none;
}
#cstationbox #cstation .scroll table.itemlist td .percentyl{
    position:relative;
    height:20px;
    width:200px;
    margin:1px 0px 1px 1px;
    background-color: rgba(255,255,255,0.2);
    text-align: center;
    line-height: 20px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}
#cstationbox #cstation .scroll table.itemlist td .percentyl .bar{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:0%;
    background-color:var(--color-e);
    text-align:left;
}
#cstationbox #cstation .scroll table.itemlist td .percentyl .bar span{
    display:block;
    position:absolute;
    top:0px;
    left:10px;
    bottom:0px;
    width:200px;
    line-height:20px;
    text-align:left;
    color: white;
}
#cstationbox #cstation .scroll table.itemlist td .percentyl .bar:before{
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:rgba(0,255,255,0.3);
    filter:blur(2px);
}

#cstationbox #cstation .scroll table.itemlist td .manuf_report{
    text-transform: none;
    line-height: 14px;
    padding: 6px 0px;
}

#cstationbox #cstation .scroll table.astonautlisttable {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    grid-column: 1 / -1;
}

#cstationbox #cstation .scroll table.astonautlisttable th {
    color: black;
    padding: 0px 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    text-align: left;
    text-transform: uppercase;
    vertical-align: top;
    line-height: 20px;
    background: white;
}

#cstationbox #cstation .scroll table.astonautlisttable tr td {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    line-height: 15px;
    padding: 2px 5px;

    position: relative;
    box-sizing: border-box;
}



#cstationbox #cstation .scroll table.astonautlisttable tr td.selector{

    width: 40px;

}


#cstationbox #cstation .scroll table.astonautlisttable tr td.aimg{
    height: 35px;
    width: 55px;
    padding: 0px;
    position: relative;
}

#cstationbox #cstation .scroll table.astonautlisttable tr td.aimg img{
    height: 35px;
    width: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
    filter: brightness(105%) grayscale(100%);
}

#cstationbox #cstation .scroll table.astonautlisttable tr td.aname {
    width: 180px;
}



#cstationbox #cstation .scroll table.astonautlisttable tr td.aname span{
    position:relative;
    display: block;
    font-family: var(--fontFaimly_button);
    height: 14px;
    line-height: 14px;
    background-color: white;
    color: black;
    padding: 2px 6px;
    cursor: pointer;
}

#cstationbox #cstation .scroll table.astonautlisttable tr td.aname.forhire span:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    filter: invert(1);
    background-image: url(ico/sale_256.png);
    background-size: 15px;
    background-position: 3px 1px;
    background-repeat: no-repeat;
    width: 22px;
}

#cstationbox #cstation .scroll table.astonautlisttable tr td.aname span:hover {

    animation: blink 100ms linear 2;
}

#cstationbox #cstation .scroll table.astonautlisttable .abuy {
    width: 63px;
}

#cstationbox #cstation .scroll table.astonautlisttable .aprof {
    text-align: right;
}

#cstationbox #cstation .scroll table.astonautlisttable .aprof2 {
    text-align: right;
}

#cstationbox #cstation .scroll table.astonautlisttable .ates {
    text-align: left;
    white-space: nowrap;
}



#cstationbox #cstation .scroll .astonautlist {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    min-height: 0;
    max-height: 100%;
    padding-right: 10px;
}
#cstationbox #cstation .scroll .astonautlist .no-astronauts {
    grid-column: 1 / -1;
}

#cstationbox #cstation .scroll .astonautlist .astronaut{
    height: 250px;
    text-align: center;
    position: relative;
}

#cstationbox #cstation .scroll .astonautlist .astronaut:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: silver;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 5px;
    clip-path: var(--clip_astronaut);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}



#cstationbox #cstation .scroll .astonautlist .astronaut:before{
    background-color: #276f897d;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.forhire:before{
    /*
    background-color: #276f897d;
    background-image: url(ico/sale_256_50perc.png);
    background-size: 64px;
    background-position: 136px 48px;*/
}

#cstationbox #cstation .scroll .astonautlist .astronaut.zombie:before{
    background-color: #ff462242;
}


#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable:before{
    background-color: rgb(50,50,50);
}

#cstationbox #cstation .scroll .astonautlist .astrcheckbox{
    position: absolute;
    top: 12px;
    right: 12px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox input[type="checkbox"],
#cstationbox #cstation .scroll .astonautlist .astrcheckbox input[type="checkbox"]{
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
    border-radius: 2px;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox input[type="checkbox"]:checked,
#cstationbox #cstation .scroll .astonautlist .astrcheckbox input[type="checkbox"]:checked {
    background: transparent url(ico/close-window-16.png) center no-repeat;
    background-size: 10px;
    filter: drop-shadow(0px 0px 12px #b9dbff);
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox input[type="checkbox"]:before,
#cstationbox #cstation .scroll .astonautlist .astrcheckbox input[type="checkbox"]:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: block;
    background-color: transparent;
}

#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox input[type="checkbox"]:not(:checked):hover:before,
#cstationbox #cstation .scroll .astonautlist .astrcheckbox input[type="checkbox"]:not(:checked):hover:before {
    box-shadow: 0px 0px 8px #7386cb inset;
    animation: blink 100ms linear 2 alternate;
}


#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.item-select .itemcheckbox input[type="checkbox"]:after,
#cstationbox #cstation .scroll .astonautlist .astrcheckbox input[type="checkbox"]:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px),  calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px,  bottom 1px center;
}


#cstationbox #cstation .scroll .astonautlist .astronaut.zombie .actions .button{
    animation: highlited 1000ms linear infinite;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.zombie .actions .button .thint{
    animation: none;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.dead{

}


#cstationbox #cstation .scroll .astonautlist .astronaut:hover .img .face{
    filter: brightness(1.2) grayscale(0.7) contrast(1.5);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .white-box{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .white-box{
    color: white;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .white-box:before{
    display: none;
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: black;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .img{
    padding: 0px;
    bottom: 0px;
    position: absolute;

    top: 0px;
    left: 0px;
    right: 0px;
    box-shadow: 0px 0px 50px 6px #3a3e57 inset;
    clip-path: var(--clip_astronaut);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .img:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(41 44 57) 50%, rgba(0, 0, 0, 0) 90%);
}
#cstationbox #cstation .scroll .astonautlist .astronaut.zombie .white-box .img:after{
    background-image: linear-gradient(0deg, #4f1f15 36%, rgba(0,0,0,0) 90%);
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .white-box .img:after{
    background-image: linear-gradient(0deg, rgb(25 25 28) 50%, rgba(0, 0, 0, 0) 90%);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .img .face{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 160px;
    box-sizing: border-box;
    background-position: center -20px;
    background-repeat: no-repeat;
    filter: brightness(0.9) grayscale(0.7) contrast(1.2);
    /* transition: filter 0.05s;*/
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable:not(.zombie) .white-box .img .face{

    filter: brightness(0.6) grayscale(1) contrast(0.7);

}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .aid {
    position: absolute;
    right: 15px;
    bottom: 0px;
    width: 50px;
    font-size: 10px;
    color: rgba(60,60,60,1);
    text-align: center;
    cursor: pointer;
    display: none;
}
#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .maininfo{
    position: absolute;
    top: 148px;
    left: 3px;
    right: 3px;
    text-align: center;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .maininfo .name{
    font-family: var(--fontFaimly_button);
    height: 14px;
    line-height: 14px;
    background-color: white;
    color: black;
    padding: 2px 6px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}


#cstationbox #cstation .scroll .astonautlist .astronaut.forhire  .white-box .maininfo .name{
    padding: 2px 6px 2px 22px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.forhire  .white-box .maininfo .name:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    filter: invert(1);
    background-image: url(ico/sale_256.png);
    background-size: 15px;
    background-position: 3px 1px;
    background-repeat: no-repeat;
    width: 22px;

}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .maininfo .name:hover{
    animation: blink 100ms linear 2 alternate;
}
#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .maininfo .race{
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 0px 0px 0px;
    height: 11px;

    color: rgba(150,150,150,1);
}
#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .maininfo .prof{
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 0px 0px 0px;
    height: 11px;

    color: rgba(150,150,150,1);
}
#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .health {
    display: block;
    position: absolute;
    top: 100px;
    height: 7px;
    left: 50%;
    width: 123px;

    transform: translateX(-50%);
    box-sizing: border-box;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
}
#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .health .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_healthcanheal_bar_color);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .health.hidden {
    display: none;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .health .txt {
    position: absolute;
    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    color: white;
    white-space: nowrap;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .white-box .skills{
    position: absolute;
    right: 0px;
    top: 118px;
    left: 0px;
    text-align: center;
}
#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .white-box .skills{
    filter: grayscale(1);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .price{
    left: 10px;
    position: absolute;
    top: 223px;
    right: 10px;
    color: white;
}
#cstationbox #cstation .scroll .astonautlist .astronaut .actions{
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 30px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button  {
    width: 80%;
    padding: 0px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .actions .button  {

}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .actions .button:hover  {
    /*background-color: #430d0da3;*/
}

#cstationbox #cstation .scroll .astonautlist .astronaut.unavailable .actions .button:hover:before  {
    display: none;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button:hover  {
    color: transparent;
}




#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button:before  {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    background-color: transparent;


}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button .onhover  {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    color: white;

    clip-path: var(--clip_button_astronaut);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button.gray .onhover  {
    color: gray;
}



#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button:hover .onhover  {
    display: block;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button:hover .format-exc   {
    display: none;
}


#cstationbox #cstation .scroll .astonautlist .astronaut:hover .actions .button .onhover:hover  {

    background-color: white;
    color: black;
}


#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button .thint  {
    animation: highlited 1000ms linear infinite;
    left: calc(50% - 30px);
    text-align: center;
    bottom: -30px;
    top: unset;
    right: unset;
    width: 60px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .actions .button .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-top: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    bottom: unset;
    top: -10px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions{
    position: absolute;
    top: 9px;
    left: 9px;
    right: 5px;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fast-actions-parent{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 30px;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));

}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact {
    position: relative;
    /* width: 30px; */
    height: 30px;

    cursor: pointer;
    z-index: 10;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: block;
    background-color: transparent;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(1);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact:hover:before {

}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact.gray {
    filter: brightness(0.7);
}







#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .hospitalise:before {
    background-image: url(ico/hospitalise_32.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);

}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .unhospitalise:before {
    background-image: url(ico/unhospitalise_32.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .quarantine:before {
    background-image: url(ico/quarantine_32.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .unquarantine:before {
    background-image: url(ico/unquarantine_32.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);
}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .recall:before {
    background-image: url(ico/astronaut_unstation_64.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .colonist:before {
    background-image: url(ico/astronaut_colonist_64.png);
}
#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .setclass:before {
    background-image: url(ico/select_prof_24_b.png);
    filter: invert(1) drop-shadow(0px 0px 7px gold);
}


#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact .thint {
    animation: highlited 1000ms linear infinite;
    left: 4px;

    text-align: center;
    bottom: -38px;
    top: unset;
    right: unset;

}

#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-top: none;
    position: absolute;
    left: 0px;
    right: unset;
    bottom: unset;
    top: -10px;
}



#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact:not(.gray):hover:before {
    box-shadow: 0px 0px 8px #8c7934 inset;
    animation: blink 100ms linear 2 alternate;
}



#cstationbox #cstation .scroll .astonautlist .astronaut .fast-actions .fact:hover .thint {

}



#cstationbox #cstation .scroll .infoline{
    text-align: center;
    padding: 80px 0px;
    /* text-transform: uppercase; */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    border: none;
}


#cstationbox #cstation .scroll .pacientlist{
    display: grid;
    box-sizing: border-box;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, 165px);
}
#cstationbox #cstation .scroll .pacientlist .bed{
    display: block;
    position: relative;
    width: 165px;
    height: 325px;
    margin: 0px;



}
#cstationbox #cstation .scroll .pacientlist .bed.full:before {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(113 68 0 / 0%) 5%, rgba(41, 44, 57, 0.4) 20%, rgba(41, 44, 57, 0.95) 35%, rgba(41, 44, 57, 1) 60%,rgba(41, 44, 57, 0.6) 70%, rgba(0, 0, 0, 0) 80%),
        url(bed-full.png);
    background-size: cover,125px;
    clip-path: var(--clip_astronaut);
    background-position: center;
    background-repeat: no-repeat;
}

#cstationbox #cstation .scroll .pacientlist .bed.empty:before {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgba(41,44,57,0) 0%, rgba(41,44,57,0.8) 40%, rgba(41,44,57,0.8) 60%, rgba(0, 0, 0, 0) 90%),
        url(bed-empty.png);
    background-size: cover,125px;
    clip-path: var(--clip_astronaut);
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

#cstationbox #cstation .scroll .pacientlist .bed .img{
    padding: 0px;
    height: 140px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    clip-path: var(--clip_astronaut);
}

#cstationbox #cstation .scroll .pacientlist .bed .img:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(41, 44, 57) 0%,  rgba(0, 0, 0, 0) 80%);

}

#cstationbox #cstation .scroll .pacientlist .bed .img .face{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 160px;
    box-sizing: border-box;
    background-position: center -20px;
    background-repeat: no-repeat;
    filter: brightness(0.9) grayscale(0.7) contrast(1.2);

}


#cstationbox #cstation .scroll .pacientlist .bed .maininfo{
    position: absolute;
    top: 148px;
    left: 3px;
    right: 3px;
    text-align: center;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}
#cstationbox #cstation .scroll .pacientlist .bed .maininfo .name {
    font-family: var(--fontFaimly_button);
    height: 14px;
    line-height: 14px;
    background-color: white;
    color: black;
    padding: 2px 6px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

#cstationbox #cstation .scroll .pacientlist .bed .maininfo .name:hover {
    animation: blink 100ms linear 2 alternate;
}

#cstationbox #cstation .scroll .pacientlist .bed .maininfo .race {
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 0px 0px 0px;
    height: 14px;
    overflow: hidden;
    color: rgba(150,150,150,1);
}

#cstationbox #cstation .scroll .pacientlist .bed .maininfo .prof {
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 0px 0px 0px;
    height: 14px;
    overflow: hidden;
    color: rgba(150,150,150,1);
}

#cstationbox #cstation .scroll .pacientlist .bed .health {
    display: block;
    position: absolute;
    top: 100px;
    height: 7px;
    left: 20px;
    right: 20px;
    box-sizing: border-box;

    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
}
#cstationbox #cstation .scroll .pacientlist .bed .health .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_healthcanheal_bar_color);
}

#cstationbox #cstation .scroll .pacientlist .bed .health .bar {

    background-color: var(--hud_invalid_color);
}

#cstationbox #cstation .scroll .pacientlist .bed .health .bar.healing {
    animation: highlited 1000ms linear infinite;
    background-color: var(--color-s);
}



#cstationbox #cstation .scroll .pacientlist .bed .skills{
    position: absolute;
    right: 0px;
    top: 118px;
    left: 0px;
    text-align: center;
}
#cstationbox #cstation .scroll .pacientlist .bed .skills div{
    width: 38px;
    margin: 0px 1px;
}

#cstationbox #cstation .scroll .pacientlist .bed .skills div.engineer {
    margin-left: 2px;
}

#cstationbox #cstation .scroll .pacientlist .bed .actions{
    position: absolute;
    bottom: 10px;
    text-align: center;
    left: 10px;
    right: 10px;
    text-align: center;
}
#cstationbox #cstation .scroll .pacientlist .bed .actions button{
    height: 33px;
    line-height: 33px;
    margin: 3px 0px;
    width: 124px;
}
#cstationbox #cstation .scroll .pacientlist .bed .actions button.gray{
    border: 1px solid gray
}



#cstationbox .colonists-population {
    position: absolute;
    top: 70px;
    right: 10px;
    height: 110px;
    width: calc(100% - 40% - 20px);
    z-index: 100;
}

#cstationbox.temple .colonists-population {
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(33.33% - 10px);
    right: unset;
}

#cstationbox .colonists-population .popchart-div {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    text-align: center;
}

#cstationbox .colonists-population .popchart-div canvas {
    position: absolute;
    top: 0px;
    right: 0px;

}

#cstationbox .colonists-population .popchart-div .trainstrnt {
    position: absolute;
    bottom: 7px;
    left: 13px;
    width: 180px;
    padding: 0px 0px;
    font-size: 12px;

}


#cstationbox .colonists-population .popchart-div .trainstrnt .thint {
    top: 50%;
    right: calc(100% + 5px);
    transform: translateY(-50%);
}




#cstationbox .colonists-population .popchart-div .pchbefore {
    display: block;
    position: absolute;
    top: 12px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    padding-left: 18px;
    color: white;
    white-space: nowrap;
}

#cstationbox .colonists-population .bckg {
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_csbox_st_quarters);
    z-index: -1;
    transform: scaleX(-1);
}

#cstationbox .colonists-population .bckg .bckg-lay1{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image:  url(astr_bckg_w_f_256x256.png);
    background-position:  right -20px top -31px;
    background-size: 200px;
    background-repeat: no-repeat;
    transition: background-position 0.8s;
}

#cstationbox .colonists-population .bckg .bckg-lay2{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image:  url(astr_bckg_m_256x256.png);
    background-position:  right -60px top -31px;
    background-size: 200px;
    background-repeat: no-repeat;
    filter: drop-shadow(-18px 0px 6px rgba(0, 0, 0, 0.5));
    transition: background-position 0.85s;
}

#cstationbox .colonists-population .bckg .bckg-lay3{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--upperbox_background_color) 12%, rgba(0, 0, 0, 0) 500%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

#cstationbox .colonists-population .bckg .bckg-lay1 {
    background-position:  right 75px top -31px;
}

#cstationbox .colonists-population .bckg .bckg-lay2 {
    background-position:  right 0px top -31px;
}



#cstationbox .stationq-capacity {
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(20% - 10px);

    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox .stationq-capacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_quarters);
}
#cstationbox .stationq-capacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .stationq-capacity .capacity-bar .capacity-barbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    top: 69px;
}
#cstationbox .stationq-capacity .capacity-bar .capacity-barbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}
#cstationbox .stationq-capacity .capacity-bar .capacity-barbox #stationq_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .stationq-capacity .capacity-bar .capacity-barbox #stationq_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}

#cstationbox .stationq-capacity.negative:before{

}

#cstationbox .stationq-capacity.negative .capacity-bar .capacity-barbox .bar{
    background-color: var(--hud_invalid_color);
}

#cstationbox .stationq-capacity.negative .capacity-bar .capacity-barbox #stationq_capacity_txt {
    color: var(--hud_invalid_text);
}

#cstationbox .stationq-capacity.negative .capacity-bar .capacity-barbox #stationq_capacity_maintxt{
    color: var(--hud_invalid_text);
}

#cstationbox .stationq-capacity .capacity-bar .capacity-barbox .cbefore {
    display: block;
    position: absolute;
    top: -55px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}

#cstationbox .shipq-capacity {
    position: absolute;
    top: 70px;
    left: calc(20% + 10px);
    height: 110px;
    width: calc(20% - 10px);



    animation: text-shadowing-white-small 500ms ease-out forwards;
}



#cstationbox .shipq-capacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_sp_quarters);
}

#cstationbox .shipq-capacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .shipq-capacity .capacity-bar .capacity-barbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    top: 69px;
}
#cstationbox .shipq-capacity .capacity-bar .capacity-barbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}
#cstationbox .shipq-capacity .capacity-bar .capacity-barbox #shipq_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .shipq-capacity .capacity-bar .capacity-barbox #shipq_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .shipq-capacity .capacity-bar .capacity-barbox .cbefore {
    display: block;
    position: absolute;
    top: -55px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}

#cstationbox .shipq-capacity .capacity-bar .capacity-barbox #shipq_capacity_txt .dark,
#cstationbox .stationq-capacity .capacity-bar .capacity-barbox #stationq_capacity_txt .dark {
    color: var(--border-effect-color);

}


#cstationConstructionBox .facility-personel,
#cstationRefineBox .facility-personel {
    position: absolute;
    top: 320px;
    left: 30px;
    right: 30px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    height: 146px;
    overflow: hidden;
    width: auto;
}

#cstationConstructionBox .facility-personel:before,
#cstationRefineBox .facility-personel:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: white;
    clip-path: var(--clip_underline);
}

#cstationbox.vxclinic{
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 100%),url(bckgr_vxclinic.jpg);
    background-size: cover,cover;
    background-position: top;
}

#cstationbox.hospital{
    /*background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 100%),url(window_bckg_hospital.jpg);*/
    background-size: cover,cover;
    background-position: top;
}

#cstationbox #cstation .description{
    color: white;
    position: absolute;
    top: 45px;
    left: 10px;
    text-align: left;
    right: 500px;
}
#cstationbox #cstation .description h2{
    color: white;
    /* line-height: 30px; */
    text-transform: uppercase;
    font-size: 14px;


    padding: 0px;
    margin: 0px;
    text-shadow: var(--shadow_textfull);
}
#cstationbox #cstation .description p{
    color: gray;
    font-size: 10px;
    line-height: 14px;
    padding: 4px 0px 0px;
    margin: 0px;
    text-shadow: var(--shadow_textfull);
    text-transform: uppercase;
}


#cstationbox #cstation .description .wikilink {
    background-color: white;
    color: black;
    padding: 0px 5px;
    cursor: pointer;
    text-shadow: none;

}

#cstationbox #cstation .description .wikilink.external {
    padding: 0px 16px 0px 5px;
    background-image: url(ico/external-link-2-16.png);
    background-size: 9px;
    background-position: right 2px top 2px;
    background-repeat: no-repeat;
}

#cstationbox #cstation .description .wikilink:hover {
    animation: blink 100ms linear 2;

}



#cstationbox.factorywindow #cstation .description {
    left: 260px;
}


#cstationbox #cstation .scroll .infectedlist{
    text-align: center;
}
#cstationbox #cstation .scroll .infectedlist .bed{
    display: inline-block;
    position: relative;
    width: 165px;
    height: 325px;
    margin: 30px 10px;
    background-color: rgba(0,0,0,0.55);
}
#cstationbox #cstation .scroll .infectedlist .bed:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .infectedlist .bed:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .infectedlist .bed .img{
    padding: 0px;
    width: 90px;
    height: 90px;
    position:absolute;
    top: 10px;
    left: calc(50% - 45px)
}
#cstationbox #cstation .scroll .infectedlist .bed .img:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 1;
}
#cstationbox #cstation .scroll .infectedlist .bed .img:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .infectedlist .bed .img .face{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 112%, contain, 150%, contain;
    box-sizing: border-box;
    filter: brightness(200%) grayscale(100%);
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(41,92,100);
}
#cstationbox #cstation .scroll .infectedlist .astronaut .img .aid {
    position: absolute;
    display: block;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: rgba(255,255,255,.5);
    text-align: center;
    cursor: pointer;
}
#cstationbox #cstation .scroll .infectedlist .bed .img:hover .face{
    filter: brightness(260%) grayscale(100%);
    animation: blink 100ms linear 2;
}
#cstationbox #cstation .scroll .infectedlist .bed .maininfo{
    left:10px;
    right: 10px;
    position: absolute;
    top: 110px;
}
#cstationbox #cstation .scroll .infectedlist .bed .maininfo .name {
    position: relative;
    font-family: var(--fontFaimly_header);
    font-size: 20px;
    color: rgb(255,255,255);
    line-height: 15px;
    padding: 5px 10px;
}
#cstationbox #cstation .scroll .infectedlist .bed .maininfo .race {
    display: inline-block;
    position: relative;
    color: rgb(255,255,255);
    font-size: 9px;
    text-transform: uppercase;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    height: 12px;
    line-height: 12px;
}
#cstationbox #cstation .scroll .infectedlist .bed.zombie .maininfo .race {
    background-color: rgba(255,0,0);
    color: black;
    padding: 0px 10px;
}
#cstationbox #cstation .scroll .infectedlist .bed .health {
    position: absolute;
    top: 99px;
    height: 8px;
    left: calc(50% - 45px);
    width: 90px;
    background-color: black;
    border: 1px solid white;
    box-sizing: border-box;
    overflow: hidden;
}
#cstationbox #cstation .scroll .infectedlist .bed .health .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}
#cstationbox #cstation .scroll .infectedlist .bed .prof {
    position: absolute;
    top: 153px;
    left: 10px;
    right: 10px;
    color: rgb(255,255,255);
    font-size: 12px;
    text-transform: uppercase;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    height: 16px;
    line-height: 16px;
}
#cstationbox #cstation .scroll .infectedlist .bed .skills{
    position: absolute;
    top: 195px;
    width: 150px;
}
#cstationbox #cstation .scroll .infectedlist .bed .skills .tactical,
#cstationbox #cstation .scroll .infectedlist .bed .skills .engineer,
#cstationbox #cstation .scroll .infectedlist .bed .skills .science{
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}
#cstationbox #cstation .scroll .infectedlist .bed .skills{
    position: absolute;
    top: 190px;
    width: 150px;
}
#cstationbox #cstation .scroll .infectedlist .bed .lvlexp {
    position: absolute;
    top: 175px;
    text-align: center;
    color: white;
    font-size: 10px;
    left: 10px;
    right: 10px;
}
#cstationbox #cstation .scroll .infectedlist .bed .actions{
    position: absolute;
    bottom: 10px;
    text-align: center;
    left: 10px;
    right: 10px;
    text-align: center;
}
#cstationbox #cstation .scroll .infectedlist .bed .actions button{
    height: 33px;
    line-height: 33px;
    margin: 3px 0px;
    width: 124px;
}
#cstationbox #cstation .scroll .infectedlist .bed .actions button.gray{
    border: 1px solid gray
}

#cstationbox #cstation .scroll .infectedlist .bed.empty{
    background-image: url(bed-empty_vx.png);
    background-size: 195px;
    background-position: center;
    background-repeat: no-repeat;
}
#cstationbox #cstation .scroll .infectedlist .bed.full{
    background-size: 195px;
    background-position: center;
    background-repeat: no-repeat;
}


#cstationbox #cstation .scroll .student-list{
    text-align: left;
}
#cstationbox #cstation .scroll .student-list .astronaut{
    display: inline-block;
    position: relative;
    width: 280px;
    height: 123px;
    margin: 15px 10px;
    background-color: rgba(0,0,0,0.55);
}
#cstationbox #cstation .scroll .student-list .astronaut:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .student-list .astronaut:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .student-list .astronaut .img{
    padding: 0px;
    width: 90px;
    height: 90px;
    position:absolute;
    top: 10px;
    left: 10px
}
#cstationbox #cstation .scroll .student-list .astronaut .img:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 1;
}
#cstationbox #cstation .scroll .student-list .astronaut .img:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#cstationbox #cstation .scroll .student-list .astronaut .img .face{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 160%;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    cursor: pointer;
}
#cstationbox #cstation .scroll .student-list .astronaut .img .aid {
    position: absolute;
    display: block;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: rgba(255,255,255,.5);
    text-align: center;
    cursor: pointer;
}
#cstationbox #cstation .scroll .student-list .astronaut .img:hover .face{
    animation: blink 100ms linear 2;
}
#cstationbox #cstation .scroll .student-list .astronaut .maininfo{
    width: 150px;
    position: absolute;
    top: 5px;
    left: 110px;
    right: 10px;
    text-align: left
}
#cstationbox #cstation .scroll .student-list .astronaut .maininfo .name {
    position: relative;

    font-family: var(--fontFaimly_header);
    font-size: 20px;
    color: rgb(255,255,255);
    line-height: 15px;
    padding: 4px 0px;
    height: 27px;
    overflow: hidden;
}
#cstationbox #cstation .scroll .student-list .astronaut .maininfo .race {
    position: relative;
    color: rgb(255,255,255);
    font-size: 9px;
    text-transform: uppercase;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    height: 12px;
    line-height: 12px;
}
#cstationbox #cstation .scroll .student-list .astronaut.zombie .maininfo .race {
    position: absolute;
    top: 51px;
    text-align: left;
    color: white;
    font-size: 10px;
    left: 110px;
    right: 10px;
}
#cstationbox #cstation .scroll .student-list .astronaut .health {
    position: absolute;
    top: 105px;
    height: 8px;
    left: 10px;
    width: 90px;
    background-color: black;
    border: 1px solid white;
    box-sizing: border-box;
    overflow: hidden;
}
#cstationbox #cstation .scroll .student-list .astronaut .health .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}
#cstationbox #cstation .scroll .student-list .astronaut .prof {
    position: absolute;
    top: 153px;
    left: 10px;
    right: 10px;
    color: rgb(255,255,255);
    font-size: 12px;
    text-transform: uppercase;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    height: 16px;
    line-height: 16px;
}
#cstationbox #cstation .scroll .student-list .astronaut .skills{
    position: absolute;
    top: 195px;
    width: 150px;
}
#cstationbox #cstation .scroll .student-list .astronaut .skills .tactical,
#cstationbox #cstation .scroll .student-list .astronaut .skills .engineer,
#cstationbox #cstation .scroll .student-list .astronaut .skills .science{
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}
#cstationbox #cstation .scroll .student-list .astronaut .skills{
    position: absolute;
    top: 190px;
    width: 150px;
}
#cstationbox #cstation .scroll .student-list .astronaut .lvlexp {
    position: absolute;
    top: 51px;
    text-align: left;
    color: white;
    font-size: 10px;
    left: 110px;
    right: 10px;
}

#cstationbox #cstation .scroll .student-list .astronaut .actions{
    position: absolute;
    top: 80px;
    left: 110px;
    right: 0px;
    text-align: left;
}
#cstationbox #cstation .scroll .student-list .astronaut .actions button{
    height: 33px;
    line-height: 33px;
    width: 124px;
}
#cstationbox #cstation .scroll .student-list .astronaut .actions button .thint{
    animation: highlited 1000ms linear infinite;
    left: 33px;
    text-align: center;
    bottom: 42px;
    top: unset;
    right: unset;
}

#cstationbox #cstation .scroll .student-list .astronaut .actions button .thint:before {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}



#cstationbox #cstation .scroll .student-list .astronaut .actions button.gray{
    border: 1px solid gray
}


#cstationbox #cstation .scroll .whcontroller{
    position: absolute;
    top: 10px;
    text-align: center;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    color: white;
    overflow: hidden;
}

#cstationbox #cstation .scroll .whcontroller .bckgr{
    position: absolute;
    top: 0px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

#cstationbox #cstation .scroll .whcontroller {
    position: relative;
}
#cstationbox #cstation .scroll .whcontroller .button{
    margin-bottom: 40px;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers{
    position: relative;
    margin-top: 40px;
}


#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller{
    display: inline-block;
    position: relative;
    width: 210px;
    height: 255px;
    background-color: #787878;

    clip-path: var(--clip_controller);
    margin: 6px;

}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller:before{
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-color: black;

    clip-path: var(--clip_controller);
    z-index: -1;
}


#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller.charged{
    filter: invert(1);
}



#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .clabel{
    position: absolute;
    top: 17px;
    left: 5px;
    right: 5px;
    font-size: 13px;
    text-align: center;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .cwhtrans_kg{
    position: absolute;
    top: 47px;
    left: 5px;
    right: 5px;
    font-size: 17px;
    text-align: center;
}


#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .cenergy{
    position: absolute;
    top: 115px;
    left: 15px;
    right: 15px;
    font-size: 12px;
    text-align: right;
}
#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .cenergybar{
    position: absolute;
    top: 100px;
    left: 15px;
    right: 15px;
    height: 7px;
    box-sizing: border-box;
    background-color: var(--hud_energy_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .cenergybar .bf {
    display: block;

    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_energy_text_color);
    white-space: nowrap;
}
#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .cenergybar .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background: var(--hud_energy_bar_color);
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charged{
    position: absolute;
    bottom: 25px;
    left: calc(50% - 45px);
    width: 90px;
    height: 30px;
    line-height: 30px;
    display: block;
    text-align: center;
    color: gray;
    font-size: 12px;
    cursor: pointer;
    padding: 0px 10px;
    margin: 0px;
    box-sizing: border-box;
    background-color: transparent;
    z-index: 1;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .chtitle{
    position: absolute;
    bottom: 16px;
    left: 10px;
    right: 10px;
    display: block;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charge{
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    display: block;
    padding: 0px 10px;
    margin: 0px;
    z-index: 1;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charge:not(.unactive){
    cursor: pointer;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .discharge{
    position: absolute;
    bottom: 25px;
    color: rgb(50,50,50);
    padding: 0px 6px;
    margin: 0px;
    font-size: 10px;
    text-decoration: underline;
    white-space: nowrap;
    width: 74px;
    left: calc(50% - 37px);
    text-shadow: none;
    z-index: 1;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .discharge:not(.unactive){
    cursor: pointer;
    color: white;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .discharge:not(.unactive):hover {
    animation: blink 100ms linear 2;
}

#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charge:not(.unactive):hover{

}


#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charge.unactive{

}


#cstationbox #cstation .scroll .whcontroller .ncontrollers .controller .charge.unactive:before{

}






#cstationbox #cstation .scroll .nuclearsilo{
    position: absolute;
    top: 10px;
    text-align: center;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    color: white;
    overflow: hidden;
}

#cstationbox #cstation .scroll .nuclearsilo .actions {
    position: absolute;
    bottom: 40px;
    right: 0px;
    left: 0px;

}


#cstationbox #cstation .scroll .nuclearsilo .bckgr{
    position: absolute;
    top: 0px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

#cstationbox #cstation .scroll .nuclearsilo .nitargetsinfo,
#cstationbox #cstation .scroll .nuclearsilo .nimisiilesinfo {
    position: absolute;
    top: 160px;
    width: 30%;
}

#cstationbox #cstation .scroll .nuclearsilo .ntargets {
    position: absolute;
    top: 160px;
    right: 10%;
    width: 30%;

}

#cstationbox #cstation .scroll .nuclearsilo .nitargetsinfo {
    right: 10%;
}

#cstationbox #cstation .scroll .nuclearsilo .nmissiles {
    position: absolute;
    top: 160px;
    left: 10%;
    width: 30%;
}

#cstationbox #cstation .scroll .nuclearsilo .nimisiilesinfo {
    left: 10%;
}

#cstationbox #cstation .scroll .nuclearsilo .nimisiilesinfo,
#cstationbox #cstation .scroll .nuclearsilo .nitargetsinfo,
#cstationbox #cstation .scroll .nuclearsilo .mbutton .info {
    text-transform: uppercase;
    font-size: 12px;
}

#cstationbox #cstation .scroll .nuclearsilo .nimisiilesinfo,
#cstationbox #cstation .scroll .nuclearsilo .nitargetsinfo,
#cstationbox #cstation .scroll .nuclearsilo .mbutton .info:not(.sucess) {
    animation: highlited 1000ms linear infinite;
}

#cstationbox #cstation .scroll .nuclearsilo .mbutton .info table {
    width: 100%;
}

#cstationbox #cstation .scroll .nuclearsilo .mbutton .info table th {
    text-align: right;
    padding-right: 5px;
}
#cstationbox #cstation .scroll .nuclearsilo .mbutton .info table td {
    text-align: left;
    padding-left: 5px;
}


#cstationbox #cstation .scroll .nuclearsilo .mbutton{
    position: absolute;
    top: 300px;
    text-align: center;
    left: calc(50% - 200px);
    width: 400px;
    text-align: center;
    color: white;
}

#cstationbox #cstation .scroll .nuclearsilo .mbutton .button:not(.gray){
    animation: highlited 1000ms linear infinite;
}



#cstationbox #cstation .scroll .recycling{
    position: absolute;
    top: 0px;
    text-align: center;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    color: white;
    overflow: hidden;
}
#cstationbox #cstation .scroll .recycling .recycle-config{
    position: relative;
    max-width: 890px;
    margin: 0px auto;
    height: 340px;
}
#cstationbox #cstation .scroll .recycling .recycle-config .body-icon{
    position: absolute;
    top: 10px;
    left: 0px;
    width: 150px;
    height: 150px;
    background: url(./items/100.png) center no-repeat;
    background-size: contain;
}
#cstationbox #cstation .scroll .recycling .recycle-config .body-qty{
    position: absolute;
    top: 165px;
    left: 0px;
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .body-qty .val{
    color: var(--hud_tablevaluecolor);
}


#cstationbox #cstation .scroll .recycling .recycle-config .energy-icon{
    position: absolute;
    top: 70px;
    left: 195px;
    width: 50px;
    height: 50px;
    background: url(./ico/energy_64.png) center no-repeat;
    background-size: contain;
}
#cstationbox #cstation .scroll .recycling .recycle-config .energy-qty{
    position: absolute;
    top: 135px;
    left: 175px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .energy-qty .val{
    color: var(--hud_tablevaluecolor);
}

#cstationbox #cstation .scroll .recycling .recycle-config .mass-icon{
    position: absolute;
    top: 10px;
    right: 0px;
    width: 150px;
    height: 150px;
    background: url(./items/200.png) center no-repeat;
    background-size: contain;
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-qty{
    position: absolute;
    top: 165px;
    right: 0px;
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-body{
    position: absolute;
    top: 150px;
    left: calc(50% - 350px);
    width: 700px;
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-body .eqty{
    display: block;
    position: absolute;
    top: 0px;
    left: 280px;
    right: 280px;
    height: 34px;
    line-height: 34px;
    font-size: 35px;
    font-family: var(--fontFaimly_header);
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-body .etxt{
    display: block;
    position: absolute;
    top: 45px;
    left: 0px;
    right: 0px;
    font-size: 16px;
    color: rgb(150,150,150);
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-body .etxt strong{

    color: rgb(255,255,255);

}



#cstationbox #cstation .scroll .recycling .recycle-config.negative .mass-body .eqty{
    color: white;
}
#cstationbox #cstation .scroll .recycling .recycle-config.negative .mass-body .etxt{
    color: white;
    animation:highlited 1000ms linear infinite;
}







#cstationbox #cstation .scroll .recycling .recycle-config .matter-icon{
    position: absolute;
    top: 10px;
    left: 0px;
    width: 150px;
    height: 150px;
    background: url(./items/102.png) center no-repeat;
    background-size: contain;
}
#cstationbox #cstation .scroll .recycling .recycle-config .matter-qty{
    position: absolute;
    top: 165px;
    left: 0px;
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .matter-qty .val{
    color: var(--hud_tablevaluecolor);
}


#cstationbox #cstation .scroll .recycling .recycle-config .energy-icon{
    position: absolute;
    top: 25px;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url(./ico/energy_64.png) center no-repeat;
    background-size: 37px;
}
#cstationbox #cstation .scroll .recycling .recycle-config .energy-qty{
    position: absolute;
    top: 80px;
    left: calc(50% - 100px);
    width: 200px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .energy-qty .val{
    color: var(--hud_tablevaluecolor);
}

#cstationbox #cstation .scroll .recycling .recycle-config .mass-icon{
    position: absolute;
    top: 10px;
    right: 0px;
    width: 150px;
    height: 150px;
    background: url(./items/200.png) center no-repeat;
    background-size: contain;
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-qty{
    position: absolute;
    top: 165px;
    right: 0px;
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;

}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-matter{
    position: absolute;
    top: 150px;
    left: calc(50% - 350px);
    width: 700px;
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-matter .eqty{
    display: block;
    position: absolute;
    top: 0px;
    left: 280px;
    right: 280px;
    height: 34px;
    line-height: 34px;
    font-size: 35px;
    font-family: var(--fontFaimly_header);
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-matter .etxt{
    display: block;
    position: absolute;
    top: 45px;
    left: 0px;
    right: 0px;
    font-size: 16px;
    color: rgb(150,150,150);
}
#cstationbox #cstation .scroll .recycling .recycle-config .mass-matter .etxt strong{

    color: rgb(255,255,255);

}



#cstationbox #cstation .scroll .recycling .recycle-config.negative .mass-matter .eqty{
    color: white;
}
#cstationbox #cstation .scroll .recycling .recycle-config.negative .mass-matter .etxt{
    color: white;
    animation:highlited 1000ms linear infinite;
}



















#cstationbox #cstation .scroll .recycling .recycle-config .scroller{
    position: absolute;
    top: 115px;
    left: 200px;
    right: 200px;
    height: 7px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
#cstationbox #cstation .scroll .recycling .recycle-config .scroller .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    bottom: 0px;
    background-color: white;
}

#cstationbox #cstation .scroll .recycling .recycle-config .scroller-plus,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-minus,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-all,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-none {
    position: absolute;
    top: 150px;
    z-index: 10;
    height: 27px;
    color: rgba(255,255,255,1);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 5px;
    line-height: 26px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    min-width: 30px;
    border: 1px solid white;
    margin: 0px auto;
    background-color: rgba(0,0,0,.9);
}



#cstationbox #cstation .scroll .recycling .recycle-config .scroller-plus:hover,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-minus:hover,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-all:hover,
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-none:hover {
    background-color: #ffbc00;
    color: white;
    animation: blink 100ms linear 2;
    border: 1px solid transparent;
}
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-plus {
    right: calc(50% - 105px);
}
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-minus {
    left: calc(50% - 105px);
}
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-all {
    left: calc(50% + 115px);
}
#cstationbox #cstation .scroll .recycling .recycle-config .scroller-none {
    right: calc(50% + 115px);
}



#cstationbox #cstation .scroll .recycling .recycle-config .actions{
    text-align: center;
    position: absolute;
    top: 230px;
    left: 10px;
    right: 10px;
    height: 30px;
}



#cstationbox #cstation .scroll .recycling .recycle-config button .thint{
    top: 2px;
    animation: highlited 1000ms linear infinite;
}

#cstationbox #cstation .scroll .recycling .recycle-config button .thint:before {

}


#cstationbox #cstation .scroll .recycling .recycle-config.negative .button {
    animation:none;
    background-color: gray;
    cursor: default;
}

#cstationbox.temple {
    /*background: url(./window_bckg_temple.jpg) center no-repeat; */
    /*background-size: cover; */
}

#cstationbox.bridge {
    /*background: url(./window_bckg_bridge.jpg) center no-repeat; */
    /*background-size: cover; */
}


#cstationbox #cstation .energytrans{
    top: 90px;
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;

}

#cstationbox #cstation .actualenergytrans,
#cstationbox #cstation .newenergytrans{
    top: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
}

#cstationbox #cstation .actualenergytrans .destname,
#cstationbox #cstation .newenergytrans .destname{
    top: 50px;
    position: absolute;
    left: calc(50% - 256px);
    text-align: center;
    width: 512px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
}


#cstationbox #cstation .newenergytrans .destname .label,
#cstationbox #cstation .newenergytrans .destcapacity .label,
#cstationbox #cstation .newenergytrans .manualactions .label {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 13px;
    color: #83b2ed;
}










#cstationbox #cstation .newenergytrans .destname input{
    position: absolute;
    width: calc(100% - 40px);
    left: 20px;
    top: 60px;
    padding: 0px 5px;
    box-sizing: border-box;
}

#cstationbox #cstation .actualenergytrans .destname-sel,
#cstationbox #cstation .newenergytrans .destname-sel{
    top: 10px;
    position: absolute;
    left: calc(50% - 256px);
    text-align: center;
    width: 512px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
}


#cstationbox #cstation .newenergytrans .destname-sel .label {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    color: gray;
}


#cstationbox #cstation .actualenergytrans .destname-sel:before,
#cstationbox #cstation .newenergytrans .destname-sel:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: #83b2ed;
    clip-path: var(--clip_underline_right);
}

#cstationbox #cstation .destname-results{
    width: calc(100% - 40px);
    position: absolute;
    left: 20px;
    top: 95px;
    line-height: unset;
    background-color: rgba(0,0,0,0.8);
    box-sizing: border-box;
    z-index: 1;
}


#cstationbox #cstation .destname-selected-label{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 13px;
    color: #83b2ed;
}

#cstationbox #cstation .destname-selected{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 35px;
    line-height: unset;
    box-sizing: border-box;
}

#cstationbox #cstation .destname-selected .info{
    animation: highlited 1000ms linear infinite;
    padding: 10px 0px;
    font-size: 12px;
    color: rgba(200,200,200,1);
    text-transform: uppercase;
    text-align: center;


}


#cstationbox #cstation .destname-selected .name{
    position: absolute;
    left: 17px;
    width: calc(100% - 160px);
    text-align: left;
    top: 17px;
    font-size: 17px;
    text-transform: none;
    padding: 0px;
    line-height: 12px;
}


#cstationbox #cstation .destname-selected .distance{
    position: absolute;
    left: 17px;
    width: calc(100% - 160px);
    text-align: left;
    top: 35px;
    line-height: 12px;
}

#cstationbox #cstation .destname-selected .reason{
    position: absolute;
    left: 17px;
    width: calc(100% - 160px);
    text-align: left;
    top: 52px;
    line-height: 10px;
}
#cstationbox #cstation .destname-selected .reason span{
    display: inline-block;
    line-height: 10px;
    padding: 2px 5px;
    margin: 1px;
    font-size: 10px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;

    background-color: var(--hud_invalid_background);
}

#cstationbox #cstation .destname-selected .guser{
    position: absolute;


    right: 15px;
    width: 150px;
    text-align: right;
    top: 11px;
}















#cstationbox #cstation .deststation{
    position: relative;
    height: 73px;
    text-align: left;
    padding: 5px;
    cursor: pointer;

    border-bottom: 1px solid rgba(255,255,255,0.2);

}

#cstationbox #cstation .deststation:hover{

    animation: blink 100ms linear 2 alternate;

}

#cstationbox #cstation .actualenergytrans .destcapacity,
#cstationbox #cstation .newenergytrans .destcapacity{
    top: 155px;
    position: absolute;
    left: calc(50% - 256px);
    text-align: center;
    width: 512px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
}




#cstationbox #cstation .actualenergytrans .destcapacity:before,
#cstationbox #cstation .newenergytrans .destname:before,
#cstationbox #cstation .newenergytrans .destcapacity:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: #83b2ed;
    clip-path: var(--clip_underline_right);
}



#cstationbox #cstation .newenergytrans .destcapacity .energy-value {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 250px;
    color: white;
    font-size: 18px;
    line-height: 14px;
}



#cstationbox #cstation .newenergytrans .destcapacity input{
    appearance: none;
    /* height: 10px; */
    top: 217px;
    position: absolute;
    right: calc(50% - 200px);
    text-align: center;
    width: 400px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
    background-color: #515151;
    outline: none;
}

#cstationbox #cstation .newenergytrans .destcapacity input::-webkit-slider-thumb {

    appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    cursor: pointer;

}

#cstationbox #cstation .newenergytrans .destcapacity input::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: white;
    cursor: pointer;

}


#cstationbox #cstation .newenergytrans .destcapacity .rangelabel {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 115px;
    text-align: center;
    line-height: 10px;
}

#cstationbox #cstation .newenergytrans .destcapacity .rangelabel span{
    display: inline-block;
    line-height: 13px;
    padding: 3px 7px;
    margin: 1px;
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    background-color: var(--hud_invalid_background);
    animation: blink 100ms linear 2 alternate;
}

#cstationbox #cstation .newenergytrans .destcapacity .rangelabel span.pos{
    background-color: #3df991;
    animation: highlited 1000ms linear infinite;
    filter: drop-shadow(0px 0px 10px #3df991);
}


#cstationbox #cstation .newenergytrans .destcapacity .signal{
    top: 45px;
    position: absolute;
    right: 0px;
    text-align: center;
    left: 0px;
    height: 150px;
    box-sizing: border-box;

}

#cstationbox #cstation .newenergytrans .destcapacity .signal canvas{
    filter: drop-shadow(0px 0px 4px rgba(20,100,255,0.5));
}


#cstationbox #cstation .newenergytrans .destcapacity .energy-receive{
    position: absolute;
    right: 20px;
    width: calc(50% - 40px);
    top: 355px;
    color: var(--hud_tablevaluecolor);
    font-size: 18px;
    line-height: 26px;
    text-transform: none;
    padding: 0px;
    text-align: center;
}
#cstationbox #cstation .newenergytrans .destcapacity .energy-receive.negative{
    background-color: var(--hud_invalid_background);
    color: black;

}




#cstationbox #cstation .newenergytrans .destcapacity .sublabel.reach,
#cstationbox #cstation .newenergytrans .destcapacity .sublabel.estrngth{
    position: absolute;
    width: calc(50% - 10px);
    top: 310px;
    color: gray;
    font-size: 13px;
    color: #83b2ed;
}

#cstationbox #cstation .newenergytrans .destcapacity .sublabel.reach{
    left: 0px;
}

#cstationbox #cstation .newenergytrans .destcapacity .sublabel.estrngth{
    right: 0px;
}


#cstationbox #cstation .newenergytrans .destcapacity .energy-reach{
    position: absolute;
    left: 20px;
    width: calc(50% - 40px);
    top: 355px;
    color: var(--hud_tablevaluecolor);
    font-size: 18px;
    line-height: 26px;
    text-transform: none;
    padding: 0px;
    text-align: center;
}

#cstationbox #cstation .newenergytrans .destcapacity .energy-reach.negative{
    background-color: var(--hud_invalid_background);
    color: black;

}

#cstationbox #cstation .newenergytrans .destcapacity .sublabel.estrngth:before,
#cstationbox #cstation .newenergytrans .destcapacity .sublabel.reach:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: #83b2ed;
    clip-path: var(--clip_underline_right);
}



#cstationbox #cstation .actualenergytrans .actions,
#cstationbox #cstation .newenergytrans .actions{
    top: 590px;
    position: absolute;
    right: 20px;
    left: 20px;
    text-align: center;
    /* width: 600px; */
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
}

#cstationbox #cstation .actualenergytrans .actions button,
#cstationbox #cstation .newenergytrans .actions button{
    margin: 5px;
}

#cstationbox #cstation .actualenergytrans .actions .sublink,
#cstationbox #cstation .newenergytrans .actions .sublink{
    margin: 5px;
}

#cstationbox #cstation .actualenergytrans .actions .sublink .manualsend,
#cstationbox #cstation .newenergytrans .actions .sublink .manualsend {
    cursor: pointer;
    text-decoration: underline;
}

#cstationbox #cstation .actualenergytrans .actions .sublink .manualsend:hover,
#cstationbox #cstation .newenergytrans .actions .sublink .manualsend:hover {
    animation: blink 100ms linear 2 alternate;
}

#cstationbox #cstation .deststation .name{
    position: absolute;
    right: 10px;
    width: calc(100% - 160px);
    text-align: right;
    top: 9px;
    font-size: 17px;
    text-transform: none;
    padding: 0px;
    line-height: 12px;
}

#cstationbox #cstation .deststation .distance{
    position: absolute;
    right: 10px;
    width: calc(100% - 160px);
    text-align: right;
    top: 28px;
    line-height: 12px;
    text-transform: none;
}

#cstationbox #cstation .deststation .reason{
    position: absolute;
    right: 10px;
    width: calc(100% - 160px);
    text-align: right;
    top: 42px;
    line-height: 10px;
}
#cstationbox #cstation .deststation .reason span{
    display: inline-block;
    line-height: 13px;
    padding: 2px 6px;
    margin: 1px;
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    background-color: var(--hud_invalid_background);
}

#cstationbox #cstation .deststation .guser{
    position: absolute;
    left: 5px;
    width: 150px;
    top: 6px;
}






#ebeammanual {
    position:absolute;
    width: 600px;
    height: 340px;
    z-index:99999999;
}

#ebeammanual:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_dialog_box);
    z-index: -1;
}



#ebeammanual .sublabel.beamavail,
#ebeammanual .sublabel.beamdeliver {
    position: absolute;
    width: calc(50% - 60px);
    top: 105px;
    color: gray;
    font-size: 13px;
    color: white;
    text-align: center;
    line-height: 45px;
    text-transform: uppercase;
}

#ebeammanual .sublabel.beamdeliver:before,
#ebeammanual .sublabel.beamavail:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: white;
    clip-path: var(--clip_underline_right);
}


#ebeammanual .sublabel.beamavail{
    left: 40px;
}

#ebeammanual .sublabel.beamdeliver{
    right: 40px;
}

#ebeammanual .energy-beamavail {
    position: absolute;
    left: 40px;
    width: calc(50% - 60px);
    top: 150px;
    color: var(--hud_tablevaluecolor);
    font-size: 18px;
    line-height: 26px;
    text-transform: none;
    padding: 0px;
    text-align: center;
}

#ebeammanual .energy-beamdeliver {
    position: absolute;
    right: 40px;
    width: calc(50% - 60px);
    top: 150px;
    color: var(--hud_tablevaluecolor);
    font-size: 18px;
    line-height: 26px;
    text-transform: none;
    padding: 0px;
    text-align: center;
}


#ebeammanual .ebeam-message{
    position: absolute;
    left: 17px;
    right: 20px;
    text-align: center;
    top: 200px;
    line-height: 10px;
}
#ebeammanual .ebeam-message span{
    display: inline-block;
    line-height: 13px;
    padding: 2px 6px;
    margin: 1px;
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    background-color: var(--hud_invalid_background);
    animation: highlited 1000ms linear infinite;
}

#ebeammanual .ebeam-message span.pos{
    background-color: white;
}



#ebeammanual .manualaactions {
    top: 240px;
    position: absolute;
    right: calc(50% - 200px);
    text-align: center;
    width: 400px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 45px;
}

#ebeammanual button.hilighted {
    animation: highlited 1000ms linear infinite;
}


#cstationbox #cstation .holymass{
    top: 200px;
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: white;
    text-align: center;
}

#cstationbox #cstation .holymass .info{
    text-transform: uppercase;
    font-size: 15px;
}

#cstationbox #cstation .holymass .subtitle{
    color: white;

    text-transform: uppercase;
    font-size: 32px;
    font-family: var(--fontFaimly_header);

    padding: 0px;
    margin: 0px;
}

#cstationbox #cstation .holymass .infobox{
    color: white;
    font-size: 13px;

    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
}

#cstationbox #cstation  .holymass .mass-config{
    position: relative;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 150px;
}

#cstationbox #cstation  .holymass .mass-config .mass-label{
    margin-top: 10%;
}

#cstationbox #cstation  .holymass .mass-config .mass-progress{
    position: relative;
    width: 400px;
    margin: 20px auto;
    height: 25px;
    background-color: rgb(165,165,165);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}

#cstationbox #cstation  .holymass .mass-config .mass-progress .mass-bar{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    bottom: 0px;
    background-color: white;
}

#cstationbox #cstation .holymass .actions {
    margin: 40px 0px;
}

#cstationbox #cstation .holymass .actions .mor {
    margin: 20px 0px;
    font-size: 22px;
    color: #ffbc00;

}

#cstationbox #cstation .holymass .actions .button.perform {
    display: inline-block;
    position: relative;
    z-index: 1;
}



#cstationbox #cstation .holymass  .buttons {
    margin: 40px 0px;
}

#cstationbox #cstation .holymass .buttons .button {
    display: inline-block;
    position: relative;
    text-align: center;
    border: 0px;
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 0px 10px;
    font-size: 20px;
    font-family: var(--fontFaimly_header);

    text-transform: none;
    box-sizing: border-box;
    line-height: 30px;
    width: 180px;
}

#cstationbox #cstation .holymass .mass-config .turned,
#cstationbox #cstation .holymass .mass-config .died,
#cstationbox #cstation .holymass .mass-config .soldiers,
#cstationbox #cstation .holymass .mass-config .clean,
#cstationbox #cstation .holymass .mass-config .uzbyly,
#cstationbox #cstation .holymass .mass-config .present,
#cstationbox #cstation .holymass .mass-config .cards {
    position: relative;
    margin: 65px 0px 0px;
}



#cstationbox #cstation .holymass .mass-config .cards .hmcards-list {
    padding: 20px 0px 0px;
}

#cstationbox #cstation .holymass .mass-config .cards .hmcards-list canvas {
    width: 145px;
    cursor: pointer;
}

#cstationbox #cstation .holymass .mass-config .cards .hmcards-list canvas:hover {
    animation: blink 100ms linear 2;
}


#cstationbox #cstation .holymass .mass-config .died:before,
#cstationbox #cstation .holymass .mass-config .turned:before,
#cstationbox #cstation .holymass .mass-config .soldiers:before,
#cstationbox #cstation .holymass .mass-config .cards:before,
#cstationbox #cstation .holymass .mass-config .clean:before,
#cstationbox #cstation .holymass .mass-config .uzbyly:before,
#cstationbox #cstation .holymass .mass-config .present:before {
    display: block;
    position: absolute;
    top: -30px;
    left: 0px;
    right: 0px;
    height: 20px;
    z-index: 1;
    text-align:center;
    line-height: 20px;
    font-size: 13px;
    color: gray;
}

#cstationbox #cstation .holymass .mass-config .turned:before {
    content:'CREW OUTBREAK';
}
#cstationbox #cstation .holymass .mass-config .died:before {
    content:'CREW CASAULTIES';
}
#cstationbox #cstation .holymass .mass-config .soldiers:before {
    content:'SOLDIERS AVAILABLE TO GUARD CEREMONY';
}
#cstationbox #cstation .holymass .mass-config .cards:before {
    content:'EARNED CARDS';
}
#cstationbox #cstation .holymass .mass-config .clean:before {
    content:'CREW PRESENT';
}
#cstationbox #cstation .holymass .mass-config .uzbyly:before {
    content:'CREW IN LAST HOLY MASS';
}
#cstationbox #cstation .holymass .mass-config .present:before {
    content:'CREW PRESENT FOR HOLY MASS';
}

#cstationbox #cstation .holymass .mass-config .turned-list,
#cstationbox #cstation .holymass .mass-config .uzbyly-list,
#cstationbox #cstation .holymass .mass-config .died-list,
#cstationbox #cstation .holymass .mass-config .present-list,
#cstationbox #cstation .holymass .mass-config .clean-list,
#cstationbox #cstation .holymass .mass-config .soldiers-list {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
    min-height: 0;
    max-height: 100%;
    padding-right: 10px;
    justify-content: center;

}
#cstationbox #cstation .holymass .mass-config .colonistsres {
    text-align: center;
}
#cstationbox #cstation .holymass .mass-config .colonistsres table.sinfo {
    margin: 30px auto 5px;
}

#cstationbox #cstation .holymass .mass-config .colonistsres table.sinfo th {
    text-align: right;

    padding-right: 5px;
    font-size: 13px;
    text-transform: uppercase;
    color: gray;
}

#cstationbox #cstation .holymass .mass-config .colonistsres table.sinfo td {
    text-align: left;

    padding-left: 5px;
    font-size: 13px;
    text-transform: uppercase;
}

#cstationbox #cstation .holymass .mass-config .soldiers-list .info {

    animation: highlited 1000ms linear infinite;
}


#cstationbox #cstation .holymass .mass-config .present-list .info {

    animation: highlited 1000ms linear infinite;
}

#cstationbox #cstation .holymass .mass-config .astronaut{

    display: block;
    text-align: center;
    position: relative;
    height: 160px;
    z-index: 1;
    margin: unset;
}

#cstationbox #cstation .holymass .mass-config .astronaut:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    height: unset;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_personel);
    z-index: -1;
}







#cstationbox #cstation .holymass .mass-config .astronaut:not(.uzbyl){
    cursor: pointer;
}

#cstationbox #cstation .holymass .mass-config .astronaut:before {
    content:'';
}
#cstationbox #cstation .holymass .mass-config .astronaut:after {
    content:'';
}



#cstationbox #cstation .holymass .mass-config .astronaut .white-box{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}



#cstationbox #cstation .holymass .mass-config .astronaut .white-box .img{
    padding: 0px;
    bottom: 0px;
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;

    clip-path: var(--clip_personel);
}

#cstationbox #cstation .holymass .mass-config .astronaut .white-box .img:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(
        0deg
        , rgb(60,60,60) 23%, rgba(0,0,0,0) 72%);
}


#cstationbox #cstation .holymass .mass-config .astronaut .white-box .img .face{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 165px;
    box-sizing: border-box;
    filter: brightness(1) grayscale(1);
    background-position: center -37px;
    background-repeat: no-repeat;

}
#cstationbox #cstation .holymass .mass-config .astronaut .white-box .img .aid {
    display: none;
    position: absolute;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: rgba(255,255,255,.5);
    text-align: center;
    cursor: pointer;
}





#cstationbox #cstation .holymass .mass-config .astronaut .white-box .maininfo{
    position: absolute;
    top: 105px;
    left: 5px;
    right: 0px;
    text-align: center;
}


#cstationbox #cstation .holymass .mass-config .astronaut .white-box .maininfo .name{
    font-size: 13px;
    text-transform: uppercase;

}


#cstationbox #cstation .holymass .mass-config .astronaut .white-box .maininfo .race{
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 0px;
    height: 11px;
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 0px 0px 0px;
    height: 11px;
    overflow: hidden;
    color: rgba(150,150,150,1);
}
#cstationbox #cstation .holymass .mass-config .astronaut .white-box .maininfo .prof{
    font-size: 10px;
    text-transform: uppercase;
    padding: 0px 0px;
    height: 11px;
    font-size: 10px;
    text-transform: uppercase;
    padding: 5px 0px 0px 0px;
    height: 11px;
    overflow: hidden;
    color: rgba(150,150,150,1);
}
#cstationbox #cstation .holymass .mass-config .astronaut .white-box .health {
    position: absolute;
    top: 90px;
    height: 7px;
    left: 9px;
    right: 3px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}


#cstationbox #cstation .holymass .mass-config .astronaut .white-box .health .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}





#cstationbox #cstation .holymass .mass-config .astronaut .white-box .skills{
    position: absolute;
    right: 0px;
    top: 136px;
    left: 0px;
    text-align: center;
}
#cstationbox #cstation .holymass .mass-config .astronaut .white-box .skills div{
    height: 18px;
    line-height: 18px;
    width: 38px;
}

#cstationbox #cstation .holymass .mass-config .astronaut .next-mass{
    position: absolute;
    right: 0px;
    top: 55px;
    left: 0px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    /* padding: 1px 0px; */

    /* height: 11px; */
    /* overflow: hidden; */
    color: white;
}

#cstationbox #cstation .holymass .mass-config .astronaut:not(.uzbyl):hover {

}



#cstationbox #cs_conf_inside {
    position: absolute;
    top: 45px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}


#cstationbox .cs-map-title {
    display: block;
    position: absolute;
    left: 20px;
    top: 55px;
    text-align: left;
    color: #ced4e1;
    font-size: 20px;
    text-transform: uppercase;
    display: none;
}

#cstationbox .cs-map-actions {
    display: block;
    position: absolute;
    left: 20px;
    top: 45px;
    text-align: right;
    width: 49%;
    box-sizing: border-box;

}

#cstationbox .cs-map {
    display: block;
    position: absolute;
    left: 20px;
    top: 100px;
    text-align: center;
    width: 48%;
    box-sizing: border-box;
    bottom: 120px;
    z-index: 10;


    display: flex;
    flex-direction: column;
}

#cstationbox .cs-conf {
    display: block;
    position: absolute;
    right: 10px;
    top: 45px;
    text-align: center;
    width: 45%;
    box-sizing: border-box;
    bottom: 20px;
}

#cstationbox .cs-conf > .csname {
    display: block;
    position: relative;
    width: calc(100% - 50px);
    right: 30px;
    top: 0px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding-bottom: 40px;
}


#cstationbox .cs-map .block {
    position: absolute;
    background-size: cover, 57%;
    background-repeat: no-repeat;
    background-position: center, right 33px top 40%;
    margin-left: 0px;
    margin-right: 0px;
    height: var(--block-height);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image-source: linear-gradient(to right, #ff000000 0%, #7883973d 71%, #ff000000 100%);
    border-image-slice: 1;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
    top: var(--block-top);
    left: 0px;
    right: 0px;
    /*transition: right 0s linear, height 0.1s linear, top 0.1s linear;*/
}

#cstationbox .cs-map .block.hover {
    --expand: 30px;
    --target-height: max(var(--block-heightpx), 70px);
    --expand-factor: calc((var(--target-height) - var(--block-heightpx)) / 2 + var(--expand));

    top: calc(var(--block-top) - var(--expand-factor));
    height: calc(var(--block-heightpx) + 2 * var(--expand-factor));

    border-image-source: linear-gradient(to right, #ff000000 0%, #788397cc 71%, #788397cc 100%);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(139 183 221 / 25%) 71%, rgb(0 0 0 / 0%) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0f172c;
    z-index: 95;
    right: -20px;
    min-height: 70px;
}

#cstationbox .cs-map .block.hover .healthbar{
    display: none;
}

#cstationbox .cs-map .block .pos-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: silver;
    right: -32px;
    display: none;

}

#cstationbox .cs-map .block .bckgr {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    overflow: hidden;
    filter: drop-shadow(0px 0px 9px #3a4d7778);
}

#cstationbox .cs-map .block .bckgr .bckgrimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: -60%;
    bottom: 0px;
    background-size: auto calc(100% - 1px);
    background-repeat: no-repeat;
    background-position: top 1px center;
    transition: right 600ms;


}





#cstationbox .cs-map .block.hover .bckgr {
    filter: brightness(1.3) drop-shadow(0px 0px 15px rgba(130, 194, 224, 0.5)) drop-shadow(0px 0px 40px #3a4d77ad);

}

#cstationbox .cs-map .block.hover .bckgr .bckgrimg {

    right: -40%;




}

#cstationbox .cs-map .block .bselector {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20%;
    height: 10px;
    right: 24.5%;
    z-index: 1;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 5px 5px, 100% 1px;
    background-position: right center, right center;

}

#cstationbox .cs-map .block.hover .bselector {
    display: block;

}


#cstationbox .cs-map .block .bdata {
    visibility: hidden; /* Skryje prvek pro začátek */
    opacity: 0;
    position: absolute;
    top: calc(100% - var(--block-top)); /* Dynamická pozice */
    transform: translateY(calc(-70px - var(--block-top)));
    /*transform: translateY(calc(var(--block-top) - 80px));*/
    transform-origin: 50% 50%;
    left: -170px;
    bottom: 0px;
    text-align: left;
    color: white;
    width: 96%;
    min-width: 440px;
    z-index: 2;
    /*transition: transform 150ms linear, opacity 150ms linear;*/
}

#cstationbox .cs-map .block.hover .bdata {
    visibility: visible;
    opacity: 1;


}

#cstationbox .cs-map .block .bdata .bdatacontent {
    display: block;
    position: relative;

    text-align: left;
    color: white;
    min-height: 300px;
    z-index: 1;
    padding: 0px 0px 20px;
    display: flex;
    flex-direction: column;
}




#cstationbox .cs-map .block .bdata .bdatacontent:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: -20px;

    clip-path: var(--clip_cstationbox_bdata);
    z-index: -1;
    background-size: cover;
    background-color: var(--gitem-background);
    background-image: linear-gradient(rgb(37 63 129 / 80%) 0%, rgb(54 54 207 / 15%) 100%);

}




#cstationbox .cs-map .block .bdata .bdatacontent .name {
    display: block;
    position: absolute;
    top: -5px;
    left: 42px;
    right: 20px;
    height: 28px;
    text-align: left;
    color: white;
    font-size: 21px;
    text-transform: uppercase;
    overflow: hidden;
    font-family: var(--fontFaimly_header);
    white-space: nowrap;
}

#cstationbox .cs-map .block .bdata .bdatacontent .name .descr {
    font-size: 10px;
    color: gray;
    display: block;
    padding-top: 2px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals {
    margin-left: 25px;
    margin-top: 20px;
    width: 200px;
    border-spacing: 0px;
    text-align: left;
    color: var(--hud_tablevaluecolor);
    line-height: 17px;
    font-size: 12px;
    text-transform: none;
    /* text-shadow: var(--shadow_textfull); */
    padding: 0px 0px 14px;
}

#cstationbox .cs-map .block.hover .bdata .bdatacontent .vals {
    animation: blink 100ms linear 2;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals th {
    padding: 0px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: right;
    padding-left: 10px;
    vertical-align: top;
    line-height: 10px;
    width: 20%;
    color: var(--hud_popiseck_gray_color);
}



#cstationbox .cs-map .block .bdata .bdatacontent .vals span {
    color: rgb(180,130,0);
    animation: highlited 1000ms linear infinite;
    font-size: 12px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals span.cname {
    color: white;
    text-transform: uppercase;
    display: block;
    animation: none;
    display: none;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals span.ctitle {
    color: gray;
    text-transform: uppercase;
    display: block;
    animation: none;

}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .progressbarbcg {
    margin-left: 0px;
    position: relative;
    height: 7px;
    margin-top: 4px;
    background-color: var(--hud_construction_barbckg_color);


}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .progressbar{
    position: relative;
    height: 7px;
    background-color: var(--hud_construction_bar_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);


}
#cstationbox .cs-map .block .bdata .bdatacontent .vals .progressbar .bar{
    position: absolute;
    background-color: var(--hud_construction_bar_color);
    width: 1px;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction td {
    font-size: 12px;
    text-transform: uppercase;
    line-height: 18px;
    color: white;
    /*text-shadow: none;*/
    height: auto;

}
#cstationbox .cs-map .block .bdata .bdatacontent .vals .progactions td {
    padding: 0px;

}


#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .progr {
    padding: 15px 0px 10px 0px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem {
    position: relative;
    height: 52px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .cinfo {
    position: absolute;
    top: 5px;
    left: 5px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .completeqty {
    position: absolute;
    top: 20px;
    left: 5px;
}




#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .completeqty .canhave{
    display: none;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .progressbar{
    position: absolute;
    top: 35px;
    left: 5px;
    right: 5px;
    height: 7px;
    margin-top: 4px;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size:2px 4px;
    background-position:0 0, 30px 30px;
    box-shadow: var(--shadow_boxfull);
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .progressbar .havebar,
#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .progressbar .canhavebar{
    position: absolute;
    background-color: black;
    width: 1px;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .construction .constructionitem .progressbar .canhavebar{
    display: none;
}


#cstationbox .cs-map .block .bdata .bdatacontent .vals .progactions{

}

#cstationbox .cs-map .block .bdata .bdatacontent .vals .progactions .cancelconstr {

}



#cancelconstr{
    position: absolute;
    width: 450px;
    height: 550px;
    overflow: hidden;
    top: calc(50% - 240px);
    left: calc(50% - 300px);
    z-index: 1;
}

#cancelconstr:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}

#cancelconstr table {
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    position: absolute;
    top: 90px;
    left: 0px;
}
#cancelconstr table td {
    font-size:12px;
    color:rgba(255,255,255,1);
    padding: 5px 20px;
    text-align: center;
}

#cancelconstr .actions{
    position: absolute;
    bottom: 40px;
    left: 10px;
    right: 10px;
    text-align:center;
}


#cancelconstr table td.construction-name{
    text-align:center;
    text-transform: uppercase;
    font-size: 14px;
}
#cancelconstr table td.construction-text{
    text-align:center;
    text-transform: uppercase;
}
#cancelconstr table td.construction-reason{
    text-align:center;
    text-transform: uppercase;
    animation:highlited 1000ms linear infinite;
    padding: 50px 50px 10px;
}

#cancelconstr table.retitems{
    position: relative;
    padding: 0px;
    margin: 40px auto 0px;
    top: unset;
    width: auto;
    border-spacing: 0px;
    border-collapse: separate;
}

#cancelconstr table.retitems td{
    height: 20px;
    font-size: 10px;
    padding: 0px;
    line-height: 10px;
    vertical-align: middle;
}

#cancelconstr table.retitems td.return-name {
    text-align: right;
}

#cancelconstr table.retitems td.return-name .namelink {
    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 10px;
    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#cancelconstr table.retitems td.return-name .namelink:hover {
    animation: blink 100ms linear 2;
}


#cancelconstr table.retitems td.return-qty{
    text-align:right;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    font-size: 13px;
    padding-right: 10px;
    width: 70px;
}

#cancelconstr table.retitems td.return-mu{
    text-align:left;
    color: silver;
    text-transform: uppercase;
    font-size: 13px;
    padding-right: 10px;
    width: 20px;
}

#cancelconstr table.retitems td{
    font-size: 10px;
}


#cstationbox .cs-map .block > .infos {
    display: block;
    position: absolute;
    top: 50%;
    right: -5%;
    width: 55%;
    max-width: calc(92% - 150px - 20px);
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;

}

#cstationbox .cs-map .block > .infos > .infos-info {
    display: inline-block;
    position: relative;
    /* width: fit-content; */
    animation: blink 100ms linear 2;
    background-color: var(--hud_invalid_background);
    color: var(--hud_invalid_text);
    padding: 2px 4px;
    margin: 2px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);


}


#cstationbox .cs-map .block .bdata .bdatacontent > .healthbar {
    display: block;
    position: relative;

    width: calc(100% - 40px);
    height: 7px;
    animation: blink 100ms linear 2;
    background-color: var(--hud_health_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    box-sizing: border-box;
    margin-top: 110px;

    margin-left: 20px;

}

#cstationbox .cs-map .block .bdata .bdatacontent > .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: white;
}

#cstationbox .cs-map .block .bdata .bdatacontent > .healthbar .txt{
    position: absolute;
    top: -15px;
    line-height: 6px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    line-height: 10px;
    text-align: right;

    white-space: nowrap;
    color: white;
    z-index: 1;
}

#cstationbox .cs-map .block .bdata .bdatacontent > .healthbar .sbefore {
    display: block;
    /*content: 'HEALTH POINTS';*/
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: white;

    white-space: nowrap;
}

#cstationbox .cs-map .block .bdata .bdatacontent > .healthbar:hover .cshint {
    display: block;
}


#cstationbox .cs-map .block > .healthbar {
    display: block;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 150px;
    height: 7px;
    animation: blink 100ms linear 2;
    background-color: var(--hud_health_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    box-sizing: border-box;
    transform: translateY(-50%);
    /* margin-bottom: 10px; */
    /* margin-top: 20px; */
    /* margin: 115px 30px 20px 25px; */
    z-index: 1;

}

#cstationbox .cs-map .block > .healthbar .bar {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: white;
}

#cstationbox .cs-map .block > .healthbar .txt{
    position: absolute;
    top: -15px;
    line-height: 6px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    line-height: 10px;
    text-align: right;

    white-space: nowrap;
    color: white;
    z-index: 1;
}

#cstationbox .cs-map .block > .healthbar .sbefore {
    display: block;
    /*content: 'HEALTH POINTS';*/
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: white;

    white-space: nowrap;
}

#cstationbox .cs-map .block > .healthbar:hover .cshint {
    display: block;
}

#cstationbox .cs-map .block .cshint {
    display: none;
    position: absolute;
    left: 100%;
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(50,50,50,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    top: -3px;
}
#cstationbox .cs-map .block .cshint:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(50,50,50,1);
    position: absolute;
    top: 0px;
    left: -6px;
}


#cstationbox .cs-map .bdata .bdatacontent .actions {
    display: block;
    position: absolute;
    left: 10px;
    top: 38px;
}

#cstationbox .cs-map .bdata .bdatacontent .showWindowItem {
    left: 16px;
    right: unset;
    top: 1px;
}

#cstationbox .cs-map .bdata .bdatacontent .hover-switchers {
    display: block;
    position: absolute;
    right: 20px;
    top: 41px;
    z-index: 10;
}

#cstationbox .cs-map .bdata .bdatacontent .hover-switchers .hover-switcher {
    margin: 0px 0px 0px 4px;
    height: 25px;
    width: 25px;
    padding: 0px;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;

}

#cstationbox .cs-map .bdata .bdatacontent .hover-switchers .hover-switcher.prew {
    background-image: url(ico/arrow-141-16.png);
}


#cstationbox .cs-map .bdata .bdatacontent .hover-switchers .hover-switcher.next {
    background-image: url(ico/arrow-142-16.png);
}

#cstationbox .cs-map .bdata .bdatacontent .hover-switchers .hover-switcher.unactive {
    filter: brightness(0.5);
}
#cstationbox .cs-map .bdata .bdatacontent .hover-switchers .hover-switcher.unactive::after {
    filter: brightness(2);
}




#cstationbox .cs-map-actions .addBlock,
#cstationbox .cs-map .block .actions .editBlock,
#cstationbox .cs-map .block .actions .editWeapons,
#cstationbox .cs-map .block .actions .rem-cblock,
#cstationbox .cs-map .block .actions .switch-cscblock,
#cstationbox .cs-map .block .actions .switch-cssblock,
#cstationbox .cs-map .block .hover-switcher{
    position: relative;
    display: inline-block;
    color: #b9dbff;
    margin: 0px 0px 0px 9px;
    height: 35px;
    cursor: pointer;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-color: transparent;
    line-height: 35px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0px 13px 0px 34px;
    text-align: left;
    font-family: var(--fontFaimly_button);

    z-index: 1;
    white-space: nowrap;
}

#cstationbox .cs-map-actions .addBlock.unactive,
#cstationbox .cs-map .block .actions .editBlock.unactive,
#cstationbox .cs-map .block .actions .editWeapons.unactive,
#cstationbox .cs-map .block .actions .rem-cblock.unactive,
#cstationbox .cs-map .block .actions .switch-cscblock.unactive,
#cstationbox .cs-map .block .actions .switch-cssblock.unactive,
#cstationbox .cs-map .block .hover-switcher.unactive{

    color: var(--border-button-color-unactive);
}



#cstationbox .cs-map-actions .addBlock:after,
#cstationbox .cs-map .block .actions .editBlock:after,
#cstationbox .cs-map .block .actions .editWeapons:after,
#cstationbox .cs-map .block .actions .rem-cblock:after,
#cstationbox .cs-map .block .actions .switch-cscblock:after,
#cstationbox .cs-map .block .actions .switch-cssblock:after,
#cstationbox .cs-map .block .hover-switcher:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color2) 0%, var(--border-editor-effect-color2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color) 0%, var(--border-editor-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox .cs-map-actions .addBlock.unactive:after,
#cstationbox .cs-map .block .actions .editBlock.unactive:after,
#cstationbox .cs-map .block .actions .editWeapons.unactive:after,
#cstationbox .cs-map .block .actions .rem-cblock.unactive:after,
#cstationbox .cs-map .block .actions .switch-cscblock.unactive:after,
#cstationbox .cs-map .block .actions .switch-cssblock.unactive:after,
#cstationbox .cs-map .block .hover-switcher.unactive:after{
    background-image:
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable2) 0%, var(--border-editor-effect-color-unavailable2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable2) 0%, var(--border-editor-effect-color-unavailable2) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%),
        linear-gradient(0deg, var(--border-editor-effect-color-unavailable) 0%, var(--border-editor-effect-color-unavailable) 100%);
}

#cstationbox .cs-map-actions .addBlock:before,
#cstationbox .cs-map .block .actions .editBlock:before,
#cstationbox .cs-map .block .actions .editWeapons:before,
#cstationbox .cs-map .block .actions .rem-cblock:before,
#cstationbox .cs-map .block .actions .switch-cscblock:before,
#cstationbox .cs-map .block .actions .switch-cssblock:before,
#cstationbox .cs-map .block .hover-switcher:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}



#cstationbox .cs-map-actions .addBlock:hover:before,
#cstationbox .cs-map .block .editBlock:hover:before,
#cstationbox .cs-map .block .editWeapons:hover:before,
#cstationbox .cs-map .block .rem-cblock:hover:before,
#cstationbox .cs-map .block .switch-cscblock:hover:before,
#cstationbox .cs-map .block .switch-cssblock:hover:before,
#cstationbox .cs-map .block .hover-switcher:hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}



#cstationbox .cs-map-actions .addBlock.unactive:hover:before,
#cstationbox .cs-map .block .editBlock.unactive:hover:before,
#cstationbox .cs-map .block .editWeapons.unactive:hover:before,
#cstationbox .cs-map .block .rem-cblock.unactive:hover:before,
#cstationbox .cs-map .block .switch-cscblock.unactive:hover:before,
#cstationbox .cs-map .block .switch-cssblock.unactive:hover:before,
#cstationbox .cs-map .block .hover-switcher.unactive:hover:before{
    box-shadow: none;
    animation: none;
}


#cstationbox .cs-map .block .thint {
    animation: highlited 1000ms linear infinite;
    left: calc(100% - 40px);
    text-align: center;
    bottom: unset;
    top: 50%;
    right: unset;
    transform: translateY(-50%);

}

#cstationbox .cs-map .block .thint:before  {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid #ffbc00;
    border-bottom: 10px solid transparent;
    border-left: none;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
    bottom: unset;
    right: unset;
}

#cstationbox .cs-map .block .bdata .actions .thint {
    animation: highlited 1000ms linear infinite;
    left: 50%;
    text-align: center;
    bottom: 40px;
    top: unset;
    right: unset;
    transform: translateX(-50%);

}

#cstationbox .cs-map .block .bdata .actions .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}

#cstationbox .cs-map .block .editBlock {
    background-image: url(ico/block_add_facility-32.png);
}

#cstationbox .cs-map .block .editWeapons {
    background-image: url(ico/block_weapon-32.png);
}

#cstationbox .cs-map .block .rem-cblock {
    background-image: url(ico/remove_block-32.png);
}

#cstationbox .cs-map .block .switch-cscblock {
    background-image: url(ico/switch_cblock-32.png);
}

#cstationbox .cs-map .block .switch-cssblock {
    background-image: url(ico/switch_sblock-32.png);
}

#cstationbox .cs-map-actions .addBlock {
    position: absolute;
    top: 5px;
    right: 20px;
    background-image: url(ico/insert_block-32.png);


}

#cstationbox .cs-map .block .repair {
    position: relative;
    display: block;
    color: #b9dbff;
    float: right;
    margin: 0px 0px 0px 9px;
    height: 35px;
    width: 35px;
    cursor: pointer;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-color: transparent;
    line-height: 35px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-family: var(--fontFaimly_button);
    z-index: 1;
}



#cstationbox .cs-map .block .repair:before {
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(ico/ico_repair.png);
}

#cstationbox .cs-map .block .repair.unactive:before {
    opacity: 0.4;
}

#cstationbox .cs-map .block .repair:not(.unactive):before  {
    animation: highlited 400ms linear infinite;
}

#cstationbox #cs-conf .docking
{
    display: block;
    position: relative;
    width: calc(100% - 40px);

    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding-bottom: 40px;
}

#cstationbox #cs-conf .recharging
{
    display: block;
    position: relative;
    width: calc(100% - 40px);

    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding-bottom: 40px;
}

#cstationbox #cs-conf .confgrid
{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    position: relative;
    width: calc(100% - 30px);

    text-align: center;

    box-sizing: border-box;
    padding-bottom: 40px;
    margin: 0px auto;
}



#cstationbox #cs-conf .energypolitics
{
    width: calc(100% - 10px);
}



#cstationbox #cs-conf .attack
{
    display: block;
    position: relative;
    right: 30px;
    width: calc(100% - 50px);
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding-bottom: 40px;
}

#cstationbox #cs-conf .broadcast {
    display: block;
    position: relative;
    right: 30px;
    width: calc(100% - 50px);
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding-bottom: 40px;
}

#cstationbox #cs-conf .conf_links {
    display: block;
    position: absolute;
    right: 20px;
    top: 0px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
}

#cstationbox #cs-conf .info{
    top: 40%;

    width: 80%;
    margin: 0px auto;
}

#cstationbox #cs-conf .conf_links{
    position: absolute;
    top: 0px;
    right: 20px;
    left: 20px;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;
}

#cstationbox #cs-conf .conf_links span{
    position: relative;
    display: inline-block;

    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#cstationbox #cs-conf .conf_links span:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#cstationbox #cs-conf .conf_links span.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#cstationbox #cs-conf .conf_links span.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

#cstationbox #cs-conf .quantatransfer,
#cstationbox #cs-conf .deposit,
#cstationbox #cs-conf .withdraw,
#cstationbox #cs-conf .setmain,
#cstationbox #cs-conf .joinzone {
    display: block;
    position: absolute;
    right: 0px;
    top: 25px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    padding: 0px 10px 50px;

    box-sizing: border-box;

}
#cstationbox #cs-conf .quantatransfer .quanta_value,
#cstationbox #cs-conf .deposit .credit_value,
#cstationbox #cs-conf .withdraw .credit_value {
    color: var(--hud_tablevaluecolor);
    padding: 20px 0px 20px;
    font-size: 30px;
}
#cstationbox #cs-conf .quantatransfer .quanta_input,
#cstationbox #cs-conf .deposit .deposit_input,
#cstationbox #cs-conf .withdraw .withdraw_input {
    color: white;
    padding: 5px 5px 10px;
    height: 38px;
    text-align: center;
    display: inline-block;
}


#cstationbox #cs-conf .deposit .deposit_input,
#cstationbox #cs-conf .withdraw .withdraw_input {
    padding-right: 16px;
    background-image: url(./ico/exc_16.png) !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 20px;

}

#cstationbox #cs-conf .quantatransfer .quanta_input {
    padding-right: 19px;
    background-image: url(./ico/quanta_64.png) !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 20px;

}





#cstationbox #cs-conf .quantatransfer .quanta_make button,
#cstationbox #cs-conf .deposit .deposit_make button,
#cstationbox #cs-conf .withdraw .withdraw_make button,
#cstationbox #cs-conf .setmain .actions button,
#cstationbox #cs-conf .joinzone .actions button {
    margin: 20px 5px 0px;
}

#cstationbox #cs-conf .quantatransfer .quanta_input input,
#cstationbox #cs-conf .deposit .deposit_input input,
#cstationbox #cs-conf .withdraw .withdraw_input input {
    width: 150px;
    margin: 5px 5px;
    text-align: center;
}








#cstationbox #cs-conf .csname .csname_input {
    color: white;
    padding: 5px 5px 10px;
    height: 38px;
    text-align: center;
}

#cstationbox #cs-conf .csname .csname_rename button {
    margin: 0px 5px;
}

#cstationbox #cs-conf .csname .csname_input input {
    width: 250px;
    margin: 5px 5px;
    text-align: center;
    text-transform: none;
}

#cstationbox #cs-conf .csconf_scroller {
    display: block;
    position: absolute;
    top: 65px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    bottom: 0px;
    overflow-y: hidden;
    overflow-x: hidden;
    width: calc(100% - 20px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px 0px 350px
}

#cstationbox #cs-conf .csconf_scroller .ismain {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    padding: 0px 0px 0px;
    color: white;
    font-size: 40px;

    font-family: var(--fontFaimly_header);

}


#cstationbox #cs-conf .csconf_scroller .setmain {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    padding: 0px 0px 20px;

    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;

}

#cstationbox #cs-conf .csconf_scroller .setmain .itext {
    display: block;
    position: relative;
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    padding: 0px 40px 0px;
    color: silver;

    box-sizing: border-box;
    font-size: 13px;
}


#cstationbox #cs-conf .csconf_scroller .joinzone {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    padding: 0px 0px 20px;

    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;

}


#cstationbox #cs-conf .csconf_scroller .setmaintip {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    box-sizing: border-box;
    padding: 15px 0px 20px;
    font-size: 13px;
}

#cstationbox #cs-conf .csconf_scroller .setmaintip .titler {
    display: none;

}

#cstationbox #cs-conf .csconf_scroller .setmaintip .text {
    position: relative;
    color: rgb(180, 130, 0);
    background-color: rgb(61, 44, 0);
    padding: 13px 13px 13px 60px;
    border-radius: 6px;
    text-align: left;
}

#cstationbox #cs-conf .csconf_scroller .setmaintip .text:before {
    content: '';
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    background: transparent url(ico/lightbulb-2-48.png) center no-repeat;
    background-size: 22px;
    opacity: .65;
}

#cstationbox #cs-conf .csconf_scroller .credit {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    box-sizing: border-box;
    padding: 0px 0px 20px;

    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox #cs-conf .credit {
    display: block;
    position: relative;
    right: 0px;
    width: auto;
    top: 25px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
    margin: 20px 0px 10px 0px;
}

#cstationbox #cs-conf .credit .credit_value {
    color: var(--hud_tablevaluecolor);
    padding: 10px 0px 20px;
    font-size: 30px;
}



#cstationbox #cs-conf .quanta {
    display: block;
    position: relative;
    right: 0px;
    width: calc(100% - 30px);
    top: 25px;
    text-align: center;
    left: 0px;
    box-sizing: border-box;
    margin: 10px 0px 10px 0px;
    padding: 0px 0px 20px;
}

#cstationbox #cs-conf .quanta .quanta_value {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: calc(100% - 30px);
    margin: auto;
}

#cstationbox #cs-conf .quanta .quanta_value .titler {
    padding-top: 0px;
    min-height: 20px;
    padding-bottom: 26px;
}

#cstationbox #cs-conf .quanta .quanta_value .quanta_val {
    font-size: 20px;

    padding-bottom: 10px;
}

#cstationbox #cs-conf .quanta .quanta_value .quanta_val .format-quanta {
    background-size: 13px;
}

#cstationbox #cs-conf .quanta .quanta_value .quanta_user_value,
#cstationbox #cs-conf .quanta .quanta_value .quanta_zone_value {
    color: var(--hud_tablevaluecolor);
    padding: 15px 15px 20px;
    border-radius: 6px;
}

#cstationbox #cs-conf .quanta .quanta_value .quanta_user_value {
    color: var(--hud_quanta_user_text_color);
    background-color: var(--hud_quanta_user_barbckg_color);
}

#cstationbox #cs-conf .quanta .quanta_value .quanta_zone_value {
    color: var(--hud_quanta_text_color);
    background-color: var(--hud_quanta_barbckg_color);
}

#cstationbox #cs-conf .csconf_scroller .destroyed {
    display: block;
    position: relative;
    width: calc(100%);
    right: 0px;
    top: unset;
    left: unset;
    text-align: center;
    box-sizing: border-box;
}


#cstationbox #cs-conf .csconf_scroller .destroyed .title {
    position: absolute;
    height: unset;
    width: 100%;
    top: 0px;
    left: 0px;
    color: #FF5722;
    box-sizing: border-box;
    line-height: 45px;
    text-transform: uppercase;
    text-shadow: none;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    text-align: center;
    font-family: var(--fontFaimly_header);
    padding: 0px;
    margin: 0px;
    background-color: unset;
}

#cstationbox #cs-conf .csconf_scroller .destroyed .subtitle {
    position: absolute;
    height: unset;
    width: 100%;
    top: 65px;
    left: 0px;
    color: white;
    box-sizing: border-box;
    line-height: 23px;

    text-shadow: none;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    text-align: center;


}

#cstationbox #cs-conf .csconf_scroller .destroyed .vault_withdraw {
    display: block;
    position: absolute;
    right: 0px;
    top: 180px;
    text-align: center;
    left: 0px;
    box-sizing: border-box;
}



#cstationbox #cs-conf .energy {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0px 10px 0px;
}

#cstationbox #cs-conf .energy .energy_box {
    display: block;
    position: relative;
    margin-right: 17px;
    margin-top: 26px;
    text-align: center;
    margin-left: 17px;
    height: 7px;
    box-sizing: border-box;
    margin-bottom: 15px;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    background-color: var(--hud_energy_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#cstationbox #cs-conf .energy .energy_box .energy-bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--hud_energy_bar_color);

}

#cstationbox #cs-conf .energy .energy_box .energy-value {
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_energy_text_color);
}

#cstationbox #cs-conf .energy .energy_box .ebefore {
    display: block;

    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_energy_text_color);
    white-space: nowrap;

}

#cstationbox #cs-conf .cargo {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0px 10px 0px;
}


#cstationbox #cs-conf .cargo .cargo_box {
    display: block;
    position: relative;
    margin-right: 17px;
    margin-top: 26px;
    text-align: center;
    margin-left: 17px;
    height: 7px;
    box-sizing: border-box;
    margin-bottom: 15px;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    background-color: var(--hud_storage_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#cstationbox #cs-conf .cargo .cargo_box .cargo-bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--hud_storage_bar_color);
}

#cstationbox #cs-conf .cargo .cargo_box .cargo-value {
    position: absolute;

    bottom: 13px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_storage_text_color);
}

#cstationbox #cs-conf .cargo .cargo_box .cbefore {
    display: block;

    position: absolute;

    bottom: 13px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_storage_text_color);
    white-space: nowrap;
}

#cstationbox #cs-conf .sexp .level .main {
    font-size: 35px;
    color: white;
    padding: 0px 0px 2px;
    text-transform: uppercase;
}

#cstationbox #cs-conf .sexp .level .main.notmain {
    font-size: 25px;
    color: silver;

}

#cstationbox #cs-conf .sexp .level .slevel {
    font-size: 34px;
    color: var(--hud_sexp_text_color);
    padding: 5px 0px 10px;
    text-transform: uppercase;
}

#cstationbox #cs-conf .sexp .level .slevel >  span {
    font-size: 24px;
    padding: 5px 0px 10px;
    text-transform: uppercase;
}

#cstationbox #cs-conf .sexp .level .slevel >  span.downgrade,
#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost
{
    color: var(--hud_invalid_color);

    font-size: 18px;
    display: block;
    margin: 0px auto;
    width: min-content;
    white-space: nowrap;
}
#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost
{
    color: #ffbc00;

}

#cstationbox #cs-conf .sexp .level .slevel >  span.downgrade .infobox,
#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost .infobox
{
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;


}

#cstationbox #cs-conf .sexp .level .slevel >  span.downgrade .infobox:before,
#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost .infobox:before
{
    content: '';
    position: absolute;
    right: 0px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;

}

#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost .infobox:before
{
    color: gold;
    border: 1px solid gold;

}

#cstationbox #cs-conf .sexp .level .slevel >  span.downgrade .infobox .subtext,
#cstationbox #cs-conf .sexp .level .slevel >  span.zoneboost .infobox .subtext
{
    animation: var(--animation-subtext-fadeinFast);
}



#cstationbox #cs-conf .sexp .level .nextlevel {

    margin: 0px auto 44px;

}


#cstationbox #cs-conf .sexp {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    text-align: center;
    box-sizing: border-box;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px;

    box-sizing: border-box;


}


#cstationbox #cs-conf .sexp .sexp_box {
    display: block;
    position: relative;
    margin-right: 17px;
    margin-top: 26px;
    text-align: center;
    margin-left: 17px;
    height: 7px;
    box-sizing: border-box;

    margin-bottom: 15px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_sexp_barbckg_color) ;
}

#cstationbox #cs-conf .sexp .sexp_box .sexp-bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--hud_sexp_bar_color);
}

#cstationbox #cs-conf .sexp .sexp_box .sexp-value {
    position: absolute;

    bottom: 13px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_sexp_text_color);
}

#cstationbox #cs-conf .sexp .sexp_box .zbefore {
    display: block;

    position: absolute;

    bottom: 13px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_sexp_text_color);
    white-space: nowrap;
}



#cstationbox #cs-conf .csname .csname_value {
    font-size: 23px;
    color: white;
    padding: 10px 5px;
    /*font-family: var(--fontFaimly_header);*/
    text-transform: none;

    margin: 0px 64px 10px;
    background-color: rgba(255,255,255,0.1);
    cursor: text;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox #cs-conf .cofigvalue.csname .csname_value:hover {

}

#cstationbox #cs-conf .csdisassembly {
    display: block;
    position: relative;
    text-align: center;
    box-sizing: border-box;


}


#cstationbox #cs-conf .csrotation {
    display: block;
    position: relative;
    text-align: center;
    box-sizing: border-box;



}

#cstationrotbox {
    position: absolute;
    width: 600px;
    height: 170px;
    bottom: 180px;
    left: calc( 50% - 300px );
    z-index: 1;
}

#cstationrotbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);

    clip-path: var(--clip_csbox_cstationrotbox);
    z-index: -1;
}

#cstationrotbox .titler {
    color: gray;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    line-height: 45px;
    height: 45px;
}



#cstationrotbox .subhelptext {
    display: block;
    color: white;
    font-size: 12px;
    padding: 5px 10px;
}

#cstationrotbox .csrot {
    display: block;
    position: absolute;
    right: 20px;
    top: 45px;
    text-align: center;
    left: 20px;
    box-sizing: border-box;
}




#cstationrotbox .csrot .csrot_directions {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    box-sizing: border-box;
}

#cstationrotbox .csrot .csrot_directions .csrot_direction {
    display: inline-block;
    position: relative;


    margin: 0px 5px;


}


#cstationrotbox .csrot .csrot_inputs {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 405px;
    text-align: center;
    box-sizing: border-box;
}

#cstationrotbox .csrot .csrot_inputs .csrot_input_x,
#cstationrotbox .csrot .csrot_inputs .csrot_input_y,
#cstationrotbox .csrot .csrot_inputs .csrot_input_z {
    display: inline-block;
    position: relative;
    width: 95px;
    text-align: right;
    color: white;
    margin: 20px 3px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding-right: 85px;
}

#cstationrotbox .csrot .csrot_inputs .csrot_input_x input,
#cstationrotbox .csrot .csrot_inputs .csrot_input_y input,
#cstationrotbox .csrot .csrot_inputs .csrot_input_z input {
    position: absolute;
    width: 75px;
    right: 0px;
}


#cstationrotbox .image{
    position: absolute;
    right: 350px;
    bottom: 165px;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: -1;
}
#cstationrotbox .image .bckg{
    position: absolute;
    width: 90%;
    height: 90%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
}

#cstationbox #cs-conf .construction {
    display: block;
    position: relative;
    width: calc(100% - 30px);
    text-align: center;
    margin: 20px 0px 10px 0px;
    box-sizing: border-box;
}

#cstationbox #cs-conf .construction .construction_box {
    display: block;
    position: relative;
    margin-right: 17px;
    margin-top: 26px;
    text-align: center;
    margin-left: 17px;
    height: 7px;
    box-sizing: border-box;
    margin-bottom: 35px;
    background-color: var(--hud_construction_barbckg_color);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);

}

#cstationbox #cs-conf .construction .construction_box .construction-bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--hud_construction_bar_color);

}

#cstationbox #cs-conf .construction .construction_box .construction-value {
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;

    white-space: nowrap;
    color:  var(--hud_construction_text_color);

}

#cstationbox #cs-conf .construction .construction_box .construction_title  {
    display: block;
    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_construction_text_color);

    white-space: nowrap;
    text-transform: uppercase;

}


#cstationbox #cs-conf .zswitcher {
    position: relative;

    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;
}

#cstationbox #cs-conf .zswitcher .zswich{
    position: relative;
    display: inline-block;

    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#cstationbox #cs-conf .zswitcher .zswich:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#cstationbox #cs-conf .zswitcher .zswich.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#cstationbox #cs-conf .zswitcher .zswich.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

#cstationbox #cs-conf .stat {
    margin-bottom: 60px;
    width: calc(100% - 50px);
    left: 20px;
    position: relative;
}

#cstationbox #cs-conf .titler {
    color: gray;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    padding-top: 30px;
    min-height: 50px;
    padding-bottom: 26px;
}

#cstationbox #cs-conf .titler:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(100% - 15px);
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

#cstationbox #cs-conf .titler small {
    display: block;
    padding-top: 5px;
}

#cstationbox #cs-conf .html {

}

#cstationbox #cs-conf .html table.colonists-table,
#cstationbox #cs-conf .html table.production-table{
    color: white;
    width: 90%;
    margin: 0px auto;
    font-size: 14px;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationbox #cs-conf .html table.colonists-table td,
#cstationbox #cs-conf .html table.production-table td{
    padding: 3px 7px;
}

#cstationbox #cs-conf .html table.colonists-table th,
#cstationbox #cs-conf .html table.production-table th{
    padding: 3px 7px;
}


#cstationbox #cs-conf .html table.production-table th{
    color: gray;
}
#cstationbox #cs-conf .html table.production-table th.start,
#cstationbox #cs-conf .html table.production-table td.start{
    text-align: right;
}

#cstationbox #cs-conf .html table.production-table th.perc,
#cstationbox #cs-conf .html table.production-table td.perc{
    text-align: right;
}


#cstationbox #cs-conf .html table.production-table td.out{
    text-align: right;
}

#cstationbox #cs-conf .html table.production-table td.in{
    text-align: right;
}

#cstationbox #cs-conf .html table.production-table td.in table.items,
#cstationbox #cs-conf .html table.production-table td.out table.items{
    color: silver;
    width: 100%;
    margin: 0px;
    font-size: 12px;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationbox #cs-conf .html table.production-table td.in table.items th,
#cstationbox #cs-conf .html table.production-table td.out table.items th{

    width: 1%;

}

#cstationbox #cs-conf .html table.production-table  td.start {
    white-space: nowrap;
    font-size: 12px;
    text-align: right;
}


#cstationbox #cs-conf .html table.production-table .user-header td {
    font-size: 16px;
    padding: 15px 0px 10px;
    color: gray;
    text-transform: uppercase;
    text-align: left;

}



#cstationbox #cs-conf .html table.production-table .user-header td .uname {
    display: inline;
    color: white;
    font-size: 12px;

}

#cstationbox #cs-conf .html table.production-table .user-header td .ucname {
    padding: 0px 6px 0px 6px;
    color: white;
    display: inline;
    position: relative;
    margin: 0px 4px;
    color: silver;
    white-space: nowrap;
    font-size: 12px;
}

#cstationbox #cs-conf .html table.production-table .user-header td .ucname:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    color: silver;
}

#cstationbox #cs-conf .html table.production-table .user-header td .ucname:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    color: silver;
}


#cstationbox #cs-conf .html table.production-table .user-header td.totals {
    text-transform: none;
    text-align: right;
    color: gold;
    font-size: 16px;
}


#cstationbox #cs-conf .html table.colonists-table .race-header td {
    font-size: 16px;
    padding: 15px 0px 10px;
    color: gray;
    text-transform: uppercase;

}



#cstationbox #cs-conf .html table.colonists-table .ttes {
    text-align: center;
    padding: 0px;
    width: 1%;
}

#cstationbox #cs-conf .html table.colonists-table .sex {
    text-align: center;
}

#cstationbox #cs-conf .html table.colonists-table .age {
    text-align: center;
    padding: 0px;
    width: 1%;
}



#cstationbox #cs-conf .html table.colonists-table .qty {
    text-align: right;
    min-width: 30px;
    white-space: nowrap;
}



#cstationbox #cs-conf .stats {

}

#cstationbox #cs-conf .stats .uchar {
    display: block;
    position: relative;

    width: 100%;
    margin: 30px auto 0px;
}

#cstationbox #cs-conf .stats .uchar .userlink {
    display: block;
    position: relative;
    min-height: 40px;

}

#cstationbox #cs-conf .stats .uchar .userlink .colorbox {
    display: block;
    position: absolute;
    height: 12px;
    width: 12px;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);

    box-sizing: border-box;

}

#cstationbox #cs-conf .stats .uchar .userlink .cuname {
    display: block;
    text-align: left;
    position: absolute;
    left: 78px;
    top: 10px;
}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .uname {
    display: inline;
    color: white;

}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .cname {
    padding: 0px 6px 0px 6px;
    color: white;
    display: inline;
    position: relative;
    margin: 0px 4px;
    color: silver;
    white-space: nowrap;
}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .cname:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    color: silver;
}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .cname:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    color: silver;
}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .score .srel {
    color: gold;
    font-size: 16px;
    padding-right: 6px;
}

#cstationbox #cs-conf .stats .uchar .userlink .cuname .score .sabs {
    display: none;
}

#cstationbox #cs-conf .stats .uchar .userlink .actions {
    position: absolute;
    top: 0px;
    right: 0px;
}


#vacatebox{
    position:absolute;
    width: 460px;
    height: 460px;
    z-index:99999999;
}
#vacatebox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #215c71;
    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(31 35 55) 26%, rgba(0, 0, 0, 0) 148%);
}

#vacatebox .vacmtext{
    position:absolute;
    left: 16%;
    right: 16%;
    top: 95px;

    text-align: center;
    font-size: 18px;
    color: white;
}

#vacatebox .vactext{
    position:absolute;
    left: 16%;
    right: 16%;
    top: 180px;

    text-align: center;
    font-size: 14px;
    color: white;
}

#vacatebox .actions{
    position:absolute;
    left: 50px;
    right: 50px;
    bottom: 50px;
    text-align: center;
}

#cstationbox #cs-conf .stats .char {
    display: block;
    position: relative;

    width: 90%;

    margin: 50px auto 0px;
}


#cstationbox #cs-conf .stats .char .charbar {
    display: inline-block;
    height: 30px;
    position: relative;
    background-color: red;
}

#cstationbox #cs-conf .stats .char .charbar:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: -20px;
    left: 0px;
    bottom: 0px;
    border-left: 1px solid white;


}



#cstationbox .attack .value,
#cstationbox .broadcast .value,
#cstationbox .docking .value,
#cstationbox .recharging .value{
    display: block;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    text-align: center;
    border: 2px solid white;
    position: relative;
    margin: 0px;
    padding: 20px 15px 15px;
    width: auto;

}

#cstationbox .attack .value:before,
#cstationbox .broadcast .value:before,
#cstationbox .docking .value:before,
#cstationbox .recharging .value:before{
    content: '';
    position: absolute;
    height: 5px;
    width: 20px;
    bottom: 0px;
    left: calc( 50% - 10px );
    background-color: rgba(255,255,255,0.2);
}

#cstationbox .attack .value.active:before,
#cstationbox .broadcast .value.active:before,
#cstationbox .docking .value.active:before,
#cstationbox .recharging .value.active:before{
    content: '';
    position: absolute;
    height: 5px;
    width: 20px;
    bottom: 0px;
    left: calc( 50% - 10px );
    box-shadow: inset 0px 0px 25px rgba(255,255,255,1), 0px 0px 25px rgba(255,255,255,1);
    background: rgba(255,255,255,1);

    animation:highlited 1000ms linear infinite;
}



#cstationbox .attack .value span,
#cstationbox .broadcast .value span,
#cstationbox .docking .value span,
#cstationbox .recharging .value span{
    display: block;
    font-size: 13px;
    padding: 15px 5px;
    text-transform: none
}

#cstationbox .attack .value:not(.active):hover:before,
#cstationbox .broadcast .value:not(.active):hover:before,
#cstationbox .docking .value:not(.active):hover:before,
#cstationbox .recharging .value:not(.active):hover:before{
    background-color: rgba(255,255,255,0.3);
}

#cstationbox .attack .value:not(.active),
#cstationbox .broadcast .value:not(.active),
#cstationbox .docking .value:not(.active),
#cstationbox .recharging .value:not(.active){
    border: 2px solid rgba(255,255,255,0.3);
}


#cstationbox .attack .value:not(.active):hover,
#cstationbox .broadcast .value:not(.active):hover,
#cstationbox .docking .value:not(.active):hover,
#cstationbox .recharging .value:not(.active):hover
{
    border: 2px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}





#cstationbox .broadcast .value {
    display: block;
    width: calc(100% - 30px);
    min-height: 67px;
    margin: 0px auto 15px;
    float: none;
}
#cstationbox .deposit_withdraw button {
    margin: 0px 3px;
    min-width: 100px;
}

#cstationbox .configdiv {
    display: block;
    position: absolute;
    top: 70px;
    left: 0px;
    width: calc(100% - 20px);
    bottom: 0px;
}

#cstationbox .configdiv .sroller {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: max(50%, 50px);

}

#cstationbox .configdiv .cofigvalue {
    display: block;

    position: relative;
    width: auto;
    margin: 0px 15px;
    min-height: 200px;
}






#cstationbox .configdiv .cofigvalue.docking_enabled_zone,
#cstationbox .configdiv .cofigvalue.docking_enabled_ally,
#cstationbox .configdiv .cofigvalue.docking_enabled_neutral {
    display: block;
    float: left;
    position: relative;
    width: calc(33.3% - 30px);
    margin: 0px 15px;
    height: 230px;
}

#cstationbox .configdiv .cofigvalue.csname {
    display: block;
    clear: both;
    float: none;
    position: relative;
    width: auto;
    margin: 0px 15px;
    height: unset;
}

#cstationbox .cofigvalue .input{
    color: rgba(255,255,255,.6);
    padding: 0px 0px 15px calc(50% - 40px);
    height: 38px;
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
}

#cstationbox .cofigvalue .input input
{
    width: 65px;
    margin: 5px 5px;
    text-align: center;
}

#cstationbox .cofigvalue .input.range{
    color: rgba(255, 255, 255, .6);
    padding: 0px 20px 25px;
    height: 38px;
    text-align: center;
    font-size: 15px;
    margin: 0px 0px;
    white-space: break-spaces;

}

#cstationbox .cofigvalue .input.range input
{
    width: 100%;
    margin: 0px 0px 15px;
    text-align: center;
}

#cstationbox .supval {
    display: block;
    color: white;
    font-size: 13px;
    padding: 0px 20px 25px;
}

#cstationbox .subhelptext {
    display: block;
    color: #ffffff8f;
    font-size: 14px;
    padding: 0px 20px 25px;
}

#cstationbox .subhelptext ul {
    display: block;
    text-align: left;
    width: 50%;
    min-width: 180px;
    margin: 2px auto;
}

#cstationbox .subhelptext ul li {
    padding: 1px 0px 1px 0px;
}

#cstationbox .csdissasembly_actions button.grayed {
    margin: 0px 10px;
}



#cstationbox .resources {
    margin: 0px 20% 30px;
}
#cstationbox .resources table {
    font-size: 10px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

#cstationbox .resources table td {
    padding: 0px 3px;
    text-align: right;
}
#cstationbox .resources table td.nadpis {
    text-align: left;
    padding-bottom: 5px;
    font-size: 13px ;
}


#showwindowdownloadsignal{
    position: absolute;
    width: 450px;
    min-height: 100px;
    z-index: 999999999;
    top: calc(50% - 240px);
    left: calc(50% - 300px);
    animation: text-shadowing-white-small 500ms ease-out forwards,windowshow 100ms linear 2 alternate;
    color: white;
}

#showwindowdownloadsignal:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 5px;
    top: 0px;
    background-color: rgb(26 26 44);

    clip-path: var(--clip_cstation_buybox);
    z-index: -1;
}

#showwindowdownloadsignal .content{
    position: relative;
    margin: 70px 0px 0px;
    padding: 0px 20px 20px;
}

#showwindowdownloadsignal .content .htmltext{
    display: block;
    position: relative;
    padding: 20px 20px 10px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 15px;
}

#showwindowdownloadsignal .content .qty{
    display: block;
    position: relative;
    margin: 20px 20px 10px;
    text-align: center;

}

#showwindowdownloadsignal .content .qty input{
    width: 55px;
}

#showwindowdownloadsignal .content .actions{
    display: block;
    position: relative;
    margin: 30px 0px 40px;
    text-align: center;
    box-sizing: content-box;
}

#showwindowdownloadsignal .content .actions .button .thint{
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 5px);
}

#cstationsellBox,
#cstationbuyBox,
#cstationctBox,

#cstationadtBox{
    position: absolute;
    width: 990px;
    height: 730px;
    z-index: 999999999;
    top: calc(50% - 240px);
    left: calc(50% - 300px);

    color: white;
}



#cstationsellBox:before,
#cstationbuyBox:before,
#cstationctBox:before,

#cstationadtBox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 5px;
    top: 0px;
    background-color: rgb(26 26 44);

    clip-path: var(--clip_cstation_buybox);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(rgb(48 78 117) 0%, rgb(20 27 45) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}



#cstationsellBox #bcstation,
#cstationbuyBox #bcstation,
#cstationctBox #bcstation,

#cstationadtBox #bcstation {
    position:absolute;
    top:1px;
    left:1px;
    right:1px;
    bottom:6px;

    clip-path: var(--clip_cstation_buybox);
    z-index: -1;
}


#cstationsellBox #bcstation .actions .info,
#cstationbuyBox #bcstation .actions .info,
#cstationctBox #bcstation .actions .info,

#cstationadtBox #bcstation .actions .info {
    display: block;
    margin: 0px;
    text-transform: none;
    text-align: center;
    color: rgb(255 255 255 / 50%);
    line-height: 18px;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);

}



#cstationsellBox #bcstation .info,
#cstationbuyBox #bcstation .info,
#cstationctBox #bcstation .info,

#cstationadtBox #bcstation .info {
    display: block;
    margin: 30% 10%;
    text-align: center;
    color: rgb(255,255,255);
    line-height: 18px;
    font-size: 12px;
    text-transform: uppercase;
}

#cstationsellBox #bcstation .error,
#cstationbuyBox #bcstation .error,
#cstationctBox #bcstation .error,

#cstationadtBox #bcstation .error {
    display: block;
    margin: 30% 10%;
    text-align: center;
    color: rgb(255,255,255);
    line-height: 18px;
    font-size: 12px;
}

#cstationsellBox #bcstation .error strong,
#cstationbuyBox #bcstation .error strong,
#cstationctBox #bcstation .error strong,

#cstationadtBox #bcstation .error strong {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 24px;
}



#cstationsellBox #bcstation .tradeseller,
#cstationbuyBox #bcstation .tradeseller,
#cstationctBox #bcstation .tradeseller,
#cstationadtBox #bcstation .tradeseller {
    position: relative;
    margin: 5px auto 5px;
    width: 350px;


}

#cstationsellBox #bcstation .tradesite,
#cstationbuyBox #bcstation .tradesite,
#cstationctBox #bcstation .tradesite,
#cstationadtBox #bcstation .tradesite {
    position: relative;
    margin: 5px auto 5px;
    width: 350px;
    height: unset;
}

#cstationsellBox #bcstation .html,
#cstationbuyBox #bcstation .html,
#cstationctBox #bcstation .html,
#cstationadtBox #bcstation .html {
    margin: 5px 15px;
}

#cstationbuyBox #bcstation .trip {
    position: relative;
    height: 40px;
    color: #cbcbcb;
    font-size: 12px;
    line-height: 12px;
    width: 205px;
    margin: 10px auto;
}


#cstationbuyBox #bcstation .trip .distance {
    position: absolute;
    top: 0px;
    right: 30px;
    white-space: nowrap;
}
#cstationbuyBox #bcstation .trip .prop_duration {
    position: absolute;
    top: 14px;
    right: 30px;
    white-space: nowrap;
}
#cstationbuyBox #bcstation .trip .warp_duration {
    position: absolute;
    top: 29px;
    right: 30px;
    white-space: nowrap;
}
#cstationbuyBox #bcstation .trip .flyto  {
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    color: rgba(0,0,0,1);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    width: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    background-image: url(ico/controls_arrive.png);
    padding: 0px;
    z-index: 1;
}

#cstationbuyBox #bcstation .trip .flyto:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#cstationbuyBox #bcstation .trip .flyto:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#cstationbuyBox #bcstation .trip .flyto:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationsellBox #bcstation .user,
#cstationbuyBox #bcstation .user,
#cstationctBox #bcstation .user,

#cstationadtBox #bcstation .user,
#bluepages .content .offer .user,
.desktopContextMenu .user{
    position: relative;
    min-height: 60px;
    padding: 5px 0px 0px 65px;
}

#cstationsellBox #bcstation .user.empty,
#cstationbuyBox #bcstation .user.empty,
#cstationctBox #bcstation .user.empty,

#cstationadtBox #bcstation .user.empty,
#bluepages .content .offer .user.empty,
.desktopContextMenu .user.empty{
    position: relative;
    min-height: 0px;
    padding: 0px;
}

#cstationsellBox #bcstation .user .uimgd,
#cstationbuyBox #bcstation .user .uimgd,
#cstationctBox #bcstation .user .uimgd,

#cstationadtBox #bcstation .user .uimgd,
#bluepages .content .offer .user .uimgd,
.desktopContextMenu .user .uimgd{
    position:absolute;
    width:50px;
    height: 50px;
    top: 7px;
    left: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

#cstationsellBox #bcstation .user .uimgd:before,
#cstationbuyBox #bcstation .user .uimgd:before,
#cstationctBox #bcstation .user .uimgd:before,

#cstationadtBox #bcstation .user .uimgd:before,
#bluepages .content .offer .user .uimgd:before{
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;

    background-color: rgb(150,150,200);
}



#cstationsellBox #bcstation .user .uimgd .uimg,
#cstationbuyBox #bcstation .user .uimgd .uimg,
#cstationctBox #bcstation .user .uimgd .uimg,

#cstationadtBox #bcstation .user .uimgd .uimg,
#bluepages .content .offer .user .uimgd .uimg,
.desktopContextMenu .user .uimgd .uimg{
    position:absolute;

    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;



    background-size: contain;
    background-position: center;


}

#cstationsellBox #bcstation .user .ucname,
#cstationbuyBox #bcstation .user .ucname,
#cstationctBox #bcstation .user .ucname,

#cstationadtBox #bcstation .user .ucname,
#bluepages .content .offer .user .ucname,
.desktopContextMenu .user .ucname{
    color: rgb(100,100,100);
    font-size: 12px;
    padding-bottom: 2px;
    display: block;
    text-align: left;
    padding-right: 32px;
}
#cstationsellBox #bcstation .user .uname,
#cstationbuyBox #bcstation .user .uname,
#cstationctBox #bcstation .user .uname,

#cstationadtBox #bcstation .user .uname,
#bluepages .content .offer .user .uname,
.desktopContextMenu .user .uname{
    color: rgb(150,150,150);
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    text-align: left;
    padding-right: 32px;
}

#cstationsellBox #bcstation .user .lactivity,
#cstationbuyBox #bcstation .user .lactivity,
#cstationctBox #bcstation .user .lactivity,

#cstationadtBox #bcstation .user .lactivity,
#bluepages .content .offer .user .lactivity,
.desktopContextMenu .user .lactivity {
    color: rgb(150,150,150);
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    padding: 3px 0px;
    line-height: 15px;
}
#cstationsellBox #bcstation .user .lactivity .premlink,
#cstationbuyBox #bcstation .user .lactivity .premlink,
#cstationctBox #bcstation .user .lactivity .premlink,

#cstationadtBox #bcstation .user .lactivity .premlink,
#bluepages .content .offer .user .lactivity .premlink,
.desktopContextMenu .user .lactivity .premlink {
    color: #ffbc00;
    cursor: pointer;
}
#cstationsellBox #bcstation .user .lactivity .premlink:hover,
#cstationbuyBox #bcstation .user .lactivity .premlink:hover,
#cstationctBox #bcstation .user .lactivity .premlink:hover,

#cstationadtBox #bcstation .user .lactivity .premlink:hover,
#bluepages .content .offer .user .lactivity .premlink:hover,
.desktopContextMenu .user .lactivity .premlink:hover {
    animation: blink 100ms linear 2;
}


/**/
.guser {
    display: inline-block;
    position: relative;
    min-height: 60px;
    padding: 5px 10px 0px 75px;
}

.guser .empty{
    position: relative;
    min-height: 0px;
    padding: 0px;
}

.guser .userlink{
    cursor: pointer;
    text-align: left;
}

.guser .userlink:hover{
    animation: blink 100ms linear 2 alternate;
}

.guser .uimgd{
    position: absolute;
    width: 64px;
    height: 64px;
    top: 3px;
    left: 5px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #ffffff2b;
}

.guser .uimgd .uimg{
    position:absolute;
    top:2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 106%;
}

.guser .ucname{
    color: #b3b3b3;
    font-size: 13px;
    display: block;
    text-align: left;
    line-height: 17px;
}

.guser .uname{
    color: rgb(150,150,150);
    font-size: 13px;
    text-transform: uppercase;
    display: block;
    text-align: left;
    line-height: 16px;
}

.guser .ubdadmin{
    color: #3ac98f;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    text-align: left;
    line-height: 16px;
    background-color: #1b263d;
    padding: 1px 6px;
    border-radius: 2px;
    margin: 2px 4px 2px 0px;

}

.guser .ubdismy{
    color: rgb(100,255,255);
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    text-align: left;
    line-height: 16px;
    background-color: #1b263d;
    padding: 1px 6px;
    border-radius: 2px;
    margin: 2px 4px 2px 0px;

}


.guser .ubdzone{
    color: #2b2a2a;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    text-align: left;
    line-height: 16px;
    background-color: gray;
    padding: 1px 6px;
    border-radius: 2px;
    margin: 2px 4px 2px 0px;

}

.guser .ubdzone.rel3{
    color: #b76715;
    background-color: #2b2a2a;
}

.guser .ubdzone.rel2{
    color: #b76715;
    background-color: #2b2a2a;
}

.guser .ubdzone.rel1{
    color: #476f62;
    background-color: #2b2a2a;
}

.guser .ubdzone.rel0{
    color: #476f62;
    background-color: #2b2a2a;
}
.guser .lactivity {
    color: rgb(207 206 206);
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    padding: 3px 6px;
    line-height: 15px;
    background-color: #1b263d;
    margin: 5px 0px;
    border-radius: 4px;
    text-align: center;
}
.guser .lactivity .premlink {
    color: #ffbc00;
    cursor: pointer;
}
.guser .lactivity .premlink:hover,

.guser .lactivity .premlink:hover {
    animation: blink 100ms linear 2;
}


/**/

#cstationsellBox #bcstation .user .ula,
#cstationbuyBox #bcstation .user .ula,
#cstationctBox #bcstation .user .ula,

#cstationadtBox #bcstation .user .ula,
#bluepages .content .offer .user .ula,
.desktopContextMenu .user .ula{
    color: rgb(150,150,150);
    font-size: 10px;
    display: block;
    text-transform: uppercase;
    text-align: left;
}

#cstationsellBox #bcstation .img,
#cstationbuyBox #bcstation .img,
#cstationctBox #bcstation .img,
#cstationadtBox #bcstation .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: right 50% top 21%;
    background-size: 28%;
    background-repeat: no-repeat;

}

#cstationsellBox #bcstation .img:after,
#cstationbuyBox #bcstation .img:after,
#cstationctBox #bcstation .img:after,
#cstationadtBox #bcstation .img:after {
    content: "";
    position: absolute;
    display: block;
    left: -40px;
    right: -40px;
    bottom: -40px;
    top: -40px;
    background-size: cover;
    background-image: linear-gradient(rgb(27 47 75 / 91%) 0%, rgb(21 25 37 / 80%) 100%);
    background-position: -10px 0px;
}

#cstationctBox.own #bcstation .img:after {
    background-image: linear-gradient(rgb(30 55 59 / 51%) 0%, rgb(13 26 25) 100%);
}

#cstationsellBox #bcstation .name,
#cstationbuyBox #bcstation .name,
#cstationctBox #bcstation .name,
#cstationadtBox #bcstation .name {
    position: absolute;
    left: 10px;
    top: 72px;
    right: 10px;
    text-align: center;
    line-height: 44px;
    font-size: 38px;
    color: #afc2ed;
    text-transform: uppercase;
    transform: translateY(-50%);

}

#cstationadtBox #bcstation .name {
    position: absolute;
    left: 10px;
    top: 112px;
    right: 10px;
    text-align: center;
    font-size: 38px;
    color: #afc2ed;
    text-transform: uppercase;
    transform: translateY(-50%);

}


#cstationadtBox #bcstation .descript {
    position: absolute;
    left: 15%;
    top: 205px;
    width: 70%;
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 13px;
    line-height: 21px;
    text-align: center;

}



#cstationctBox #bcstation .pricehistory,
#cstationbuyBox #bcstation .pricehistory,
#cstationsellBox #bcstation .pricehistory,
#itembox .pricehistory{
    position: absolute;
    bottom: 176px;
    left: 20px;
    right: 15px;
    text-align: center;
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 12px;

    clip-path: var(--clip_clipbox_corners_small);
    background-size: cover;
    background-image: url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}

#cstationctBox #bcstation .pricehistory canvas,
#cstationbuyBox #bcstation .pricehistory canvas,
#cstationsellBox #bcstation .pricehistory canvas,
#itembox .pricehistory canvas{
    animation:blink 100ms linear 2 alternate;
}

#cstationctBox #bcstation .pricehistory .enlarge,
#cstationbuyBox #bcstation .pricehistory .enlarge,
#cstationsellBox #bcstation .pricehistory .enlarge,
#itembox .pricehistory .enlarge {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 5px;
    right: 5px;
    opacity: 1;
    z-index: 10;
    background: url(ico/ico_maximize.png) center no-repeat;
    background-size: 12px;
}


#cstationsellBox #bcstation .tradeleft,
#cstationbuyBox #bcstation .tradeleft,
#cstationctBox #bcstation .tradeleft,
#cstationadtBox #bcstation .tradeleft {
    position: absolute;
    left: 20px;
    top: 245px;
    width: calc(50% - 40px);
    font-size: 12px;
    transform: translateY(-50%);
    text-align: left;
    z-index: 10;
}

#cstationsellBox #bcstation .traderight,
#cstationbuyBox #bcstation .traderight,
#cstationctBox #bcstation .traderight,
#cstationadtBox #bcstation .traderight {
    position: absolute;
    right: 20px;
    top: 245px;
    width: calc(50% - 40px);
    font-size: 12px;
    transform: translateY(-50%);
    text-align: left;
    z-index: 10;
}


#cstationctBox #bcstation .traderight .trade_advertisement {
    margin: 30px 0px;
    text-align: center;
}

#cstationsellBox #bcstation .buyqty,
#cstationbuyBox #bcstation .buyqty,
#cstationctBox #bcstation .buyqty,
#cstationadtBox #bcstation .buyqty {
    position: relative;

    font-size: 12px;

    text-align: right;
}

#cstationsellBox #bcstation .buyqty #buyqtyinput,
#cstationbuyBox #bcstation .buyqty #buyqtyinput,
#cstationctBox #bcstation .buyqty #buyqtyinput,
#cstationadtBox #bcstation .buyqty #buyqtyinput {

    width: 240px;
    font-size: 20px;
    height: 40px;
    margin: 0px auto;
    display: block;
    line-height: 40px;

}

#cstationsellBox #bcstation .buyqty .minqtyinfo,
#cstationbuyBox #bcstation .buyqty .minqtyinfo,
#cstationctBox #bcstation .buyqty .minqtyinfo,
#cstationadtBox #bcstation .buyqty .minqtyinfo {

    display: block;
    text-align: center;
    padding: 6px 0px;
    font-size: 13px;
    color: #d9d3d3;
}

#cstationsellBox #bcstation #unusable,
#cstationbuyBox #bcstation #unusable,
#cstationctBox #bcstation #unusable,
#cstationadtBox #bcstation #unusable {
    display: block;
    text-align: center;
    margin: 3px;
}

#cstationsellBox #bcstation #unusable .html,
#cstationbuyBox #bcstation #unusable .html,
#cstationctBox #bcstation #unusable .html,
#cstationadtBox #bcstation #unusable .html {
    display: inline-block;
    text-align: center;
    padding: 1px 6px;
    font-size: 13px;
    color: var(--hud_invalid_text);
    background-color: var(--hud_invalid_background);
}


#cstationsellBox #bcstation table.tradeinfos,
#cstationbuyBox #bcstation table.tradeinfos,
#cstationctBox #bcstation table.tradeinfos,
#cstationadtBox #bcstation table.tradeinfos {
    position: relative;
    width: 100%;
    border-spacing: 0px 5px;
    border-collapse: separate;
    font-size: 12px;
    margin: 0px 0px 15px;
}



#cstationsellBox #bcstation table.tradeinfos td,
#cstationbuyBox #bcstation table.tradeinfos td,
#cstationctBox #bcstation table.tradeinfos td,

#cstationadtBox #bcstation table.tradeinfos td {
    text-align: left;
    text-transform: none;
    padding: 0px;
    padding-left: 10px;
    font-size: 16px;
    color: var(--hud_tablevaluecolor);
    height: 30px;
    vertical-align: top;

    position: relative;
}

#cstationsellBox #bcstation table.tradeinfos td.mu {
    text-align: left;
    width: 33%;
    vertical-align: middle;
}

#cstationsellBox #bcstation table.tradeinfos td.mu span.redinfo {
    font-size: 13px;
    color: var(--hud_invalid_color);
    font-family: var(--fontFaimly_button);
    line-height: 15px;
    display: inline-block;
}

#cstationsellBox #bcstation table.tradeinfos td.inputf {
    vertical-align: middle;
}

#cstationsellBox #bcstation table.tradeinfos td .smallinfo,
#cstationbuyBox #bcstation table.tradeinfos td .smallinfo,
#cstationctBox #bcstation table.tradeinfos td .smallinfo,
#cstationadtBox #bcstation table.tradeinfos td .smallinfo {
    text-transform: none;

    color: #b3b3b3;
    font-size: 13px;
    display: block;
}

#cstationsellBox #bcstation table.tradeinfos th,
#cstationbuyBox #bcstation table.tradeinfos th,
#cstationctBox #bcstation table.tradeinfos th,
#cstationadtBox #bcstation table.tradeinfos th {
    /*width: 50%;*/
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    vertical-align: top;
    line-height: 13px;
    color: var(--hud_popiseck_gray_color);

}

#cstationsellBox #bcstation table.tradeinfos tr.unit_price th,
#cstationbuyBox #bcstation table.tradeinfos tr.unit_price th,
#cstationctBox #bcstation table.tradeinfos tr.unit_price th,
#cstationsellBox #bcstation table.tradeinfos tr.unit_price td,
#cstationbuyBox #bcstation table.tradeinfos tr.unit_price td,
#cstationctBox #bcstation table.tradeinfos tr.unit_price td,
#cstationadtBox #bcstation table.tradeinfos tr.unit_price th,
#cstationadtBox #bcstation table.tradeinfos tr.unit_price td{
    /*c/olor: gray;*/
}

#cstationsellBox #bcstation table.tradeinfos tr.seller_fee th,
#cstationbuyBox #bcstation table.tradeinfos tr.seller_fee th,
#cstationctBox #bcstation table.tradeinfos tr.seller_fee th,
#cstationsellBox #bcstation table.tradeinfos tr.seller_fee td,
#cstationbuyBox #bcstation table.tradeinfos tr.seller_fee td,
#cstationctBox #bcstation table.tradeinfos tr.seller_fee td,
#cstationadtBox #bcstation table.tradeinfos tr.seller_fee th,
#cstationadtBox #bcstation table.tradeinfos tr.seller_fee td{
    /*color: gray;*/
}

#cstationsellBox #bcstation table.tradeinfos tr.buyer_fee th,
#cstationbuyBox #bcstation table.tradeinfos tr.buyer_fee th,
#cstationctBox #bcstation table.tradeinfos tr.buyer_fee th,
#cstationsellBox #bcstation table.tradeinfos tr.buyer_fee td,
#cstationbuyBox #bcstation table.tradeinfos tr.buyer_fee td,
#cstationctBox #bcstation table.tradeinfos tr.buyer_fee td,
#cstationadtBox #bcstation table.tradeinfos tr.buyer_fee th,
#cstationadtBox #bcstation table.tradeinfos tr.buyer_fee td{
    /*color: gray;*/
}


#cstationsellBox #bcstation table.tradeinfos tr.offer_price th,
#cstationsellBox #bcstation table.tradeinfos tr.offer_qty th,
#cstationsellBox #bcstation table.tradeinfos tr.offer_price td,
#cstationsellBox #bcstation table.tradeinfos tr.offer_qty td {
    height: 40px;
}


#cstationctBox #bcstation table.tradeinfos tr.trade_size th,
#cstationctBox #bcstation table.tradeinfos tr.trade_size td,
#cstationctBox #bcstation table.tradeinfos tr.trade_price th,
#cstationctBox #bcstation table.tradeinfos tr.trade_price td,
#cstationadtBox #bcstation table.tradeinfos tr.trade_price th,
#cstationadtBox #bcstation table.tradeinfos tr.trade_price td,
#cstationadtBox #bcstation table.tradeinfos tr.trade_size th,
#cstationadtBox #bcstation table.tradeinfos tr.trade_size td  {
    height: 30px;
}

#cstationsellBox #bcstation table.tradeinfos tr.offer_price td input,
#cstationsellBox #bcstation table.tradeinfos tr.offer_qty td input,
#cstationsellBox #bcstation table.tradeinfos tr.offer_min_qty td input{
    width: 120px;
    margin: 0px;
}

#cstationsellBox #bcstation .promoted_as,
#cstationbuyBox #bcstation .promoted_as,
#cstationctBox #bcstation .promoted_as,

#cstationadtBox #bcstation .promoted_as {
    position: absolute;
    left: 50%;
    top: 45px;
    width: auto;
    transform: translateX(-50%) translateY(-50%);
    color: rgba(255,255,255,1);
    font-size: 12px;
    text-align: center;
    background-color: white;
    color: black;
    font-family: var(--fontFaimly_button);
    padding: 2px 8px;
    ;
    animation: highlited 1000ms linear infinite;
}


#cstationsellBox #bcstation .actions,
#cstationbuyBox #bcstation .actions,
#cstationctBox #bcstation .actions,
#cstationadtBox #bcstation .actions {
    position: absolute;
    left: 20px;
    bottom: 16px;
    right: 15px;
    border-spacing: 0px;
    border-collapse: separate;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(427px, 1fr));
    grid-gap: 10px;
}




#cstationadtBox #bcstation .actions .cancel_ad,
#cstationadtBox #bcstation .actions .ad0,
#cstationadtBox #bcstation .actions .ad1,
#cstationadtBox #bcstation .actions .ad2,
#cstationadtBox #bcstation .actions .ad3 {
    position: relative;
    height: 160px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-position: 17px 25px;
    background-repeat: no-repeat;
    background-size: 30px;
}

#cstationadtBox #bcstation .actions .ad0{
    background-image: url(ico/ico_ad_none-64.png);
}
#cstationadtBox #bcstation .actions .ad1{
    background-image: url(ico/ico_ad_line-64.png);
}
#cstationadtBox #bcstation .actions .ad2{
    background-image: url(ico/ico_ad_box-64.png);
}
#cstationadtBox #bcstation .actions .ad3{
    background-image: url(ico/ico_ad_bigbox-64.png);
}

#cstationadtBox #bcstation .actions .oinfo {
    position: absolute;
    top: 37px;
    left: 75px;
    right: 140px;
    font-size: 13px;
}

#cstationadtBox #bcstation .actions .price {
    position: absolute;
    top: 62px;
    right: 5px;
    width: 120px;
    text-align: center;
    font-size: 16px;
}

#cstationadtBox #bcstation .actions .cancel_to_ship {
    position: relative;
    height: 110px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#cstationadtBox #bcstation .actions .optionlabel{
    position: absolute;
    top: 10px;
    left: 75px;

    font-size: 16px;


}

#cstationadtBox #bcstation .actions button {
    position: absolute;
    right: 5px;
    width: 120px;
    top: 20px;
}


#cstationsellBox #bcstation .actions .buy_to_ship,
#cstationbuyBox #bcstation .actions .buy_to_ship,
#cstationsellBox #bcstation .actions .buy_to_warehouse,
#cstationbuyBox #bcstation .actions .buy_to_warehouse,
#cstationctBox #bcstation .actions .cancel_to_ship,
#cstationctBox #bcstation .actions .cancel_to_warehouse,
#cstationsellBox #bcstation .actions .offer_to_station,
#cstationbuyBox #bcstation .actions .offer_to_station,
#cstationctBox #bcstation .actions .cancel_to_station{
    position: relative;
    height: 150px;
    background-color: #10131e;
    clip-path: var(--clip_clipbox_lb);
    padding: 2px 8px;
    box-sizing: border-box;
}

#cstationsellBox #bcstation .actions .buy_to_warehouse,
#cstationbuyBox #bcstation .actions .buy_to_warehouse,
#cstationctBox #bcstation .actions .cancel_to_warehouse {
    clip-path: var(--clip_clipbox_rb);
}

#cstationsellBox #bcstation .actions .offer_to_station {
    grid-column: 1 / -1;
}

#cstationctBox #bcstation .actions .trade_advertisement {
    position: relative;
    height: 80px;

}


#cstationsellBox #bcstation .actions .optionlabel,
#cstationbuyBox #bcstation .actions .optionlabel,
#cstationctBox #bcstation .actions .optionlabel {
    text-align: center;
    font-size: 17px;
    padding: 13px 10px 12px 10px;
    font-family: var(--fontFaimly_header);
    color: #afc2ed;

}






#cstationsellBox #bcstation table.actions .buy_to_warehouse th,
#cstationbuyBox #bcstation table.actions .buy_to_warehouse th,
#cstationctBox #bcstation table.actions .buy_to_warehouse th,

#cstationctBox #bcstation table.actions .cancel_to_warehouse th {
    border-bottom: none;
}



#cstationsellBox #bcstation .actions .buytable,
#cstationbuyBox #bcstation .actions .buytable,
#cstationctBox #bcstation .actions .buytable,

#cstationsellBox #bcstation .actions .selltable,
#cstationbuyBox #bcstation .actions .selltable,
#cstationctBox #bcstation .actions .selltable,

#cstationctBox #bcstation .actions .canceltable {
    width: calc(100% - 220px);

}

#cstationsellBox #bcstation .actions .selltable  {
    width: 100%;

}
#cstationsellBox #bcstation .actions .selltable th {
    width: 35%;
    min-width: 150px;
}

#cstationsellBox #bcstation .actions .selltable .price_totalbuyerpay small {
    color: gray;
}


#cstationsellBox #bcstation .actions .buytable .storage_space td,
#cstationbuyBox #bcstation .actions .buytable .storage_space td,
#cstationctBox #bcstation .actions .buytable .storage_space td,

#cstationsellBox #bcstation .actions .buytable .trade_price td,
#cstationbuyBox #bcstation .actions .buytable .trade_price td,
#cstationctBox #bcstation .actions .buytable .trade_price td,

#cstationsellBox #bcstation .actions .buytable .price_buyerfee td,
#cstationbuyBox #bcstation .actions .buytable .price_buyerfee td,
#cstationctBox #bcstation .actions .buytable .price_buyerfee td {
    white-space: nowrap;
}

#cstationsellBox #bcstation .actions   th,
#cstationbuyBox #bcstation .actions  th,
#cstationctBox #bcstation .actions  th {
    width: 150px;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    vertical-align: top;
    line-height: 13px;
    color: var(--hud_popiseck_gray_color);
}

#cstationsellBox #bcstation .actions  td,
#cstationbuyBox #bcstation .actions   td,
#cstationctBox #bcstation .actions  td {
    text-align: left;
    text-transform: none;
    padding: 0px;
    padding-left: 10px;
    font-size: 16px;
    color: var(--hud_tablevaluecolor);
    height: 30px;
    vertical-align: top;
    position: relative;
    white-space: nowrap;
}








#cstationsellBox #bcstation .actions button,
#cstationbuyBox #bcstation .actions button,
#cstationctBox #bcstation .actions button {
    position: absolute;
    right: 14px;

    top: 53px;

}

#cstationsellBox #bcstation .actions button {
    position: absolute;
    right: 6%;

}


#cstationsellBox #bcstation .actions button .underbutton_price,
#cstationbuyBox #bcstation .actions button .underbutton_price,
#cstationctBox #bcstation .actions button .underbutton_price {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 35px;
    color: white;

}

#cstationsellBox #bcstation .actions button .underbutton_price .format-exc,
#cstationbuyBox #bcstation .actions button .underbutton_price .format-exc,
#cstationctBox #bcstation .actions button .underbutton_price .format-exc {
    font-size: 16px;
    font-family: var(--fontFaimly_text);

    white-space: nowrap;
}

#cstationsellBox #bcstation .actions button .underbutton_cost,
#cstationbuyBox #bcstation .actions button .underbutton_cost,
#cstationctBox #bcstation .actions button .underbutton_cost {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 57px;
    color: gray;
    font-size: 13px;
    text-transform: none;
    white-space: nowrap;
    font-family: var(--fontFaimly_default);
}


#cstationctBox #bcstation .actions .trade_advertisement button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 35px;
}



#cstationsellBox #bcstation .actions button .thint,
#cstationbuyBox #bcstation .actions button .thint,
#cstationctBox #bcstation .actions button .thint  {

    left: calc(50% - 30px);
    text-align: center;
    bottom: 40px;
    top: unset;
    right: unset;

}

#cstationsellBox #bcstation .actions button .thint:before,
#cstationbuyBox #bcstation .actions button .thint:before,
#cstationctBox #bcstation .actions button .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}

#cstationConstructionBox{
    position:absolute;
    width: 730px;
    height: 760px;
    z-index: 999999999;
    animation: windowshow 100ms linear 2 alternate;
}

#cstationConstructionBox:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(31 51 79);
    background-image: linear-gradient(328deg, rgb(19 27 30) 0%, rgb(48 71 99 / 91%) 100%);
    clip-path: var(--clip_window_construction);
    z-index: -1;
}





#cstationConstructionBox .image{
    position: absolute;
    top: 45px;
    left: 45px;
    width: 100px;
    height: 100px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;



}

#cstationConstructionBox .image:before {
    content: '';
    display: block;
    position: absolute;
    left: -12px;
    right: -12px;
    top: -12px;
    bottom: -12px;
    box-shadow: 0px 0px 15px #3b466f inset;
    z-index: -1;
    filter: brightness(2);
}

#cstationConstructionBox .image:after {
    content: '';
    display: block;
    position: absolute;
    left: -16px;
    right: -16px;
    top: -16px;
    bottom: -16px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px),  calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
    filter: brightness(2);
}


#cstationConstructionBox .info{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    text-align: center;
    padding: 80px 0px;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    border: none;
}

#cstationConstructionBox table{
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
#cstationConstructionBox table td{
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    text-transform: uppercase;
    line-height: 12px;

    padding-left: 10px;
    text-align: left;
}


#cstationConstructionBox .name {
    text-align: left;
    font-size: 39px;
    text-transform: uppercase;
    position: absolute;
    top: 40px;
    left: 180px;
    right: 0px;
    color: white;
}

#cstationConstructionBox .totalprice{
    position: absolute;
    top: 93px;
    left: 180px;
    right: 10px;
    text-align: left;
    font-size: 24px;
    color: white;

}

#cstationConstructionBox .price input {
    width: 100px;
    text-align: center;
}

#cstationConstructionBox .qty {
    text-align: right;
    vertical-align: top;
    position: absolute;
    top: 145px;
    left: 180px;
    right: calc(50% + 5px);
}

#cstationConstructionBox .qty input{
    text-align: right;
    width: 150px;
}
#cstationConstructionBox .actions{
    text-align: left;
    position: absolute;
    top: 145px;
    left: calc(50% + 5px);
    right: 10px;
}


#cstationConstructionBox .actions .info{

    padding: 0px 0px;
    height: 30px;
    text-align: left;
    position: absolute;
    width: 200px;

    top: 0px;
    z-index: 100;
    font-size: 14px;
}

#cstationConstructionBox .actions .thint{
    right: unset;
    bottom: unset;
    top: 2px;
    left: -60px;
}



#cstationConstructionBox .slots_needed,
#cstationRefineBox .slots_needed{
    display: none;
    position: absolute;
    top: 200px;
    left: 30px;
    right: 30px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-top: 5px;
}




#cstationConstructionBox .slots_needed:before,
#cstationRefineBox .slots_needed:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline_right);
}

#cstationConstructionBox .slots_needed_table,
#cstationRefineBox .slots_needed_table{
    color: var(--hud_tablecolor);
    width: 100%;
}



#cstationConstructionBox .slots_needed_table td,
#cstationRefineBox .slots_needed_table td{
    text-align: center;
    margin: 0px;
    padding: 5px 0px 0px;
}



.construction_slot {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0px 5px;
    box-sizing: border-box;
}

.construction_slot.free {
    border: 2px solid white;

}

.construction_slot.occupyed {

}

.construction_slot.free:before {
    display: block;
    position: absolute;
    content: 'READY';
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    text-align: center;
    color: black;
    font-family: var(--fontFaimly_header);
    font-size: 20px;
    line-height: 50px;
    background-color: white;
    box-sizing: border-box;

}

.construction_slot.occupyed:before {
    display: block;
    position: absolute;
    content: 'WORKING';
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    text-align: center;
    color: white;
    font-family: var(--fontFaimly_header);
    font-size: 20px;
    line-height: 50px;
    background-color: gray;
    box-sizing: border-box;
}

#cstationConstructionBox .materials_needed {
    position: absolute;
    top: 510px;
    right: 30px;
    width: calc(50% - 50px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-top: 5px;
}

#cstationConstructionBox .materials_needed_table{
    color: var(--hud_tablecolor);
    width: calc(100% - 20px);
    margin-top: 10px;
    margin-left: 10px;
    line-height: 20px;

}
#cstationConstructionBox .materials_needed_table th{
    color: var(--hud_tablecolor);
    padding: 0px 5px;
    text-align: right;
    text-transform: uppercase;
    width:20px;
}

#cstationConstructionBox .materials_needed_table th span.namelink{
    color: black;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: none;
}




#cstationConstructionBox .materials_needed_table td{
    font-size: 13px;
    padding: 0px 5px;

    text-align: left;
    color: silver;

}

#cstationConstructionBox .materials_needed_table td.lomitko
{
    width: 10px;
}

#cstationConstructionBox .materials_needed_table td.material{
    width: unset;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    padding-left: 10px;
    text-align: right;
    font-size: 13px;
    background-image: var(--hud_valueline_bckimg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;
}
#cstationConstructionBox .materials_needed_table td.have_material{

    font-size: 13px;
    padding: 0px 5px;
    text-align: left;
    color: silver;
    white-space: nowrap;
}

#cstationConstructionBox .times_needed{
    position: absolute;
    top: 220px;
    left: 30px;
    width: calc(50% - 50px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationConstructionBox .time_needed_table td{
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;

    text-align: center;
}

#cstationConstructionBox .facility_effectivity{
    position: absolute;
    top: 220px;
    right: 30px;
    width: calc(50% - 50px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationConstructionBox .facility_effectivity td{
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;

    text-align: center;
}



#cstationConstructionBox .blueprint_needed{
    position: absolute;
    top: 510px;
    width: calc(50% - 50px);
    left: 30px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationConstructionBox .blueprint_needed:before,
#cstationConstructionBox .times_needed:before,
#cstationConstructionBox .materials_needed:before,
#cstationConstructionBox .facility_effectivity:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: white;
    clip-path: var(--clip_underline_right);
}

#cstationConstructionBox .blueprint_needed_table td{
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;
    text-align: center;
}

#cstationConstructionBox .blueprint_needed_table td .showWindowItem{
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    display: inline-block;
}

#cstationRefineBox{
    position: absolute;
    width: 800px;
    height: 760px;

}

#cstationRefineBox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(39 44 67);
    clip-path: var(--clip_refinery_refinebox);
    z-index: -1;
    background-image: linear-gradient(301deg, rgb(41 41 41) 0%, rgb(88 108 155 / 16%) 100%);
}


#cstationRefineBox .bpimg {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: -1;
    background-color: rgb(60,60,60);
    background-size: cover;
    clip-path: var(--clip_refinery_refinebox);
    background-position: center;
}


#cstationRefineBox .bpimg:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(328deg, rgb(40 41 49) 0%, rgb(48 60 115 / 91%) 100%);
}

#cstationRefineBox table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationRefineBox .name {

    text-align: center;
    font-size: 39px;

    text-transform: uppercase;

    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
    color: white;
}

#cstationRefineBox .facility_effectivity{
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(33.3% - 40px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationRefineBox .facility_effectivity_table td {
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;

    text-align: center;
}

#cstationRefineBox .times_needed{
    position: absolute;
    top: 220px;
    left: 30px;
    width: calc(33.3% - 40px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationRefineBox .time_needed_table td {
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;

    text-align: center;
}

#cstationRefineBox .energy_needed{
    position: absolute;
    top: 220px;
    right: 30px;
    width: calc(33.3% - 40px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}

#cstationRefineBox .energy_needed_table td {
    font-size: 18px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    line-height: 26px;

    text-align: center;
}

#cstationRefineBox .input {
    position: absolute;
    top: 510px;
    left: 30px;
    width: calc(50% - 50px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-top: 5px;
}

#cstationRefineBox .output {
    position: absolute;
    top: 510px;
    right: 30px;
    width: calc(50% - 50px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-top: 5px;
}


#cstationRefineBox .input:before,
#cstationRefineBox .output:before
{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#cstationRefineBox .input_table,
#cstationRefineBox .output_table
{
    color: var(--hud_tablecolor);
    width: calc(100% - 20px);
    margin-top: 10px;
    margin-left: 10px;
    line-height: 20px;
}

#cstationRefineBox .input_table th,
#cstationRefineBox .output_table th
{
    color: var(--hud_tablecolor);
    padding: 0px 5px;
    text-align: right;
    text-transform: uppercase;
    width:20px;


}

#cstationRefineBox .input_table th span.namelink,
#cstationRefineBox .output_table th span.namelink
{
    color: white;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: none;
}



#cstationRefineBox .input_table td,
#cstationRefineBox .output_table td
{
    font-size: 13px;
    padding: 0px 5px;

    text-align: left;
    color: silver;
}

#cstationRefineBox .input_table td.lomitko,
#cstationRefineBox .output_table td.lomitko
{
    width: 10px;
}

#cstationRefineBox .input_table td.material_perc,
#cstationRefineBox .output_table td.material_perc
{
    text-align: left;
    width: 40px;
    font-size: 10px;
}

#cstationRefineBox .input_table td.have_material,
#cstationRefineBox .output_table td.have_material
{
    text-align: left;
    white-space: nowrap;
}


#cstationRefineBox .input_table td.material,
#cstationRefineBox .output_table td.material
{
    width: 100%;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    padding-left: 10px;
    text-align: right;
    font-size: 13px;
    white-space: nowrap;
    background-image: var(--hud_valueline_bckimg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;

}



#cstationRefineBox .input:before,
#cstationRefineBox .output:before,
#cstationRefineBox .times_needed:before,
#cstationRefineBox .energy_needed:before,
#cstationRefineBox .facility_effectivity:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline_right);
}



#cstationRefineBox .totalprice{
    position: absolute;
    top: 93px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 24px;
    color: white;

}

#cstationRefineBox .qty {
    text-align: right;
    vertical-align: top;
    position: absolute;
    top: 145px;
    left: 10px;
    right: calc(50% + 5px);
}

#cstationRefineBox .qty input {
    text-align: right;
    width: 150px;
}


#cstationRefineBox .actions{
    text-align:left;
    position: absolute;
    top: 145px;
    left: calc(50% + 5px);
    right: 10px;
}

#cstationRefineBox .actions .info{
    animation: highlited 1000ms linear infinite;
    padding: 0px 0px;
    height: 30px;
    text-align: left;
    position: absolute;
    width: 200px;
    top: 0px;
    font-size: 14px;
}

#cstationRefineBox .actions button .thint  {
    top: calc(100% + 5px);
    bottom: unset;
    transform: translateX(-50%);
    right: unset;
    left: 50%;
}

#cstationRefineBox .actions button .thint:before  {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffbc00;
    position: absolute;
    top: -20px;
    right: calc(50% - 10px);
}

#cstationEmbarkRefineBox .items,
#cstationEmbarkRefineBox .storage_space {
    position: relative;
    left: 15px;
    width: calc(100% - 30px);
    color: white;
    text-align: center;
    box-sizing: border-box;

    font-size: 12px;
    line-height: 30px;
    padding: 5px 10px 20px;
}

#cstationEmbarkRefineBox .items {
    bottom: 85px;
    position: absolute;
    top: 200px;
    overflow-y: scroll;

    margin-top: 0px;
}


#cstationEmbarkRefineBox .items table.items_table .source_qty,
#cstationEmbarkRefineBox .items table.items_table .source_su{
    text-align: right;
}


#cstationEmbarkRefineBox .items table.items_table td.source_qty,
#cstationEmbarkRefineBox .items table.items_table td.source_su{
    font-size: 15px;
}

#cstationEmbarkRefineBox .items table.items_table .output_name{
    text-align: left;
}

#cstationEmbarkRefineBox > .storage_space {
    top: 70px;
    height: 112px;
    position: absolute;
    margin: 0px;
    padding: 5px 0px 0px;
    animation: text-shadowing-white-small 500ms ease-out forwards;
    font-size: 12px;
    right: 15px;
    left: unset;
}



#cstationEmbarkRefineBox .storage_space:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_cargo);
    z-index: -1;
}

#cstationEmbarkRefineBox .storage_space .dark {
    color: var(--border-effect-color);
}

#cstationEmbarkRefineBox .storage_space .storage_space_total {
    position: absolute;

    top: 45px;
    line-height: 5px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}


#cstationEmbarkRefineBox .storage_space .storage_space_vals {
    position: absolute;

    top: 88px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}



#cstationEmbarkRefineBox .items .items_table{
    width:100%;
    margin: 0px;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table{
    margin-top: 40px;
}

#cstationEmbarkRefineBox .storage_space .storage_space_box {
    position: absolute;
    background-color: white;

    top: 69px;
    left: 10%;
    right: 10%;
    height: 7px;

    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}

#cstationEmbarkRefineBox .storage_space .storage_space_box .bar {
    position: absolute;
    top: 0px;
    background-color: white;
    bottom: 0px;
    left: 0px;
    width: 0px;
    transition:width 0.2s linear;
}

#cstationEmbarkRefineBox .storage_space .storage_space_box .bar.red {
    background-color: red;
    animation:highlited 1000ms linear infinite;
}


#cstationEmbarkRefineBox .items .items_table td,
#cstationEmbarkRefineBox .items .items_table th,
#cstationEmbarkRefineBox .storage_space .storage_space_table th,
#cstationEmbarkRefineBox .storage_space .storage_space_table td {
    height: 35px;

    padding: 0px;
    line-height: normal;
    vertical-align: middle;
    padding: 5px 5px;
    text-align: right;

}

#cstationEmbarkRefineBox .items .items_table th,
#cstationEmbarkRefineBox .storage_space .storage_space_table th {
    text-transform: uppercase;
}

#cstationEmbarkRefineBox .items .items_table td,
#cstationEmbarkRefineBox .storage_space .storage_space_table td {

}

#cstationEmbarkRefineBox .items .items_table td.source_input {
    width: 310px;
}

#cstationRefineBox .info {
    padding: 150px 0px;
    color: white;
    text-align: center;
    text-transform: uppercase;


}

#cstationRefineBox .actions .info {
    padding: 10px 0px;
    color: white;
    text-align: center;
    text-transform: uppercase;



}

.emb_max,
.emb_min,
.emb_all {
    position: relative;
    display: inline-block;
    height: 30px;
    color: rgba(150,150,150,1);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;

    width: auto;
    margin: 0px 0px 0px 4px;
    text-shadow: none;
    backdrop-filter: var(--box-backdrop-filter);
    width: 44px;
}



.emb_all.noshow {
    visibility: hidden;
}

.emb_max:hover,
.emb_min:hover,
.emb_all:hover {

    animation:blink 100ms linear 2 alternate;
}



#cstationEmbarkRefineBox .storage_space .storage_space_table th {
    text-align: right;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table td {
    color: var(--hud_tablevaluecolor);
    font-size: 10px;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table td span {

    font-size: 20px;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table td {
    text-align: right;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table td .noq {
    color: red;
}

#cstationEmbarkRefineBox .storage_space .storage_space_table td .yoq {
    color: var(--hud_tablevaluecolor);
}



#cstationEmbarkRefineBox .items .items_table td.output_image {
    width: 25px;
    height: 25px;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center right;
}

#cstationEmbarkRefineBox .items .items_table td.output_name {
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    text-align: left;
    padding-left: 10px;
}


#cstationEmbarkRefineBox .actions input[type="number"],
#cstationEmbarkRefineBox .source_input input[type="number"]
{

    width: 140px;
}





#cstationEmbarkRefineBox .actions {
    text-align: center;
    position: absolute;
    bottom: 40px;
    left: 10px;
    right: 10px;
    color: white;
    font-size: 14px;

}


#cstationEmbarkRefineBox{
    animation: deblur 1000ms ease-out forwards;
    position:absolute;
    width:870px;
    height:670px;
    z-index:99999999;
}

#cstationEmbarkRefineBox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 5px;
    top: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_refinery_embarkwindow);
    z-index: -1;
}



#cstationbox .refinery {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationbox.refineryavailablewindow .refinery .processes {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
    min-height: 0;
    max-height: 100%;
    padding-right: 10px;
}


#cstationbox .refinery .processes .process {
    box-sizing: border-box;
    position: relative;
    color: white;
}

body.pressedCTRL #cstationbox .refinery .processes .process.available {
    cursor: pointer;
}

body.pressedCTRL #cstationbox .refinery .processes .process.available .bpimg {
    /*background-color: rgb(28 43 83);*/
    cursor: pointer;
    animation: none; /* Zruší animaci */
    box-shadow: 0px 0px 40px var(--highlitedPRESSEDboxShadow_color) inset;
    transition: box-shadow 300ms ease-out;
}

body.pressedCTRL #cstationbox .refinery .processes .process.available .bpimg:after {
    background-image: linear-gradient(156deg, var(--highlitedPRESSEDboxShadow_color) 20%, rgb(28 43 83 / 33%) 100%);
}

body.pressedCTRL #cstationbox .refinery .processes .process.available:hover .bpimg{
    animation: highlitedPRESSEDBox 800ms ease infinite;

}
body.pressedCTRL #cstationbox .refinery .processes .process.available:hover .refinery_option_actions_now{
    animation: highlitedPRESSEDText 800ms ease infinite;

}


body.pressedCTRL #cstationbox .refinery .processes .process.available .refinery_option_actions_now {
    display: block;

}

body.pressedCTRL #cstationbox .refinery .processes .process.available button {
    display: none;
}


#cstationbox .refinery .processes .process .bpimg {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 8px;
    top: 0px;
    z-index: -1;
    background-color: rgb(60,60,60);
    background-size: cover;
    clip-path: var(--clip_refinery_process);
    background-position: center;
}

#cstationbox .refinery .processes .process.unavailable .bpimg {
    filter: grayscale(1);
}

#cstationbox .refinery .processes .process .bpimg:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(328deg, rgb(40 41 49 / 95%) 0%, rgb(48 60 115 / 91%) 100%);
}





#cstationbox .refinery .processes .process.unavailable {
    color: rgba(155,155,155,0.8);
    animation: none;
}
#cstationbox .refinery .processes .process.unavailable:before {
    background-color: rgb(60,60,60);

}
#cstationbox .refinery .processes .process.rp-heat.unavailable:before {
    background-color: rgb(60,60,60);
}
#cstationbox .refinery .processes .process.unavailable:after {
    color: rgb(60,60,60);
}


#cstationbox .refinery .processes .process .refinery_option_name  {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
    display: block;
    font-size: 24px;
    padding: 4px 10px 15px 20px;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    font-family: var(--fontFaimly_header);
    margin: 10px 0px 15px;
    line-height: 32px;
}

#cstationbox .refinery .processes .process .refinery_option_name:before  {
    content: "";
    position: absolute;
    display: block;
    left: 20px;
    right: 20px;
    bottom: 0px;
    height: 4px;
    background-color: #959595;

    clip-path: var(--clip_underline);
}

#cstationbox .refinery .processes .process.unavailable .refinery_option_name:before  {
    background-color: rgba(155,155,155,0.8);
}
#cstationbox .refinery .processes .process .refinery_option_name span.process-ready,
#cstationbox .refinery .processes .process .refinery_option_name span.process-unavailable  {
    display: table;
    position: relative;
    text-align: left;
    text-transform: none;
    margin: 10px 0px 0px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    line-height: 9px;
    clip-path: var(--clip_attribute);
    padding: 4px 10px 4px 10px;
    display: none;
}



#cstationbox .refinery .processes .process .refinery_option_name span.process-ready {

    background-color:  white;
    color: black;

}

#cstationbox .refinery .processes .process .refinery_option_name span.process-unavailable {

    background-color:  rgba(155,155,155,0.8);
    color: var(--hud_valid_text);

}

#cstationbox .refinery .processes .process .refinery_option_name span.min_e  {
    display: none;
    position: absolute;
    top: 11px;
    right: 20px;
    bottom: unset;
    left: unset;
    font-size: 33px;
    white-space: nowrap;
    margin: 0px;
    padding: 0px;

    line-height: 30px;
}

#cstationbox .refinery .processes .process .refinery_option_name span.min_e .val  {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 33px;
    white-space: nowrap;
}

#cstationbox .refinery .processes .process .refinery_option_name span.min_e .of  {
    display: block;
    position: absolute;
    top: 30px;
    right: 0px;
    font-size: 14px;
    color: white;
    white-space: nowrap;
    display: none;
}



#cstationbox .refinery .processes .process.unavailable .refinery_option_name span.min_e .of  {
    color: var(--border-effect-color);
}


#cstationbox .refinery th {
    padding: 16px 5px 2px 5px;
    text-transform: uppercase;
    font-size: 13px;

    text-align: center;
}

#cstationbox .refinery th.result_title small {
    display: block;
    font-size: 11px;
    padding-top: 3px;
}

#cstationbox .refinery .warehousetable {
    margin: 0px 0px;
    width: 100%;
}

#cstationbox .refinery .warehousetable .buttn td {
    border-top: 1px solid rgba(255,255,255,0.1)
}


#cstationbox .refinery .price_warehouse th {
    height: 11px;
    width: 50%;
    text-align: right;
    text-transform: uppercase;
    font-size: 9px;
    line-height: 11px;
    vertical-align: middle;
    padding: 0px 0px;
}

#cstationbox .refinery .price_warehouse td {
    height: 11px;
    width: 50%;
    text-align: left;
    text-transform: uppercase;
    font-size: 9px;
    line-height: 11px;
    vertical-align: middle;
    padding: 0px 0px;
}

#cstationbox .refinery tr.bas_inv td {
    font-size: 12px;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    line-height: 15px;
    padding: 0px 5px;
    cursor: pointer;
}
#cstationbox .refinery tr.bas_inv:hover td {
    background-color: white;
    color: black;
    animation: blink 100ms linear 2 alternate;
}

#cstationbox .refinery th.inv_space {
    text-align: right;
}

#cstationbox .refinery th.inv_weight{
    text-align: right;
}

#cstationbox .refinery .label {
    border-bottom: none;
    /* padding-bottom: 11px; */
    font-size: 25px;
    font-family: var(--fontFaimly_header);
    padding: 0px 10px;
    background-color: white;
    color: black;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    height: 33px;
    line-height: 33px;
    box-sizing: border-box;
}



#cstationbox .refinery .refinery_option_actions {
    padding: 10px 0px 0px;
    text-align: center;
    height: 60px;
}

#cstationbox .refinery .processes .process .refinery_option_actions_now {
    position: relative;
    height: 75px;
    margin-top: 10px;
    display: none;
    color: #b9dbff;
}

#cstationbox .refinery .processes .process .refinery_option_actions_now_html {
    padding: 0px 30px;
    font-size: 13px;


}

#cstationbox .refinery .processes .process .refinery_option_actions_now_html span {
    font-size: 16px;
}

#cstationbox .refinery .refinery_option_name.available {
    background-color: white;
    background-image: none;
}

#cstationbox .refinery .refinery_option_name.unavailable {
    color: gray;
    background-color: var(--hud_invalid_background);

}

#cstationbox .refinery .refinery_option_actions button {
    width: 170px;
}

#cstationbox .refinery .refinery_option_actions button:before {
    background-color: transparent;
}

#cstationbox .refinery .refinery_option_actions button.grayed {
    cursor: default;
    color: #a8a8a8;
}
#cstationbox .refinery .refinery_option_actions button.grayed:before {

}

#cstationbox .refinery .refinery_option_actions button.grayed:hover {
    animation: none;
}

#cstationbox .refinery .refinery_option_actions button:hover > .subtext {
    display: block;
}

#cstationbox .refinery .refinery_option_actions button .thint{
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% - 20px);
}

#cstationbox .refinery .refinery_option_actions .price_warehouse {
    text-align: center;
    padding: 5px 0px 0px 10px;
    color: white;
}
#cstationbox .refinery .refinery_option_actions .price_warehouse .fee {
    position: relative;
    display: block;
    margin-top: 7px;
    font-size: 16px;
}
#cstationbox .refinery .refinery_option_actions .price_warehouse .before {
    position: relative;
    font-size: 13px;
    white-space: nowrap;
    color: gray;
    text-transform: uppercase;
}



#cstationbox .refinery .refinery_option_actions .oactions {
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 105px;
}




#cstationbox .refinery .refinery_option_actions .warehouse {
    position:absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 105px;
}
#cstationbox .refinery .refinery_option_actions .oactions:before,
#cstationbox .refinery .refinery_option_actions .warehouse:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: -10px;
    left: 0px;
    right: -10px;
    bottom: 0px;
    background-color: rgb(34 41 61);

}

#cstationbox .refinery .refinery_option_actions .oactions:before {
    clip-path: var(--clip_refinery_embark);
}

#cstationbox .refinery .refinery_option_actions .warehouse:before {
    clip-path: var(--clip_refinery_store);
}


#cstationbox .refinery td {
    font-size: 13px;
    padding: 5px 5px;
    border-bottom: none;

    line-height: 20px;
    vertical-align: top;

}





#cstationbox .refinery .processes .process .sources,
#cstationbox .refinery .processes .process .results {
    position: relative;
}




#cstationbox .refinery .processes .process.unavailable .sources:before,
#cstationbox .refinery .processes .process.unavailable .results:before {
    background-color: rgba(155,155,155,0.8);
}


#cstationbox .refinery .processes .process .results {
    padding-bottom: 65px;
    padding-top: 25px;
}

#cstationbox .refinery .processes .process .sources table,
#cstationbox .refinery .processes .process .results table {
    width: calc(100% - 40px);
    margin-left: 20px;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationbox .refinery .processes .process .sources table td,
#cstationbox .refinery .processes .process .results table td {
    height: 20px;

    padding: 0px 5px;

    vertical-align: middle;
}

#cstationbox .refinery .processes .process .sources table .source_name,
#cstationbox .refinery .processes .process .results table .result_name {

}

#cstationbox .refinery .processes .process .sources table .source_qty,
#cstationbox .refinery .processes .process .results table .result_qty {

    width: 38%;
}

#cstationbox .refinery .processes .process .sources table .source_mu,
#cstationbox .refinery .processes .process .results table .result_mu {
    text-align: left;
    width: 40px;

}


#cstationbox .refinery .processes .process .results table .result_perc {
    text-align: left;
    width: 20px;

}


#cstationbox .refinery .processes .process .sources table .source_stock,
#cstationbox .refinery .processes .process .results table .result_stock {

    text-align: right;


}
#cstationbox .refinery .processes .process .sources td.source_qty,
#cstationbox .refinery .processes .process .results td.result_est,
#cstationbox .refinery .processes .process .results td.result_qty,
#cstationbox .refinery .processes .process .sources table td.source_stock,
#cstationbox .refinery .processes .process .results table td.result_stock {
    background-image: var(--hud_valueline_bckimg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom  left, bottom right,bottom 1px center;
    font-size: 13px;
    white-space: nowrap;
}

#cstationbox .refinery .processes .process.unavailable .sources td.source_qty,
#cstationbox .refinery .processes .process.unavailable .results td.result_est,
#cstationbox .refinery .processes .process.unavailable .results td.result_qty,
#cstationbox .refinery .processes .process.unavailable .sources table td.source_stock,
#cstationbox .refinery .processes .process.unavailable .results table td.result_stock {
    background-image: var(--hud_valueline_bckimg);

}


#cstationbox .refinery .processes .process.available .sources .red .source_stock,
#cstationbox .refinery .processes .process.available .results .red .result_stock {
    color: silver;
}


#cstationbox .refinery .processes .process .sources .source_name span.namelink,
#cstationbox .refinery .processes .process .results .result_name span.namelink,
#boreholeScene .namelink
{
    /*color: black;*/
    /*background-color: white;*/
    /*padding: 1px 4px;*/
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;

    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#cstationbox .refinery .processes .process .sources .source_name span.namelink .srichness,
#cstationbox .refinery .processes .process .results .result_name span.namelink .srichness,
#boreholeScene .namelink .srichness,
#cstationbox #cstation .scroll table.itemlist tr:not(.spacer):not(.info) td.namelink .srichness,
#bluepages .content .offer.listitem .name .srichness,
#cstationsellBox #cstation .name .srichness,
#cstationbuyBox #cstation .name .srichness,
#cstationctBox #cstation .name .srichness,

#cstationadtBox #cstation .name .srichness,
#cstationEmbarkRefineBox .output_name .srichness{

    /*color: black;*/
    /*background-color: white;*/
    /*padding: 1px 4px;*/
    margin: 0px;

    white-space: nowrap;

    text-shadow: none;

    font-family: var(--fontFaimly_default);
}








#cstationbox .refinery .processes .process.unavailable .sources .source_name span.namelink,
#cstationbox .refinery .processes .process.unavailable .results .result_name span.namelink {


}

#cstationbox .refinery .processes .process.unavailable .sources .red .source_name span.namelink,
#cstationbox .refinery .processes .process.unavailable .results .red .result_name span.namelink {
    color: var(--hud_invalid_text);

}

#cstationbox .refinery .processes .process.unavailable .min-e.red {
    color: var(--hud_invalid_color);
}

#cstationbox .refinery .processes .process.unavailable .sources .red .source_stock,
#cstationbox .refinery .processes .process.unavailable .results .red .source_stock {
    color: var(--hud_invalid_color);

}

#cstationbox .refinery .processes .process .btid {
    position: absolute;
    bottom: 0px;
    right: 31px;
    width: 88px;
    color: rgb(60, 60, 60);
    text-align: center;
    font-size: 11px;
}



#cstationbox .refinery .processes .process .data {
    position: relative;
    height: 75px;
    margin-top: 25px;
    display: none;
}

#cstationbox .refinery .processes .process .data .min-e {
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    color: var(--border-effect-color);
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;

}




#cstationbox .refinery .processes .process .data .ttd,
#cstationbox .refinery .processes .process .data .energy,
#cstationbox .refinery .processes .process .data .price {
    position: absolute;
    top: 0px;
    left: 5%;
    width: 28.333%;
    text-align: center;
    box-sizing: border-box;
    font-size: 30px;
    line-height: 47px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;


}

#cstationbox .refinery .processes .process.unavailable .data .ttd span{
    color: var(--border-effect-color);
}

#cstationbox .refinery .processes .process .data .energy {
    right: 5%;
    left: unset;
}

#cstationbox .refinery .processes .process .data .price {
    left: 35.833%;
}

#cstationbox .refinery .processes .process .data .energy .du,
#cstationbox .refinery .processes .process .data .ttd .du,
#cstationbox .refinery .processes .process .data .price .du {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    font-size: 12px;
    line-height: 10px;
}

#cstationbox .refinery .processes .process .sources td.source_qty,
#cstationbox .refinery .processes .process .results td.result_est,
#cstationbox .refinery .processes .process .results td.result_qty {
    text-align: right;
    padding-right: 10px;
    font-size: 13px;
    width: 50%;
    white-space: nowrap;
}

#cstationbox .refinery .processes .process .sources .source_qty {
    text-align: right;
    padding-right: 10px;
    width: 50%;
}

#cstationbox .refinery .processes .process .sources .source_stock {
    text-align: right;
    padding-right: 10px;
    width: 50%;
}

#cstationbox .refinery .processes .process .results .result_qty {
    text-align: right;
    padding-right: 10px;
}





#cstationbox .refinery .processes .process .results table th.result_est {
    text-align: right;
}

#cstationbox .refinery .processes .process .results table th.result_eff {
    text-align: right;
}





#cstationbox .refinery .processes .process .inv_image,
#cstationbox .refinery .processes .process .inv_type,
#cstationbox .refinery .processes .process .inv_name,
#cstationbox .refinery .processes .process .inv_qty,
#cstationbox .refinery .processes .process .inv_mu,
#cstationbox .refinery .processes .process .inv_space,
#cstationbox .refinery .processes .process .inv_weight,
#cstationbox .refinery .processes .process .inv_actions {
    vertical-align: middle;
    padding: 0px;
}

#cstationbox .refinery .processes .process .inv_image {
    width: 25px;
    height: 25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#cstationbox .refinery .processes .process .inv_type {

    cursor: pointer;
    padding: 0px 10px;
}
#cstationbox .refinery .processes .process .inv_name {
    color: var(--hud_valuecolor);
    cursor: pointer;
    padding: 0px 10px;
}

#cstationbox .refinery .processes .process .inv_name:hover {
    background-color: #ffbc00;
    animation: blink 100ms linear 2 alternate;
}

#cstationbox .refinery .processes .process .inv_qty {
    width: 50px;

    text-align: right;
    padding: 0px 10px 0px 0px;
}

#cstationbox .refinery .processes .process .inv_mu {
    text-align: left;
}

#cstationbox .refinery .processes .process .inv_space {
    text-align: right;
}

#cstationbox .refinery .processes .process .inv_weight {
    text-align: right;
}

#cstationbox .refinery .processes .process .inv_actions {
    text-align: right;
}






#cstationbox .refinery th.fee {
    text-align: right;

}

#cstationbox .refinery tr.refinery_option .energy {
    text-align: right;
    padding-top: 20px;
}
#cstationbox .refinery th.energy {
    text-align: right;
}

#cstationbox .refinery tr.refinery_option .ttd {
    text-align: right;
    padding-top: 20px;
}

#cstationbox .refinery tr.refinery_option .min-e {
    text-align: center;
    color: silver;
    font-size: 10px;
    padding-top: 20px;
}



#cstationbox .refinery .processes .process .min-e {
    color: silver;
    font-size: 10px;
    text-align: center;
}




#cstationbox .refinery .min-e span.engeneering{
    display: inline-block;
    height: 18px;
    left: calc(50% - 15px);
    width: 30px;

    font-size: 12px;
    color: white;
    text-align: center;
    text-shadow: var(--shadow_textfull);
    background-color: var(--color-e);
    color: silver;
    line-height: 18px;
    box-shadow: var(--shadow_boxfull);
}


#cstationbox .refinery th.ttd {
    text-align: right;
}

#cstationbox .refinery th.results {
    text-align: center;
}

#cstationbox .refinery th.sources {
    text-align: center;
}


#cstationbox .refinery .processes .process .input th.source_name,
#cstationbox .refinery .processes .process .input th.source_qty,
#cstationbox .refinery .processes .process .output th.source_name,
#cstationbox .refinery .processes .process .output th.source_qty {

    color: gray;
    font-size: 10px;
}

#cstationbox .refinery .processes .process .input th.source_name,
#cstationbox .refinery .processes .process .output th.source_name {
    text-align: right;
    padding: 0px;

}

#cstationbox .refinery .processes .process .input th.source_qty,
#cstationbox .refinery .processes .process .output th.source_qty {
    text-align: right;
    padding: 0px;
}


#cstationbox .refinery .processes .process .input,
#cstationbox .refinery .processes .process .output {
    width: 250px;
}

#cstationbox .refinery .processes .process .ps {
    padding-top: 20px;
    text-align: center;
}

#cstationbox .refinery .processes .process .input table,
#cstationbox .refinery .processes .process .output table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationbox .refinery .processes .process .input table td,
#cstationbox .refinery .processes .process .output table td {
    height: 20px;
    font-size: 10px;
    padding: 0px;
    line-height: 10px;
    vertical-align: middle;
    text-align: right;
}

#cstationbox .refinery .processes .process .input .source_mu,
#cstationbox .refinery .processes .process .output .output_mu {
    color: silver;
    font-size: 10px;

}



#cstationbox .refinery .processes .process .input .source_name span.namelink,
#cstationbox .refinery .processes .process .output .output_name span.namelink
{
    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 10px;
    text-shadow: none;
}

#cstationbox .refinery .processes .process .input .source_name span.namelink:hover,
#cstationbox .refinery .processes .process .output .output_name span.namelink:hover
{
    animation: blink 100ms linear 2;
}

#cstationbox .refinery .processes .process .input .source_qty,
#cstationbox .refinery .processes .process .output .output_qty {
    width: 75px;
    text-align: right;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    font-size: 13px;
}



#cstationbox .refinery .processes .process .ps .percentyl{
    position: relative;
    height: 7px;
    width: calc(100% - 40px);
    margin: 17px auto 0px auto;
    background-image: linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5)), linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5));
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    box-sizing: border-box;
    z-index: 1;
    box-shadow: var(--shadow_boxfull);
}
#cstationbox .refinery .processes .process .ps .percentyl .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}
#cstationbox .refinery .processes .process .ps .percentyl .txt{
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
    color: white;

}

#cstationbox .refinery .processes .process.job {
    float: none;
    width: calc(100% - 190px);
    height: 295px;
    margin: 0px 0px 10px 0px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    animation: blink 100ms linear 2 alternate;

}


#cstationbox .refinery .processes .process.job .refinery_option_name:before {
    right: 0px;
}

#cstationbox .refinery .processes .process.job .sources:before {
    right: 0px;
}




#cstationbox .refinery .processes .process.job.running .percentyl .txt {
    color: white;
}



#cstationbox .refinery .processes .process.job.running .results table td.result_qty,
#cstationbox .refinery .processes .process.job.running .sources table td.source_qty,
#cstationbox .refinery .processes .process.job.running .results table td.result_stock {
    background-image: var(--hud_valueline_bckimg);
}

#cstationbox .refinery .processes .process.job.running .sources:before,
#cstationbox .refinery .processes .process.job.running .results:before,
#cstationbox .refinery .processes .process.job.running .refinery_option_name:before {
    background-color:white;
}

#cstationbox .refinery .processes .process.job.running:before {
    background-color: rgb(60,60,60);
}

#cstationbox .refinery .processes .process.job.paused {
    color: rgba(155,155,155,0.8);
}

#cstationbox .refinery .processes .process.job.paused span.namelink  {

    color: black;
}

#cstationbox .refinery .processes .process.job td.source_qty {
    width: 100%;
}

#cstationbox .refinery .processes .process.job td.result_qty {
    width: 100%;
}

#cstationbox .refinery .processes .process.job.paused .sources:before,
#cstationbox .refinery .processes .process.job.paused .results:before,
#cstationbox .refinery .processes .process.job.paused .refinery_option_name:before {
    background-color:rgba(155,155,155,0.8);
}

#cstationbox .refinery .processes .process.job.paused:before {
    background-color: rgb(60,60,60);
}

#cstationbox .refinery .processes .process.job.paused .percentyl {
    background-color:rgba(155,155,155,0.8);
}



#cstationbox .refinery .processes .process.job .sources {
    height: 90px;
    width: calc(50% - 15px);
    top: 150px;
    left: 10px;

}

#cstationbox .refinery .processes .process.job .results {
    height: 200px;
    width: calc(50% - 15px);
    top: 0px;
    right: 10px;

}


#cstationbox .refinery .processes .process.job .results:before {
    display:none;
}

#cstationbox .refinery .processes .process.job .sources {
    padding: 15px 0px 0px;
    position: absolute;
    box-sizing: border-box;
    background-image: unset;
}


#cstationbox .refinery .processes .process.job .results {
    padding: 0px;
    position: absolute;
    box-sizing: border-box;
    background-image: unset;
    bottom: 15px;
    height: unset;
    top: 10px;
    right: 10px;
}
#cstationbox .refinery .processes .process.job .results table {

    position: absolute;
    top: 0px;

}


#cstationbox .refinery .processes .process.job .refinery_option_name  {
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: left;
    text-transform: uppercase;
    box-sizing: border-box;
    display: block;
    width: calc(50% - 15px);
    font-size: 24px;
    padding: 0px 0px 15px 20px;
    text-transform: none;
    text-transform: uppercase;
}

#cstationbox .refinery .processes .process.job .refinery_option_name span.min_e  {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding: 17px 10px 0px 0px;
    font-size: 33px;
    white-space: nowrap;


}

#cstationbox .refinery .processes .process.job .refinery_option_name span.min_e .of  {
    display: none;
}

#cstationbox .refinery .processes .process.job.paused .refinery_option_name span.min_e  {
    color: var(--hud_invalid_color);
}




#cstationbox .refinery .processes .process.job .data {
    position: absolute;
    top: 63px;
    left: 10px;
    width: calc(50% - 15px);
    height: 85px;
    margin-top: unset;
    display: block;

}

#cstationbox .refinery .processes .process.job .totaltime {

    top: 70px;
    height: 7px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
    color: var(--hud_construction_text_color);
    font-size: 12px;


}

#cstationbox .refinery .processes .process.job .percentyl {

    top: 60px;
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_construction_barbckg_color);


}

#cstationbox .refinery .processes .process.job.paused .percentyl   {
    color: var(--hud_invalid_color);
}

#cstationbox .refinery .processes .process.job .percentyl .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_construction_bar_color);
    bottom: 0px;
}



#cstationbox .refinery .processes .process.job.paused .percentyl .bar  {
    background-color: var(--hud_invalid_color);
}



#cstationbox .refinery .processes .process.job .percentyl .txt{
    position: absolute;

    top: -30px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
}

#cstationbox .refinery .processes .process.job.complete .percentyl .txt {
    color: var(--hud_construction_text_color);
    font-family: var(--fontFaimly_header);
}

#cstationbox .refinery .processes .process.job .percentyl .txt span{
    color: var(--border-effect-color);
    font-size: 16px;
    padding-right: 3px;
}

#cstationbox .refinery .processes .process.job .refinery_option_actions {
    position: absolute;
    top: 25px;
    left: 100%;
    width: calc(50% - 15px);
    height: 230px;
    margin: 0px;
    padding: 0px;
    width: 180px;
    text-align: right;
    box-sizing: border-box;
}





#itembox{
    position:absolute;
    width:890px;
    height:780px;
}

#itembox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 5px;
    top: 0px;
    background-color: #1d2a4bcc;

    clip-path: var(--clip_itembox);
    z-index: -1;
    background-image: linear-gradient(#1d2a4bcc 0%, rgb(2 2 21 / 0%) 140%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}


#itembox .pricehistory{
    top: 100px;
    bottom: unset;
}

#itembox .offers{
    top: 475px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    left: 25px;
    bottom: 25px;
    right: 20px;
}

#itembox .offers > table{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#itembox .offers > table td{
    background-color: rgb(25 37 53);
    line-height: 25px;

    color: rgb(255, 255, 255);
    height: 25px;
    padding: 0px 10px;
    font-size: 13px;
}

#itembox .offers > table td.qty{
    text-align: right;
}

#itembox .offers > table td.price{
    text-align: right;
}

#itembox .offers > table td.pricemu{
    text-align: right;
}

#itembox .offers > table tr:hover td{
    background-color: rgb(33 50 72);
}

#itembox .whitelink {

    color: black;
    padding: 0px 8px;
    cursor: pointer;

    height: 18px;
    line-height: 18px;
    display: inline-block;
    font-family: var(--fontFaimly_button);
    position: relative;
    z-index: 1;
}




#itembox .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,1);

    clip-path: var(--clip_whitelink);
    z-index: -1;
}


#itembox .whitelink:hover {
    animation: blink 100ms linear 2;

}
#itembox .error{
    position:absolute;
    top:197px;
    height:45px;
    right:0px;
    left:0px;
    color:white;
    text-align:center;
    border-spacing:0px;
    text-align:center;
}
#itembox .error strong{
    display:block;
    font-weight:bold;
    font-size:18px;
}
#itembox .zalozky{
    position:absolute;
    top:55px;
    left:15px;
    height:35px;
    white-space: nowrap;
}
#itembox .zalozky span{
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);

}

#itembox .zalozky span:hover{
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}

#itembox .zalozky span.active:hover {
    border: 1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation: none;
}

#itembox .zalozky span.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}

#itembox .image {
    position: absolute;
    top: 75px;
    width: 350px;
    height: 350px;
    left: 25px;
    background-size: contain;
    z-index: -1;
    animation: crt 10000ms linear infinite;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 0px 62px #38709b);
}

#itembox .content{
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 45px;
    width: 440px;
    bottom: 20px;
    right: 5px;
    color: white;

    font-size: 12px;
    bottom: 15px;
    /*text-shadow: var(--shadow_textfull);*/
}

#itembox .description{
    overflow-x: hidden;
    overflow-y: hidden;

    position: absolute;
    bottom: 15px;
    left: 18px;
    right: 480px;
    height: 300px;
    color: white;

    font-size: 15px;
    /* text-shadow: var(--shadow_textfull); */
    padding: 5px 10px;
    text-align: justify;
    line-height: 22px;
}

#itembox .content .contenttable{
    width: 100%;
    border-spacing:0px;
    border-collapse:separate;
}



#itembox .content .contenttable .target_type{

}

#itembox .content .contenttable .target_type .arttyp{
    display: inline-block;
    background-color: #4e4e4e;
    color: white;
    font-size: 12px;
    padding: 2px 24px 2px 5px;
    margin: 2px 2px;
    font-family: var(--fontFaimly_button);
    border-radius: 4px;
    position: relative;
    white-space: nowrap;
}

#itembox .content .contenttable .target_type .arttyp .infosight {
    display: inline;
    position: relative;
    width: 12px;
    height: 12px;
    top: 1px;
    right: -20px;
}

#itembox .content .contenttable .target_type .arttyp .infosight:before {
    content: '';
    position: absolute;
    right: 0px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;

}

#itembox .content .contenttable .target_type .arttyp .infosight:hover .html {
    display: block;
    animation: blink 100ms linear 2 alternate;
}

#itembox .content .contenttable .target_type .arttyp .infosight .html {
    display: none;
    position: absolute;
    right: -2px;
    width: 175px;
    top: 20px;
    background-color: rgba(10,10,10,1);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    white-space: normal;
    text-align: right;
}

#itembox .content .contenttable .target_type .arttyp .infosight .html:before {
    content: "";
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 0px;
    border-bottom: 10px solid rgba(10,10,10,1);
}














#itembox .content .contenttable td.description{
    color: white;
    text-align: right;
    padding: 20px 15px;
    width: 100%;
    text-transform: none;
}

#itembox .content .contenttable td img{
    height: 128px;
    margin-bottom: 20px;
}

#itembox .content .contenttable th,
#basemodule .attributes table th,
#astronautCard .maininfo .astrinfotable th,
#cstationbox .cs-map .block .vals th{
    color: var(--hud_popiseck_gray_color);
    text-align: right;
    padding: 0px 5px 2px 0px;
    width: 125px;
    font-size: 12px;
    vertical-align: top;
    text-transform: uppercase;
    position: relative;
}

#itembox .content .contenttable th {
    width: 220px;
}

#itembox .content .contenttable th:hover > .subtext,
#basemodule .attributes .content > table th:hover > .subtext,
#astronautCard .maininfo .astrinfotable th:hover > .subtext,
#cstationbox .cs-map .block .vals th:hover > .subtext{
    display: block;
}


#astronautCard .maininfo .astrinfotable > tbody > tr > th{
    width: 80px;
}

#cstationbox .cs-map .block table.vals > tbody > tr > th {
    width: 60px;
}

#cstationbox .cs-map .block table.vals > tbody > tr > td {
    height: 25px;
}


#itembox .content .contenttable > tbody > tr > td,
#basemodule .attributes .content > table > tbody > tr > td,
#astronautCard .maininfo .astrinfotable > tbody > tr > td,
#cstationbox .cs-map .block .vals td{
    color: var(--hud_tablevaluecolor);
    text-align: left;
    padding: 0px 0px 0px 10px;
    font-size: 14px;
    vertical-align: top;
    height: 36px;
    /*line-height: 12px;*/
}

#basemodule .attributes .content > table > tbody > tr > td.bonus {
    color: #ffbc00;
}

#basemodule .attributes .content > table > tbody > tr > td.spcname {
    font-size: 23px;
}

#itembox .content .contenttable .connectors .module_connector{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-size: 30px;
}

#itembox .content .contenttable .connectors .module_connector .sub{
    top: 6px;
}

#itembox .content .contenttable table.swabilities{
    width: calc(100% - 10px);
    border-spacing:0px;
    border-collapse:separate;
    font-size: 13px;
    margin-right: 10px;
}

#itembox .content .contenttable table.swabilities .afncname{
    display: block;
}
#itembox .content .contenttable table.swabilities th{
    width: 1%;

}

#itembox .content .contenttable table.swabilities .aimg{
    display: inline-block;
    position: relative;
    bottom: 0px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    margin: 0px 4px;
    line-height: 25px;
    z-index: 1;
    padding: 0px 0px;
}

#itembox .content .contenttable table.swabilities .aimg .img {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
}


#itembox .content .contenttable table.swabilities .aimg:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}


#itembox .content .contenttable table.materials{
    width: calc(100% - 30px);
    border-spacing:0px;
    border-collapse:separate;

    margin-right: 30px;
}

#itembox .content .contenttable table.materials td{
    color: var(--hud_tablevaluecolor);
    text-align: right;
    padding: 2px 5px 2px 0px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%), linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%), linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
    font-size: 13px;
    height: 20px;
    vertical-align: middle;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;
}

#itembox .content .contenttable table.materials th{
    color: white;
    text-align: right;
    padding: 2px 5px 2px 0px;
    height: 20px;
    width: 1%;

}

#itembox .content .contenttable div.facility{
    width: calc(100% - 10px);
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 10px;
    margin: 9px 0px;
    padding: 5px 0px;
    /* border-top: 1px solid white; */
    background-color: #13151af7;
    border-radius: 11px;
    padding: 10px;
    box-sizing: border-box;

}

#itembox .content .contenttable table.facility{
    width: 100%;
    border-collapse:separate;
    font-size: 14px;
    margin: 0px 0px;

}

#itembox .content .contenttable .facility td{

}

#itembox .content .contenttable .facility td .facname{
    font-size: 16px;

}

#itembox .content .contenttable .facility td .facdescr{
    font-size: 12px;
    padding: 3px 0px 12px;
    display: block;
}

#itembox .content .contenttable .facility th{

}

#itembox .content .wikilink {

    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#itembox .content .wikilink.external {
    padding: 0px 16px 0px 5px;
    background-image: url(ico/external-link-2-16.png);
    background-size: 9px;
    background-position: right 2px top 2px;
    background-repeat: no-repeat;
}

#itembox .content  .wikilink:hover {
    animation: blink 100ms linear 2;

}


#itembox .scroll{
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 100px;
    left: 280px;
    bottom: 5px;
    right: 5px;
}

#itembox .scroll .descriptions {
    padding-left: 385px;
    color: white;
    text-align: left;
    padding-right: 15px;

}
#itembox .scroll .descriptions .descriptions_text {
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
}
#itembox .scroll .descriptions .descriptions_text:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#itembox .scroll .descriptions .descriptions_text .type {
    font-size:16px;
    color:rgb(0,255,255);
    padding-top: 5px;
    text-transform: none;
    line-height: normal;
    font-size: 13px;
    box-sizing: border-box;
    position: relative;
    text-align: left;
}
#itembox .scroll .descriptions .descriptions_text .description {
    font-size:13px;
    color:rgb(255,255,255);
    line-height: 20px;
    text-transform: none;
    text-align: left;
}




#itembox .scroll .attributes .attributes_params {
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
}

#itembox .scroll .attributes .attributes_params:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


#itembox .scroll table.itemlist{
    width:100%;
    background:linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
    border-spacing:0px;
    border-collapse:separate;
}
#itembox .scroll table.itemlist th{
    padding:10px 5px;
    color:rgb(0,255,255);
    text-transform:uppercase;
    font-size:13px;
    font-weight:normal;
    text-align:left;
}
#itembox .scroll table.itemlist td{
    font-size:13px;
    color:rgba(255,255,255,1);
    padding:0px 5px;
    border-bottom:1px solid rgba(255,255,255,0.3);
}
#itembox .scroll table.itemlist td.namelink{
    color:rgb(255,215,0);
    text-decoration:underline;
    cursor:pointer;
}
#itembox .scroll table.itemlist td.qty{
    text-align:right;
}
#itembox .scroll table.itemlist td.price{
    text-align:right;
}
#itembox .scroll table.itemlist td.pricenormal{
    text-align:right;
}
#itembox .scroll table.itemlist td.pricemu{
    text-align:right;
}
#itembox .scroll table.itemlist td.actions{
    width:100px;
    text-align:center;
}
#itembox .scroll table.itemlist td.actions button{
    height:20px;
    font-size:12px;
}

#itembox .scroll .attributes{
    padding-left: 385px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    padding-right: 15px;
}
#itembox .scroll .attributes .info{
    width:16px;
    height:16px;
    text-align:center;
    position:absolute;
    top:8px;
    right:2px;
    cursor:pointer;
    z-index:10000
}
#itembox .scroll .attributes table{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#itembox .scroll .attributes th{
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: right;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    line-height: 12px;
    width: 50%;
}
#itembox .scroll .attributes td{
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    line-height: 12px;
    padding-left: 10px;
    text-align: left;
}
#itembox .scroll .attributes .attributes_params {
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
}

#itembox .scroll .attributes .attributes_params:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#astronautCard{
    position: absolute;
    width: 700px;
    min-height: 700px;
    height: 80%;
    left: calc(50% - 350px);
    top: calc(50% - 290px);
    z-index: 199999999;
}

#astronautCard:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #292c39;
    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#astronautCard .info{
    position: absolute;
    top: 150px;
    left: 20px;
    right: 20px;
}

#astronautCard .maininfo{
    position: absolute;
    top: 65px;
    left: 20px;
    right: 20px;
}

#astronautCard .buttons {
    position: absolute;
    top: 154px;
    right: 40px;
    text-align: right;
    z-index: 10;
}

#astronautCard .buttons .newcolonist {
    position: relative;

}

#astronautCard .astrfoto {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: -1;
}

#astronautCard .astrfoto:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(41 44 57) 520px, rgba(0, 0, 0, 0) 98%);
    box-shadow: 0px 0px 50px 6px #3a3e57 inset;
    clip-path: var(--clip_standardbox);
}




#astronautCard .astrfoto .content {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 300px;
    height: 300px;
    background-size: 240px;
    box-sizing: border-box;
    filter: brightness(1) grayscale(0.3) drop-shadow(0px 0px 50px rgba(0, 112, 202, 1)) ;
    transform: translateX(-50%);
    background-position: center -27px;
    background-repeat: no-repeat;
}

#astronautCard .tes {
    position: absolute;
    top: 200px;
    left: 50%;
    box-sizing: border-box;
    transform: translateX(-50%);
    z-index: 10;

}
#astronautCard .maininfo .astrinfotable {
    color: white;
    position: absolute;
    right: 240px;
    left: 0px;

    font-size: 12px;
    top: 10px;
    padding: 0px;
    border-spacing: 0px;
}

#astronautCard .maininfo .astrinfotable tr.loc .forhairstate.forhire {
    padding-left: 35px;
    position: relative;
}

#astronautCard .maininfo .astrinfotable tr.loc .forhairstate.forhire:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-image: url(ico/sale_256.png);
    background-size: 20px;
    background-position: 7px center;
    background-repeat: no-repeat;
    width: 35px;
}

#astronautCard .maininfo .astrinfotable td .whitelink {
    color: black;
    background-color: white;
    padding: 2px 6px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
}

#astronautCard .maininfo .astrinfotable td .whitelink:hover {
    animation: blink 100ms linear 2;
}


#astronautCard .maininfo .astrinfotable td .switch {
    position: relative;
    display: inline-block;
    min-width: 75px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 10px;
}

#astronautCard .maininfo .astrinfotable td .tradeprice {
    font-size: 12px;
}

#astronautCard .maininfo .astrinfotable td .tradeprice.white {
    color: white;
}

#astronautCard .maininfo .astrinfotable td .tradeprice.gray {
    color: gray;
}


#astronautCard .maininfo .astrinfotable td .button {
    width: 120px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background-color: white;
    color: black;
    border: 0px;
    font-family: var(--fontFaimly_button);
}

#astronautCard .maininfo .astrinfotable td .button:before {
    display: none;
}


#astronautCard .healthbar{
    position: absolute;
    right: 40px;
    height: 7px;
    width: 200px;
    top: 130px;
    box-sizing: border-box;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
}
#astronautCard .healthbar .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}

#astronautCard .healthbar .txt {
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;

    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    color: white;

    white-space: nowrap;
}

#astronautCard .healthbar .aHb {
    display: block;
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: white;
    white-space: nowrap;
}

#astronautCard .expbar{
    position: absolute;
    right: 40px;
    height: 7px;
    width: 200px;
    top: 90px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_exp_barbckg_color);
    box-sizing: border-box;
}
#astronautCard .expbar .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_exp_bar_color);
    bottom: 0px;
}

#astronautCard .expbar .txt {
    position: absolute;
    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_exp_text_color);
}

#astronautCard .expbar .aexpb {
    display: block;
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_exp_text_color);
    white-space: nowrap;
}


#astronautCard .action{
    position: absolute;
    top: 230px;
    left: 15px;
    right: 11px;
    bottom: 5px;


}
#astronautCard .action .main{
}


#astronautCard .action .main .bckgr{
    position: absolute;
    top: 0px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

#astronautCard .action .main .subtitle{
    font-size: 28px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--fontFaimly_header);
    padding: 13px 0px;
}




#astronautCard .action .main .infobox{
    font-size: 18px;
    color: white;
    text-align: center;
    padding: 7px 70px;
}
#astronautCard .action .main .infobox small{
    font-size: 12px;
    color: gray;
    text-transform: none;
    font-family: var(--fontFaimly_default);
    padding-top: 10px;
    display: block;
}
#astronautCard .action .main .descr{
    color: white;
    text-align: center;
    font-size: 13px;
    padding: 8px 70px;
}


#astronautCard .action .main.nextlvl .infobox{
    font-size: 13px;
    color: #ffbc00;
    text-align: center;
    padding: 2px 0px;
    text-transform: uppercase;

}

#astronautCard .action .main .content .zscan-result{
    display: block;
    font-size: 35px;
    color: white;
    text-align: center;
    font-family: var(--fontFaimly_header);
    padding: 30px 0px;
    text-transform: uppercase;
    animation:highlited 1000ms linear infinite;
}
#astronautCard .action .main .content .zscan-result.positive{
    color: red;
}
#astronautCard .action .main .content .zscan-result.negative{
    color: green;
}
#astronautCard .action .main .content .zscan-result.failed{
}
#astronautCard .action .main .content .zscan-result .infobox{
    font-family: var(--fontFaimly_header);
    font-size: 16px;
    margin: 10px auto;
    width: 350px;
}
#astronautCard .action .main .content .zscan-label{
    color: white;
    text-align: center;
}
#astronautCard .action .main .content .zscan-progress{
    height: 30px;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    box-sizing: border-box;
    overflow: hidden;
    width: 300px;
    margin: 5px auto;
    position: relative;
}
#astronautCard .action .main .content .zscan-progress .zscan-bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
    transition: width 0.2s linear;
}




#cstationbox #cstation .recycling .bckgr{
    position: absolute;
    top: 0px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}
#cstationbox #cstation .recycling .subtitle{
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--fontFaimly_header);
}
#cstationbox #cstation .recycling .infobox{
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 0px;
}
#cstationbox #cstation .recycling .infobox small{
    font-size: 10px;
    color: gray;
}
#cstationbox #cstation .recycling .descr{
    font-size: 13px;
    color: white;
    text-align: left;
    padding: 0px 70px;
}


#cstationbox #cstation .recycling .recycle-label {
    color: white;
    text-align: center;
    margin-top: 100px;
}
#cstationbox #cstation .recycling .recycle-progress {
    height: 30px;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    box-sizing: border-box;
    overflow: hidden;
    width: 300px;
    margin: 5px auto;
    position: relative;
}
#cstationbox #cstation .recycling .recycle-progress .recycle-bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
    transition: width 0.2s linear;
}

#cstationbox #cstation .recycling .buttons{
    margin-top: 30px;
}

#astronautCard .action .main .buttons{
    position: relative;
    top: unset;
    left: 50%;
    transform: translateX(-50%);


}
#astronautCard .action .main .buttons .button{
    margin: 5px 10px;



}
#astronautCard .action .main .buttons .button.gray{
    color: gray;
}
#astronautCard .action .main .buttons .button:not(.gray):hover{
    animation:blink 100ms linear 2 alternate;


}

#astronautCard .action .main.infectivezombie .buttons .button{
    margin: 0px 5px;
    width: 200px;
}

#astronautCard .action .main.death .buttons .button{
    margin: 0px 5px;
    width: 170px;
}

#astronautCard .action .main .switch{
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;

    width: 120px;
    margin: 0px 8px 0px;
    background-image: linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%), linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%), linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;

}



#astronautCard .action .main .switch:hover{
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#astronautCard .action .main .switch.active:hover{
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#astronautCard .action .main .switch.active{
    color: var(--hud_bookmarkcolor);

}

#astronautCard .action .main .content {
    position: absolute;
    top: 45px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    padding-top: 0px;
    display: none;
}

#astronautCard .action .main .content.visible {
    display: block;
}

#astronautCard .action .main .astrlog {
    overflow-y: scroll;

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;

}
#astronautCard .action .main .astrlog table {
    width: calc(100% - 5px);
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 12px;

}





#astronautCard .action .main .astrlog .row td {
    vertical-align: top;
    padding: 5px 5px;

}


#astronautCard .action .main .astrlog .row td.time {
    width: 60px;
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: rgb(150,150,150);
    padding-right: 10px;
}

#astronautCard .action .main .astrlog .row td.record {

    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: rgb(255,255,255);
}


#astronautCard .action .main.notadult .adultwait{
    font-size: 36px;
    color: white;
    text-align: left;
    font-family: var(--fontFaimly_header);
    padding: 20px 0px;
    text-align: center;
    text-transform: uppercase;
}
#astronautCard .action .main.notadult .label{
    font-size: 14px;
    color: white;
    text-align: left;

    padding: 5px 0px;
    text-align: center;
}

#astronautCard .action .main .family {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;

}
#astronautCard .action .main .family .parents,
#astronautCard .action .main .family .siblings,
#astronautCard .action .main .family .children {
    display: block;
    min-height: 140px;
    text-align: center;
}

#astronautCard .action .main .family .parents .father,
#astronautCard .action .main .family .parents .mother,
#astronautCard .action .main .family .siblings .sibling,
#astronautCard .action .main .family .children .child {
    display: inline-block;
    position: relative;
    height: 70px;
    width: 70px;
    border: 0px solid white;
    border-radius: 5px;
    margin: 50px 25px 0px;
    box-sizing: border-box;

}

#astronautCard .action .main .family .parents .father,
#astronautCard .action .main .family .parents .mother,
#astronautCard .action .main .family .siblings .sibling:not(.myself),
#astronautCard .action .main .family .children .child {
    cursor: pointer;
}

#astronautCard .action .main .family .parents .father:hover,
#astronautCard .action .main .family .parents .mother:hover,
#astronautCard .action .main .family .siblings .sibling:not(.myself):hover,
#astronautCard .action .main .family .children .child:hover {
    animation:blink 100ms linear 2;
}




#astronautCard .action .main .family .parents .father:after,
#astronautCard .action .main .family .parents .mother:after
{
    content: '';
    display: block;
    position: absolute;
    height: 12px;
    left: 0px;
    right: 0px;
    bottom: -17px;
    color: white;
    font-size: 9px;

}

#astronautCard .action .main .family .parents .father:after {
    content: 'FATHER';
}

#astronautCard .action .main .family .parents .mother:after {
    content: 'MOTHER';
}

#astronautCard .action .main .family .parents .father:before,
#astronautCard .action .main .family .parents .mother:before {
    content: '';
    display: block;
    position: absolute;
    height: 15px;
    left: 0px;
    right: 0px;
    bottom: -35px;
    color: white;
    background-image: url(parent_bckg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    font-size: 9px;

}
#astronautCard .action .main .family .siblings .sibling.myself.witchilds:before {
    content: '';
    display: block;
    position: absolute;
    height: 15px;
    left: 0px;
    right: 0px;
    bottom: -35px;
    color: white;
    background-image: url(parent_bckg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    font-size: 9px;

}


#astronautCard .action .main .family .siblings .sibling.myself.witchilds:after {
    content: 'PARENT';
    display: block;
    position: absolute;
    height: 12px;
    left: 0px;
    right: 0px;
    bottom: -17px;
    color: white;
    font-size: 9px;

}


#astronautCard .action .main .family .siblings .sibling:after{
    content: 'SIBLING';
    display: block;
    position: absolute;
    height: 12px;
    left: 0px;
    right: 0px;
    bottom: -17px;
    color: white;
    font-size: 9px;

}

#astronautCard .action .main .family .siblings .sibling.myself:after{
    content: '';
}


#astronautCard .action .main .family .children .child:after{
    content: 'DESCENDANT';
    display: block;
    position: absolute;
    height: 12px;
    left: 0px;
    right: 0px;
    bottom: -17px;
    color: white;
    font-size: 9px;

}





#astronautCard .action .main .family .parents .father .name,
#astronautCard .action .main .family .parents .mother .name,
#astronautCard .action .main .family .siblings .sibling .name,
#astronautCard .action .main .family .children .child .name{
    display: block;
    color: black;
    text-align: center;
    position: absolute;
    left: -21px;
    right: -21px;
    bottom: 70px;
    font-size: 17px;
    line-height: 14px;
    background: white;
    text-shadow: none;
    font-family: var(--fontFaimly_header);
}

#astronautCard .action .main .family .parents .father .astrfoto,
#astronautCard .action .main .family .parents .mother .astrfoto,
#astronautCard .action .main .family .siblings .sibling .astrfoto,
#astronautCard .action .main .family .children .child .astrfoto {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
    width: 70px;
    height: 70px;
}

#astronautCard .action .main .family .parents .father .astrfoto .acontent,
#astronautCard .action .main .family .parents .mother .astrfoto .acontent,
#astronautCard .action .main .family .siblings .sibling .astrfoto .acontent,
#astronautCard .action .main .family .children .child .astrfoto .acontent {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-size: cover, 150px, cover, contain;
    box-sizing: border-box;
    filter: brightness(200%) grayscale(1);
    animation: crt 5000ms linear infinite;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(41,92,100);
}

#astronautCard .action .main .family .siblings .sibling.myself .astrfoto .acontent {

}


#astronautCard .action .main.adult .newtes{
    color: white;
    text-align: center;
    font-size: 13px;
    padding: 0px 70px;
    text-transform: uppercase;
}

#astronautCard .action .main.adult .newtes .t,
#astronautCard .action .main.adult .newtes .e,
#astronautCard .action .main.adult .newtes .s {
    width: 200px;
    margin: 5px auto;
    text-align: left;
    clear: both;
    line-height: 20px;
}

#astronautCard .action .main.adult .newtes .val{
    display: inline-block;
    font-size: 16px;

    width: 40px;
    float: right;
    text-align: center;
    color: silver;
}
#astronautCard .action .main.adult .talent{
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 20px 0px;
    font-family: var(--fontFaimly_header);
}

#astronautCard .action .main.adult .talent .talent{
    display: block;
    font-size: 32px;

    text-align: center;
    text-transform: uppercase;
    padding: 0px 0px;
    font-family: var(--fontFaimly_header);
}

#astronautCard .action .main.adult .newtes .t .val{
    background-color: var(--color-t);
}
#astronautCard .action .main.adult .newtes .e .val{
    background-color: var(--color-e);
}
#astronautCard .action .main.adult .newtes .s .val{
    background-color: var(--color-s);
}






#astronautCard .action .main.nextlvl .nextleveltable{
    color: white;
    font-family: var(--fontFaimly_header);
    font-size: 14px;
    margin: 5px auto 0px;
}
#astronautCard .action .main.nextlvl .nextleveltable th{
    text-transform: uppercase;
    text-align: right;
}


#astronautCard .action .main.nextlvl .nextleveltable td{
    padding: 0px;
    text-align: center;
}
#astronautCard .action .main.nextlvl .nextleveltable td.tesvaldescription{
    font-size: 14px;
    color: #a7a7a7;
    text-align: left;
}

#astronautCard .action .main.nextlvl .nextleveltable td.nlval{
    text-align: right;
    font-size: 32px;
    padding-right: 12px;
    padding-left: 12px;
    color: rgb(255 169 34);
    filter: drop-shadow(0px 0px 3px gold);

}
#astronautCard .action .main.nextlvl .nextleveltable td.nldist{
    text-align: right;
    font-size: 32px;
    padding-right: 12px;
    padding-left: 12px;
}
#astronautCard .action .main.nextlvl .nextleveltable td.nlplus, #astronautCard .action .main .nextleveltable td.nlmins {
    width: 30px;
}
#astronautCard .action .main.nextlvl .nextleveltable td.nlinp {
    width: 50px;
}

#astronautCard .action .main.nextlvl .nextleveltable td.nlinp input {
    text-align: right;
    padding: 0px 10px;
    width: 65px;
}




#astronautCard .action .main.nextlvl .nextleveltable td.nlplus .plusbutton,
#astronautCard .action .main.nextlvl .nextleveltable td.nlmins .minusbutton{
    width: 34px;
    position: relative;
    height: 34px;
    /* box-sizing: border-box; */
    /* border-radius: 4px; */
    /* color: white; */
    font-size: 29px;
    padding: 0px;
    line-height: 30px;
    margin: 0px;
    text-align: center;
    /* cursor: pointer; */
    font-family: var(--fontFaimly_header);
}




#astronautCard .action .main.nextlvl .buttons .confirmnxtlv{
    visibility: hidden;
}
#astronautCard .action .main.nextlvl .buttons .confirmnxtlv.active{
    visibility: visible;
    animation:highlited 1000ms linear infinite;
}

#astronautCard .action .main.nextlvl .content{
    padding-top:0px;
}
#astronautCard .action .main.nextlvl .subtitle{
    font-size: 25px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--fontFaimly_header);
}
#astronautCard .action .main.nextlvl .subtitleprof{
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--fontFaimly_header);
    padding: 5px 0px 10px;
}
#astronautCard .action .main.nextlvl .subtitleprof span{
    display: block;
    font-size: 12px;
    padding: 20px 100px 10px;
}
#astronautCard .action .main.nextlvl .pointstodistribute{
    font-size: 35px;
    display: inline-block;
    color: gold;

    text-align: center;
    padding: 0px 8px;
    font-family: var(--fontFaimly_default);
    text-shadow: none;
    filter: drop-shadow(0px 0px 7px gold);
    text-shadow: 0px 0px 4px gold;
}

#astronautCard .action .main.setprof #professionsfixbox,
#astronautCard .action .main.healedzombie #gprofessionsfixbox
{
    height: 340px;
    width: 650px;
    margin: 22px auto 0px;
}
#astronautCard .action .main.setprof #professionsfixbox .proffesion,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion,
#shownovice .proffesions .proffesion
{
    height: 315px;
    width: 190px;
    margin: 0px auto;
    position: relative;
    cursor: pointer;

}


#shownovice .proffesions .proffesion:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#astronautCard .action .main.setprof #professionsfixbox .proffesion .bckg,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .bckg,
#shownovice .proffesions .proffesion .bckg
{
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;

    clip-path: var(--clip_standardbox);
}

#astronautCard .action .main.setprof #professionsfixbox .proffesion .bckg span,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .bckg span,
#shownovice .proffesions .proffesion .bckg span
{
    display: block;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    position: absolute;
    background-size: cover;
    background-position: top;
    filter: grayscale(0) blur(3px) brightness(47%);

}



#astronautCard .action .main.setprof #professionsfixbox .proffesion .img,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .img,
#shownovice .proffesions .proffesion .img
{
    position: absolute;
    height: 80px;
    width: 80px;
    top: 20px;
    left: calc(50% - 40px);

    clip-path: var(--clip_standarminiature);

}
#astronautCard .action .main.setprof #professionsfixbox .proffesion:hover .img,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion:hover .img,
#shownovice .proffesions .proffesion:hover .img
{
    animation:blink 100ms linear 2;
}
#astronautCard .action .main.setprof #professionsfixbox .proffesion:hover .bckg span,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion:hover .bckg span,
#shownovice .proffesions .proffesion:hover .bckg span
{
    animation: crt 3000ms linear infinite;
    filter: grayscale(0) blur(3px) brightness(60%);
}
#astronautCard .action .main.setprof #professionsfixbox .proffesion .name,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .name,
#shownovice .proffesions .proffesion .pname
{
    position: absolute;
    top: 111px;
    color: #ffbc00;
    left: 5px;
    right: 5px;
    text-align: center;

    text-transform: uppercase;
    font-size: 21px;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}
#astronautCard .action .main.setprof #professionsfixbox .proffesion .tip,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .tip,
#shownovice .proffesions .proffesion .tip
{
    position: absolute;
    top: 146px;
    color: rgb(160,160,160);
    left: 20px;
    right: 20px;
    text-align: center;

    text-transform: uppercase;
    font-size: 13px;
    text-shadow: var(--shadow_textfull);
}
#astronautCard .action .main.setprof #professionsfixbox .proffesion .description,
#astronautCard .action .main.healedzombie #gprofessionsfixbox .proffesion .description,
#shownovice .proffesions .proffesion .description
{
    position: absolute;
    top: 74%;
    color: #ffffffeb;
    left: 15px;
    right: 15px;

    text-align: center;
    text-transform: none;
    font-size: 13px;
    text-shadow: var(--shadow_textfull);
    transform: translateY(-50%);
}

#astronautCard .action .main.setprof #professionsfixbox .proffesion .thint {
    left: -5px;
    top: 48px;
    right: unset;
}



#reportbox{
    position:absolute;
    top:50px;
    left:50px;
    right:350px;
    min-width:600px;
    height:450px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,50,75,0.4) 10%,rgba(0,50,75,0.7) 60%,rgba(0,50,75,0.4) 90%,rgba(0,0,0,0.1) 100%);
    z-index:99999999;
}
.reprotbody{
    position:relative;
    height:100%;
    background-repeat:no-repeat;
    background-position:center right;
    background-size:cover;
}
.reprotbody .title{
    font-size:13px;
}
.reprotbody .image{
    position:absolute;
    right:0px;
    bottom:0px;
    top:0px;
    left:0px;
    background-color:black;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
.reprotbody .attributes{
    position:absolute;
    top:172px;
    right:5px;
    left:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
    background:linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
}
.reprotbody .attributes table{
    padding:0px;
    margin:3px 3px;
    width:calc(100% - 6px);
}
.reprotbody .attributes th{
    color:rgb(0,255,255);
    padding:0px 10px;
    text-transform:uppercase;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:25%;
}
.reprotbody .attributes td{
    font-size:13px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    background-color:rgba(0,255,255,0.2);
}
.reprotbody .actions{
    position:absolute;
    top:118px;
    height:45px;
    right:10px;
    left:10px;
    text-align:left;
    text-align:center;
}
.reprotbody .actions button{
    margin:0px 5px;
}
.reprotbody .reporttext{
    position:absolute;
    top:207px;
    right:5px;
    left:5px;
    bottom:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
    background:linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
}
.reprotbody .reporttext .text{
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    overflow-x:hidden;
    overflow-y:scroll;

    text-align:left;
    font-size:12px;
}


#listbox{
    position:absolute;
    width:220px;
    z-index:99999999;
    max-height: 100%;
    color: rgba(255,255,255,0.8);

}


#listbox:after {
    content: "";
    position: absolute;
    top: -135px;
    left: -80px;
    right: -30px;
    bottom: -25px;
    z-index: -1;
}

#listbox .scroller{
    position:relative;
    top:5px;
    left: 0px;
    right: 0px;
    padding:0px;
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#listbox .subscroller{
    position:relative;


}

#listbox .close{
    top: -10px;
    right:0px;
    width: 8px;
    height: 8px;
}
#listbox .scroller .item{
    display: block;
    position: relative;
    color: black;

    padding: 0px 6px;
    margin: 0px 0px 3px;
    background-color: rgba(180,180,180,1);
    cursor:pointer;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s;
    font-family: var(--fontFaimly_button);


}
#listbox .scroller .item:hover{
    background-color: rgba(255,255,255,1);
    color: black;

}
#listbox .scroller .item .name{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 60px;

    line-height: 25px;
    min-height: inherit;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}


#listbox .scroller .item .name > .ntextbox{

    position: absolute;
    left: 26px;
    top: 0px;
    bottom: 0px;
    right: 0px;

    line-height: 25px;

    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

#listbox .scroller .item .name > .ntextbox .moveable{

    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    transition: left var(--overflow-dur, 0ms) linear;
    white-space: nowrap;
}

#listbox .scroller .item:hover .name > .ntextbox .moveable{

    left: calc(-1 * var(--overflow-width, 0px) );



}

#listbox .scroller .item .distance{
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    line-height: 25px;
    padding: 0px 5px 0px 0px;
    width: 90px;
    text-align: right;
    box-sizing: border-box;
    font-size: 12px;
    white-space: nowrap;
}

#listbox .scroller .item .name .ico{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 6px center;
    width: 26px;
}

#listbox .scroller .item .name:hover .ico{
    filter: invert(0.65);
}

#listbox .scroller .item .name.planet .ico,
#listbox .scroller .item .name.far_planet .ico{
    background-image:url('ico/ico_planet_32.png');
}
#listbox .scroller .item .name.far_station .ico{
    background-image:url('ico/ico_station_32.png');
}
#listbox .scroller .item .name.main_station .ico{
    background-image:url('ico/ico_main_station_32.png');
}
#listbox .scroller .item .name.moon .ico {
    background-image:url('ico/ico_moon_32.png');
}
#listbox .scroller .item .name.my_ship .ico,
#listbox .scroller .item .name.main_ship .ico,
#listbox .scroller .item .name.ship .ico {
    background-image:url('ico/ico_spacecraft_32.png');
}
#listbox .scroller .item .name.wp .ico {
    background-image:url('ico/ico_wp_32.png');
}
#listbox .scroller .item .name.wh .ico,
#listbox .scroller .item .name.wormhole .ico,
#listbox .scroller .item .name.far_wormhole .ico{
    background-image:url('ico/ico_wh_32.png');
}

#listbox .scroller .item .name.borehole .ico,
#listbox .scroller .item .name.far_borehole .ico,
.right-context .radar .borehole .icon{
    background-image:url('ico/ico_rig_128.png');
}
#listbox .scroller .item .name.station .ico,
#listbox .scroller .item .name.neutral_station .ico,
#listbox .scroller .item .name.enemy_station .ico,
#listbox .scroller .item .name.ally_station .ico,
#listbox .scroller .item .name.own_station .ico,
#listbox .scroller .item .name.npc_station .ico,
.right-context .radar .own_station .icon,
.right-context .radar .ally_station .icon,
.right-context .radar .enemy_station .icon,
.right-context .radar .npc_station .icon,
.right-context .radar .neutral_station .icon{
    /*background-image:url('ico/viewcontrols_stations_32.png');*/
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='white' stroke-width='6' /></svg>");
}

#listbox .scroller .item .name.site .ico {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><polygon points='32,62 2,2 62,2' stroke='rgb(255, 255, 255)' fill='none' stroke-width='4'/><polygon points='32,42 16,12 48,12' fill='rgb(255, 255, 255)'/></svg>");
}


.right-context .radar .site .icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><polygon points='32,62 2,2 62,2' stroke='rgb(249, 223, 16)' fill='none' stroke-width='4'/><polygon points='32,42 16,12 48,12' fill='rgb(249, 223, 16)'/></svg>");
}

#listbox .scroller .item .name.main_station .ico,
.right-context .radar .main_station .icon{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='16' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='6' stroke='none' fill='white' stroke-width='6' /></svg>");
}

#listbox .scroller .item .name.this_player_fleetship .ico,
.right-context .radar .this_player_fleetship .icon{
    background-image:url('ico/ico_fleetship_32.png');
}

#listbox .scroller .item .name.enemy_player_fleetship .ico,
.right-context .radar .enemy_player_fleetship .icon{
    background-image:url('ico/ico_fleetship_32.png');
}

#listbox .scroller .item .name.this_player_base .ico,
.right-context .radar .this_player_base .icon{
    background-image:url('ico/ico_spacecraft_32.png');
}

listbox .scroller .item .name.satellite .ico,
.right-context .radar .radarelemt.satellite .icon{
    background-image:url('ico/ico_satellite2_16.png');
}

#listbox .scroller .item .name.stone .ico,
.right-context .radar .radarelemt.fragment .icon{
    background-image:url('ico/ico_asteroid_32.png');
}
#listbox .scroller .item .name.asteroid .ico,
#listbox .scroller .item .name.far_asteroid .ico,
.right-context .radar .radarelemt.asteroid .icon{
    background-image:url('ico/viewcontrols_asteroids_32.png');
}
#listbox .scroller .item .name.enemy_player_base .ico,
.right-context .radar .enemy_player_base .icon{
    background-image:url('ico/ico_ship_16.png');
}
#listbox .scroller .item .name.star .ico,
#listbox .scroller .item .name.far_star .ico{
    background-image:url('ico/ico_star_32.png');
}


#listbox .scroller .item .name.object .ico {
    background-image:url('ico/ico_object_32.png');
}

#listbox .scroller .item .name.this_debris .ico,
#listbox .scroller .item .name.neutral_debris .ico,
#listbox .scroller .item .name.enemy_debris .ico,

.right-context .radar .this_debris .icon,
.right-context .radar .neutral_debris .icon,
.right-context .radar .enemy_debris .icon{
    background-image:url('ico/ico_debris_16.png');
}
#listbox .scroller .item .name.this_container .ico,
#listbox .scroller .item .name.neutral_container .ico,
#listbox .scroller .item .name.enemy_container .ico,

.right-context .radar .this_container .icon,
.right-context .radar .neutral_container .icon,
.right-context .radar .enemy_container .icon{
    background-image:url('ico/ico_container_16.png');
}
#listbox .scroller .item .name.this_resourcecontainer .ico,
#listbox .scroller .item .name.neutral_resourcecontainer .ico,
#listbox .scroller .item .name.enemy_resourcecontainer .ico,
.right-context .radar .this_resourcecontainer .icon,
.right-context .radar .neutral_resourcecontainer .icon,
.right-context .radar .enemy_resourcecontainer .icon{
    background-image:url('ico/ico_container_16.png');
}
#listbox .scroller .item .name.this_rescuepod .ico,
#listbox .scroller .item .name.enemy_rescuepod .ico,
.right-context .radar .this_rescuepod .icon,
.right-context .radar .enemy_rescuepod .icon{
    background-image:url('ico/ico_box_16.png');
}
#listbox .scroller .item .name.this_rescuepod .ico,
#listbox .scroller .item .name.enemy_rescuepod .ico,
.right-context .radar .this_rescuepod .icon,
.right-context .radar .enemy_rescuepod .icon{
    background-image:url('ico/ico_rescue_16.png');
}
#listbox .scroller .item .name.this_corpse .ico,
#listbox .scroller .item .name.enemy_corpse .ico,
.right-context .radar .this_corpse .icon,
.right-context .radar .enemy_corpse .icon{
    background-image:url('ico/ico_corpse_16.png');
}
#listbox .scroller .item .name.npc .ico,
.right-context .radar .npc .icon{
    background-image:url('ico/ico_npc_16.png');
}
#listbox .scroller .item .name.npcs_group .ico,
.right-context .radar .npcs_group .icon{
    background-image:url('ico/ico_npc_group_16.png');
}
#listbox .scroller .item .name.objects_group .ico,
.right-context .radar .objects_group .icon{
    background-image:url('ico/ico_object_group_16.png');
}

#listbox .scroller .item .name.neutral_salvagable .ico,
.right-context .radar .neutral_salvagable .icon,
#listbox .scroller .item .name.enemy_salvagable .ico,
.right-context .radar .enemy_salvagable .icon,
#listbox .scroller .item .name.this_salvagable .ico,
.right-context .radar .this_salvagable .icon{
    background-image:url('ico/ico_object_32.png');
}

#listbox .scroller .item .name.waypoint .ico,
.right-context .radar .waypoint .icon{
    background-image:url('ico/ico_waypoint_16.png');
}





#mapbox {
    position: absolute;
    width: 640px;
    height: 450px;
    background-color: var(--hud_backgroundcolor);
    z-index: 99999999;
}

#mapbox:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#mapbox:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#mapbox .image {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 45px;
    left: 0px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
}




#mapbox .attributes{
    position: absolute;
    bottom: 0px;
    right: 0px;

    left: 180px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background-color: var(--hud_tablebackgroundcolor);
    box-sizing: border-box;
    padding: 0px;
}





#mapbox .attributes table
{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#mapbox .attributes th
{
    color: rgb(0,130,156);
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;

    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    line-height: 12px;
    width: 50%;
}
#mapbox .attributes td{
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    line-height: 12px;

    padding-left: 10px;
}









#mapbox .actions{
    position: absolute;
    top: 50px;
    left: 5px;
}
.windowedcommand,
.windowedmapcommand{
    display: block;
    box-sizing: border-box;
    position: relative;
    height: 45px;
    width: 85px;
    /* float: left; */

    background-color: rgba(255,255,255,1);
    margin-bottom: 5px;
    font-size: 25px;
    padding: 5px;
    line-height: 52px;
    letter-spacing: -2px;
    cursor: pointer;

}
.windowedcommand:before,
.windowedmapcommand:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 20px;
    background-position: 60px 20px;
    background-repeat: no-repeat;

    font-size: 10px;
    box-sizing: border-box;
    padding: 4px;


    line-height: 12px;
    letter-spacing: 0px;
    color: white;
    filter: invert(100%);
}
.windowedcommand:hover,
.windowedmapcommand:hover{

    animation:blink 100ms linear 2;

}
.windowedcommand:hover:before,
.windowedmapcommand:hover:before{

}
.windowedcommand.switchorbit:before,
.windowedmapcommand.switchorbit:before{
    content: 'CONNECT DEVICES';
    background-image:url('ico/ico_globe_128.png');
}
.windowedcommand.dock:before,
.windowedmapcommand.dock:before{
    content: 'DOCK';
    background-image:url('ico/ico_dock_128.png');
}
.windowedcommand.flyto:before,
.windowedmapcommand.flyto:before{
    content: 'FLY TO';
    background-image:url('ico/ico_fly_128.png');
}
.windowedcommand.probe:before,
.windowedmapcommand.probe:before{
    content: 'SEND PROBE';
    background-image:url('ico/ico_probe_128.png');
}
.windowedcommand.globe:before,
.windowedmapcommand.globe:before{
    content: 'SURFACE MAP';
    background-image:url('ico/ico_globe_128.png');
}
.windowedcommand.planetmap:before,
.windowedmapcommand.planetmap:before{
    content: 'SURFACE MAP';
    background-image:url('ico/ico_colony_64.png');
}
.windowedcommand.asteroidmap:before,
.windowedmapcommand.asteroidmap:before{
    content: 'SURFACE MAP';
    background-image:url('ico/ico_rig_64.png');
}
.windowedcommand.switchtoship:before,
.windowedmapcommand.switchtoship:before{
    content: 'SWITCH';
    background-image:url('ico/ico_switchview_128.png');
}
.windowedcommand.fight:before,
.windowedmapcommand.fight:before{
    content: 'ATTACK';
    background-image:url('ico/ico_fight_128.png');
}

.windowedcommand.selectrig:before,
.windowedmapcommand.selectrig:before{
    content: 'SELECT RIG';
    background-image:url('ico/ico_rig_64.png');
}

.windowedcommand.setflyto:before{
    content: 'START';
    background-image:url('ico/ico_fly_128.png');
}





.windowedcommand.deorbit:before {
    content: 'DETACH';
    background-image:url('ico/ico_detach2_128.png');
}
.windowedcommand.offline:before {
    content: 'PUT OFFLINE';
    background-image:url('ico/ico-power-128.png');
}
.windowedcommand.weaponsfitting:before {
    content: 'FIT WEAPONS';
    background-image:url('ico/ico_weaponslots_128.png');
}
.windowedcommand.weaponsetup:before {
    content: 'CONFIG BATTLE';
    background-image:url('ico/ico_weaponslots_128.png');
}


#mapboxsector{
    position:absolute;
    height: 635px;
    width: 890px;
    background-color: rgb(0,0,0);
    z-index:99999999;
    border: 10px solid rgba(0,90,108,0.4);
}
#mapboxsector .title{
    font-size:13px;
}
#mapboxsector .image{
    position: absolute;
    right: 0px;
    height: 370px;
    top: 0px;
    left: 0px;
    background: url('background-grid.png');
}
#mapboxsector .image #scenebox{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}
#mapboxsector .attributes{
    position: absolute;
    top: 325px;
    right: 0px;
    left: 0px;
    border-spacing: 0px;
    background: rgba(0,53,64,0.8);
}
#mapboxsector .attributes table{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#mapboxsector .attributes th{
    color: rgb(0,130,156);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;

    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(0,85,102);
    vertical-align: middle;
    line-height: 12px;

    width: 25%;
}
#mapboxsector .attributes td{
    font-size: 12px;
    color: rgb(6,213,255);
    padding: 5px;
    border-bottom: 1px solid rgb(0,85,102);
    text-transform: uppercase;
    line-height: 12px;

    padding-left: 10px;
}
#mapboxsector .whlist{
    padding: 0px;
    position: absolute;
    top: 371px;
    right: 0px;
    left: 0px;
    border-spacing: 0px;
    background: rgba(0,53,64,0.8);
    height: 104px;
    box-sizing: border-box;
}

#mapboxsector .whlist #whlist-to{
    width: 50%;
    float: right;
    padding: 3px;
    box-sizing: border-box;
}

#mapboxsector .whlist #whlist-from{
    width: 50%;
    float: left;
    padding: 3px;
    box-sizing: border-box;
}




#mapboxsector .whlist .item{
    display: block;
    box-sizing: border-box;
    position: relative;
    height: 45px;
    width: 215px;
    float: left;
    background-color: rgb(0,93,112);
    margin: 2px;
    font-size: 25px;
    padding: 5px;
    line-height: 52px;
    letter-spacing: -2px;
    cursor: pointer;
    color: white;
}
#mapboxsector .whlist .item.to:before{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 20px;
    background-position: 190px 21px;
    background-repeat: no-repeat;
    font-size: 10px;
    box-sizing: border-box;
    padding: 4px;
    color: rgb(255,255,255);

    line-height: 15px;
    letter-spacing: 0px;
    content: 'WORMHOLE';
    background-image: url('ico/ico_wh_out_16.png');
}

#mapboxsector .whlist .item.from:before{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 20px;
    background-position: 190px 21px;
    background-repeat: no-repeat;
    font-size: 10px;
    box-sizing: border-box;
    padding: 4px;
    color: rgb(255,255,255);

    line-height: 15px;
    letter-spacing: 0px;
    content: 'WORMHOLE';
    background-image: url('ico/ico_wh_in_16.png');
}
#mapboxsector .whlist .item:hover{
    color:rgb(255,255,255);
}

#mapboxsector .planetlist{
    padding: 5px;
    position: absolute;
    top: 475px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    background-color: rgba(0,255,255,0.2);
}
#mapboxsector .planetlist .item{
    font-size:13px;
    padding:5px;
    height:140px;
    width:140px;
    color:rgba(0,255,255,0.5);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:black;
    margin-right:5px;
}
#mapboxsector .planetlist div span,.mapactionsector .starlist div span{
    display:block;
    font-size:13px;
    color:rgb(255,255,255);
}



#setwaypoint,
#editwaypoint{
    position:absolute;
    width:360px;
    height:450px;

}

#setwaypoint:before,
#editwaypoint:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(40,40,40);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#setwaypoint .attributes,
#editwaypoint .attributes {
    position: absolute;
    top: 90px;
    right: 0px;
    left: 0px;
    color: white;
    text-align: left;
    border-spacing: 0px;
}
#setwaypoint .attributes table,
#editwaypoint .attributes table{
    padding: 0px;
    border-spacing: 0px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
#setwaypoint .attributes th,
#editwaypoint .attributes th{
    text-align: right;
    font-size: 12px;
    text-transform: uppercase;
}
#setwaypoint .attributes th.radio,
#editwaypoint .attributes th.radio {
    text-align: right;
    border: none;
    padding-top: 1px;
    padding-bottom: 1px;
}
#setwaypoint .attributes td.radio,
#editwaypoint .attributes td.radio {
    text-align: left;
    border: none;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 12px;
    text-transform: uppercase;
}
#setwaypoint .attributes td.radio-spacr,
#editwaypoint .attributes td.radio-spacr {
    text-align: left;
    border: none;
    padding: 1px;
    width: 5%;
}
#setwaypoint .attributes td.buttons,
#editwaypoint .attributes td.buttons {
    text-align: right;
    border: none;
    padding: 15px;
}
#setwaypoint .attributes td #setwaypoint-name,
#editwaypoint .attributes td #setwaypoint-name {
    text-align: left;
    padding: 3px 10px;
}

#setwaypoint .attributes td.duration-bar,
#editwaypoint .attributes td.duration-bar {
    text-align: center;
}

#setwaypoint .attributes td.duration-bar .duration-title,
#editwaypoint .attributes td.duration-bar .duration-title {
    margin-top: 10px;
    text-transform: uppercase;
}

#setwaypoint .attributes td.duration-bar .input,
#editwaypoint .attributes td.duration-bar .input {
    margin-top: 5px;
}




#setwaypoint .actions,
#editwaypoint .actions{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}




#satselect,
#asteroidsurfaceselectrigbox {
    position:absolute;
    top:calc(50% - 350px);
    left:calc(50% - 350px);
    height:700px;
    width: 700px;
    z-index: 999999;
}

#satselect:before,
#asteroidsurfaceselectrigbox:before {

    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);
    background-size: 1400px;
    ;
    background-position: bottom;
    background-repeat: no-repeat;
    clip-path: var(--clip_desktop_new_satellite_borehole);
    z-index: -1;
}

#asteroidsurfaceselectrigbox:before {
    background-color: unset;

    background-image: linear-gradient(rgb(16 25 48 / 90%) 0%, rgb(2 2 21 / 40%) 100%), url(bckgr-miner.jpg);


}



#satselect .info,
#asteroidsurfaceselectrigbox .info {
    padding-top: 150px;
    padding-top: 150px;
    text-align: center;
    color: rgb(200,200,200);
    font-size: 16px;
    text-transform: uppercase;
}

#satselect .info .small,
#asteroidsurfaceselectrigbox .info .small {
    padding-top: 12px;
    font-size: 13px;
    text-transform: initial;
}

#satselect .drones,
#asteroidsurfaceselectrigbox .drones {
    position: absolute;
    bottom: 15px;
    right: 10px;
    left: 15px;
    top: 45px;
}

#satselect .drones .drone,
#asteroidsurfaceselectrigbox .drones .drone {
    position: relative;
    margin: 0px 10px 10px 0px;
    height: 150px;
    color: white;
}

#satselect .drones .drone.available,
#asteroidsurfaceselectrigbox .drones .drone.available {
    cursor: pointer;
}

#satselect .drones .drone.unavailable,
#asteroidsurfaceselectrigbox .drones .drone.unavailable {
    color: var(--hud_popiseck_gray_color);
}

#satselect .drones .drone:before,
#asteroidsurfaceselectrigbox .drones .drone:before {

    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(16,21,38);

    clip-path: var(--clip_desktop_new_satellite_borehole_item);
    z-index: -1;
}

#satselect .drones .drone:not(.unavailable):hover:before,
#asteroidsurfaceselectrigbox .drones .drone:not(.unavailable):hover:before {
    background-image: radial-gradient(ellipse at 20%, rgb(0 112 202 / 20%) 0%, transparent 80%);
}

#satselect .drones .drone.unavailable:before,
#asteroidsurfaceselectrigbox .drones .drone.unavailable:before {
    background-color: rgb(38,38,38);
}



#satselect .drones .drone .thint,
#asteroidsurfaceselectrigbox .drones .drone .thint {
    right: 530px;
    top: 7px;
}



#satselect .drones .drone .uinfo,
#asteroidsurfaceselectrigbox .drones .drone .uinfo  {
    font-size: 12px;
    background-color: var(--hud_invalid_background);
    color: var(--hud_invalid_text);
    padding: 5px 10px;
    text-align: center;
    width: auto;
    display: inline-block;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    position: absolute;
    top: 45px;
    line-height: 16px;
    left: 50%;
    transform: translateX(-50%);
}

#satselect .drones .drone img,
#asteroidsurfaceselectrigbox .drones .drone img {
    position: absolute;
    left: 5px;
    top: 5px;
    height: calc(100% - 20px);
    filter: grayscale(1) brightness(1) drop-shadow(0px 0px 5px rgba(0, 112, 202, 0.5)) drop-shadow(0px 0px 45px rgba(0 ,112 ,202 ,0.5));
}

#satselect .drones .drone.unavailable img,
#asteroidsurfaceselectrigbox .drones .drone.unavailable img {
    filter: grayscale(1);
}

#satselect .drones .drone .name,
#asteroidsurfaceselectrigbox .drones .drone .name {
    font-size: 16px;

    text-transform: uppercase;
    line-height: 16px;
    display: inline-block;
    position: absolute;
    left: 140px;
    top: 11px;
    padding: 2px 5px;
}

#satselect .drones .drone .descr,
#asteroidsurfaceselectrigbox .drones .drone .descr {

    position: absolute;
    left: 144px;
    font-size: 13px;
    right: 285px;
    bottom: 5px;
    top: 37px;
    line-height: 18px;
}
#satselect .drones .drone .attributes,
#asteroidsurfaceselectrigbox .drones .drone .attributes {
    position: absolute;
    border-spacing: 0px;
    width: 260px;
    right: 10px;
    top: 33px;
}
#satselect .drones .drone .attributes th,
#asteroidsurfaceselectrigbox .drones .drone .attributes th {
    color: var(--hud_popiseck_gray_color);
    padding: 0px;
    text-transform: uppercase;
    font-size: 10px;

    text-align: right;
    text-transform: uppercase;
    vertical-align: top;
    line-height: 10px;
    width: 40%;
}
#satselect .drones .drone .attributes td,
#asteroidsurfaceselectrigbox .drones .drone .attributes td {
    font-size: 14px;
    padding: 0px;
    height: 30px;
    vertical-align: top;
    line-height: 12px;
    padding-left: 10px;
}

#satselect .drones .drone.available:hover .name,
#asteroidsurfaceselectrigbox .drones .drone.available:hover .name{
    animation: blink 100ms linear 2;
    background-color: white;
    color: black;
    font-family: var(--fontFaimly_button);
}


.info {
    position: relative;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    color: rgba(200, 200, 200, 1);
    /* text-transform: uppercase; */
    text-align: center;
    line-height: 19px;
    grid-column: 1 / -1;
    font-size: 14px;
}
.info .small {

    font-size: 10px;
    padding: 5px;
}


#boreholestopconfirmdom{
    position: absolute;
    height: 250px;
    width: 500px;
    z-index: 999999;
    animation: blink 100ms linear 2 alternate;
}

#boreholestopconfirmdom:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}


#boreholestopconfirmdom .info{
    position: absolute;
    top: 80px;
    width: 400px;
    margin-left: calc(50% - 200px);
    z-index: 999999;
    font-size: 15px;
    text-transform: none;
}

#boreholestopconfirmdom button{
    position: absolute;
    bottom: 50px;
    width: 200px;
    margin-left: calc(50% - 100px);
    z-index: 999999;
}

#boreholeScene .removeborehole{
    position: absolute;
    bottom: 35px;
    left: 40px;
    right: 40px;
    text-align: center;
}

#boreholeScene .removeborehole.quest-hide{
    display: none !important;
}

#boreholeScene .removeborehole .removelink{
    color: white;

    text-decoration: underline;
    cursor: pointer;
}

#boreholeScene .removeborehole .removelink:hover{
    text-decoration: none;
    animation: blink 100ms linear 2 alternate;
}





#boreholeScene{
    position: absolute;
    height: 780px;
    width: 1000px;
    z-index: 999999;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.15)), url(bckgr-miner.jpg);
    background-size: auto 102%;
    background-position: center -10px;
    background-repeat: no-repeat;
    clip-path: var(--clip_desktop_boreholescene);

}


#boreholeScene #scenebox{
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}
#boreholeScene .title{
}
#boreholeScene .attributes{
    position: absolute;
    top: 65px;
    right: 40px;
    left: 40px;
    border-spacing: 0px;
}
#boreholeScene .attributes table{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#boreholeScene .attributes th{
    color: var(--hud_tablecolor);
    padding: 0px;
    font-size: 12px;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    vertical-align: top;
    line-height: 12px;
    width: 15%;

}
#boreholeScene .attributes td{
    font-size: 13px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    text-transform: uppercase;

    padding-left: 10px;
    text-align: right;
    background-image: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%), linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%), linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;
}

#boreholeScene .attributes .onclick{
    background-color: white;
    text-shadow: none;
    color: black;
    white-space: nowrap;
    padding: 0px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
}

#boreholeScene .attributes .onclick:hover{
    animation: blink 100ms linear 2 alternate;
}
#boreholeScene .attributes .header,
#boreholeScene .modules .header,
#boreholeScene .processing .header{
    position: absolute;
    color: white;
    text-transform: uppercase;
    font-size: 25px;
    height: auto;
    background: none;
    left: 10px;
    right: 10px;
    text-align: center;
    top: 15px;
    font-family: var(--fontFaimly_header);

}


#boreholeScene .slots{
    position: absolute;
    height: 95px;
    top: 140px;
    right: 10px;
    left: 10px;
    color: white;
    text-align: center;
}

#boreholeScene .approachbtn .button .thint{
    top: 5px;
}

#boreholeScene .info{
    position: absolute;
    top: 295px;
    right: 10px;
    left: 10px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}
#boreholeScene .info h2{
    font-weight: normal;
    font-size: 25px;
    color: white;
    margin: 0px 0px 30px;
    font-family: var(--fontFaimly_header);
}


#boreholeScene .info p{
    display: block;
    font-size: 14px;
}
#boreholeScene .info ul{
    display: block;
    font-size: 13px;
    width: 350px;
    margin: 20px auto 40px auto;
    list-style-type: none;
    padding-left: 90px;
}
#boreholeScene .info ul li{
    display: block;

    text-align: left;
    padding-left: 8px;
    position: relative;
    line-height: 15px;
}

#boreholeScene .info ul li:before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    left: -17px;
    top: 5px;
}





#boreholeScene .processing{
    position: absolute;

    top: 240px;
    right: 15px;
    left: 15px;
    color: white;

}
#boreholeScene .processing .tabs{
    position: absolute;
    top: 155px;
    left: 0px;
    right: 0px;
    min-height: 150px;
}

#boreholeScene .processing .tabs:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: -10px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline);
}

#boreholeScene .processing .tabs .tab{
    position: relative;
    width: calc(25% - 10px);
    float: left;
    box-sizing: border-box;
    height: 180px;
    margin: 5px 5px 0px 0px;
}
#boreholeScene .processing .tabs .tab:before {
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    /*background-color: rgb(60,60,60);*/
    content: '';

    clip-path: var(--clip_borehole_container);
}



#boreholeScene .processing .tabs .tab.delivery{
    width: 50%;
}
#boreholeScene .processing .tabs .tab .smallheader{
    position: absolute;
    top: 13px;
    left: 17px;
    color: white;
    text-transform: uppercase;
    text-align: left;

    font-size: 14px;

}

#boreholeScene .processing .tabs .tab .smallheader:before {
    display: none;
}
#boreholeScene .processing .tabs .tab .text{
    position: absolute;
    top: 45px;
    left: 19px;

    right: 15px;
}
#boreholeScene .processing .tabs .tab .text table{
    border-spacing:0px;
    border-collapse:separate;
    width: 100%;
}
#boreholeScene .processing .tabs .tab .text table th{
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;


    text-align: right;
    /* padding-left: 10px; */
    text-transform: uppercase;
    /* vertical-align: bottom; */
    line-height: 12px;
    width: 35%;
    text-shadow: none;
}





#boreholeScene .processing .tabs .tab .text table td{
    font-size: 13px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    line-height: 12px;
    padding-left: 10px;
    text-align: right;


    text-shadow: none;

}

#boreholeScene .processing .tabs .tab .text table td.value{

    background-image: var(--hud_valueline_bckimg);

    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;

}

#boreholeScene .processing .tabs .tab .text table td.mu{
    text-align: left;
    width: 20px;
    font-size: 10px;
    padding: 0px;
    line-height: 10px;
    vertical-align: middle;
}


#boreholeScene .actions{
    position: absolute;
    bottom: 70px;
    left: 40px;
    right: 40px;
    text-align: center;
}

#boreholeScene .actions .thint{
    top: unset;
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: calc(100% - -5px);
}

#boreholeScene .actions .thint:before  {
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    bottom: -20px;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
}

#boreholeScene .actions .info{
    animation: highlited 1000ms linear infinite;
    top: -30px;
    /* bottom: 18px; */
    text-transform: uppercase;

    padding: 0px;
}

#boreholeScene .actions button,
#boreholeScene .actions .button {
    margin: 0px 5px;
    display: inline-block;
}

#boreholeScene .processing .countingtext{
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    min-height: 150px;
}
#boreholeScene .processing .smallheader{
    position: absolute;
    top: 104px;
    left: 10px;
    right: 10px;
    color: white;
    text-transform: uppercase;
    font-size: 28px;
    text-align: center;
    font-family: var(--fontFaimly_header);


}
#boreholeScene .processing .smallheader:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: -10px;
    height: 4px;
    background-color: white;

    clip-path: var(--clip_underline);
}



#boreholeScene .processing .battery {
    position: absolute;
    top: 60px;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

#boreholeScene .processing .battery .battery_barbox {
    height: 28px;
    width: calc((14px * var(--segment-count, 1)));
    min-width: 24px;
    border-width: 3px;
    border-right-width: 4px;
}

#boreholeScene .processing .battery .battery_barbox:after {
    right: -7px;
}

#boreholeScene .processing .battery .battery_barbox.empty:before {

    font-size: 14px;

}

#boreholeScene .processing .battery .battery_barbox.empty {
    border-width: 3px;
}

#boreholeScene .processing .battery .battery_barbox .bar {
    left: 3px;
    bottom: 3px;
    height: calc((100% - 6px));
}

#boreholeScene .processing .battery .energycap {
    position: absolute;
    top: 17px;
    left: 0px;
    width: 140px;
    height: 7px;
    color: white;
    text-transform: uppercase;
    font-size: 35px;
    text-align: right;

    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: rgb(33,39,43);
    box-sizing: border-box;
    z-index: 1;

}

#boreholeScene .processing .battery .energycap .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#boreholeScene .processing .battery .energycap .txt {
    position: absolute;
    top: 15px;

    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 10px;
    text-align: center;

    white-space: nowrap;
}




#boreholeScene .processing .battery .baterrycap {
    position: absolute;
    top: 17px;
    right: 0px;
    width: 140px;
    height: 7px;
    color: white;
    text-transform: uppercase;
    font-size: 35px;
    text-align: right;

    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: rgb(33,39,43);
    box-sizing: border-box;
    z-index: 1;

}

#boreholeScene .processing .battery .baterrycap .bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#boreholeScene .processing .battery .baterrycap .txt {
    position: absolute;
    top: 15px;

    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 10px;
    text-align: center;

    white-space: nowrap;
}



#boreholeScene .processing .countingtext table{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#boreholeScene .countingtext table th{
    color: rgb(0,130,156);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(0,85,102);
    vertical-align: middle;
    line-height: 12px;
    width: 25%;
}
#boreholeScene .countingtext table td{
    font-size: 12px;
    color: rgb(6,213,255);
    padding: 5px;
    border-bottom: 1px solid rgb(0,85,102);
    line-height: 12px;
    padding-left: 10px;
    text-align: right;
    padding-right: 12%;
}
#boreholeScene .counter{
    position: absolute;
    height: 50px;
    bottom: 100px;
    right: 10px;
    left: 10px;
    color: white;
}
#boreholeScene .counter .counting{
    position:absolute;
    bottom:40px;
    left:20px;
    right:20px;
    height:10px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: rgb(33,39,43);

}
#boreholeScene .counter .counting .bar{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:0%;
    background-color:white;
}
#boreholeScene .counter .counting .bar_text{
    position: absolute;
    position: absolute;
    top: -33px;
    left: 0px;
    right: 0px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: white;
    font-family: var(--fontFaimly_header);
}


#cargoContainerScene{
    position:absolute;
    height:730px;
    width: 700px;
    border: 10px solid rgba(0,90,108,0.4);
    z-index: 999999;
}

#placecolonymodule {
    position: absolute;
    top: 60px;
    left: 20px;
    right: 20px;
    bottom: 45px;
    background: linear-gradient(to bottom,rgba(0,0,0,0.1) 0%, rgba(0,50,75,0.4) 10%, rgba(0,50,75,0.7) 60%, rgba(0,50,75,0.4) 90%, rgba(0,0,0,0.1) 100%);
    z-index: 99999999;
}

#placecolonymodule .title{
    position:absolute;
    height:37px;
    width:100%;
    top:0px;
    left:0px;
    color:white;
    padding-left:10px;
    box-sizing:border-box;
    background:linear-gradient(to right,rgba(103,323,237,0.35) 0%,rgba(0,50,75,0.4) 60%,rgba(0,0,0,0) 100%);
    line-height:37px;
    text-transform:uppercase;
    text-decoration:none;
    text-transform:uppercase;
    font-size:24px;
    font-weight:bold;
    text-shadow:0px 0px 10px rgb(0,255,255);
}
#placecolonymodule .actions{
    position:absolute;
    top:40px;
    height:46px;
    right:0px;
    left:0px;
    color:white;
    text-align:left;
    border-spacing:0px;
    text-align:center;
}
#placecolonymodule .zalozky{
    position: absolute;
    top: 46px;
    right: 5px;
    left: 5px;
    height: 35px;
    text-align: left;

    border-bottom: 3px solid rgb(51,116,118);

}

#placecolonymodule .zalozky span.active {
    background-color: rgb(51,116,118);

}

#placecolonymodule .zalozky span {
    color: rgb(0,255,255);
    text-transform: uppercase;
    display: inline-block;
    color: rgb(103,232,237);
    font-size: 16px;
    height: 100%;
    padding: 0px 10px;
    line-height: 35px;
    background-color: rgba(33,39,43,0.7);
    cursor: pointer;
}


#placecolonymodule .modules-ready{
    position: absolute;
    top: 100px;
    right: 5px;
    left: 5px;
    bottom: 10px;
    text-align: left;
}
#placecolonymodule .modules-ready .module{
    position: relative;
    width: 310px;
    height: 230px;
    background: rgba(43,49,53,0.7);
    margin: 0px 5px 5px 0px;
    cursor: pointer;
    color: white;
    text-align: left;
    display: block;
    float: left;
}
#placecolonymodule .modules-ready .module .buildinginfo{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-size: cover;
}
#placecolonymodule .modules-ready .module .buildingparms{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#placecolonymodule .modules-ready .module .info{
    width:16px;
    height:16px;
    text-align:center;
    position:absolute;
    top:5px;
    right:5px;
    z-index: 9999999;
}
#placecolonymodule .modules-ready .module .name{
    font-size: 17px;
    color: rgb(255,255,255);
    text-align: center;
    position: absolute;
    top: 145px;
    left: 0px;
    right: 0px;
    height: 43px;
    line-height: 43px;
    text-transform: uppercase;

    text-shadow: 0px 0px 15px white;
}
#placecolonymodule .modules-ready .module .name span{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

#placecolonymodule .modules-ready .module .buttons{
    position: absolute;
    top: 188px;
    left: 10px;
    right: 10px;
    height: 35px;
    font-size: 12px;
    color: gray;
    text-align: center;
}
#placecolonymodule .modules-ready .module .buttons button{
    margin-top: 5px;
}
#placecolonymodule .modules-ready .module .parms{
    width:100%;
    font-size:12px;
    margin-top:10px;
}
#placecolonymodule .modules-ready .module .parms td.parmname{
    font-size:18px;
    color:rgb(103,232,237);
    text-shadow:0px 0px 10px rgb(103,232,237);
    text-align:center;
}
#placecolonymodule .modules-ready .module .parms td{
    border-bottom:0px;
    vertical-align:middle;
    width:50%;
    padding-left:10px;
}
#placecolonymodule .modules-ready .module .parms th{
    border-bottom:0px;
    vertical-align:middle;
    text-align:right;
    font-weight:normal;
    color:gray;
}
#placecolonymodule .modules-ready{
    position: absolute;
    top: 100px;
    right: 5px;
    left: 5px;
    bottom: 10px;
    text-align: left;
}

#placecolonymodule .modules-tobuild{
    position: absolute;
    top: 100px;
    right: 5px;
    left: 5px;
    bottom: 10px;
    text-align: left;
}
#placecolonymodule .modules-tobuild .module{
    position: relative;
    width: 310px;
    height: 230px;
    background: rgba(43,49,53,0.7);
    margin: 0px 5px 5px 0px;
    cursor: pointer;
    color: white;
    text-align: left;
    display: block;
    float: left;
}
#placecolonymodule .modules-tobuild .module .buildinginfo{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-size: cover;
}


#placecolonymodule .modules-tobuild .module .buildinginfo .resources{
    position: absolute;
    height: 100px;
    top: 10px;
    left: 50%;
    right: 10px;
}

#placecolonymodule .modules-tobuild .module .buildinginfo .resources div{
    position: relative;
    font-size: 12px;
    padding-left: calc( 100% - 50px );
    box-sizing: border-box;
    height: 18px;
    line-height: 19px;
    text-transform: uppercase;
    background: rgba(51,200,200,0.3);
    margin-bottom: 2px;
    color: gold;
}

#placecolonymodule .modules-tobuild .module .buildinginfo .resources div span{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 60px;
    text-align: right;
    color: white;
}


#placecolonymodule .modules-tobuild .module .buildingparms{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#placecolonymodule .modules-tobuild .module .info{
    width:16px;
    height:16px;
    text-align:center;
    position:absolute;
    top:5px;
    right:5px;
    z-index: 9999999;
}
#placecolonymodule .modules-tobuild .module .name{
    font-size: 17px;
    color: rgb(255,255,255);
    text-align: center;
    position: absolute;
    top: 145px;
    left: 0px;
    right: 0px;
    height: 43px;
    line-height: 43px;
    text-transform: uppercase;

    text-shadow: 0px 0px 15px white;
}

#placecolonymodule .modules-tobuild .module .name span{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}



#placecolonymodule .modules-tobuild .module .time{
    font-size: 18px;
    color: gold;
    text-align: right;
    position: absolute;
    top: 188px;
    left: 10px;
    right: calc( 10px + 150px);
    height: 35px;
    line-height: 36px;

}
#placecolonymodule .modules-tobuild .module .buttons{
    position: absolute;
    top: 188px;
    left: 140px;
    right: 10px;
    height: 35px;
    font-size: 12px;
    color: gray;
    text-align: right;
}
#placecolonymodule .modules-tobuild .module .buttons button{
    margin-top: 5px;
}
#placecolonymodule .modules-tobuild .module .parms{
    width:100%;
    font-size:12px;
    margin-top:10px;
}
#placecolonymodule .modules-tobuild .module .parms td.parmname{
    font-size:18px;
    color:rgb(103,232,237);
    text-shadow:0px 0px 10px rgb(103,232,237);
    text-align:center;
}
#placecolonymodule .modules-tobuild .module .parms td{
    border-bottom:0px;
    vertical-align:middle;
    width:50%;
    padding-left:10px;
}
#placecolonymodule .modules-tobuild .module .parms th{
    border-bottom:0px;
    vertical-align:middle;
    text-align:right;
    font-weight:normal;
    color:gray;
}
#placecolonymodule .modules-tobuild{
    position: absolute;
    top: 100px;
    right: 5px;
    left: 5px;
    bottom: 10px;
    text-align: left;
}












#rightcolumn{
    position:absolute;
    top:0px;
    right:0px;
    z-index:100000;
}

.RightColumnSectorMap{
    width:315px;
    position:absolute;
    top:151px;
    right:-315px;
    z-index:100000;
    height:100%;
    border-spacing:0px;
    transition:right 0.1s ease;
    background-color: var(--hud_backgroundcolor);
    vertical-align:top;
}
.RightColumnSectorMap:after{
    content:"";
    position:absolute;
    top:0px;
    left:-10px;
    right:315px;
    bottom:0px;
    z-index:-1;
}
.RightColumnSectorMap .mapRightItem{
    color:rgba(255,255,255,0.5);
    text-transform:uppercase;
    height: 20px;
    margin: 0px;
    line-height: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    font-size:10px;
    font-weight:normal;
    text-align:left;
    padding:0px 5px 0px 30px;
    cursor:pointer;
    background-position:10px center;
    background-repeat:no-repeat;
    background-size:16px;
}

.RightColumnSectorMap .mapRightItem:hover{
    color:rgba(255,255,255,0.9);
    background-color: rgb(0,85,102);
}
.RightColumnSectorMap .mapRightItem.star{
    background-image:url('ico/ico_star_32.png');
}
.RightColumnSectorMap .mapRightItem.planet{
    background-image:url('ico/ico_planet_32.png');
}
.RightColumnSectorMap .mapRightItem.my_ship,.RightColumnSectorMap .mapRightItem.main_ship{
    background-image:url('ico/ico_ship_32.png');
}
.RightColumnSectorMap .mapRightItem.moon{
    background-image:url('ico/ico_moon_32.png');
}
.RightColumnSectorMap .mapRightItem.colony{
    background-image:url('ico/ico_flag_32.png');
}
.RightColumnSectorMap .mapRightItem.asteroid{
    background-image:url('ico/ico_asteroid_32.png');
}
.RightColumnSectorMap .mapRightItem.wh{
    background-image:url('ico/ico_wh_32.png');
}
.RightColumnSectorMap .mapRightItem.cs{
    background-image:url('ico/ico_cs_32.png');
}
.RightColumnSectorMap .mapRightItem.wp{
    background-image:url('ico/ico_wp_32.png');
}
.RightColumnSectorMap td{
    padding:0px;
    vertical-align:top;
    overflow:hidden;
    position:relative;
}
#RightColumnSectorMapVerticalist{
    overflow:auto;
    position:relative;
    padding-bottom:200px;
    padding-top:20px;
}
.RightColumnSectorMap:hover{
    right:-5px;
}
.RightColumnSectorMap .tabsline{
    height:40px;
}
.RightColumnSectorMap .tabs div{
    position:relative;
    display:inline-block;
    height:35px;
    width:35px;
    color:white;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
    background-size:32px;
    opacity: 0.5;
}
.RightColumnSectorMap .tabs div:hover{
    opacity: 0.9;
}
.RightColumnSectorMap .tabs div.ships{
    background-image:url('ico/ico_ship_32.png');
}
.RightColumnSectorMap .tabs div.stars{
    background-image:url('ico/ico_star_32.png');
}
.RightColumnSectorMap .tabs div.planets{
    background-image:url('ico/ico_planet_32.png');
}
.RightColumnSectorMap .tabs div.asteroids{
    background-image:url('ico/ico_asteroid_32.png');
}
.RightColumnSectorMap .tabs div.wormholes{
    background-image:url('ico/ico_wh_32.png');
}
.RightColumnSectorMap .tabs div.stations2{
    background-image:url('ico/ico_cs_32.png');
}
.RightColumnSectorMap .tabs div.colonyes{
    background-image:url('ico/ico_flag_32.png');
}
.RightColumnSectorMap .tabs div.waypoints{
    background-image:url('ico/ico_wp_32.png');
}
.RightColumnSectorMap .tabs div.clicked{
    opacity: 1;
    background-size:28px;
}
.RightColumnSectorMap .tabs div.clicked:after{
    background:radial-gradient(rgba(0,255,255,0.3),rgba(0,255,255,0.2),rgba(0,0,0,0.0));
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    border:1px solid rgba(0,255,255,0.2);
    filter:blur(1px);
    transition:filter 0.2s linear;
    z-index:-1;
}
.RightColumnGalaxyMap{
    width:300px;
    position:absolute;
    top:70px;
    right:-300px;
    z-index:100000;
    height:100%;
    border-spacing:0px;
    transition:right 0.1s ease;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,50,75,0.4) 10%,rgba(0,50,75,0.6) 60%,rgba(0,50,75,0.4) 90%,rgba(0,0,0,0.1) 100%);
    vertical-align:top;
}
.RightColumnGalaxyMap:after{
    content:"";
    position:absolute;
    top:0px;
    left:-10px;
    right:300px;
    bottom:0px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.05) 0%,rgba(0,50,75,0.2) 10%,rgba(0,50,75,0.3) 60%,rgba(0,50,75,0.2) 90%,rgba(0,0,0,0.05) 100%);
    z-index:-1;
}
.RightColumnGalaxyMap .mapRightItem{
    color:rgba(255,255,255,0.5);
    text-transform:uppercase;
    font-size:11px;
    font-weight:normal;
    text-align:left;
    padding:3px 3px 3px 30px;
    cursor:pointer;
    background-position:10px center;
    background-repeat:no-repeat;
    background-size: 16px;
}
.RightColumnGalaxyMap .mapRightItem:hover{
    color:rgba(255,255,255,0.9);
    background-color:rgba(0,255,255,0.1);
}
.RightColumnGalaxyMap .mapRightItem.sectors{
    background-image:url('ico/ico_solarsystem_128.png');
}
.RightColumnGalaxyMap td{
    padding:0px;
    vertical-align:top;
    overflow:hidden;
    position:relative;
}
#RightColumnGalaxyMapVerticalist{
    overflow:auto;
    position:relative;
}
.RightColumnGalaxyMap:hover{
    right:-5px;
}
.RightColumnGalaxyMap .tabsline{
    height:40px;
}
.RightColumnGalaxyMap .tabs div{
    position:relative;
    display:inline-block;
    height:35px;
    width:35px;
    color:white;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
    background-size:16px;
}
.RightColumnGalaxyMap .tabs div.all{
    background-image:url('ico/ico_all_128.png');
}
.RightColumnGalaxyMap .tabs div.sectors{
    background-image:url('ico/ico_solarsystem_128.png');
}
.RightColumnGalaxyMap .tabs div.clicked{
    opacity: 1;
    background-size:28px;
}
.RightColumnGalaxyMap .tabs div.clicked:after{
    background:radial-gradient(rgba(0,255,255,0.3),rgba(0,255,255,0.2),rgba(0,0,0,0.0));
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    border:1px solid rgba(0,255,255,1);
    filter:blur(1px);
    transition:filter 0.2s linear;
    z-index:-1;
}




.hidecolumn{
    width: 300px;
    position: absolute;
    top: 10px;
    right: -300px;
    z-index: 100000;
    height: calc(100% - 20px);
    border-spacing: 0px;
    transition: right 0.1s ease;
    background-color: var(--hud_backgroundcolor);
    vertical-align: top;

}
.hidecolumn:after{
    content:"";
    position:absolute;
    top:0px;
    left:-10px;
    right:300px;
    bottom:0px;
    z-index:-1;
}
.hidecolumn td{
    padding:0px;
}
.hidecolumn:hover{
    right:0px;
}


#crew-static{
    position:relative;
    overflow:hidden;
    height:90%;
}
#crew-static #assetsbox.wrapper,
#crew-static #astronautsbox.wrapper,
#crew-static #arrivingbox.wrapper,
#crew-static #berthsbox.wrapper,
#crew-static #shipsbox.wrapper,
#crew-static #satellitesbox.wrapper,
#crew-static #cargobox.wrapper,
#crew-static #rbox.wrapper,
#crew-static #cssbox.wrapper{
    position:absolute;
    top:0px;
    left:100%;
    overflow:hidden;
    height:100%;
    width:100%;
}

#crew-static #assetsbox #rcassetsbox,
#crew-static #astronautsbox #astronauts,
#crew-static #arrivingbox #rcarrivingbox,
#crew-static #berthsbox #rcberthsbox,
#crew-static #shipsbox #rcshipsbox,
#crew-static #satellitesbox #rcsatellitesbox,
#crew-static #cargobox #rccargobox,
#crew-static #rbox #radar_box,
#crew-static #cssbox #rccsssbox
{
    position:absolute;
    top:0px;
    width:100%;
}




#crew .astronaut{
    position: relative;
    display: block;
    float: left;
    width: 75px;
    height: 100px;
    text-align: center;
    background-color: rgba(33,39,43,0.7);
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
}
#crew .astronaut:Hover{
    background-color:rgba(33,39,43,1);
}
#crew .astronaut .values{
    visibility:hidden;
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:56px;
    text-align:center;
    color:white;
    background-color:rgba(33,39,43,0.7);
}
#crew .astronaut .values .tactical, #crew .astronaut .values .engeneering, #crew .astronaut .values .science{
    display:inline-block;
    padding:1px 4px;
    font-size:12px;
    font-weight:bold;
    color:white;
    text-align:center;
    margin: 0px 0px 2px;
}
#crew .astronaut:Hover .values{
    visibility:visible;
}
#crew .astronaut .values .tactical{
    background-color:rgba(228,57,53,0.5);
}
#crew .astronaut .values .engeneering{
    background-color:rgba(202,168,70,0.5);
}
#crew .astronaut .values .science{
    background-color:rgba(56,121,217,0.5);
}
#crew .astronaut .values .exp, #crew .astronaut .values .health{
    font-size:10px;
    text-align:left;
    overflow:hidden;
    padding:0px 2px;
}
#crew .astronaut .bars{
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:10px;
}
#crew .astronaut .bars .health{
    position:absolute;
    left:0px;
    top:0px;
    width:1%;
    height:5px;
    background-color: rgba(255,255,255,0.3);
}
#crew .astronaut .bars .exp{
    position:absolute;
    left:0px;
    bottom:0px;
    width:1%;
    height:5px;
    background-color:rgb(0,142,202,0.3);
}
#crew .astronaut .name{
    display: block;
    overflow: hidden;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-shadow: 0px 0px 3px black;
    padding: 4px 0px;
}
#crew .astronaut .race{
    display:block;
    padding-top:1px;
    background-repeat:no-repeat;
    background-size:16px;
    background-position:center;
    height:15px;
}
#crew .unassignedastronauts{
    display: block;
    position: relative;
    color: white;
    font-size: 13px;
    padding: 8px 8px;
    text-transform: uppercase;
    background: linear-gradient(to right,rgba(103,255,237,0.0) 0%,rgba(103,255,237,0.2) 30%,rgba(103,255,237,0.3) 50%,rgba(103,255,237,0.2) 70%,rgba(103,255,237,0.0) 100%);
    text-align: center;
}
#crew .stations-building{
    margin:1px 0px;
    background:linear-gradient(to bottom,rgba(0,50,75,0) 0%,rgba(0,50,75,0.0) 60%,rgba(0,50,75,0.3) 100%);
}
#crew .stations-building .buildingname{
    display:block;
    position:relative;
    color:rgba(0,255,255,1);
    font-size:16px;
    font-weight:normal;
    padding:8px 8px;
    text-transform:uppercase;
    cursor:pointer;
    background:rgba(255,255,255,0.1);
}
#crew .stations-building .buildingname:hover{
    text-shadow:0px 0px 10px rgb(103,232,237);
    background:rgba(0,255,255,0.1);
}
#crew .stations-building .buildingname span{
    color:silver;
    font-size:12px;
    font-weight:normal;
}
#crew .stations-building .buildingname .occupationicons{
    display:block;
    position:absolute;
    right:8px;
    top:6px;
}
#crew .stations-building .buildingname .occupationicons .full{
    display:inline-block;
    position:relative;
    background:url(ico/slot-16.png) center no-repeat;
    height:25px;
    width:12px;
    background-size:100%;
    margin-left:1px;
}
#crew .stations-building .buildingname .occupationicons .empty{
    display:inline-block;
    position:relative;
    background:url(ico/slot-outline-16.png) center no-repeat;
    height:25px;
    width:12px;
    background-size:100%;
    margin-left:1px;
}
#crew .stations-building .slots{
    display:block;
    text-align:left;
    display:none;
}
#crew .stations-building .slots .slot{
    position:relative;
    display:inline-block;
    width:60px;
    height:60px;
    text-align:center;
    overflow:hidden;
    color:white;
    font-size:12px;
}
#crew .stations-building .slots .slot.empty{
    color:gray;
    background:rgba(33,39,43,0.5) url(stations_plus.png) center no-repeat;
    cursor:pointer;
}
#crew .stations-building .slots .slot.empty span{
    display:block;
    padding:6px 3px 3px;
    line-height:12px;
}
#crew .stations-building .slots .slot.empty .values{
    display:inline-block;
    padding:1px 5px;
    font-size:12px;
    font-weight:bold;
    color:white;
    border-radius:63px;
    text-align:center;
    margin-top:42px;
}
#crew .stations-building .slots .slot.empty .values.tactical{
    background-color:rgba(228,57,53,0.5);
}
#crew .stations-building .slots .slot.empty .values.engeneering{
    background-color:rgba(202,168,70,0.5);
}
#crew .stations-building .slots .slot.empty .values.science{
    background-color:rgba(56,121,217,0.5);
}
#crew .stations-building .slots .slot.occupyed{
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    cursor:pointer;
}
#crew .stations-building .slots .slot.occupyed .removehover{
    visibility:hidden;
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:100%;
    line-height:60px;
    text-align:center;
    color:rgb(103,232,237);
    background:rgba(33,39,43,0.7) url(stations_minus.png) center no-repeat;
    cursor:pointer;
}
#crew .stations-building .slots .slot.occupyed:hover .removehover{
    visibility:visible;
}
#crew .stations-building .slots .slot.occupyed .name{
    display:block;
    color:white;
    font-size:12px;
    font-weight:normal;
    background:none;
    line-height:12px;
    padding-top:12px;
    text-shadow:0px 0px 3px black;
    overflow:hidden;
    width:100%;
    height:15px;
}
#crew .stations-building .slots .slot.occupyed .race{
    display:block;
    padding-top:1px;
    background-repeat:no-repeat;
    background-size:16px;
    background-position:center;
    height:15px;
}
#crew .stations-building .slots .slot.occupyed .level{
    display:block;
    color:white;
    font-size:12px;
    font-weight:normal;
    background:none;
    line-height:12px;
    text-shadow:0px 0px 3px black;
}



.log{
    position:absolute;
    left:10px;
    bottom:10px;
    width: 450px;
    z-index:100;
}
.log .loading {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 30px);
    height: 15px;
}
.log .logs{
    position:absolute;
    left:0px;
    bottom:0px;
}
.log .logs .close{
    position: absolute;
    border-radius: 3px;
    width: 10px;
    height: 10px;
    cursor: pointer;
    top: 3px;
    right: 3px;
    opacity: 1;
    z-index: 999999999;
    background: url('ico/close_log.png') center no-repeat;
    background-size: 8px;
}
.log .logs .close:hover{
    background-color: white;
    filter: invert(100%);
}
.log .logs .logrow{
    position: relative;
    font-size: 14px;
    background: rgba(255,255,255,0.8);
    padding: 5px 25px 5px 5px;

    color: rgba(0,0,0,1);
    text-transform: uppercase;

    line-height: 11px;
    letter-spacing: 0px;
}
.log .logs .logrow.negative{
    background:rgba(164,2,4,0.8);
}
.log .logs .logrow .close{
    position:absolute;
    width:16px;
    height:16px;
    top:13px;
    right:13px;
    display:none;
}
.log .logs .logrow span{
    position:relative;
    display: block;
}
.log .logs .logrow:hover .close{
    display:block;
}
.occupationicons{
    display:inline-block;
    position:relative;
    margin-right:6px;
    line-height:initial;
    float:right;
}
.occupationicons .full{
    position:relative;
    display:block;
    float:right;
    background:url(ico/person_25.png) center no-repeat;
    height:25px;
    width:12px;
}
.occupationicons .empty{
    position:relative;
    display:block;
    float:right;
    position:relative;
    background:url(ico/person_25.png) center no-repeat;
    height:25px;
    width:12px;
    opacity:0.4;
}



div.tooltip{
    display:inline;
    outline:none;
    text-decoration:none;
    color:white;
    text-align:left;
    line-height:16px;
    text-transform:uppercase;
    position: relative;
}
div.tooltip strong{
    line-height:16px;
}
div.tooltip:hover{
    text-decoration:none;
}
div.tooltip span.upper{
    z-index: 10000;
    visibility: hidden;
    padding: 5px;
    top: -50px;
    left: 85px;
    width: 100px;
    opacity: 0;
    transition: visibility 0s linear 0.3s,opacity 0.3s linear,margin 0.3s linear;
    position: absolute;
    color: white;
    background-color: rgba(0,53,64,0.8);
    font-size: 10px;
    line-height: 11px;
    box-sizing: border-box;
}
div.tooltip span.upper a{
    color:white;
    text-decoration:underline;
}

div.tooltip:hover span.upper{
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    animation:blink 100ms linear 2 alternate;
}
div.tooltip span.upper span.label{
    display:block;
}
#aviablemodules{
    position:absolute;
    bottom:0px;
    left:80px;
    height:120px;
    right:80px;
    z-index:10000;
}
#aviablemodules:before{
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    border:1px solid rgba(0,255,255,1);
    filter:blur(2px);
}
#aviablemodules .modulelist{
    position:absolute;
    bottom:0px;
    left:0px;
    top:0px;
    right:0px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,50,75,0.4) 10%,rgba(0,50,75,0.7) 60%,rgba(0,50,75,0.4) 90%,rgba(0,0,0,0.1) 100%);
    overflow:hidden;
}
#aviablemodules .modulelist .item{
    height:100px;
    margin:10px;
    text-align:center;
}
#aviablemodules .modulelist .item .buildinginfo{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
#aviablemodules .modulelist .item .buildinginfo .name{
    font-size:15px;
    color:rgb(0,255,255);
    text-shadow:0px 0px 10px rgba(0,255,255,0.8);
}
#aviablemodules .modulelist .item:hover:before{
    content:"";
    position:absolute;
    top:5px;
    right:5px;
    bottom:5px;
    left:5px;
    border:1px solid rgba(0,255,255,1);
    filter:blur(2px);
}
#aviablemodules button.left{
    position:absolute;
    bottom:20px;
    left:-30px;
    z-index:10000;
}
#aviablemodules button.right{
    position:absolute;
    bottom:20px;
    right:-30px;
    z-index:10000;
}
.desktopcommand{
    display: inline-block;
    position: relative;
    height: 24px;
    width: 24px;
    background-size: 17px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: black;
    filter: invert(1);
    margin-right: 5px;
    margin-top: 2px;
}
.desktopcommand:hover{
    animation:blink 100ms linear 2 alternate;
}

.desktopcommand.stop{
    background-image:url('ico/ico_x_128.png');
}
.desktopcommand.detach{
    background-image:url('ico/ico_detach2_128.png');
}
.desktopcommand.leaveorbit{
    background-image:url('ico/ico_x_128.png');
}
.desktopcommand.setwaypoint{
    background-image:url('ico/ico_waypoint_128.png');
}
.desktopcommand.foundcs{
    background-image:url('ico/ico_foundcs_128.png');
}
.desktopcommand.return{
    background-image:url('ico/ico_return_32a.png');
}
.desktopcommand.retreat{
    background-image:url('ico/ico_retreat_32.png');
}
.desktopcommand.continue{
    background-image:url('ico/ico_continue_32.png');
}
#createcolony {
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    bottom:20px;
    min-width:640px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,50,75,0.4) 10%,rgba(0,50,75,0.7) 60%,rgba(0,50,75,0.4) 90%,rgba(0,0,0,0.1) 100%);
    z-index:99999999;
}
#createcolony .title {
    font-size:13px;
}
#createcolony .inside{
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,50,75,0.4) 10%,rgba(0,50,75,0.7) 60%,rgba(0,50,75,0.4) 90%,rgba(0,0,0,0.1) 100%);
    width: auto;
    height: auto;
}
#createcolony .inside .content {
    position: absolute;
    top: 42px;
    width: 100%;
    bottom: 0px;
    overflow: hidden;
}
#createcolony .inside .content .lander {
    position: relative;
    height: 280px;
    width: 230px;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center 5px;
    cursor: pointer;
    background-color:rgba(0,255,255,0.1);
    margin-left: 5px;
}
#createcolony .inside .content .lander .name {
    color: white;
    padding: 5px;
    box-sizing: border-box;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px rgb(0,255,255);
    font-size: 13px;
    height: 43px;
    text-align: center;
    overflow: hidden;
}
#createcolony .inside .content .lander .attributes{
    position:absolute;
    right:5px;
    left:5px;
    bottom:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
}
#createcolony .inside .content .lander .attributes table{
    padding:0px;
    margin:0px;
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
#createcolony .inside .content .lander .attributes td{
    color:rgb(255,255,255);
    padding:0px 10px;
    font-size:13px;
    font-weight:normal;
    text-align:left;
    overflow:hidden;
    height:17px;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
#createcolony .inside .content .lander .attributes th{
    font-size:13px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    padding-right:10px;
    background-color:rgba(0,255,255,0.2);
    overflow:hidden;
    height:17px;
    text-align: right;
    width: 50%;
}
#createcolony .inside .content .lander:hover{
    background-color:rgba(0,255,255,0.2);
}
#createcolony .inside .content #launch {
    position: absolute;
    top: 45px;
    right: 11px;
    width: 160px;
}
#createcolony .inside .content #colname {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 270px;
    height: auto;
    color: white;
    padding: 5px;
}
#createcolony .inside .content .info {
    color: white;
    text-align: center;
    font-size: 13px;
    background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);
    padding: 12px 0px;
}
#createcolony .inside .content .selectedship {
    display: block;
    position: absolute;
    height: 285px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0,100,100,0.5);
}
#createcolony .inside .content .selectedship .mainbox {
    position: absolute;
    top: 0px;
    left: 190px;
    bottom: 0px;
    right: 0px;
}
#createcolony .inside .content .selectedship img {
    position: absolute;
    width: 200px;
    top: 38px;
    left: 5px;
}
#createcolony .inside .content .selectedship .attributes {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 300px;
}
#createcolony .inside .content .selectedship .attributes table{
    padding:0px;
    margin:0px;
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
#createcolony .inside .content .selectedship .attributes td{
    color:rgb(255,255,255);
    padding:0px 10px;
    font-size:13px;
    font-weight:normal;
    text-align:left;
    overflow:hidden;
    height:17px;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
#createcolony .inside .content .selectedship .attributes th{
    font-size:13px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    padding-right:10px;
    background-color:rgba(0,255,255,0.2);
    overflow:hidden;
    height:17px;
    text-align: right;
    width: 50%;
}
#createcolony .inside .content #astronauts {
    display: block;
    position: absolute;
    height: 150px;
    top: 300px;
    left: 5px;
    right: 5px;
}
#createcolony .inside .content #astronauts .astronaut {
    display: block;
    position: relative;
    height: 140px;
    margin-left: 10px;
    width: 300px;
    background-color: rgba(0,255,255,0.1);
}
#createcolony .inside .content #astronauts .astronaut:hover {
    background-color: rgba(0,255,255,0.2);
}
#createcolony .inside .content #astronauts .astronaut .name{
    position:absolute;
    top:5px;
    left:60px;
    color:rgba(255,255,255,0.8);
    font-size:14px;
}
#createcolony .inside .content #astronauts .astronaut .race{
    position:absolute;
    top:26px;
    left:60px;
    color:rgb(0,255,255);
    font-size:10px;
    text-transform:uppercase;
    background-size:16px;
    background-repeat:no-repeat;
    background-position:center left;
    padding-left:20px;
    height:20px;
    line-height:19px;
}
#createcolony .inside .content #astronauts .astronaut .skils{
    position:absolute;
    top:0px;
    right:0px;
    width:130px;
    color:white;
    font-size:12px;
}
#createcolony .inside .content #astronauts .astronaut .skils .skill{
    position:relative;
    display:block;
    float:right;
    width:30px;
    height:25px;
    margin:12px 5px 0px 0px;
    color:rgba(255,255,255,1);
    text-shadow:0px 0px 10px rgba(255,255,255,1);
    font-size:13px;
    line-height:25px;
    background-color:red;
    text-align:center;
    box-shadow:0px 0px 22px rgba(0,50,70,1);
}
#createcolony .inside .content #astronauts .astronaut .skils .skill.tactical{
    background:linear-gradient(to bottom,rgba(255,57,53,0.3) 0%,rgba(228,57,53,0.3) 60%,rgba(228,57,53,0.2) 100%);
}
#createcolony .inside .content #astronauts .astronaut .skils .skill.engineer{
    background:linear-gradient(to bottom,rgba(255,255,70,0.3) 0%,rgba(202,168,70,0.3) 60%,rgba(202,168,70,0.2) 100%);
}
#createcolony .inside .content #astronauts .astronaut .skils .skill.science{
    background:linear-gradient(to bottom,rgba(56,121,255,0.3) 0%,rgba(56,121,217,0.3) 60%,rgba(56,121,217,0.2) 100%);
}
#createcolony .inside .content #astronauts .astronaut img{
    position:absolute;
    max-width:50px;
    max-height:50px;
    left:0px;
    top:0px;
}
#createcolony .inside .content #astronauts .astronaut .exp{
    position:absolute;
    bottom:0px;
    left:0px;
    color:white;
    height:4px;
    width:100%;
    background-color:rgb(33,39,43);
}
#createcolony .inside .content #astronauts .astronaut .exp .bar{
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(0,142,202,0.5);
    width:1%;
    height:100%;
}
#createcolony .inside .content #astronauts .astronaut .health{
    position:absolute;
    bottom:4px;
    left:0px;
    color:white;
    height:4px;
    width:100%;
    background-color:rgb(33,39,43);
}
#createcolony .inside .content #astronauts .astronaut .health .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgba(255,255,255,0.5);
    width:1%;
    height:100%;
}
#createcolony .inside .content #astronauts .astronaut .hover{
    position:absolute;
    left:0px;
    top:50px;
    height:70px;
    width:100%;
}
#createcolony .inside .content #astronauts .astronaut .hover table{
    position:absolute;
    left:0px;
    right:0px;
    top:10px;
}
#createcolony .inside .content #astronauts .astronaut .hover table th{
    color:rgba(255,255,255,0.8);
    font-size:10px;
    font-weight:normal;
    text-align:right;
    width:25%;
    text-transform:uppercase;
}
#createcolony .inside .content #astronauts .astronaut .hover table td{
    color:rgb(0,255,255);
    font-size:14px;
    font-weight:normal;
    text-align:left;
    padding-left:5px;
}
#createcolony .inside .content #selected_astronauts {
    display: block;
    position: absolute;
    height: 80px;
    top: 80px;
    left: 0px;
    right: 5px;
}
#createcolony .inside .content #selected_astronauts .astronaut {
    display: block;
    position: relative;
    height: 80px;
    margin-left: 10px;
    width: 80px;
    background-color: rgba(0,255,255,0.1);
    cursor: pointer;
}
#createcolony .inside .content #selected_astronauts .astronaut:hover {
    background-color: rgba(0,255,255,0.2);
}
#createcolony .inside .content #selected_astronauts .astronaut .name{
    position: absolute;
    top: 55px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.8);
    font-size: 10px;
    text-align: center;
}
#createcolony .inside .content #selected_astronauts .astronaut .race{
    position: absolute;
    top: 29px;
    left: 0px;
    right: 0px;
    color: rgb(0,255,255);
    font-size: 10px;
    text-transform: uppercase;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 4px;
    height: 20px;
    line-height: 20px;
}
#createcolony .inside .content #selected_astronauts .astronaut .skils{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    width: 80px;
    color: white;
    font-size: 12px;
}
#createcolony .inside .content #selected_astronauts .astronaut .skils .skill{
    position: relative;
    display: block;
    float: right;
    width: 23px;
    height: 23px;
    margin: 3px 3px 0px 0px;
    color: rgba(255,255,255,1);
    text-shadow: 0px 0px 10px rgba(255,255,255,1);
    font-size: 10px;
    line-height: 23px;
    background-color: red;
    text-align: center;
    box-shadow: 0px 0px 22px rgba(0,50,70,1);
}
#createcolony .inside .content #selected_astronauts .astronaut .skils .skill.tactical{
    background:linear-gradient(to bottom,rgba(255,57,53,0.4) 0%,rgba(228,57,53,0.4) 60%,rgba(228,57,53,0.3) 100%);
}
#createcolony .inside .content #selected_astronauts .astronaut .skils .skill.engineer{
    background:linear-gradient(to bottom,rgba(255,255,70,0.4) 0%,rgba(202,168,70,0.4) 60%,rgba(202,168,70,0.3) 100%);
}
#createcolony .inside .content #selected_astronauts .astronaut .skils .skill.science{
    background:linear-gradient(to bottom,rgba(56,121,255,0.4) 0%,rgba(56,121,217,0.4) 60%,rgba(56,121,217,0.3) 100%);
}
#createcolony .inside .content #selected_astronauts .astronaut img{
    position: absolute;
    max-width: 50px;
    max-height: 50px;
    left: 17px;
    top: 0px;
}
#createcolony .inside .content #selected_astronauts .astronaut .exp{
    position:absolute;
    bottom:0px;
    left:0px;
    color:white;
    height:4px;
    width:100%;
    background-color:rgb(33,39,43);
}
#createcolony .inside .content #selected_astronauts .astronaut .exp .bar{
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(0,142,202,0.5);
    width:1%;
    height:100%;
}
#createcolony .inside .content #selected_astronauts .astronaut .health{
    position:absolute;
    bottom:4px;
    left:0px;
    color:white;
    height:4px;
    width:100%;
    background-color:rgb(33,39,43);
}
#createcolony .inside .content #selected_astronauts .astronaut .health .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgba(255,255,255,0.5);
    width:1%;
    height:100%;
}
#createcolony .inside .content #selected_astronauts .slot {
    display: block;
    position: relative;
    height: 80px;
    margin-left: 10px;
    width: 80px;
    background: rgba(33,39,43,0.5) url(stations_plus.png) center no-repeat;
    cursor: pointer;
}
#createcolony .inside .content #items {
    display: block;
    position: absolute;
    height: 100px;
    top: 490px;
    left: 5px;
    right: 5px;
}
#createcolony .inside .content #items .item {
    display: block;
    position: relative;
    height: 115px;
    margin-left: 10px;
    width: 135px;
    background-color: rgba(0,255,255,0.1);
    cursor: pointer;
}
#createcolony .inside .content #items .item:hover {
    background-color: rgba(0,255,255,0.2);
}
#createcolony .inside .content #items .item .name {
    position: absolute;
    top: 54px;
    left: 3px;
    right: 3px;
    color: rgba(255,255,255,1);
    font-size: 13px;
    text-align: center;
    line-height: 13px;
}
#createcolony .inside .content #items .item img {
    position: absolute;
    max-width: 50px;
    max-height: 50px;
    left: calc( 50% - 25px );
    top: 0px;
}
#createcolony .inside .content #items .item img.info {
    width: 16px;
    height: 16px;
    text-align: center;
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto !important;
    padding: 0px;
    background: none !important;
    opacity: 0.5;
}
#createcolony .inside .content #items .item .space {
    position: absolute;
    top: 97px;
    left: 5px;
    color: rgb(0,255,255);
    font-size: 10px;
    text-transform: uppercase;
}
#createcolony .inside .content #items .item .space span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}
#createcolony .inside .content #items .item .qty {
    position: absolute;
    top: 83px;
    left: 5px;
    color: rgb(0,255,255);
    font-size: 10px;
    text-transform: uppercase;
}
#createcolony .inside .content #items .item .qty span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}
#createcolony .inside .content #items .item img.info:hover {
    opacity: 1;
}
#createcolony .inside .content #selected_items {
    display: block;
    position: absolute;
    height: 50px;
    top: 200px;
    left: 0px;
    right: 5px;
}
#createcolony .inside .content #selected_items .item {
    display: block;
    position: relative;
    height: 50px;
    margin-left: 10px;
    width: 240px;
    background-color: rgba(0,255,255,0.1);
    cursor: pointer;
}
#createcolony .inside .content #selected_items .item:hover {
    background-color: rgba(0,255,255,0.2);
}
#createcolony .inside .content #selected_items .item img.info:hover {
    opacity: 1;
}
#createcolony .inside .content #selected_items .item .name {
    position:absolute;
    top:3px;
    left:60px;
    color:rgba(255,255,255,1);
    font-size:13px;
}
#createcolony .inside .content #selected_items .item img {
    position:absolute;
    max-width:50px;
    max-height:50px;
    left:0px;
    top:0px;
}
#createcolony .inside .content #selected_items .item img.info {
    width: 16px;
    height: 16px;
    text-align: center;
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto !important;
    padding: 0px;
    background: none !important;
    opacity: 0.5;
}
#createcolony .inside .content #selected_items .item .space {
    position:absolute;
    top:22px;
    left:60px;
    color:rgb(0,255,255);
    font-size:10px;
    text-transform: uppercase;
}
#createcolony .inside .content #selected_items .item .space span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}
#createcolony .inside .content #selected_items .item .qty {
    position:absolute;
    top:35px;
    left:60px;
    color:rgb(0,255,255);
    font-size:10px;
    text-transform: uppercase;
}
#createcolony .inside .content #selected_items .item .qty span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}


#battlebox{
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    bottom:20px;
    background:rgba(0,53,64,0.8);
    z-index:99999999;
    border: 10px solid rgba(0,90,108,0.4)
}
#battlebox #battle_map{
    position:absolute;
    top:45px;
    left:0px;
    right:0px;
    bottom:0px;
    background:rgb(0,0,0);
    z-index:99999999;
}
#battlebox #battle_log{
    position: absolute;
    top: 73%;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(0,53,64,0.8);
    z-index: 999999999;
    overflow-y: scroll;


}
#battlebox #battle_log .logtext{
    padding: 5px;
    font-size: 12px;
    color:  rgb(0,130,156);
    box-sizing: border-box;
}

#battlebox #battle_log .logtext.my{
    width: 50%;
    float: left;
    border-right: 1px solid rgb(0,85,102);
}
#battlebox #battle_log .logtext.enemy{
    width: 50%;
    float: right;
}

#battlebox #battle_log .logtext .name{
    color: rgb(6,213,255);

    text-transform: uppercase;
}

#battlebox #battle_log .logtext .actions{
    position: relative;
    top: auto;
    left: auto;
}


#battlebox #battle_log .logtext .actions .action{
    padding: 3px 0px;
    height: 40px;
}

#battlebox #battle_log .logtext.my .actions .action{
    text-align: right;
}

#battlebox #battle_log .logtext .actions .action .time{
    font-size: 9px;
    color: rgb(6,213,255);
}

#battlebox #battle_log .logtext .actions .action .txt{
    display: block;
}

#battlebox .actions{
    position:absolute;
    top:45px;
    left:0px;
    z-index:99999999;
}
#battlebox .actions #rounds{
}
#battlebox .actions #rounds .round{
    display:inline-block;
    background:rgb(255,0,0);
    z-index:99999999;
    color: white;
    margin: 3px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
#newshipscene {
    position: absolute;
    top: 70px;
    width: calc(100% - 60px);
    left: 30px;
    bottom: 40px;
    overflow: hidden;
    z-index: 100;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%,rgb(149,149,149) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    clip-path: var(--clip_menu_standardbox);
}

#newshipscene .info {
    margin-top: 20%;
    animation:highlited 1000ms linear infinite;
    color: white;
}

#newshipscene .bckg {
    position: absolute;
    top: 20px;
    left: 310px;
    right: 50px;
    bottom: 100px;
    z-index: -2;
    animation: crt 5000ms linear infinite;
    display: none;
}


#newshipscene .bckg .bleft {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 50%;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: .25;
    background-size: 50%;
}

#newshipscene .bckg .bright {
    position: absolute;
    top: 100px;
    right: 0px;
    width: 50%;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: .25;
    background-size: 50%;
}

#newshipscene .bckg .bcntr {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: .25;
}


#newshipscene .title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 34px;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    text-transform: none;
    font-size: 32px;
    text-align: center;

    text-shadow: -2px 0px 0 rgb(255 131 64 / 30%), 2px 0px 0 rgb(126 250 255 / 20%);
    text-transform: uppercase;

    padding: 0px;

}

#newshipscene .title .action {
    display: block;
    font-size: 18px;
    line-height: 21px;
}

#newshipscene .modulename {
    position: absolute;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    text-transform: none;
    font-size: 23px;
    text-align: center;
    text-shadow: -2px 0px 0 rgb(255 131 64 / 30%), 2px 0px 0 rgb(126 250 255 / 20%);
    text-transform: uppercase;


}

#newshipscene .modulesubname {
    position: absolute;
    top: 128px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-decoration: none;
    text-transform: none;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
}


#newshipscene .schema {
    position: absolute;
    right: 15px;
    top: 148px;
}


#newshipscene .schema .grid-view {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0px;
    right: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

#newshipscene .modulearrows {
    position: absolute;
    right: 40px;
    left: 380px;
    bottom: calc(50% - 20px);

}

#newshipscene .modulearrows #prev,
#newshipscene .modulearrows #next {
    position: absolute;
    height: 50px;
    width: 35px;
    top: 0px;
}

#newshipscene .modulearrows #prev {
    left: 0px;

}

#newshipscene .modulearrows #next {
    right: 0px;


}


#newshipscene .modulearrows .arrow {
    cursor: pointer;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    color: #b9dbff;
}



#newshipscene .modulearrows #next .arrow {
    background-image:url('./ico/arrow-24-32.png');
}

#newshipscene .modulearrows #prev .arrow {
    background-image:url('./ico/arrow-88-32.png');
}

#newshipscene .modulearrows .arrow:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),
        linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%),
        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%),

        linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size:
        calc(100% - 4px) 1px,
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),

        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,

        bottom 1px center;
}

#newshipscene .modulearrows .arrow:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}


#newshipscene .modulearrows .arrow:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#newshipscene #acceptbutton {
    position: absolute;
    bottom: 25px;
    right: 35px;
    animation: highlited 1000ms linear infinite;
}


#newshipscene #acceptbutton > .info {
    display: block;
    position: absolute;
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    width: 380px;
    font-size: 12px;
    z-index: 100;
    text-align: left;
    top: 50%;
    left: 50%;
    transform: translateX(-100%) translateY(-100%);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    margin: 0;
    animation: unset;
}




#newshipscene #backbutton {
    position: absolute;
    bottom: 25px;
    left: 35px;
}

#newshipscene #shipbill {
    position: absolute;
    top: calc(50%);
    left: calc(50%);
    transform: translate(-50%, -50%);

}

#newshipscene #shipbill .shipbill {
    position: relative;
    top: 0px;
    left: 0px;
    width: 500px;
    text-align: center;
    padding: 20px 20px 60px;
    box-sizing: border-box;
    z-index: 10;
}

#newshipscene #shipbill .shipbill:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #333955;
    background-image: linear-gradient(0deg, rgb(14 18 35) 0%, rgb(91 82 217 / 0%) 100%);
    background-size: cover;
    clip-path: var(--clip_standardbox);
    z-index: -1;
}




#newshipscene #shipbill .shipbill .locations {
    padding: 5px 10px 5px;
}
#newshipscene #shipbill .shipbill .locations .location {
    position: relative;
    width: 135px;
    height: 180px;

    margin: 10px 10px;
    cursor: pointer;
}

#newshipscene #shipbill .shipbill .locations .location:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(25,25,25);

    clip-path: var(--clip_menu_newship_location);
    z-index: -1;
}

#newshipscene #shipbill .shipbill .locations .location:not(.selected):hover {
    animation: blink 100ms linear 2 alternate;
}

#newshipscene #shipbill .shipbill .locations .location:not(.selected):hover .lbckgr  {
    box-shadow: inset 0 0 40px rgb(0 102 204 / 30%), inset 0 0 160px rgb(0 102 204 / 20%);
}



#newshipscene #shipbill .shipbill .locations .location.selected:before,
#newshipscene #shipbill .shipbill .locations .location.selected:after {

}

#newshipscene #shipbill .shipbill .locations .location.selected .lbckgr{
    filter: blur(0px) grayscale(0) brightness(1);
    animation: crt 5000ms linear infinite;
    box-shadow: inset 0 0 40px rgb(0 102 204 / 30%), inset 0 0 160px rgb(0 102 204 / 20%);
}

#newshipscene #shipbill .shipbill .locations .location.selected .players{
    color: #ffd01e;
}

#newshipscene #shipbill .shipbill .locations .location.selected .stations{
    color: #ffd01e;
}

#newshipscene #shipbill .shipbill .locations .location.selected .name{
    color: #ffd01e;
}

#newshipscene #shipbill .shipbill .locations .location.selected {
    filter: drop-shadow(0px 0px 9px rgb(0 102 204 / 20%));
}


#newshipscene #shipbill .shipbill .locations .location:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    top: 0px;
    width: 10px;
    border-bottom: 1px solid rgba(255,255,255,1);
    border-right: 1px solid rgba(255,255,255,1);
    border-top: 1px solid rgba(255,255,255,1);
    opacity: 0;
}

#newshipscene #shipbill .shipbill .locations .location .name {
    position: absolute;
    display: block;
    left: 12px;
    right: 5px;
    bottom: 40px;
    /* line-height: 18px; */
    text-align: center;
    font-size: 15px;
    padding: 0px;
    color: rgba(255, 255, 255, .8);
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}

#newshipscene #shipbill .shipbill .locations .location .star
{
    position: absolute;
    top: calc(100% - 24px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding-left: 22px;
    text-shadow: var(--shadow_textfull);
}

#newshipscene #shipbill .shipbill .locations .location .star .ssdiv
{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}


#newshipscene #shipbill .shipbill .locations .location .star .ssdiv .ssimg
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    display: block;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(1);
}

#newshipscene #shipbill .shipbill .locations .location.selected .star .ssdiv .ssimg
{

    filter: grayscale(0);
}

#newshipscene #shipbill .shipbill .locations .location .star .stexts
{
    position: relative;
    display: block;
    text-align: left;
}

#newshipscene #shipbill .shipbill .locations .location .star .stexts .sname
{
    color: white;

    line-height: 14px;
    font-size: 13px;
    position: relative;
}

#newshipscene #shipbill .shipbill .locations .location .star .stexts .stype
{
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    display: none;
}

#newshipscene #shipbill .shipbill .locations .location .players,
#newshipscene #shipbill .shipbill .locations .location .stations {
    position: absolute;
    display: block;
    top: 10px;
    text-align: left;
    font-size: 12px;
    padding: 0px 0px 0px 20px;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    height: 20px;
    line-height: 20px;
}

#newshipscene #shipbill .shipbill .locations .location .players {

    right: calc(50% + 5px);

}

#newshipscene #shipbill .shipbill .locations .location .stations {

    left: calc(50% + 5px);

}

#newshipscene #shipbill .shipbill .locations .location .players:after,
#newshipscene #shipbill .shipbill .locations .location .stations:after{
    content: '';
    position: absolute;
    left: 0px;
    width: 16px;
    top: 50%;
    height: 16px;
    transform: translateY(-50%);
    filter: contrast(2.5) brightness(0.8);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;

}

#newshipscene #shipbill .shipbill .locations .location .players:after {
    background-image: url('ico/ico_card_character.png');
}


#newshipscene #shipbill .shipbill .locations .location .stations:after {
    background-image: url('ico/ico_card_station.png');
}


#newshipscene #shipbill .shipbill .locations .location .players:hover > .subtext{
    display: block;
    left: 15px;

}





#newshipscene #shipbill .shipbill .locations .location .stations:hover > .subtext{
    display: block;
    left: 15px;

}

#newshipscene #shipbill .shipbill .locations .location .lbckgr {
    background-size: cover;
    background-position: center;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-size: cover;
    filter: blur(1px) grayscale(1) brightness(0.5);
    clip-path: var(--clip_menu_newship_location);
}

#newshipscene #shipbill .shipbill .locations select option {
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px 5px 10px;
}

#newshipscene #shipbill .shipbill .name {

}

#newshipscene #shipbill .shipbill .name span {
    display: block;
    color: white;
    font-size: 35px;
    font-family: var(--fontFaimly_header);
    padding: 10px 0px 20px;
    text-transform: uppercase;
}

#newshipscene #shipbill .shipbill .name .headtext {
    color: #ffd01e;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 18px;
    position: relative;
    line-height: 45px;
    height: 45px;
}

#newshipscene #shipbill .shipbill .locations .infotext {
    color: #ffd01e;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 18px;
    position: relative;
    line-height: 45px;
    height: 45px;
}

#newshipscene #shipbill .shipbill .name .infotext {
    position: relative;
    padding: 10px 30px 20px;

    color: white;
    font-size: 13px;
}




#newshipscene #shipbill .shipbill .name .infotext {
    padding-top: 0px;
}

#newshipscene #shipbill .shipbill .name .infotext .error {
    position: relative;
    left: calc(50% - 165px);
    width: 330px;
    text-align: center;

    background-color: rgba(200,0,0,1);
    font-size: 13px;
    color: white;
    box-sizing: border-box;
    padding: 5px 5px;
    margin-bottom: 5px;
}

#newshipscene #shipbill .shipbill .name .infotext .normal {
    position: relative;
    text-align: center;

    font-size: 14px;
    color: white;
    box-sizing: border-box;
    padding-top: 10px;
}

#newshipscene #shipbill .shipbill .name input {
    text-transform: none;
    font-size: 28px;
    text-align: center;
    font-family: var(--fontFaimly_header);
    height: 40px;
    line-height: 40px;
    width: 330px;
}

#newshipscene #shipbill .shipbill .bill {
    color: white;
    font-size: 25px;
    margin: -1px auto 16px;
    padding: 10px 0px 0px;

}

#newshipscene #shipbill .shipbill .bill .money,
#newshipscene #shipbill .shipbill  .bill .mor {
    position: relative;
    text-align: center;

}

#newshipscene #shipbill .shipbill .bill .money {
    margin-bottom: 15px;
}

#newshipscene #shipbill .shipbill .bill .money .before,
#newshipscene #shipbill .shipbill .bill .mor .before {
    display: block;
    position: relative;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 10px;
    color: gray;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 25px;
    height: 25px;
}

#newshipscene #shipbill .shipbill .bill .mor {
    margin-bottom: 40px;
}

#newshipscene #shipbill .shipbill #submitshipname {
    position: relative;
    height: 40px;
}

#newshipscene #shipbill .shipbill #submitshipname button {
    position: absolute;
    top: 0px;
    left:  calc(50% + 5px);
    right: unset;
    animation: highlited 1000ms linear infinite;
}

#newshipscene #shipbill .shipbill #submitshipname button.grayed {
    animation: none;
    right: calc(50% + 5px);
    left: unset;

}

#newshipscene #shipbill .bottomtext {
    position: absolute;
    left: 50px;
    right: 50px;
    text-align: center;
    padding: 0px;

    color: rgba(255,255,255,0.5);
    font-size: 12px;
    top: calc(100% + 15px);
}



#newshipscene #description {
    position: absolute;
    top: 55px;
    left: 15px;

    bottom: 70px;

}

#newshipscene #description .pricing {
    position: absolute;
    top: 17px;
    left: 0px;
    width: 275px;
    padding: 0px;
    box-sizing: border-box;

    font-size: 22px;
    color: white;
    white-space: nowrap;
}

#newshipscene #description .pricing .price {


    text-align: center;
}

#newshipscene #description .pricing .price .mprbef {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -140px;
    text-align: right;
    width: 120px;
    font-size: 10px;
    line-height: 33px;
}

#newshipscene #description .pricing .morale {
    position: relative;
    margin-left: 140px;
    display: none;
}





#newshipscene #description .manufacturer {
    position: absolute;
    top: 80px;
    left: 0px;
    width: 275px;
    text-align: center;
}

#newshipscene #description .manufacturer img {
    max-height: 30px;
    max-width: 140px;
}

#newshipscene #description .benchmark {
    position: absolute;
    top: 135px;
    left: 0px;
    padding: 15px 10px;
    color: white;
    font-size: 13px;
    padding: 0px 0px 0px 0px;
    border-spacing: 0px;
    width: 275px;
    text-shadow: var(--shadow_textfull);


    box-sizing: border-box;
}


#newshipscene #description .benchmark th {
    text-align: right;
    width: 90px;
    padding: 0px 10px 3px 0px;
    color: #afc2ed;
    text-transform: uppercase;
    font-size: 12px;

    vertical-align: top;

}
#newshipscene #description .benchmark td {
    font-size: 14px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: none;
    padding-left: 10px;
    vertical-align: top;
    height: 30px;

}







#newshipscene .enhdescription  {
    position: absolute;
    bottom: 70%;
    transform: translateY(+50%);
    right: 25px;
    width: 30%;
    color: white;
    text-decoration: none;
    text-transform: none;
    font-size: 15px;
    text-align: right;
    padding: 0px;
    line-height: 21px;
    text-shadow: var(--shadow_textfull);
}






#selectshipscene {
    position: absolute;
    top: 65px;
    left: 25px;
    right: 25px;
    bottom: 40px;

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
}

#selectshipscene:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 10%,rgb(30,30,30) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}



#selectshipscene #shipname {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
}

#selectshipscene #shipname .shipname {
    position: relative;

    color: white;
    text-transform: none;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    font-size: 50px;

    text-align: center;
    line-height: 60px;
    text-transform: uppercase;
    overflow: hidden;
    text-shadow: var(--shadow_textfull);
}


#selectshipscene #shipname .action {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    color: silver;

    text-decoration: none;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
}

#selectshipscene #destroyed {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

}

#selectshipscene #destroyed .destroyed {
    position: absolute;
    top: 10px;
    width: 520px;
    height: 600px;
    left: calc(50% - 260px);
    background-color: rgb(164,2,4);
    color: white;
    box-sizing: border-box;
    padding: 20px;
    z-index: 1000;
    clip-path: var(--clip_win_destroyed);
}



#selectshipscene #destroyed .destroyed .dtitle {
    position: relative;
    color: white;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    font-size: 40px;

    text-align: center;
    animation: font_color_glitch 1300ms linear !important;
}
#selectshipscene #destroyed .destroyed .dnote {
    position: relative;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;

    text-align: left;
    padding: 25px 10px 10px;
    text-align: center;
}



#selectshipscene #destroyed .destroyed .dhint {
    position: relative;
    color: white;
    text-transform: uppercase;

    text-decoration: none;
    font-size: 12px;

    text-align: left;
    padding: 10px 10px 10px;
    text-align: center;
}

#selectshipscene #destroyed .destroyed .revivecards {
    position: relative;
    text-align: center;
    margin: 85px 0px 20px;
}

#selectshipscene #destroyed .destroyed .revivecards .sdom {

    display: block;
    position: absolute;
    /* line-height: 40px; */
    bottom: calc(100% - -39px);
    left: 0px;
    right: 0px;
    text-transform: uppercase;
    font-size: 20px;

}

#selectshipscene #destroyed .destroyed .revivecards .deal .sbuy {
    display: block;
    position: absolute;
    top: -31px;
    left: 0px;
    right: 0px;
    text-shadow: none;
    font-size: 17px;

}

#selectshipscene #destroyed .destroyed .revivecards .deal {
    display: inline-block;
    position: relative;
    width: 390px;
    margin: 5px 8px;
    height: 200px;
    max-width: 465px;
    box-sizing: border-box;
    cursor: pointer;
    text-shadow: var(--shadow_textfull);

}
#selectshipscene #destroyed .destroyed .revivecards .deal .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    clip-path: var(--clip_win_marketoffer);
}
#selectshipscene #destroyed .destroyed .revivecards .deal .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}
#selectshipscene #destroyed .destroyed .revivecards .deal:hover .name {
    animation: shadowing 5000ms linear;
}
#selectshipscene #destroyed .destroyed .revivecards .deal.deal-reviveship .img:before {
    background-image: url(store/store_deal_reviveship.jpg);
    background-position: center right,left;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .name {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 31px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: left;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt {
    top: 75px;
    left: 10px;
    text-align: left;
    position: absolute;
    font-size: 12px;

    color: white;

}

#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 25px;
    text-transform: uppercase;
    font-size: 10px;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .pos {
    display: block;

    color: #ffbc00;
    padding-left: 20px;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .neg {
    display: block;

    color: gray;
    padding-left: 20px;
}



#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .srevivecard {
    font-size: 14px;
    color: #ffbc00;
}


#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .srevivecard .sub {

    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .squestcard {
    font-size: 14px;
    color: #ffbc00;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .squestcard .sub {

    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .sbasiccard {
    font-size: 14px;
    color: #ffbc00;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .sbasiccard .sub {
    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .smorale {
    font-size: 14px;
    color: #ffbc00;
}
#selectshipscene #destroyed .destroyed .revivecards .deal .txt ul li .smorale .sub {
    content: 'MORALE';
    display: inline-block;
    padding-left: 25px;
    padding-top: 3px;
    height: 19px;
    background: url(./ico/morale_16.png) 6px 0px no-repeat;
    background-size: 16px;
    font-size: 12px;
    color: white;
    position: relative;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .discount {
    position: absolute;
    height: 60px;
    width: 60px;
    font-size: 20px;
    color: rgb(255,255,255);
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    border-radius: 50px;
    line-height: 68px;
    background-image: url(store/store_special_offer_sticker.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    bottom: 69px;
    right: -10px;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .discount:after {
    content: '%';
    position: relative;
    font-size: 10px;

    color: rgb(255,255,255);

    padding-left: 2px;
    text-shadow: 2px 2px 0 #000;
}


#selectshipscene #destroyed .destroyed .revivecards .deal .price {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .price .basic {
    position: absolute;
    bottom: 35px;
    right: 37px;
    font-size: 19px;

    color: rgb(234,33,43);
    white-space: nowrap;
    text-align: right;

    font-family: var(--fontFaimly_semi);
}

#selectshipscene #destroyed .destroyed .revivecards .deal .price .basic:after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -5px;
    left: -5px;
    top: 0px;
    background-image: linear-gradient(transparent calc(50% - 0.8px),#ce000b calc(50% - 0.8px),#ce000b calc(50% + 0.8px),transparent calc(50% + 0.8px));
    transform: rotate(4deg);
}


#selectshipscene #destroyed .destroyed .revivecards .deal .price .basic .curr.czk {
    font-size: 0.5em;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .price .basic .curr.eur {
    padding-right: 5px;
}


#selectshipscene #destroyed .destroyed .revivecards .deal .price .basic small {
    font-size: 14px;
    vertical-align: text-top;
    text-decoration: none;
}


#selectshipscene #destroyed .destroyed .revivecards .deal .final {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 32px;

    color: #ffbc00;

    text-align: right;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .final .curr.czk {
    font-size: 0.5em;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .final .curr.eur {
    padding-right: 5px;
}


#selectshipscene #destroyed .destroyed .revivecards .deal .final small {
    font-size: 12px;
    vertical-align: text-top;
}

#selectshipscene #destroyed .destroyed .revivecards .deal .info {
    position: absolute;
    bottom: -11px;
    right: 20px;
    font-size: 10px;

    color: #ffbc00;

    text-align: right;
    white-space: nowrap;
    padding: 0px;
    text-transform: none;
}







#selectshipscene #destroyed .destroyed .revivecards .card {
    position: relative;
    display: inline-block;
    height: 210px;
    width: 100%;

}


#selectshipscene #destroyed .destroyed .revivecards .card .revivespacecraft {
    position: absolute;
    top: 233px;
    width: 110px;
    left: calc(50% - 55px);
    cursor: pointer;
}

#selectshipscene #destroyed .destroyed .revivecards .card canvas {
    height: 90%;

    margin-top: 5%;
    transition: .1s;
    cursor: pointer;

}

#selectshipscene #destroyed .destroyed .revivecards .card canvas:hover {
    height: 100%;
    margin-top: 0%;
}


#selectshipscene #destroyed .destroyed .deletespacecraft {
    position: absolute;
    /* margin-top: 75px; */
    cursor: pointer;
    color: white;
    /* text-transform: uppercase; */
    display: block;
    text-align: center;
    font-size: 13px;
    line-height: 24px;
    bottom: 27px;
    left: 10px;
    right: 10px;
}


#selectshipscene #destroyed .destroyed .deletespacecraft .whitelink {
    color: black;
    padding: 0px 8px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    z-index: 1;
    display: inline-block;
    font-family: var(--fontFaimly_button);
}


#selectshipscene #destroyed .destroyed .deletespacecraft .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,1);

    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#selectshipscene #destroyed .destroyed .deletespacecraft .whitelink:hover {
    animation: blink 100ms linear 2;
}




#selectshipscene #shipinfo {
    position: absolute;
    top: 30%;
    left: 0px;
    right: 0px;
}


#selectshipscene #shipinfo .info {
    color: white;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}


#selectshipscene #shiplist {
    position: absolute;
    bottom: 45px;
    left: 10px;
    right: 10px;
    height: 210px;
    text-align: center;
}

#selectshipscene #shiplist .starbox {
    padding: 0px 0px 0px 15px;
}
#selectshipscene #shiplist .starbox .startitle {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: #c3d5f1;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    width: unset;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0);
    background-image: url(ico/sun-16.png);
    padding-left: 23px;
    background-position: 5px center;
    background-size: 13px;
    background-repeat: no-repeat;
}

#selectshipscene #shiplist .starbox .startitle .basesqty  {
    position: relative;
    display: inline;
    /* background-color: rgb(35 43 71); */
    color: #ffffff69;
    padding: 0px 3px;
    font-family: var(--fontFaimly_default);
    transform: translateX(-50%);
    line-height: 11px;
    font-size: 12px;
    margin: 0px 0px 0px 4px;
}

#selectshipscene #shiplist .starbox .startitle:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#selectshipscene #shiplist .starbox.active .startitle:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#selectshipscene #shiplist .starbox.active .startitle{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

#selectshipscene #shiplist .starbox .scroller {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 35px;
    text-align: center;
    visibility: hidden;
}

#selectshipscene #shiplist .starbox.active .scroller {
    visibility: visible;
}

#selectshipscene #shiplist .starbox .scroller .ship {
    display: inline-block;
    position: relative;
    margin: 0px 5px;
    height: 155px;
    width: 220px;

    overflow: hidden;
    font-size: 12px;
    color: black;
}

#selectshipscene #shiplist .starbox .scroller .ship:not(.active) {
    cursor: pointer;
}

#selectshipscene #shiplist .starbox .scroller .ship:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 18px;
    background-color: rgb(9 13 20 / 85%)
}

#selectshipscene #shiplist .starbox .scroller .ship.new .select {
    display: block;
    position: absolute;
    top: calc(50% - 26px);
    color: white;
    left: 50%;
    transform: translateX(-50%);

}






#selectshipscene #shiplist .starbox .scroller .ship.new .vidcont {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 18px;
    overflow: hidden;
}

#selectshipscene #shiplist .starbox .scroller .ship.new .vidcont video {
    width: 100%;
    position: absolute;
    left: 0px;
    top: -31px;
    z-index: -1;
}

#selectshipscene #shiplist .starbox .scroller .ship:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 15px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}



#selectshipscene #shiplist .starbox .scroller .ship.new .new-block {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    line-height: 133px;
    text-transform: uppercase;
    font-size: 14px;
    /*font-family: var(--fontFaimly_button);*/
    color: white;
    text-shadow: var(--shadow_textfull);
}

#selectshipscene #shiplist .starbox .scroller .ship.new:hover .new-block {

}

#selectshipscene #shiplist .starbox .scroller .ship .bckg {
    position: absolute;
    bottom: 25px;
    left: -25px;
    right: -25px;
    top: -25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(1.5) sepia(1) hue-rotate(172deg) grayscale(0.4);
}

#selectshipscene #shiplist .starbox .scroller .ship .name {
    position: absolute;
    bottom: 54px;
    left: 13px;
    right: 13px;
    color: #cfcfcf;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 16px;
    z-index: 10;
    font-family: var(--fontFaimly_button);
}


#selectshipscene #shiplist .starbox .scroller .ship .starname {
    position: absolute;
    bottom: 30px;
    left: 13px;
    right: 13px;
    color: #858585;
    font-size: 12px;
    line-height: 10px;
    z-index: 10;
    font-family: var(--fontFaimly_button);
}

#selectshipscene #shiplist .starbox .scroller .ship .id {
    position: absolute;
    display: none;
    bottom: 0px;
    left: 50%;
    color: #37535f;
    font-size: 10px;
    text-transform: uppercase;
    z-index: 10;
    text-align: right;
    letter-spacing: 2px;
    transform: translateX(-50%);
}

#selectshipscene #shiplist .starbox .scroller .ship.active .id {
    display: block;
}

#selectshipscene #shiplist .starbox .scroller .ship .txt {
    position: absolute;
    top: 117px;
    left: 13px;
    right: 13px;
    color: #c3d5f1;
    font-size: 12px;
    line-height: 14px;
    z-index: 10;
    font-family: var(--fontFaimly_button);
    transform: translateY(-50%);
    text-transform: uppercase;
}



#selectshipscene #shiplist .starbox .scroller .ship:not(.active):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#selectshipscene #shiplist .starbox .scroller .ship.active:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    background-color: #0e1b37c4;
}



#selectshipscene #shiplist .starbox .scroller .ship.destroyed:before {
    background-color: rgb(164,2,4);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;

}

#selectshipscene #shiplist .starbox .scroller .ship.destroyed:before.active {
    background-color: rgb(164,2,4);
    background-image: none;


}

#selectshipscene #shiplist .starbox .scroller .ship.destroyed .id {
    color: rgb(164,2,4);
}

#selectshipscene #shiplist .starbox .scroller .ship.destroyed .bckg {

}

#selectshipscene #shiplist .starbox .scroller .ship.destroyed .name {
    color: black;
}

#selectshipscene #shiplist .starbox .scroller .ship.destroyed .txt {
    display: none;
}




#selectshipscene #shiplist .starbox .scroller .ship.active .bckg {

    filter: brightness(1.5) sepia(1) hue-rotate(172deg) grayscale(0.4) blur(7px);
}

#selectshipscene #shiplist .starbox .scroller .ship.active.destroyed .bckg {
    filter:  grayscale(1) brightness(0.1);
}


#selectshipscene #shiplist .starbox .scroller .ship .alert {
    display: block;
    position: absolute;
    left: calc(50% );
    top: 14px;
    font-size: 10px;
    clip-path: var(--clip_whitelink);
    padding: 3px 11px;
    font-family: var(--fontFaimly_button);
    transform: translateX(-50%);
}



#selectshipscene #shiplist .starbox .scroller .ship .alert.idle {
    background-color: rgb(35 43 71);
    color: white;
}
#selectshipscene #shiplist .starbox .scroller .ship .alert.danger {
    background-color: #b92b00;
    color: white;
}


#selectshipscene #shiplist .starbox .scroller .ship.active .name {
    display: none;

}

#selectshipscene #shiplist .starbox .scroller .ship.active .select {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    top: calc(50% - 31px);
    color: white;
    z-index: 1;

}

#selectshipscene #shiplist .starbox .scroller .ship.active .select:before {
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;
}

#selectshipscene #shiplist .starbox .scroller .ship.active .select:after {
    animation: highlited 1000ms linear infinite;
}

#selectshipscene #shiplist .starbox .scroller .ship.active:hover .select {
    animation: none;
}



#selectshipscene #shiplist .starbox .scroller .ship.active .selectmap {
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(50% + 14px);
    height: 15px;
    color: black;
    line-height: 15px;
    font-size: 10px;
    padding: 0px 0px;
    cursor: pointer;
    text-decoration: underline;


}



#selectshipscene #shiplist .starbox .scroller .ship.active .selectmap:hover {
    animation: blink 100ms linear 2 alternate;
}



#selectshipscene #prev,
#selectshipscene #next {
    position: absolute;
    top: calc(50% - 80px);
}

#selectshipscene #prev {
    left: 70px;
}

#selectshipscene #next {
    right: 70px;
}

#selectshipscene #next .arrow,
#selectshipscene #prev .arrow {
    cursor: pointer;
    position: absolute;
    top: 0px;



    height: 30px;
    width: 30px;
    z-index: 1;
    cursor: pointer;

}

#selectshipscene #next .arrow:before,
#selectshipscene #prev .arrow:before {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: var(--border-button-color);
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

#selectshipscene #next .arrow:after,
#selectshipscene #prev .arrow:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
}



#selectshipscene #next .arrow:hover:before,
#selectshipscene #prev .arrow:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
}

#selectshipscene #next .arrow {
    left: 0px;
}
#selectshipscene #next .arrow:before {
    background-image: url('./ico/arrow_right.png');
}

#selectshipscene #prev .arrow {
    right: 0px;
}
#selectshipscene #prev .arrow:before {
    background-image: url('./ico/arrow_left.png');
}

#selectshipscene #nsbutton button,
#selectshipscene #acceptbutton button {

}

#selectshipscene #acceptbutton {
    position: absolute;
    bottom: 180px;
    right: 50px;
}

#selectshipscene #nsbutton {
    position: absolute;
    top: calc(30% + 70px);
    left: calc(50% - 85px);
    width: 170px;
}

#selectshipscene #nsbutton button {
    animation:highlited 1000ms linear infinite;
    width: 170px;
}


#selectshipscene #splaynow {
    position: absolute;
    top: 172px;
    left: 50%;
    transform: translateX(-50%);


}

#selectshipscene #splaynow .splaynow {
    padding: 0px 30px;


}
#selectshipscene #splaynow .splaynow:before {
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;

}

#selectshipscene #splaynow .splaynow:after {


}


#selectshipscene #config {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

}

#selectshipscene #config .config {
    color: #c3d5f182;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

#selectshipscene #config .config:hover {
    color: #c3d5f1;
    animation: blink 100ms linear 2;
}


#selectshipscene #params {
    position: absolute;
    top: 120px;
    left: 15px;
    width: 400px;
}

#selectshipscene #params .params {
    position: absolute;
    top: 0px;
    left: 0px;


    color: white;
    font-size: 12px;
}

#selectshipscene #params .params div {
    position: relative;
    text-transform:uppercase;
    font-size:11px;
    font-weight:normal;
    height:21px;
    padding:0px 5px 0px 35px;
    background-size:14px;
    background-position:13px center;
    background-repeat:no-repeat;

    text-shadow: var(--shadow_textfull);
}

#selectshipscene #swichmodel {
    position: absolute;
    bottom: 305px;
    left: 125px;
    font-size: 10px;
}

#selectshipscene #screenshot {
    position: absolute;
    bottom: 290px;
    left: 125px;
    width: 75px;
    text-align: center;
}

#selectshipscene #screenshot #savescreenshot,
#selectshipscene #screenshot #copycreenshot{
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

#selectshipscene #screenshot #savescreenshot:before,
#selectshipscene #screenshot #copycreenshot:before{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.1;
}

#selectshipscene #screenshot #savescreenshot:hover:before,
#selectshipscene #screenshot #copycreenshot:hover:before{
    animation: blink 100ms linear 2 alternate;
    opacity: 1;
}


#selectshipscene #screenshot #savescreenshot:before {
    background-image: url(ico/photo-32.png);
}

#selectshipscene #screenshot #copycreenshot:before {
    background-image: url(ico/screenshot-32.png);
}


#selectshipscene #swichmodel .switch input:checked + .slider:after {
    content: "3D";
}

#selectshipscene #swichmodel .switch .slider:after {
    content: "2D";
}

#selectshipscene #_crew {
    display: none;
    position: absolute;
    top: 50px;
    right: 6px;
    bottom: 190px;
    overflow: hidden;
    width: 220px;
    color: gray;
    text-align: center;
    overflow-y: scroll;

    font-size: 12px;
}
#selectshipscene #_crew .astronaut{
    position: relative;
    display: block;
    width: 220px;
    height: 60px;
    text-align: left;
    margin-bottom: 5px;
    z-index: 1;
}


#selectshipscene #_crew .astronaut:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 10px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_menu_selectship_astronaut);
    z-index: -1;
}
#selectshipscene #_crew .astronaut .img{
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 90px;
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: grayscale(1) brightness(1);

    clip-path: var(--clip_menu_selectship_astronaut);
}

#selectshipscene #_crew .astronaut .name{
    display: block;
    position: absolute;
    left: 90px;
    color: white;
    font-size: 12px;

    top: 10px;
}



#selectshipscene #_crew .astronaut .health{
    position: absolute;
    bottom: 10px;
    height: 7px;
    left: 90px;
    width: 91px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}

#selectshipscene #_crew .astronaut .health .txt{
    position: absolute;
    bottom: 0px;
    line-height: 6px;
    right: calc(100% + 5px);
    box-sizing: border-box;
    z-index: 1;
    font-size: 9px;
    text-align: right;

    white-space: nowrap;
}

#selectshipscene #_crew .astronaut .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#selectshipscene #_crew .astronaut .exp{
    position: absolute;
    bottom: 22px;
    height: 7px;
    left: 90px;
    width: 91px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_exp_barbckg_color);
    box-sizing: border-box;
    z-index: 1;
}
#selectshipscene #_crew .astronaut .exp .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_exp_bar_color);
}

#selectshipscene #_crew .astronaut .exp .txt{
    position: absolute;
    bottom: 0px;
    line-height: 6px;
    right: calc(100% + 5px);
    box-sizing: border-box;
    z-index: 1;
    font-size: 9px;
    text-align: right;

    white-space: nowrap;
    color: var(--hud_exp_text_color);
}

#selectshipscene #_crew .astronaut .alvl{
    position: absolute;
    top: 1px;
    right: 11px;


    font-size: 10px;
    left: 1px;
    bottom: 1px;
    color: rgb(255,255,255);
    text-align: center;
    line-height: 52px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;

    clip-path: var(--clip_menu_selectship_astronaut);
    z-index: -1;
}

#selectshipscene #_crew .astronaut .alvl:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(
        74deg
        , rgb(60 60 60) 62%, rgb(0 0 0 / 36%) 100%);
}

#selectshipscene #_crew .astronaut .alvl span.lvl {
    display: none;
}



#selectshipscene #_crew .astronaut .alvl span.precimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    background-repeat: no-repeat;
    background-size: 83px;
    background-position: right;
    text-shadow: var(--shadow_textfull);
}




#newshipscene #money {
    position: absolute;
    top: 65px;
    right: 25px;
    font-family: var(--fontFaimly_header);
    text-align: right;
}

#newshipscene #money .money {
    font-size:20px;
    font-weight:normal;
    color:rgb(255,255,255);
}
#newshipscene #money .money .format-exc {
}
#newshipscene #money .money .calcul .format-exc{
    color: white;
    font-size: 14px;
}
#newshipscene #money .money .count {
    font-size: 20px;
}
#newshipscene #money .money .neg {
    color:rgb(255,0,0);
    text-shadow:0px 0px 10px rgb(255,48,50);
    animation:highlited 1000ms linear infinite;
}
#newshipscene #money .money .exc.pos.count {
    display: none;
}
#newshipscene #money .mor {
    display: none;
    font-size:20px;
    font-weight:normal;
    color:rgb(255,255,255);
}
#newshipscene #money .mor .format-mor {
    font-size:20px;
}
#newshipscene #money .mor .calcul .format-mor{
    color: white;
    font-size: 14px;
}
#newshipscene #money .mor .count {
    font-size: 20px;
}
#newshipscene #money .mor .neg {
    color:rgb(255,0,0);
    text-shadow:0px 0px 10px rgb(255,48,50);
    animation:highlited 1000ms linear infinite;
}
#newshipscene #money .mor .exc.pos.count {
    display: none;
}

#tutorialbox {
    position: absolute;
    right: 135px;
    max-width: 270px;
    top: 180px;
    text-align: right;
    text-shadow: var(--shadow_textfull);
}

#telo.maphud #tutorialbox {
    top: 180px;
}
/*
#tutorialbox:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: -20px;
    top: 0px;
    bottom: 0px;
}
*/

#telo.rightcontext #tutorialbox:not(.pop) {
    right: 370px;
    top: 188px;
}

#telo.fleetships #tutorialbox:not(.pop) {
    right: 400px;
    top: 188px;
}


#telo.starmaphud #tutorialbox:not(.pop) {
    right: 15px;
    top: 188px;
}


#tutorialbox.pop {
    width: 400px;
    max-width: 400px;
    right: calc(50% - 200px);
    text-align: center;
    color: rgba(255,255,255,1);
    z-index: 9999; /* getpack zlobi kdyz je to vic */
}

#tutorialbox .sstep-next-act {
    position: relative;
    display: none;
}

#tutorialbox.pop .sstep-next-act {
    display: none !important;
}

#tutorialbox .sstep-next-act.opened {
    display: block;
}

#tutorialbox .sstep-next-act .sstep-next-act-btn {
    position: absolute;
    right: 0px;
    top: 10px;
    background-color: transparent;
    white-space: nowrap;
    padding: 0px 20px;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    color: #ffbc00;
    z-index: 0;
}

#tutorialbox .sstep-next-act .sstep-next-act-btn:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color:#bf850966;
    z-index: -1;
}

#tutorialbox .sstep-next-act .sstep-next-act-btn:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}
#tutorialbox .sstep-next-act .sstep-next-act-btn:hover {
    animation: none;

}
#tutorialbox .sstep-next-act .sstep-next-act-btn:hover:before {
    box-shadow: 0px 0px 15px #ffbc00 inset !important;
    animation: blink 100ms linear 2 alternate
}

#tutorialbox.pop .sstep-title {
    display: none;
}

#tutorialbox .sstep-title  {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;

    height: 30px;

    font-size: 15px;
}

#tutorialbox .sstep-title .sstep-title-txt {
    position: absolute;
    right: 0px;
    top: 0px;
    color: silver;
    white-space: nowrap;
    padding: 0px;
    text-shadow: none;
    font-family: var(--fontFaimly_text);
    cursor: pointer;
}

#tutorialbox .sstep-title.completed .sstep-title-txt .ustext {
    animation:font_gold_glowing 1800ms cubic-bezier(0.05, 1.03, 0.65, 0.61) infinite;
    color: #ffbc00;

}

#tutorialbox .sstep-title .sstep-title-txt .infosight {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 0px 0px 0px 7px;
    width: 12px;
    height: 12px;
}

#tutorialbox .sstep-title .sstep-title-txt .infosight:before {
    content: '';
    position: absolute;
    right: 0px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;
}

#tutorialbox .sstep-title .sstep-title-txt .infosight:hover .sstep-title-txt-hint {
    display: block;
}

#tutorialbox .sstep-title .sstep-title-txt .infosight .sstep-title-txt-hint {
    display: none;
    position: absolute;
    right: 16px;
    width: 205px;
    top: -3px;
    background-color: var(--subtext_color-background);
    padding: 9px 12px;
    box-sizing: border-box;
    z-index: 100;
    font-size: 13px;
    color: #ffbc00;
    text-transform: none;
    white-space: unset;
    text-align: left;
    white-space: initial;
    animation: var(--animation-subtext-fadeinFast);
    filter: var(--subtext_shadow);
    pointer-events: none;
}

#tutorialbox .sstep-title .sstep-title-txt .infosight .sstep-title-txt-hint:before {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 0px;
    right: -10px;
    border-left: 10px solid var(--subtext_color-background);
}

#tutorialbox .sstep-title .sstep-title-txt .qsbefb,
#tutorialbox .sstep-title .sstep-title-txt .qsbefa{
    position: absolute;
    right: 0px;
    top: 110%;
    font-size: 10px;
    color: gray;
    display: none;
}

#tutorialbox .sstep-title:not(.opened) .sstep-title-txt .qsbefa {
    display: block;
}



#tutorialbox .sstep-title.opened .sstep-title-txt .qsbefb {
    display: block;
}

#tutorialbox .sstep-title .sstep-title-txt:hover:before {
    animation: blink 100ms linear 2 alternate;
}

#tutorialbox.pop .ssteps {
    display: none;
}

#tutorialbox .ssteps  {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    z-index: 1;
}

#tutorialbox .sstep-title .sstepsnew {
    font-size: 12px;
    color: gray;
    padding: 0px 0px 0px 5px;
    font-family: var(--fontFaimly_button);
}

#tutorialbox .sstep-title .sstepsnew:hover {
    animation: blink 100ms linear 2 alternate;
}

#tutorialbox .ssteps-title {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
}

#tutorialbox .ssteps .sstepslist {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: none;

}

#tutorialbox .ssteps.opened .sstepslist .sstep {
    display: block;
}

#tutorialbox .ssteps .sstepslist .sstep {
    display: none;
    top: 0px;
    right: 0px;
    color: rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0);
    position: relative;
    height: 40px;
    padding: 0px;
    margin: 0px;
    margin-top: 13px;
    left: unset;
}

#tutorialbox .ssteps .sstepslist .sstep.completed {
    display: block;
}

#tutorialbox .ssteps .sstepslist .sstep .stxt {
    display: block;
    position: absolute;
    left: -190px;
    text-align: left;
    /*line-height: 12px;*/
    text-transform: uppercase;
    bottom: calc(50% + 5px);
    transform: translateY(50%);

    max-width: 120px;
}

#tutorialbox .ssteps .sstepslist .sstep .stxt .txtban {

    padding: 3px 0px;
    color: rgb(165,165,165);
}

#tutorialbox .ssteps .sstepslist .sstep.completed .stxt .txtban {
    color: #ffbc00;
    cursor: pointer;
    position: relative;
    display: inline-block;

}

#tutorialbox .ssteps .sstepslist .sstep.completed .stxt .txtban:hover {
    animation: blink 100ms linear 2 alternate;
}

#tutorialbox .ssteps .sstepslist .sstep.completed .stxt .txtban:before {
    content: '';
    display: block;
    position: absolute;
    left: -25px;
    top: 0px;
    bottom: 0px;
    background-image: url(ico/ico_completed_64.png);
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    filter: drop-shadow(0px 0px 7px gold);

}

#tutorialbox .ssteps .sstepslist .sstep .starget .have {
    display: block;
    position: absolute;
    bottom: 19px;
    right: 0px;
    line-height: 12px;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

#tutorialbox .ssteps .sstepslist .sstep .starget .total {
    display: block;
    position: absolute;
    right: 0px;
    font-size: 12px;
    bottom: 3px;
    line-height: 12px;
    text-align: right;
    white-space: nowrap;
    color: gray;
}

#tutorialbox .ssteps .sstepslist .sstep .starget .total .qsbef {

    display: block;
    position: absolute;
    top: 0px;
    left: -15px;
    bottom: 0px;
    text-align: right;
    font-size: 10px;
}


#tutorialbox .ssteps .sstepslist .sstep .infosight {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 10px;
    height: 10px;
    margin: 0px 0px 0px 10px;
}

#tutorialbox .ssteps .sstepslist .sstep.completed .infosight {
    display: none;

}

#tutorialbox .ssteps .sstepslist .sstep .infosight:before {
    content: '';
    position: absolute;
    right: 0px;
    width: 12px;
    top: -1px;
    height: 12px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;
}

#tutorialbox .ssteps .sstepslist .sstep .infosight:hover {
    animation: blink 100ms linear 2 alternate;
}


#tutorialbox .ssteps .sstepslist .sstep .srewards {
    display: block;
    position: absolute;
    top: calc(50% - 7px);
    right: 200px;
    width: 190px;
    background-color: rgb(10, 10, 10);
    z-index: 1;
    text-align: center;
    padding: 15px 10px 60px 10px;
    font-size: 12px;
    z-index: 10000;
    animation: blink 100ms linear 2 alternate;
    filter: var(--subtext_shadow);
}

#tutorialbox .ssteps .sstepslist .sstep .srewards:before {
    content: '';
    position: absolute;
    left: -2px;
    right: -200px;
    top: 0px;
    bottom: 0px;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .infotxt {
    color: #ffbc00;
    padding: 0px 10px 13px 10px;
    font-family: var(--fontFaimly_text);
    text-transform: none;
    font-size: 14px;
    position: relative;
    display: block;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards:after {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 0px;
    right: -10px;
    border-left: 10px solid rgb(10,10,10);
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .format-mor {
    background-position: center left !important;
    padding-left: 20px;
    padding-right: unset;
}





#tutorialbox .ssteps .sstepslist .sstep .srewards  .exc{
    font-size: 14px;
    display: block;
    position: relative;
    margin: 0px 0px 10px 0px;


}

#tutorialbox .ssteps .sstepslist .sstep .srewards  .morale{
    font-size: 14px;
    display: block;
    position: relative;
    margin: 0px 0px 10px 0px;



}

#tutorialbox .ssteps .sstepslist .sstep .srewards  .cards{

    display: block;
    position: relative;
    margin: 5px;

}

#tutorialbox .ssteps .sstepslist .sstep .srewards  .cards .card{

    display: inline-block;
    position: relative;
    height: 53px;
    width: 37px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;


}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete{
    display: block;
    position: absolute;
    height: 35px;
    bottom: 20px;
    background-color: transparent;
    white-space: nowrap;
    padding: 0px 20px;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    color: #ffbc00;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color:#bf850966;
    z-index: -1;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%),
        linear-gradient(0deg, #ffbc00 0%, #ffbc00 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete:hover {
    animation: none;

}
#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete:not(.unactive):hover:before {
    box-shadow: 0px 0px 15px #ffbc00 inset !important;
    animation: blink 100ms linear 2 alternate
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete.unactive:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete.unactive{

    cursor: default;
    color: #494848;
}

#tutorialbox .ssteps .sstepslist .sstep .srewards .scomplete.unactive:before{

    background-color: #43434370;
}

#tutorialbox .hide-tutorials {
    display: none;
    position: absolute;
    /* margin: 8px 0px 0px; */
    /* color: gray; */
    /* font-size: 10px; */
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(ico/close-window-16.png);
    background-repeat: no-repeat;

    background-position: center;
    opacity: 0.5;
    top: -2px;
    right: -21px;
}
#tutorialbox .hide-tutorials:hover {
    animation: blink 100ms linear 2 alternate;
    opacity: 1;
}

#tutorialbox:hover .hide-tutorials {
    display: block;
}

#tutorialbox.pop .hide-tutorials {
    display: none;
}

#tutorialbox .qquest  {
    top: 0px;
    right: 0px;
    color: rgb(220,220,220);
    background-color: rgba(0,0,0,0);
}

#tutorialbox.pop .qquest {
    position: relative;
    color: rgba(255,255,255,1);
    cursor: pointer;
}

#tutorialbox.pop .qquest:before{
    content: "";
    position: absolute;
    display: block;
    top: -36px;
    left: 0px;
    right: 0px;
    bottom: -10px;
    background-color: rgb(30, 30, 30);
    clip-path: var(--clip_qquestbox);
    background-image: linear-gradient(0deg, rgb(9 14 41) 0%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0.1) 100%), url(progressbar_bckgr_1.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: left top, center top;
}

#tutorialbox:not(.pop) .qquest .thint  {
    top: -2px;
    right: calc(100% + 12px);
    text-align: right;
    white-space: nowrap;
}
#tutorialbox:not(.pop) .qquest .thint:before  {

}

#tutorialbox .qquest .qheader {
    clear: both;
}

#tutorialbox.pop .qquest .qheader  {
    position: relative;

}

#tutorialbox .qquest .qheader span.qcampaign {
    top: 0px;
    right: 0px;
    display: block;
    font-size: 13px;
    color: rgb(205 205 205);
    text-transform: uppercase;
    white-space: nowrap;
}

#tutorialbox:not(.pop) .qquest .qheader span.qname {
    display: block;
    position: relative;
    font-size: 17px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    cursor: pointer;


    padding: 3px 0px 5px;
    color: #ffbc00;
}

#tutorialbox:not(.pop) .qquest .qheader span.qname:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, rgb(80, 80, 80, 1) 50%);
}

#tutorialbox.pop .qquest .qheader span.qname {
    display: block;
    font-size: 18px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

#tutorialbox.pop .qquest .qheader span.qname {
    position: relative;
    top: auto;
    right: auto;
}


#tutorialbox .qquest .qheader span.qname:hover {
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2;
}

#tutorialbox .qquest .qheader span.qhint {
    display: block;
    font-size: 13px;
    float: right;
    clear: both;
    margin-bottom: 20px;
    padding-top: 3px;
    line-height: 20px;
}

#tutorialbox .qquest .qheader span.qhint img {
    padding: 0px 3px;
}

#tutorialbox .qquest .qheader span.qhint p {
    padding: 5px 0px 5px;
    margin: 0px;
    text-transform: none;
    position: relative;
    text-align: right;
}

#tutorialbox .qquest .qheader span.qhint p.sub {
    padding: 3px 0px 3px;
    margin: 0px;
    text-transform: uppercase;

    text-align: justify;
}

#tutorialbox .qquest .qheader span.qhint .key {

    min-width: 5px;
    color: black;
    padding: 0px 8px;
    margin: 0px;

    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
    font-family: var(--fontFaimly_button);
}

#tutorialbox .qquest .qheader span.qhint .key:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,1);

    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#tutorialbox .qquest .qheader span.qhint .qreqired {
    display: block;
    width: 260px;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}
#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem {
    display: block;
    width: 100%;
    position: relative;
    height: 32px;
    margin: 0px 0px 3px;
    color: rgba(255,255,255,0.8);
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem.complete {
    color: rgba(255,255,255,0.3);
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iicon {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
    box-sizing:border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iname {
    display: block;
    position: absolute;
    left: 0px;
    text-align: left;
    line-height: 12px;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px 6px;
    color: black;
    white-space: nowrap;
    /*background-color: #ffbc00;*/
    /*font-family: var(--fontFaimly_button);*/
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iname.clickable {
    cursor: pointer;
}
#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iname.clickable:hover {
    animation: blink 100ms linear 2;
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem:not(.complete) .iname {
    text-shadow: none;
    font-family: var(--fontFaimly_button);
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem:not(.complete) .iname:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffbc00;
    z-index: -1;
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem.complete .iname {
    background-color: rgba(255,255,255,0);
    color: rgba(255,255,255,0.3);
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iqtyh {
    display: block;
    position: absolute;
    top: 2px;
    right: 0px;
    line-height: 12px;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iqtyn {
    display: block;
    position: absolute;
    right: 0px;
    font-size: 11px;
    bottom: 2px;
    line-height: 12px;
    text-align: right;
    white-space: nowrap;
    color: gray;
}

#tutorialbox .qquest .qheader span.qhint .qreqired .rqitem .iqtyn:before {
    content: '/';
    display: block;
    position: absolute;
    top: 0px;
    left: -9px;
    bottom: 0px;
    text-align: right;
    font-size: 10px;
}

#tutorialbox .qquest .qheader span.qhint .more {
    display: block;
    margin: 0px;
    height: 20px;
    overflow: hidden;
    position: relative;
    padding: 20px 0px 0px;
    box-sizing: border-box;
    text-transform: none;
    line-height: 18px;
    font-size: 12px;
}

#tutorialbox .qquest .qheader span.qhint .more.open {
    height: auto;
    padding: 5px 0px 3px;
    animation: blink 100ms linear 2;
    overflow: visible;
}

#tutorialbox .qquest .qheader span.qhint .more .whitelink {
    font-size: 12px;
    padding: 0px 7px;
    line-height: 16px;
}

#tutorialbox .qquest .qheader span.qhint .more .whitelink:before {
    background-color: rgba(100, 100, 100, 1);
}

#tutorialbox .qquest .qheader span.qhint .more .key:before {
    background-color: rgba(100, 100, 100, 1);
}
#tutorialbox .qquest .qheader span.qhint .more:before {
    content: '';
    display: block;
    position: absolute;
    line-height: 20px;
    text-align: right;
    font-size: 10px;
    background-image: url(ico/moreinfo_32.png);
    color: rgba(255,255,255,0.5);
    top: 5px;
    right: 0px;
    cursor: pointer;
    height: 13px;
    width: 13px;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;

}

#tutorialbox .qquest .qheader span.qhint .more.open img {
    margin: 5px 0px;
    display: block;
    animation: crt 5000ms linear infinite;
}

#tutorialbox .qquest .qheader span.qhint .more:hover:before {
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2;
}



#tutorialbox .qquest .qheader span.qhint .more.open:before {
    display: none;
}

#tutorialbox .qquest .qheader span.qhint .whitelink {
    color: rgb(220,220,220);

    margin: 0px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;

    display: inline-block;
    z-index: 1;

    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 0.5px;
}








#tutorialbox .qquest .qheader span.qhint .whitelink:hover {
    animation: blink 100ms linear 2;
    z-index: 10;
}


#tutorialbox .qquest .qheader span.qhint .whitelink .thint {
    left: unset;
    right: calc(100% + 5px);
    top: -6px;
}

#tutorialbox .qquest .qheader span.qhint .whitelink .wsubcontent {
    display: none;
    position: absolute;
    bottom: calc(100% - 63px);
    left: calc(50% - 50px);
    width: 100px;
    height: 40px;
    background-color: rgba(255,255,255,1);
    z-index: 20;
}

#tutorialbox .qquest .qheader span.qhint .whitelink .wsubcontent .img {
    position: absolute;
    display: block;
    bottom: 10px;
    left: 3px;
    right: 3px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: brightness(2) grayscale(1) invert(1);
}

#tutorialbox .qquest .qheader span.qhint .whitelink .wsubcontent .status {
    position: absolute;
    display: block;
    bottom: 4px;
    left: 3px;
    right: 3px;
    /* height: 30px; */
    line-height: 10px;
    text-align: center;
    color: black;
    text-shadow: none;
    font-size: 10px;
}

#tutorialbox .qquest .qheader span.qhint .whitelink .wsubcontent:before {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-bottom: 6px solid rgba(255,255,255,1);
    position: absolute;
    top: -12px;
    left: calc(50% - 6px);
}

#tutorialbox .qquest .qheader span.qhint .whitelink:hover .wsubcontent {
    display: block;
    animation:blink 100ms linear 2 alternate;
}






#tutorialbox .qquest.completed  {

}

#tutorialbox.pop .qquest:not(.completed)  {
    display: none;
}

#tutorialbox .qquest.completed .qheader .qcompleted  {
    display: inline-block;
    margin: 12px 0px 17px;
}

#tutorialbox .qquest.completed .qheader .qcompleted .thint {
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 3px);
}

#tutorialbox .qquest.completed .qheader:hover:after {
    animation: blink 100ms linear 2;
}

#tutorialbox .qquest.completed .qheader span.qcampaign  {
    font-size: 12px;
    padding: 13px 0px 0px;
    text-shadow: none;
}

#tutorialbox.pop .qquest.completed .qheader span.qcampaign  {
    text-shadow: var(--shadow_textfull);
}

#tutorialbox .qquest.completed .qheader span.qname  {
    font-size: 12px;
    line-height: 24px;


}


#tutorialbox.pop .qquest.completed .qheader span.qname  {
    font-size: 23px;
    line-height: 24px;
    font-family: var(--fontFaimly_header);
    padding: 14px 0px 5px;
    text-shadow: var(--shadow_textfull);
}



#tutorialbox .qquest.completed .qheader span.qhint  {
    font-size: 16px;
    line-height: 24px;

    padding: 7px 4px 0px;
    float: none;
    clear: both;
    margin: 0px;
    text-transform: uppercase;
    width: auto;
    color: #ffbc00;
    animation: highlited 1000ms linear infinite;
}

#tutorialbox .qquest.completed .qheader span.qhint p  {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    text-align: center;
}

#tutorialbox.pop .qquest.completed .qheader span.qhint p  {
    text-transform: uppercase;
    font-size: 15px;
}



.animated_onload_rotation{
    animation:showBox 150ms linear 1 alternate;
}


#zoneni{
    z-index: 999000;
    position:absolute;
    width:450px;
    height:250px;
}

#zoneni:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #292c39;

    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#zoneni .imageselect {
    display: block;
    position: absolute;
    top: 73px;
    left: 30px;
    right: 30px;
    color: white;
}

#zoneni .imageselect .terms {

    text-align: center;
    color: rgba(255,255,255,0.8);
    padding: 20px 0px;
}

#zoneni .imageselect tbody {
    width: 100%;
}


#zoneri{
    z-index: 999000;
    position:absolute;
    width:400px;
    height:200px;



}
#zoneri:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* background-color: rgb(25, 25, 25); */
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-color: rgb(30, 30, 30);
    z-index: -1;
}


#zoneri .text {
    content:'';
    display: block;
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    color: white;
    font-size: 16px;
    text-align: center;
}

#zoneri .ali-confirm {
    position: absolute;
    top: 115px;
    left:50%;
    transform: translateX(-50%);
}
#zoneri .ali-cancel {
    display: none;
}


#declarewar{
    z-index: 999000;
    position: absolute;
    width: 450px;
    height: 280px;
}

#declarewar:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(25, 25, 25);
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(25 67 119 / 94%) 0%, rgb(13 23 47) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#declarewar .texz{
    position: absolute;
    top: 65px;
    left: 40px;
    right: 40px;
    color: gold;
    font-size: 16px;
    text-align: center;
}

#declarewar .actions{
    position: absolute;
    top: 200px;
    left: 40px;
    right: 40px;
    text-align: center;
}

#zonenr{
    z-index: 999000;
    position:absolute;
    width:600px;
    height:650px;
}

#zonenr:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#zonenr .content {
    position: absolute;
    top: 126px;
    right: 10px;
    left: 10px;
    overflow-y: scroll;
    box-sizing: border-box;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    min-height: 0;
    max-height: 510px;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

#zonenr .search {
    position: absolute;
    top: 70px;
    left: 85px;
    right: 65px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;
}

#zonenr .search input {
    z-index: 1000;
    position: absolute;
    width: calc(100% - 27px);
    text-transform: uppercase;
}

#zonenr .content .info{
    color: gray;
    text-align: center;
    padding: 26px 0px;
    text-transform: uppercase;
    font-size: 14px;
}

#zonenr .content .zone .btn{
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    z-index: 10;
}

#zonenr .content .zone .btn .setrel {
    position: relative;
    display: inline-block;
    height: 40px;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 3px 3px;
    line-height: 40px;
}

#zonenr .content .zone .btn .setrel:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

#zonenr .content .zone .btn .setrel:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zonenr .content .zone .btn .setrel:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#zonenr .content .zone{
    position: relative;
    height: 62px;
    box-sizing: border-box;
    color: black;
}

#zonenr .content .zone:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;

    z-index: -1;
}

#zonenr .content .zone:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}



#zonenr .content .zone .img{
    position: absolute;
    top: 6px;
    left: 7px;
    box-sizing: border-box;
    height: 50px;
    width: 50px;
    overflow: hidden;
    background-size: contain;
    background-color: black;
    filter: grayscale(100%) brightness(130%) contrast(110%);

}

#zonenr .content .zone .img.empty{
    background-image: url(ally-no-image.png);
    background-size: cover;
}


#zonenr .content .zone .name{
    position: absolute;
    top: 23px;
    left: 70px;
    box-sizing: border-box;
    line-height: 14px;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    text-align: left;
    height: 35px;
    overflow: hidden;
    right: 12px;
    color: #b9dbff;
}

#zonenr .content .zone .description{
    position: absolute;
    top: 30px;
    left: 70px;
    right: 160px;
    bottom: 0px;
    font-size: 12px;
    overflow: hidden;
}


#zonequantatopoints,
#zonemoraletopoints{
    z-index: 999000;
    position: absolute;
    width: 490px;
    min-height: 300px;
    padding: 60px 10px 60px;
    text-align: center;
    color: white;
    font-size: 14px;
}

#zonequantatopoints:before,
#zonemoraletopoints:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
    clip-path: var(--clip_menu_standardbox);

    z-index: -1;
}

#zonequantatopoints .description,
#zonemoraletopoints .description{

    position: relative;
    margin-top: 20px;
    width: calc(100% - 180px);
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 16px;
    text-align: center;
}

#zonequantatopoints .inputbox,
#zonemoraletopoints .inputbox {
    position: relative;
    margin-top:10px;
    left: 50%;
    transform: translateX(-50%);
}

#zonequantatopoints .inputbox input,
#zonemoraletopoints .inputbox input {
    width:180px;

}

#zonequantatopoints .conversion-rate,
#zonemoraletopoints .conversion-rate {
    position: relative;
    margin-top: 30px;
    left: 50%;
    transform: translateX(-50%);
    line-height: unset;
    font-size: 16px;
}

#zonequantatopoints .conversion-rate .format-quanta,
#zonemoraletopoints .conversion-rate .format-quanta,
#zonequantatopoints .subscription .format-quanta,
#zonemoraletopoints .subscription .format-quanta{
    color: var(--hud_quanta_text_color);
}

#zonequantatopoints .conversion-rate .format-mor,
#zonemoraletopoints .conversion-rate .format-mor,
#zonequantatopoints .subscription .format-mor,
#zonemoraletopoints .subscription .format-mor{
    color: #ffbc00;
}


#zonequantatopoints .conversion-rate .format-zp,
#zonemoraletopoints .conversion-rate .format-zp {
    color: #b9dbff;
}

#zonequantatopoints .conversion-result,
#zonemoraletopoints .conversion-result {
    position: relative;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* color: gold; */
    text-align: center;
    font-size: 14px;
    color: white;

}

#zonequantatopoints .conversion-result .format-zp,
#zonemoraletopoints .conversion-result .format-zp {

    font-size: 16px;
    color: #b9dbff;

}

#zonequantatopoints .actions,
#zonemoraletopoints .actions {
    position:relative;
    margin-top:50px;
    left: 50%;
    transform: translateX(-50%);
}

#zonequantatopoints .subscription,
#zonemoraletopoints .subscription {
    position: relative;
    margin-top: 30px;
    left: 50%;
    transform: translateX(-50%);

    text-align: center;
    font-size: 14px;
}



#zone{
    z-index: 999000;
    position:absolute;
    width:900px;
    height:780px;
}

#zone:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* background-color: rgb(25, 25, 25); */
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(0 0 0 / 94%) 0%, rgb(0 0 0 / 43%) 30%, rgb(0, 0, 0, 0.8) 70%), url(mj_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1;
}

#zone .title{
    visibility: hidden;
}


#zone  #zone_header.header {
    position: absolute;
    top: 0px;
    right: 0px;
    width: calc( 100% - 250px );


    height: 60px;
    padding-left: 15px;
    padding-right: 10px;
    color: gold;
    box-sizing: border-box;
    text-align: left;
    text-transform: none;


    font-size: 32px;

    left: auto;
    overflow: hidden;
    line-height: 67px;
}
#zone .content {
    position: absolute;
    top: 60px;
    right: 10px;
    width: calc( 100% - 260px );
    bottom: 10px;
    overflow-y: scroll;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 400px;
    padding-top: 20px;
}

#zone .content .zswitcher {
    position: relative;

    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;
}

#zone .content .zswitcher .zswich{
    position: relative;
    display: inline-block;

    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#zone .content .zswitcher .zswich:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#zone .content .zswitcher .zswich.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#zone .content .zswitcher .zswich.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}





#zone .content .titler small {
    display: block;
    padding-top: 5px;
}

#zone .content .titler small.tip {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 13px 20px 13px 60px;
    font-size: 14px;
    color: rgb(180, 130, 0);
    background-color: rgb(61, 44, 0);
    border-radius: 6px;
    text-align: left;
    margin: 5px auto;
    max-width: 500px;
    text-transform: none;
}

#zone .content .titler small.tip:before {
    content: '';
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    background: transparent url(ico/lightbulb-2-48.png) center no-repeat;
    background-size: 22px;
    opacity: .65;
}

#zone .content .stats .char {
    display: block;
    position: relative;

    width: 90%;

    margin: 50px auto 0px;
}


#zone .content .stats .char .charbar {
    display: inline-block;
    height: 30px;
    position: relative;
    background-color: red;
}

#zone .content .stats .char .charbar:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: -20px;
    left: 0px;
    bottom: 0px;
    border-left: 1px solid white;


}

#zone .content .stats .uchar {
    display: block;
    position: relative;
    max-width: 400px;
    width: 100%;
    margin: 30px auto 0px;
}

#zone .content .stats .uchar .userlink {
    display: block;
    position: relative;
    min-height: 40px;
    cursor: pointer;

}

#zone .content .stats .uchar .userlink:hover .cuname {
    animation: blink 100ms linear 2 alternate;
}

#zone .content .stats .uchar .userlink .colorbox {
    display: block;
    position: absolute;
    height: 12px;
    width: 12px;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);

    box-sizing: border-box;

}

#zone .content .stats .uchar .userlink .cuname {
    display: block;
    text-align: left;
    position: absolute;
    left: 78px;
    top: 10px;
}

#zone .content .stats .uchar .userlink .cuname .uname {
    display: inline;
    color: white;

}

#zone .content .stats .uchar .userlink .cuname .cname {
    padding: 0px 6px 0px 6px;
    color: white;
    display: inline;
    position: relative;
    margin: 0px 4px;
    color: silver;
    white-space: nowrap;
}

#zone .content .stats .uchar .userlink .cuname .cname:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    color: silver;
}

#zone .content .stats .uchar .userlink .cuname .cname:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    color: silver;
}

#zone .content .stats .uchar .userlink .cuname .score .srel {
    color: gold;
    font-size: 16px;
    padding-right: 6px;
}

#zone .content .stats .uchar .userlink .cuname .score .sabs {
    display: none;
}

#zone .content .stats .uchar .userlink .actions {
    position: absolute;
    top: 0px;
    right: 0px;
}



#zone .content .last_active {
    color: gray;
    font-size: 12px;
    text-align: right;
    padding: 5px 10px;
}

#zone .content .parametters {
    color: white;
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    margin: 5px 20px 10px;

    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: max-content;
}

#zone .content .parametters > div {
    margin-bottom: 20px;
}

#zone .content .parametters .zenhacements {
    position: relative;
}

#zone .content .parametters .buyenhacement{
    position: absolute;
    top: 0px;
    right: 5px;
}
#zone .content .parametters .buyenhacement .addenhacement{
    position: absolute;
    right: 0px;
    top: 0px;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-image: url(ico/plus-24.png);
    padding-left: 30px;
}



#zone .content .parametters .value{
    position: relative;
    padding: 0px 10px 0px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    line-height: 23px;
}

#zone .content .parametters .fee_exp .value,
#zone .content .parametters .fee_exc .value,
#zone .content .parametters .fee_quanta .value {
    font-size: 22px;
    color: #FF9800;
    text-transform: uppercase;

}

#zone .content .parametters .quanta > .value > .format-quanta {
    font-size: 22px;
    color: var(--hud_quanta_text_color);
    text-transform: uppercase;
    padding-right: 22px;
}


#zone .content .parametters .morale > .value > .format-mor {
    font-size: 22px;
    color: #ffbc00;
    text-transform: uppercase;
    padding-right: 22px;
}


#zone .content .parametters .zpoints > .value > .format-zp {

    font-size: 22px;
    color: var(--hud_zp_text_color);
    text-transform: uppercase;
    padding-right: 22px;

}

#zone .content .parametters .value > .actions {
    position: relative;
}

#zone .content .parametters .value > .actions > button {
    margin: 2px;
}

#zone .content .parametters .value > .actions .subtitle{
    position: relative;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin: 10px auto 10px;
}

#zone .content .parametters .full-row {
    grid-column: 1 / -1;
}

#zone .content .parametters .value > table{
    width: 100%;
}

#zone .content .parametters .value > table td{
    width: 50%;
}

#zone .content .parametters .value > table td.star{
    position: relative;

    height: 27px;
    padding: 0px 8px;
    line-height: 27px;
    background-image: url(ico/sun-16.png);
    padding-left: 23px;
    background-position: 5px center;
    background-size: 13px;
    background-repeat: no-repeat;
    text-align: left;
    font-size: 14px;
}

#zone .content .parametters .value > table td.cs{
    position: relative;

    height: 27px;
    padding: 0px 8px;
    line-height: 27px;
    background-image: url(ico/ico_main_station_32.png);
    padding-left: 23px;
    background-position: 5px center;
    background-size: 13px;
    background-repeat: no-repeat;
    text-align: left;
    font-size: 14px;
}

#zone .content .description {
    color: white;
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    margin: 5px 20px 10px;


}

#zone .content .description_en {
    color: white;
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    margin: 10px 20px 10px;


}

#zone .content .url {
    color: white;
    font-size: 14px;
    text-align: left;
    padding: 5px 15px;
    line-height: 20px;
    margin: 10px 20px 10px;
    background-color: rgba(2558,255,255,0.1);
}
#zone .content .discord_link {
    color: white;
    font-size: 14px;
    text-align: left;
    padding: 5px 15px 5px 30px;
    line-height: 20px;
    margin: 10px 20px 10px;
    background-color: rgba(2558,255,255,0.1);
    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 240'><path d='M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z'/><path d='M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z'/></svg>");*/
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 240' fill='white'><path d='M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z'/><path d='M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z'/></svg>");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center left 5px;
}

#zone .content .titler {
    position: relative;
    padding: 10px 10px 8px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    color: rgba(155,155,155);
    font-size: 12px;
    text-transform: uppercase;
    clear: both;
    border-bottom: 1px solid rgba(155,155,155);
    margin: 0px 10px 15px;
}


#zone .content .info {
    position: relative;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    text-align: center;
}
#zones .content .zone,
#zone .content .zone{
    position: relative;
    height: 80px;
    margin: 0px;
    box-sizing: border-box;
    color: #b9dbff;
    cursor: pointer;
}

#zone .content .zone:before,
#zones .content .zone:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;

    z-index: -1;
}

#zone .content .zone:after,
#zones .content .zone:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}



#zone .content .zone:hover:before,
#zones .content .zone:hover:before{
    box-shadow: 0px 0px 15px #6c7dbd inset;

}


#zone .content .zone {
    margin: 0px 10px 10px;
}
#zones .content .zone .img,
#zone .content .zone .img{
    position: absolute;
    top: 10px;
    left: 10px;
    box-sizing: border-box;
    height: 60px;
    width: 60px;
    overflow: hidden;
    background-size: contain;


}
#zones .content .zone .img.empty,
#zone .content .zone .img.empty{
    background-image: url(ally-no-image.png);
    background-size: cover;



}
#zone .content .zone .relation_type{
    position: absolute;
    top: 20px;
    left: 135px;
    transform: translateX(-50%);
    font-size: 21px;

    color: rgba(200,0,0,0.9);
    text-shadow: rgb(255 0 0) 0px 0px 4px;
    font-family: var(--fontFaimly_header);
}

#zone .content .zone.type2 .relation_type{

    color: rgba(163,210,174,0.9);
    text-shadow: rgb(163 210 174) 0px 0px 4px;

}
#zone .content .zone .relation_cancel{
    position: absolute;
    background-color: white;
    color: black;
    font-size: 10px;
    padding: 2px 7px;
    bottom: 5px;
    left: 75px;
}
#zone .content .zone .relation_time{
    position: absolute;
    top: 45px;
    left: 135px;
    transform: translateX(-50%);
    font-size: 10px;
}


#zones .content .zone .name,
#zone .content .zone .name{

    /* top: 13px; */
    /* left: 200px; */
    box-sizing: border-box;
    line-height: 19px;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: left;
    /* height: 28px; */
    /* overflow: hidden; */
    /* right: 150px; */
    padding-left: 80px;
    padding-right: 62px;
    margin-top: 10px;
    margin-bottom: 5px;
}

#zone .content .relations-from .zone .name,
#zone .content .relations-to .zone .name{
    position: absolute;
    top: 12px;
    left: 200px;
    right: 150px;
    padding: 0px;
    margin: 0px;
}


#zones .content .zone .last_active{
    font-size: 12px;
    text-align: left;
    padding-left: 80px;
}

#zones .content .zone .members{
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
}

#zones .content .zone .members .total{
    display: block;
    position: relative;
    height: 18px;
    background-position: left;
    background-repeat: no-repeat;

    padding-left: 21px;
    color: #b9dbff;
    line-height: 18px;
    font-family: var(--fontFaimly_button);
    background-size: 14px;
}

#zones .content .zone .members .total{
    background-image: url(ico/zone-members-64.png);
}

#zones .content .zone .members .total .subtext {
    filter: invert(100%);
}
#zones .content .zone .description,
#zone .content .zone .description{
    position: absolute;
    top: 35px;
    left: 200px;
    right: 150px;
    bottom: 10px;
    font-size: 12px;
    overflow: hidden;
    padding: 0px 0px;
    background-color: transparent;
    margin: 0px;
    min-height: unset;
    color: unset;
    line-height: 16px;
}


#zone .content .zone .btn{
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 10px;
    z-index: 10;
}

#zone .content .zone .btn div{
    position: relative;
    display: inline-block;
    height: 40px;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 3px 3px;
    line-height: 40px;
}



#zone .content .zone .btn div:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#zone .content .zone .btn div:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zone .content .zone .btn div:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}







#zone .content .relations-buttons .addrelation {
    position: relative;
    display: inline-block;
    height: 40px;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 5px 10px;
    line-height: 40px;
}

#zone .content .relations-buttons .addrelation:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

#zone .content .relations-buttons .addrelation:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zone .content .relations-buttons .addrelation:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}


#zone .content .member{
    display: inline-block;
    position: relative;
    /* float: left; */
    width: 190px;
    height: 185px;
    margin: 7px;
    box-sizing: border-box;
    cursor: pointer;
}


#zone .content .member:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;

    z-index: -1;
}

#zone .content .member:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zone .content .member:hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#zone .content .member .img{
    position: absolute;
    top: 6px;
    left: 10px;
    box-sizing: border-box;
    height: 50px;
    width: 50px;
    overflow: hidden;
    background-size: contain;
    background-color: black;
    filter: grayscale(100%) brightness(130%) contrast(110%);
}
#zone .content .member .img.empty{
    background-image: url(ally-no-image.png);
    background-size: cover;
}

#zone .content .member .allbtn {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 1000;
    opacity: 0.1;
    top: 5px;
}

#zone .content .member:hover .allbtn {

    opacity: 1;
}

#zone .content .member .allbtn.promoteenvoy {
    left: 5px;
    background-image: url(ico/ico_zone_promotemeber.png);

}

#zone .content .member .allbtn.promotemember  {
    left: 5px;
    background-image: url(ico/ico_zone_promotetomeber.png);
}

#zone .content .member .allbtn.resign {
    left: 5px;
    background-image: url(ico/ico_zone_degradedelegate.png);
}

#zone .content .member .allbtn.kick {

    right: 5px;
    left: unset;
    background-image: url(ico/ico_zone_kick.png);
}

#zone .content .member .allbtn.kickban {
    left: 5px;
    background-image: url(ico/ico_zone_kick.png);
}


#zone .content .member .name{
    position: absolute;
    box-sizing: border-box;
    line-height: 15px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    color: white;
    top: 100px;
    left: 5px;
    right: 5px;
    max-height: 35px;
    overflow: hidden;

    font-family: var(--fontFaimly_header);
}

#zone .content .member .name .zmcorp{
    padding-top: 5px;
    display: block;
    line-height: 15px;
    font-size: 12px;
    text-transform: none;
    text-align: center;
    color: silver;

    text-transform: uppercase;
}

#zone .content .member .temp_relations{
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    z-index: 5;

}

#zone .content .member .temp_relations .temp_relation{
    display: inline-block;
    position: relative;
    color: #ffc4c4f7;

    padding: 3px 6px;
    line-height: 15px;
    margin: 4px;
    font-size: 12px;
}

#zone .content .member .temp_relations .temp_relation:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: rgb(164 2 4 / 33%);
    box-shadow: 0px 0px 15px #cf2525 inset !important;
    z-index: -1;
}

#zone .content .member .temp_relations .temp_relation:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zone .content .member .temp_relations .temp_relation span{
    display: block;
    animation: highlited 1000ms linear infinite;
}

#zone .content .member .relation_type{
    position: absolute;
    top: 160px;
    right: 15px;
    left: 15px;
    font-size: 12px;
    padding: 0px;

    text-align: center;
    color: gold;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    box-sizing: border-box;
    z-index: 10;
}

#zone .content .member .relation_time{
    position: absolute;
    top: 143px;
    right: 15px;
    left: 15px;
    font-size: 10px;
    padding: 0px;

    text-align: center;
    color: silver;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    box-sizing: border-box;
    z-index: 10;
}



#zone .content .member .logo{
    display: block;
    position: absolute;
    height: 80px;
    top: 10px;
    z-index: 2;
    left: calc(50% - 40px);
    width: 80px;
    background-repeat: no-repeat;
    background-position: center;
    /* border: 1px solid rgba(255,255,255,0.5); */
    box-sizing: border-box;
    background-size: contain;




}



#zone .img-box {
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    z-index: -1;
    clip-path: var(--clip_menu_standardbox);



}

#zone .img-box:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;


    background-image: linear-gradient(209deg, rgb(24 39 85 / 88%) -20%, rgb(8 4 4 / 98%) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#zone .img-box-small {
    position: absolute;
    top: 54px;
    left: 16px;
    box-sizing: border-box;
    width: 223px;
    height: 200px;
    z-index: -1;



}

#zone .img-box-small .img-small {
    position: absolute;
    top: 5px;
    left: 1px;
    right: 1px;
    bottom: 5px;


    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;


}


#zone .img-box .allbtn{
    position: absolute;
    left: 15px;
    width: 225px;
}

#zone .img-box .allbtn.apply{
    top: 20px;

}
#zone .img-box .allbtn.exit{
    top: 20px;
}
#zone .img-box .allbtn.resign{
    top: 70px;

}
#zone .img-box .allbtn.promoteenvoy{
    top: 120px;
}

#zone .img-box .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;


}

#zone .img-box .img.empty {

    background-size: cover;
    background-image: url(glitchVHS.gif), url(ally-no-image.png), url(vhs_stripes.jpg), radial-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
    background-color: #272727;
    background-blend-mode: overlay;
    filter: grayscale(100%) brightness(130%) contrast(110%);

}

#zone .actions {
    position:absolute;
    top:10px;
    left:10px;
    padding-right: 25px;
}

#zone .allbtn {
    display: inline-block;
    position: relative;
    margin: 5px;
    width: 40px;
    height: 40px;

    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

#zone .allbtn:hover {
    z-index: 10001 !important;
}

#zone .allbtn.exit {
    background-image: url(ico/ico_zone_leave3.png);
}

#zone .allbtn.resign {
    background-image: url(ico/ico_zone_degradedelegate.png);
}

#zone .allbtn.apply {
    background-image: url(ico/os_recruit.png);
}

#zone .menu {
    position:absolute;
    top:250px;
    left:5px;
    width:260px;
    bottom:0px;
}

#zone .menu > span {
    position: relative;
    display: block;
    height: 40px;
    color: #b9dbff;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px 0px 42px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 5px 10px;
    line-height: 40px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 13px center;
}

#zone .menu span.zinfo {
    background-image: url(ico/zone-info-64.png);
}

#zone .menu span.zrelations {
    background-image: url(ico/zone-relations-64.png);
}

#zone .menu span.zmembers {
    background-image: url(ico/zone-members-64.png);
}

#zone .menu span.zedit {
    background-image: url(ico/zone-edit-64.png);
}

#zone .menu span.zedit {
    background-image: url(ico/zone-edit-64.png);
    color: rgb(93 235 230);
}

#zone .menu span.zpoints {
    background-image: url(ico/zp_64.png);
    color: rgb(93 235 230);
}

#zone .menu > span.unactive {
    color: gray;
    cursor: default;
}

#zone .menu > span.unactive:before,
#zone .menu > span.unactive:after{
    filter: grayscale(1);
}

#zone .menu > span:hover {
    z-index: 10;
}
#zone .menu > span.zedit:not(.unactive):before,
#zone .menu > span.zpoints:not(.unactive):before {
    box-shadow: 0px 0px 15px rgb(30 127 109) inset;

}

#zone .menu > span.zstats {
    background-image: url(ico/zone-stats-64.png);
}



#zone .menu > span:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

#zone .menu > span:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}


#zone .menu > span.active {
    color: white;

}

#zone .menu > span.active:before {
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;
}


#zone .menu > span:not(.unactive):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}


#zoneconfirmbox {
    z-index: 999000;
    position:absolute;
    width:600px;
    height:360px;
}

#zoneconfirmbox .text {
    position: absolute;
    text-align: center;
    color: white;
    top: 40%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
    font-size: 16px;

}

#zoneconfirmbox .text p {
    margin: 8px;

}

#zoneconfirmbox .text p.gold {
    color: gold;
    font-size: 18px;
    margin: 15px;

}

#zoneconfirmbox .actions {
    position: absolute;
    text-align: center;

    bottom: 40px;
    left: 20px;
    right: 20px;
    font-size: 16px;

}
#zoneconfirmbox:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(25, 25, 25);
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;

}



#zones{

    position: absolute;
    width: 80%;
    min-width: 950px;
    max-width: 1300px;
    height: 80%;
    min-height: 650px;



}


#zones:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(25,25,25);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(25 48 119 / 94%) 0%, rgb(0, 0, 0, 0.8) 70%), url(mj_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


#zones  #zones_header.header {
    position: absolute;
    top: 45px;
    right: 10px;
    width: calc(100% - 260px);
    /* border-left: 2px solid white; */
    box-sizing: border-box;
    height: 60px;
    padding-left: 20px;
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    color: gold;
    box-sizing: border-box;
    text-align: left;
    /* text-transform: uppercase; */
    line-height: 60px;
    /* background-color: white; */
    font-size: 30px;
    font-family: var(--fontFaimly_header);
    /* text-transform: uppercase; */
    left: auto;
}

#zones  #zones_header.header small {
    display: block;
}

#zones .content {
    position: absolute;
    top: 105px;
    right: 10px;
    width: calc( 100% - 260px );
    overflow-y: scroll;


    box-sizing: border-box;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: max-content;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    height: 638px;
}

#zones .content .zones_pager {
    grid-column: 1 / -1;
    color: #afcff3;
    font-size: 14px;
    margin: 0px 0px 20px;
    padding: 0px 10px;
    text-align: center;

}

#zones .content .zones_pager span {
    min-width: 150px;
    padding: 0px 20px;
    display: inline-block;
    box-sizing: border-box;

}

#zones .content .infotext {
    grid-column: 1 / -1;
    color: gold;
    font-size: 14px;
    margin: 0px 0px 20px;
    padding: 0px 10px;
}

#zones .content .temprelation {
    position: relative;
    height: 80px;
    margin: 0px;
    box-sizing: border-box;
    color: #ffc4c4f7;
    grid-column: 1 / -1;

}

#zones .content .temprelation .icon {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 0px;
    left: 0px;
    background-size: 42px;
    background-repeat: no-repeat;
    background-image: url(ico/ico_temp_war.png);
    background-position: 26px center;
    opacity: 0.5;
}

#zones .content .temprelation:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: rgb(164 2 4 / 33%);
    box-shadow: 0px 0px 15px #cf2525 inset !important;
    z-index: -1;
}


#zones .content .temprelation:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zones .content .temprelation .name {

    box-sizing: border-box;
    line-height: 17px;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: left;

    padding-left: 90px;
    padding-right: 62px;
    margin-top: 11px;
    margin-bottom: 5px;
}

#zones .content .temprelation .relation_start {
    font-size: 12px;
    text-align: left;
    padding-left: 90px;
}

#zones .content .temprelation .relation_end {
    font-size: 12px;
    text-align: left;
    padding-left: 90px;
}

#zones .content .temprelation .actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;

}

#zones .content .temprelation .actions .removerelation {
    position: relative;
    display: inline-block;
    height: 40px;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 3px 3px;
    line-height: 40px;

}

#zones .content .temprelation .actions .removerelation:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

#zones .content .temprelation .actions .removerelation:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zones .content .temprelation .actions .removerelation:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}



#zones .content #al-infobox{
    display: block;
    grid-column: 1 / -1;
}

#zones .content .al-name{
    display: block;
    margin: 10px auto;
    width: calc(100% - 100px);
    text-align: left;
    grid-column: 1 / -1;
}

#zones .content .al-txt{
    display: block;
    margin: 10px auto;
    width: calc(100% - 100px);
    height: 80px;
    text-align: left;
    grid-column: 1 / -1;
}


#zones .content .al-confirm{
    margin: 10px auto;
    display: block;
    grid-column: 1 / -1;
}


#zone .content .img{
    position: absolute;
    top: 10px;
    left: calc(50% - 80px);
    width: 160px;
    height: 160px;
    background-size: cover;
    background-image:url(ally-no-image.png);
}

#zone .content .img .ale-add-image,
#zone .content .img .ale-rem-image {
    position: absolute;


    left: 50%;

    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}



#zone .content .ale-name{
    position: absolute;
    top: 180px;
    left: 50px;
    width: calc(100% - 100px);
    text-align: left;
    text-transform: none;
    font-size: 14px;
}

#zone .content .zone_languages{
    position: absolute;
    top: 314px;
    left: 50px;
    width: 295px;
}
#zone .content .zone_languages select{


    width: 100%;
    min-width: 235px;


    display: inline-block;
}
#zone .content .zone_languages select option{
    color: black;
}


#zone .content .ale-txt_en{
    position: absolute;
    top: 222px;
    left: 50px;
    width: calc(100% - 100px);
    height: 80px;

    text-transform: none;
    font-size: 14px;
}

#zone .content .ale-txt{
    position: absolute;
    top: 354px;
    left: 50px;
    width: calc(100% - 100px);
    height: 80px;

    text-transform: none;
    font-size: 14px;
}
#zone .content .ale-url{
    position: absolute;
    top: 445px;
    left: 50px;
    width: calc(100% - 100px);
    text-align: left;
    font-size: 14px;
    text-transform: none;
}
#zone .content .ale-discord_link{
    position: absolute;
    top: 487px;
    left: 50px;
    width: calc(100% - 100px);
    text-align: left;
    font-size: 14px;
    text-transform: none;
}



#zone .content .ale-confirm{
    position: absolute;
    top: 535px;
    right: 50px;
}

#zone .content .zone-config{
    position: absolute;
    top: 575px;
    left: 50px;
    width: calc(100% - 100px);
    color: white;
    font-size: 14px;
}

#zone .content .zone-config td{
    height: 50px;
    vertical-align: top;
    box-sizing: border-box;

}

#zone .content .zone-config td.textcell{

    text-align: left;
}

#zone .content .zone-config td.swichcell{
    vertical-align: middle;
}

#zone .content .zone-config td.swichcell{
    padding: 3px 15px;
}


#zone .content .zone-config .headertext{
    display: block;
    font-size: 17px;
    text-transform: uppercase;
    padding: 0px 0px 0px 0px;
    font-family: var(--fontFaimly_header);
}

#zone .content .zone-config .ssubtext{
    display: block;
    font-size: 14px;


    color: rgba(255,255,255,0.8);
}





#zones .content .info{
    color: silver;
    text-align: center;
    padding: 26px 0px;
    grid-column: 1 / -1;
    font-size: 14px;
}

#zones .content .info .headinfo{
    font-size: 16px;
    padding: 5px 0px 15px;

}

#zones .content .info.hilighted{
    animation:highlited 1000ms linear infinite;
}


#zone .content .relations-buttons {
    padding: 10px;
    text-align: right;
}

#zones .content .zone .roles{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

#zones .content .zone .roles .role{
    display: inline-block;
    position: relative;
    height: 18px;
    width: 18px;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(100%);
}

#zones .content .zone .roles .role:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#zones .content .zone .roles .role .subtext{
    filter: invert(100%);
}

#zones .content .zone .roles .role.member{
    background-image: url(ico/ico_member-16.png);
}
#zones .content .zone .roles .role.member:before{
    content: '';
}

#zones .content .zone .roles .role.founder{
    background-image: url(ico/ico_founder-16.png);
}
#zones .content .zone .roles .role.founder:before{
    content: '';
}

#zones .content .zone .description{
    position: absolute;
    top: 30px;
    left: 70px;
    right: 70px;
    bottom: 0px;
    font-size: 12px;
    overflow: hidden;
}

#zones .search {
    position: absolute;
    top: 56px;
    left: 15px;
    width: 224px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;
}
#zones .search input {
    z-index: 1000;
    position: absolute;
    width: 197px;
    text-transform: uppercase;
    text-align: left;
}

#zones .menu {
    position:absolute;
    top:142px;
    left:5px;
    width:245px;
    bottom:0px;
}
#zones .menu .header {
    position: relative;
    display: block;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 5px 10px;
    padding: 11px 11px;
}

#zones .menu .header:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#zones .menu .header.zmyour:before{
    box-shadow: 0px 0px 15px rgb(30 127 109) inset !important;
    background-color: rgb(14 49 59) !important;

}

#zones .menu .header.zmyour{
    color: rgb(93 235 230);

}

#zones .menu .header:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#zones .menu .header span {
    display: block;
    font-size: 13px;
    text-transform: none;
    font-family: var(--fontFaimly_default);
}




#zones .menu .header.active {
    color: white;

}

#zones .menu .header.active:before {
    background-color: #092257c4;
    box-shadow: 0px 0px 15px #8ab1d9 inset;
}


#zones .menu .header:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}




#questWindow{
    z-index: 999000;
    position:absolute;
    right: 20px;
    min-width: 760px;
    min-height:600px;



    top: 37px;
    left: 220px;
    bottom: 20px;
    z-index: 999999999;
    clip-path: var(--clip_qquestbox);
    max-width: var(--hud-window-max-width)

}

#questWindow:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_qquestbox);
    z-index: -2;
}

#telo.rightcontext #questWindow {
    right: 350px;
}

#questWindow .banner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;

    clip-path: var(--clip_qquestbox);
}

#questWindow .close {
    right: 17px;
    z-index: 1000;
}

#questWindow .title {
    z-index: 1;
}

#questWindow .banner .bckg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1300px;
    bottom: 0px;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: contain,contain;
    background-position: left top, center top;

    clip-path: var(--clip_qquestbox);
}


#questWindow .banner .bckg .video-background{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#questWindow .banner .bckg .video-background video{
    width: 100%;

    object-fit: cover;
}


#questWindow .banner .bckg .video-background:after{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(364deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0.2) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: contain,contain;
    background-position: left top, center top;
    box-sizing: border-box;

}


#questWindow .banner .progress {
    position: absolute;
    left: 60px;
    right: 60px;
    top: 210px;
    display: none;


}

#questWindow .banner .progress .phases {
    position:absolute;
    left:75px;
    right:75px;
    height:20px;
    bottom: 25px;
    background-color: var(--box-background);
    background: linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 45%,rgba(0,0,0,0.6) 55%,rgba(0,0,0,1) 100%);
}

#questWindow .banner .progress .phases .bar {
    position:absolute;
    left:00px;
    top:0px;
    bottom: 0px;
    background-color: #ffbc00;
}


#questWindow .banner .progress .phases .bar:before {
    content: "";
    border-left: 5px solid #ffbc00;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    right: -15px;
    top: 0px;
}

#questWindow .banner .progress .phases .phase {
    display: block;
    position:absolute;
    width:40px;
    height:40px;
    bottom: 30px;
    background-size: cover;
    background-position: center;
    overflow: visible;
    cursor: pointer;
}



#questWindow .banner .progress .phases .phase:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2c4167;
    border-bottom: 10px solid transparent;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
}

#questWindow .banner .progress .phases .phase.reached:before {
    border-top: 10px solid #957000;

}

#questWindow .banner .progress .phases .phase .backimg {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #2c4167;

}

#questWindow .banner .progress .phases .phase.reached .backimg {
    background-color: #957000;

}

#questWindow .banner .progress .phases .phase .frontimg {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-size: cover;
    background-position: center;

}

#questWindow .banner .progress .phases .phase .content {
    display: none;
    position: absolute;
    bottom: calc(100% - 40px);
    left: -80px;
    width: 200px;
    height: 156px;
    background-color: black;
    z-index: 20;
    overflow: hidden;
}

#questWindow .banner .progress .phases .phase .content .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    /*animation: crt 5000ms linear infinite;*/

}
#questWindow .banner .progress .phases .phase .content .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, #2c4167 0%, rgba(0,0,0,0) 100%),linear-gradient(160deg, rgba(0,0,0,0) 30%, #2c4167 100%);
    background-size: cover;
    background-position: bottom left;
}

#questWindow .banner .progress .phases .phase.reached .content .img:after {
    background-image: linear-gradient(45deg, #ffbc00 -20%, rgba(0,0,0,0) 100%),linear-gradient(160deg, rgba(0,0,0,0) 30%, #ffbc00 120%);
}

#questWindow .banner .progress .phases .phase:hover .backimg,
#questWindow .banner .progress .phases .phase:hover .frontimg{
    opacity: 0;
}


#questWindow .banner .progress .phases .phase:hover:before{

}

#questWindow .banner .progress .phases .phase:hover  .frontimg{
    filter: grayscale(0) brightness(1.5);

}

#questWindow .banner .progress .phases .phase:hover .content {
    display: block;
    animation: blink 100ms linear 2 alternate;
}
#questWindow .banner .progress .phases .phase .content:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.9);
    border-bottom: 10px solid transparent;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
    ;
}

#questWindow .banner .progress .phases .phase .content .name {
    display: block;
    position: absolute;
    top: 20%;
    left: 50%;

    width: 90%;
    font-family: var(--fontFaimly_text);
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    color: #ffbc00;
    transform: translateX(-50%) translateY(-50%);
    text-shadow: var(--shadow_textfull);
}



#questWindow .banner .progress .phases .phase .content .txt {
    display: block;
    position: absolute;
    top: 71%;
    left: 50%;

    width: 90%;
    font-family: var(--fontFaimly_text);
    font-size: 13px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: white;
    line-height: 18px;
    transform: translateX(-50%) translateY(-50%);
    text-shadow: var(--shadow_textfull);
}

#questWindow .banner .progress .phases .phase .content .time {
    display: block;
    position: absolute;
    top: 57px;
    left: 10px;
    right: 10px;
    font-family: var(--fontFaimly_button);
    font-size: 13px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: #b7b7b7;
    line-height: 13px;
    text-shadow: var(--shadow_textfull);
}

#questWindow .banner .stats {
    display: block;
    position: absolute;
    top: 35px;
    right: 35px;
    left: 35px;
}

#questWindow .banner .stats .players {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    text-shadow: var(--shadow_textfull);
    font-size: 22px;
    text-align: center;
    padding: 0px;
    margin: 0px;

    color: #ffbc00;
    line-height: 115px;
    width: 80px;
    height: 80px;
    background-image: url(ico/ico-users.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 55px;
}

#questWindow .banner .stats .obf {

    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    text-shadow: var(--shadow_textfull);
    font-size: 12px;
    text-align: center;
    padding: 0px;
    margin: 0px;

    color: gray;
    line-height: 10px;
}

#questWindow .banner .stats .days {
    display: block;
    position: absolute;
    top: -4px;
    right: 93px;
    text-shadow: var(--shadow_textfull);
    font-size: 22px;
    text-align: center;
    padding: 0px;
    margin: 0px;

    color: #ffbc00;
    line-height: 115px;
    width: 80px;
    height: 80px;
    background-image: url(ico/ico-time.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 55px;
}

#questWindow .banner .stats .star {
    display: block;
    position: absolute;
    top: -4px;
    right: 190px;
    text-shadow: var(--shadow_textfull);
    font-size: 22px;
    text-align: center;
    padding: 0px;
    margin: 0px;

    color: #ffbc00;
    line-height: 115px;
    width: 180px;
    height: 80px;
    z-index: 0;
    white-space: nowrap;

}

#questWindow .banner .stats .star .starimg {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    height: 80px;

    background-position: center top;
    background-repeat: no-repeat;
    background-size: 80px;
    z-index: -1;
}

#questWindow .tutorial {
    position: absolute;
    bottom: 0px;
    left: 5px;
    width: 245px;
    height:135px;
    background-color: var(--box-background);
    background-image: linear-gradient(0deg, var(--border-effect-color) 0%, var(--border-effect-color) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px;
    background-position: bottom left;
    backdrop-filter: var(--box-backdrop-filter);
    text-align: center;
}

#questWindow .tutorial .sutitle {

    position: absolute;
    top: 10px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: #ffbc00;

    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    z-index: 1;
}

#questWindow .tutorial .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#questWindow .tutorial .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#questWindow .tutorial .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/lefttutorialbanner.jpg);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}

#questWindow .tutorial .opentut {
    position: absolute;
    top: 54px;
    left: 50%;
    width: 100px;
    transform: translateX(-50%);

}


#questWindow .tutorial .txt {
    bottom: 16px;
    left: 5px;
    color: rgba(255,255,255,0.8);
    right: 5px;
    position: absolute;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}

#questWindow .tutorial .txt table {
    margin: 0px auto;
}

#questWindow .tutorial .txt input,
#questWindow .tutorial .txt label {
    cursor: pointer;
}

#questWindow .tutorial .txt:hover {

    animation: blink 100ms linear 2 alternate;
}



#questWindow .quests {
    position: absolute;
    top: 160px;
    left: 5px;
    width: 245px;
    bottom: 135px;
    overflow-y: scroll;

}
#questWindow .qbody {
    position: absolute;
    top: 150px;
    right: 0px;
    width: calc( 100% - 250px );
    bottom: 0px;
    box-sizing: border-box;
}
#questWindow .quests .qheader {
    position: relative;
    padding-left: 16px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 8px;
    color: white;
    box-sizing: border-box;

    text-align: left;
    cursor: pointer;

    text-transform: uppercase;


}

#questWindow .quests .qheader:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, rgb(80, 80, 80, 1) 100%);
}

#questWindow .quests .qheader.active:before {

    background-image: linear-gradient(90deg, rgba(255, 188, 0, 0) 0%, rgba(255, 188, 0, 0) 100%);
}

#questWindow .quests .qheader.available {

}

#questWindow .quests .qheader.aactive {
    color: #ffbc00;
}

#questWindow .quests .qheader.closed {
    color: #6d6d6d;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0px;
}

#questWindow .quests .qheader:hover .qbckgr .qbckgrimg {
    filter: brightness(120%) grayscale(10%);
}

#questWindow .quests .qheader.active {
    color: black;
    background-image: linear-gradient(90deg, rgba(255, 188, 0, 0.5) 0%, rgba(255, 188, 0, 1) 100%);
}

#questWindow .quests .qheader.active .cname {
    font-family: var(--fontFaimly_button);
    display: none;
}

#questWindow .quests .qheader.active .ttl {
    font-family: var(--fontFaimly_button);
}


#questWindow .quests .qheader.active .qbckgr .qbckgrimg {
    filter: brightness(100%) grayscale(10%);
}


#questWindow .quests .qheader span.qname {
    text-align: left;
    display: block;
    font-size: 17px;

    font-family: var(--fontFaimly_button);
    line-height: 19px;
    padding: 3px 0px;
}

#questWindow .quests .qheader.closed span.qname {
    font-size: 16px;
    padding: 3px 0px 0px;
}

#questWindow .quests .qheader .qbckgr {
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: -1;
}
#questWindow .quests .qheader .qbckgr .qbckgrimg {
    position: absolute;
    background-size: cover,contain,cover;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    animation: crt 5000ms linear infinite;
    filter: brightness(100%) grayscale(100%);
    background-position: top center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(150,150,200);
}



#questWindow .quests .qheader.active span.qname{
}

#questWindow .quests .qheader span.ttl {
    display: block;
    font-size: 11px;

    text-align: left;
    text-transform: none;
}
#questWindow .quests .qheader.closed span.ttl {
    position: absolute;
    top: 13px;
    right: 10px;
}


#questWindow .quests .qheader span.result {
    display: block;
    font-size: 10px;
    padding: 3px 0px 0px;
    text-align: left;

}

#questWindow .quests .qheader.active span.result{
}

#questWindow .qbody .qquest  {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 10px;
    bottom: 25px;
    overflow-y: scroll;

    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
}

#questWindow .qbody .qquest .qheader {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 25px;
    color: white;
    box-sizing: border-box;
    font-size: 20px;
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 35px;
}

#questWindow .qbody .qquest .qheader .buttons {
    position: absolute;
    right: 10px;
    top: 50px;
}

#questWindow .qbody .qquest .qheader .buttons button {
    margin: 4px;
}

#questWindow .qbody .qquest .qheader button .thint {
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: calc(100% + 3px);
    top: unset;
}

#questWindow .qbody .qquest .qheader button .thint:before  {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-bottom: unset;
    position: absolute;
    top: calc(100%);
    right: calc(50% - 10px);
}

#questWindow .qbody .qbckg {
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    display: none;
}
#questWindow .qbody .qbckg .qbckgimg {
    position: absolute;
    background-size: cover,cover;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    filter: brightness(100%) grayscale(10%);
    background-position: top center;
    background-repeat: no-repeat;
}

#questWindow .qbody .qbckg .qbckgimg:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(43deg, rgb(0 0 0 / 80%) 00%, rgb(0 0 0 / 54%) 100%);
}

#questWindow .qbody .qquest .qheader span.qname {
    display: block;
    text-align: left;
    cursor: default;
    padding: 10px 0px 8px 0px;
    margin: 0px 0px 0px;
}

#questWindow .qbody .qquest .qboxxes:before,
#questWindow .qbody .qquest .qheader span.qname:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, rgb(80, 80, 80, 1) 50%);
}

#questWindow .qbody .qquest .qboxxes:before {
    top: 0px;
    bottom: unset;

}


#questWindow .qbody .qquest .qheader span.qname > .qcenter {
    display: block;
    width: calc(100% - 350px);
    line-height: 39px;
    font-size: 38px;
    text-align: left;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    padding: 0px 10px;
}

#questWindow .qbody .qquest .qheader span.ttl {
    display: block;
    font-size: 9px;
    text-align: left;
    padding-top: 1px;
}
#questWindow .qbody .qquest .qtext {
    display: block;
    position: relative;
    margin: 0px 50px;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-align: justify;
}
#questWindow .qbody .qquest  .qbf {
    padding: 0px 10px;
}

#questWindow .qbody .qquest  .qbf p {
    line-height: 1.5em;
    padding: 0px 5px;
    margin: 15px 0px;
}

#questWindow .qbody .qquest  .qbf p.quote {
    font-size: 22px;
    text-align: center;
    font-style: italic;
    color: #b9dbff;
    padding: 0px 20px 40px;
    margin: 0px;

}

#questWindow .qbody .qquest .qbf p.quote .author {
    display: block;
    font-size: 15px;
    text-align: right;
    color: rgba(255,255,255,1);
    padding: 0px 20px 15px;
}



#questWindow .qbody .qquest .qbf {
    display: flow-root;
}

#questWindow .qbody .qquest .qbf .qbf-descrminiature {
    float: right;
    margin: 0 0 24px 24px;
}

#questWindow .qbody .qquest .qbf .qbf-descrminiature.center {
    float: none;
    margin: 0 24px 24px 24px;
    text-align: center;
}


#questWindow .qbody .qquest .qbf {
    display: flow-root;
}

#questWindow .qbody .qquest .qbf .qbf-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 24px;
    text-align: left;
}

#questWindow .qbody .qquest .qbf .qbf-intro > p {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #c3c6ca;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#questWindow .qbody .qquest .qbf .qbf-intro .qbf-descrminiature {
    display: flex;
    float: none;
    align-items: center;
    gap: 12px;
    flex: 0 1 200px;
    min-width: 0;
    margin: 0;
    text-align: left;
}

#questWindow .qbody .qquest .qbf .qbf-intro .miniature {
    flex: 0 0 64px;
    margin: 0;
}

#questWindow .qbody .qquest .qbf .qbf-item-name {
    min-width: 0;
    color: #a8adb6;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#questWindow .qbody .qquest .qbf .qbf-narrative {
    box-sizing: border-box;
    clear: both;
    display: flow-root;
    margin: 0 0 28px;
    padding: 24px;
    border: 1px solid #393326;

    border-radius: 4px;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%), url(./effects/bckg_glitch.gif);
    color: #e3dfd5;
    text-align: left;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 24px;
    color: #d6ae50;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


#questWindow .qbody .qquest .qbf .qbf-narrative-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

#questWindow .qbody .qquest .qbf .qbf-narrative .qbf-narrator {
    float: none;
    flex: 0 1 128px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

#questWindow .qbody .qquest .qbf .qbf-narrator > .miniature {
    display: block;
    max-width: 100%;
    margin: 0;
    position: relative;


}

#questWindow .qbody .qquest .qbf .qbf-narrator > .miniature:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: block;
    max-width: 100%;
    margin: 0;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 51%, rgb(10 10 19) 100%);


}

#questWindow .qbody .qquest .qbf .qbf-narrator .miniature-image {
    background-size: contain;
    background-position: center bottom;
}

#questWindow .qbody .qquest .qbf .qbf-narrator-meta {
    min-width: 0;
    text-align: left;
}

#questWindow .qbody .qquest .qbf .qbf-narrator-name {
    margin-top: 12px;
    color: #e9d8ab;
    font-size: 15px;
    line-height: 1.5;
}

#questWindow .qbody .qquest .qbf .qbf-narrator-location {
    margin-top: 3px;
    color: #a1a4aa;
    font-size: 12px;
    line-height: 1.5;
    text-transform: uppercase;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-text {
    display: block;
    flex: 1 1 280px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    font-style: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-text > p {
    margin: 0 0 17px;
    padding: 0;
    line-height: 1.75;
    font-style: normal;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-text > p:last-child {
    margin-bottom: 0;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-text > p:first-child::before {
    content: '„';
    color: #d6ae50;
}

#questWindow .qbody .qquest .qbf .qbf-narrative-text > p:last-child::after {
    content: '“';
    color: #d6ae50;
}






#questWindow .qbody .qquest .wikilink {

    padding: 0px 0px;
    cursor: pointer;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: underline;
}




#questWindow .qbody .qquest .wikilink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: transparent;
    filter: invert(1);
    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#questWindow .qbody .qquest .wikilink.external {
    padding: 0px 17px 0px 0px;
}

#questWindow .qbody .qquest .wikilink.external:before {
    background-image: url(ico/external-link-2-16.png);
    background-size: 9px;
    background-position: right 5px top 2px;
    background-repeat: no-repeat;
}


#questWindow .qbody .qquest .wikilink:hover {
    animation: blink 100ms linear 2;
    color: white;
}

#questWindow .qbody .qquest .qobj {
    position: relative;
    padding: 20px 20px 30px 130px;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-align: justify;
    clear: both;
}
#questWindow .qbody .qquest .qobjit {


    padding: 0px 0px 14px 0px;
    position: relative;
    line-height: 20px;
}

#questWindow .qbody .qquest .whitelink {

    /* padding: 0px 4px 0px 4px; */

    text-transform: uppercase;
    /* background-color: rgba(255, 255, 255, 1); */
    cursor: pointer;
    white-space: nowrap;
    /* font-family: var(--fontFaimly_button); */
    font-size: 13px;
    text-decoration: underline;
    letter-spacing: 0.5px;
}

#questWindow .qbody .qquest .whitelink:hover {
    animation: blink 100ms linear 2;
}

#questWindow .qbody .qquest .qobjit:before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    left: -23px;
    bottom: 56%;
}
#questWindow .qbody .qquest .qobjit.new {
}
#questWindow .qbody .qquest .qobjit.complete {
}
#questWindow .qbody .qquest .qobjit .qlocation,
#questWindow .qbody .qquest .qobjit .qitem {
    display: inline-block;
    position: relative;
    color: black;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
    padding: 3px 5px;
    font-size: 20px;
    font-family: var(--fontFaimly_header);

}




#questWindow .qbody .qquest  .qobjit .qlocation::first-letter,
#questWindow .qbody .qquest  .qobjit .qitem::first-letter {
    color: rgb(4,193,193);
}

#questWindow .qbody .qquest  .qobjit .qlocation:hover,
#questWindow .qbody .qquest  .qobjit .qitem:hover {
    color: black;
    background-color: #ffbc00;
    animation: blink 100ms linear 2;
}

#questWindow .qbody .qquest  .qgrt,
#questWindow .qbody .qquest  .qpen,
#questWindow .qbody .qquest  .qrwd {
    margin-top: 30px;
}

#questWindow .qbody .qquest  .qgrt .exc,
#questWindow .qbody .qquest  .qpen .exc,
#questWindow .qbody .qquest  .qrwd .exc {
    position: relative;
    font-size: 20px;
    color: white;
    line-height: 20px;
    height: 20px;
    display: inline-block;
    box-sizing: border-box;
    margin: 0px 10px 0px;
    text-align: center;
}

#questWindow .qbody .qquest  .qgrt .mor,
#questWindow .qbody .qquest  .qpen .mor,
#questWindow .qbody .qquest  .qrwd .mor {
    position: relative;
    font-size: 20px;
    color: white;
    line-height: 20px;
    height: 20px;
    display: inline-block;
    box-sizing: border-box;
    margin: 0px 10px 0px;
    text-align: center;
}

#questWindow .qbody .qquest  .ptitle {
    color: #afc2ed;
    text-align: center;
    font-size: 18px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    text-decoration: none;
}

#questWindow .qbody .qquest .qboxxes {
    display: grid;
    position: relative;
    text-align: center;
    padding-top: 7px;
    margin: 5px 10px;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

#questWindow .qbody .qquest .qboxx {
    display: block;
    position: relative;
    margin: 0px;
    padding-bottom: 20px;
    box-sizing: border-box;
    padding-top: 20px;
}

#questWindow .qbody .qquest .qboxx .buttons {
    display: block;
    text-align: center;
    margin: 10px 0px 0px;
}

#questWindow .qbody .qquest .qboxx .buttons .thint  {
    top: 2px;
    animation: highlited 1000ms linear infinite;
}

#questWindow .qbody .qquest {
    padding: 0px 5px 0px 5px;
    box-sizing: border-box;
}
#questWindow .qbody .qquest .item {
    background-size: 31px;
    margin: 0px 0px 5px 0px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 40px;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid rgba(0,150,150,0.5);
}
#questWindow .qbody .qquest .qtxt {
    position: relative;
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: center left;
    box-sizing: border-box;
    color: white;
    font-size: 13px;
    text-align: center;
    padding-top: 20px;
}
#questWindow .qbody .qquest .qtxt .module,
#questWindow .qbody .qquest .qtxt .weapon,
#questWindow .qbody .qquest .qtxt .crew,
#questWindow .qbody .qquest .qtxt .blueprint,
#questWindow .qbody .qquest .qtxt .item,
#questWindow .qbody .qquest .qtxt .rig{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    margin: 5px 20px 45px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


#questWindow .qbody .qquest .qcards {
    position: relative;
    box-sizing: border-box;
    text-align: center;
}

#questWindow .qbody .qquest .qcards .qcards-list {
    margin-top: 15px;
}

#questWindow .qbody .qquest .qcards canvas,
#questWindow .qbody .qquest .qcards img {
    height: 120px;
    margin: 3px 6px;
    cursor: pointer;
}
#questWindow .qbody .qquest .qcards canvas:hover,
#questWindow .qbody .qquest .qcards img:hover {
    animation:blink 100ms linear 2 alternate;
}





#questWindow .qbody .qquest .qtxt .module:before,
#questWindow .qbody .qquest .qtxt .weapon:before,
#questWindow .qbody .qquest .qtxt .crew:before,
#questWindow .qbody .qquest .qtxt .blueprint:before,
#questWindow .qbody .qquest .qtxt .item:before,
#questWindow .qbody .qquest .qtxt .rig:before{
    content: '';
    display: block;
    position: absolute;
    left: -3px;
    right: -3px;
    top: -3px;
    bottom: -3px;
    background-image:
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),

        linear-gradient(0deg, var(--hud_popiseck_gray_color) 0%, var(--hud_popiseck_gray_color) 100%),
        linear-gradient(180deg, rgb(20 101 78 / 53%) 25%, rgb(0 0 0 / 71%) 100%);
    background-repeat: no-repeat;
    background-size:
        calc(100% - 4px) 1px,
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),

        calc(100% - 4px) 1px,
        calc(100% - 4px) calc(100% - 4px);
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,

        bottom 1px center,
        center;
    z-index: -1;
}


#questWindow .qbody .qquest .qtxt .module .name,
#questWindow .qbody .qquest .qtxt .weapon .name,
#questWindow .qbody .qquest .qtxt .crew .name,
#questWindow .qbody .qquest .qtxt .blueprint .name,
#questWindow .qbody .qquest .qtxt .item .name,
#questWindow .qbody .qquest .qtxt .rig .name{
    display: block;
    position: absolute;
    top: 75px;
    left: -15px;
    right: -15px;
    color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    line-height: 16px;

}

#questWindow .qbody .qquest .qtxt .module .qty,
#questWindow .qbody .qquest .qtxt .weapon .qty,
#questWindow .qbody .qquest .qtxt .crew .qty,
#questWindow .qbody .qquest .qtxt .blueprint .qty,
#questWindow .qbody .qquest .qtxt .item .qty,
#questWindow .qbody .qquest .qtxt .rig .qty
{
    display: block;
    position: absolute;
    bottom: -7px;
    left: calc(50% - 9px);
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: black;
    background-color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button)
}

#questWindow .qbody .qquest .qtxt .module .type,
#questWindow .qbody .qquest .qtxt .weapon .type,
#questWindow .qbody .qquest .qtxt .crew .type,
#questWindow .qbody .qquest .qtxt .blueprint .type,
#questWindow .qbody .qquest .qtxt .item .type,
#questWindow .qbody .qquest .qtxt .rig .type
{
    display: none;
}


#questWindow .qbody .qquest .items .item .name {
    color: gold;
    font-size: 14px;
    text-decoration: underline;
}
#questWindow .qbody .qquest .items .item .type {
    color: silver;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
#questWindow .qbody .qquest .items .item .qty {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100px;
    font-size: 12px;
    line-height: 40px;
    text-align: right;
    text-decoration: none;
}
#questWindow .qbody .qquest .title {
    position: relative;
    height: 23px;

    top: 0px;
    left: 0px;

    box-sizing: border-box;
    line-height: 21px;
    text-transform: uppercase;
    font-size: 12px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
    z-index: initial;
    clear: both;
    cursor: default;
    display: inline-block;
    padding: 2px 10px;
    font-family: var(--fontFaimly_button);

}
#questWindow .quests #quests_active,
#questWindow .quests #quests_available,
#questWindow .quests #quests_closed,
#questWindow .quests #quests_lost{
    position: relative;
    margin-top: 0px;
}



#questWindow .quests .quests_active_head,
#questWindow .quests .quests_available_head,
#questWindow .quests .quests_closed_head,
#questWindow .quests .quests_lost_head{
    position: relative;
    margin-top: 1px;
    text-align: center;
    color: rgb(255 255 255 / 68%);
    line-height: 35px;
    text-transform: uppercase;

}

#questWindow .quests .quests_active_head:before,
#questWindow .quests .quests_available_head:before,
#questWindow .quests .quests_closed_head:before,
#questWindow .quests .quests_lost_head:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, rgb(80, 80, 80, 1) 100%);
}

#questWindow .quests .info {
    color: rgba(255,255,255,0.3);
    text-align: center;
    text-transform: uppercase;
    padding: 15px 20px;
}
#questWindow .qbody .qquest .qheader .status {
    clear: both;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}
#questWindow .qbody .qquest .qheader .status .state {
    cursor: default;
    float: left;
    padding: 3px 8px;
    border: 1px solid rgba(145, 190, 220, 0.3);
    border-radius: 3px;
    background: #372b09;
    color: #aacce3;
    font-size: 12px;
    color: #ffbc00;
    border: 1px solid #8d6b0c;
    animation: highlited 1000ms linear infinite;
}
#questWindow .qbody .qquest .qheader .status .replayed {
    cursor: default;

    background-color: black;
    margin: 0px 0px 8px;
    display: inline-block;
    clip-path: var(--clip_whitelink);
    padding: 3px 8px;
    line-height: 9px;
    font-size: 11px;
    color: #ffbc00;
}
#questWindow .qbody .qquest .qheader .status .ttmb {
    font-size: 24px;
    display: inline-block;
    font-family: var(--fontFaimly_header);

}
#questWindow .qbody .qquest .qheader .status .ttlb {
    font-size: 14px;
    display: block;
    clear: both;
    color: silver;
    text-transform: none;


}
#questWindow .qbody .qquest .q_buttons {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 0px;
}
#questWindow .qbody .qquest .q_buttons button {
    margin: 5px 5px 5px 0px;
}
#questWindow .qbody .info {
    text-align: center;
    color: rgba(200, 200, 200, 1);
    margin-top: 135px;
    font-size: 16px;

}
#quest_object_box {
    position: absolute;
    top: 50px;
    left: 50px;
    right: 450px;
    min-width: 350px;
    max-width: 640px;
    height: 400px;
    background: linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,50,75,0.6) 10%,rgba(0,50,75,1) 60%,rgba(0,50,75,0.8) 90%,rgba(0,0,0,0.1) 100%);
    z-index: 99999999;
}
#quest_object_box .close {
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 11px;
    right: 11px;
    opacity: 0.5;
    z-index: 999999999;
}
#quest_object_box {
    position: relative;
    width: 100%;
    height: 100%;
}
#quest_object_box .title {
    font-size: 13px
}
#quest_object_box .image {
    position: absolute;
    right: 5px;
    height: 196px;
    top: 42px;
    left: 5px;
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#quest_object_box .attributes {
    position: absolute;
    top: 244px;
    right: 5px;
    left: 5px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background: linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
}
#quest_object_box .attributes table {
    padding: 0px;
    margin: 3px 3px;
    width: calc(100% - 6px);
}
#quest_object_box .attributes th {
    color: rgb(0,255,255);
    padding: 0px 10px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: right;
    width: 50%;
}
#quest_object_box .attributes td {
    font-size: 13px;
    color: rgba(0,255,255,0.5);
    padding-left: 10px;
    background-color: rgba(0,255,255,0.2);
}
#quest_object_box .actions {
    position: absolute;
    top: 193px;
    height: 40px;
    right: 5px;
    left: 5px;
    text-align: left;
}
#questWindow .qbody .title {
    font-size: 13px
}
#questWindow .qbody .gheader {
    position: relative;
    height: 28px;
    width: 100%;
    color: rgba(255,255,255,0.8);
    box-sizing: border-box;
    background: linear-gradient(to right,rgba(103,323,237,0.0) 0%,rgba(103,323,237,0.4) 50%,rgba(103,323,237,0.0) 100%);
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: none;
    text-transform: none;
    font-size: 18px;
    text-shadow: none;
    text-align: center;
    margin-top: 10px;
}
#questWindow .qbody .actions {
    margin: 20px 40px;
    text-align: center;
}

#questWindow .qbody .quest_map {
    position: absolute;
    top: 0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color: black;
}


#splashbox{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    z-index: 999999999;
    background-color: #1e272e;
}

#splashbox .splashbox{

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    z-index: 999999999;

}

#splashbox .splashbox .bckgr{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    z-index: -1;
    background-size: cover,cover;
    background-image: linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.6) 100%),url(splashbox/0.jpg);
    background-position: center,center;
    background-repeat: no-repeat;
    animation: zoom 50000ms linear infinite;

}



#splashbox .splashbox .gametip{
    position: absolute;
    bottom: 23%;
    width: 600px;
    left: 50%;
    max-width: 80%;
    transform: translateX(-50%);
}

#splashbox .splashbox .gametip .html{
    color: #c99808;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    /*animation: shadowing 5000ms linear infinite; nedavat animace protoze okno se reloaduje stale dokola*/
    text-shadow: var(--shadow_textfull);
}

#splashbox .splashbox .controls{
    position: absolute;
    bottom: calc(23% - 38px);
    width: 2px;
    left: calc(50% - 1px);
}

#splashbox .splashbox .controls .sbtnsplashboxpause,
#splashbox .splashbox .controls .sbtnsplashboxplay {
    display: block;
    position: absolute;


    top: 0px;
    left: calc(50%);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
    cursor: pointer;
    transition: filter 0.8s;
    transform: translateX(-50%);

}

#splashbox .splashbox .controls .sbtnsplashboxpause:hover,
#splashbox .splashbox .controls .sbtnsplashboxplay:hover {

    filter: blur(0px) opacity(60%);
    animation: highlited 2500ms linear alternate;
}

#splashbox .splashbox .controls .sbtnsplashboxpause:hover .ctrl-key,
#splashbox .splashbox .controls .sbtnsplashboxplay:hover  .ctrl-key{
    animation: none;
}

#splashbox .splashbox .controls .sbtnsplashboxpause.hidden,
#splashbox .splashbox .controls .sbtnsplashboxplay.hidden {
    display: none;
}

#splashbox .splashbox .controls .sbtnsplashboxpause .ctrl-key{

    animation: highlited 2500ms linear infinite;
}

#splashbox .splashbox .controls .sbtnsplashboxplay .ctrl-key{

    animation: highlited 2500ms linear infinite;
}


#splashbox .splashbox .version{
    position: absolute;
    bottom: 50px;
    width: 600px;
    left: calc(50% - 300px);

    font-size: 12px;
    color: #ffffff52;
    text-align: center;
}

#splashbox .logo{
    position: absolute;
    top: 4.5%;
    width: 600px;
    height: 150px;
    left: calc(50% - 300px);
    /* animation: crt 5000ms linear infinite; */
    z-index: 9999999999;
    background-size: 216px;
    background-image: var(--logofile);
    background-position: center;
    background-repeat: no-repeat;
    /*filter: drop-shadow(0px 0px 5px var(--logo_shadow_color1)) drop-shadow(0px 0px 15px var(--logo_shadow_color2));*/
}


#wait_box{
    position: absolute;
    top: calc(36% - 50px);
    left: calc(50% - 220px);
    width: 440px;
    height: 144px;
    cursor: wait;
    z-index: 9999999999;
    animation: windowshow 50ms linear 2 alternate;

}

#telo.splashbox-opened #wait_box {
    display: none;
}

#wait_box:before {
    content: '';
    position: absolute;
    left: -220px;
    right: -220px;
    top: -220px;
    bottom: -210px;
    background-size: contain;
    background-image: radial-gradient(rgba(0, 0, 0, 0.45) 0%,rgba(0, 0, 0, 0.45) 20%, rgba(0, 0, 0, 0) 70%);
    background-position: center;
    background-repeat: no-repeat;
}



#wait_box .inner{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#wait_box.blockScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: wait;
    z-index: 9999999999;
    background-color: rgba(0, 0, 0, 0.45);

}

#wait_box.blockScreen .inner {
    position: relative;
    width: 440px;
    height: 144px;
}
#wait_box.blockScreen:before,
#wait_box.blockScreen:after {
    content: '';
    position: absolute;
    width: 100vmax;
    height: 100vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /*background: radial-gradient(circle, rgba(106,125,199,0.1) 10%, rgba(106,125,199,0) 70%);
    animation: rippleAnim 4s infinite;*/
    opacity: 0;
    z-index: 0; /* pod obsahem rodiče */
}

#wait_box.blockScreen:after {
    animation-delay: 2s;
}

#wait_box.blockScreen > * {
    position: relative;
    z-index: 1; /* obsah rodiče nad vlnami */
}

@keyframes rippleAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }

}

#wait_box .msg{
    position: absolute;
    top: 12px;
    left: 30px;
    right: 30px;
    color: silver;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}
#wait_box .msg2{
    position: absolute;
    top: 30px;
    left: 5px;
    right: 5px;
    color: white;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

#wait_box .msg3{
    position: absolute;
    top: 53px;
    left: 5px;
    right: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

#wait_box .bar{
    position: absolute;
    top: 58px;
    left: 10px;
    height: 7px;
    right: 10px;
    line-height: 45px;
    color: silver;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    border-left: 2px solid rgb(180,180,180);
    border-right: 2px solid rgb(180,180,180);
    background-color: rgb(40,40,40);
    text-shadow: var(--shadow_textfull);
}
#wait_box .bar .perc{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgb(250,250,250);
}
#wait_box .info {
    position: absolute;
    display: none;
    top: 93px;
    left: 0px;
    right: 0px;
    color: black;
    font-size: 8px;
    text-transform: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    text-shadow: var(--shadow_textfull);
    line-height: unset;
}
#wait_box .info .ver{
    display: block;
    position: absolute;
    right: 15px;
    left: 15px;
    top: 0px;
    text-align: center;
    letter-spacing: 0px;
    color: silver;
    font-size: 8px;
}
#wait_box .info .copy{
    display: block;
    position: absolute;
    left: 35px;
    bottom: 11px;
    text-align: left;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: 8px;
    color: black;
}


#wait_dockbox{
    animation:blink 100ms linear 2 alternate;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 200px);
    width: 400px;
    height: 100px;
    cursor: wait;
    z-index: 9999999999999999;

}

#wait_dockbox:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 4px;
    background-color: rgba(255,255,255,1);

    clip-path: var(--clip_dock_waitbox);
}
#wait_dockbox .inner{
    position: absolute;
    top: 15px;
    height: 70px;
    width: 350px;
    left: 25px;
}
#wait_dockbox .msg{
    position: absolute;
    top: 0px;
    left: 5px;
    height: 35px;
    right: 5px;
    line-height: 12px;
    color: black;
    font-family:var(--fontFaimly_header);
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
}
#wait_dockbox .msg2{
    position: absolute;
    top: 23px;
    left: 5px;
    right: 5px;
    color: black;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
}
#wait_dockbox .bar{
    position: absolute;
    top: 40px;
    left: 0px;
    height: 8px;
    right: 0px;
    line-height: 40px;
    color: black;
    font-size: 12px;
    text-align: center;
}
#wait_dockbox .bar .perc{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(0,0,0,1);
}
#wait_dockbox .info {
    position: absolute;
    top: 70px;
    left: 5px;
    right: 5px;
    color: black;
    font-size: 8px;
    text-transform: uppercase;
    opacity: .6;
    text-shadow: none;
}
#wait_dockbox .info .ver{
    display: block;
    position: absolute;
    right: -20px;
    width: 50%;
    text-align: right;
}
#wait_dockbox .info .copy{
    display: block;
    position: absolute;
    left: -20px;
    width: 50%;
    text-align: left;
}



#wait_overtakebox {
    animation: blink 100ms linear 2 alternate;
    position: absolute;
    top: calc(50% - 210px);
    left: calc(50% - 200px);
    width: 520px;
    height: 360px;

    background-color: rgba(0,0,0,0.85);
    overflow: hidden;
    cursor: pointer;
    clip-path: var(--clip_overtake_cs);
}
#wait_overtakebox .inner {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
#wait_overtakebox .name {
    position: absolute;
    top: 35px;
    width: 450px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-family: var(--fontFaimly_header);
    color: rgba(255,255,255,1);

    text-align: center;
    text-transform: uppercase;
    z-index: 1;

}
#wait_overtakebox .image {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover,cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
    background-image: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0.3) 100%),url('overtaking.jpg');
}

#wait_overtakebox .bar{
    position: absolute;
    top: 160px;
    left: 50px;
    height: 8px;
    right: 50px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: gray;
}
#wait_overtakebox .bar .perc{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(255,255,255,1);
}

#wait_overtakebox .timer {
    position: absolute;
    top: 172px;
    width: 350px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;

    color: rgba(255,255,255,1);

    text-align: center;

    line-height: 16px;
    text-shadow: var(--shadow_textfull);

}

#wait_overtakebox .description {
    position: absolute;
    top: 105px;
    width: 450px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;

    color: rgba(255,255,255,1);

    text-align: center;

    line-height: 22px;

}

#wait_overtakebox .subdescription {
    position: absolute;
    top: 207px;
    width: 450px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    line-height: 20px;
    color: var(--hud_invalid_text);

    text-align: center;



}


#wait_overtakebox .cancel {
    position: absolute;
    bottom: 45px;
    width: 120px;

    left: 50%;
    transform: translateX(-50%);


}





#planetcolonymodule {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 310px;
    max-width: 700px;
    height: 650px;
    background: linear-gradient(to bottom,rgba(0,0,0,0.1) 0%, rgba(0,50,75,0.4) 10%, rgba(0,50,75,0.7) 60%, rgba(0,50,75,0.4) 90%, rgba(0,0,0,0.1) 100%);
    z-index: 99999999;
}
#planetcolonymodule .title{
    position:absolute;
    height:37px;
    width:100%;
    top:0px;
    left:0px;
    color:white;
    padding-left:10px;
    box-sizing:border-box;
    background:linear-gradient(to right,rgba(103,255,237,0.35) 0%,rgba(0,50,75,0.4) 60%,rgba(0,0,0,0) 100%);
    line-height:37px;
    text-transform:uppercase;
    text-decoration:none;
    text-transform:uppercase;
    font-size:24px;
    font-weight:bold;
    text-shadow:0px 0px 10px rgb(0,255,255);
}
#planetcolonymodule .image{
    position:absolute;
    width:340px;
    height:340px;
    top:42px;
    left:0px;
    background-color:black;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}
#planetcolonymodule .heltahbar{
    position: absolute;
    top: 387px;
    left: 0px;
    width: 340px;
    height: 20px;
    background-color: rgb(33,39,43)
}
#planetcolonymodule .heltahbar .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(100,255,255,0.7);
    box-shadow: 0px 0px 3px rgb(137,245,255);
    height: 100%;
}
#planetcolonymodule .heltahbar span{
    position: absolute;
    top: 0px;
    left: 0px;
    color: white;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}
#planetcolonymodule .description{
    position:absolute;
    top:55px;
    right:311px;
    left:350px;
    padding:0px;
    vertical-align:top;
}
#planetcolonymodule .description p{
    padding:10px;
    margin:0px;
    color:white;
    font-size:14px;
    font-weight:normal;
}
#planetcolonymodule .parms{
    position:absolute;
    top:413px;
    left:0px;
    color:white;
    text-align:left;
    border-spacing:0px;
    width:340px;
    background-color:rgba(33,39,43,0.7);
}
#planetcolonymodule .attributes{
    position:absolute;
    top:42px;
    right:0px;
    left:345px;
    color:white;
    text-align:left;
    border-spacing:0px;
    background:linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
    height:304px;
}
#planetcolonymodule .attributes .info{
    width:16px;
    height:16px;
    text-align:center;
    position:absolute;
    top:8px;
    right:2px;
    cursor:pointer;
    z-index:10000
}
#planetcolonymodule .attributes table{
    padding: 0px;
    margin: 30px 5% 0px 5%;
    width: 90%;
}
#planetcolonymodule .attributes th{
    color:rgb(0,255,255);
    padding:0px 10px;
    text-transform:uppercase;
    font-size:13px;
    font-weight:normal;
    text-align:right;
    width:50%;
}
#planetcolonymodule .attributes td{
    font-size:13px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    background-color:rgba(0,255,255,0.2);
}
#planetcolonymodule .attributes .attributes_params{
    display:block;
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
}
#planetcolonymodule .attributes .attributes_description{
    display:none;
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
}
#planetcolonymodule .attributes .attributes_description p{
    padding:5px 15px;
    font-size:12px;
    font-weight:normal;
}
#planetcolonymodule .stations{
    position:absolute;
    top:408px;
    left:0px;
    color:white;
    text-align:left;
    border-spacing:0px;
    width:340px;
    background:linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
}
#planetcolonymodule .stations th{
    color:white;
    font-size:14px;
    font-weight:normal;
    text-align:right;
    padding:5px 20px;
}
#planetcolonymodule .stations td{
    font-size: 28px;
    color: rgb(103,232,237);
    text-shadow: 0px 0px 10px rgb(103,232,237);
    padding: 5px 5px;
    text-align: center;
}
#planetcolonymodule .actions{
    position:absolute;
    bottom:20px;
    right:20px;
    left:20px;
    text-align:right;
}



#fight_config {
    position: absolute;
    width: 825px;
    height: 630px;
    background-color: var(--hud_backgroundcolor);
}

#fight_config:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#fight_config:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#fight_config .switch {
    position: absolute;
    top: 45px;
    right: 10px;
    left: 10px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;
    width: auto;

}


#fight_config .switch .switcher {
    position: relative;
    display: inline-block;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);

}

#fight_config .switch .switcher:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#fight_config .switch .switcher.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#fight_config .switch .switcher.active{

    color: var(--hud_bookmarkcolor);

    animation:highlited 1000ms linear infinite;
}




#fight_config .inside{
    position: absolute;
    top: 90px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    text-align: left;
    border-spacing: 0px;

}

#fight_config .inside .info {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 50px 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
#fight_config .inside .image {
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    left: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    filter: grayscale(100%);
}

#fight_config .inside .name {
    position: absolute;
    display: block;
    width: 300px;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    height: 40px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 40px;
    overflow: hidden;
    left: 0px;
    text-align: right;
}

#fight_config .inside .sr,
#fight_config .inside .mr,
#fight_config .inside .lr {
    display: block;
    width: 100px;
    height: 35px;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    line-height: 30px;
    font-size: 12px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid white;
    top: 0px;
}

#fight_config .inside .sr {
    left: 345px;
}

#fight_config .inside .mr {
    left: 495px;
}

#fight_config .inside .lr {
    left: 640px;
}

#fight_config .inside .sr.unactive,
#fight_config .inside .mr.unactive,
#fight_config .inside .lr.unactive {
    border: 2px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
}

#fight_config .inside .sr.active:before,
#fight_config .inside .mr.active:before,
#fight_config .inside .lr.active:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 20px;
    bottom: 0px;
    left: calc( 50% - 10px );
    box-shadow: inset 0px 0px 25px rgba(255,255,255,1), 0px 0px 25px rgba(255,255,255,1);
    background: rgba(255,255,255,1);


    animation:highlited 1000ms linear infinite;


}

#fight_config .inside .sr.unactive:before,
#fight_config .inside .mr.unactive:before,
#fight_config .inside .lr.unactive:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 20px;
    bottom: 0px;
    left: calc( 50% - 10px );
    background-color: rgba(255,255,255,0.3);
    transition: linear 0.3s;

}
#fight_config .inside .sr.unactive:hover,
#fight_config .inside .mr.unactive:hover,
#fight_config .inside .lr.unactive:hover {
    border: 2px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}
#fight_config .inside .wrow {
    position: relative;
    height: 40px;
    margin-bottom: 5px;
    margin: 0px 15px 5px 15px;
}
#fight_config .inside .header_line {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 65px;
    color: white;
    text-align: center;
    padding: 0px !important;
    box-sizing: border-box;
    font-size: 13px;
    float: none;
    line-height: 30px;
    text-transform: uppercase;
}

#fight_config .inside .header_line .sname {
    display: block;
    position: absolute;
    top: 0px;
    left: 10px;
    width: 315px;
}


#fight_config .inside .header_line .range_sr {
    display: block;
    position: absolute;
    top: 0px;
    left: 350px;
    width: 120px;
}


#fight_config .inside .header_line .range_mr {
    display: block;
    position: absolute;
    top: 0px;
    left: 500px;
    width: 120px;
}
#fight_config .inside .header_line .range_lr {
    display: block;
    position: absolute;
    top: 0px;
    left: 645px;
    width: 120px;
}
#fight_config .inside .header_line .sname:before,
#fight_config .inside .header_line .range_sr:before,
#fight_config .inside .header_line .range_mr:before,
#fight_config .inside .header_line .range_lr:before {
    content: '';
    display: block;
    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


#fight_config .inside .engage_enemy_fight_radius,
#fight_config .inside .escape_distance,
#fight_config .inside .escape_dmg_prc,
#fight_config .inside .escape_rule,
#fight_config .inside .escape_warp
{
    display: block;
    /* padding: 0px 50px; */
    text-align: center;
    width: 46%;
    box-sizing: border-box;
}


#fight_config .inside .engage_enemy_fight_radius
{
    display: block;
    position: absolute;
    left: 20px;
    top: 0px;
}


#fight_config .inside .escape_distance
{
    display: block;
    position: absolute;
    right: 20px;
    top: 0px;
}


#fight_config .inside .escape_dmg_prc
{
    display: block;
    position: absolute;
    right: 20px;
    top: 170px;
}


#fight_config .inside .escape_rule
{
    display: block;
    position: absolute;
    right: 20px;
    top: 297px;
}


#fight_config .inside .escape_warp
{
    display: block;
    position: absolute;
    left: 20px;
    top: 240px;
}

#fight_config .inside .engage_enemy_fight_radius .value,
#fight_config .inside .escape_distance .value,
#fight_config .inside .escape_dmg_prc .value,
#fight_config .inside .escape_rule .value,
#fight_config .inside .escape_warp .value {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid white;
    position: relative;
    /* float: left; */
    margin: 7px 5px;
}

#fight_config .inside .engage_enemy_fight_radius .value:before,
#fight_config .inside .escape_distance .value:before,
#fight_config .inside .escape_dmg_prc .value:before,
#fight_config .inside .escape_rule .value:before,
#fight_config .inside .escape_warp .value:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 20px;
    bottom: 0px;
    left: calc( 50% - 10px );
    background-color: rgba(255,255,255,0.2);
}

#fight_config .inside .engage_enemy_fight_radius .value span,
#fight_config .inside .escape_distance .value span,
#fight_config .inside .escape_dmg_prc .value span,
#fight_config .inside .escape_rule .value span,
#fight_config .inside .escape_warp .value span {
    display: block;
    font-size: 12px;
    padding: 5px 10px;
    text-transform: none
}

#fight_config .inside .engage_enemy_fight_radius .value:not(.active):hover:before,
#fight_config .inside .escape_distance .value:not(.active):hover:before,
#fight_config .inside .escape_dmg_prc .value:not(.active):hover:before,
#fight_config .inside .escape_rule .value:not(.active):hover:before,
#fight_config .inside .escape_warp .value:not(.active):hover:before {
    background-color: rgba(255,255,255,0.3);
}

#fight_config .inside .engage_enemy_fight_radius .value:not(.active),
#fight_config .inside .escape_distance .value:not(.active),
#fight_config .inside .escape_dmg_prc .value:not(.active),
#fight_config .inside .escape_rule .value:not(.active),
#fight_config .inside .escape_warp .value:not(.active) {
    border: 2px solid rgba(255,255,255,0.3);
}


#fight_config .inside .engage_enemy_fight_radius .value:not(.active):hover,
#fight_config .inside .escape_distance .value:not(.active):hover,
#fight_config .inside .escape_dmg_prc .value:not(.active):hover,
#fight_config .inside .escape_rule .value:not(.active):hover,
#fight_config .inside .escape_warp .value:not(.active):hover
{
    border: 2px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}


#fight_config .inside .engage_enemy_fight_radius .value.active:before,
#fight_config .inside .escape_distance .value.active:before,
#fight_config .inside .escape_dmg_prc .value.active:before,
#fight_config .inside .escape_rule .value.active:before,
#fight_config .inside .escape_warp .value.active:before {
    box-shadow: inset 0px 0px 25px rgba(255,255,255,1), 0px 0px 25px rgba(255,255,255,1);
    background: rgba(255,255,255,1);

    animation: highlited 1000ms linear infinite;
}

#fight_config .inside .engage_enemy_fight_radius .value {
    width: 348px;
    padding: 5px 5px 10px;
    height: 75px;
}
#fight_config .inside .escape_distance .value {
    width: 76px;
    padding: 5px 5px 10px;
    height: 38px;
}
#fight_config .inside .escape_dmg_prc .value {
    width: 59px;
    margin: 5px;
    padding: 5px 5px 10px;
    height: 38px;
}
#fight_config .inside .escape_rule .value {
    width: 95px;
    padding: 5px 5px 10px;
    height: 55px;
    width: 106px;
}
#fight_config .inside .escape_warp .value {
    width: 168px;
    padding: 5px 5px 10px;
    height: 55px;
    width: 168px;
}

#fight_config .inside .titler {
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    line-height: 30px;
    height: 45px;
}

#fight_config .inside .titler:before {
    content: '';
    display: block;
    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}








#ship_config {
    position: absolute;
    width: 500px;
    height: 395px;
    left: calc(50% - 250px);
}

#ship_config:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;


    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-size: cover;



    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(32 32 65 / 27%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}


#ship_config .switch {
    position: absolute;
    top: 55px;
    right: 20px;
    left: 20px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;
    width: auto;

}


#ship_config .switch .switcher {
    position: relative;
    display: inline-block;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);

}

#ship_config .switch .switcher:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#ship_config .switch .switcher.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#ship_config .switch .switcher.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}




#ship_config .inside{
    position: absolute;
    top: 90px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    text-align: left;
    border-spacing: 0px;

}

#ship_config .inside .titler {
    color: #ffbc00;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 18px;
    position: relative;
    line-height: 45px;
    height: 45px;
    width: 300px;
    margin: 0px auto;
}



#ship_config .inside .name {
    text-align: center;
}

#ship_config .inside .name input {
    margin: 25px auto;
    width: 248px;
    text-align: center;
    font-size: 18px;
    padding: 4px 10px;
    height: unset;
}

#ship_config .inside .name .text_info {
    margin: 15px 50px 25px;

    text-align: center;
    color: white;
    font-size: 14px;
}

#ship_config .inside .name .basename_value {
    font-size: 35px;
    color: white;
    padding: 10px 0px 0px;
    font-family: var(--fontFaimly_header);
}

#ship_config .inside .name .actions{
    margin: 5px auto;
}

#ship_config .inside .name button {
    margin: 0px 5px;
}

#modulecraft {
    position: absolute;
    width: 1000px;
    height: 800px;



}
#modulecraft:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}





#modulecraft .image{
    position: absolute;
    right: 50px;
    bottom: 155px;
    top: 30px;
    left: 50px;
    overflow: hidden;
    z-index: -1;
    opacity: 0.1;
    filter: blur(3px);
}

#modulecraft .image .bckg{
    position: absolute;
    width: 90%;
    height: 90%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: crt 50000ms linear infinite;
}


#unmountartefact{
    position:absolute;
    width: 440px;
    height: 660px;
    z-index:99999999;
}

#unmountartefact:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
}

#unmountartefact .qtxt{
    bottom: 125px;
    top: unset;
}

#unmountartefact .actions {
    position:absolute;
    left: 20px;
    right: 20px;
    bottom: 40px;
    text-align: center;
    color: white;
}

#unmountartefact .actions .thint  {
    animation: highlited 1000ms linear infinite;
    right: calc(100% + 10px);
    text-align: center;
    bottom: 3px;
    left: unset;
    top: unset;

}

#unmountartefact .actions .button  {
    z-index: 1;
    width: 165px;
}



#unmountartefact .actions .notpossible {
    font-size: 13px;
    animation: highlited 1000ms linear infinite;
    line-height: 18px;
    padding: 0px 10px;
}

#unmountartefact .artefinfo{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 55px;

    margin: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    padding: 0px;
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    text-align: center;

}

#unmountartefact .artefinfo .item{
    display: inline-block;
    position: relative;
    width: 300px;
    height: 160px;
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center top;
}

#unmountartefact .artefinfo .item .name{
    display: block;
    position: relative;
    margin-top: 150px;

    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 22px;
    line-height: 17px;
    /* font-family: var(--fontFaimly_button); */
    text-align: center;
    padding: 5px 0px 10px;

}

#unmountartefact .artefinfo .item .restriction{
    display: block;
    position: relative;


    color: #008dff;
    text-shadow: var(--shadow_textfull);
    font-size: 12px;
    line-height: 14px;
    font-family: var(--fontFaimly_button);
    text-align: center;
    text-transform: uppercase;
    padding: 5px 0px;


}



#unmountartefact .artefinfo .item .long{
    display: block;
    color: white;
    text-shadow: var(--shadow_textfull);
    font-size: 12px;
    line-height: unset;
    text-align: center;
    padding: 15px 0px 0px;

}

#slotspot{
    position:absolute;
    width: 400px;
    height: 560px;
    z-index:99999999;
}

#slotspot:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
}

#slotspot div.img {
    position:absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
    clip-path: var(--clip_desktop_adtronaut_dismisshire);
    z-index: -1;
}
#slotspot span.img {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
    bottom: 0px;
}
#slotspot div.img:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(30,30,30) 30%, rgba(0,0,0,0) 75%);
}

#slotspot .img .inf {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 210px;
    color: white;
    font-size: 14px;
    text-align: center;
    /* text-shadow: var(--shadow_textfull); */
}

#slotspot .actions {
    position:absolute;
    left: 20px;
    right: 20px;
    bottom: 40px;
    text-align: center;
    color: white;
}

#slotspot .actions .thint  {
    animation: highlited 1000ms linear infinite;
    right: calc(100% + 10px);
    text-align: center;
    bottom: 3px;
    left: unset;
    top: unset;

}

#slotspot .actions .button  {
    z-index: 1;
    width: 165px;
}



#slotspot .actions .notpossible {
    font-size: 13px;
    animation: highlited 1000ms linear infinite;
    line-height: 18px;
    padding: 0px 10px;
}

#modulecraft .slots {
    position: absolute;
    bottom: 295px;
    left: 20px;
    right: 20px;
    top: 71px;
    z-index: 10;
}

#modulecraft .slots .slotmap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    right: 0px;

}

#modulecraft .slots .slotmap .artefactbox {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid rgb(98,81,18);
    opacity: 0;
    animation: appear 220ms ease forwards;
}

#modulecraft .slots .slotmap .artefactbox.disabled {

    border: 1px solid rgb(80,80,80);
}

#modulecraft .slots .slotmap .artefactbox .artefactboximg {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}

#modulecraft .slots .slotmap .artefactbox.disabled .artefactboximg {
    filter: grayscale(1);
}




#modulecraft:not(.isselecting) .slots .slotmap .artefactbox:hover .artefactboxhtmlx,
#modulecraft:not(.isselecting) .artefacts .artefact:hover .artefactboxhtmlx{
    display: block;
}


#modulecraft:not(.isselecting) .slots .slotmap .artefactbox:hover {
    z-index: 1000000;
}






#modulecraft .slots .slotmap .slotmapspot {
    position: absolute;
    top: 0px;
    left: 0px;
    display: table;
    /*border-right: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;*/


    box-sizing: border-box;
    cursor: pointer;

    opacity: 0;
    animation: appear 200ms ease forwards;

}

#modulecraft .slots .slotmap .slotmapspot .inner {
    display: table-cell;
    vertical-align: middle;

    color: white;

    font-size: 12px;
    text-align: center;

}

#modulecraft .slots .slotmap .slotmapspot .inner:after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-image:
        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq2) 0%, var(--border-button-upgradeliq2) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq2) 0%, var(--border-button-upgradeliq2) 100%),
        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%),

        linear-gradient(0deg, var(--border-button-upgradeliq) 0%, var(--border-button-upgradeliq) 100%);
    background-repeat: no-repeat;
    background-size:
        calc(100% - 4px) 1px,
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),

        calc(100% - 4px) 1px;
    background-position:
        top 1px center, top 2px left 1px,
        center left 1px, bottom 2px left 1px,
        top 2px right 1px, center right 1px,
        bottom 2px right 1px,
        bottom 1px center;
}

#modulecraft .slots .slotmap .slotmapspot .inner:before {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background-color: rgb(69 103 52);

    z-index: -1;
    box-shadow: 0px 0px 11px 10px #121212 inset;
}

#modulecraft .slots .slotmap .slotmapspot:hover .inner:before {
    background-color: rgb(101 152 75);
    animation: blink 100ms linear 2 alternate;

}

@keyframes appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#modulecraft .slots .slotmap .slotmapbox {
    position: absolute;
    top: 0px;
    left: 0px;

    /*border-right: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;*/


    box-sizing: border-box;
    opacity: 0;
    animation: appear 200ms ease forwards;
}

#modulecraft .slots .slotmap .slotmapbox.full {
    /*background-color: #191919;*/
    background-color: rgb(59 46 19);
}

#modulecraft .slots .slotmap .slotmapbox.full:before {
    /*box-shadow: 0px 0px 11px 6px rgba(193,138,22,0.26)  inset;*/
}

#modulecraft .slots .slotmap .slotmapbox.disabled {
    /*background-color: #191919;*/
    background-color: #452121;
}

#modulecraft .slots .slotmap .slotmapbox.disabled:before {
    /*box-shadow: 0px 0px 11px 6px rgba(193,138,22,0.26)  inset;*/
}

#modulecraft .slots .slotmap .slotmapbox.empty.usable {
    background-color: #0d490d;
}

#modulecraft .slots .slotmap .slotmapbox.empty.unusable {
    background-color: #452121;
}
#modulecraft .slots .slotmap .slotmapbox.empty.blocked {
    background-color: #571111;
}

#modulecraft .slots .slotmap .slotmapbox.empty {
    background-color: #292e3f;
}

#modulecraft .slots .slotmap .slotmapbox:before {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;

    box-shadow: 0px 0px 11px 6px #121212 inset;


}

#modulecraft .slots .slotmap .slotmapbox.top {
    /*border-top: 1px solid #2c2c2c; */
}

#modulecraft .slots .slotmap .slotmapbox.left {
    /* border-left: 1px solid #2c2c2c;*/
}




#modulecraft .artefacts {
    position: absolute;
    bottom: 35px;
    left: 15px;
    right: 15px;
    height: 246px;
}

#modulecraft .artefacts .info {
    padding-top: 105px;
}

#modulecraft .artefacts .artefact {
    position: relative;

    width: 154px;
    height: 200px;
    margin: 0px 5px 10px 5px;
    cursor: pointer;
}



#modulecraft .artefacts .artefact:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(60,60,60);
    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
    background-image: linear-gradient(180deg, rgb(193 138 22 / 26%) 25%, rgb(0 0 0 / 71%) 100%);

    box-shadow: 0px 0px 11px 6px #121212 inset;

}

#modulecraft .artefacts .artefact.unusable:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(60,60,60);
    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
    background-image: linear-gradient(180deg, rgb(22 22 22 / 26%) 25%, rgb(0 0 0 / 71%) 100%);

    box-shadow: 0px 0px 11px 6px #121212 inset;

}


#modulecraft .artefacts .artefact .aimage {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 63px;
    top: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
}

#modulecraft .artefacts .artefact.unusable .aimage {
    filter: grayscale(1);
}

#modulecraft .artefacts .artefact:not(.unusable):hover .aimage {
    animation: crt 5000ms linear infinite;
}


#modulecraft .artefacts .artefact .name {
    position: absolute;
    bottom: 15px;
    left: 10px;
    /* right: 5px; */
    width: calc(100% - 20px);
    text-align: center;

    color: rgb(255,255,255);
    text-transform: uppercase;

    overflow: hidden;
    height: 40px;
    padding: 0px;
    box-sizing: border-box;
    display: table;

}

#modulecraft .artefacts .artefact .qty {
    display: block;
    top: 8px;
    position: absolute;
    color: white;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 1px 7px;
    right: 8px;
    white-space: nowrap;
    text-shadow: var(--shadow_textfull);

}



#modulecraft .artefacts .artefact:not(.unusable):hover .name {
    animation: blink 100ms linear 2 alternate;
}

#modulecraft .artefacts .artefact .name span {
    display: table-cell;
    vertical-align: middle;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 13px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
}

#modulecraft .artefacts .artefact.unusable .name span {
    color: gray;
}

#modulecraft .slots .buttons {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#modulecraft .slots .buttons.selection {
    position: absolute;
    top: -143px;
    right: 0px;
    z-index: 10000;
}

#modulecraft .slots .buttons .info {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    font-size: 14px;

    text-transform: uppercase;
    line-height: 30px;

    padding: 0px;
    /* width: 200px; */
    color: gray;
    text-align: center;
}

#modulecraft .slots .buttons .close {
    animation: highlited 1000ms linear infinite;
}



#modulecraft .slots .list {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;


}

#modulecraft .slots .list.selection {
    padding: 50px 10px 10px;
    z-index: 1;
    top: -145px;
}

#modulecraft .slots .list.selection:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(20,20,20);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
}




#modulecraft .slots .list .info {
    position: absolute;
    top: 80px;
    right: 0px;
    left: 0px;
    color: rgb(200,200,200);
    text-align: center;
    font-size: 15px;

    text-transform: uppercase;

}



#modulecraft .slots .list .info small {
    position: relative;
    display: block;
    font-size: 12px;
    padding-top: 5px;

}

#modulecraft .slots .list .buttons {
    position: relative;
    margin-top: 15px;

}

#modulecraft .slots .list .buttons .button {
    position: relative;
    margin: 0px auto;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: black;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    cursor: pointer;

    font-size: 20px;
    font-family: var(--fontFaimly_header);
}


#modulecraft .slots span.info {
    text-align: center;
    display: block;
    padding: 65px 5px 0px;
    text-transform: uppercase;
    font-size: 25px;
    color: rgba(255,255,255,0.5);
    font-family: var(--fontFaimly_header);
}


#modulecraft .slots .slot,
#modulecraft .slots .artefact
{
    float: left;
    position: relative;
    width: 116px;
    text-align: center;
    height: 190px;
    margin: 0px 5px 12px 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: none;
    background-position: center bottom;
    background-size: contain;
    overflow: hidden;

}

#modulecraft .slots .slot:before,
#modulecraft .slots .artefact:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(60,60,60);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_desktop_basemodule_astronaut);
}

#basemodule {
    position: absolute;
    left: 30px;
    top: 35px;
    bottom: 90px;
    right: 130px;
    z-index: 9998;
    left: 310px;
    min-width: 830px;
    max-width: var(--hud-window-max-width);
}

#telo.rightcontext #basemodule {
    right: 350px;
}

#telo.fleetships #basemodule {
    right: 310px;
}

#basemodule:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}


#basemodule .image{
    position: absolute;
    right: 265px;
    bottom: 263px;
    top: 15px;
    left: 15px;
    overflow: hidden;
    z-index: -1;
    opacity: 1;
}

#basemodule .image .bckg{
    position: absolute;
    width: 90%;
    height: 90%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    animation: crt 50000ms linear infinite;
}

#basemodule .health {
    position: absolute;
    top: 80px;
    left: 15px;
    width: 250px;
}


#basemodule .attributes {
    position: absolute;
    top: 45px;
    right: 15px;
    width: 390px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
}
#basemodule .attributes .content {
    position: absolute;
    top: 40px;
    right: 0px;
    left: 0px;
    padding: 20px 15px 20px;
    display: none;
}
#basemodule .attributes .content.visible {
    display: block;
    z-index: 100;
}

#basemodule .attributes .content.visible:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    clip-path: var(--clip_desktop_basemodule_attributes);
    z-index: -1;
    background-color: var(--gitem-background);

    z-index: -1;
    background-image: linear-gradient(rgb(27 46 95 / 80%) 0%, rgb(72 72 107 / 22%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}

#basemodule .attributes table
{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}



#basemodule .attributes table td .module-artefacts{
    text-align: left;
}

#basemodule .attributes table td .module-artefacts .artefactboxhtmlx{
    left: unset;
    right: 110%;
}

#basemodule .attributes table td .module-artefacts .artefactboxhtmlx:before{
    left: unset;
    right: -10px;
    border-left: 10px solid var(--subtext_color-background);
    border-right: unset;
}


#basemodule .attributes table td .antennabar {
    position: relative;
    width: 100%;
    height: 7px;
    margin-top: 4px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;

}

#basemodule .attributes table td .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}



#basemodule .attributes table td .hpbar {
    position: relative;
    width: 100%;
    height: 7px;
    margin-top: 4px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;

}

#basemodule .attributes table td .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}



#basemodule .attributes table td:hover .label {
    display: block;
}

#basemodule .attributes table td .label {
    display: none;
    position: absolute;
    top: -2px;
    left: calc(100% - 5px);
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(50,50,50,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
}
#basemodule .attributes table td .label:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(50,50,50,1);
    position: absolute;
    top: 0px;
    left: -6px;
}





#basemodule .weapons {
    position: absolute;
    top: 391px;
    left: 15px;
    right: 15px;
    color: white;
    text-align: left;
    height: 170px;
}

#basemodule .weapons .sweapons {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
}


#basemodule .weapons .sweapons .weapon {
}


#basemodule .weapons .sweapons .weapon:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_desktop_basemodule_weapon);
    z-index: -1;
}

#basemodule .weapons .sweapons .weapon .image {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    background-position: center 5px;
    background-size: 90%;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: -1;
    clip-path: var(--clip_desktop_basemodule_weapon);
}

#basemodule .weapons .sweapons .weapon .image:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(2deg, rgb(60 60 60) 10%, rgba(0,0,0,0) 165%);
}

#basemodule .weapons .sweapons .weapon {
    display: inline-block;
    width: 120px;
    height: 170px;
    text-align: center;
    position: relative;
    margin: 0px 10px 0px 0px;
}

#basemodule .weapons .sweapons .weapon .showWindowItem {
    position: absolute;
    top: 10px;
    right: unset;
    left: 10px;
    filter: invert(1);
    background-size: 13px;
    width: 13px;
    height: 13px;
}


#basemodule .weapons .sweapons .weapon .name {
    position: absolute;
    top: 35px;
    font-size: 12px;
    left: 4px;
    right: 4px;
    text-align: center;
    padding: 0px;
    line-height: 13px;
    text-transform: uppercase;
    box-sizing: border-box;
    color: white;
}

#basemodule .weapons .sweapons .weapon .name .code {
    position: absolute;
    top: 38px;
    font-family: var(--fontFaimly_header);
    font-size: 26px;
    left: 4px;
    right: 4px;
    text-align: center;

}



#basemodule .weapons .sweapons .weapon .acc_bonus {
    position: absolute;
    top: 120px;
    left: 12px;
    right: 10px;
    font-size: 12px;

}

#basemodule .weapons .sweapons .weapon .acc_bonus .sr,
#basemodule .weapons .sweapons .weapon .acc_bonus .mr,
#basemodule .weapons .sweapons .weapon .acc_bonus .lr {
    position: relative;
    left: 12px;
    width: calc(100% - 12px);
    height: 9px;
    font-size: 10px;
    margin-bottom: 5px;
}

#basemodule .weapons .sweapons .weapon .acc_bonus .sr:before,
#basemodule .weapons .sweapons .weapon .acc_bonus .mr:before,
#basemodule .weapons .sweapons .weapon .acc_bonus .lr:before {
    display: block;
    position: absolute;
    left: -12px;
    width: 10px;
    bottom: 0px;
    top: 0px;
    font-size: 10px;
    text-align: right;
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center left;
}

#basemodule .weapons .sweapons .weapon .acc_bonus .sr:before {
    content: '';
    background-image: url('ico/accuracy_short-32.png');
}

#basemodule .weapons .sweapons .weapon .acc_bonus .mr:before {
    content: '';
    background-image: url('ico/acurracy_medium-32.png');
}

#basemodule .weapons .sweapons .weapon .acc_bonus .lr:before {
    content: '';
    background-image: url('ico/accuracy_long-32.png');
}

#basemodule .weapons .sweapons .weapon .whint {
    display: none;
    position: absolute;
    left: 100%;
    min-height: 12px;
    min-width: 20px;
    z-index: 100;
    background-color: rgba(50,50,50,1);
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}
#basemodule .weapons .sweapons .weapon .whint:before {
    content: "";
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid rgba(50,50,50,1);
    position: absolute;
    top: 0px;
    left: -6px;
}

#basemodule .weapons .sweapons .weapon .acc_bonus .bar_base {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 6px;
    background-color: rgb(200,200,200);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;

}

#basemodule .weapons .sweapons .weapon .acc_bonus .subtext {
    animation: var(--animation-subtext-fadeinFast);
    bottom: calc(100% - 8px);
}

#basemodule .weapons .sweapons .weapon .acc_bonus .bar_bonus {
    display: block;
    position: absolute;
    top: 0px;
    height: 6px;
    background-color: #56b9cd;
    filter: drop-shadow(0px 0px 2px #56b9cd);

}

#basemodule .weapons .sweapons .weapon .acc_bonus .sr:hover .whint,
#basemodule .weapons .sweapons .weapon .acc_bonus .mr:hover .whint,
#basemodule .weapons .sweapons .weapon .acc_bonus .lr:hover .whint,
#basemodule .weapons .sweapons .weapon .firedelay_bonus:hover .whint,
#basemodule .weapons .sweapons .weapon .health:hover .whint {
    display: block;

}


#basemodule .weapons .sweapons .weapon .firedelay_bonus {
    position: absolute;
    top: 100px;
    left: 25px;
    height: 12px;
    right: 10px;
    font-size: 10px;
}

#basemodule .weapons .sweapons .weapon .firedelay_bonus:before {
    display: block;
    position: absolute;
    left: -12px;
    width: 10px;
    bottom: 0px;
    top: 0px;
    font-size: 10px;
    text-align: right;
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center left;
    content: '';
    background-image: url('ico/weapon_reload_32.png');
}







#basemodule .weapons .sweapons .weapon .firedelay_bonus .bar_base {
    display: block;
    position: absolute;
    top: 3px;
    left: 0px;
    height: 6px;
    background-color: rgb(200,200,200);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;

}

#basemodule .weapons .sweapons .weapon .firedelay_bonus .subtext {
    animation: var(--animation-subtext-fadeinFast);
}

#basemodule .weapons .sweapons .weapon .firedelay_bonus .bar_bonus {
    display: block;
    position: absolute;
    top: 3px;
    height: 6px;
    background-color: #56b9cd;
    filter: drop-shadow(0px 0px 2px #56b9cd);

}

#basemodule .weapons .sweapons .weapon .firedelay_bonus .bar_bonus.neg {
    background-color: var(--hud_invalid_color);
    filter: drop-shadow(0px 0px 2px rgb(255,0,0));
    background-image: none;
}

#basemodule .action{
    position: relative;
    text-align: center;
    border: 0px;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 0px 10px;
    height: 30px;
    font-size: 12px;

    text-transform: none;
    box-sizing: border-box;
    margin: 5px 0px;
    display: inline-block;
    line-height: 30px;
    z-index: 1;
}

#basemodule .action:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;

    clip-path: var(--clip_button);
    z-index: -1;
}

#basemodule .action:hover {
    animation: blink 100ms linear 2 alternate;

}

#basemodule .crew {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 250px;
}
#basemodule .crew .buttons {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#basemodule .crew .buttons.selection {
    position: absolute;
    top: -143px;
    right: 0px;
    z-index: 10000;
}

#basemodule .crew .buttons .info {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    font-size: 18px;

    text-transform: uppercase;
    line-height: 30px;

    padding: 0px;
    /* width: 200px; */
    color: #FFC107;
    text-align: center;
}

#basemodule .crew .buttons .close {
    animation: highlited 1000ms linear infinite;
}



#basemodule .crew .list {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;


}

#basemodule .crew .list.selection {
    padding: 50px 10px 10px;
    z-index: 1;
    top: -145px;
}

#basemodule .crew .list.selection:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: #292c39;

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-image: linear-gradient(180deg, #28495c 50%, rgba(0, 0, 0, 0) 90%);

}




#basemodule .crew .list .info {
    position: absolute;
    top: 80px;
    right: 0px;
    left: 0px;
    color: rgb(200,200,200);
    text-align: center;
    font-size: 15px;

    text-transform: uppercase;

}



#basemodule .crew .list .info small {
    position: relative;
    display: block;
    font-size: 12px;
    padding-top: 5px;

}

#basemodule .crew .list .buttons {
    position: relative;
    margin-top: 15px;

}

#basemodule .crew .list .buttons .button {
    position: relative;
    margin: 0px auto;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: black;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    cursor: pointer;

    font-size: 20px;
    font-family: var(--fontFaimly_header);
}


#basemodule .crew span.info {
    text-align: center;
    display: block;
    padding: 65px 5px 0px;
    text-transform: uppercase;
    font-size: 25px;
    color: rgba(255,255,255,0.5);
    font-family: var(--fontFaimly_header);
}


#basemodule .crew .slot,
#basemodule .crew .astronaut
{
    float: left;
    position: relative;
    width: 140px;
    text-align: center;
    height: 190px;
    margin: 0px 5px 12px 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: none;
    background-position: center bottom;
    background-size: contain;
    overflow: hidden;

}

#basemodule .crew .slot:before,
#basemodule .crew .astronaut:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(60,60,60);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_desktop_basemodule_astronaut);
}
#basemodule .crew .slot:before {
    background-color: rgb(32 57 95);
}



#basemodule .crew .astronaut.available:before{

    background-color: rgb(32 57 95);

}


#basemodule .crew .slot .thint,
#basemodule .crew .astronaut .thint  {
    display: block;
    position: absolute;
    top: 0px;
    right: calc(50% - 37px);
    width: 74px;
    text-align: center;
    animation: highlited 1000ms linear infinite;
}









#basemodule .crew .astronaut.available .thint  {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    text-align: left;
    transform: translateY(-50%) translateX(-100%);
    right: unset;
}
#basemodule .crew .slot .thint:before  {
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    bottom: -20px;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
}



#basemodule .crew .astronaut.available {
    height: 270px;
}


#basemodule .crew .astronaut.unavailable {
    height: 270px;
}



#basemodule .crew .slot .astronautface,
#basemodule .crew .astronaut .astronautface {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 230px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(1);
    /* animation: crt 5000ms linear infinite; */
    background-position: bottom center;
    background-repeat: no-repeat;

    clip-path: var(--clip_desktop_basemodule_astronaut);

}
#basemodule .crew .slot .astronautface {
    filter: brightness(1.0) grayscale(0.5);
}

#basemodule .crew .astronaut.available .astronautface {
    filter: brightness(1.0) grayscale(0.5);
}

#basemodule .crew .slot.occupyed .astronautface {
    background-size: 180px;
    background-position: -20px 4px;
}

#basemodule .crew .slot .astronautface:after,
#basemodule .crew .astronaut .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(117 117 117) 0%, rgba(0,0,0,0) 70%);
}


#basemodule .crew .astronaut.unavailable .astronautface:after{
    background-image: linear-gradient(0deg, rgb(21 21 21) 0%, rgb(255 255 255 / 6%) 70%);
}


#basemodule .crew .astronaut .popup_inf,
#basemodule .crew .slot.occupyed .popup_inf {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 95px;
    box-sizing: border-box;

}




#basemodule .crew .slot.occupyed .removefrompos,
#basemodule .crew .astronaut .addtopos,
#basemodule .crew .slot.occupyed .addtopos{
    position: absolute;
    height: 35px;
    box-sizing: border-box;
    z-index: 1000;
    font-size: 13px;
    white-space: nowrap;
    color: white;
    cursor: pointer;
    bottom: 10px;
    left: 15px;
    right: 10px;
    line-height: 35px;
    font-family: var(--fontFaimly_button);
    background-color: transparent;
}


#basemodule .crew .slot.occupyed .removefrompos:before,
#basemodule .crew .astronaut .addtopos:before,
#basemodule .crew .slot.occupyed .addtopos:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #0000008f;
    z-index: -1;
}

#basemodule .crew .slot.occupyed .removefrompos:after,
#basemodule .crew .astronaut .addtopos:after,
#basemodule .crew .slot.occupyed .addtopos:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#basemodule .crew .slot.occupyed .removefrompos:hover:before{
    box-shadow: 0px 0px 15px #cf2525 inset;
    animation: blink 100ms linear 2 alternate;

}

#basemodule .crew .astronaut .addtopos:hover:before,
#basemodule .crew .slot.occupyed .addtopos:hover:before {
    box-shadow: 0px 0px 15px white inset;
    animation: blink 100ms linear 2 alternate;

}

#basemodule .crew .astronaut.available .popup_inf,
#basemodule .crew .astronaut.unavailable .popup_inf {
    height: 135px;
}

#basemodule .crew .astronaut .popup_inf {
    color: white;
}

#basemodule .crew .astronaut .popup_inf .name,
#basemodule .crew .slot.occupyed .popup_inf .name {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 10px;
    text-align: center;
    z-index: 1000;
}

#basemodule .crew .slot.occupyed .popup_inf .name {
    top: 7px;
}

#basemodule .crew .astronaut .popup_inf .name > span,
#basemodule .crew .slot.occupyed .popup_inf .name > span {
    display: inline-block;
    font-size: 12px;
    position: relative;
    padding: 2px 6px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    color: black;
    cursor: pointer;
    z-index: 1;
}

#basemodule .crew .astronaut .popup_inf .name > span:before,
#basemodule .crew .slot.occupyed .popup_inf .name > span:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;
    z-index: -1;

}

#basemodule .crew .astronaut .popup_inf .name > span:hover,
#basemodule .crew .slot.occupyed .popup_inf .name > span:hover {
    animation: blink 100ms linear 2 alternate;
}



#basemodule .crew .astronaut.available .popup_inf .trace,
#basemodule .crew .astronaut.unavailable .popup_inf .trace {
    position: absolute;
    top: 32px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

#basemodule .crew .astronaut.available .popup_inf .prof,
#basemodule .crew .astronaut.unavailable .popup_inf .prof {
    position: absolute;
    top: 45px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

#basemodule .crew .astronaut .popup_inf .race,
#basemodule .crew .slot.occupyed .popup_inf .race {

    display: none;
    font-size: 13px;

    width: 36px;
    height: 36px;
    position: absolute;
    bottom: -14px;
    left: calc(50% - 18px);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid white;
    line-height: 49px;
    color: white;
    text-shadow: var(--shadow_textfull);
    background-color: black;
}

#basemodule .crew .astronaut.unavailable .popup_inf .race{
    filter: brightness(0.3) grayscale(1);
}


#basemodule .crew .astronaut .popup_inf .values,
#basemodule .crew .slot.occupyed .popup_inf .values{
    position: absolute;
    top: 45px;
    left: 0px;
    right: 0px;
}

#basemodule .crew .astronaut.available .popup_inf .values,
#basemodule .crew .astronaut.unavailable .popup_inf .values {
    top: 75px;
}


#basemodule .crew .astronaut .popup_inf .values > div{
    width: calc(33% - 4px);
    color: white;
    padding: 0px;
}

#basemodule .crew .slot.occupyed .popup_inf .values > div {
    width: calc(33% - 4px);
    color: white;
    white-space: nowrap;
    padding: 0px;
}

#basemodule .crew .slot.occupyed .popup_inf .values > div:hover {
    z-index: 1010;
}

#basemodule .crew .slot.occupyed .popup_inf .values > div:before {

    background-color: rgb(29,29,29);

}

#basemodule .crew .astronaut.available .popup_inf .values div:before {

    background-color: rgb(29,29,29);

}

#basemodule .crew .astronaut.available .popup_inf .values .tactical.hlt {
    color: white;


}

#basemodule .crew .astronaut.available .popup_inf .values .engineer.hlt {
    color: white;


}

#basemodule .crew .astronaut.available .popup_inf .values .science.hlt {
    color: white;


}

#basemodule .crew .astronaut.available .popup_inf .values .tactical.hlt:before {

    background-color: var(--color-t);
    animation: highlited 1000ms linear infinite;
}

#basemodule .crew .astronaut.available .popup_inf .values .engineer.hlt:before {

    background-color: var(--color-e);
    animation: highlited 1000ms linear infinite;
}

#basemodule .crew .astronaut.available .popup_inf .values .science.hlt:before {

    background-color: var(--color-s);
    animation: highlited 1000ms linear infinite;
}

#basemodule .crew .astronaut.unavailable .popup_inf .values .tactical.hlt:before {
    background-color: rgb(129, 129, 129);
    animation: highlited 1000ms linear infinite;

}

#basemodule .crew .astronaut.unavailable .popup_inf .values .tactical:not(.hlt):before {
    background-color: rgb(29, 29, 29);

}

#basemodule .crew .astronaut.unavailable .popup_inf .values .engineer:not(.hlt):before {
    background-color: rgb(29, 29, 29);

}

#basemodule .crew .astronaut.unavailable .popup_inf .values .science:not(.hlt):before {
    background-color: rgb(29, 29, 29);

}

#basemodule .crew .slot.occupyed.t .popup_inf .values .tactical {
    color: white;


}
#basemodule .crew .slot.occupyed.t .popup_inf .values .tactical:before {

    background-color: var(--color-t);

}
#basemodule .crew .slot.occupyed.e .popup_inf .values .engineer {
    color: white;


}
#basemodule .crew .slot.occupyed.e .popup_inf .values .engineer:before {

    background-color: var(--color-e);

}
#basemodule .crew .slot.occupyed.s .popup_inf .values .science {
    color: white;

}
#basemodule .crew .slot.occupyed.s .popup_inf .values .science:before {

    background-color: var(--color-s);

}




#basemodule .crew .astronaut .popup_inf .health_bar,
#basemodule .crew .slot.occupyed .popup_inf .health_bar {
    position: absolute;
    top: 31px;
    height: 7px;
    left: 6px;
    right: 6px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
}

#basemodule .crew .astronaut.available .popup_inf .health_bar,
#basemodule .crew .astronaut.unavailable .popup_inf .health_bar {
    top: 61px
}

#basemodule .crew .astronaut .popup_inf .health_bar .abar,
#basemodule .crew .slot.occupyed .popup_inf .health_bar .abar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#basemodule .crew .astronaut .popup_inf .reason,
#basemodule .crew .slot.occupyed .popup_inf .reason {
    position: absolute;
    top: 150px;
    left: 5px;
    right: 0px;

}

#basemodule .crew .astronaut .popup_inf .reason span,
#basemodule .crew .slot.occupyed .popup_inf .reason span {
    font-size: 12px;
    color: var(--hud_invalid_text);
    background-color: var(--hud_invalid_background);
    padding: 6px 10px;
    display: inline-block;
    font-family: var(--fontFaimly_button);
    line-height: 15px;
    position: relative;
}

#basemodule .crew .astronaut .popup_inf .reason span:before,
#basemodule .crew .slot.occupyed .popup_inf .reason span:before {
    content: "";
    display: block;

    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    left: calc(50% - 5px);
    bottom: -5px;
    border-top: 5px solid var(--hud_invalid_background);
    ;

}


#basemodule .crew .slot.empty {
    cursor:pointer;

}

#basemodule .crew .slot.empty .emptybckg {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    bottom: 2px;
    background: rgba(0,0,0,0) url(human_white_plus_180x57.png) center no-repeat;
    background-size: contain;
    opacity: 0.5;
}

#basemodule .crew .slot.empty .values {
    position: absolute;
    top: 37px;
    left: 10px;
    right: 10px;
    color: white;
}

#basemodule .crew .slot.empty:hover{
    animation:blink 100ms linear 2 alternate;
}

#basemodule .crew .slot.empty .values .min
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    line-height: 120px;
    font-size: 28px;
}
#basemodule .crew .slot.empty .stitle
{
    display: block;
    position: absolute;
    top: 38px;
    left: 50%;
    right: unset;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    transform: translateX(-50%);
    color: white;
    z-index: 1000;
    width: 100%;
}





#basemodule .crew .slot.empty .values .min.t,
#basemodule .crew .slot.empty .values .min.e,
#basemodule .crew .slot.empty .values .min.s{
    height: 30px;
    color: rgba(255,255,255,1);
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    margin: 0px 0px;
    box-sizing: border-box;
    position: absolute;
    top: 35px;
    left: calc(50% - 61px);
    width: 125px;
    padding: 6px 2px 2px;
}


#basemodule .crew .slot.empty .values .min.t{
    background-color:rgb(29,29,29);
    color: white;


}
#basemodule .crew .slot.empty .values .min.e{
    background:rgb(29,29,29);
    color: white;


}
#basemodule .crew .slot.empty .values .min.s{
    background:rgb(29,29,29);
    color: white;


}



#basemodule .crew .slot.empty .values .min small
{
    display: none;
    line-height: 20px;

    font-family: var(--fontFaimly_header);
    font-size: 16px;
    margin-right: 4px;
}

#basemodule .crew .slot.empty .values .max.t,
#basemodule .crew .slot.empty .values .max.e,
#basemodule .crew .slot.empty .values .max.s{

    color: #a3a2a2;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin: 0px 0px;
    box-sizing: border-box;
    position: absolute;
    top: 65px;
    left: calc(50% - 61px);
    width: 125px;
    padding: 6px 2px 2px;
}


#basemodule .crew .slot.empty .values .max.t{
    background-color:rgb(29,29,29);
    color: white;

}
#basemodule .crew .slot.empty .values .max.e{
    background:rgb(29,29,29);
    color: white;

}
#basemodule .crew .slot.empty .values .max.s{
    background:rgb(29,29,29);
    color: white;

}

#basemodule .crew .slot.empty .values .max:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #4b4a4a;
    z-index: -1;
    background-image: linear-gradient(0deg, rgb(110 110 110 / 60%) 0%, rgba(0, 0, 0, 0) 100%);
}

#basemodule .crew .slot.empty .values .max small
{
    display: inline;
    line-height: 20px;

    font-family: var(--fontFaimly_header);
    font-size: 12px;
    margin-right: 4px;
}

#basemodule .crew .slot.empty .values .max .alevel
{
    display: block;
    line-height: 13px;
    font-family: var(--fontFaimly_header);
    font-size: 11px;
    margin: 0px;
    padding: 0px 5px 6px;
    color: #cfcfcf;
}

#basemodule .crew .slot .values .max .subtext
{
    max-width: 130px;
    min-width: 130px;
    bottom: calc(100% - 5px);
}

#basemodule .crew .slot .hover,
#basemodule .crew .astronaut .hover {
    display: none;
    position: absolute;
    left: 5px;
    top: calc(50% - 15px);
    right: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*#ffbc00*/
    color: white;
    background: black;
    cursor: pointer;

    font-size: 20px;
    animation: highlited 1000ms linear infinite;
    font-family: var(--fontFaimly_header);
}

#basemodule .crew .slot:hover .hover,
#basemodule .crew .astronaut:hover .hover {
    display:block;
}



#basemodule .attributes .switch{
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    width: unset;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#basemodule .attributes .switch:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#basemodule .attributes .switch.awhite{
    font-size: 13px;
    background-color: transparent;
    color: #b9dbff;
    font-family: var(--fontFaimly_button);
    float: right;
    z-index: 10;
    padding: 0px 12px;
    line-height: 35px;
    transform: translateY(-50%);
    height: 35px;
    top: 14px;
    position: relative;
    border: none;
}

#basemodule .attributes .switch.awhite.unactive{
    color: var(--border-button-color-unactive);

}



#basemodule .attributes .rearm .switch.awhite {
    margin-right: 5px;
    z-index: 10;
}

#basemodule .attributes .switch.awhite:hover {
    border: none;
    animation:none;
}

#basemodule .attributes .switch.awhite:before {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    animation:none;
}
#basemodule .attributes .switch.awhite:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#basemodule .attributes .switch.awhite.unactive:hover{
    color: var(--border-button-color-unactive);
    animation: initial;
}

#basemodule .attributes .switch.awhite.unactive:hover:before {
    box-shadow: none;
    animation: none;
}


#basemodule .attributes .switch.awhite:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#basemodule .attributes .switch.awhite.unactive:after{
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);
}

#basemodule .attributes .switch.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#basemodule .attributes .switch.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

#weaponfitting {
    position: absolute;
    width: 1100px;
    height: 820px;

}

#weaponfitting:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}
#weaponfitting .title {
    z-index: 1;
}

#weaponfitting .weaponfittingscene{
    position: absolute;
    bottom: 1px;
    top: 1px;
    left: 1px;
    right: 1px;
}

#weaponfitting .weaponfittingscene .weaponfittingscene_helptext{
    position: absolute;
    top: 87px;
    left: 1px;
    right: 1px;
    color: white;
    text-align: center;
    z-index: -1;
    font-size: 12px;
    color: #dc9628;
    text-transform: uppercase;
}
#weaponfitting .attributes{
    position: absolute;
    top: 440px;
    right: 312px;
    left: 0px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background: linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
    height: 130px;
}
#weaponfitting .attributes table{
    padding: 0px;
    margin: 0px;
    width: 100%;
}
#weaponfitting .attributes th{
    color:rgb(0,255,255);
    padding:0px 10px;
    text-transform:uppercase;
    font-size:10px;
    font-weight:normal;
    text-align:right;
    width:50%;
}
#weaponfitting .attributes td{
    font-size:12px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    background-color:rgba(0,255,255,0.2);
}
#weaponfitting .ship_attributes{
    position: absolute;
    top: 440px;
    right: 0px;
    left: 345px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background: linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
    height: 128px;
}
#weaponfitting .ship_attributes table{
    padding: 0px;
    margin: 0px;
    width: 100%;
}
#weaponfitting .ship_attributes th{
    color: rgb(0,255,255);
    padding: 0px 10px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
    width: 40%;
}
#weaponfitting .ship_attributes td{
    font-size:12px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    background-color:rgba(0,255,255,0.2);
}
#weaponfitting .actions{
    position: absolute;
    top: 385px;
    right: 5px;
    left: 5px;
    height: 40px;
    text-align: center;
    padding: 5px 0px 5px 0px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

#weaponfitting #weapons {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 210px;
    z-index: 1;
}

#weaponfitting #weapons:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: -10px;
    bottom: 5px;
    background-color: rgb(17 17 24 / 95%);
    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-position: -10px 0px;
    background-size: cover;
}



#weaponfitting #weapons .item {
    display: block;
    position: relative;
    height: 140px;
    margin: 0px 5px 10px;
    width: 120px;
}

#weaponfitting #weapons .item.available {
    cursor: pointer;
}



#weaponfitting #weapons .item .thint {
    animation: highlited 1000ms linear infinite;
    left: calc(50% - -5px);
    right: unset;
    text-align: center;
    bottom: unset;
    top: 0px;
    width: unset;
    transform: translateX(-50%);
}

#weaponfitting #weapons .item .thint:before  {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    position: absolute;
    bottom: -20px;
    right: calc(50% - 10px);
    top: unset;
}

#weaponfitting #weapons .item .uinfo  {
    font-size: 12px;
    position: relative;
    background-color: var(--hud_invalid_background);
    color: var(--hud_invalid_text);
    padding: 5px 8px;
    text-align: center;
    width: auto;
    display: inline-block;
    margin: 43px 5px 0px 10px;
    text-transform: uppercase;
    z-index: 100;
    font-family: var(--fontFaimly_button);

}


#weaponfitting #weapons .item .qty {
    display: block;
    top: 8px;
    position: absolute;
    color: white;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 1px 7px;
    text-shadow: none;
    right: 8px;
    white-space: nowrap;
    text-shadow: var(--shadow_textfull);

}

#weaponfitting #weapons .item .name {
    position: absolute;
    bottom: 15px;
    left: 10px;
    /* right: 5px; */
    width: calc(100% - 20px);
    text-align: center;

    color: rgb(255,255,255);
    text-transform: uppercase;

    overflow: hidden;
    height: 40px;
    padding: 0px;
    box-sizing: border-box;
    display: table;

}
#weaponfitting #weapons .item .name span {
    display: table-cell;
    vertical-align: middle;
    color: white;
    text-shadow: var(--shadow_textfull);
    font-size: 13px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
}
#weaponfitting #weapons .item .w_backgroundimage {

    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
}




#weaponfitting #weapons .item .w_backgroundimage:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(2deg, rgb(29 31 35) 10%, rgba(0,0,0,0) 70%);
}



#weaponfitting #weapons .item.available:hover .w_backgroundimage:after {
    background-image: linear-gradient(2deg, rgb(49 51 55) 10%, rgba(0,0,0,0) 70%);
}


#weaponfitting #weapons .item:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(46 48 57);
    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
    box-shadow: 0px 0px 31px 6px #121212 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 55%) 25%, rgb(67 79 130 / 96%) 100%);
}




#weaponfitting #weapons .item img.info {
    width: 16px;
    height: 16px;
    text-align: center;
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto !important;
    padding: 0px;
    background: none !important;
    opacity: 0.5;
}
#weaponfitting #weapons .item .space {
    position: absolute;
    top: 97px;
    left: 5px;
    color: rgb(0,255,255);
    font-size: 10px;
    text-transform: uppercase;
}
#weaponfitting #weapons .item .space span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}

#weaponfitting #weapons .item img.info:hover {
    opacity: 1;
}
#weaponfitting #weapons .info {
    display: block;
    position: absolute;
    height: 30px;
    top: 55px;
    left: 5px;
    right: 5px;
    color: rgb(200,200,200);
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    text-transform: uppercase;
    animation: highlited 1000ms linear infinite;
}
#weaponfitting .weaponfittingscene .weaponinfo {
    position: absolute;
    right: 10px;
    top: 42px;
    height: 540px;
    width: 300px;

    font-size: 12px;

    z-index: 1000000;
}

#weaponfitting .weaponfittingscene .weaponinfo:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(10,10,10);
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    clip-path: var(--clip_csbox_addmodule_controls);
    z-index: -1;
}
#weaponfitting .weaponfittingscene .weaponinfo .close {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 6px;
    right: 5px;
    opacity: 0.5;

    background: url(ico/close-window-16.png) center no-repeat;
}

#weaponfitting .weaponfittingscene .weaponinfo .close {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 6px;
    right: 5px;
    opacity: 0.5;

    background: url(ico/close-window-16.png) center no-repeat;
}



#weaponfitting .weaponfittingscene .weaponinfo .wiactions {
    position: absolute;
    bottom: 15px;
    left: 10px;
    right: 0px;
    text-align: center;



}

#weaponfitting .weaponfittingscene .weaponinfo .wiactions .clicktoremove {
    color: #ff3b00;
    padding: 10px;
    font-size: 13px;
    animation:highlited 500ms linear infinite;

}

#weaponfitting .weaponfittingscene .weaponinfo .wname {
    position: absolute;
    top: 110px;
    left: 10px;
    right: 10px;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    text-align: left;

}

#weaponfitting .weaponfittingscene .weaponinfo .wname span {
    display: table-cell;
    vertical-align: middle;
}

#weaponfitting .weaponfittingscene .weaponinfo .wtype {
    position: absolute;
    top: 87px;
    left: 10px;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;

}

#weaponfitting .weaponfittingscene .weaponinfo .whypercorporation {
    position: absolute;
    top: 5px;
    left: 10px;
    color: black;
}


#weaponfitting .weaponfittingscene .weaponinfo .whypercorporation img {
    height: 20px;
}

#weaponfitting .weaponfittingscene .weaponinfo .wpower {
    position: absolute;
    top: 100px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wfight_durability {
    position: absolute;
    top: 125px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wfight_durability:before {
    content: 'DURABILITY';
}


#weaponfitting .weaponfittingscene .weaponinfo .wtes {
    position: absolute;
    top: 150px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wrange {
    position: absolute;
    top: 210px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .waccuracy {
    position: absolute;
    top: 280px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wattack {
    position: absolute;
    top: 350px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wrof {
    position: absolute;
    top: 425px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wtt {
    position: absolute;
    top: 450px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .wdefense {
    position: absolute;
    top: 425px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .dtype {
    position: absolute;
    top: 180px;
    left:90px;
    right: 5px;
    color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .whealthbar {
    position: absolute;
    top: 85px;
    right: 25px;
    width: 70px;
    height: 25px;

    overflow: hidden;
}

#weaponfitting .weaponfittingscene .weaponinfo .whealthbar .bar {
    position: absolute;
    top: 0px;
    left:0px;
    bottom: 0px;
    height: 5px;
    background-color: white;
}

#weaponfitting .weaponfittingscene .weaponinfo .whealthbar .txt {
    position: absolute;
    top: 8px;
    left:0px;
    right:0px;
    color: white;
    text-align: center;
    font-size: 12px;
}



#weaponfitting .weaponfittingscene .weaponinfo .subt {
    content: '';
    position: absolute;
    top: 0px;
    left: -80px;
    width: 70px;
    color: var(--hud_popiseck_gray_color);
    text-align: right;
    right: 0px;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px 5px 2px 0px;
    line-height: 14px;
}






#weaponfitting .weaponfittingscene .weaponinfo #weaponinfobuttons {
    position: absolute;
    bottom: 5px;
    right: 5px;
}


#weaponfitting .weaponfittingscene .weaponinfo .wimg {
    position: absolute;
    width: 70px;
    height: 70px;
    right: 25px;
    top: 10px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;

}

.barlittle {
    background-color: rgba(0,50,75,0.95);
    width: 7px;
    height: 7px;
    float: left;
    margin-left: 5px;
    opacity: 0.1;
    transform: scale(0.7);
    animation: move 1s infinite linear;

}

#block_1 {
    animation-delay: .4s;

}

#block_2 {
    animation-delay: .3s;

}

#block_3 {
    animation-delay: .2s;

}

#block_4 {
    animation-delay: .3s;

}

#block_5 {
    animation-delay: .4s;

}

#satwindow {
    position: absolute;
    width: 960px;
    height: 860px;
    z-index: 1;
    clip-path: var(--clip_desktop_boreholescene);
}

#satwindow:before{
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: rgb(8,8,18);
    clip-path: var(--clip_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px,center;
    background-size: cover;
    clip-path: var(--clip_desktop_boreholescene);
}


#satwindow .attributes{
    position: absolute;
    top: 65px;
    left: 30px;
    width: calc(100% - 60px);
    border-spacing: 0px;
}
#satwindow .attributes table{
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#satwindow .attributes th{
    color: var(--hud_tablecolor);
    padding: 0px;
    font-size: 12px;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    vertical-align: top;
    line-height: 12px;
    width: 15%;

}
#satwindow .attributes td{
    font-size: 13px;
    color: var(--hud_tablevaluecolor);
    padding: 5px;
    text-transform: uppercase;
    width: 35%;
    padding-left: 10px;
    text-align: right;
    background-image: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%), linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%), linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px, 100% 1px;
    background-position: bottom left, bottom right,bottom 1px center;
}

#satwindow .attributes .clicable{
    background-color: white;
    text-shadow: none;
    color: black;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
}

#satwindow .attributes .clicable:hover{
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservices{
    margin-top: 10%;
}

#satwindow .content{
    position: absolute;
    top: 110px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#satwindow .content > .info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translatey(-50%);
}

#satwindow .satservices .satservice{
    width: 200px;
    box-sizing: border-box;
}

#satwindow .satservices .satservice .satservice-title{
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    text-align: right;
    padding: 10px 15px 10px 30px;
    cursor: pointer;
    color: #afc2ed;
    position: relative;
    width: 200px;
    margin-bottom: 24px;

    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, #40509229 100%);
    background-repeat: no-repeat;
    background-size: 80% 100%,100% 1px,100% 1px;
    background-position: center right, top right, bottom right;
}

#satwindow .satservices .satservice.active .satservice-title:before {
    content: "";
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
    border-right: 7px solid #747a93;
}


#satwindow .satservices .satservice:not(.active) .satservice-title:hover{
    animation:blink 100ms linear 2 alternate;
}

#satwindow .satservices .satservice.active .satservice-title{
    background-image: linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, #40509229 100%), linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, #747a93 100%), linear-gradient(90deg, rgba(50, 50, 50, 0) 0%, #747a93 100%);
    background-repeat: no-repeat;
    background-size: 80% 100%,100% 1px,100% 1px;
    background-position: center right, top right, bottom right;
    text-shadow: 0px 0px 7px #7adaff;
}

#satwindow .satservices .satservice .satservice-html{
    display: none;
    position: absolute;
    top: 0px;
    left: 200px;
    right: 10px;
    bottom: 20px;

    border-left: 1px solid #747a93;
    overflow: hidden;
}


#satwindow .satservices .satservice .satservice-html .tinfo{
    position: absolute;
    top: 690px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-decoration: none;
    text-align: center;
    color: rgba(200, 200, 200, 1);
    text-transform: uppercase;
    line-height: 15px;
    font-size: 13px;
    z-index: 100;

}

#satwindow .satservices .satservice .satservice-html .tinfo strong{
    font-size: 13px;
}

#satwindow .satservices .satservice .satservice-html .tinfo strong.gold{
    color: gold;
}

#satwindow .satservices .satservice .satservice-html .tinfo.positive,
#satwindow .satservices .satservice .satservice-html .tinfo.negative{
    top: 130px;
    left: 29px;
    font-size: 10px;
    transform: none;
}


#satwindow .satservices .satservice .satservice-html .tinfo.positive{
    animation: highlited 1000ms linear infinite;
    color: #46bae8;
    text-shadow: 0 0 10px #0ac68a;
}

#satwindow .satservices .satservice .satservice-html .tinfo.negative{
    animation: highlited 500ms linear infinite;
    color: #FF5722;
    text-shadow: 0 0 10px #F44336;

}

#satwindow .satservices .satservice .satservice-html .tinfo.subline{
    top: 150px;
    font-size: 12px;
    color: silver;
    text-shadow: 0 0 10px silver;
    background: #8dafff0f;
    padding: 6px;
}

#satwindow .satservices .satservice.active .satservice-html{
    display: block;


}

#satwindow .satservices .satservice .satservice-html .scroll{
    display: block;


}

#satwindow .satservices .satservice .satservice-html .header{
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 35px);
    height: 120px;
    background: #101423;
    border-radius: 7px;
    z-index: 10;
}

#satwindow .satservices .satservice .satservice-html .header .function{
    display: block;
    position: absolute;
    top: 8px;
    left: 13px;
    right: 13px;
    font-size: 14px;
    text-align: left;
    color: #afc2ed;
}

#satwindow .satservices .satservice .satservice-html .header .function h5{
    padding: 0px;
    margin: 0px 0px;
    font-size: 17px;
    font-weight: normal;
}

#satwindow .satservices .satservice .satservice-html .header .function p{
    padding: 0px;
    margin: 3px 0px;
    font-size: 14px;
}

#satwindow .satservices .satservice .satservice-html .header .rechargechart-div {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    text-align: center;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher {
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 1;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher-elm {
    position: relative;
    color: white;
    margin-top: 10px;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher-elm input[type=range] {
    width: 75px;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher-elm.disabled {
    color: gray;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher .autorecharge-switcher-elm .switch {
    margin-bottom: 0px;
}

#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher .autorecharge-switcher-elm .popis {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
    /* height: 0px; */
    line-height: 16px;
    z-index: 1;
    white-space: nowrap;
    text-transform: uppercase;
}
#satwindow .satservices .satservice .satservice-html .header .autorecharge-switcher .autorecharge-switcher-elm .grayedd {
    color: gray;
    display: block;
}



#satwindow .satservices .satservice .satservice-html .header .rechargechart-div canvas {
    position: absolute;
    top: 0px;
    right: 0px;
}

#satwindow .satservices .satservice .satservice-html .header .rechargechart-div .rchbefore {
    display: block;
    position: absolute;
    top: 12px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    padding-left: 18px;
    color: white;
    white-space: nowrap;
}






#satwindow .satservices .satservice .satservice-html .crt{
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    overflow: hidden;
    box-shadow: inset 0px 0px 200px rgb(28 33 83 / 30%);
    border-radius: 5px;

}

#satwindow .satservices .satservice .satservice-html .crt .crt-inner{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    filter: drop-shadow(0px 0px 10px rgb(227 209 255 / 52%)) drop-shadow(0px 0px 2px rgb(57 109 255 / 95%));



}


#satwindow .satservices .satservice .satservice-html .crt .csatellite {
    display: block;
    position: absolute;


    background: rgba(0, 0, 100, 0.05);
    border-radius: 100%;
    background-image:
        linear-gradient(90deg, var(--cross-color) 0%, var(--cross-color) 100%),
        linear-gradient(0deg, var(--cross-color) 0%, var(--cross-color) 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px;
    background-position: center center;
}

#satwindow .satservices .satservice .satservice-html .crt .csatellite .label {
    position: absolute;
    color: white;
    top: 27px;
    left: 30px;
}

#satwindow .satservices .satservice .satservice-html .crt .circleradius{

    position: absolute;
    border-radius: 100%;
    border: 1px solid #ff000038;

}

#satwindow .satservices .satservice .satservice-html .crt .line{
    background-color: #ff000038;
}

#satwindow .satservices .satservice .satservice-html .crt .line.globaldeliverytrajectory{
    background-color: #c0c0c06e;
}

#satwindow .satservices .satservice .satservice-html .crt .line.objectdeliverytrajectory{
    background-color: yellow;
}


#satwindow .satservices .satservice .satservice-html .crt .destination {

    display: block;
    position: absolute;

    width: 20px;
    height: 20px;
    background: rgb(255 229 0 / 1%);
    border-radius: 100%;
    background-image:
        linear-gradient(90deg, var(--cross-color) 0%, var(--cross-color) 100%),
        linear-gradient(0deg, var(--cross-color) 0%, var(--cross-color) 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px;
    background-position: center center;
}

#satwindow .satservices .satservice .satservice-html .crt .destination .label {
    position: absolute;
    color: white;
    top: 27px;
    left: 30px;
}

#satwindow .satservices .satservice .satservice-html .crt .meritko{
    display: block;
    position: absolute;
    bottom: 35px;
    max-width: 400px;
    white-space: nowrap;
    box-sizing: border-box;
    right: 30px;

}

#satwindow .satservices .satservice .satservice-html .crt .meritko .label{
    display: block;
    color: white;
    text-align: center;
}

#satwindow .satservices .satservice .satservice-html .crt .meritko .kilometers{
    display: block;
    height: 5px;
    border-right: 1px solid white;
    border-left: 1px solid white;
    box-sizing: border-box;
    font-size: 0;
    white-space: nowrap;
    border-bottom: 1px solid white;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#satwindow .satservices .satservice .satservice-html .crt .meritko .kilometers .kilometer{
    display: inline-block;
    position: relative;
    height: 5px;



    box-sizing: border-box;
}

#satwindow .satservices .satservice .satservice-html .crt .meritko .kilometers .kilometer.dark{
    display: inline-block;
    position: relative;
    height: 5px;

    box-sizing: border-box;
}


#satwindow .satservices .satservice .satservice-html .crt .object{
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;

    box-sizing: border-box;
}



#satwindow .satservices .satservice .satservice-html .crt .object:hover .otitle{

    display: block;

}


#satwindow .satservices .satservice .satservice-html .crt .object .otitle{
    display: none;
    color: white;
    position: relative;
    top: 8px;
    left: 5px;
    right: unset;
    text-align: left;
    width: fit-content;
}

#satwindow .satservices .satservice .satservice-html .crt .object .otitle:before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;

}

#satwindow .satservices .satservice .satservice-html .crt .object .otitle .clicable{
    display: inline-block;
    background-color: white;
    text-shadow: none;
    color: black;
    cursor: pointer;
    text-align: left;
    position: relative;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

#satwindow .satservices .satservice .satservice-html .crt .object .otitle .clicable:hover{
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservices .satservice .satservice-html .crt .object .otitle .subtitle{
    display: block;
    padding: 4px 0px 0px;
    white-space: nowrap;
}

#satwindow .satservices .satservice .satservice-html .crt .object .image{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 12px;
    height: 12px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-image:url('ico/ico_object_32.png');

}

#satwindow .satservices .satservice .satservice-html .scroll{
    display: block;
    top: 160px;
    right: 20px;
}

#satwindow .satservices .satservice .satservice-html .headliner{
    display: block;
    grid-column: 1 / -1;
    color: #afc2ed;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 130px;
    left: 20px;
    right: 0px;
}



#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations {
    position: absolute;
    top: 150px;
    left: 0px;
    bottom: 0px;
    right: 0px;

}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station{
    position: absolute;
    display: inline-block;
    width: 250px;
    height: 250px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station .stitle{
    display: block;
    color: white;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);

}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station .stitle .clicable{
    display: inline-block;
    background-color: white;
    text-shadow: none;
    color: black;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station .stitle .clicable:hover{
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station .recharged-value{
    display: block;
    color: white;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    animation: highlited 1000ms linear infinite;
    color: #46bae8;
    font-size: 16px;
    text-shadow: 0 0 10px #0ac68a;
}

#satwindow .satservices .satservice.eu_recharge .satservice-html .recharged-stations .recharged-station .img{
    display: block;
    z-index: -1;
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#satwindow .satservices .satservice.cloak_fragments .satservice-html .cloakeds {
    position: relative;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, 150px);
    padding: 10px 20px 250px;
}

#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}

#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked .btitle{
    display: block;
    color: white;
    position: absolute;
    top: 8px;
    left: 5px;
    right: 30px;
    text-align: left;

}






#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked .btitle .clicable{
    display: inline-block;
    background-color: white;
    text-shadow: none;
    color: black;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked .btitle .clicable:hover{
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked .btitle .subtitle{
    display: block;
    padding: 4px 0px 0px;
    white-space: nowrap;
}

#satwindow .satservices .satservice.cloak_fragments .cloakeds .cloaked .image{
    display: block;
    z-index: -1;
    position: absolute;
    top: 53%;
    left: 50%;
    height: 70px;
    width: 70px;
    transform: translateX(-50%) translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#satwindow .satservices .satservice.borehole_control .satservice-html .boreholes,
#satwindow .satservices .satservice.borehole_recharge .satservice-html .boreholes{
    position: relative;
    display: grid;
    grid-gap: 14px;
    grid-template-columns: repeat(auto-fit, 160px);
    padding: 20px 10px 250px 20px;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}

#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole:before {
    content: '';
    display: block;
    position: absolute;
    left: -6px;
    right: -6px;
    top: -6px;
    bottom: -6px;
    background-image: linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color2) 0%, var(--border-itemlist-effect-color2) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color2) 0%, var(--border-itemlist-effect-color2) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%), linear-gradient(0deg, var(--border-itemlist-effect-color) 0%, var(--border-itemlist-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;

}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .actions,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .actions{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 11;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .btitle,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .btitle{
    display: block;
    color: white;
    position: absolute;
    top: 8px;
    left: 5px;
    right: 30px;
    text-align: left;

}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .btitle .clicable,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .btitle .clicable{
    display: inline-block;
    background-color: white;
    text-shadow: none;
    color: black;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    padding: 2px 6px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .btitle .clicable:hover,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .btitle .clicable:hover{
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .btitle .subtitle,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .btitle .subtitle{
    display: block;
    padding: 5px 0px 0px;
    white-space: nowrap;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .image,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .image{
    display: block;
    z-index: -1;
    position: absolute;
    top: 53%;
    left: 50%;
    height: 70px;
    width: 70px;
    transform: translateX(-50%) translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .battery,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .battery{
    top: 100px;
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}



#satwindow .satservices .satservice.borehole_control .boreholes .borehole .battery_charged.barbox,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .battery_charged.barbox{
    display: block;
    position: absolute;
    bottom: 0px;
    left: 20px;
    right: 20px;
    /* margin-top: 26px; */
    text-align: center;
    /* margin-left: 17px; */
    height: 7px;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_sexp_barbckg_color);
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .battery_charged .bar,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .battery_charged .bar{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--hud_sexp_bar_color);
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .battery_charged .label,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .battery_charged .label{
    position: absolute;

    bottom: 13px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_sexp_text_color);
}



#satwindow .satservices .satservice.borehole_control .boreholes .borehole .richness,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .richness{
    text-align: right;
    position: absolute;
    top: 25px;
    right: 5px;

}
#satwindow .satservices .satservice.borehole_control .boreholes .borehole .richness span,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .richness span{
    vertical-align: middle;
}



#satwindow .satservices .satservice.borehole_control .boreholes .borehole .richness .rich,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .richness .rich{
    margin: 0px 0px 0px 5px;
    vertical-align: middle;
    color: #b1acac;
    position: relative;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .richness .rich .txt,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .richness .rich .txt{
    padding: 0px 4px;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .rich:hover > .subtext,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .rich:hover > .subtext{
    display: block;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .bhprocess,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .bhprocess{
    text-align: left;
    position: absolute;

    left: 5px;
    right: 5px;
    bottom: 40px;
    color: gray;
    font-size: 12px;

}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .bhprocess .progressbar,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .bhprocess .progressbar{
    position: absolute;
    top: 10px;
    color: white;
    height: 7px;
    left: 0px;
    background-color: rgb(63,69,73);
    overflow: hidden;
    right: 0px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole.idle .bhprocess .progressbar,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole.idle .bhprocess .progressbar{
    background-color: rgb(40,62,95,0.98);
    border-left: 2px solid rgba(255,255,255,0.1);
    border-right: 2px solid rgba(255,255,255,0.1);
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .bhprocess .progressbar .bar,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .bhprocess .progressbar .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgb(255,255,255);
    top:0px;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole .bhprocess .resttime,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole .bhprocess .resttime{
    color: white;
    left: 1px;
    position: absolute;
    white-space: nowrap;
    top: 21px;
    text-transform: initial;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole.idle .bhprocess .resttime,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole.idle .bhprocess .resttime{
    position: absolute;
    top: 22px;
    white-space: nowrap;
    color: #b1acac;
}

#satwindow .satservices .satservice.borehole_control .boreholes .borehole.complete .bhprocess .resttime,
#satwindow .satservices .satservice.borehole_recharge .boreholes .borehole.complete .bhprocess .resttime{
    animation: highlited 1000ms linear infinite;
    position: absolute;
    top: 22px;
    white-space: nowrap;
    color: white;
}

#cstationbox #cs-conf .sexp .sexp_box .zbefore {
    display: block;

    position: absolute;

    bottom: 13px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_sexp_text_color);
    white-space: nowrap;
}





#satwindow .satscene{
    position: absolute;
    bottom: 1px;
    top: 1px;
    left: 1px;
    right: 1px;

    background-color: rgb(0 0 0);




}

#satwindow .satservice.locality_photo .actions{
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    color: white;
    z-index: 100;

}

#satwindow .satservice.locality_photo .actions .photo{
    display: inline-block;
    text-shadow: none;
    color: #b9dbff;
    /* white-space: nowrap; */
    padding: 6px 10px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    margin: 2px;
    max-width: 100px;
    position: relative;
    line-height: 15px;
    text-align: center;
    font-size: 12px;
}


#satwindow .satservice.locality_photo .actions .photo:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#satwindow .satservice.locality_photo .actions .photo:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#satwindow .satservice.locality_photo .actions .photo:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#satwindow .satservice.locality_photo .actions .photo.selected{
    animation: highlited 500ms linear infinite;
}


#satwindow .satscene .usetelescope{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
    background: rgb(0,0,0) url('background-grid.png');
    color: rgba(255,255,255,0.8);
    text-align: center;
    line-height: 425px;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px rgb(0,255,255);
}
#satwindow .satscene .usetelescope:hover{
    color: rgba(255,255,255,1);
}
#satwindow .satscene .effects{
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 1;
    z-index: 1;
}
#satwindow .satscene .effects .info{
    top: calc(50% - 30px);
}

#satwindow .satscene .effects:after{
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: url('effects/sat_effect_cross.png') center bottom repeat;
    opacity: 0.1;
}

#satwindow .satscene .effects .wait{
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: black;
    color: white;
}
#satwindow .satscene .effects .wait .txt{
    display: block;
    position: absolute;
    top: calc(50% - 50px);
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 10px;
}
#satwindow .satscene .effects .wait .bar {
    display: block;
    position: absolute;
    top: calc(50% - 30px);
    left: 30%;
    right: 30%;
    text-align: center;
    z-index: 1;
    padding-top: 13px;
    font-size: 10px;
}
#satwindow .satscene .effects .wait .bar .perc {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 5px;
    width: 0%;
    background-color: rgba(255,255,255,1);
    z-index: -1;
}

#satwindow .satscenecontrols div{
    position: absolute;
    height: 25px;
    width: 25px;
    color: black;
    background-color: white;
    line-height: 25px;
    text-align: center;
    /* border-radius: 25px; */
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    font-size: 20px;
}

#satwindow .satscenecontrols div:hover{
    animation: blink 100ms linear 2 alternate;
}
#satwindow .satscenecontrols .top{
    top: 0px;
    left: 30px;
}
#satwindow .satscenecontrols .left{
    top: 30px;
    left: 0px;
}
#satwindow .satscenecontrols .right{
    top: 30px;
    left: 60px;
}
#satwindow .satscenecontrols .bottom{
    top: 60px;
    left: 30px;
}
#satwindow .satscenecontrols .zoomin{
    top: 100px;
    left: 10px;
}
#satwindow .satscenecontrols .zoomout{
    top: 100px;
    left: 50px;
}
#satwindow .satscenecontrols .center{
    top: 30px;
    left: 30px;
}
#satwindow .satscenecontrols {
    position: absolute;
    height: 150px;
    bottom: 20px;
    left: 40px;
    display: none;
    z-index: 2;

}
#satwindow canvas {

}



#satwindow .attributes_scanner{
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 345px;
    color: white;
    text-align: left;
    border-spacing: 0px;
    background: linear-gradient(to right,rgba(0,255,255,0.2) 0%,rgba(0,0,0,0) 100%);
    height: 128px;
}

#satwindow .satscene .enemyshipsceneinfos{
    position: absolute;
    bottom: 16px;
    right: 25px;
    font-size: 10px;
    color: rgba(150,150,150,0.5);
    z-index: 1;
    text-transform: uppercase;
    text-align: right;
    line-height: 16px;
    font-family: var(--fontFaimly_header);
}

#satwindow .title {

    z-index: 2;
}

#satwindow .attributes_scanner table{
    padding: 0px;
    margin: 0px;
    width: 100%;
}
#satwindow .attributes_scanner th{
    color: rgb(0,255,255);
    padding: 0px 10px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
    width: 40%;
}
#satwindow .attributes_scanner td{
    font-size:12px;
    color:rgba(0,255,255,0.5);
    padding-left:10px;
    background-color:rgba(0,255,255,0.2);
}

#satwindow .durbility {
    position: absolute;
    bottom: 85px;
    /* right: 25px; */
    z-index: 2;
    left: 15px;
    text-align: center;
    width: 180px;
}

#satwindow .durbility .durbility-time {
    color: #151423;
    font-size: 31px;
    letter-spacing: -1px;
    line-height: 31px;
    padding: 0px 8px;
}


#satwindow .bactions {
    position: absolute;
    bottom: 45px;
    /* right: 25px; */
    z-index: 2;
    left: 15px;
    text-align: center;
    width: 180px;
}

#satwindow .bactions .removelink{
    color: white;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    display: inline;
}

#satwindow .bactions .removelink:hover{
    text-decoration: none;
    animation: blink 100ms linear 2 alternate;
}

#removesatellite,
#boreholeremove{
    position: absolute;
    height: 320px;
    width: 500px;
    z-index: 999999;
}

#removesatellite:before,
#boreholeremove:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}

#removesatellite .txt,
#boreholeremove .txt{
    position: absolute;
    left: 50px;
    right: 50px;
    text-align: center;
    top: 85px;


}


#removesatellite .txt h2,
#boreholeremove .txt h2{
    font-weight: normal;
    font-size: 22px;
    color: white;
    margin: 0px 0px 25px;
    font-family: var(--fontFaimly_header);
    line-height: 27px;
}
#removesatellite .txt p,
#boreholeremove .txt p{

    color: white;
    font-size: 14px;
}

#removesatellite .confirm,
#boreholeremove .confirm{
    position: absolute;
    left: 50px;
    right: 50px;
    text-align: center;
    bottom: 55px;
}

#satwindow > .actions {
    position: absolute;
    top: 70px;
    left: 15px;

    width: 180px;
    z-index: 2;
}
#satwindow > .actions .reports .photo {
    background-color: white;
    margin: 3px 0px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    clip-path: var(--clip_whitelink);

}

#satwindow > .actions .reports .photo:hover {
    animation: blink 100ms linear 2 alternate;
}

#satwindow > .actions .reports .photo.selected{
    animation: highlited 1000ms linear infinite;
}

#satwindow .infos{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
}
#satwindow .infos .info{

    top: calc(50% - 80px);

}

#boreholeConstructor {
    position: absolute;
    width: 640px;
    height: 550px;
}
#boreholeConstructor .bc_scene{
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    background: rgb(0,0,0);
}
#boreholeConstructor:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 1;
}
#boreholeConstructor:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}





#showwindowgrabobject {
    position: absolute;
    top: 80px;
    height: calc(100% - 160px);
    width: 728px;
}


#showwindowgrabobject:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}
#showwindowgrabobject .ownerinfo {
    position: absolute;
    top: 65px;
    width: 200px;
    height: 198px;
    box-sizing: border-box;
    text-transform: uppercase;


}

#showwindowgrabobject .ownerinfo .oname {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    color: black;
    background-color: white;

    font-size: 20px;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    padding: 5px 10px;
}

#showwindowgrabobject .ownerinfo .ownership {
    position: relative;
    color: white;
    text-align: center;
    padding: 8px 2px;
    font-size: 12px;
}




#showwindowgrabobject .ownerinfo .objectimage {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
}


#showwindowgrabobject .ownerinfo .objectimage.container300 {
    background-image: url('./barrels/300.jpg');
}


#showwindowgrabobject .ownerinfo .objectimage.container500 {
    background-image: url('./barrels/500.jpg');
}


#showwindowgrabobject .ownerinfo .objectimage.container1000 {
    background-image: url('./barrels/1000.jpg');
}


#showwindowgrabobject .ownerinfo .objectimage.container2000 {
    background-image: url('./barrels/2000.jpg');
}


#showwindowgrabobject .ownerinfo .objectimage.container4000 {
    background-image: url('./barrels/4000.jpg');
}


#showwindowgrabobject .filterlist {
    position: absolute;
    left: 10px;
    top: 65px;
    width: 190px;
    bottom: 0px;
    color: rgba(255,255,255,0.8);
    font-size: 10px;
    text-transform: uppercase;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,0.5);
    padding-top: 200px;
}
#showwindowgrabobject .filterlist .filter {
    position: relative;
    padding: 3px 42px 3px 10px;
    text-align: right;
    font-family: var(--fontFaimly_button);
    line-height: 20px;
    min-height: 20px;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 12px;
    color: rgba(200,200,200,1);
    background-color: rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);

}

#showwindowgrabobject .filterlist .filter .qty {
    position: absolute;
    display: block;
    height: 26px;
    top: 3px;
    right: 0px;
    background-color: rgba(255,255,255,0.4);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 5px;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 12px;
    min-width: 35px;
    color: black;
    height: 20px;
    min-height: initial;
    text-align: right;
    font-family: var(--fontFaimly_button);
}

#showwindowgrabobject .filterlist .filter .qty.neg {
    padding: 0px 5px;
    color: rgb(100,100,100);
}

#showwindowgrabobject .filterlist .filter:not(.active):hover {
    animation: blink 100ms linear 2 alternate;
    background-color: #ffbc00;
    color: black;
}

#showwindowgrabobject .filterlist .filter.active {
    color: black;
    background-color: rgb(255,255,255);

}



#showwindowgrabobject .scrollitems {
    position: absolute;
    left: 210px;
    top: 65px;
    right: 15px;
    bottom: 55px;
    overflow-y: scroll;

    padding-right: 5px;

}

#showwindowgrabobject .scrollitems .itemlist  {


}


#showwindowgrabobject .itemlist .unauthorized_blur {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
}

#showwindowgrabobject .itemlist .unauthorized_blur span {
    display: block;
    padding: 155px 20px 20px;
    box-sizing: border-box;

    font-size: 14px;
    color: white;

}


#showwindowgrabobject .itemlist .unauthorized_blur button {


}


#showwindowgrabobject .itemlist .info {
    padding: 60px 10px;
    text-align: center;
    animation: highlited 1000ms linear infinite;
}



#showwindowgrabobject .itemlist .item .thint  {
    animation: highlited 1000ms linear infinite;
    left: 21px;
    text-align: center;
    bottom: 85px;
    top: unset;
    right: unset;
    width: 72px;
}

#showwindowgrabobject .itemlist .item .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid #ffbc00;
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}


#showwindowgrabobject .itemlist .item .img {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 20px;
    left: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

#showwindowgrabobject .itemlist .item.astronaut .img {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 20px;
    left: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150%;
}

#showwindowgrabobject .itemlist .item .img:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-left: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    z-index: 10
}
#showwindowgrabobject .itemlist .item .img:after {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 10px;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
#showwindowgrabobject .itemlist .item:hover .img:before {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}
#showwindowgrabobject .itemlist .item:hover .img:after {
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}


#showwindowgrabobject .itemlist .item .name {
    display: table;
    position: absolute;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    text-align: center;

    font-size: 10px;
    color: white;

}

#showwindowgrabobject .itemlist .item .name span {
    display: table-cell;
    vertical-align: bottom;
}



#showwindowgrabobject .itemlist .item .qty {
    display: block;
    position: absolute;
    bottom: -3px;
    left: 5px;
    right: 5px;
}

#showwindowgrabobject .itemlist .item .qty span {
    display: inline-block;
    margin: 0px auto;
    line-height: 16px;
    color: black;
    background-color: white;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 0px 5px;
    text-shadow: none;

}



#showwindowgrabobject .commands {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.battle_roundlabel {
    position: absolute;
    top: 45px;
    width: 350px;
    right: 0px;
    padding: 0px 10px;
    color: white;
    z-index: 99999999;
    text-align: right;
    text-transform: uppercase;

    font-size: 26px;
    background: linear-gradient(to right,rgba(10, 86, 136,0.0) 0%,rgba(10, 86, 136,0.8) 100%);
}

.battle_actions{
    position:absolute;
    top:45px;
    width: 50px;
    left:0px;
    z-index:99999999;
}


.battle_actions .rounds{
}
.battle_actions .rounds .round{
    position: relative;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 39px;
    margin: 6px 0px;
    box-sizing: border-box;
    padding: 5px 0px 5px 14px;
    /* border: 1px solid rgb(10,86,136); */
    background-color: rgba(10, 86, 136, 0.4);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    /*  */
    text-transform: uppercase;
}

.battle_actions .rounds .round:hover{
    color: rgb(255,255,255)
}

.battle_actions .rounds .round:before{
    content: '';
    position: absolute;
    top: 5px;
    width: 5px;
    bottom: 5px;
    left: 0px;
    background-color: rgba(255,255,255,0.2);
    transition: linear 0.3s;
}

.battle_actions .rounds .round:before:hover{
    background-color: rgb(67,237,248);
}
.battle_actions .rounds .round.active:before{
    background-color: rgb(67,237,248);
    box-shadow: inset 0px 0px 25px rgba(67,237,248,1), 0px 0px 25px rgba(67,237,248,1);
}

.battle_log{
    position: absolute !important;
    top: 100px;
    bottom: 10px;
    z-index: 999999999;
    right: 0px;
    width: 350px;

}
.battle_log .logtext{
    box-sizing: border-box;
    position: relative;
    margin: 0px;
    padding: 5px 26px 5px 5px;
    cursor: pointer;
    transition: color 0.2s linear,background 0.8s linear;
}

.battle_log .logtext.thidden{
    visibility: hidden;
}

.battle_log .logtext .atitle{
    box-sizing: border-box;
    position: relative;
    text-align: right;
    color: rgba(255,255,255,0.2);
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s linear,background 0.8s linear;
    text-transform: uppercase;
}

.battle_log .logtext .ascname{
    text-align: left;
    color: rgba(255,255,255,0.2);
    font-size: 10px;
    position: absolute;
    top: 4px;
    left: 0px;
}

.battle_log .logtext .ahtml{
    display: none;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: right;
    padding: 15px 0px;
}

.battle_log .logtext .bb_ebn{
    color: rgba(255,0,0,0.9);


}

.battle_log .logtext .bb_weapon{
    color: rgba(255,255,255,0.8);

}

.battle_log .logtext .bb_module{
    color: rgba(0,255,255,0.8);


}

.battle_log .logtext .bb_value{
    color: rgb(6,213,255);

    font-size: 12px;
    padding: 0px 5px;
    /* letter-spacing: 1px; */
    /*  */

}

.battle_log .logtext .bb_counter{
    padding: 0px 5px;
    display: block;
    font-size: 9px;

    color: rgba(6,213,255,0.5);
}




.battle_log .logtext .bb_cc{
    color: white;

    font-size: 12px;
    padding: 0px 5px;
    /* letter-spacing: 1px; */
    /*  */
}

.battle_log .logtext .bb_dt{
    color: rgba(0,255,255,0.9);
    font-style: italic;
    font-size: 12px;

}

.battle_log .logtext .ahtml table{
    width: 100%;
    padding: 0px;
    border-spacing: 0px;
}

.battle_log .logtext .ahtml table th{
    text-align: right;
    width: 20%;
    color: rgb(0,130,156);

    border-bottom: 1px solid rgba(0,85,102,0.4);
    padding: 5px;
    line-height: 12px;
}

.battle_log .logtext .ahtml table td{
    color: rgb(6,213,255);
    border-bottom: 1px solid rgba(0,85,102,0.4);
    text-transform: uppercase;
    line-height: 12px;

    padding: 5px;
    padding-left: 10px;
    text-align: left;
}

.battle_log .logtext.itype11:before{
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    opacity: 0.5;
    width: 16px;
    right:3px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    transition: opacity 0.2s linear;
}

.battle_log .logtext.itype10:before{
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    opacity: 0.5;
    width: 16px;
    right:3px;
    height: 16px;
    background-image: url(ico/info-2-128.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    transition: opacity 0.2s linear;
}

.battle_log .logtext.itype8:before{
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    opacity: 0.5;
    width: 16px;
    right:3px;
    height: 16px;
    background-image: url(ico/warning-6-128.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    transition: opacity 0.2s linear;

}

.battle_log .logtext.itype5:before{
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    opacity: 0.5;
    width: 16px;
    right:3px;
    height: 16px;
    background-image: url(ico/warning-power-128.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    transition: opacity 0.2s linear;

}


.battle_log .logtext:hover{
    background: linear-gradient(to right,rgba(0,53,64,0) 0%,rgba(0,53,64,0.8) 100%);
}

.battle_log .logtext:hover .atitle{
    color: rgba(255,255,255,1);

}

.battle_log .logtext:hover:before{
    opacity: 1;
    background-size: 16px;
}

.battle_log .logtext:hover .ahtml{
    display: block;
}

#corporation .stations .cards-applyed{
    position: absolute;
    padding: 0px;
    text-align: left;
    box-sizing: border-box;
    top: 30px;
}

#corporation .stations .cards-applyed .card{
    height: 0px;
    display: inline-block;
    width: 57px;
    position: relative;
}

#corporation .stations .cards-applyed .card .inner {
    transform: scale(0.38);
    left: -31px;
    top: -60px;

}

#corporation .stations .cards-applyed .card:hover{
    z-index: 1000;

}

#corporation .stations .cards-applyed .card:hover .inner {
    transform: scale(0.6);
    left: -31px;
    top: -60px;
    transition: .05s;

}

#corporation .stations .cards-applyed .card:hover .inner .bar-box{
    position: absolute;
    height: 7px;
}

.prembanner {
    display: block;
    position: relative;
    width: 70%;
    min-width: 290px;
    max-width: 380px;
    padding: 30px 40px 75px;
    margin: 10px auto;
    font-size: 14px;
    color: gray;
    text-shadow: var(--shadow_textfull);
    border: 1px solid var(--border-color);
    font-family: var(--fontFaimly_header);
    text-align: center;
}
.prembanner:before {
    content: '';
    display: block;
    position: absolute;
    line-height: 25px;
    padding-left: 46px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-shadow: none;
    padding-left: 63px;
    padding-top: 26px;
    text-align: left;
    color: white;
    font-size: 13px;
    background-image: url(prembanner_icon.png),linear-gradient(180deg, rgba(0,0,0,0) -82%, rgba(0,0,0,0.6) 72%),url(prembanner_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 40px,cover,cover;
    background-position: 16px 20px, top,top;
    z-index: -1;
}

.prembanner .link {
    color: #ffbc00;
    display: block;
    line-height: 20px;
    cursor: pointer;
    margin-bottom: 7px;

    font-size: 24px;
    text-shadow: var(--shadow_textfull);
}

.prembanner .link:hover {
    animation:blink 100ms linear 2 alternate;
}

.prembanner .buy {
    display: inline-block;
    position: absolute;

    left: calc(50%);
    transform: translateX(-50%);
    bottom: 30px;


}

.prembanner .buy:hover {
    animation:blink 100ms linear 2 alternate;
}



#csdesktopaction .building {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px;


    color: white;
    text-shadow: none;
    height: auto;

    max-height: 163px;
    overflow-y: scroll;


}
#csdesktopaction .buildingb {
    padding: 5px 5px 10px 5px;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);
}
#csdesktopaction .buildingb .cinfo {
    margin-left: 85px;
}
#csdesktopaction .buildingb .cinfo .cname {
    display: block;

    font-size: 13px;
    padding: 5px 0px 3px 0px;
    text-transform: uppercase;
}
#csdesktopaction .buildingb .cinfo .ctitle {
    display: block;

}

#csdesktopaction .buildingb .img {
    position: absolute;
    top: 0px;
    left: 5px;
    width: 75px;
    bottom: 0px;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    filter: brightness(2) grayscale(1) invert(0);
}


#csdesktopaction .buildingb .progressbarbcg {
    margin-left: 85px;
}



#csdesktopaction .building .progressbarbcg{
    position: relative;
    height: 7px;
    margin-top: 4px;
    background-color: black;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#csdesktopaction .building .progressbar{
    position: relative;
    height: 7px;
    background-color: var(--hud_construction_barbckg_color);

    box-sizing: border-box;
}
#csdesktopaction .building .progressbar .bar{
    position: absolute;
    background-color: var(--hud_construction_bar_color);
    width: 1px;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

#csdesktopaction .preview {
    position: absolute;
    top: 10px;
    left: -180px;
    right: 61%;
    height: 350px;
    z-index: -100;
}

#csdesktopaction .preview .previewimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    filter: brightness(2) grayscale(1) invert(0);
    animation: blink 100ms linear 2 alternate;
}

#csdesktopaction .construction {
    text-transform: uppercase;
    line-height: 13px;
    background-color: rgba(255,255,255,0.8);
    color: black;
    text-shadow: none;
    height: auto;
}

#csdesktopaction .buyouts {
    padding: 6px 8px 4px 8px;
    height: auto;
    background: #151535;
    margin: 8px 5px 7px 5px;
    border-radius: 0px;
}

#csdesktopaction .buyouts .buyouttitle {
    font-size: 14px;
    /* text-transform: uppercase; */
    padding: 0px 0px 3px 0px;
    color: #6f748f;
    text-align: left;
}

#csdesktopaction .buyouts .buyout {
    padding: 5px 0px;
    padding-left: 25px;
    position: relative;
    min-height: 20px;
}

#csdesktopaction .buyouts .buyout:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
    background-repeat: no-repeat;
    background-size: 74% 1px;
    background-position: bottom 5px center;
}
#csdesktopaction .buyouts .buyout .miniature {
    position: absolute;
    top: calc(50% - 8px);
    left: 0px;
}

#csdesktopaction .buyouts .buyout .number {
    color: rgb(255 191 0);
    text-transform: uppercase;
}

#csdesktopaction .buyouts .buyout .price {
    color: rgb(255, 255, 255, 0.6);
    font-size: 12px;
    background-color: #222a5b;
    padding: 2px 4px;
    border-radius: 2px;
}

#csdesktopaction .construction .constructionitem {
    position: relative;
    height: 52px;
}

#csdesktopaction .construction .constructionitem .cinfo {
    position: absolute;
    top: 5px;
    left: 5px;
    font-family: var(--fontFaimly_button);
}

#csdesktopaction .construction .constructionitem .completeqty {
    position: absolute;
    top: 20px;
    left: 5px;
    font-family: var(--fontFaimly_button);
}

#csdesktopaction .construction .constructionitem .completeqty .have,
#csdesktopaction .construction .constructionitem .completeqty .canhave{

}


#csdesktopaction .construction .constructionitem .completeqty .canhave{
    display: none;
}

#csdesktopaction .construction .constructionitem .progressbar{
    position: absolute;
    top: 35px;
    left: 5px;
    right: 5px;
    height: 7px;
    margin-top: 4px;
    background-color: gray;
    border-left: 2px solid rgb(100,100,100);
    border-right: 2px solid rgb(100,100,100);
}

#csdesktopaction .construction .constructionitem .progressbar .havebar,
#csdesktopaction .construction .constructionitem .progressbar .canhavebar{
    position: absolute;
    background-color: black;
    width: 1px;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

#csdesktopaction .construction .constructionitem .progressbar .canhavebar{
    display: none;
}

#csdesktopaction .construction .constructionitem .deploy{
    position: absolute;
    top: 7px;
    right: 5px;
    border: 1px solid black;
    color: black;

    width: 60px;
    line-height: 23px;
    font-size: 12px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    box-sizing: border-box;
}

#csdesktopaction .construction .constructionitem .deploy .thint{
    top: -3px;
}

#csdesktopaction .construction .constructionitem.deployable{
    cursor: pointer;
}

#csdesktopaction .construction .constructionitem.deployable:hover{
    background-color: black;
    color: white;
}


#csdesktopaction .construction .constructionitem.deployable:hover .deploy{
    background-color: white;
    animation: blink 100ms linear 2 alternate;
}


#csdesktopaction .construction .constructionitem.deployable:hover .progressbar {
    background-color: rgba(255,255,255,0.4);
}

#csdesktopaction .construction .constructionitem.deployable:hover .progressbar .havebar{
    background-color: white;
    z-index: 1;

}

#csdesktopaction .construction .constructionitem.deployable:hover .progressbar .canhavebar{
    display: block;
    background-color: rgb(180,130,0);
    animation: highlited 1000ms linear infinite;
}


#csdesktopaction .construction .constructionitem.deployable:hover .completeqty .have{
    display: none;
}
#csdesktopaction .construction .constructionitem.deployable:hover .completeqty .canhave{
    display: block;
}





.caontainer_box {
    display: inline-block;
    width: 80px;
    height: 112px;
    margin: 0px 2px;

    text-align: center;
    position: relative;
    box-sizing: border-box;
    background-color: rgb(150,150,150);

    clip-path: var(--clip_borehole_container);
}
.caontainer_box:before {
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-color: black;
    content: '';


    clip-path: var(--clip_borehole_container);
}
.caontainer_ico {
    width: 60px;
    height: 60px;
    margin: 35px auto 0px;

    text-align: center;
    position: relative;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.caontainer_ico:before {
    content: '';
    display: block;
    position: absolute;
    color: white;
    top: -18px;
    left: 0px;
    right: 0px;
    bottom: 0px;

}
.caontainer_ico.t2000 {
    background-image: url('./barrels/2.jpg');
}
.caontainer_ico.t2000:before {
    content: '2 t';
}
.caontainer_ico.t4000 {
    background-image: url('./barrels/4.jpg');
}
.caontainer_ico.t4000:before {
    content: '4 t';
}
.caontainer_ico.t8500 {
    background-image: url('./barrels/8-5.jpg');
}
.caontainer_ico.t8500:before {
    content: '8.5 t';
}
.caontainer_ico.t15000 {
    background-image: url('./barrels/15.jpg');
}
.caontainer_ico.t15000:before {
    content: '15 t';
}
.caontainer_ico.t40000 {
    background-image: url('./barrels/40.jpg');
}
.caontainer_ico.t40000:before {
    content: '40 t';
}




.caontainer_ico .caontainer_ico_weight {
    display: block;
    position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.caontainer_ico .caontainer_ico_weight .caontainer_ico_ore {
    display: block;
    position: absolute;
    top:0px;
    left: 8px;
    width: 16px;
    bottom: 0px;
    background-color: rgba(181,158,149,0.7);
}
.caontainer_ico .caontainer_ico_weight .caontainer_ico_ice {
    display: block;
    position: absolute;
    top:0px;
    right: 8px;
    width: 16px;
    bottom: 0px;
    background-color: rgba(0,122,202,0.7);

}

.caontainer_ico .caontainer_ico_weight .caontainer_ico_ice .catext,
.caontainer_ico .caontainer_ico_weight .caontainer_ico_ore .catext {
    display: block;
    position: absolute;
    top: 5px;
    right: 0px;
    left: 0px;
    /* bottom: 24px; */
    transform: rotate(90deg);
    text-align: right;

    white-space: nowrap;
}

.box-effects {
    position: absolute;
    top: 0px;
    left: 0px;
}

.box-effects .node-1 {

}

.box-effects .node-1:after {

}

.box-effects .node-2 {

}

.box-effects .node-3 {

}




.box-effects .node-4 {

}





#foundcs {
    position: absolute;
    width: 1005px;
    height: 90%;
}
#foundcs:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}

#foundcs .title {
    z-index: 1;
}

#foundcs .attributes {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 290px;
}
#foundcs .buttons  {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 290px;
}
#foundcs .buttons button {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
}
#foundcs .attributes .whitebox{
    background: white;
    color: black;
    padding: 10px 5px;
}
#foundcs .attributes .whitebox .newname {
    text-transform: uppercase;
    font-size: 45px;
    letter-spacing: -1px;
    text-align: center;
    padding: 0px 0px 9px;
}

#foundcs .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);

}
#foundcs .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#foundcs .attributes table td {
    padding: 5px 10px;
}
#foundcs .attributes table td.radio {
    width: 10px;
}
#foundcs .foundcs_err {
    position: absolute;
    top: 150px;
    height: 45px;
    right: 0px;
    left: 0px;

    padding: 20px 0px;
    border-spacing: 0px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,1);

    border: none;

    animation: highlited 1000ms linear infinite;

}
#foundcs .attributes table td .small {
    font-size: 13px;
}
#foundcs .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#foundcs .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#foundcs .segments .darkbox {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 300px;
    background: rgba(0,0,0,.7);
}
#foundcs .segments .commander {
    position: absolute;
    top: 80px;
    left: 10px;
    right: 320px;
    text-align: center;
    height: calc(50% - 45px);
}
#foundcs .segments .service {
    position: absolute;
    bottom: 0px;
    left: 10px;
    right: 320px;
    text-align: center;
    height: calc(50% - 45px);
}
#foundcs .segments .commander .controls,
#foundcs .segments .service .controls {
    position: absolute;
    top: calc(50% - 10px);
    left: 290px;
    right: 10px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}
#foundcs .segments .commander .controls .left,
#foundcs .segments .commander .controls .right,
#foundcs .segments .service .controls .left,
#foundcs .segments .service .controls .right {
    position: absolute;
    top: 0px;
    width: 30px;
    text-align: center;
    height: 30px;
    cursor: pointer;
}
#foundcs .segments .commander .controls .left,
#foundcs .segments .service .controls .left {
    left: 0px;
    background: url(./ico/arrow-88-32.png) center no-repeat;
    background-size: 16px;
}
#foundcs .segments .commander .controls .left.disabled,
#foundcs .segments .service .controls .left.disabled{
    display: none;
}
#foundcs .segments .commander .controls .right,
#foundcs .segments .service .controls .right {
    right: 0px;
    background: url(./ico/arrow-24-32.png) center no-repeat;
    background-size: 16px;
}
#foundcs .segments .commander .controls .right.disabled,
#foundcs .segments .service .controls .right.disabled {
    display: none;
}
#foundcs .segments .commander .img,
#foundcs .segments .service .img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#foundcs .segments .commander .datas,
#foundcs .segments .service .datas {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 10px;
    left: 35px;
    font-size: 13px;
    color: white;
    text-align: right;
    text-transform: uppercase;
    width: 280px;
    text-shadow: var(--shadow_textfull);
}
#foundcs .segments .commander .datas .name,
#foundcs .segments .service .datas .name {
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    white-space: nowrap;
}
#foundcs .segments .commander .datas .desc,
#foundcs .segments .service .datas .desc {
    padding-top: 5px;
    font-size: 14px;
    color: white;
    text-align: left;
    text-transform: uppercase;
}
#foundcs .segments .commander .datas .module_vals,
#foundcs .segments .service .datas .module_vals {
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;

}
#foundcs .segments .commander .datas .module_vals th,
#foundcs .segments .service .datas .module_vals th {
    padding: 0px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: right;
    padding: 0px 5px 2px 0px;
    vertical-align: top;
    font-weight: normal;

    width: 40%;
    color: var(--hud_popiseck_gray_color);
}
#foundcs .segments .commander .datas .module_vals td,
#foundcs .segments .service .datas .module_vals td {
    font-size: 14px;
    color: var(--hud_tablevaluecolor);
    padding: 0px 0px 0px 10px;
    text-transform: uppercase;
    vertical-align: top;
    height: 36px;
    text-align: left;
}



#foundcs .cs_broadcast .freq {
    color: white;
    padding: 12px 10px 12px 19px;
    cursor: pointer;
    background: #292929;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
}
#foundcs .cs_broadcast .freq.active {
    color: black;
    background: rgb(188,136,0);
    /*animation: highlited 1000ms linear infinite;*/
    animation: blink 100ms linear 2 alternate;
}
#foundcs .cs_broadcast .freq:hover {
    color: black;
    background: #ffbc00;

    /*animation:highlited 1000ms linear infinite;*/
}
#foundcs .cs_broadcast .freq .ttl {
    font-size: 14px;
    text-transform: uppercase;
    /*text-shadow: var(--shadow_textfull);*/

}
#foundcs .cs_broadcast .freq .small {
    padding-top: 2px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 16px;

    font-size: 12px;

}



#growcs {
    position:absolute;
    width:900px;
    height:90%;

}

#growcs:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}

#growcs .title {
    z-index:1000
}
#growcs .attributes {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 290px;
}
#growcs .buttons  {
    position: absolute;
    right: 15px;
    bottom: 20px;
    width: 290px;
    text-align: center;
}

#growcs .attributes .whitebox{
    animation:blink 100ms linear 2 alternate;
}
#growcs .attributes .whitebox .newname {
    text-transform: uppercase;
    font-size: 45px;
    text-align: center;
    padding: 0px 0px 9px;
}

#growcs .attributes .whitebox table .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}

#growcs .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);

}
#growcs .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#growcs .attributes table td {
    padding: 5px 0px;
}
#growcs .attributes table td.radio {
    width: 10px;
}
#growcs .growcs_err {
    position: absolute;
    top: 150px;
    height: 45px;
    right: 0px;
    left: 0px;
    text-transform: uppercase;
    padding: 20px 0px;
    border-spacing: 0px;
    text-align: center;
    font-size: 25px;
    color: rgba(255,255,255,0.5);

    border: none;

    animation: highlited 1000ms linear infinite;
    font-size: 12px;
}
#growcs .attributes table td .small {
    font-size: 13px;
}
#growcs .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 0px;

}
#growcs .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_cstationbox);
}


#growcs .segments .commander {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    bottom: 0px;
}
#growcs .segments .commander .controls {
    position: absolute;
    bottom: 200px;
    left: 15px;
    right: 315px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}

#growcs .segments .commander .img{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}

#growcs .segments .commander .datas {
    position: absolute;
    top: 220px;
    bottom: 0px;
    right: 15px;
    font-size: 13px;
    color: white;
    text-align: right;
    text-transform: uppercase;
    width: 290px;

}
#growcs .segments .commander .datas .name{
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    line-height: 37px;
    position: relative;
    padding-right: 00px;
    padding-left: 0px;
    font-family: var(--fontFaimly_header);
}
#growcs .segments .commander .datas .manufacturer{
    position: relative
}
#growcs .segments .commander .datas .manufacturer img{
    max-height: 40px;
    max-width: 100px;
}
#growcs .segments .commander .datas .desc {
    padding-top: 5px;
    font-size: 14px;
    text-align: left;
    text-transform: none;
}
#growcs .segments .commander .datas .module_vals {
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;
    width: 100%;
}
#growcs .segments .commander .datas .module_vals th {
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    line-height: 14px;
    width: 50%;
}
#growcs .segments .commander .datas .module_vals td {
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-transform: none;
    line-height: 14px;
    padding: 5px;
    padding-left: 10px;
}


#updateCSCB{
    position: absolute;
    width:900px;
    height:700px;
    max-width: var(--hud-window-max-width);
}


#updateCSCB:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}

#updateCSCB .title {
    z-index:1000
}
#updateCSCB .attributes {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 290px;
}
#updateCSCB .buttons  {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 290px;
    text-align: center;
}



#updateCSCB .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);

}
#updateCSCB .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#updateCSCB .attributes table td {
    padding: 5px 10px;
}
#updateCSCB .attributes table td.radio {
    width: 10px;
}
#updateCSCB .updateCSCB_err {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    text-transform: uppercase;

    font-size: 12px;
    animation: highlited 1000ms linear infinite;
}
#updateCSCB .attributes table td .small {
    font-size: 13px;
}
#updateCSCB .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 0px;

    clip-path: var(--clip_standardbox);
}
#updateCSCB .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#updateCSCB .segments .commander {
    position: absolute;
    top: 120px;
    right: 0px;
    text-align: center;
    width: 300px;
}
#updateCSCB .segments .controls {
    position: absolute;
    bottom: 295px;
    left: 330px;
    right: 25px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}

#updateCSCB .segments .controls .left {
    left: 0px;
}

#updateCSCB .segments .controls .right {
    right: 0px;
}


#updateCSCB .segments .controls .top,
#updateCSCB .segments .controls .bottom{
    position: absolute;
    top:-15px;
    width: 30px;
    text-align: center;
    height: 30px;
    cursor: pointer;
    border-radius: 3px;
}
#updateCSCB .segments .controls .top {
    left: 40px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_left_lined.png) center no-repeat;
    background-size: 15px;
}
#updateCSCB .segments .controls .bottom{
    right: 40px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_right_lined.png) center no-repeat;
    background-size: 15px;
}
#updateCSCB .segments .controls .top.disabled,
#updateCSCB .segments .controls .bottom.disabled {
    display: none;
}
#updateCSCB .segments .controls .rotl,
#updateCSCB .segments .controls .rotr{
    position: absolute;
    top: 25px;
    width: 30px;
    text-align: center;
    height: 30px;
    cursor: pointer;
    border-radius: 3px;
}
#updateCSCB .segments .controls .rotl {
    left: 40px;
    background: rgba(255,255,255,0.9) url(./ico/rotate-l.png) center no-repeat;
    background-size: 20px;
}
#updateCSCB .segments .controls .rotr {
    right: 40px;
    background: rgba(255,255,255,0.9) url(./ico/rotate-r.png) center no-repeat;
    background-size: 20px;
}
#updateCSCB .segments .controls .zoomin,
#updateCSCB .segments .controls .zoomout{
    position: absolute;
    top: 25px;
    display: block;
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 3px;
    color: white;
    background-color: rgba(255,255,255,0.9);
}
#updateCSCB .segments .controls .zoomin:hover,
#updateCSCB .segments .controls .zoomout:hover{
    background-color: #ffbc00;
}
#updateCSCB .segments .controls .zoomin {
    left: 0px;
    background: rgba(255,255,255,0.9) url(./ico/plus-32.png) center no-repeat;
    background-size: 15px;
}
#updateCSCB .segments .controls .zoomout{
    right: 0px;
    background: rgba(255,255,255,0.9) url(./ico/minus-32.png) center no-repeat;
    background-size: 15px;
}
#updateCSCB .segments .controls .left,
#updateCSCB .segments .controls .right {
    position: absolute;
    top: -15px;
    height: 30px;
    width: 30px;
    z-index: 999999999;
    cursor: pointer;
}
#updateCSCB .segments .controls .left {
    left: 0px;
}
#updateCSCB .segments .controls .right {
    right: 0px;
}






#updateCSCB .segments .img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#updateCSCB .segments .datas {
    position: absolute;
    top: 80px;
    bottom: 0px;
    /* right: 10px; */
    left: 20px;
    font-size: 13px;
    color: white;
    text-align: right;
    text-transform: uppercase;
    width: 280px;
}
#updateCSCB .segments .datas .hypercorporation {
    text-align: left;
}
#updateCSCB .segments .datas .hypercorporation img{
    max-height: 40px;
    max-width: 100px;
}

#updateCSCB .segments .datas .name {
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;

    position: relative;
    padding-right: 00px;
    padding-left: 0px;
    font-family: var(--fontFaimly_header);
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
}
#growcs .showWindowItem,
#updateCSSB .showWindowItem,
#updateCSCB .showWindowItem {
    left: unset;
    right: 34px;
    top: 14px;
    bottom: unset;
}

#updateCSCB .segments .datas .desc {
    padding-top: 5px;
    font-size: 14px;
    color: white;
    text-align: left;
    text-transform: none;
    text-shadow: none;
}
#updateCSCB .segments .datas .module_vals {
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;
    width: 272px;
    text-shadow: var(--shadow_textfull);
}
#updateCSCB .segments .datas .module_vals th {
    padding: 0px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
    padding-left: 10px;
    vertical-align: top;
    line-height: 10px;
    width: 20%;
    color: var(--hud_popiseck_gray_color);
    width: 50%;
}
#updateCSCB .segments .datas .module_vals td {
    font-size: 14px;
    color: var(--hud_tablevaluecolor);
    padding: 0px 0px 5px 10px;
    text-transform: uppercase;
    vertical-align: top;
    height: 30px;
    line-height: 15px;
    text-align: left;
}


#updateCSSB{
    position: absolute;
    width:900px;
    height:700px;
    max-width: var(--hud-window-max-width);
}


#updateCSSB:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}


#updateCSSB .title {
    z-index:1000
}


#updateCSSB .attributes {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 290px;
}
#updateCSSB .buttons  {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 290px;
    text-align: center;
}


#updateCSSB .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);

}
#updateCSSB .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#updateCSSB .attributes table td {
    padding: 5px 10px;
}
#updateCSSB .attributes table td.radio {
    width: 10px;
}
#updateCSSB .updateCSSB_err {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    text-transform: uppercase;

    font-size: 12px;
    animation: highlited 1000ms linear infinite;
}
#updateCSSB .attributes table td .small {
    font-size: 13px;
}
#updateCSSB .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 0px;

}
#updateCSSB .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_cstationbox);
}

#updateCSSB .segments .commander {
    position: absolute;
    top: 120px;
    right: 0px;
    text-align: center;
    width: 300px;
}
#updateCSSB .segments .controls {
    position: absolute;
    bottom: 295px;
    left: 330px;
    right: 25px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}

#updateCSSB .segments .controls .left {
    left: 0px;
}

#updateCSSB .segments .controls .right {
    right: 0px;
}

#updateCSSB .segments .img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#updateCSSB .segments .datas {
    position: absolute;
    top: 80px;
    bottom: 0px;
    /* right: 10px; */
    left: 20px;
    font-size: 13px;
    color: white;
    text-align: right;
    text-transform: uppercase;
    width: 280px;
}
#updateCSSB .segments .datas .manufacturer {
    text-align: left;
}
#updateCSSB .segments .datas .manufacturer img{
    max-height: 40px;
    max-width: 100px;
}

#updateCSSB .segments .datas .name {
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;

    position: relative;
    padding-right: 00px;
    padding-left: 0px;
    font-family: var(--fontFaimly_header);
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
}
#updateCSSB .segments .datas .desc {
    padding-top: 5px;
    font-size: 14px;
    color: white;
    text-align: left;
    text-transform: none;
    text-shadow: none;
}
#updateCSSB .segments .datas .module_vals {
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;
    width: 272px;
    text-shadow: var(--shadow_textfull);
}
#updateCSSB .segments .datas .module_vals th {
    padding: 0px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
    padding-left: 10px;
    vertical-align: top;
    line-height: 10px;
    width: 20%;
    color: var(--hud_popiseck_gray_color);
    width: 50%;
}
#updateCSSB .segments .datas .module_vals td {
    font-size: 14px;
    color: var(--hud_tablevaluecolor);
    padding: 0px 0px 5px 10px;
    text-transform: uppercase;
    vertical-align: top;
    height: 30px;
    line-height: 15px;
    text-align: left;
}


#updateCSSB .segments .controls .top,
#updateCSSB .segments .controls .bottom{
    position: absolute;
    top:-15px;
    width: 30px;
    text-align: center;
    height: 30px;
    cursor: pointer;
    border-radius: 3px;
}
#updateCSSB .segments .controls .top {
    left: 40px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_left_lined.png) center no-repeat;
    background-size: 15px;
}
#updateCSSB .segments .controls .bottom{
    right: 40px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_right_lined.png) center no-repeat;
    background-size: 15px;
}
#updateCSSB .segments .controls .top.disabled,
#updateCSSB .segments .controls .bottom.disabled {
    display: none;
}
#updateCSSB .segments .controls .rotl,
#updateCSSB .segments .controls .rotr{
    position: absolute;
    top: 25px;
    width: 30px;
    text-align: center;
    height: 30px;
    cursor: pointer;
    border-radius: 3px;
}
#updateCSSB .segments .controls .rotl {
    left: 40px;
    background: rgba(255,255,255,0.9) url(./ico/rotate-l.png) center no-repeat;
    background-size: 20px;
}
#updateCSSB .segments .controls .rotr {
    right: 40px;
    background: rgba(255,255,255,0.9) url(./ico/rotate-r.png) center no-repeat;
    background-size: 20px;
}
#updateCSSB .segments .controls .zoomin,
#updateCSSB .segments .controls .zoomout{
    position: absolute;
    top: 25px;
    display: block;
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 3px;
    color: white;
    background-color: rgba(255,255,255,0.9);
}
#updateCSSB .segments .controls .zoomin:hover,
#updateCSSB .segments .controls .zoomout:hover{
    background-color: #ffbc00;
}
#updateCSSB .segments .controls .zoomin {
    left: 0px;
    background: rgba(255,255,255,0.9) url(./ico/plus-32.png) center no-repeat;
    background-size: 15px;
}
#updateCSSB .segments .controls .zoomout{
    right: 0px;
    background: rgba(255,255,255,0.9) url(./ico/minus-32.png) center no-repeat;
    background-size: 15px;
}

#updateCSSB .segments .controls .left {
    left: 0px;

}
#updateCSSB .segments .controls .right {
    right: 0px;

}






#updatecsb{
    position: absolute;
    width:900px;
    top: 37px;
    bottom: 20px;
    max-width: var(--hud-window-max-width);
}


#updatecsb:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}
#updatecsb .title {
    z-index:1000
}
#updatecsb .attributes {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 290px;
}
#updatecsb .buttons  {
    position: absolute;
    left: 15px;
    bottom: 20px;
    width: 290px;
    text-align: center;
}


#updatecsb .buttons button .thint {
    top: 2px;
}

#updatecsb .attributes .whitebox{
    animation:blink 100ms linear 2 alternate;
}
#updatecsb .attributes .whitebox .newname {
    text-transform: uppercase;
    font-size: 45px;
    text-align: center;
    padding: 0px 0px 9px;
}

#updatecsb .attributes .whitebox table .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}
#updatecsb .attributes .whitebox table .pos {
    color: white;
}

#updatecsb .attributes .whitebox table #total_materials,
#growcs .attributes .whitebox table #total_materials,
#updateCSCB .attributes .whitebox table #total_materials,
#updateCSSB .attributes .whitebox table #total_materials {
    font-size: 10px;
}
#updatecsb .attributes .whitebox table #total_materials table th,
#growcs .attributes .whitebox table #total_materials table th,
#updateCSCB .attributes .whitebox table #total_materials table th,
#updateCSSB .attributes .whitebox table #total_materials table th,
#cstationbox .cs-conf .resources .disassemblyresources th{
    font-size: 10px;
    padding: 3px 10px;
}

#updatecsb .attributes .whitebox table #total_materials table td,
#growcs .attributes .whitebox table #total_materials table td,
#updateCSCB .attributes .whitebox table #total_materials table td,
#updateCSSB .attributes .whitebox table #total_materials table td,
#cstationbox .cs-conf .resources .disassemblyresources td{
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    padding: 3px 30px 3px 0px;
    text-align: right;
    text-transform: none;
}

#updatecsb .attributes .whitebox table #total_materials .namelink,
#growcs .attributes .whitebox table #total_materials table .namelink,
#updateCSCB .attributes .whitebox table #total_materials .namelink,
#updateCSSB .attributes .whitebox table #total_materials .namelink,
#cstationbox .cs-conf .resources .disassemblyresources .namelink{
    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

#updatecsb .attributes .whitebox table #total_materials .namelink:hover,
#growcs .attributes .whitebox table #total_materials table .namelink:hover,
#updateCSCB .attributes .whitebox table #total_materials .namelink:hover,
#updateCSSB .attributes .whitebox table #total_materials .namelink:hover,
#cstationbox .cs-conf .resources .disassemblyresources .namelink:hover
{
    animation: blink 100ms linear 2;
}


#updatecsb .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;



}
#updatecsb .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#updatecsb .attributes table td {
    padding: 5px 0px;
}
#updatecsb .attributes table td.radio {
    width: 10px;
}
#updatecsb .updatecsb_err {
    position: absolute;
    top: 150px;
    height: 45px;
    right: 0px;
    left: 0px;
    text-transform: uppercase;
    padding: 20px 0px;
    border-spacing: 0px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    border: none;


}
#updatecsb .attributes table td .small {
    font-size: 13px;
}
#updatecsb .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 0px;

}
#updatecsb .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_cstationbox);
}





#updatecsb .segments .commander {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    bottom: 0px;
}
#updatecsb .segments .commander .controls {
    position: absolute;
    bottom: 200px;
    left: 300px;
    right: 20px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}
#updatecsb .segments .commander .controls .left,
#updatecsb .segments .commander .controls .right {
    position: absolute;
    top: 0px;
    width: 20px;
    text-align: center;
    background: red;
    height: 20px;
    cursor: pointer;
}
#updatecsb .segments .commander .controls .left {
    left: 0px;
}
#updatecsb .segments .commander .controls .left.disabled{
    background: gray;
}
#updatecsb .segments .commander .controls .right {
    right: 0px;
}
#updatecsb .segments .commander .controls .right.disabled {
    background: gray;
}
#updatecsb .segments .commander .controls .top,
#updatecsb .segments .commander .controls .bottom{
    position: absolute;
    top: 0px;
    width: 20px;
    text-align: center;
    background: blue;
    height: 20px;
    cursor: pointer;
}
#updatecsb .segments .commander .controls .top {
    left: 50px;
}
#updatecsb .segments .commander .controls .top.disabled{
    background: gray;
}
#updatecsb .segments .commander .controls .bottom{
    right: 50px;
}
#updatecsb .segments .commander .controls .bottom.disabled {
    background: gray;
}
#updatecsb .segments .commander .controls .rotl,
#updatecsb .segments .commander .controls .rotr{
    position: absolute;
    top: 171px;
    bottom: 0px;
    right: 5px;
    font-size: 13px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    width: 289px;
    text-shadow: var(--shadow_textfull);
}
#updatecsb .segments .commander .controls .rotl {
    left: 50px;
}
#updatecsb .segments .commander .controls .rotr{
    right: 50px;
}
#updatecsb .segments .commander .img{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#updatecsb .segments .commander .datas {
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: 15px;
    font-size: 13px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    width: 290px;
    /*text-shadow: var(--shadow_textfull);*/
}
#updatecsb .segments .commander .datas .name{
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    padding: 0px 0px 8px 10px;
}
#updatecsb .segments .commander .datas .desc {
    padding-top: 5px;
    font-size: 12px;
    color: gray;
    text-align: left;
    text-transform: uppercase;
}
#updatecsb .segments .commander .datas .module_vals {
    padding: 0px;
    border-spacing: 0px;
    width: 100%;
}
#updatecsb .segments .commander .datas .module_vals th {
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    line-height: 10px;
    width: 50%;
}
#updatecsb .segments .commander .datas .module_vals td {
    font-size: 12px;
    color: var(--hud_tablevaluecolor);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    line-height: 12px;
    padding: 5px;
    padding-left: 10px;
    text-transform: none;
}
#updatecsb .segments .commander .datas .facilities  {
    display: block;
    position: absolute;
    top: 290px;
    left: 0px;
    right: 0px;
    bottom: 70px;
    overflow-y: scroll;

}
#updatecsb .segments .commander .datas .facilities .facility {
    display: block;
    font-size: 24px;
    color: white;
    padding: 10px 10px 10px 15px;
    min-height: 55px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;

}

#updatecsb .segments .commander .datas .facilities .facility .thint {
    animation: highlited 1000ms linear infinite;
    left: unset;
    text-align: center;
    bottom: 15px;
    top: unset;
    right: 5px;
}

#updatecsb .segments .commander .datas .facilities .facility .thint:before  {
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ffbc00;
    border-top: 10px solid transparent;
    border-left: none;
    position: absolute;
    left: -10px;
    right: unset;
    bottom: unset;
    top: 3px;
}

#updatecsb .segments .commander .datas .facilities .facility.active {
    color: white;
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}
#updatecsb .segments .commander .datas .facilities .facility:not(.active):hover {
    animation: blink 100ms linear 2;
}
#updatecsb .segments .commander .datas .facilities .facility .ttl {
    font-size: 24px;
    text-transform: uppercase;
}
#updatecsb .segments .commander .datas .facilities .facility .small {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}
#updatecsb .segments .commander .datas .facilities .facility.selected {
    color: black;
    background-color: white;

}


#resourcecontainerabort {
    position:absolute;
    width:500px;
    height:300px;

}
#resourcecontainerabort:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgb(29 29 47) 0%, rgb(12 12 20) 100%);
    background-position: -10px 0px, center;
    background-size: cover;
    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#resourcecontainerabort .description {
    position:absolute;
    top:70px;
    left: 50px;
    right: 50px;
    color: white;
    text-align: center;
    font-size: 16px;
}

#resourcecontainerabort .actions {
    position:absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);

}

#resourcecontainerdeploy {
    position:absolute;
    width:375px;
    height:265px;
}

#resourcecontainerdeploy:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgb(29 29 47) 0%, rgb(12 12 20) 100%);
    background-position: -10px 0px, center;
    background-size: cover;
    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#resourcecontainerdeploy .description {
    position:absolute;
    top:69px;
    left: 50px;
    right: 50px;
    color: #ffbc00;
    text-align: center;
    font-size: 16px;
}

#resourcecontainerdeploy .subscription {
    position: absolute;
    top: 141px;
    left: 50px;
    right: 50px;
    color: silver;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
}

#resourcecontainerdeploy .inputbox {
    position:absolute;
    top:100px;
    left: 50%;
    transform: translateX(-50%);
}

#resourcecontainerdeploy .inputbox input {
    width:120px;
    padding:8px;
    text-align:center;
    font-size:16px;
    background:#0c0c14;
    border:1px solid #444;
    color:white;
    outline:none;
}

#resourcecontainerdeploy .actions {
    position:absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

#resourcecontainer {
    position:absolute;
    width:900px;
    height:740px;

}
#resourcecontainer:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px,center;
    background-size: cover;

    clip-path: var(--clip_standardbox);
    z-index: -1;
}
#resourcecontainer.event_container:before {
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(3 27 38) 100%), url(./effects/bckg_glitch.gif);
}

#resourcecontainer .resourceContainer_err {
    position: absolute;
    top: 150px;
    right: 15px;
    left: 15px;
    color: white;
    text-align: center;
}

#resourcecontainer .content {
    position: absolute;
    top: 50px;
    right: 15px;
    width: 420px;
}
#resourcecontainer .buttons  {
    position: absolute;
    right: 15px;
    width: 420px;
    top: 642px;
    text-align: center;
}

#resourcecontainer .abort  {
    position: absolute;
    bottom: 28px;
    right: 15px;
    width: 420px;
    text-align: center;
    color: white;
    text-decoration: underline;
    cursor: pointer;
}

#resourcecontainer .abort:hover{
    text-decoration: none;
    animation: blink 100ms linear 2 alternate;
}

#resourcecontainer .buttons button  {
    margin: 5px;
}

#resourcecontainer .buttons .nodeploy {
    display: block;
    cursor: default;
    text-align: center;
    color: silver;
    font-size: 14px;
    padding: 0px 20px;
    animation: highlited 1000ms linear infinite;
}

#resourcecontainer .buttons button.completeresource.gray:hover {
    animation: none;
}






#resourcecontainer .desrcrabrt{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 125px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    box-sizing: border-box;
    color: white;
    font-size: 19px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

#resourcecontainer .desrcrabrt .desrcra{

}


#resourcecontainer .desrcrabrt .desrcra p{
    font-size: 14px;
    padding: 10px 0px 20px;
    animation: highlited 1000ms linear infinite;
}





#resourcecontainer .desrcr{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 10px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center left;
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    text-align: center;

}

#resourcecontainer .desrcr h1{
    font-size: 37px;
    color: white;
    margin: 0px 0px 10px 0px;
}

#resourcecontainer .desrcr h2{
    font-size: 22px;
    color: white;
    margin: 0px 0px 10px 0px;
}

#resourcecontainer .desrcr p{
    color: #ffbc00;
    font-size: 16px;
}

#resourcecontainer .desrcr p.small{

    font-size: 13px;
}

#resourcecontainer .desrcr p .members {
    position: relative;
    padding-right: 18px;
}

#resourcecontainer .desrcr p .members:before{
    content: '';
    position: absolute;
    top: 0px;
    width: 15px;
    right: 0px;
    bottom: 0px;
    background-image: url(ico/ico_member-16.png);
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(100%);
    background-size: contain;
}



#resourcecontainer .desrcr ul{
    position: relative;
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 0px 20px;
}

#resourcecontainer .desrcr ul li{
    text-align: left;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px 0px 0px 25px;
}

#resourcecontainer .desrcr ul li span{
    font-size: 14px;
    color: #ffbc00;
    padding: 0px 5px 0px 0px;
}

#resourcecontainer .desrcr ul li small{
    font-size: 12px;
    color: #8e8e8e;
    padding: 0px 5px 0px 0px;
}


#resourcecontainer .qtxt{
    top: 380px;
}


#resourcecontainer .subinfo{
    bottom: 12px;
    position: absolute;
    color: #d3d3d3;
    font-size: 14px;
    left: 40px;
    width: 410px;
}



#resourcecontainer .barbox{
    height: 17px;
    width: 250px;
    box-sizing: border-box;
    position: absolute;
    background-color: rgb(63,69,73);
    top: 540px;
    right: calc(50% - 125px);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);

}
#resourcecontainer .barbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ffbc00;
    bottom: 0px;
}
#resourcecontainer .barbox .bardeploy{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ffbc00;
    bottom: 0px ;
    animation: highlited 1000ms linear infinite;
}
#resourcecontainer .barbox .span{
    position: absolute;

    top: -19px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 14px;
    text-align: center;

    white-space: nowrap;
    color: white;
}


#resourcecontainer .barbox .timer{
    position: absolute;

    top: 29px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 13px;
    text-align: center;

    white-space: nowrap;
    color: white;
}




#resourcecontainer .resourcecontainer-scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    z-index: -1;
}

#resourcecontainer .resourcecontainer-scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    z-index: -1;
}

#resourcecontainer.event_container .resourcecontainer-scene:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(containers/bckgr_3501.png);
    clip-path: var(--clip_standardbox);
    opacity: 0.5;
}



#updatecsw {
    position: absolute;
    width:900px;
    height:700px;
    max-width: var(--hud-window-max-width);
}

#updatecsw .title {
    z-index: 11;
}

#updatecsw:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}


#updatecsw .attributes {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 290px;
}
#updatecsw .buttons  {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 290px;
    text-align: center;
}

#updatecsw .attributes .whitebox{
}
#updatecsw .attributes .whitebox .newname {
    text-transform: uppercase;
    font-size: 45px;
    text-align: center;
    padding: 0px 0px 9px;
}

#updatecsw .attributes .whitebox table .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}
#updatecsw .attributes .whitebox table .pos {
    color: white;
}
#updatecsw .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    text-shadow: var(--shadow_textfull);

}
#updatecsw .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#updatecsw .attributes table td {
    padding: 5px 10px;
}
#updatecsw .attributes table td.radio {
    width: 10px;
}
#updatecsw .updatecsw_err {
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;

}
#updatecsw .attributes table td .small {
    font-size: 13px;
}
#updatecsw .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 0px;

}
#updatecsw .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    clip-path: var(--clip_cstationbox);
}
#updatecsw .segments .commander {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    bottom: 0px;
}
#updatecsw .segments .commander .controls {
    position: absolute;
    top: calc(50% - 10px);
    left: 0px;
    right: 300px;
    text-align: center;
    height: 20px;
    z-index: 10000;
}
#updatecsw .segments .commander .controls .left,
#updatecsw .segments .commander .controls .right {
    position: absolute;
    top: 0px;
    width: 20px;
    text-align: center;
    background: red;
    height: 20px;
    cursor: pointer;
}
#updatecsw .segments .commander .controls .left {
    left: 0px;
}
#updatecsw .segments .commander .controls .left.disabled{
    background: gray;
}
#updatecsw .segments .commander .controls .right {
    right: 0px;
}
#updatecsw .segments .commander .controls .right.disabled {
    background: gray;
}
#updatecsw .segments .commander .controls .top,
#updatecsw .segments .commander .controls .bottom{
    position: absolute;
    top: 0px;
    width: 20px;
    text-align: center;
    background: blue;
    height: 20px;
    cursor: pointer;
}
#updatecsw .segments .commander .controls .top {
    left: 50px;
}
#updatecsw .segments .commander .controls .top.disabled{
    background: gray;
}
#updatecsw .segments .commander .controls .bottom{
    right: 50px;
}
#updatecsw .segments .commander .controls .bottom.disabled {
    background: gray;
}
#updatecsw .segments .commander .controls .rotl,
#updatecsw .segments .commander .controls .rotr{
    position: absolute;
    top: 20px;
    width: 20px;
    text-align: center;
    background: blue;
    height: 20px;
    cursor: pointer;
}
#updatecsw .segments .commander .controls .rotl {
    left: 50px;
}
#updatecsw .segments .commander .controls .rotr{
    right: 50px;
}
#updatecsw .segments .commander .img{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#updatecsw .segments .commander .datas {
    position: absolute;
    top: 120px;
    bottom: 0px;
    right: 0px;
    font-size: 13px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    width: 290px;
}
#updatecsw .segments .commander .datas .name{
    font-size: 32px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}
#updatecsw .segments .commander .datas .desc {
    padding-top: 5px;
    font-size: 20px;
    color: white;
    text-align: left;
    text-transform: uppercase;
}
#updatecsw .segments .commander .datas .module_vals {
    display: none;
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;
    width: 100%;
}
#updatecsw .segments .commander .datas .module_vals th {
    color: var(--hud_tablecolor);
    padding: 5px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    line-height: 10px;
    width: 50%;
}
#updatecsw .segments .commander .datas .module_vals td {
    font-size: 10px;
    color: var(--hud_tablevaluecolor);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    line-height: 12px;
    padding: 5px;
    padding-left: 10px;
}
#updatecsw .segments .commander .datas .slots .slot  {
    display: block;
    font-size: 12px;
    color: white;
    padding: 10px 20px 10px 55px;
    cursor: pointer;
    min-height: 55px;
    background-repeat: no-repeat;
    background-position: center left 5px;
    background-size: 35px;
}
#updatecsw .segments .commander .datas .slots .slot.li  {
    background-image: url(ico/li_weapon_slot-white.png);
}
#updatecsw .segments .commander .datas .slots .slot.me  {
    background-image: url(ico/me_weapon_slot-white.png);
}
#updatecsw .segments .commander .datas .slots .slot.he  {
    background-image: url(ico/he_weapon_slot-white.png);
}

#updatecsw .segments .commander .datas .slots .slot .slot-name {
    display: block;
    padding: 3px 0px 5px;
    font-size: 15px;
}
#updatecsw .segments .commander .datas .slots .slot .weapons-select {
    display: block;
    width: 100%;
}



#updatecsw .segments .commander .datas .slots .slot  .ttl {
    font-size: 24px;
    text-transform: uppercase;
}
#updatecsw .segments .commander .datas .slots .slot  .small {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
}
#updatecsw .segments .commander .datas .slots .slot .selected {
    color: black;
    background: white;
    animation: highlited 1000ms linear infinite;
}





#cards-quests {
    position: absolute;
    top: 65px;
    right: 40%;
    left: 45%;
    height: 1px;
    z-index: 10;
}



#cards-quests .card {
    position: relative;
    float: left;
    top: 0px;
    width: 60px;
    margin: 0px 3px 20px 3px;
    height: 1px;
    min-width: 10px;
    max-width: 36px;
    width: 18%;
}

#cards-quests .card.zoomed {
    z-index: 10;
}

#cards-quests .card:not(.zoomed) .inner .bar-box {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;

    height: 14px;
    text-align: center;

}

#cards-quests .card:not(.zoomed) .inner .timer {
    display: none;
    color: silver;
    position: absolute;
    bottom: -142px;
    left: 0px;
    right: 0px;
    font-size: 50px;
    height: unset;
    text-align: center;
    opacity: 0;
    text-shadow: none;

}

#cards-quests .card:not(.zoomed) .inner .qtext {
    color: silver;
    position: absolute;
    bottom: unset;
    font-size: 33px;
    height: unset;
    text-align: center;
    opacity: 1;
    text-shadow: none;
    left: 50%;
    top: calc(100% + 80px);
    transform: translateX(-50%);
    right: unset;
}

#cards-quests .card:not(.zoomed) .inner .qtext img {
    height: 42px;
    width: 42px;
    top: -14px;
    position: relative;
}

#cards-quests .card:not(.zoomed) .inner .qperc {

    opacity: 0;

}


#cards-quests .card.completed:not(.zoomed) .inner .qtext {
    color: #ffbc00;
    /* animation: highlited 1000ms linear infinite; */
    top: calc(100% + 18px);
}






#cards-quests .card .inner {
    position: absolute;
    width: 120px;
    top: -97px;
    margin: 0px;
    height: 175px;
    transform: scale(0.30);
    left: -63px;

}

#cards-quests .card .inner .qtext {
    display: none;
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: -65px;
    font-size: 50px;
    color: rgba(255,255,255,0.8);
    text-align: center;

}

#cards-quests .card.zoomed .inner .qtext {
    display: block;
}

#cards-quests .card.completed .inner .qtext {
    display: block;
}


#cards-quests .card .inner .qperc {
    display: block;
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: -88px;
    font-size: 50px;
    color: rgba(255,255,255,0.8);
    text-align: center;

}

#cards-quests .card.zoomed .inner .qperc {
    display: none;
}

#cards-quests .card .inner .completed {
    position: absolute;
    display: none;
    left: 10px;
    right: 10px;
    height: 5px;
    bottom: -10px;
    font-size: 27px;
    color: white;
    text-align: center;
    font-family: var(--fontFaimly_button);
}

#cards-quests .card .completed .complete {
    position: absolute;
    left: calc(50% - 35px);
    width: 70px;
    height: 30px;
    color: black;
    text-align: center;
    top: 0px;
    font-size: 12px;

    border: 1px solid white;
    transition: .2s;
    border: 1px solid white;
    line-height: 30px;
    cursor: pointer;
    background-color: #ffbc00;
    animation: highlited 1000ms linear infinite;
    border: 0px;

}


#cards-quests .card .bar-box {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 12px;
    background: #282727;
    bottom: -9px;
    border-left: 5px solid var(--border-effect-color);
    border-right: 5px solid var(--border-effect-color);
}

#cards-quests .card.zoomed .bar-box {
    height: 7px;
}


#cards-quests .card .bar-box .bar {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
#cards-quests .card .timer {
    position: absolute;
    left: 5px;
    right: 5px;
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -20px;
    font-size: 12px;
    opacity: 0;
    transition: 0s;
}


#cards-quests .card.zoomed .completed {
    display: block;
}
#cards-quests .card.zoomed .completed .complete:hover {
    animation:blink 100ms linear 2 alternate;
    color: black;
    background-color: white;
}
#cards-quests .card.zoomed.completed .qtext {
    display: none;
}


#cards-quests .card:hover:not(.zoomed) .inner {
}



#cards-quests .card.zoomed .inner .qtext {
    font-size: 14px;
    text-shadow: var(--shadow_textfull);
    bottom: -55px;
}



#cards-quests .card.dissapear  {
    animation:g-dissapear 600ms forwards;
}
#cards-quests .card.new:not(.dissapear):not(.used):not(.zoomed):not(.activated) .inner {
    animation:new 1500ms forwards;
}
#cards-quests .card.hidden {
    opacity: 0;
}
#cards-quests .card.zoomed .inner{
    animation:q-zoom 200ms forwards;
    cursor: default;
}



#cards-quests .card.zoomed .timer {
    opacity: 1;
}






















#cards-global {
    position: absolute;
    top: 45px;
    left: 50%;
}
#cards-global .card {
    position: relative;
    float: left;
    top: 0px;
    width: 160px;
    height: 0px;
}
#cards-global .card .inner {
    position: absolute;
    width: 135px;
    top: 0px;
    height: 222px;
    transform: scale(0.3);
    transition: .05s;
}



#cards-global .card:hover .inner {
    top: -20px !important;
    left: -40px !important;
    width: 170px;
}



#cards-global .card.activated:not(.removed) .inner {
    animation:g-show 1500ms forwards;
}
#cards-global .card.removed .inner {
    animation:g-wipe 300ms forwards;
}

@keyframes g-show{
    0%{
        transform: translate(0px,0px) rotate(100deg) scale(0.2);
        opacity: 1;
    }
    40%{
        transform: translate(-30px,calc( 50vh - 200px )) rotate(0deg) scale(1);
        opacity: 1;
    }
    100%{
        transform: translate(-30px,calc( 50vh - 200px )) rotate(0deg) scale(1);
        opacity: 1;
    }
}
@keyframes g-wipe{
    0%{
        transform: translate(-30px,calc( 50vh - 200px )) rotate(5deg) scale(1);
        opacity: 1;
    }
    100%{
        transform: translate(calc( -50vw + 280px ),-40px) rotate(0deg) scale(0.2);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes g-dissapear{
    80%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
    100%{
        opacity: 0;
        width: 0px;
        margin: 0px;
        display: none;
        visibility: hidden;

    }
}
@keyframes g-new{
    0%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
    20%{
        transform: rotate3d(0, 1, 0, 0deg)  scale(0.85);
    }
    40%{
    }
    60%{
    }
    80%{
    }
    90%{
    }
    100%{
    }
}
@keyframes g-zoom{
    0%{
        transform: translate(0px,0px) scale(0.2);
        opacity: 0;
    }
    100%{
        transform: translate(-200px,calc( 50vh - 300px )) scale(1);
        opacity: 1;
        width: 250px;
        height: 365px;
    }
}
@keyframes g-lzoom{
    0%{
        transform: translate(0px,0px) scale(0.2);
        opacity: 0;
    }
    100%{
        transform: translate(125px,calc( 50vh - 200px )) scale(1);
        opacity: 1;
        width: 250px;
        height: 365px;
    }
}
@keyframes g-tzoom{
    0%{
        transform: translate(0px,0px) scale(0.65);
        opacity: 0;
    }
    100%{
        transform: translate(25px,calc( 50vh - 200px )) scale(1);
        opacity: 1;
        width: 250px;
        height: 365px;
    }
}
@keyframes q-zoom{
    0%{
        transform: translate(0,0) scale(0.2);
        opacity: 0;
    }
    100%{
        transform: translate(-125px,calc( 50vh - 222px )) scale(1);
        opacity: 1;
        width: 250px;
        height: 365px;
    }
}

#cards-station-applyed {
    position: absolute;
    top: 25px;
    left: 255px;
    width: calc(40% - 255px);
    height: 1px;
}


.telo.maphud #cards-station-applyed {
    display: none;
}

#cards-station-applyed .card {
    position: relative;
    float: left;
    top: 0px;
    width: 60px;
    margin: 0px 3px 15px 3px;
    height: 1px;
    min-width: 10px;
    max-width: 60px;
    width: 12%;
}



#cards-quests .card.zoomed .qabort{
    position: absolute;
    top: -36px;
    display: block;
    right: calc(50% - 30px);
}

#cards-quests .card.zoomed .qlocate{
    position: absolute;
    top: -36px;
    display: block;
    left: calc(50% - 30px);
    background-position: center 9px;
}

#cards-quests .card:not(.zoomed) .qlocate{
    position: absolute;
    top: -56px;
    display: block;
    width: 20px;
    height: 20px;
    left: calc(50% - 10px);
    background-position: center;
    background-size: 13px;
    transform: scale(3.3333);
    z-index: 1;
}

#cards-station-applyed .card.zoomed .minimize,
#cards-applyed .card.zoomed .minimize,
#cards-quests .card.zoomed .minimize{
    position: absolute;
    top: -36px;
    display: block;
    left: 10px;
}



#cards-station-applyed .card .minimize,
#cards-applyed .card .minimize,
#cards-quests .card .minimize{
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(ico/ico_card_minimize_top.png);
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    display: none;
    cursor: pointer !important;

}

#cards-station-applyed .card.zoomed .cinfo,
#cards-applyed .card.zoomed .cinfo,
#cards-quests .card.zoomed .cinfo{
    position: absolute;
    top: -36px;
    display: block;
    right: 10px;
}

#cards-station-applyed .card .cinfo,
#cards-applyed .card .cinfo,
#cards-quests .card .cinfo{
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(ico/ico_card_minimize_info.png);
    background-position: center;
    background-size: 18px;
    background-repeat: no-repeat;
    display:none;
    cursor: pointer !important;

}

#cards-quests .card .qabort{
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(ico/ico_card_qabort.png);
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
    display: none;
    cursor: pointer !important;

}

#cards-quests .card .openbriefing{

    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(ico/briefing-24.png);
    background-position: center;
    background-size: 15px;
    background-repeat: no-repeat;
    display: block;
    cursor: pointer !important;
    left: calc(50% - 10px);
    z-index: 10;
    top: -35px;
}
#cards-quests .card:not(.zoomed) .openbriefing{
    display: block;
    left: calc(50% - 10px);
    top: -56px;
    transform: scale(3.3333);
    width: 20px;
    height: 20px;
    background-size: 13px;
}

#cards-quests .card .qlocate{
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(ico/ico_object_32.png);
    background-position: center;
    background-size: 15px;
    background-repeat: no-repeat;
    display: none;
    cursor: pointer !important;

    z-index: 10;
}
#cards-quests .card .openbriefing:hover,
#cards-quests .card .qlocate:hover {
    z-index: 100;
}

#cards-quests .card .qlocate.station{
    background-image: url(ico/viewcontrols_stations_32.png);
    left: calc(50% - -10px);
}
#cards-quests .card:not(.zoomed) .qlocate.station{
    left: calc(50% - -33px);
}

#cards-quests .card .qlocate.object{
    background-image: url(ico/ico_object_32.png);
}

#cards-quests .card .qlocate.base{
    background-image: url(ico/ico_spacecraft_32.png);
    left: calc(50% - 30px);
}
#cards-quests .card:not(.zoomed) .qlocate.base{
    left: calc(50% - 50px);
}

#cards-station-applyed .card .minimize:hover,
#cards-applyed .card .minimize:hover,
#cards-quests .card .minimize:hover,
#cards-station-applyed .card .cinfo:hover,
#cards-applyed .card .cinfo:hover,
#cards-quests .card .cinfo:hover,
#cards-quests .card .qabort:hover,
#cards-quests .card .qlocate:hover{
    animation: blink 100ms linear 2 alternate;
}



#cards-station-applyed .card.completed:not(.zoomed) .qtext {
    color: #ffbc00;
    animation:highlited 1000ms linear infinite;
}




#cards-station-applyed .card .inner {
    position: absolute;
    width: 200px;
    top: -97px;
    margin: 0px;
    height: 300px;
    transform: scale(0.3);
    left: -70px;
    /* transition: .05s; */
}



#cards-station-applyed .card .bar-box {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 12px;
    background: #282727;
    bottom: -9px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
}

#cards-station-applyed .card.zoomed .bar-box {
    height: 7px;
}

#cards-station-applyed .card .bar-box .bar {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
#cards-station-applyed .card .timer {
    position: absolute;
    left: 5px;
    right: 5px;
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -20px;
    font-size: 12px;
    opacity: 0;
    transition: .2s;
}



#cards-station-applyed .card:not(.zoomed) .qty {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* height: 20px; */
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -36px;
    font-size: 36px;

    text-shadow: var(--shadow_textfull);
    top: unset;
}

#cards-station-applyed .card.zoomed .qty {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* height: 20px; */
    color: rgba(255,255,255,.8);
    text-align: center;
    top: -31px;
    font-size: 18px;

    text-shadow: var(--shadow_textfull);
}



/*#cards-station-applyed .card:hover .inner {top: 15px !important;  z-index: 100000000; transform: scale(1);}  */
/*#cards-station-applyed .card:hover .timer {opacity: 1;  }  */

#cards-station-applyed .card.dissapear  {
    animation:g-dissapear 200ms forwards;
}
#cards-station-applyed .card.new:not(.dissapear):not(.used):not(.zoomed):not(.activated) .inner {
    animation:new 1500ms forwards;
}
#cards-station-applyed .card.hidden {
    opacity: 0;
}
#cards-station-applyed .card.zoomed .inner{
    animation:g-lzoom 200ms forwards;
    cursor: default;
}
/*#cards-station-applyed .card.zoomed:hover .inner{ top: -70px !important;  z-index: 100000000; } */

#cards-station-applyed .card.zoomed .uncast {
    opacity: 1;
}
#cards-station-applyed .card.zoomed .timer {
    opacity: 1;
}




#cards-applyed {
    position: absolute;
    top: 45px;
    right: 10px;
    width: calc(40% - 5px);
    z-index: 100;
    height: 1px;

}
#telo.rightcontext #cards-applyed {
    right: 350px;

}
#telo.fleetships #cards-applyed {
    right: 260px;
}



#cards-applyed .card {
    position: relative;
    float: right;
    top: 0px;
    width: 70px;
    margin: 0px 6px 15px 6px;
    height: 1px;
    min-width: 10px;
    max-width: 60px;
    width: 8%;
}



#cards-applyed .card .inner {
    position: absolute;
    width: 128px;
    top: -40px;
    margin: 0px;
    height: 180px;
    transform: scale(0.55);
    right: -35px;
    left: unset;

}



#cards-applyed .card .bar-box {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 9px;
    background: #282727;
    bottom: -18px;
    border-left: 3px solid var(--border-effect-color);
    border-right: 3px solid var(--border-effect-color);
}

#cards-applyed .card.zoomed .bar-box {
    height: 7px;
    bottom: -7px;
}


#cards-applyed .card .bar-box .bar {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
#cards-applyed .card .timer {
    position: absolute;
    left: 5px;
    right: 5px;
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -20px;
    font-size: 12px;
    opacity: 0;
    transition: .2s;
    display: none;
}

#cards-applyed .card:not(.zoomed) .qty {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* height: 20px; */
    color: rgba(255, 255, 255, .8);
    text-align: center;
    bottom: -49px;
    font-size: 20px;
    text-shadow: var(--shadow_textfull);
    top: unset;
}

#cards-applyed .card.zoomed .qty {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* height: 20px; */
    color: rgba(255,255,255,.8);
    text-align: center;
    top: -31px;
    font-size: 18px;

    text-shadow: var(--shadow_textfull);
}

#cards-applyed .card .uncast,
#cards-station-applyed .card .uncast {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 28px;
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -35px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    opacity: 0;
    transition: .2s;
    line-height: 28px;
    cursor: pointer;
    color: white;
    border: 2px solid white;
}

#cards-applyed .card.zoomed .uncast:hover,
#cards-station-applyed .card.zoomed .uncast:hover {
    animation:blink 100ms linear 2 alternate;
    color: black;
    background-color: #ffbc00;
    border: 2px solid #ffbc00;
}


#cards-applyed .card .uncast.withtimer,
#cards-station-applyed .card .uncast.withtimer {
    bottom: -68px;
}


/*#cards-applyed .card:not(.zoomed):hover .inner {top: -70px !important;  transform: scale(0.35)  !important; }    */
/*#cards-applyed .card:hover .inner {top: 15px !important;  z-index: 100000000; }*/
/*#cards-applyed .card:hover .timer {opacity: 1;  }*/

#cards-applyed .card.dissapear  {
    animation:g-dissapear 200ms forwards;
}
#cards-applyed .card.new:not(.dissapear):not(.used):not(.zoomed):not(.activated) .inner {
    animation:new 1500ms forwards;
}
#cards-applyed .card.hidden {
    opacity: 0;
}
#cards-applyed .card.zoomed .inner{
    animation:g-zoom 200ms forwards;
    cursor: default;
}
#cards-applyed .card.zoomed:hover .inner{
    /*top: -70px !important;*/
}

#cards-applyed .card.zoomed .uncast {
    opacity: 1;
}
#cards-applyed .card.zoomed .timer {
    opacity: 1;
    display: block;
}




@keyframes activated{
    100%{
        transform: translate(0px,-10px) ;
    }
}
@keyframes used{
    0%{
        transform: translate(0px,-10px) ;
        opacity: 1;
    }
    70%{
        transform: translate(-300px,-500px) rotate(-45deg);
        opacity: 0.8;
    }
    100%{
        transform: rotate(-155deg) scale(10);
        opacity: 0
    }
}
@keyframes used-zoom{
    0%{
        transform: translate(25px,calc( -50vh + 200px )) scale(1) ;
        opacity: 1;
    }
    70%{
        transform: translate(-300px,-500px) rotate(-45deg);
        opacity: 0.8;
    }
    100%{
        transform: rotate(-155deg) scale(10);
        opacity: 0
    }
}

@keyframes notused{
    0%{
        top: -87px;
    }
    10%{
        transform: rotate(5deg);
        top: -87px;
    }
    25%{
        transform: rotate(-10deg);
        top: -87px;
    }
    50%{
        transform: rotate(10deg);
        top: -87px;
    }
    75%{
        transform: rotate(-10deg);
        top: -87px;
    }
    100%{
        transform: rotate(0deg);
        top: -87px;
    }
}
@keyframes drawed{
    100%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
}
@keyframes dissapear{
    80%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
    100%{
        opacity: 0;
    }
}
@keyframes dissapearp{
    100%{
        visibility: hidden;
    }
}
@-keyframes new{
    0%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
    20%{
        transform: rotate3d(0, 1, 0, 0deg)  scale(0.85);
    }
    40%{
    }
    60%{
    }
    80%{
    }
    90%{
    }
    100%{
    }
}


.screen-msgs {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 9999999999999999;
}

.screen-msgs .screen-msg {
    position: absolute;
    top: 150px;
    left: 50%;
    width: unset;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transform: translateX(-50%) translateY(-50%);
    font-family: var(--fontFaimly_semi);
}

.screen-msgs .screen-msg .screen-msg-content {
    animation:blink 100ms linear 2 alternate;
    text-transform: uppercase;
    padding: 2px 6px;
    white-space: nowrap;
    max-width: 600px;
    overflow-wrap: break-word;
}

.screen-msgs .screen-msg.smsg .screen-msg-content {
    background-color: #ffbc00;  /*#ffbc00*/
    color: black;
}

.screen-msgs .screen-msg.expmsg .screen-msg-content {
    background-color: var(--hud_sexp_bar_color); /*rgb(220,146,28)*/
    color: black;
}

.screen-msgs .screen-msg.alertmsg .screen-msg-content {
    background-color: rgb(255,40,40);
    color: black;
}

.combox {
    position: absolute;
    bottom: 25px;
    left: 14px;
    width: 355px;
    max-width: 25%;
    min-width: 255px;
    height: 50%;
    transition: opacity .2s;
    z-index: 100000;
}

.combox:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    right: 0px;
    bottom: 0px;
    top: -40px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_combox);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}


.combox.minimized {
    position: absolute;
    bottom: 25px;
    left: 12px;
    width: 0px;
    height: 0px;
}

.combox.minimized:before {
    display: none;
}

.combox.maximized {

}


.combox .hiliter {
    position: absolute;
    top: -4px;
    left: 0px;
    display: block;
}



.combox.maximized .hiliter {
    display: none;
}

.combox .hiliter .newlog {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 20px;
    display: block;
    background-color: rgba(255,255,255,.85);
    animation: highlited 1000ms linear infinite;
    cursor: pointer;
    position: absolute;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    color: black;
    font-size: 12px;

}

.combox .hiliter .newlog:before {
    content: "";
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    left: 5px;
    bottom: -5px;
    border-top: 5px solid rgba(255,255,255,.85);
}

.combox .hiliter .newmsg {
    position: absolute;
    bottom: 50px;
    left: 2px;
    width: 0px;
    display: block;
    background-image: url(ico/message-64.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center left;
    animation: highlited 1000ms linear infinite;
    cursor: pointer;
    position: absolute;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 12px;
    padding: 0px 0px 0px 25px;

}

.combox .hiliter .newmsg .qty {
    position: absolute;
    box-sizing: border-box;
    display: block;
    top: -4px;
    right: -3px;
    width: 17px;
    height: 17px;
    background-color: #e10303;
    border-radius: 25px;
    color: white;
    padding: 0px;
    font-size: 12px;
    line-height: 17px;
    font-family: var(--fontFaimly_button) !important;
}


.combox .maxminzer {
    position: absolute;
    left: 0px;
    bottom: -19px;
    display: block;
    z-index: 1;
}

.combox.minimized .maxminzer {
    opacity: 1;
}

.combox.maximized .maxminzer {
    opacity: 1;
}

.combox.maximized:hover .maxminzer {
    opacity: 1;
}

.combox .maximize {
    position: absolute;
    height: 20px;
    width: 20px;
    display: none;
    left: 0px;
    bottom: 0px;
    cursor: pointer;
    background-image: url(ico/ico_maximize.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
    box-sizing: border-box;
    /* background-color: rgba(255,255,255,0.05); */
    /* border: 1px solid rgba(255,255,255,0.2); */
    opacity: 0.5;
    margin: 0px;
    padding: 0px;
}

.combox.minimized .maximize {
    display: block;
}

.combox.minimized .maximize:hover {
    animation: blink 100ms linear 2 alternate;
    opacity: 0.8;
}


.combox .minimize {
    position: absolute;
    height: 20px;
    width: 20px;
    display: none;
    left: 0px;
    bottom: 0px;
    cursor: pointer;
    background-image: url('ico/ico_minimize.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
}

.combox.maximized .minimize {
    display: block;
}

.combox .switcher {
    position: absolute;
    top: -30px;
    left: -10px;
    right: 0px;

}

.combox.minimized .switcher {
    display: none;
}


.combox .switcher .switch {
    position: absolute;
    display: block;
    min-width: unset;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 9px;
    width: auto;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    transform: translateX(-50%);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

.combox .switcher .switch:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

.combox .switcher .switch.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

.combox .switcher .switch.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

.combox .switcher .switch.gamelog {
    left: calc((110% / 5) * 1);
}
.combox .switcher .switch.battle {
    left: calc((110% / 5) * 2);
}
.combox .switcher .switch.global {
    left: calc((110% / 5) * 3);
}
.combox .switcher .switch.private {
    left: calc((110% / 5) * 4);
}


.combox .content {
    position: absolute;
    top: 10px;
    left: 27px;
    right: 0px;
    bottom: 41px;
    overflow: hidden;
    padding-left: 0px;
    padding-right: 15px;
}

.combox.minimized .content {
    display: none;
}

.combox.nosend .content {

    bottom: 10px;
}
.combox .content .logs {
    top: 0px;
    position: relative;
    transition: top .2s;
    padding-bottom: 250px;
}



.combox .combox-slider {
    position: absolute;
    top: 0px;
    bottom: 45px;
    left: 0px;
}

.combox.minimized .combox-slider {
    display: none;
}

.combox .combox-slider .up,
.combox .combox-slider .down {
    position: absolute;
    width: 20px;
    height: 25px;
    left: 0px;
    cursor: pointer;
    opacity: .3;
}

.combox .combox-slider .up {
    top: 0px;
    background: url(ico/arrow_combox_up-16.png) top center no-repeat;
}

.combox .combox-slider .down {
    bottom: 0px;
    background:  url(ico/arrow_combox_down-16.png) bottom center no-repeat;
}

.combox .combox-slider .up:hover,
.combox .combox-slider .down:hover {
    animation:blink 100ms linear 2 alternate;
    opacity: 1;
}


.combox .line {
    display: block;
    font-size: 13px;
    margin: 0px;
    color: rgba(150,150,150,0.8);
    padding: 2px 0px;
    transition: color 1s;
    line-height: 17px;
}

.combox .line a {
    color: white;
    text-decoration: underline;
}

.combox .line .whitelink {
    color: black;
    padding: 0px 4px 0px 4px;
    margin: 0px 3px;
    text-transform: uppercase;
    background-color: rgba(255,255,255,1);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
}

.combox .line .whitelink:hover {
    background-color: rgba(255,255,255,1);
    animation: blink 100ms linear 2;
}


.combox .line.new {
    color: rgba(255,255,255,1);
}

.combox .line .il {
    font-size: 10px;

    text-transform: uppercase;
    color: rgba(150,150,150,.8);



}

.combox .line .date {
    font-size: 10px;

    text-transform: uppercase;
    color: rgba(150,150,150,1);
    padding: 0px 5px 0px 0px;


}


.combox .line .from,
.combox .line .to {

    padding: 0px 2px;
    color: rgba(150,150,150,.8);
}

.combox .line .from.clicable,
.combox .line .to.clicable {
    cursor: pointer;
}



.combox .line.in .from,
.combox .line.out .to {
    color: white;

    padding: 0px 2px;
    border-radius: 4px;


}

.combox .line.in .from.online,
.combox .line.out .to.online {
    color: white;
}

.combox .line.in .from.offline,
.combox .line.out .to.offline {
    color: gray;
}

.combox .line .from.clicable:hover,
.combox .line .to.clicable:hover {
    color: black;
    background-color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}


.combox .line.gme .from,
.combox .line.genemy .from {
    color: white;

    padding: 0px 2px;
    border-radius: 4px;


}

.combox .line.gvp {

}

.combox .line.msg {
    color: white;
}

.combox .line.msg .txt .receivedmessage {
    display: block;
    padding: 6px 5px 5px 30px;
    background-image: url(ico/message-64.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: top 6px left 3px;
    cursor: pointer;
}

.combox .line.msg .txt .receivedmessage:hover {
    animation: blink 100ms linear 2 alternate;
}
.combox .line.msg .txt .receivedmessage .mssender {
    display: block;
    border-bottom: 1px solid #8b8b8b;
    padding: 0px 4px 4px 4px;
    margin: 0px 0px 3px 0px;

}
.combox .line.msg .txt .receivedmessage .mssubject {
    display: block;
    padding: 0px 4px 4px 4px;
}

.combox .line.msg .txt .receivedmessage .mspreview {
    display: block;
    color: silver;
    font-size: 12px;
    padding: 0px 4px 4px 4px;
}

.combox .line .txt > .msg .gold  {
    color: gold;
}

.combox .line.gvp .weapon {
    color: rgba(255,255,255,1);
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .weapon.my {
    color: rgba(0,255,255,1);
}

.combox .line.gvp .card {
    color: rgba(0,120,255,1);
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
    white-space: nowrap;

}

.combox .line.gvp .site {
    color: #f9df10;
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
    white-space: nowrap;

}

.combox .line.gvp .cpu {
    color: rgba(200,200,200,1);
    position: relative;
    padding: 0px 4px 0px 18px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .cpu:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 13px;
    background: transparent url(ico/os_cpu-48.png) left center no-repeat;
    background-size: contain;

}

.combox .line.gvp .base {
    color: rgba(200,200,200,1);
    position: relative;
    padding: 0px 4px 0px 18px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .base:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 13px;
    background: transparent url(ico/spaceship_16.png) left center no-repeat;
    background-size: contain;
}



.combox .line.gvp .station {
    color: rgba(255,255,255,1);
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .astronaut {
    color: rgba(255,192,135,1);
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .gamestore {
    color: rgba(255,215,0,1);
    position: relative;
    padding: 0px 4px 0px 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.combox .line.gvp .gamestore:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 20px;
    background: transparent url(ico/os_store_40.png) left center no-repeat;
    background-size: contain;
}

.combox .line.gvp .game {
    color: rgba(255,215,0,1);
    padding: 0px 4px 0px 0px;
    text-transform: uppercase;
}

.combox .line.gvp .game.neg {
    color: rgba(255,85,0,1);
}


.combox .line.fvp {

}

.combox .line.fvp.new {

}

.combox .line.fvp .weapon {
    color: rgba(255,255,255,1);

    padding: 0px 4px 0px 0px;

    text-transform: uppercase;

}

.combox .line.fvp .weapon.my {
    color: rgba(0,255,255,1);
}

.combox .line.fvp .card {
    color: rgba(0,120,255,1);

    padding: 0px 4px 0px 0px;
    font-size: 15px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}

.combox .line.fvp .game {
    color: rgba(255,215,0,1);

    padding: 0px 4px 0px 0px;
    font-size: 15px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}
.combox .line.fvp .game.neg {
    color: rgba(255,85,0,1);
}

.combox .line.cli {
    font-size: 12px;
    color: rgba(0,255,255,.8);
}
.combox .line.cli.new {
    color: rgba(0,255,255,.8);
}

.combox .line.genemy.new {
    color: rgba(255,255,255,1);
}
.combox .line.genemy {
    color: rgba(150,150,150,0.8);
}



.combox .sender {
    position: absolute;
    bottom: 0px;
    left: -5px;
    right: 0px;
    height: 36px;

    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
}

.combox.minimized .sender {
    display: none;
}

.combox.nosend .sender {
    display:none;
}
.combox .sender .imtext {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: calc(100% - 150px);
    height: 30px;
    padding: 0px 10px;
    margin: 0px;
    line-height: 30px;
    font-size: 13px;
    text-align: left;
    box-sizing: border-box;
    text-transform: none;
    border: 0px solid transparent;
    color: white;
}
.combox .sender .implayer {
    position: absolute;
    bottom: 5px;
    right: 34px;
    width: 107px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-transform: uppercase;
}

.combox .sender .implayer .online {
    color: black;
}
.combox .sender .implayer .offline {
    color: gray;
}
.combox .sender .imsend {
    position: absolute;
    bottom: 5px;
    right: 7px;
    width: 20px;
    height: 30px;
    padding: 0px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
}

.combox .sender .imsend:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    background-image: url(ico/arrow-24-32.png);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}
.combox .sender .imsend:hover {
    animation: blink 100ms linear 2 alternate;
}


.combox .sender .imsend:not(.disabled){
    cursor: pointer;
}
.combox .sender .imsend:not(.disabled):hover{
    filter: invert(1);
    animation:blink 100ms linear 2 alternate;
}

.combox .sender .imsend.disabled {
    position: absolute;
}

#battledom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10000;
}

#battledom #controls{
    display: block;
    position: absolute;
    bottom: 25px;
    left: 40px;
    height: 0px;
    text-align: left;
}



#battledom #controls .controls-sup{
    display: block;
}

#battledom #controls .controls-sub{
    display: none;

}

#battledom #controls.sub .controls-sup{
    display: none;

}


#battledom #controls.sub .controls-sub{
    display: block;
    animation: blink 100ms linear 2 alternate;

}

#battledom #controls .button-shrotcut .thint{
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    right: unset;

}

#battledom #controls .button-shrotcut .thint:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    position: absolute;
    bottom: -20px;
    top: unset;
    right: calc(50% - 10px);
}

#battledom #abilities{
    display: block;
    position: absolute;
    bottom: 78px;
    height: 0px;

    text-align: right;
    right: calc(50% - 260px);
}

#battledom > #abilities{
    white-space: nowrap;
}

#battledom #abilities .separator{
    display: inline-block;
    position: relative;
    bottom: 0px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    width: 3px;
    margin: 0px 4px;
    line-height: 25px;
    z-index: 1;
    padding: 0px 0px;

}

#battledom #abilities .separator:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%);
    background-repeat: no-repeat;
    background-size:1px calc(100% - 5px);
    background-position: center;
}

#battledom #abilities .beltitem{
    display: inline-block;
    position: relative;
    bottom: 0px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    width: 26px;
    margin: 0px 4px;
    line-height: 25px;
    z-index: 1;
    padding: 0px 0px;
    cursor: pointer;
}


#battledom #abilities .beltitem.hidden {
    display: none;
}

#battledom #abilities .beltitem.empty{
    display: inline-block;

    position: relative;
    bottom: 0px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    width: 26px;
    margin: 0px 4px;
    line-height: 25px;
    z-index: 1;
    padding: 0px 0px;
    opacity: 0.4;
}



#battledom #abilities .beltitem.empty:hover{
    opacity: 1;
}

#battledom #abilities .beltitem:not(.empty):hover:after {
    background-image:
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color2-hover) 0%, var(--border-beltitem-color2-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color2-hover) 0%, var(--border-beltitem-color2-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitem-color-hover) 0%, var(--border-beltitem-color-hover) 100%);

}

#battledom #abilities .beltitem:before {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    filter: opacity(0.8);
    background-color: var(--background-command-fleets-effect-color);

}

#battledom #abilities .beltitem.empty:before {
    background-image:url(ico/belt_plus_32.png);
    background-size: 12px;
    background-position:center;
    background-repeat: no-repeat;
}

#battledom #abilities .beltitem.empty:hover:after {
    background-image:
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color2-hover) 0%, var(--border-beltitemempty-color2-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color2-hover) 0%, var(--border-beltitemempty-color2-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%),
        linear-gradient(0deg, var(--border-beltitemempty-color-hover) 0%, var(--border-beltitemempty-color-hover) 100%);

    background-size:

        calc(100% - 4px) 1px,

        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        36% 3px,
        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,
        bottom center,
        bottom 1px center;
}

#battledom #abilities .beltitem:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color2) 0%, var(--border-beltitem-color2) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color2) 0%, var(--border-beltitem-color2) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%),
        linear-gradient(0deg, var(--border-beltitem-color) 0%, var(--border-beltitem-color) 100%);
    background-repeat: no-repeat;
    background-size:

        calc(100% - 4px) 1px,

        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        36% 3px,
        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,
        bottom center,
        bottom 1px center;
}



#battledom #abilities .beltitem .thintdom{

    position: absolute;

}

#battledom #abilities .beltitem .thintdom .thint{

    position: absolute;
    top: 0px;

}

#battledom #abilities .beltitem .img{
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
}



#battledom #abilities .beltitem:hover .ability-subtext,
#battledom #abilities .ability:hover .ability-subtext{
    display: block;
}

#battledom #abilities .beltitem .ability-subtext,
#battledom #abilities .ability .ability-subtext{
    position: absolute;
    display: none;
    right: 50%;
    min-width: 150px;
    transform: translateX(50%);
    font-size: 12px;
    bottom: calc(100% + 5px);
    background-color: var(--subtext_color-background);
    padding: 9px 12px 6px;
    ;
    box-sizing: border-box;
    z-index: 1000;
    line-height: initial;
    text-align: left;
    color: var(--subtext_color);
    animation: var(--animation-subtext-fadeinFast);
    filter: var(--subtext_shadow);
    pointer-events: none;
    white-space: normal;
}

#battledom #abilities .beltitem .ability-subtext:before,
#battledom #abilities .ability .ability-subtext:before{
    content: "";
    display: block;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    right: calc(50% - 10px);
    border-top: 10px solid var(--subtext_color-background);

}

#battledom #abilities .ability .ability-subtext .bname,
#battledom #abilities .beltitem .ability-subtext .bname {
    display: block;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
}

#battledom #abilities .ability .ability-subtext .ftitle,
#battledom #abilities .beltitem .ability-subtext .ftitle {
    display: block;
    color: #347156;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 3px 0px;
}

#battledom #abilities .beltitem .ability-subtext .ftxt {
    font-size: 12px;
    padding-top: 5px;
    display: block;
}

#battledom #abilities .beltitem .ability-subtext .fline {
    display: block;
    height: 10px;
    position: relative;
}

#battledom #abilities .beltitem .ability-subtext .fline:before {
    content: '';
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: calc(50% - 0px);
    height: 3px;
    background-color: #ffffff3b;
    clip-path: var(--clip_underline);
}

#battledom #abilities .beltitem .ability-subtext .fqty {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0px 0px;
    color: #d5d5d5;
    font-size: 12px;
    line-height: 20px;
}

#battledom #abilities .beltitem .ability-subtext .fqty span.cuseddeck,
#battledom #abilities .beltitem .ability-subtext .fqty span.cusedhand,
#battledom #abilities .beltitem .ability-subtext .fqty span.cusedbase,
#battledom #abilities .beltitem .ability-subtext .fqty span.cusedstation,
#battledom #abilities .beltitem .ability-subtext .fqty span.total{
    display: inline-block;
    padding: 0px 5px 0px 23px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 5px center;
}

#battledom #abilities .beltitem .ability-subtext .fqty span.cuseddeck {
    background-image: url(ico/deck_32.png);
}

#battledom #abilities .beltitem .ability-subtext .fqty span.cusedhand {
    background-image: url(ico/bs_hand_32.png);
}

#battledom #abilities .beltitem .ability-subtext .fqty span.cusedbase {
    background-image: url(ico/ico_card_ship.png);
}

#battledom #abilities .beltitem .ability-subtext .fqty span.cusedstation {
    background-image: url(ico/ico_card_station.png);
}

#battledom #abilities .beltitem .ability-subtext .fqty span.total {
    background-image: url(ico/ico_sum_32.png);
    background-size: 12px;
}

#battledom #abilities .beltitem .ability-subtext .afncname {
    display: block;
    color: #ffbc00;
    padding: 3px 0px 0px;

}

#battledom #abilities .beltitem .ability-subtext .sinfobox {
    display: block;
    font-size: 12px;

}

#battledom #abilities .ability{
    display: inline-block;
    position: relative;
    bottom: 0px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    margin: 0px 4px;
    line-height: 25px;
    z-index: 1;
    padding: 0px 0px;
}

#battledom #abilities .ability.hidden {
    display: none;
}

#battledom #abilities .ability:hover:after {
    background-image:
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color2-hover) 0%, var(--border-ability-color2-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color2-hover) 0%, var(--border-ability-color2-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%),
        linear-gradient(0deg, var(--border-ability-color-hover) 0%, var(--border-ability-color-hover) 100%);
}

#battledom #abilities .ability.waiting:hover:after {
    background-image:
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color2-disabled) 0%, var(--border-ability-color2-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color2-disabled) 0%, var(--border-ability-color2-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%),
        linear-gradient(0deg, var(--border-ability-color-disabled) 0%, var(--border-ability-color-disabled) 100%);
}

#battledom #abilities .ability.activated:after {
    background-image:
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color2-activated) 0%, var(--border-ability-color2-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color2-activated) 0%, var(--border-ability-color2-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%),
        linear-gradient(0deg, var(--border-ability-color-activated) 0%, var(--border-ability-color-activated) 100%);
}

#battledom #abilities .ability.activated .img{
    animation: ability_activated 1.8s infinite;
}



#battledom #abilities .ability.prepared:after {
    background-image:
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color2-prepared) 0%, var(--border-ability-color2-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color2-prepared) 0%, var(--border-ability-color2-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%),
        linear-gradient(0deg, var(--border-ability-color-prepared) 0%, var(--border-ability-color-prepared) 100%);
}

#battledom #abilities .ability.prepared .img{
    animation: ability_prepared 1.2s infinite;
}

#battledom #abilities .ability:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color2) 0%, var(--border-ability-color2) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color2) 0%, var(--border-ability-color2) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%),
        linear-gradient(0deg, var(--border-ability-color) 0%, var(--border-ability-color) 100%);
    background-repeat: no-repeat;
    background-size:

        calc(100% - 4px) 1px,

        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        1px calc(20% - 2px),
        1px calc(60% - 4px),
        1px calc(20% - 2px),
        36% 3px,
        calc(100% - 4px) 1px;
    background-position:
        top 1px center,
        top 2px left 1px,
        center left 1px,
        bottom 2px left 1px,
        top 2px right 1px,
        center right 1px,
        bottom 2px right 1px,
        bottom center,
        bottom 1px center;
}



#battledom #abilities .ability .thintdom{
    position: absolute;
}

#battledom #abilities .ability .thintdom .thint{
    top: 7px;
    right: calc(100% - 5px);
}

#battledom #abilities .ability:not(.waiting) {
    cursor: pointer;
}

#battledom #abilities .ability .picon {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    border: 1px solid rgba(255,255,255,.5);
    box-sizing: border-box;
}



#battledom #abilities .ability.waiting .img {
    filter:grayscale(1) brightness(0.26) contrast(1.1);
}

#battledom #abilities .ability.waiting:after {
    filter:grayscale(1) brightness(0.26) contrast(0.9);
}

#battledom #abilities .ability .pbarbox {
    display: none;
}

#battledom #abilities .ability.waiting .pbarbox {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 8px;
}
#battledom #abilities .ability .pbarbox .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(255,255,255,1);
}


#battledom #abilities .ability .ptimer {
    display: block;
    position: absolute;

    left: -10px;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: white;
    white-space: nowrap;
    text-overflow: clip;

    line-height: 11px;
    font-size: 12px;
    z-index: 100;

    /*text-shadow: var(--shadow_textfull);*/

}

#battledom #abilities .ability.waiting:hover .ptimer {
    display: block;
}


#battledom #abilities .ability:not(.waiting):hover .img{
    /*animation: blink 100ms linear 2 alternate;*/
}

#battledom #abilities .ability .img{
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
}







#battledom #abilities .ability .ability-subtext .afncname {
    display: block;
    color: #ffbc00;
    padding: 3px 0px 0px;

}

#battledom #abilities .ability .ability-subtext .sinfobox {
    display: block;
    font-size: 12px;

}

#battledom #controls .ctrl{
    display: inline-block;
    position: relative;

    color: gray;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;

    font-family: var(--fontFaimly_button);
    height: 18px;
    min-width: 5px;
    margin: 0px;
    margin-right: 2px;
    line-height: 18px;


    z-index: 1;
    padding: 0px 8px;
}

#battledom #controls .ctrl:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,0);

    clip-path: var(--clip_controllink);
    z-index: -1;
}



#battledom #controls .ctrl .thint{

}
#battledom #controls .ctrl:hover{
    animation: blink 100ms linear 2 alternate;
    color: rgba(0,0,0,1);

}

#battledom #controls .ctrl:hover:after{
    display: block;
}

#battledom #controls .ctrl:hover:before{
    background-color: rgba(255,255,255,.8);
}


#battledom #controls .ctrl:after{
    content: '';
    display: none;
    position: absolute;
    top: -20px;
    left: 0px;
    color: rgba(255,255,255,.6);

    font-size: 10px;
    white-space: nowrap;

    font-size: 10px;
    text-shadow: var(--shadow_textfull);
    text-align: left;
    padding-left: 4px;
}



#battledom #controls .ctrl.undock:after{
    content: 'UNDOCK';
}

#battledom #controls .ctrl.closew:after{
    content: 'DEFAULT';
}

#battledom #controls .ctrl .thint{
    animation: highlited 1000ms linear infinite;
    left: 50%;
    text-align: center;
    bottom: 30px;
    /* width: 50px; */
    top: unset;
    right: unset;
    transform: translateX(-50%);
}

#battledom #controls .ctrl .thint:before{
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}

#battledom #controls .ctrl.closew:after{
    content: 'EXIT TACTICAL VIEW';
}

#battledom #controls .ctrl.hudmaphide:after{
    content: 'EXIT MAP';
}

#battledom #controls .ctrl.flightw:after{
    content: 'SET FLIGHT';
}

#battledom #controls .ctrl.rotw:after{
    content: 'ROTATE';
}


#battledom #controls .ctrl.rolll:after{
    content: 'ROLL LEFT';
}

#battledom #controls .ctrl.rollr:after{
    content: 'ROLL RIGHT';
}

#battledom #controls .ctrl.clearrmap:after{
    content: 'CANCEL';
}


#battledom #controls .ctrl.tactmap:after{
    content: 'TACTICAL VIEW';
}

#battledom #controls .ctrl.tactzoom:after{
    content: 'ZOOM';
}


#battledom #controls .ctrl.lockallw:after{
    content: 'AUTOLOCK';
}



#battledom #controls .ctrl.autograb:after{
    content: 'AUTOGRAB';
}

#battledom #controls .ctrl.mapzoomin:after{
    content: 'ZOOM IN';
}

#battledom #controls .ctrl.mapzoomout:after{
    content: 'ZOOM OUT';
}

#battledom #controls .ctrl.drawvmap:after{
    content: 'CONFIRM FLIGHT';
}

#battledom #controls .ctrl.centership:after{
    content: 'CENTER';
}
#battledom #controls .ctrl.swichangle:after{
    content: 'SWICH VIEW';
}
#battledom #controls .ctrl.sectormap:after{
    content: 'MAP';
}

#battledom #controls .ctrl.clearvmap:after{
    content: 'CANCEL';
}

#battledom #controls .ctrl.stopflight:after{
    content: 'STOP';
}

#battledom #controls .ctrl.tradelink:after{
    content: 'TRADELINK';
}

#battledom #controls .ctrl.shiplist:after{
    content: 'SPACECRAFTS';
}

#battledom #controls .ctrl.hudhide:after{
    content: 'HIDE/SHOW HUD';
}

#battledom #controls .ctrl.cardshudhide:after{
    content: 'HIDE/SHOW CARDS HAND';
}


#battledom #controls .ctrl.ctrl.deckswich:after{
    content: 'HIDE/SHOW DECK';
}

#battledom #controls .ctrl.hud_ship_model:after{
    content: 'ENLARGE SPACECRAFT';
}


#battledom #controls .ctrl.mb:after {
    left: calc(100% + 13px);
}

#battledom #controls .ctrl .iconrmb {
    display: block;
    background-image: url(ico/ico_inline_rmb_black.png);
    background-size: 9px;
    background-position: center;
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
    margin: 0px;
    box-sizing: border-box;
    position: absolute;
    right: -18px;
    top: 0px;
    filter: invert(1);
    opacity: 0.8;
}

#battledom #controls .ctrl .iconmmb {
    display: block;
    background-image: url(ico/ico_inline_mmb_black.png);
    background-size: 9px;
    background-position: center;
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
    margin: 0px;
    box-sizing: border-box;
    position: absolute;
    right: -18px;
    top: 0px;
    filter: invert(1);
    opacity: 0.8;
}




#battledom .weapons {
    position: absolute;
    left: 10px;
    bottom: 0px;
    display: block;
    right: 10px;
    height: 0px;
    text-align: center;
}



#battledom .weapons .info{
    color: black;
    text-transform: uppercase;
    padding: 0px 0px;
    font-size: 10px;

    position: relative;
    bottom: 90px;
    white-space: nowrap;

    background-color: var(--hud_invalid_background);
    animation: blink 100ms linear 2 alternate;
    text-shadow: none;
    padding: 2px 6px;
    display: inline-block;
}
#battledom .weapons.hidden {
    opacity: .2
}

#battledom .weapons .weapontrigger {
    display: inline-block;
    position: relative;
    width: 85px;
    height: 0px;
    text-align: center;
    margin: 0px 4px 0px;
    text-transform: uppercase;
    padding: 0px;
    box-sizing: border-box;
    color: white;
}
/*
#battledom .weapons .weapontrigger.active:hover { 
   background-color: white;
   animation: blink 100ms linear 2 alternate;
}
*/
/*
#battledom .weapons .weapontrigger.active:hover .health { 
   filter: invert(1);
} 
*/
#battledom .weapons .clicker {
    position: absolute;
    width: 85px;
    height: 80px;
    text-align: center;
    box-sizing: border-box;
    bottom: 100px;
}

#battledom .weapons .weapontrigger .topname {
    position: absolute;
    bottom: -12px;
    left: 0px;
    right: 0px;
    text-align: center;
    line-height: 11px;
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(255,255,255,.2);
    text-shadow: var(--shadow_textfull);


}

#battledom .weapons .weapontrigger .bckg{
    display: block;
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: -9px;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(1px) brightness(90%) grayscale(1)  ;
    transition: filter 0.3s;
}

#battledom .weapons .weapontrigger.active:not(.waiting) .bckg{
    filter: grayscale(0);
}


#battledom .weapons .weapontrigger:before {
    display: block;
    content: '';
    position: absolute;
    width: 10px;
    top: -187px;
    left: 0px;
    height: 50px;
    border-top: 2px solid rgba(255,255,255,0);
    border-left: 2px solid rgba(255,255,255,0);
    border-bottom: 2px solid rgba(255,255,255,0);

}

#battledom .weapons .weapontrigger:after {
    display: block;
    content: '';
    position: absolute;
    width: 10px;
    top: -187px;
    right: 0px;
    height: 50px;
    border-bottom: 2px solid rgba(255,255,255,0);
    border-right: 2px solid rgba(255,255,255,0);
    border-top: 2px solid rgba(255,255,255,0);

}

#battledom .weapons .weapontrigger.active {
    cursor: pointer;
    animation: blink 100ms linear 2 alternate;
}

#battledom .weapons .weapontrigger.active .bckg{

}

#battledom .weapons .weapontrigger.active:before {
    border-top: 2px solid rgba(255,255,255,1);
    border-left: 2px solid rgba(255,255,255,1);
    border-bottom: 2px solid rgba(255,255,255,1);
}

#battledom .weapons .weapontrigger.active:after {
    border-bottom: 2px solid rgba(255,255,255,1);
    border-right: 2px solid rgba(255,255,255,1);
    border-top: 2px solid rgba(255,255,255,1);
}

#battledom .weapons .weapontrigger.active:not(.waiting):before {
    animation:highlited 550ms linear infinite;
}

#battledom .weapons .weapontrigger.active:not(.waiting):after {
    animation:highlited 550ms linear infinite;
}



#battledom .weapons .weapontrigger.active .topname {
    color: white;
}

#battledom .weapons .weapontrigger.active .info {
    color: white;
}




#battledom .weapons .weapontrigger.waiting:before {
    border-top: 2px solid rgba(255,255,255,0);
    border-left: 2px solid rgba(255,255,255,0);
    border-bottom: 2px solid rgba(255,255,255,0);
    /*animation:highlited 400ms linear infinite; */
}
#battledom .weapons .weapontrigger.waiting:after {
    border-bottom: 2px solid rgba(255,255,255,0);
    border-right: 2px solid rgba(255,255,255,0);
    border-top: 2px solid rgba(255,255,255,0);
    /*animation:highlited 400ms linear infinite; */
}

#battledom .weapons .weapontrigger.waiting.active:before {
    border-top: 2px solid rgba(255,255,255,.5);
    border-left: 2px solid rgba(255,255,255,.5);
    border-bottom: 2px solid rgba(255,255,255,.5);
    /*animation:highlited 400ms linear infinite;*/
}
#battledom .weapons .weapontrigger.waiting.active:after {
    border-bottom: 2px solid rgba(255,255,255,.5);
    border-right: 2px solid rgba(255,255,255,.5);
    border-top: 2px solid rgba(255,255,255,.5);
    /*animation:highlited 400ms linear infinite;*/
}




#battledom .weapons .weapontrigger.hidden {
    opacity: .5;
}
#battledom .weapons .weapontrigger.hidden:before {
    border-top: 1px solid rgba(255,255,255,0);
    border-left: 1px solid rgba(255,255,255,0);
    border-bottom: 1px solid rgba(255,255,255,0);

}
#battledom .weapons .weapontrigger.hidden:after {
    border-bottom: 1px solid rgba(255,255,255,0);
    border-right: 1px solid rgba(255,255,255,0);
    border-top: 1px solid rgba(255,255,255,0);
}

#battledom .weapons .weapontrigger .info {
    position: absolute;
    height : 0px;
    left: 4px;
    right: 4px;
    bottom: 2px;
    color: rgba(255,255,255,1);

    text-transform: none;
    padding: 0px;
    text-align: center;
    letter-spacing: 0px;
    background-color: transparent;
    text-shadow:var(--shadow_textfull);
}

#battledom .weapons .weapontrigger .info .range {
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
    padding: 3px 0px;
    font-size: 10px;

    margin-top: 10px;
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 8px;


}



#battledom .weapons .weapontrigger .info .att {
    position: absolute;
    text-transform: uppercase;
    background-color: transparent;
    color: rgb(254,182,30);
    font-size: 14px;
    text-align: center;


    padding: 0px;
    bottom: 56px;
    height: 25px;
    line-height: 30px;
    left: 0px;
    right: 0px;
}




#battledom .weapons .weapontrigger.waiting .info .att {
    background-color: rgb(100,100,100);
}

#battledom .weapons .weapontrigger .info .acc {
    position: absolute;
    bottom: 38px;
    text-transform: uppercase;
    background-color: transparent;
    color: rgba(200,200,200,1);
    font-size: 10px;
    left: 0px;
    text-align: center;
    right: 0px;

    padding: 0px 0px;
    overflow: hidden;
}


#battledom .weapons .weapontrigger .info .timer {
    position: absolute;
    text-transform: uppercase;
    background-color: rgb(254,182,30);
    color: rgba(255,255,255,1);
    font-size: 12px;
    text-align: center;

    line-height: 16px;
    padding: 1px 0px;
    bottom: 35px;
    left: 0px;
    right: 0px;
}

#battledom .weapons .weapontrigger .info .etarget {
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
    padding: 3px 0px;
    font-size: 10px;

    margin-top: 10px;
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 8px;
}

#battledom .weapons .weapontrigger .info .etarget.no {

}

#battledom .weapons .weapontrigger .info .eweapon {
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
    padding: 3px 0px;
    font-size: 10px;

    margin-top: 10px;
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 8px;
}


#battledom .weapons .weapontrigger .stimer {
    position: absolute;
    bottom: -24px;
    display: none;
    right: 4px;
    left: 4px;
    text-align: center;
    font-size: 8px;
    color: rgba(200,200,200,.15);

    text-transform: none;
    padding: 0px;

}

#battledom .weapons .weapontrigger .autofire {
    position: absolute;
    bottom: 80px;
    width: 20px;
    height: 20px;
    left: 5px;
    cursor: pointer;
    background-image: url(ico/weapon_autofire.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
}
#battledom .weapons .weapontrigger .autofire.disabled {
    background-image: url(ico/weapon_autofire_dis.png);
}


#battledom .weapons .weapontrigger .autofire:hover {

}

#battledom .weapons .weapontrigger .autofire.disabled:hover {

}

#battledom .weapons .weapontrigger .autofire .thint {
    animation: none;
    left: -16px;
    text-align: center;
    bottom: 30px;
    top: unset;
    right: unset;
}

#battledom .weapons .weapontrigger .autofire .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}


#battledom .weapons .weapontrigger .autorot {
    display: block;
    position: absolute;
    bottom: 80px;
    width: 20px;
    height: 20px;
    right: 5px;
    cursor: pointer;
    background-image: url(ico/weapon_autorot.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;

}

#battledom .weapons .weapontrigger .autorot:hover {

}


#battledom .weapons .weapontrigger .autorot .thint {
    animation: none;
    left: -15px;
    width: 50px;
    text-align: center;
    bottom: 30px;
    top: unset;
    right: unset;
    box-sizing: border-box;
}

#battledom .weapons .weapontrigger .autorot .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
    animation: none;
}


#battledom .weapons .weapontrigger .ammo {
    position: absolute;
    top: -12px;
    right: 4px;
    left: 4px;
    text-align: center;
    font-size: 10px;
    color: rgba(255,255,255,.2);

    text-transform: none;
    padding: 0px;

    text-shadow: var(--shadow_textfull);
}

#battledom .weapons .weapontrigger.active .ammo {
    color: rgba(255,255,255,1);
}

#battledom .weapons .weapontrigger .health {
    display: block;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 4px;
    background-color: rgb(50,50,50);
    font-size: 10px;
    color: black;

    line-height: 10px;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
}

#battledom .weapons .weapontrigger .health .bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(150,150,150);
}
#battledom .weapons .weapontrigger.active .health {
    background-color: rgb(100,100,100);
}

#battledom .weapons .weapontrigger.active .health .bar {
    background-color: rgb(255,255,255);
}

#battle-receivingproj {
    max-width: calc(50% - 245px - 120px);
    position: absolute;
    left: 245px;
    top: 10px;
    height: 16px;
    color: white;
    z-index: 10000;
}

#battle-receivingproj .receivingproj {
    display: inline-block;
    position: relative;
    height: 24px;
    width: 24px;
    margin: 0px 2px 2px 0px;
}

#battle-receivingproj .receivingproj .picon {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255,255,255,.5);
    box-sizing: border-box;
}

#battle-receivingproj .receivingproj .pbarbox {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#battle-receivingproj .receivingproj .pbarbox .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(255,255,255,.5);
}


#battle-receivingproj .receivingproj .ptimer {
    display: none;
    position: absolute;
    top: 0px;
    left: 16px;
    bottom: 0px;
    color: white;
    white-space: nowrap;
    text-overflow: clip;
    text-align: left;

    font-size: 10px;
    z-index: 100;
    padding: 0px 3px;
    line-height: 16px;
    background-color: rgba(0,0,0,.8);
}
#battle-receivingproj .receivingproj:hover .ptimer {
    display: block;
}


#battle-locks {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
}

#battle-locks .lock {
    position: relative;
    height:60px;
    color: white;
    width: 0px;
    box-sizing: border-box;
    margin: 15px 0px;
    font-family: var(--fontFaimly_button);
}

#battle-locks .lock.selected {
}
#battle-locks .lock.selected .projectyles  {
    display: block;
}


#battle-locks .lock .thintdom  {
    position: absolute;
    right: -150px;
    top: 0px;

}

#battle-locks .lock .thintdom .thint {
    left: 0px;
    right: unset;
    top: 8px;
    right: unset;

}

#battle-locks .lock.selected .thintdom .thint.quest91 {
    display: none !important;
}

#battle-locks .lock .thintdom .thint:before  {
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--color-thint);
    border-top: 10px solid transparent;
    border-left: none;
    position: absolute;
    left: -10px;
    right: unset;
    top: 3px;
    bottom: unset;
}





#battle-locks .lock .unlock .thint {
    left: unset;
    right: -58px;
    top: -5px;

}

#battle-locks .lock .unlock .thint:before  {
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--color-thint);
    border-top: 10px solid transparent;
    border-left: none;
    position: absolute;
    left: -10px;
    right: unset;
    top: 3px;
    bottom: unset;
}

#battle-locks .lock .unlock:hover .thint  {
    visibility: hidden;
}



#battle-locks .lock .projectyles {
    display: block;
    position: absolute;
    left: 50px;

    font-size: 10px;
    top: 33px;
    height: 16px;
    white-space: nowrap;
    z-index: 10000;
}




#battle-locks .lock .projectyles .inprojectyle {
    display: inline-block;
    position: relative;
    height: 16px;
    width: 16px;
    margin: 0px 2px 2px 0px;


}

#battle-locks .lock .projectyles .inprojectyle .picon {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    border: 1px solid rgba(255,255,255,.5);
    box-sizing: border-box;
}

#battle-locks .lock .projectyles .inprojectyle .pbarbox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 16px;
    height: 16px;

}
#battle-locks .lock .projectyles .inprojectyle .pbarbox .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(255,255,255,.5);
}

#battle-locks .lock .projectyles .inprojectyle .ptimer {
    display: none;
    position: absolute;
    top: 0px;
    left: 16px;
    bottom: 0px;
    color: white;
    white-space: nowrap;
    text-overflow: clip;
    text-align: left;

    font-size: 10px;
    z-index: 100;
    padding: 0px 3px;
    line-height: 16px;
    background-color: rgba(0,0,0,.8);
}
#battle-locks .lock .projectyles .inprojectyle:hover .ptimer {
    display: block;
}

#battle-locks .lock .index {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-sizing: border-box;
}



#battle-locks .lock .index span {
    position: absolute;
    top: 16px;
    left: -4px;
    width: 18px;
    font-size: 10px;
    text-align: center;
    line-height: 18px;
    height: 18px;
    color: white;
    background: black;


    z-index: 10;
}

#battle-locks .lock.selected .index span {
    color: black;
    background: white;
}

#battle-locks .lock .index .img {
    position: absolute;
    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    box-sizing: border-box;
    filter: brightness(1.5) grayscale(1);
}

#battle-locks .lock .index .img img {
    width: 90%;
    object-fit: contain;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    filter: var(--shadow_drpofull);
}

#battle-locks .lock.b  {
    height: 70px;
}

#battle-locks .lock.b .index  {
    height: 80px;
    width: 190px;
}


#battle-locks .lock.s  {
    height: 100px;
}

#battle-locks .lock.s .index  {
    height: 100px;
    width: 190px;
}

#battle-locks .lock.s .index .img {
    background-position: center;
    left: -120px;
    filter: brightness(1.2) grayscale(1);
}


#battle-locks .lock.selected .index:before {
    border-top: 1px solid rgba(255,255,255,1);
    border-left: 1px solid rgba(255,255,255,1);
    border-bottom: 1px solid rgba(255,255,255,1);
}

#battle-locks .lock.selected .index:after {
    border-bottom: 1px solid rgba(255,255,255,1);
    border-right: 1px solid rgba(255,255,255,1);
    border-top: 1px solid rgba(255,255,255,1);
}

#battle-locks .lock.locking .index {
    background: black;
    background-image: none !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;

}

#battle-locks .lock.locking .index .img {
    background: black;
    background-image: url(./effects/glitch1.gif) !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;

}

#battle-locks .lock.locking .index:before {
    border-top: 2px solid rgba(255,255,255,1);
    border-left: 2px solid rgba(255,255,255,1);
    border-bottom: 2px solid rgba(255,255,255,1);
    animation:highlited 1000ms linear infinite;
}

#battle-locks .lock.locking .index:after {
    border-bottom: 2px solid rgba(255,255,255,1);
    border-right: 2px solid rgba(255,255,255,1);
    border-top: 2px solid rgba(255,255,255,1);
    animation:highlited 1000ms linear infinite;
}

#battle-locks .lock .namebox {
    position: absolute;
    top: -5px;
    left: 50px;
    line-height: 15px;
    color: white;
    padding: 2px 2px 2px 4px;
    z-index: 10000;
    cursor: pointer;
    white-space: nowrap;
}

#battle-locks .lock.selected .namebox {
    color: black;
    background-color: white;
}

#battle-locks .lock .namebox .label {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    white-space: nowrap;
}

#battle-locks .lock .namebox .unlock {
    display: inline-block;
    margin: 0px 0px 0px 6px;
    background-color: white;
    text-align: center;
    color: black;
    z-index: 100;
    width: 12px;
    height: 12px;
    cursor: pointer;
    opacity: 1;
    background: rgba(255,255,255,.5) url(ico/close_log.png) center no-repeat;
    background-size: 8px;

    z-index: 100000;
}
#battle-locks .lock .namebox .unlock:hover {
    background-color: white;
    filter: invert(100%);
}






#battle-locks .lock .distance {
    display: block;
    position: relative;

    font-size: 10px;
    line-height: 14px;

}

#battle-locks .lock:not(.selected) .namebox .distance {
    text-shadow: var(--shadow_textfull);

}

#battle-locks .lock:not(.selected) .namebox .label {
    text-shadow: var(--shadow_textfull);

}


#battle-locks .lock .health {
    position: absolute;
    top: 43px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    z-index: 100;
    display: block;
    left: -5px;
    width: 50px;
    height: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

#battle-locks .lock .healthbar {
    position: absolute;
    bottom: 0px;
    background-color: white;
    display: block;
    left: 0px;
    top: 0px;
}



#battle-locks .lock.locking .health {
    display: none;
}

#deploy-item{
    position: absolute;
    width: 450px;
    height: 550px;
    top: calc(50% - 240px);
    left: calc(50% - 300px);

}

#deploy-item:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#deploy-item table {
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    position: absolute;
    top: 65px;
    left: 0px;
}
#deploy-item table td {
    font-size:15px;
    color:rgba(255,255,255,1);
    padding: 5px 20px;
}
#deploy-item table td.img {
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#deploy-item table td.name {
    text-align: center;
    font-size: 30px;
    color: rgb(255,255,255);

    text-transform: uppercase;
}
#deploy-item table td.type {
    text-align:center;
    padding:5px;
}
#deploy-item table td.price {
    text-align:left;
    padding-left: 30%;
}
#deploy-item table td.qty {
    text-align:left;
    padding-left: 30%;
    padding-top: 30px;
}
#deploy-item table td.qty .qty {
    padding-left: 5px;
}
#deploy-item table td.qty input {
    width: 100px;
    text-align: center;
    margin-right: 10px;
}
#deploy-item table td.space {
    text-align:center;
    font-size: 13px;
    padding-top: 10px;
}
#deploy-item table td.totalprice {
    text-align: center;
    font-size: 30px;
    color: rgb(0,255,255);
    padding: 15px 0px 11px 0px;
    letter-spacing: 0px;
}
#deploy-item table td.actions{
    text-align:center;
    padding-top: 30px;
}

#deploy-item table td.actions button .thint{
    top: 2px;
}


#cmbox{
    position: absolute;
    width: 650px;
    height: 550px;
    top: calc(50% - 240px);
    left: calc(50% - 300px);

}

#cmbox:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
    background-position: center center;
}

#cmbox .image{
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center top;
    background-repeat: no-repeat;
    animation: crt 10000ms linear infinite;
    filter: brightness(0.3) grayscale(0.5);
}

#cmbox .html{
    position: absolute;
    left: 40px;
    right: 40px;
    top: 70px;
    color: white;
    text-align: center;
    font-size: 12px;
}

#cmbox .html table{
    width: 80%;
    margin: 40px auto 0px;
    border-spacing:0px;
    border-collapse:separate;
    font-size: 12px;
}

#cmbox .html table th{
    background-color: white;
    font-family: var(--fontFaimly_button);
    color: black;
    padding: 5px 10px;
    text-transform: uppercase;

}
#cmbox .html table td{
    padding: 5px 10px;
}

#cmbox .html table .name{
    text-align: left;
}

#cmbox .html table .returned{
    text-align: right;
}

#cmbox .html table .lost{
    text-align: right;
}

#cmbox .actions{
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 50px;
    color: white;
    text-align: center;
}

#ejectBox{
    position: absolute;
    width: 450px;
    height: 620px;
    top: calc(50% - 240px);
    left: calc(50% - 300px);
    z-index: 1;
}

#ejectBox:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(20,20,20);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}





#ejectBox table {
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    position: absolute;
    top: 65px;
    left: 0px;
}
#ejectBox table td {
    font-size:15px;
    color:rgba(255,255,255,1);
    padding: 5px 20px;
}
#ejectBox table td.img {
    height: 156px;
    text-align: center;
    padding: 0px 0px 0px;
    position: relative;
    filter: drop-shadow(0px 0px 62px #38709b);
}
#ejectBox table td.name {

    text-align: center;
    font-size: 30px;
    /* color: rgb(255,215,0); */
    /* cursor: pointer; */
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    padding: 20px 20px 0px;


}
#ejectBox table td.type {
    text-align:center;
    padding:5px;
}
#ejectBox table td.price {
    text-align:left;
    padding-left: 30%;
}
#ejectBox table td.qty {
    text-align:left;
    padding-left: 30%;
    padding-top: 30px;
}
#ejectBox table td.qty input {
    width: 100px;
    margin-right: 10px;
}
#ejectBox table td.space {
    text-align:center;
    font-size: 13px;
    padding-top: 10px;
}
#ejectBox table td.space .hilited {
    animation: highlited 1000ms linear infinite;
}
#ejectBox table td.totalprice {
    text-align: center;
    font-size: 30px;
    color: rgb(0,255,255);
    padding: 15px 0px 11px 0px;
    letter-spacing: 0px;
}
#ejectBox table td.actions{
    text-align:center;
    padding-top: 20px;
}
#ejectBox table td.subactions{
    text-align:center;
    padding-top: 10px;
}
#ejectBox table td.subactions table {
    position: relative;
    top: unset;
    left: unset;
    width: unset;
    margin: 5px auto 0px;
}
#ejectBox table td.subactions table td {
    padding: 2px 4px;
    text-align: left;
}
#ejectBox table td.subactions table td label {
    display: block;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
}
#ejectBox table td.subactions table td > span:not(.ctrl-key) {
    display: block;
    color: gray;
    font-size: 12px;

    padding-top: 4px;
    max-width: 150px;
}

#ejectBox table td.subactions table td > span > .ctrl-key {
    margin-left: 0px;
}

#ejectBox table td.actions .thint{
    top: 1px;
}

#locality {
    position: absolute;
    width: 350px;
    background: white;
    z-index: 99999999;
    color: black;
    top: 5px;
    right: calc(100% + 5px);
}
#locality:before  {
    content:"";
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid white;
    position:absolute;
    top:0px;
    right: -5px;
}
#locality .datas{
    padding: 6px 5px 4px;
    line-height: 13px;
    background-color: transparent;
    text-shadow: none;
    height: auto;
    font-family: var(--fontFaimly_button)
}
#locality .datas .vcords{
    color: black;
    cursor: text;
    user-select: all;
    padding: 3px 10px;
}



#locality .close{
    top: 3px;
    right: 3px;
}
#locality .linkcommand{
    display: block;
    position: relative;
    color: black;
    padding: 4px 10px 4px 10px;
    line-height: 20px;
    /* font-size: 12px; */
    cursor: pointer;
    text-transform: uppercase;
    height: 20px;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
}
#locality .linkcommand:hover{
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    color: black;
}








#growBase #modules {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 15px;
    right: 375px;
    height: 210px;
    z-index: 1000000010;
}
#growBase #modules .item {
    display: block;
    position: relative;
    height: 140px;
    margin: 0px 5px 10px;
    width: 145px;
}

#growBase #modules .item.available {
    cursor: pointer;
}

#growBase #modules .item.quest-gray {
    cursor: pointer;
    filter: grayscale(1) contrast(0.8) brightness(0.6);
}



#growBase #modules .item .thint {
    animation: highlited 1000ms linear infinite;
    left: calc(50% - -5px);
    right: unset;
    text-align: center;
    bottom: unset;
    top: 0px;
    width: unset;
    transform: translateX(-50%);
}

#growBase #modules .item .thint:before  {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    position: absolute;
    bottom: -20px;
    right: calc(50% - 10px);
    top: unset;
}

#growBase #modules .item .uinfo  {
    font-size: 12px;
    background-color: var(--hud_invalid_background);
    color: var(--hud_invalid_text);
    padding: 5px 8px;
    text-align: center;
    width: auto;
    display: inline-block;
    margin: 43px 10px 0px 20px;
    text-transform: uppercase;
    z-index: 100;
    font-family: var(--fontFaimly_button);
}


#growBase #modules .item .qty {
    display: block;
    top: 8px;
    position: absolute;
    color: white;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    padding: 1px 7px;
    text-shadow: none;
    right: 8px;
    white-space: nowrap;
    text-shadow: var(--shadow_textfull);
}

#growBase #modules .item .health {
    display: block;
    bottom: 8px;
    position: absolute;
    color: white;
    left: 20px;
    right: 16px;
    height: 5px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
}

#growBase #modules .item .health .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
    bottom: 0px;
    max-width: 100%;
}

#growBase #modules .item .module-artefacts {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 10px;
}



#growBase #modules .item > .name {
    position: absolute;
    bottom: 18px;
    left: 10px;
    /* right: 5px; */
    width: calc(100% - 20px);
    text-align: center;

    color: rgb(255,255,255);
    text-transform: uppercase;

    overflow: hidden;
    height: 40px;
    padding: 0px;
    box-sizing: border-box;
    display: table;

}
#growBase #modules .item > .name > span {
    display: table-cell;
    vertical-align: middle;
    color: white;
    text-shadow: var(--shadow_textfull);
    font-size: 13px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
}
#growBase #modules .item .w_backgroundimage {

    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-size: 70%;
    background-position: bottom 38px center;
    background-repeat: no-repeat;

    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
}




#growBase #modules .item .w_backgroundimage:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(2deg, rgb(29 31 35) 10%, rgba(0,0,0,0) 70%);
}



#growBase #modules .item.available:not(.quest-gray):hover .w_backgroundimage:after {
    background-image: linear-gradient(2deg, rgb(49 51 55) 10%, rgba(0,0,0,0) 70%);
}


#growBase #modules .item:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(46 48 57);
    clip-path: var(--clip_desktop_weponfitting_weapon);
    z-index: -1;
    box-shadow: 0px 0px 31px 6px #121212 inset;
    background-image: linear-gradient(180deg, rgb(64 64 64 / 55%) 25%, rgb(67 79 130 / 96%) 100%);
}




#growBase #modules .item img.info {
    width: 16px;
    height: 16px;
    text-align: center;
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto !important;
    padding: 0px;
    background: none !important;
    opacity: 0.5;
}
#growBase #modules .item .space {
    position: absolute;
    top: 97px;
    left: 5px;
    color: rgb(0,255,255);
    font-size: 10px;
    text-transform: uppercase;
}
#growBase #modules .item .space span {
    color:rgba(255,255,255,0.8);
    padding-right: 5px;
}

#growBase #modules .item img.info:hover {
    opacity: 1;
}
#growBase #modules .info {
    display: block;
    position: absolute;
    height: 30px;
    top: 55px;
    left: 5px;
    right: 5px;
    color: rgb(200,200,200);
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    text-transform: uppercase;
    animation: highlited 1000ms linear infinite;
}




#changecm,
#changeem,
#growBase {
    position: absolute;
    left: 310px;
    top: 37px;
    bottom: 20px;
    right: 90px;
    min-width: 760px;
    z-index: 99999999;
    animation: deblur 1000ms ease-out forwards;
    max-width: var(--hud-window-max-width);
}


#changecm:before,
#changeem:before,
#growBase:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}


#telo.rightcontext #changecm,
#telo.rightcontext #changeem,
#telo.rightcontext #growBase {
    right: 350px;
}

#changecm .attributes,
#changeem .attributes,
#growBase .attributes {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 300px;
    z-index: 1000000000;

}
#changecm .attributes table td .small,
#changeem .attributes table td .small,
#growBase .attributes table td .small {
    font-size: 13px;
}
#changecm .buttons,
#changeem .buttons,
#growBase .buttons  {
    position: absolute;
    right: 24px;
    bottom: 25px;
    width: 325px;
    z-index: 9999999999;
    text-align: center;
    height: 70px;
}



#changecm .buttons .uinfo,
#changeem .buttons .uinfo,
#growBase .buttons .uinfo  {
    font-size: 12px;
    background-color: var(--hud_invalid_background);
    color: var(--hud_invalid_text);
    padding: 3px 8px;
    text-align: center;
    /* width: auto; */
    display: inline-block;
    margin: 0px auto;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    animation: highlited 1000ms linear infinite;

    /* max-width: 80%; */
    margin-top: 20px;
}

#changecm .buttons .uinfo.quest-hide,
#changeem .buttons .uinfo.quest-hide,
#growBase .buttons .uinfo.quest-hide  {
    display: none;
}




#changecm .buttons button,
#changeem .buttons button,
#growBase .buttons button {
    position: absolute;
    bottom: 20px;
    width: 130px;
    left: calc(50% - 65px);
}

#changecm .buttons button .thint,
#changeem .buttons button .thint,
#growBase .buttons button .thint {
    animation: highlited 1000ms linear infinite;
    left: 50%;
    text-align: center;
    bottom: 41px;
    top: unset;
    right: unset;
    transform: translateX(-50%);

}
#changecm .buttons button .thint:before,
#changeem .buttons button .thint:before,
#growBase .buttons button .thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
}



#changecm .attributes table .format-exc,
#changeem .attributes table .format-exc,
#growBase .attributes table .format-exc {
    font-size: 18px;
}

#changecm .attributes .whitebox,
#changeem .attributes .whitebox,
#growBase .attributes .whitebox {
    color: black;
    padding: 10px 5px;
    animation:blink 100ms linear 2 alternate;
}
#changecm .attributes .whitebox table td,
#changecm .attributes .whitebox table th,
#changeem .attributes .whitebox table td,
#changeem .attributes .whitebox table th,
#growBase .attributes .whitebox table td,
#growBase .attributes .whitebox table th {
}
#changecm .attributes .whitebox table .neg,
#changeem .attributes .whitebox table .neg,
#growBase .attributes .whitebox table .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}
#changecm .attributes .whitebox table .pos,
#changeem .attributes .whitebox table .pos,
#growBase .attributes .whitebox table .pos {
    color: white;
}
#changecm .attributes table,
#changeem .attributes table,
#growBase .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;

}
#changecm .attributes table th,
#changeem .attributes table th,
#growBase .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#changecm .attributes table td,
#changeem .attributes table td,
#growBase .attributes table td {
    padding: 5px 10px;
}

#changecm .changecm_err,
#changeem .changeem_err,
#growBase .growBase_err {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    /* line-height: 18px; */
    font-size: 15px;
    text-transform: none;
}
#changecm .segments,
#changeem .segments,
#growBase .segments {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    text-align: center;
    font-size: 20px;
    bottom: 0px;
}

#changecm .segments .imagediv,
#changeem .segments .imagediv {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 300px;
    bottom: 0px;
    text-align: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#changecm .segments .darkbox,
#changeem .segments .darkbox,
#growBase .segments .darkbox {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 300px;
}

#changecm .segments .darkbox:before,
#changeem .segments .darkbox:before,
#growBase .segments .darkbox:before {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_growbase_databox);
    z-index: -1;
}




#changecm .segments .controls,
#changeem .segments .controls,
#growBase .segments .controls {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 380px;
    text-align: center;
    z-index: 9999999999;
}





.segments .controls > span {
    position: absolute;
    top: -25px;
    height: 40px;
    width: 40px;
    z-index: 999999999;
    cursor: pointer;


}



.segments .controls > span .thint {

    animation: highlited 1000ms linear infinite;
    left: calc(50% - 30px);
    text-align: center;
    bottom: 45px;
    top: unset;
    right: unset;
    width: auto;
    width: 60px;
    margin: 0px;
    min-width: 60px;
}

.segments .controls > span .thint:before {

    content: "";
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    border-left: 10px solid transparent;
    border-bottom: none;
    position: absolute;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
    bottom: -10px;
    clip-path: none;
    background-color: transparent;
}



#changecm .segments .controls .left,
#changeem .segments .controls .left,
#growBase .segments .controls .top,
#growcs .segments .controls .left{
    left: 0px;
}


#changecm .segments .controls .right,
#changeem .segments .controls .right,
#growBase .segments .controls .bottom,
#growcs .segments .controls .right{
    right: 0px;
}


#growcs .segments .controls .top{
    right: 50px;
}

#growcs .segments .controls .bottom{
    left: 50px;
}

#growcs .segments .controls .left:before,
#changecm .segments .controls .left:before,
#changeem .segments .controls .left:before,
#growBase .segments .controls .top:before {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><polygon points='3.6,32 35.6,64 35.6,42.6 60.6,42.6 60.6,21.3 35.6,21.3 35.6,0'/></svg>");
}

#growcs .segments .controls .right:before,
#changecm .segments .controls .right:before,
#changeem .segments .controls .right:before,
#growBase .segments .controls .bottom:before {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><polygon points='60.4,32 28.4,64 28.4,42.6 3.4,42.6 3.4,21.3 28.4,21.3 28.4,0'/></svg>");
}


#growcs .segments .controls .top:before {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><polygon points='32,3.6 0,35.6 21.4,35.6 21.4,60.6 42.7,60.6 42.7,35.6 64,35.6'/></svg>");
}

#growcs .segments .controls .bottom:before {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><polygon points='32,60.4 0,28.4 21.4,28.4 21.4,3.4 42.7,3.4 42.7,28.4 64,28.4'/></svg>");
}

#growBase .segments .controls .zoomin {
    left: 0px;
    top: 25px;
}

#growBase .segments .controls .zoomout {
    right: 0px;
    top: 25px;
}

#growBase .segments .controls .zoomin:before {
    background-image: url("data:image/svg+xml;utf8,<svg width='64px' height='64px' xmlns='http://www.w3.org/2000/svg'><path d='M40 4H24V24H4V40H24V60H40V40H60V24H40V4Z' fill='%23b9dbff'/></svg>");


}

#growBase .segments .controls .zoomout:before {
    background-image: url("data:image/svg+xml;utf8,<svg width='64px' height='64px' xmlns='http://www.w3.org/2000/svg'><path d='M4 40V24H60V40H4Z' fill='%23b9dbff'/></svg>");

}

#growBase .segments .controls .rotl {
    left: 50px;
    top: 25px;
}

#growBase .segments .controls .rotr {
    right: 50px;
    top: 25px;
}

#growcs .segments .controls .rotl {
    left: 50px;
    top: 25px;
}

#growcs .segments .controls .rotr {
    right: 50px;
    top: 25px;
}

.segments .controls .rotl:before{
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><path d='M54.8,13.5C48.8,7.5,40.8,4.2,32,4.2c-6.8,0-13.2,2.1-18.5,5.9c-0.5,0.4-1.2,0.3-1.6-0.1L9.4,7.8L5.2,3.7c-0.5-0.5-1-0.4-1.1,0.3L3.7,9.9L0.6,28l-0.6,3.7c-0.1,0.6,0.3,1,0.9,0.9l3.7-0.5l18.4-2.5l6.1-0.8c0.6-0.1,0.7-0.5,0.3-0.9l-4.3-4.3l-1.8-1.8c-0.5-0.5-0.4-1.1,0.2-1.4c2.6-1.5,5.6-2.3,8.7-2.3c4.8,0,9.4,1.9,12.8,5.4c3.4,3.4,5.4,7.9,5.4,12.8c0,4.8-1.9,9.3-5.4,12.8l-1.8,1.8c-0.5,0.5-0.5,1.1,0,1.5l1.8,1.8l5.2,5.2l1.8,1.8c0.5,0.5,1.1,0.5,1.5,0l1.8-1.8c6-6,9.3-14,9.3-22.5C59.8,24.5,57.2,16.8,54.8,13.5z'/></svg>");

}

.segments .controls .rotr:before {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px'><path d='M9.2,13.5C15.2,7.5,23.2,4.2,32,4.2c6.8,0,13.2,2.1,18.5,5.9c0.5,0.4,1.2,0.3,1.6-0.1l2.5-2.2l4.2-4.1c0.5-0.5,1-0.4,1.1,0.3l0.4,5.9l3.1,18.1l0.6,3.7c0.1,0.6-0.3,1-0.9,0.9l-3.7-0.5l-18.4-2.5l-6.1-0.8c-0.6-0.1-0.7-0.5-0.3-0.9l4.3-4.3l1.8-1.8c0.5-0.5,0.4-1.1-0.2-1.4c-2.6-1.5-5.6-2.3-8.7-2.3c-4.8,0-9.4,1.9-12.8,5.4c-3.4,3.4-5.4,7.9-5.4,12.8c0,4.8,1.9,9.3,5.4,12.8l1.8,1.8c0.5,0.5,0.5,1.1,0,1.5l-1.8,1.8l-5.2,5.2l-1.8,1.8c-0.5,0.5-1.1,0.5-1.5,0l-1.8-1.8c-6-6-9.3-14-9.3-22.5C4.2,24.5,6.8,16.8,9.2,13.5z'/></svg>");

}


#growcs .segments .controls .right:before,
#changecm .segments .controls .right:before,
#changeem .segments .controls .right:before,
#updateCSCB .segments .controls .right:before,
#updateCSSB .segments .controls .right:before{
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 98.148 98.148' xml:space='preserve'><g><path d='M33.458,97.562L80.531,50.49c0.75-0.75,0.75-2.078,0-2.828L33.456,0.586C33.081,0.211,32.572,0,32.042,0 c-0.53,0-1.039,0.211-1.414,0.586L17.641,13.573c-0.391,0.391-0.586,0.902-0.586,1.414c0,0.512,0.195,1.023,0.586,1.414 l32.674,32.674L17.642,81.75c-0.751,0.75-0.75,2.078,0,2.828l12.987,12.984C31.411,98.344,32.677,98.344,33.458,97.562z'/></g></svg>");

}

#growcs .segments .controls .left:before,
#changecm .segments .controls .left:before,
#changeem .segments .controls .left:before,
#updateCSCB .segments .controls .left:before,
#updateCSSB .segments .controls .left:before{
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23b9dbff' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 98.148 98.148' xml:space='preserve'><g transform='scale(-1,1) translate(-98.148,0)'><path d='M33.458,97.562L80.531,50.49c0.75-0.75,0.75-2.078,0-2.828L33.456,0.586C33.081,0.211,32.572,0,32.042,0 c-0.53,0-1.039,0.211-1.414,0.586L17.641,13.573c-0.391,0.391-0.586,0.902-0.586,1.414c0,0.512,0.195,1.023,0.586,1.414 l32.674,32.674L17.642,81.75c-0.751,0.75-0.75,2.078,0,2.828l12.987,12.984C31.411,98.344,32.677,98.344,33.458,97.562z'/></g></svg>");
}


.segments .controls > span:before {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
    filter: drop-shadow(0px 0px 7px white);
}

.segments .controls > span:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#growBase .segments .controls .left,
#growBase .segments .controls .right {
    display: none;
}

.segments .controls > span.disabled {
    filter: invert(0.3) brightness(0.3);
    cursor: default;
}

.segments .controls > span:not(.disabled):hover:before {
    animation: blink 100ms linear 2 alternate;
    box-shadow: 0px 0px 15px #3b466f inset;
    filter: drop-shadow(0px 0px 7px transparent);
}

#changecm .segments .img,
#changeem .segments .img,
#growBase .segments .img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid white;
}
#changecm .segments .datas,
#changeem .segments .datas,
#growBase .segments .datas {
    position: absolute;
    top: 120px;
    bottom: 120px;
    right: 15px;
    font-size: 13px;
    color: white;
    text-align: left;
    width: 320px;
    z-index: 9999999999;
    padding: 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgb(10, 10, 10);
    clip-path: var(--clip_csbox_addmodule_controls);
}


#changecm .segments .datas .name,
#changeem .segments .datas .name,
#growBase .segments .datas .name {
    font-size: 20px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    line-height: 25px;
    margin: 0px 0px 10px;
}
#growBase .segments .datas .healthbar,
#changecm .segments .datas .healthbar,
#changeem .segments .datas .healthbar {

    height: 7px;

    box-sizing: border-box;
    position: relative;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    margin-top: 30px;
    right: 0px;
    left: 0px;
}
#growBase .segments .datas .healthbar .bar,
#changeem .segments .datas .healthbar .bar,
#changecm .segments .datas .healthbar .bar {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
    bottom: 0px;
    max-width: 100%;
}
#growBase .segments .datas .healthbar .txt,
#changecm .segments .datas .healthbar .txt,
#changeem .segments .datas .healthbar .txt {

    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;

    white-space: nowrap;
    color: var(--hud_health_text_color);


}

#growBase .segments .datas .healthbar .sbefore,
#changecm .segments .datas .healthbar .sbefore,
#changeem .segments .datas .healthbar .sbefore {
    display: block;

    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_health_text_color);
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;

}
#changecm .segments .datas .manufacturer,
#changeem .segments .datas .manufacturer,
#growBase .segments .datas .manufacturer {
    padding-top: 9px;
    font-size: 20px;
    color: white;
    text-align: center;
    text-transform: uppercase;
}
#changecm .segments .datas .manufacturer img,
#changeem .segments .datas .manufacturer img,
#growBase .segments .datas .manufacturer img {
    max-height: 45px;
    max-width: 150px;
    opacity: .5;
    margin: 5px auto;
}
#changecm .segments .datas .module_vals,
#changeem .segments .datas .module_vals,
#growBase .segments .datas .module_vals {
    padding: 20px 0px 0px 0px;
    border-spacing: 0px;
    width: 100%;


}
#changecm .segments .datas .module_vals th,
#changeem .segments .datas .module_vals th,
#growBase .segments .datas .module_vals th {
    padding: 0px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: right;
    padding-left: 10px;
    vertical-align: top;
    line-height: 14px;
    width: 50%;
    color: var(--hud_popiseck_gray_color);
}
#changecm .segments .datas .module_vals td,
#changeem .segments .datas .module_vals td,
#growBase .segments .datas .module_vals td {
    position: relative;
    font-size: 14px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;

    padding-left: 10px;
    vertical-align: top;
    height: 30px;
    line-height: 12px;
}

#changecm .segments .datas .module_connector,
#changeem .segments .datas .module_connector,
#growBase .segments .datas .module_connector {
    padding: 0px;
    display: inline-block;
    height: 24px;
    width: 24px;
    background-size: 24px;
}


#changecm .segments .datas .module_vals td#nm_artefact_slots .artef,
#changeem .segments .datas .module_vals td#nm_artefact_slots .artef,
#growBase .segments .datas .module_vals td#nm_artefact_slots .artef {
    position: relative;
    display: inline-block;
    height: 32px;
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
    text-align: center;

    z-index: 1;
}



#changecm .segments .datas .module_vals #nm_artefact_slots .artef .img,
#changeem .segments .datas .module_vals #nm_artefact_slots .artef .img,
#growBase .segments .datas .module_vals #nm_artefact_slots .artef .img {
    position: relative;
    display: block;
    height: 23px;
    text-align: left;
    color: white;
    font-size: 14px;
    line-height: 23px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: left center;
    border: unset;
    padding-left: 26px;
}



#changecm .segments .datas .module_vals td#nm_artefacts,
#changeem .segments .datas .module_vals td#nm_artefacts,
#growBase .segments .datas .module_vals td#nm_artefacts {
    position: relative;

    padding-bottom: 10px;

}
#changecm .segments .datas .module_vals td#nm_artefacts .artef,
#changeem .segments .datas .module_vals td#nm_artefacts .artef,
#growBase .segments .datas .module_vals td#nm_artefacts .artef {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
    text-align: center;
    z-index: 1;
}



#changecm .segments .datas .module_vals td#nm_artefacts .artef .img,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .img,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .img {
    position: absolute;
    display: block;
    top: 0px;
    text-align: center;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
    font-size: 12px;
    line-height: 32px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
    border: unset;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx{
    display: none;
    position: absolute;
    top: 6px;
    right: 110%;
    width: 180px;
    background-color: black;
    min-height: 107px;
    padding: 15px;
    z-index: 1;
    box-sizing: border-box;

}


#changecm .segments .datas .module_vals td#nm_artefacts .artef:hover .artefactboxhtmlx,
#changeem .segments .datas .module_vals td#nm_artefacts .artef:hover .artefactboxhtmlx,
#growBase .segments .datas .module_vals td#nm_artefacts .artef:hover .artefactboxhtmlx{
    display: block;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx:before,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx:before,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx:before{
    content: "";
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid black;
    position: absolute;
    top: 0px;
    right: -10px;
}



#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 5px 0px;
    bottom: unset;
    left: unset;
    right: unset;
    height: unset;
    line-height: unset;
    margin: unset;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name span,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name span,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .name span{
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 13px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);

}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 5px 0px;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname span,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname span,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .subname span{
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    color: #008dff;
    text-shadow: var(--shadow_textfull);
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    line-height: unset;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 5px 0px;
}

#changecm .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr span,
#changeem .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr span,
#growBase .segments .datas .module_vals td#nm_artefacts .artef .artefactboxhtmlx .descr span{
    display: table-cell;
    vertical-align: middle;
    color: white;
    text-shadow: var(--shadow_textfull);
    font-size: 12px;
    text-transform: none;

    line-height: initial;
}



#growBase .segments .segments_scene {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;

    clip-path: var(--clip_cstationbox);
}



#removem {
    position:absolute;
    width:600px;
    height:450px;
}
#removem:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#removem .attributes {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
}
#removem .attributes table td .small {
    font-size: 13px;
}
#removem .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 20px;
}
#removem .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#removem .buttons {
    position: absolute;
    right: 60px;
    bottom: 44px;
    width: 205px;
}
#removem .buttons button {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
}
#removem .attributes .whitebox {
    color: white;
    padding: 20px 5px 0px;
    animation:blink 100ms linear 2 alternate;
}
#removem .attributes .whitebox table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;


}


#removem .attributes .whitebox table .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}
#removem .attributes .whitebox table .pos {
    color: white;
}
#removem .removem_err {
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;

}
#removem .module {
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 10px;
}
#removem .module .imagediv {
    position: absolute;
    top: 50px;
    left: 40px;
    right: 300px;
    bottom: 40px;
    text-align: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#removem .module .darkbox {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 290px;
    background: rgba(0,0,0,.7);
}
#removem .module .datas {
    position: absolute;
    top: 65px;
    bottom: 0px;
    right: 0px;
    font-size: 13px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    width: 290px;
}
#removem .module .datas .name {
    font-size: 12px;
    color: white;
    text-align: left;
    text-transform: uppercase;

    line-height: 18px;
    padding-right: 20px;
}

#removem .module .datas .mtitle {
    font-size: 12px;
    color: white;
    text-align: left;
    text-transform: uppercase;
    margin-top: 15px;
    line-height: 18px;
    padding-right: 20px;
}

#removem .module .datas .module-artefacts {
    margin: 10px 0px;
}

#removecsb {
    position:absolute;
    width:600px;
    height:520px;
}

#removecsb:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_cstationbox);
    z-index: -1;
}



#removecsb .attributes {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
}
#removecsb .attributes table td .small {
    font-size: 13px;
}
#removecsb .attributes table {
    width: 100%;
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 20px;
}
#removecsb .attributes table th {
    text-align: right;
    padding: 5px 10px;
    width: 50%;
}
#removecsb .buttons {
    position: absolute;
    right: 10px;
    bottom: 30px;
    width: 290px;
}
#removecsb .buttons button {
    position: absolute;
    bottom: 0px;
    width: 150px;
    left: calc(50% - 75px);

}

#removecsb .module .whitebox  {
    color: white;
    border-spacing:0px;
    text-transform: uppercase;
    font-size: 12px;
    padding: 15px 0px;
    text-align: center;
}

#removecsb .module .whitebox span  {
    padding-right: 10px;
    font-size: 14px;
}
#removecsb .module .whitebox .neg {
    color: red;
    animation:highlited 1000ms linear infinite;
}
#removecsb .module .whitebox .pos {
}
#removecsb .removem_err {
    position: absolute;
    top: 150px;
    height: 45px;
    right: 0px;
    left: 0px;
    text-transform: uppercase;
    padding: 20px 0px;
    border-spacing: 0px;
    text-align: center;
    font-size: 25px;
    color: rgba(255,255,255,0.5);

    border: none;

    animation: highlited 1000ms linear infinite;
    font-size: 12px;

}
#removecsb .module {
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    bottom: 10px;
}
#removecsb .module .imagediv {
    position: absolute;
    top: 12px;
    left: 0px;
    right: 300px;
    bottom: 0px;
    text-align: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#removecsb .module .datas {
    position: absolute;
    top: 25px;
    bottom: 0px;
    right: 0px;
    font-size: 13px;
    color: white;
    text-align: left;
    text-transform: none;
    width: 290px;
}
#removecsb .module .datas .name {
    font-size: 15px;
    color: white;
    text-align: left;
    text-transform: none;
    line-height: unset;
}

#removecsb .module .datas .resources {
    margin-top: 10px;
}
#removecsb .module .datas .resources table {
    font-size: 10px;
    color: white;
    text-align: left;

    width: 80%;
    margin-right: 10%;
}

#removecsb .module .datas .resources table td {
    padding: 2px 3px;
    text-align: right;
}
#removecsb .module .datas .resources table td.nadpis {
    text-align: left;
    padding-bottom: 5px;
    font-size: 13px ;
    text-transform: uppercase;
}

#removecsb .module .datas .resources table td.mat-name
{
    text-align: right;
}

#removecsb .module .datas .resources table td.mat-qty
{
    text-align: right;
    padding: 0px 3px;
    color: var(--hud_tablevaluecolor);

    font-size: 12px;
}


#removecsb .module .datas .resources table td.mat-mu
{
    text-align: left;
    font-size: 12px;
    color: silver;
}

#removecsb .module .datas .namelink
{
    color: black;
    background-color: white;
    font-family: var(--fontFaimly_button);
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: none;
    text-transform: uppercase;
}

#removecsb .module .datas .namelink:hover
{
    animation: blink 100ms linear 2;
}


#repairallmodules,
#repairm,
#repairb
{
    position:absolute;
    width:600px;
    height:450px;
    z-index: 1;
}

#repairallmodules {
    width:800px;
}

#repairallmodules:before,
#repairm:before,
#repairb:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(21 31 45);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#repairallmodules .attributes,
#repairm .attributes,
#repairb .attributes
{
    position: absolute;
    top: 110px;
    right: 25px;
    width: 340px;
}

#repairallmodules .attributes
{
    position: absolute;
    top: 64px;

}

#repairallmodules .buttons,
#repairm .buttons,
#repairb .buttons
{
    position: absolute;
    right: 10px;
    bottom: 30px;
    width: 340px;
}

#repairallmodules .buttons button,
#repairm .buttons button,
#repairb .buttons button
{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

#repairallmodules .attributes table,
#repairm .attributes table,
#repairb .attributes table
{
    width: 100%;
    color: white;
    border-spacing:0px;

    font-size: 10px;
}

#repairallmodules .attributes table td,
#repairm .attributes table td,
#repairb .attributes table td
{
    font-size: 12px;
    padding: 0px;
    vertical-align: middle;
}

#repairallmodules .attributes table th,
#repairm .attributes table th,
#repairb .attributes table th
{
    width: 50%;
    text-align: right;
    padding: 10px 0px;
    font-size: 12px;
}

#repairallmodules .attributes table td,
#repairm .attributes table td,
#repairb .attributes table td
{
    text-align: center;
    padding: 10px 0px;
}

#repairallmodules .attributes table.material,
#repairm .attributes table.material,
#repairb .attributes table.material
{
    margin: 10px 0px 0px;
    color: white;
    border-spacing: 0px;
    font-size: 10px;
    padding: 0px;
    width: 100%;
}

#repairallmodules .attributes table.material td,
#repairm .attributes table.material td,
#repairb .attributes table.material td
{
    padding: 2px 0px;
}

#repairallmodules .attributes table td.mat-name,
#repairm .attributes table td.mat-name,
#repairb .attributes table td.mat-name
{
    text-align: right;
}
#repairallmodules .attributes table td.mat-have,
#repairm .attributes table td.mat-have,
#repairb .attributes table td.mat-have
{
    text-align: right;
    padding: 0px 5px;
    color: white;
    text-transform: uppercase;
    font-size: 13px;
}

#repairallmodules .attributes table td.mat-need,
#repairm .attributes table td.mat-need,
#repairb .attributes table td.mat-need
{
    text-align: right;
    padding: 0px 3px;
    color: white;
    text-transform: uppercase;
    font-size: 13px;
}

#repairallmodules .attributes table td.mat-remove,
#repairm .attributes table td.mat-remove,
#repairb .attributes table td.mat-remove
{
    text-align: right;
    padding: 0px 5px 0px 3px;
    color: var(--hud_tablevaluecolor);
    text-transform: uppercase;
    font-size: 13px;
}

#repairallmodules .attributes table td.mat-mu,
#repairm .attributes table td.mat-mu,
#repairb .attributes table td.mat-mu
{
    text-align: left;
    font-size: 10px;
    color: silver;
}

#repairallmodules .attributes table td.mat-lom,
#repairm .attributes table td.mat-lom,
#repairb .attributes table td.mat-lom
{
    text-align: center;
    font-size: 13px;
    color: silver;
}

#repairallmodules .attributes table .neg .mat-have,
#repairm .attributes table .neg .mat-have,
#repairb .attributes table .neg .mat-have
{
    color: red;
    animation:highlited 1000ms linear infinite;
    font-size: 13px;
}

#repairallmodules .repairm_err,
#repairm .repairm_err,
#repairb .repairm_err
{
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
}

#repairallmodules .module,
#repairm .module,
#repairb .module
{
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
    font-size: 20px;
    bottom: 10px;
}
#repairallmodules .module .imagediv,
#repairm .module .imagediv,
#repairb .module .imagediv
{
    position: absolute;
    top: 0px;
    left: 40px;
    bottom: 40px;
    right: 200px;
    text-align: left;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;
}

#repairallmodules .module .imagediv:after,
#repairm .module .imagediv:after,
#repairb .module .imagediv:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgb(21 31 45) 75%);
    background-size: cover;
    background-position: bottom left;
}


#repairm .module .text,
#repairb .module .text
{
    position: absolute;
    top: 19px;
    right: 10px;
    font-size: 21px;
    color: white;
    text-align: left;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    transform: translateY(-50%);
    width: 290px;

}
#repairallmodules .module .text1 {
    position: absolute;
    bottom: 88px;
    right: 10px;
    font-size: 14px;
    color: #ffbc00;
    text-align: center;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    transform: translateY(-50%);
    /* width: 290px; */
    left: 10px;
}

#repairallmodules .module .text2 {
    position: absolute;
    top: 25px;
    right: 10px;
    font-size: 18px;
    color: #ffbc00;
    text-align: center;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    transform: translateY(-50%);
    /* width: 290px; */
    left: 10px;
}

#repairallmodules .module .healthbar,
#repairm .module .healthbar,
#repairb .module .healthbar
{
    display: block;
    position: absolute;
    top: 80px;
    right: 10px;
    height: 7px;
    width: 290px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}

#repairallmodules .module .healthbar .txt,
#repairm .module .healthbar .txt,
#repairb .module .healthbar .txt
{
    position: absolute;
    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--hud_health_text_color);
}

#repairallmodules .module .healthbar .sbefore,
#repairm .module .healthbar .sbefore,
#repairb .module .healthbar .sbefore
{
    display: block;
    content: 'HEALTH POINTS';
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: left;
    color: var(--hud_health_text_color);
    white-space: nowrap;
}



#repairallmodules .module .healthbar .bar,
#repairm .module .healthbar .bar,
#repairb .module .healthbar .bar
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_health_bar_color);
}

#repairallmodules .module .healthbar .bar.hbred,
#repairm .module .healthbar .bar.hbred,
#repairb .module .healthbar .bar.hbred
{

    background-color: var(--hud_health_bar_color_020);
}

#repairallmodules .module .healthbar .bar.hbyellow,
#repairm .module .healthbar .bar.hbyellow,
#repairb .module .healthbar .bar.hbyellow
{

    background-color: var(--hud_health_bar_color_050);
}

#repairallmodules .module .healthbar .canhealbar,
#repairm .module .healthbar .canhealbar,
#repairb .module .healthbar .canhealbar
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--hud_healthcanheal_bar_color);
    animation:highlited 1000ms linear infinite;
}

#repairallmodules .namelink,
#repairm .namelink,
#repairb .namelink
{
    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 10px;
    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#repairallmodules .namelink:hover,
#repairm .namelink:hover,
#repairb .namelink:hover
{
    animation: blink 100ms linear 2;
}





#cstationHangarRechargeBox{
    position:absolute;
    width:820px;
    height:600px;
    z-index:99999999;

}
#cstationHangarRechargeBox:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(21 31 45);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}


#cstationHangarRechargeBox .subtitle {
    position: absolute;
    top: 171px;
    right: 10px;
    font-size: 23px;
    color: #ffbc00;
    text-align: center;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    transform: translateY(-50%);
    left: 10px;
}



#cstationHangarRechargeBox .img {
    animation: blink 100ms linear 2 alternate;
    position: absolute;
    display: block;
    height: 220px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: -1;
    filter: brightness(3) grayscale(1) contrast(1.3);
}

#cstationHangarRechargeBox .input {
    position: relative;
    top: 55px;
    left: 30px;
    width: calc(100% - 60px);
    font-size: 18px;
    color: #ffbc00;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;


    padding-top: 10px;
    margin-top: 15px;

}

#cstationHangarRechargeBox .items {
    top: 40px;
}
#cstationHangarRechargeBox .items table.items_table {
    width: calc(100% - 20px);
}

#cstationHangarRechargeBox .items table.items_table .source_qty,
#cstationHangarRechargeBox .items table.items_table .source_su{
    text-align: right;
}

#cstationHangarRechargeBox .actions .actions_table .toshipl,
#cstationHangarRechargeBox .actions .actions_table .tostationl{
    color: var(--hud_popiseck_gray_color);
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px;
}

#cstationHangarRechargeBox .actions .actions_table #toshipEnergy,
#cstationHangarRechargeBox .actions .actions_table #tocsEnergy{
    color: #ffbc00;
    font-size: 18px;
    padding: 5px 0px 0px;
}


#cstationHangarRechargeBox .actions .actions_table .ship-energy,
#cstationHangarRechargeBox .actions .actions_table .cs-energy{
    display: block;
    height: 7px;
    width: 200px;
    box-sizing: border-box;
    position: relative;
    margin: 30px auto 5px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_fuel_barbckg_color);
}

#cstationHangarRechargeBox .actions .actions_table .cs-energy{
    background: var(--hud_energy_barbckg_color);
    ;
}

#cstationHangarRechargeBox .actions .actions_table .ship-energy .bar,
#cstationHangarRechargeBox .actions .actions_table .cs-energy .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
    bottom: 0px;
}
#cstationHangarRechargeBox .actions .actions_table .cs-energy .bar{
    background: var(--hud_energy_bar_color);
}

#cstationHangarRechargeBox .actions .actions_table .ship-energy .bar-count,
#cstationHangarRechargeBox .actions .actions_table .cs-energy .bar-count{
    position: absolute;
    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: white;

}

#cstationHangarRechargeBox .actions .actions_table .ship-energy .diffbar,
#cstationHangarRechargeBox .actions .actions_table .cs-energy .diffbar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #25c2fb;
    box-shadow: 0px 0px 10px #25c2fb;
    bottom: 0px;
    animation: highlited 1000ms linear infinite;
}

#cstationHangarRechargeBox .actions .actions_table .ship-energy .diffbar.negative,
#cstationHangarRechargeBox .actions .actions_table .cs-energy .diffbar.negative{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: red;
    box-shadow: 0px 0px 10px red;
    bottom: 0px;
    animation: highlited 1000ms linear infinite;
}


#cstationHangarRechargeBox .actions .actions_table .enemy .ship-energy .bar{
    background: rgb(255,160,0,1);
}

#cstationHangarRechargeBox .actions .actions_table .enemy .ship-energy .bar-count{
    color: rgb(255,160,0,1);

}

#cstationHangarRechargeBox .actions .actions_table .enemy .cs-energy .bar{
    background: rgb(255,160,0,1);
}

#cstationHangarRechargeBox .actions .actions_table .enemy .cs-energy .bar-count{
    color: rgb(255,160,0,1);

}


#cstationHangarRechargeBox .input .input_table{
    width: 100%;
    margin: 20px auto 0px;
    border-spacing: 0px;
    border-collapse: separate;
    line-height: 12px;
    font-size: 13px;
}




#cstationHangarRechargeBox .input .input_table td {
    color: var(--hud_tablevaluecolor);
    text-align: center;
    padding: 4px 0px 0px 0px;
    font-size: 18px;
    vertical-align: top;
    height: 36px;


}

#cstationHangarRechargeBox .input .input_table td > span {
    white-space: nowrap;

}





#cstationHangarRechargeBox .items .items_table td.source_input {
    width: 240px;
}

#cstationHangarRechargeBox .info {
    padding: 125px 0px;
    font-size: 23px;
    text-align: center;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
}


#cstationHangarRechargeBox .input .input_table td.source_name {


}

#cstationHangarRechargeBox .input .input_table td.source_qty {
    line-height: 17px;

}

#cstationHangarRechargeBox .input .input_table td.source_qty.red {
    color: rgb(164,2,4);
    animation: highlited 1000ms linear infinite;

}



#cstationHangarRechargeBox .qty {
    text-align: center;
    vertical-align: top;
    position: absolute;
    bottom: 80px;
    left: 10px;
    right: 10px;
}

#cstationHangarRechargeBox .actions input[type="number"] {
    text-align: center;
    width: 100px;
}

#cstationHangarRechargeBox .actions{
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 50px;
    right: 45px;
}


#cstationHangarRechargeBox .actions .actions_table{
    width: 100%;
    margin: 0px auto 55px;
    border-spacing: 0px;
    border-collapse: separate;
}

#cstationHangarRechargeBox .actions .actions_table td{
    width: 33.3%;
    padding: 0px 0px;
    color: white;
    line-height: 23px;
    font-size: 14px;
}

#cstationHangarRechargeBox .actions .actions_table td.rengeinput{
    padding: 34px 10px;
}
#cstationHangarRechargeBox .actions .actions_table td.rengeinput input{
    width: 100%;
}

#cstationHangarRechargeBox .actions .actions_table td.tostationl span,
#cstationHangarRechargeBox .actions .actions_table td.toshipl span
{
    display: block;
}
#cstationHangarRechargeBox .actions .stationimage,
#cstationHangarRechargeBox .actions .shipimage {
    animation: blink 100ms linear 2 alternate;
    position: relative;
    display: block;
    height: 60px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(3) grayscale(1) contrast(1.3);
}





#cstationHangarRechargeBox .actions .shipimage {

    background-size: 80%;

}


#cstationHangarRechargeBox .actions .enemy .stationimage,
#cstationHangarRechargeBox .actions .enemy .shipimage,
#cstationbox .itemlist.hangars .ship.enemy .ship-img{
    /*filter: brightness(2) sepia(1) contrast(1.3) hue-rotate(3deg) saturate(1.5);
    */
}



#cstationHangarRechargeBox .actions .actions_table .energydirection{
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center;

    height: 140px;
    width: 100%;


}

@keyframes moveBackground {
    0% {
        background-position: 0% center;
        opacity: 0.1;
    }
    100% {
        background-position: 100% center;
        opacity: 0.0;

    }
}
#cstationHangarRechargeBox .actions .actions_table .energydirection.tostation{
    background-image: url(energy-direction-r.png);
    transform: scaleX(-1);
    animation: moveBackground 1s linear infinite;
}

#cstationHangarRechargeBox .actions .actions_table .energydirection.tospacecraft{
    animation: moveBackground 1s linear infinite;
    background-image: url(energy-direction-r.png);

}




#cstationHangarRechargeBox .actions .stationname,
#cstationHangarRechargeBox .actions .shipname {
    font-size: 14px;
    color: white;
    padding: 10px 0px 0px;
}




#cstationHangarRechargeBox .actions .enemy .stationname,
#cstationHangarRechargeBox .actions .enemy .shipname {
    color: rgb(255,160,0,1);
}

.checkbox {
    position: relative;
    display: inline-block;
    min-width: 60px;
    padding-top: 29px;
    padding-bottom: 10px;
}



.checkbox input {
    display:none;
}

.checkbox .slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px,  bottom 1px center;
    box-sizing: border-box;
}



.checkbox .slider:before {
    content: '';
    position: absolute;
    left: 3px;
    display: block;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

.checkbox .slider:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;

}

.checkbox .slider:after {
    position: absolute;
    content: "";
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 4px;
    background-color: transparent;
    transition: .2s;
    color: black;
    font-size: 13px;
    line-height: 18px;
    padding: 0px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    border-radius: 2px;
}

.checkbox .slider.disabled {
    cursor: default;
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom 1px center;
    box-sizing: border-box;
}

.checkbox .slider.disabled:before {
    display: none;
}

.checkbox .slider.disabled:hover:before {
    box-shadow: unset;
    animation: unset;

}

.checkbox .slider.disabled:after {

}

.checkbox input:checked + .slider {

}

.checkbox input:focus + .slider {

}

.checkbox input:checked + .slider:after {
    background-color: white;
    filter: drop-shadow(0px 0px 8px var(--border-button-color2));
}


.switch {
    position: relative;
    display: inline-block;
    min-width: 75px;
    padding-top: 14px;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.switch input {
    display:none;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;

    bottom: 0;

    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px,  bottom 1px center;
    height: 25px;
    width: 75px;
    left: 50%;
    box-sizing: border-box;

    transform: translateX(-50%);

}





.switch .slider:after {
    position: absolute;
    content: "O";
    top: 4px;
    width: calc(50% - 8px);
    left: 4px;
    bottom: 4px;
    background-color: var(--border-button-color);
    transition: .2s;
    color: black;
    font-size: 13px;
    line-height: 18px;
    padding: 0px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    border-radius: 2px;
}

.switch .slider:before {
    content: '';
    position: absolute;
    left: 3px;
    display: block;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

.switch .slider:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;

}

.switch input:checked + .slider {
    /*background-color: rgb(165,165,165);*/
}

.switch input:focus + .slider {

}

.switch input:checked + .slider:after {
    transform: translateX(calc(100% + 8px));
    content: "I";
    background-color: white;
    filter: drop-shadow(0px 0px 8px var(--border-button-color2));
}



.switch .switch-label,
.switch .label,
.checkbox .label,
.input .label{
    display: block;
    position: relative;
    font-size: 13px;
    color: #adacac;
    text-align: center;
    left: 0px;
    line-height: 16px;
    right: 0px;
}



#destroyed_win {
    position: absolute;
    top: calc(50% - 80px);
    width: 450px;
    left: calc(50% - 225px);

    color: white;
    box-sizing: border-box;
    padding: 20px;
}

#destroyed_win .dtitle {
    position: relative;
    color: white;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    font-size: 32px;

    text-align: center;
    animation: font_color_glitch 1300ms linear !important;
}


#destroyed_win .sbutton {
    text-align: center;
    margin: 20px 0px 10px;
    display: block;
}

#destroyed_win:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 4px;
    background-color: rgb(164,2,4);

    clip-path: var(--clip_destroyed_win);
}

#intro{
    z-index: 9990090;
    position:absolute;
    top:calc(50% - 400px);
    left:calc(50% - 600px);
    width:1200px;
    height:800px;
    background-color: var(--hud_backgroundcolor);
    color: white;
}
#intro:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 100;
}
#intro:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 100;
}

#intro .bckg {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    overflow: hidden;
}
#intro .bckg .slide {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-size: cover;
}
#intro .bckg .slide .no {
    position:absolute;
    top:80px;
    right: 80px;
    background-color: black;
    color: gray;
    font-size: 16px;
    padding: 3px 5px;
    text-align: right;
}
#intro .txt {
    position:absolute;
    left:50px;
    right: 50px;
    bottom: 30px;
    font-family:var(--fontFaimly_header);
    color: white;
    text-align: center;
    min-height: 100px;
    font-size: 20px;
    z-index: 95;
    text-transform: uppercase;
}
#intro .close {
    animation:none;
}
#intro .text-gray {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-image:url(intro/text-gray.png);
    z-index: 90;
    background-repeat: repeat-x;
}




@keyframes intro_scale_in{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.05);
    }
}


@keyframes intro_scale_out{
    0%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}


@keyframes intro_move_right{
    0%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(80px, 0px);
    }
}


#flashback{
    z-index: 999000;
    position: absolute;
    bottom: calc(20%);

    right: 10px;
    width: 50%;
    height: 150px;
    min-width: 570px;
    color: rgba(255,255,255,1);
    /*background: linear-gradient(to right, rgba(0,0,0,.85),rgba(0,0,0,0));*/
    /*border-top: 1px solid white;*/
    text-shadow: var(--shadow_textfull);
}
#flashback:before {
    content: '';
    display: block;
    position: absolute;
    top: -35px;
    left: 0px;
    right: 0px;
    bottom: 0px;

}


#flashback .bckg {
    position:absolute;
    height:150px;
    left:0px;
    width: 300px;
    top: 10px;
    z-index: 1;
    overflow: hidden;
}
#flashback .bckg .slide {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-size: cover;

    clip-path: var(--clip_flashback_icon);
}
#flashback .bckg .slide .no {
    position:absolute;
    top:80px;
    right: 80px;
    background-color: black;
    color: gray;
    font-size: 16px;
    padding: 3px 5px;
    text-align: right;
}

#flashback .ttl {
    position: absolute;
    left: 0px;
    top: -29px;
    font-family: var(--fontFaimly_header);
    text-align: left;
    font-size: 22px;
    z-index: 95;
    height: 30px;
    line-height: 30px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 1px;
    color: white;
}
#flashback .txt {
    position:absolute;
    left:315px;
    right: 10px;
    top: 8px;
    text-align: left;
    font-size: 16px;
    z-index: 95;
}

#flashback .txt p {
    padding: 5px 0px;
    ;
    margin: 0px;
}

#flashback .close {
    display: none;
    top: -20px;
    right: 1px;
}
#flashback:hover .close{
    display: block;
}
#flashback .text-gray {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-image:url(intro/text-gray.png);
    z-index: 90;
    background-repeat: repeat-x;
}

#deck{
    position: absolute;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    max-width: 1500px;
    min-width: 760px;
    z-index: 100001;
}

#deck:before {
    content: '';
    background-color: rgb(30, 30, 30);
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(16 11 4 / 80%) 0%, rgb(33 21 4 / 0%) 100%);
    background-position: -10px 0px;
    background-size: cover;
}



#deck  #deck_header.header {
    position: absolute;
    top: 45px;
    left: 250px;
    padding: 0px;


    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    z-index: 10;

}
#deck  #deck_header.header span {
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}
#deck  #deck_header.header span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}
#deck  #deck_header.header span:hover:before {
    background-color: black;
    filter: invert(0);
}


#deck .history_cards {
    position: absolute;
    left:0px;
    top: 0px;
    right: 0px;
    display: block;
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;
    padding: 19px 0px 9px;
    overflow: hidden;
}

#deck .history_cards:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgb(50, 30, 30) 0%, rgb(50, 30, 30) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;


    z-index: -1;
}





#deck .history_cards .fcard {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 105px;
    box-sizing: border-box;
}

#deck .history_cards .fcard .imgcard {
    width: 60px;
    left: calc(50% - 30px);
    top: 0px;
    position: absolute;
    transition: .08s;
}

#deck .history_cards .fcard .qty {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    bottom: 0px;

    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: rgb(150, 150, 150);
    font-size: 12px;
    line-height: 20px;

    padding-top: 50px;
    z-index: -1;
}

#deck .history_cards .fcard:hover {
    padding: 0px 0px 0px;
}
#deck .history_cards .fcard:hover .imgcard {
    width: 80px;
    left: calc(50% - 40px);
    top: -12px;
    z-index: 100;
    cursor: pointer;
}

#deck .history_cards .fcard:hover .qty {
    opacity: 0;
    transition: .08s;
}


#deck .content {
    position: absolute;
    top: 95px;
    right: 10px;
    width: calc(100% - 260px);
    overflow-y: scroll;
    max-height: calc(100% - 55px);
    box-sizing: border-box;
    padding-left: 36px;
    padding-top: 27px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fill, 182.6px);
    min-height: 0;
    max-height: calc(100% - 105px);
    padding-right: 25px;
    min-height: calc(100% - 105px);
}

#deck .content.include-hcards {

    padding-top: 160px;

}

#deck .content .info{
    display: block;
    text-align: center;
    color: silver;
    position: relative;

}

#deck .content .card {
    display: block;
    position: relative;
    width: 178px;
    height: 248px;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}
#deck .content .card .imgcard {
    width: 140px;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    position: absolute;
    transition: .08s;
}
#deck .content .card .qty {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 129px;
    bottom: 18px;
    top: 10px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: rgb(150,150,150);
    font-size: 13px;
    line-height: 20px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 10%, rgba(255,255,255,0.0) 100%);
    /* top: unset; */
    padding-top: 198px;
    z-index: -1;
}

#deck .content .card .qty span.cuseddeck,
#deck .content .card .qty span.cusedhand,
#deck .content .card .qty span.cusedbase,
#deck .content .card .qty span.cusedstation,
#deck .content .card .qty span.total
{
    display: inline-block;
    padding: 0px 5px 0px 23px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 2px center;
}

#deck .history_cards .fcard .qty span.cuseddeck,
#deck .history_cards .fcard .qty span.cusedhand,
#deck .history_cards .fcard .qty span.cusedbase,
#deck .history_cards .fcard .qty span.cusedstation,
#deck .history_cards .fcard .qty span.total{
    display: inline-block;
    padding: 0px 5px 0px 16px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 2px center;

}

#deck .content .card .qty span.cuseddeck,
#deck .history_cards .fcard .qty span.cuseddeck{
    background-image: url(ico/deck_32.png);
}

#deck .content .card .qty span.cusedhand,
#deck .history_cards .fcard .qty span.cusedhand{
    background-image: url(ico/bs_hand_32.png);
}

#deck .content .card .qty span.cusedbase,
#deck .history_cards .fcard .qty span.cusedbase{
    background-image: url(ico/ico_card_ship.png);
}

#deck .content .card .qty span.cusedstation,
#deck .history_cards .fcard .qty span.cusedstation{
    background-image: url(ico/ico_card_station.png);
}

#deck .content .card .qty span.total,
#deck .history_cards .fcard .qty span.total{
    background-image: url(ico/ico_sum_32.png);
    background-size: 12px;
}

#deck .title {
    right: unset;
    padding: 9px 0px 0px 9px;
}

#deck .content .card:hover {
    padding: 0px 0px 0px;
    z-index: 100000000
}
#deck .content .card:hover .imgcard {
    width: 250px;
    left: 50%;
    top: -27px;
    z-index: 100;
    cursor: pointer;
}
#deck .content .card:hover .qty {
    opacity: 0;
}
#deck .search {
    transform: translateX(-50%);
    position: absolute;
    top: 35px;
    left: calc(50% + 115px);
    width: 255px;
    height: 40px;
    background-image: url(ico/ico_search-30.png);
    background-position: right 3px top 10px;
    background-repeat: no-repeat;
    background-size: 20px;
}
#deck .search input {
    z-index: 1000;
    position: absolute;
    width: 223px;
    height: 40px;
    text-transform: uppercase;
    font-size: 18px;
}
#deck .menu {
    position: absolute;
    top: 45px;
    left: 15px;
    width: 230px;
    bottom: 320px;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-bottom: 250px;
}
#deck .menu .letter-header {
    position: relative;
    display: block;
    float: none;
    clear: both;

    color: rgb(123 123 123 / 50%);
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 4px 8px 0px 8px;
    margin: 0px 0px 7px 0px;
    line-height: 27px;
    text-transform: uppercase;
    width: calc(100% - 10px);
    border-bottom: 1px solid rgb(255 255 255 / 7%);
}
#deck .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
    white-space: nowrap;
    overflow: hidden;
}
#deck .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}
#deck .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}
#deck .cardready {
    position:absolute;
    height:230px;
    left:15px;
    width:220px;
    bottom:20px;
}





#cardscatalog{
    position: absolute;
    top: 70px;
    left: 30px;
    right: 30px;
    bottom: 40px;
    z-index: 1;
}
#cardscatalog:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(30, 30, 30, 0.5) 30%, rgb(30, 30, 30) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#cardscatalog .title{
    right: unset;
    padding-left: 9px;
}



#cardscatalog  #cardscatalog_header.header {
    position: absolute;
    top: 15px;
    left: 250px;
    padding: 0px;

    font-family: var(--fontFaimly_button);

    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 10;
}

#cardscatalog  #cardscatalog_header.header span {
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}

#cardscatalog  #cardscatalog_header.header span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}

#cardscatalog  #cardscatalog_header.header span:hover:before {
    background-color: black;
    filter: invert(0);
}

#cardscatalog  #cardscatalog_header.header span:hover {
    animation: blink 100ms linear 2 alternate;
}
#cardscatalog .content {
    position: absolute;
    top: 45px;
    right: 10px;
    width: calc( 100% - 250px );
    overflow-y: scroll;

    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 20px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    max-height: calc(100% - 60px);
    padding-right: 10px;

}
#cardscatalog .content .info{
    text-align: center;
    color: rgb(200,200,200);
    margin-top: 12%;
    grid-gap: initial;
    grid-column: 1 / span 40;
}

#cardscatalog .content .card {
    position: relative;
    display: block;
    width: 155px;
    height: 230px;
    box-sizing: border-box;
}
#cardscatalog .content .card .imgcard {
    width: 140px;
    left: calc(50% - 70px);
    top: 10px;
    position: absolute;
    transition: .08s;
}
#cardscatalog .content .card:hover {
    padding: 0px 0px 0px;
}
#cardscatalog .content .card:hover .imgcard {
    width: 180px;
    left: calc(50% - 90px);
    top: -17px;
    z-index: 100;
    cursor: pointer;
}
#cardscatalog .content .card:hover .qty {
    opacity: 0;
}
#cardscatalog .search {
    position: absolute;
    top: 65px;
    left: 10px;
    width: 213px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;

}
#cardscatalog .search input {
    z-index: 1000;
    position: absolute;
    width: 184px;
    text-transform: uppercase;
}
#cardscatalog .menu {
    position:absolute;
    top:115px;
    left:15px;
    width:220px;
    bottom:14px;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-bottom: 250px;
}

#cardscatalog .menu .letter-header {
    position: relative;
    display: block;
    float: none;
    clear: both;

    color: rgb(123 123 123 / 50%);
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 4px 8px 0px 8px;
    margin: 0px 0px 7px 0px;
    line-height: 27px;
    text-transform: uppercase;
    width: calc(100% - 10px);
    border-bottom: 1px solid rgb(255 255 255 / 7%);
}

#cardscatalog .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
    overflow: hidden;
    white-space: nowrap;
}
#cardscatalog .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}
#cardscatalog .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}
#cardscatalog .cardready {
    position:absolute;
    height:230px;
    left:15px;
    width:220px;
    bottom:20px;
}
#cardscatalog .opencardready {
    position:absolute;
    top:130px;
    left:calc(50% - 50px);
    width: 100px;
    height:25px;
    border: 1px solid white;
    color: white;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
}
#cardscatalog .opencardready:hover {
    background-color: black;
    filter: invert(1);
    animation: blink 100ms linear 2 alternate;
}


#carddetail_discard{
    position: absolute;
    width: 480px;
    height: 610px;

    z-index: 1;
}

#carddetail_discard:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(40,40,40);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#carddetail_discard .text{
    position: absolute;
    top: 70px;
    left: 20px;
    right: 20px;
    font-size: 14px;
    color: white;
    text-align: center;

}

#carddetail_discard .scard{
    position: absolute;
    bottom: 180px;
    top: 115px;
    left: 20px;
    right: 20px;

}

#carddetail_discard .scard .imgcard{
    position: absolute;
    height: calc(100% - 30px);
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
}

#carddetail_discard .scard .qty {
    display: block;
    position: absolute;
    left: 50%;
    width: 75px;
    transform: translateX(-50%);
    top: unset;
    bottom: 0px;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: silver;
    font-size: 14px;
    line-height: 30px;
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgb(88 87 87 / 20%));
}

#carddetail_discard .sactions{
    position: absolute;
    bottom: 60px;
    left: 20px;
    right: 20px;
    text-align: center;
}

#carddetail_discard .sactions .discard-card-qty {
    position: absolute;
    bottom: 50px;
    right: calc(50% - 40px);

    width: 80px;

}

#carddetail_discard .sactions .discard-card-btn {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}



#carddetail{
    position: absolute;
    width: 880px;
    height: 835px;

    z-index: 1;
}

#carddetail:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#carddetail .image {
    right: 1px;
    left: 1px;
    bottom: 1px;
    top: 1px;
    position: absolute;
    z-index: -1;

    clip-path: var(--clip_menu_standardbox);
}

#carddetail .image span {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
#carddetail .image span:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: -10px;
    background-image:  linear-gradient(40deg, rgb(0 0 0) 0%, rgb(0 0 0 / 76%) 100%);
}

#carddetail .imgcard {
    left: 30px;
    top: 65px;
    position: absolute;
    width: 350px;
}
#carddetail .energy {
    display: block;
    position: absolute;
    left: 425px;
    top: 67px;
    height: 30px;
    box-sizing: border-box;
    text-align: left;
    padding: 0px 0px 0px 20px;
    color: rgb(166,240,255);
    font-size: 18px;
    line-height: 30px;
    background: url(./ico/ico_energy.png) center left no-repeat !important;
    background-size: 16px;
}
#carddetail .morale {
    display: block;
    position: absolute;
    left: 505px;

    top: 67px;
    height: 30px;
    box-sizing: border-box;
    text-align: left;
    padding: 0px 0px 0px 20px;
    color: #ffbc00;
    font-size: 18px;
    line-height: 30px;
    background: url(./ico/ico_morale.png) center left no-repeat !important;
    background-size: 16px;
}
#carddetail .qty {
    display: block;
    position: absolute;
    left: 139px;
    width: 132px;
    top: 551px;
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: silver;
    font-size: 16px;
    line-height: 40px;
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(10,10,10,0.85));
}

#carddetail .qty > span {
    display: inline-block;
    padding: 0px 5px 0px 23px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 5px center;
}



#carddetail .qty > span.cuseddeck {
    background-image: url(ico/deck_32.png);
}

#carddetail .qty > span.cusedhand {
    background-image: url(ico/bs_hand_32.png);
}

#carddetail .qty > span.cusedbase {
    background-image: url(ico/ico_card_ship.png);
}

#carddetail .qty > span.cusedstation {
    background-image: url(ico//ico_card_station.png);
}


#carddetail .vallist {
    display: block;
    position: absolute;
    left: 425px;
    right: 25px;
    top: 105px;

}

#carddetail .vallist .vlattrb {
    display: block;
    color: white;
    font-size: 14px;
    line-height: 20px;
    padding-left: 110px;
    text-align: left;
    position: relative;
}

#carddetail .vallist .vlattrb .sub {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 150px;
    color: rgba(150,150,150,1);
    font-size: 12px;
    text-transform: uppercase;
}



#carddetail .nft-data {
    display: block;
    position: absolute;
    left: 423px;
    right: 20px;
    bottom: 80px;
    text-align: center;
}

#carddetail .nft-data .allcards {
    display: inline-block;
}




#carddetail .nft-data .buyat {
    padding-left: 33px;

}



#carddetail .nft-data .buyat:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;
    clip-path: var(--clip_button);
    background-image: url(ico/opensea_Logomark-Transparent-White.png);
    background-size: 18px;
    background-position: 8px center;
    background-repeat: no-repeat;
    z-index: -1;
}




#carddetail .content {
    display: block;
    position: absolute;
    left: 425px;
    right: 20px;
    top: 280px;
    padding-right: 25px;
    bottom: 175px;
    text-align: left;
    color: rgba(210,210,210,1);
    font-size: 21px;
    overflow-y: scroll;

}

#carddetail .content p {
    text-align: justify;
}


#carddetail .content ul {
    margin: 0px;
    padding: 0px 0px 0px 15px;
}
#carddetail .content ul li {
    margin: 0px;
    padding: 2px 0px;
}

#carddetail .content .whitelink {
    color: black;
    background-color: white;
    padding: 1px 8px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fontFaimly_button);
    text-shadow: none;

    clip-path: var(--clip_whitelink);
}

#carddetail .content .whitelink:hover {
    animation: blink 100ms linear 2;
}



#carddetail .subtitle {
    display: block;
    text-align: left;
    color: rgba(210,210,210,1);
    font-size: 21px;
}
#carddetail .subtitle .right{
    font-size: 10px;
    color: rgba(150,150,150,1);
    text-align: right;
    padding: 10px 0px 0px 80px;
    text-transform: uppercase;
}
#carddetail .cdescription {
    display: block;

    color: rgb(255 223 173);
    font-size: 18px;
    line-height: 26px;
    padding: 20px 35px 0px;
    text-align: center;
}

#carddetail .description {
    display: block;
    padding-top: 20px;
    color: rgba(250,250,250,1);
    font-size: 14px;
    line-height: 22px;
}
#carddetail .restriction {
    display: block;
    padding-top: 20px;
    color: rgba(250,250,250,1);
    font-size: 14px;
    line-height: 22px;
}
#carddetail .actions {
    display: block;
    position: absolute;
    left: 395px;
    right: 15px;
    bottom: 25px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: rgba(210,210,210,1);
    font-size: 16px;
    line-height: 30px;

}

#carddetail .actions .button {
    margin: 5px;
}

#carddetail .button.frombelt-card,
#carddetail .button.tobelt-card {
    width: 38px;
    height: 38px;
    padding: 0px;
    position: absolute;
    top: 45px;
    right: 15px;
    margin: 0px;
}

#carddetail .button.frombelt-card:before,
#carddetail .button.tobelt-card:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center 46%;
    background-repeat: no-repeat;
    background-size: 17px;
}

#carddetail .button.frombelt-card:hover:before,
#carddetail .button.tobelt-card:hover:before {
    box-shadow: none;
}

#carddetail .button.frombelt-card:before {
    background-image: url(ico/ico_belt_remove_64.png);
}

#carddetail .button.tobelt-card:before {
    background-image: url(ico/ico_belt_add_64.png);
}

#carddetail .button.frombelt-card.unactive:before,
#carddetail .button.tobelt-card.unactive:before {
    filter: grayscale(1) brightness(0.4);
}

#carddetail .exports {
    display: block;
    position: absolute;
    left: 425px;
    right: 20px;
    padding-right: 25px;
    padding-left: 0px;
    bottom: 125px;
}
#carddetail .exports .export {
    display: block;
    position: relative;
    color: white;
    line-height: 30px;
    height: 30px;
    margin: 2px 0px 0px;
}
#carddetail .exports .export .valid {
    display: block;
    position: absolute;
    left: 0px;
    height: 30px;
    font-size: 13px;
    color: silver;
}
#carddetail .exports .export .hash {
    display: block;
    position: absolute;
    left: 70px;
    height: 30px;
    cursor: text;
    padding-right: 75px;
    width: 200px;
}
#carddetail .exports .export .hash .hashval {
    user-select: all;
    font-size: 16px;
    color: #b9dbff;
}


#carddetail .exports .export .hash .copy {
    position: absolute;
    top: 0px;
    right: 0px;
    line-height: 28px;
    height: 30px;
    font-size: 11px;
}

#carddetail .exports .export .hash .copy.copied{

    color: gray;

}

#carddetail .exports .export .hash .copy:not(.copied):hover{
    animation: blink 100ms linear 2;
}

#carddetail .exports .export .cancel {
    position: absolute;
    top: 0px;
    left: 350px;
    line-height: 30px;
    height: 30px;
    padding: 0px 13px;
    font-size: 12px;
}

#carddetail .exports .export .cancel:hover {
    animation: blink 100ms linear 2 alternate;
}

#carddetail .merge-options {
    display: block;
    position: absolute;
    left: 25px;
    width: 355px;
    bottom: 45px;
    height: 155px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
}

#carddetail .merge-options .no-available{
    display: block;
    position: absolute;
    left: 10px;
    top: 40px;
    right: 10px;
    color: rgba(150,150,150,0.5);
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 12px;
}


#carddetail .merge-options .merge-option_info{
    display: block;
    position: absolute;
    left: 10px;
    top: 137px;
    right: 10px;
    color: rgba(150,150,150,0.5);
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 12px;
}

#carddetail .merge-options .merge-qty {
    color: rgb(255 223 173);
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: -2px;
    font-size: 13px;
}


#carddetail .merge-options .merge-option .detail {
    color: white;
    display: none;
    text-align: center;
    position: absolute;
    left: calc(50% - 50px);
    /* right: 0px; */
    width: 100px;
    bottom: -35px;
    height: 42px;
    line-height: 60px;
    cursor: pointer;
    text-decoration: underline;
    z-index: 1000;
}

#carddetail .merge-options .merge-option .detail:hover {
    animation: blink 100ms linear 2 alternate;

}

#carddetail .merge-options .merge-option:hover .detail {
    display: block;

}

#carddetail .merge-options .merge-option:hover .merge-mor {
    display: none;

}

#carddetail .merge-options .sub {
    background-image: url(ico/cards_merge.png);
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: left center;
    color: rgba(150, 150, 150, 1);
    display: inline-block;
    position: absolute;
    left: 50%;
    right: 0px;
    height: 22px;
    line-height: 22px;
    top: -38px;
    text-transform: uppercase;
    transform: translateX(-50%);
    padding-left: 24px;
    white-space: nowrap;
    font-size: 14px;
}

#carddetail .merge-option {
    display: inline-block;
    width: 58px;
    height: 129px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    margin: 0px 8px 0px 8px;
    position: relative;
}

#carddetail .merge-option:hover .imgcard {
    width: 150px;
    left: calc(50% - 75px);
    top: -70px;
    z-index: 100;
}

#carddetail .merge-option.available canvas {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    padding: 0px 0px 0px;
    cursor: pointer;
    transition: .08s;
}

#carddetail .merge-option.unavailable canvas {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    padding: 0px 0px 0px;
    filter: grayscale(1) brightness(0.5);
    cursor: no-drop;
}

#carddetail .merge-option.unavailable .merge-qty {
    color: rgba(150,150,150,1);
}





#carddetail .merge-mor {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: block;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 0px 5px;
    margin: 0px;
    padding: 0px 5px;
    color: #ffbc00;
}

#carddetail .merge-option.unavailable .merge-mor {
    display: none;
}

/*#carddetail .merge-option.available:hover canvas { animation: blink 100ms linear 2 alternate;}  */

#parallaxIntro-stmivac {

    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */

    width: 100vw;
    height: 100vh;

    background: rgba(0,0,0,0.9); /* nebo cokoli */
    z-index: 9999998; /* nebo uprav dle potřeby */
}

#parallaxIntro {
    z-index: 9999999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(94vmin, 1024px);
    aspect-ratio: 1 / 1;

    background-color: var(--hud_backgroundcolor);
    color: white;
    clip-path: var(--clip_menu_standardbox);
}



#parallaxIntro .close {
    opacity: 0.4;
}


/* Parallax base styles
--------------------------------------------- */

.parallax {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    perspective: 300px;
    perspective-origin: 100%;
    background-color: black;
}



.parallax__group {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    transform-origin: 100%;
}

.parallax__layer img {
    position: absolute;

}

.parallax__layer--fore {

    transform: translateZ(90px) scale(.7);
    z-index: 1;
}

.parallax__layer--base {
    transform: translateZ(0);
    z-index: 4;
}

.parallax__layer--back {
    transform: translateZ(-100px) scale(1.34);
    z-index: 3;
}

.parallax__layer--deep {
    transform: translateZ(-295px) scale(2);
    z-index: 2;
}


.parallax__layer--far {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateZ(-295px) scale(2);
    transform-origin: 100%;
    z-index: 0;
    pointer-events: none;
}



.parallax .titlebox {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translateX(-50%) translateY(-50%);
    width: 60%;

    font-size: 40px;
    color: #ffbc00;
    text-transform: uppercase;
    box-sizing: border-box;
    font-family: var(--fontFaimly_header);
    filter: drop-shadow(2px -2px 2px rgba(0, 0, 255, 0.3)) drop-shadow(-2px 2px 2px rgba(255, 0, 0, 0.3)) drop-shadow(-40px -0px 5px rgba(0, 0, 255, 0.1)) drop-shadow(8px -8px 4px rgba(150, 0, 205, 0.2)) drop-shadow(0px 0px 40px rgba(155, 189, 235, 1));
}

.parallax .titlebox small {
    display: block;
    font-size: 17px;
    padding: 0px 0px 10px;
    color: white;
}

.parallax .helpbox {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%) translateY(-20%);
    width: 150px;
    height: 150px;
    padding-top: 24px;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    box-sizing: border-box;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-family: var(--fontFaimly_header);
    animation: firststeps-scrolldown 3000ms linear infinite;
    /*filter: drop-shadow(2px -2px 2px rgba(0, 0, 255, 0.3)) drop-shadow(-2px 2px 2px rgba(255, 0, 0, 0.3)) drop-shadow(-40px -0px 5px rgba(0, 0, 255, 0.1)) drop-shadow(8px -8px 4px rgba(150, 0, 205, 0.2)) drop-shadow(0px 0px 40px rgba(155, 189, 235, 1));*/
}

.parallax .textbox {
    text-align: left;
    position: absolute;
    border: 1px solid black;
    color: black;
    background-color: white;
    padding: 10px 15px;
    max-width: 33%;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--fontFaimly_button);
    font-style: italic;
    box-sizing: border-box;
}


.parallax .p_frame {
    position: absolute;
    border: 1px solid black;
    background-color: gray;
}

.parallax .p_whiteline {
    position: absolute;
    background-color: white;
    height: 5px;
    left: 0px;
    right: 0px;

}

#parallaxIntro .parallax__pager {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

#parallaxIntro .parallax__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    transition: 0.2s;
}

#parallaxIntro .parallax__dot.active {
    background: white;
    transform: scale(1.4);
    filter: drop-shadow(2px -2px 2px rgba(0, 0, 255, 0.3)) drop-shadow(-2px 2px 2px rgba(255, 0, 0, 0.3)) drop-shadow(-4px -0px 5px rgba(0, 0, 255, 0.1));
}

#store {
    position: absolute;
    min-width: 1070px;
    width: calc(100% - 400px);
    min-height: 600px;
    height: 90%;




}
#store:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(5,5,5);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#store .info {
    padding: 0px;
}

#store  #store_header.header {
    position: absolute;
    top: 65px;
    left: 250px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    z-index: 10;
    cursor: pointer;
}

#store  #store_header.header span {
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}

#store  #store_header.header span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}

#store  #store_header.header span:hover:before {
    background-color: black;
    filter: invert(0);
}

#store  #store_header.header span:hover {
    animation: blink 100ms linear 2 alternate;
}

#store .content {
    position: absolute;
    top: 65px;
    right: 10px;
    width: calc( 100% - 260px );
    bottom: 5px;
    overflow-x: hidden;
    overflow-y: scroll;

    border-left: 2px solid white;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 40px;
    padding-bottom: 140px;
}

#store .content .filterinfo {
    display: block;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,1);
    text-transform: uppercase;
    line-height: 19px;
    padding: 2px 5px 30px;
    position: relative;
}
#store .content .filterinfo .whitelink {
    color: black;
    background-color: white;
    padding: 1px 8px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fontFaimly_button);
    text-shadow: none;

    clip-path: var(--clip_whitelink);
}

#store .content .filterinfo .whitelink:hover {
    animation: blink 100ms linear 2;
}

#store .content .deals  {
    display: grid;
    justify-content: center;
    position: relative;
    text-align: center;
    margin: 0px 10px 0px 0px;
    padding: 0px;
    gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
}
#store .content .deal {

    position: relative;


    height: 230px;

    box-sizing: border-box;
    cursor: pointer;
    text-shadow: var(--shadow_textfull);
}

#store .content .deal .pimg {
    position: absolute;
    top: 5%;
    right: 2%;
    bottom: 35%;
    width: 43%;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 20px var(--pack_shadow_color2)) brightness(1);
}

#store .content .deal:hover .pimg {
    filter: drop-shadow(0px 0px 20px var(--pack_shadow_color2)) brightness(1.3);
}

#store .content .deal .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_win_marketoffer);
}
#store .content .deal .img:after {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    /*background-image: linear-gradient(360deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(247deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);*/
    background-image: linear-gradient(360deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(247deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, .9) 100%);
    background-size: cover;
}
#store .content .deal .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}

#store .content .deal.deal-starter .img:before {
    background-image: url(store/store_deal_starter.jpg);
    background-position: center right,left;
}
#store .content .deal.deal-starter:after {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 150px;
    height: 150px;
    background-image: url(store/store_special_offer_corner.png);
    background-position: top right;
    background-repeat: no-repeat;
}
#store .content .deal.deal-colonist .img:before {
    background-image: url(store/store_deal_colonist.jpg);
    background-position: center right,left;
}
#store .content .deal.deal-explorer .img:before {
    background-image: url(store/store_deal_explorer.jpg);
    background-position: center right,left;
}
#store .content .deal.deal-conqueror .img:before {
    background-image: url(store/store_deal_conqueror.jpg);
    background-position: center right,left;
}
#store .content .deal.deal-sovereign .img:before {
    background-image: url(store/store_deal_sovereign.jpg);
    background-position: center right,left;
}

#store .content .deal.deal-imperial .img:before {
    background-image: url(store/store_deal_imperial.jpg);
    background-position: center right,left;
}

#store .content .deal.deal-transcendental .img:before {
    background-image: url(store/store_deal_transcendental.jpg);
    background-position: center right,left;
}

#store .content .deal.deal-reviveship .img:before {
    background-image: url(store/store_deal_revive.jpg);
    background-position: center right,left;
}
#store .content .deal .name {
    color: #ffbc00;
    position: absolute;
    top: 15px;
    left: 19px;
    right: 39%;
    font-size: 24px;
    font-family: var(--fontFaimly_header);
    line-height: 28px;
    text-align: left;
    height: 54px;
    display: flex;
    align-items: center;
}
#store .content .deal .txt {
    top: 75px;
    left: 10px;
}
#store .content .deal .txt ul li .smorale .sub {
    content: 'MORALE';
    display: inline-block;
    padding-left: 25px;
    padding-top: 3px;
    height: 19px;
    background: url(./ico/morale_16.png) 6px 0px no-repeat;
    background-size: 16px;
    font-size: 10px;
    color: white;
    position: relative;
}
#store .content .deal .price {
    position: absolute;
    bottom: 15px;
    right: 20px;
    white-space: nowrap;
}

#store .content .deal:hover .img:before {
    animation: crt 5000ms linear infinite;
}

#store .content .packs  {
    display: grid;
    justify-content: center;
    position: relative;
    text-align: center;
    margin: 20px 10px 20px 0px;
    padding: 0px;
    gap: 13px;
    grid-template-columns: repeat(auto-fit, 280px);
}

#store .content .pack  {
    position: relative;
    height: 440px;
    box-sizing: border-box;
    cursor: pointer;
    text-shadow: var(--shadow_textfull);
    clip-path: var(--clip_win_marketoffer);
}
#store .content .pack  .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#store .content .pack .img:after {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    /*background-image: linear-gradient(360deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(247deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);*/
    background-image: linear-gradient(360deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(247deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, .9) 100%);
    background-size: cover;
}

#store .content .pack  .img .ins {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_pack.png);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
#store .content .pack:hover  .img .ins {
    animation: crt 5000ms linear infinite;
}



#store .content .pack .name {
    color: #ffbc00;
    position: absolute;
    top: 25px;
    left: 20px;
    right: 20px;
    font-size: 24px;
    font-family: var(--fontFaimly_header);
    line-height: 28px;
    text-align: left;


    align-items: center;
}
#store .content .pack .txt {
    top: 125px;
    left: 25px;
    right: 25px;
}

#store .content .pack .txt ul li {
    padding-left: 3px !important;
}

#store .content .pack .txt p {
    padding-left: 3px !important;
    font-size: 12px !important;
}
#store .content .pack  .price {
    position: absolute;
    bottom: 20px;
    right: 20px;
    white-space: nowrap;
}




#store .content .sets  {
    display: block;
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding: 22px 0px 0px;
}



#store .content .set  {
    display: inline-block;
    position: relative;
    width: 350px;
    height: 250px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 20px 5px;
    text-shadow: var(--shadow_textfull);
}
#store .content .set  .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#store .content .set  .img .ins {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_pack.png);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
}
#store .content .set:hover  .img .ins {
    animation: crt 5000ms linear infinite;
}

#store .content .set:hover .name {
    animation: shadowing 5000ms linear;
}

#store .content .set  .name {
    position: absolute;
    top: 10px;
    left: 37px;
    /* right: 20px; */
    font-size: 40px;
    font-family: var(--fontFaimly_header);
    color: white;

    text-align: left;
    line-height: 40px;
    width: 0%;
}
#store .content .set  .txt {
    top: 100px;
    left: 25px;
}
#store .content .set  .price {
    position: absolute;
    bottom: 15px;
    right: 20px;
}



#store .content .premiums  {
    display: grid;
    justify-content: center;
    position: relative;
    text-align: center;
    margin: 0px 10px 0px 0px;
    padding: 0px;
    gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}


#store .content .premium  {

    position: relative;
    /* width: calc(33.3% - 14px); */
    /* min-width: 250px; */
    max-width: 307px;
    /* margin: 4px 6px; */
    height: 360px;
    box-sizing: border-box;
    cursor: pointer;
    text-shadow: var(--shadow_textfull);

}
#store .content .premium  .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    clip-path: var(--clip_win_marketoffer);
}
#store .content .premium  .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 70%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%),linear-gradient(170deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 50%);
    background-size: cover;
    background-position: bottom left;
}
#store .content .premium  .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_premium.png);
    background-size: cover;
    background-position: top right;

}


#store .content .premium:hover .img:before {
    animation: crt 5000ms linear infinite;
}

#store .content .premium.premium-3  .img:before {
    background-image: url(store/0.png),url(store/store_premium_3.jpg);
    background-position: center 75px, center;
    background-size: 150px,cover;
    background-repeat: no-repeat;
}
#store .content .premium.premium-5  .img:before {
    background-image: url(store/1.png),url(store/store_premium_5.jpg);
    background-position: center 75px, center;
    background-size: 150px,cover;
    background-repeat: no-repeat;
}
#store .content .premium.premium-10 .img:before {
    background-image: url(store/2.png),url(store/store_premium_10.jpg);
    background-position: center 75px, center;
    background-size: 150px,cover;
    background-repeat: no-repeat;
}
#store .content .premium.premium-20 .img:before {
    background-image: url(store/3.png),url(store/store_premium_20.jpg);
    background-position: center 75px, center;
    background-size: 150px,cover;
    background-repeat: no-repeat;
}

#store .content .premium.premium-40 .img:before {
    background-image: url(store/4.png),url(store/store_premium_40.jpg);
    background-position: center 75px, center;
    background-size: 150px,cover;
    background-repeat: no-repeat;
}

#store .content .premium.premium-90 .img:before {
    background-image: url(store/5.png),url(store/store_premium_90.jpg);
    background-position: center 59px, center;
    background-size: 106px, cover;
    background-repeat: no-repeat;
}

#store .content .premium  .name {
    color: #ffbc00;
    position: absolute;
    top: 15px;
    left: 19px;
    right: 19px;
    font-size: 24px;
    font-family: var(--fontFaimly_header);
    line-height: 26px;
    text-align: center;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#store .content .premium  .txt {
    right:10px;
    top: 185px;
    left: 0px;
}
#store .content .premium  .price {
    position: absolute;
    bottom: 19px;
    right: 29px;
}


#store .content .deal .txt,
#store .content .pack .txt,
#store .content .premium .txt,
#storebuy .txt {
    text-align: left;
    position: absolute;
    font-size: 12px;
    color: white;
}
#store .content .deal .txt p,
#store .content .pack .txt p,
#store .content .premium .txt p,
#storebuy .txt p {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    margin: 0px 0px 10px;
}

#store .content .deal .txt p small,
#store .content .pack .txt p small,
#store .content .premium .txt p small,
#storebuy .txt p small {
    color: #ffbc00;
}

#store .content .deal .txt ul,
#store .content .pack .txt ul,
#store .content .premium .txt ul,
#storebuy .txt ul {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
}
#store .content .deal .txt ul li,
#store .content .pack .txt ul li,
#store .content .premium .txt ul li,
#storebuy .txt ul li {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 25px;
}
#store .content .deal .txt ul li .spremiumsday,
#store .content .pack .txt ul li .spremiumsday,
#store .content .premium .txt ul li .spremiumsday,
#storebuy .txt ul li .spremiumsday,
#storebuy .description ul li .spremiumsday {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .spremiumsday .sub,
#store .content .pack .txt ul li .spremiumsday .sub,
#store .content .premium .txt ul li .spremiumsday .sub,
#storebuy .txt ul li .spremiumsday .sub {
    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#store .content .deal .txt ul li .squestcard,
#store .content .pack .txt ul li .squestcard,
#store .content .premium .txt ul li .squestcard,
#storebuy .txt ul li .squestcard,
#storebuy .description ul li .squestcard {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .squestcard .sub,
#store .content .pack .txt ul li .squestcard .sub,
#store .content .premium .txt ul li .squestcard .sub,
#storebuy .txt ul li .squestcard .sub {
    content: 'QUEST CARDS';
    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#store .content .deal .txt ul li .srevivecard,
#store .content .pack .txt ul li .srevivecard,
#store .content .premium .txt ul li .srevivecard,
#storebuy .txt ul li .srevivecard,
#storebuy .description ul li .srevivecard {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .srevivecard .sub,
#store .content .pack .txt ul li .srevivecard .sub,
#store .content .premium .txt ul li .srevivecard .sub,
#storebuy .txt ul li .srevivecard .sub {

    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}

#store .content .deal .txt ul li .sbasiccard,
#store .content .pack .txt ul li .sbasiccard,
#store .content .premium .txt ul li .sbasiccard,
#storebuy .txt ul li .sbasiccard,
#storebuy .description ul li .sbasiccard {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .sbasiccard .sub,
#store .content .pack .txt ul li .sbasiccard .sub,
#store .content .premium .txt ul li .sbasiccard .sub,
#storebuy .txt ul li .sbasiccard .sub {
    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}
#store .content .deal .txt ul li .srarecard,
#store .content .pack .txt ul li .srarecard,
#store .content .premium .txt ul li .srarecard,
#storebuy .txt ul li .srarecard,
#storebuy .description ul li .srarecard {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .srarecard .sub,
#store .content .pack .txt ul li .srarecard .sub,
#store .content .premium .txt ul li .srarecard .sub,
#storebuy .txt ul li .srarecard .sub {

    display: inline;
    padding-left: 5px;
    font-size: 12px;
    color: white;
}

#store .content .deal .txt ul li .srarecard .sub small,
#store .content .pack .txt ul li .srarecard .sub small,
#store .content .premium .txt ul li .srarecard .sub small,
#storebuy .txt ul li .srarecard .sub small {

    display: inline;
    color: #ffbc00;
    padding-left: 5px;
    font-size: 12px;
    text-transform: none;
}

#store .content .deal .txt p,
#store .content .pack .txt p,
#store .content .premium .txt p,
#storebuy .txt p {
    position: relative;
    display: block;
    margin: 10px 0px 0px;
    padding: 0px 0px 0px 5px;
}



#store .content .deal .txt ul li .smorale,
#store .content .pack .txt ul li .smorale,
#store .content .premium .txt ul li .smorale,
#storebuy .txt ul li .smorale,
#storebuy .description ul li .smorale {
    font-size: 17px;
    color: #ffbc00;
}
#store .content .deal .txt ul li .smorale .sub,
#store .content .pack .txt ul li .smorale .sub,
#store .content .premium .txt ul li .smorale .sub,
#storebuy .txt ul li .smorale .sub {

    display: inline-block;
    padding-left: 25px;
    padding-top: 3px;
    height: 19px;
    background: url(./ico/morale_16.png) 6px 0px no-repeat;
    background-size: 16px;
    font-size: 12px;
    color: white;
    position: relative;
}

#store .content .deal .txt ul li .pos,
#store .content .pack .txt ul li .pos,
#store .content .premium .txt ul li .pos,
#storebuy .txt ul li .pos,
#storebuy .description ul li .pos {
    display: block;
    font-size: 12px;
    color: #ffbc00;
    padding-left: 20px;
    text-transform: uppercase;
}

#store .content .deal .txt ul li .neg,
#store .content .pack .txt ul li .neg,
#store .content .premium .txt ul li .neg,
#storebuy .txt ul li .neg,
#storebuy .description ul li .neg {
    display: block;
    font-size: 10px;
    color: gray;
    padding-left: 20px;
    text-transform: uppercase;
}


#store .content .deal .time-rest,
#store .content .pack .time-rest,
#store .content .premium .time-rest {
    position: absolute;
    bottom: 10px;
    left: 35px;
    color: #ce000b ;
    font-family: var(--fontFaimly_semi);
    font-size: 16px;
    /* transform: rotate(40deg); */
    /* width: 120px; */
    /* height: 20px; */
    line-height: 20px;

}



#store .content .deal .price .basic,
#store .content .pack .price .basic,
#store .content .premium .price .basic {
    position: absolute;
    bottom: 39px;
    right: 41px;
    font-size: 21px;
    color: rgb(234, 33, 43);
    text-align: right;
    white-space: nowrap;
    font-family: var(--fontFaimly_semi);
}

#store .content .deal .price .basic:after,
#store .content .pack .price .basic:after,
#store .content .premium .price .basic:after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -5px;
    left: -5px;
    top: 0px;
    background-image: linear-gradient(transparent calc(50% - 0.8px),#ce000b calc(50% - 0.8px),#ce000b calc(50% + 0.8px),transparent calc(50% + 0.8px));
    transform: rotate(4deg);
}





#store .content .deal .price .basic small,
#store .content .pack .price .basic small,
#store .content .premium .price .basic small {
    font-size: 14px;
    vertical-align: text-top;
    text-decoration: none;
}

#store .content .deal .price .final,
#store .content .pack .price .final,
#store .content .premium .price .final {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 32px;
    color: #ffbc00;
    text-align: right;

}

#store .content .deal .price .final small,
#store .content .pack .price .final small,
#store .content .premium .price .final small {
    font-size: 17px;
    vertical-align: text-top;
}

#store .content .deal .price .final .curr,
#store .content .pack .price .final .curr,
#store .content .premium .price .final .curr {
}

#store .content .price .curr.czk,
#storebuy .confirmation .curr.czk {

    font-size: 0.5em;
}

#store .content .price .curr.eur,
#storebuy .confirmation .curr.eur{
    padding-right: 5px;

}


#store .content .deal .price.discounted .final,
#store .content .pack .price.discounted .final,
#store .content .premium .price.discounted .final {
    color: #ffbc00;
}



#store .content .deal .price .perunit,
#store .content .pack .price .perunit,
#store .content .premium .price .perunit {
    position: absolute;
    bottom: -11px;
    right: 0px;
    font-size: 12px;

    color: #cdc9c9;

    text-align: right;
    white-space: nowrap;
}

#store .content .deal .price .final small,
#store .content .pack .price .final small,
#store .content .premium .price .final small {
    font-size: 12px;
}

#store .content .deal .price .info,
#store .content .pack .price .info,
#store .content .premium .price .info {
    position: absolute;
    bottom: -11px;
    right: 20px;
    font-size: 10px;

    color: #ffbc00;

    text-align: right;
    white-space: nowrap;
    padding: 0px;
    text-transform: none;
}

#store .content .premium .price .info {
    bottom: -26px;
}

#store .content .deal .discount,
#store .content .pack .discount,
#store .content .premium .discount {
    position: absolute;
    height: 60px;
    width: 60px;
    font-size: 20px;

    color: rgb(255,255,255);

    text-align: center;
    text-shadow: 2px 2px 0 #000;
    border-radius: 50px;
    line-height: 68px;
    background-image: url(store/store_special_offer_sticker.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    z-index: 1;
}

#store .content .deal .discount:after,
#store .content .pack .discount:after,
#store .content .premium .discount:after {
    content: '%';
    position: relative;
    font-size: 10px;

    color: rgb(255,255,255);

    padding-left: 2px;
    text-shadow: 2px 2px 0 #000;
}

#store .content .deal .discount {
    bottom: 69px;
    right: -10px;

}

#store .content .pack .discount {
    bottom: 70px;
    right: -10px;
}

#store .content .premium .discount {
    bottom: 70px;
    right: -10px;
}




#store .menu {
    position: absolute;
    top: 130px;
    left: 15px;
    width: 220px;
    bottom: 320px;
}

#store .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);



}

#store .menu .filter.active {
    color: var(--hud_bookmarkcolor);


}

#store .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
}



#deck .cardconf {
    position: absolute;
    left: 15px;
    width: 230px;
    bottom: 164px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    transform: translateY(-50%);
}

#deck .cardconf .deckexpc {
    position: relative;
    height: 40px;
}

#deck .cardconf .deckexpc:hover {
    animation: blink 100ms linear 2 alternate;
}


#deck .cardconf .deckexpc .exslevy {
    position: absolute;
    left: 0px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
}

#deck .cardconf .deckexpc .exspravy {
    position: absolute;
    right: 10px;
    width: calc(100% - 50px);
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

#deck .cardconf .deckexpc .exspravy label {
    cursor: pointer;
}

#deck .cardconf .deckexpc .exslevy .imgcardmerge {
    width: 28px;
    height: 28px;
    background-image: url('ico/cards_merge.png');
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#deck .cardconf .deckexpc .exslevy > input {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0px;
    padding: 0px;
}



#deck .cardconf deckexpc .exslevy label {
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

#deck .cardconf deckexpc:hover {
    animation: blink 100ms linear 2 alternate;
}

#cardscatalog .cardshop,
#deck .cardshop {
    position: absolute;
    height: 160px;
    left: 5px;
    width: 245px;
    bottom: 0px;
}
#cardscatalog .cardshop .sub,
#deck .cardshop .sub {
    position: absolute;
    top: 35px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: #ffbc00;
    z-index: 10000;

    text-align: center;
    text-shadow: 2px 2px 0 #000;
    line-height: 26px;
    transform: translateY(-50%);
}


#cardscatalog .cardshop .img,
#deck .cardshop .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#cardscatalog .cardshop .img:after,
#deck .cardshop .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#cardscatalog .cardshop .img:before,
#deck .cardshop .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/leftbanner.jpg);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}

#cardscatalog .cardshop .name,
#deck .cardshop .name {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 40px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: left;
    text-shadow: 2px 2px 0 #000;
}


#cardscatalog .cardshop .txt,
#deck .cardshop .txt {
    bottom: 22px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 12px;
    transform: translateY(-50%);

}

#cardscatalog .cardshop .openstore,
#deck .cardshop .openstore {
    position:absolute;
    top:65px;
    left:50%;
    transform: translateX(-50%);
    width: 120px;

}



#store .cardready,
#deck .cardready {
    position:absolute;
    height:135px;
    left:5px;
    width: 245px;
    bottom:15px;
}

#store .cardready .sub,
#deck .cardready .sub {
    position: absolute;
    top: 10px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;
    z-index: 1000;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}


#store .cardready .img,
#deck .cardready .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#store .cardready .img:after,
#deck .cardready .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#store .cardready .img:before,
#deck .cardready .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/leftimportbanner.png);
    background-size: cover;
    background-position: top right;
}

#store .cardready:hover .img:before,
#deck .cardready:hover .img:before {
    animation: crt 5000ms linear infinite;
}




#store .cardready .name,
#deck .cardready .name {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 40px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: left;
    text-shadow: 2px 2px 0 #000;
}


#store .cardready .txt,
#deck .cardready .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 12px;

}






#store .cardready .opencardready,
#deck .cardready .opencardready {
    position:absolute;
    top:54px;
    left:50%;
    transform: translateX(-50%);
    min-width: 120px;

}




#store .timereward {
    position:absolute;
    height:135px;
    left:5px;
    width: 245px;
    bottom:170px;
    cursor: pointer;
}
#store .timereward .sub {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;

    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    z-index: 1000;
}

#store #currency {
    position:absolute;
    top:80px;
    left:5px;
    width: 245px;
    height:25px;
    text-align: center;
}

#store .timereward .opencardtimreward {
    position:absolute;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
    bottom:0px;
    left:calc(50% - 50px);
    width: 100px;
    height:25px;
    border: 1px solid #ffbc00;
    color: white;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    background-color: #ffbc00;
}
#store .timereward .opencardtimreward:hover {
    animation: blink 100ms linear 2 alternate;
}





#store .timereward .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#store .timereward .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#store .timereward .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
}

#store .timereward .storereward-chest  {
    position: absolute;
    bottom: 50px;
    left: 5px;
    right: 5px;
    font-size: 26px;

    color: #ffbc00;
    font-family: var(--fontFaimly_header);
    /* line-height: 40px; */
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}

#store .timereward .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 12px;

}

#storebuy{
    position: absolute;
    width: 790px;
    min-height: 860px;
    height: 85%;
    z-index: 1;
    clip-path: var(--clip_menu_standardbox);
}

#storebuy .title{
    color: white;
}


#storebuy a{
    text-decoration: none;
    color: rgba(255,255,255,0.7);
}

#storebuy .detail {
    top: 0px;
    left: 0px;
    color: rgba(255,255,255,1);
    right: 0px;
    position: absolute;
    text-align: center;
    font-size: 14px;
    bottom: 0px;
    overflow: hidden;
    text-shadow: var(--shadow_textfull);

}

#storebuy .detail:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 50%),linear-gradient(160deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,1) 100%);
    background-size: cover;
    background-position: bottom left;
}


#storebuy .title {
    z-index: 1000;
}

#storebuy .close {
    z-index: 1001;
}


#storebuy .detail .img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: brightness(0.3) contrast(0.98) grayscale(0.2);
}

#storebuy .detail .information {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 15px;
}


#storebuy .detail .information .image {
    position: absolute;
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* height: calc(100% - 260px - 180px); */
    top: 77px;
    left: 0px;
    right: 0px;
    /*filter: drop-shadow(0px 0px 20px var(--pack_shadow_color)) brightness(1.5);*/
    animation: pack-glowing-animation 8s infinite;

}

#storebuy .detail .information .name {

    z-index: 1000;

    position: absolute;
    top: 15px;
    left: 0px;
    height: 80px;
    width: unset;
    display: table;
    width: 100%;
    text-align: center;
}

#storebuy .detail .information .name .centered {
    font-size: 34px;
    font-family: var(--fontFaimly_header);
    color: #ffbc00;
    left: 0px;
    text-align: center;
    padding: 0px;
    display: table-cell;
    vertical-align: middle;

    line-height: 40px;
}

#storebuy .detail .information .txt {
    position: absolute;
    bottom: 305px;
    left: 0px;
    max-height: 125px;
    display: block;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

#storebuy .detail .information .txt .centered {
    font-size: 14px;
    color: white;
    left: 0px;
    text-align: left;
    padding: 0px 20%;
    display: block;
    vertical-align: middle;
    position: relative;
}

#storebuy .detail .information .adbf {
    display: block;
    position: absolute;
    top: 391px;
    right: 30px;
    font-size: 12px;
    left: 30px;
    text-align: center;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    ;
    z-index: 1001;
}

#storebuy .detail .information .adbf .infosight {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;

}

#storebuy .detail .information .adbf .infosight:before {
    content: '';
    position: absolute;
    right: -7px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;

}

#storebuy .detail .information  .adbf .infosight:hover .html {
    display: block;

}

#storebuy .detail .information  .adbf .infosight .html {
    display: none;
    position: absolute;
    right: calc(50% - 250px);
    left: unset;
    width: 600px;
    top: 25px;
    background-color: rgba(0,0,0,1);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    line-height: initial;
    text-align: right;
    animation: var(--animation-subtext-fadeinFast);

}

#storebuy .detail .information .adbf .infosight .html:before {
    content: "";
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: calc(237px);
    border-bottom: 10px solid rgba(0,0,0,1);
}

#storebuy .detail .information .adbf .infosight .html ul {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: circle;
}

#storebuy .detail .information .adbf .infosight .html ul li {
    font-size: 13px;
    color: #ffbc00;

    text-transform: none;
    padding: 5px 0px;
    list-style-type: none;
    text-align: left;
}




#storebuy .detail .information li {
    padding-left: 45px;
}

#storebuy .detail .information .confirmation {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    height: 255px;
}

#storebuy .detail .information .confirmation .orderold {
    position: relative;
    font-size: 23px;
    color: rgb(234,33,43);
    text-align: center;

    white-space: nowrap;

    top: -5px;
    left: 0px;
    right: 0px;

    display: inline-block;
    font-family: var(--fontFaimly_semi);
}

#storebuy .detail .information .confirmation .orderold:after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -5px;
    left: -5px;
    top: 0px;
    background-image: linear-gradient(transparent calc(50% - 0.8px),#ce000b calc(50% - 0.8px),#ce000b calc(50% + 0.8px),transparent calc(50% + 0.8px));
    transform: rotate(4deg);
}


#storebuy .detail .information .confirmation .orderprice {
    position: absolute;
    font-size: 35px;
    line-height: 25px;
    color: white;
    text-align: center;

    top: 24px;
    left: 0px;
    right: 0px;

}


#storebuy .detail .information .confirmation .orderold small,
#storebuy .detail .information .confirmation .orderprice small {
    font-size: 14px;
    vertical-align: text-top;
    text-decoration: none;
}


#storebuy .detail .information .confirmation .warning {
    position: relative;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    text-transform: uppercase;
    margin: 12px 20px;
}



#storebuy .detail .information .confirmation .actions {
    position: relative;
    text-align: center;
    position: absolute;
    bottom: 0px;
    top: 76px;
    left: 0px;
    right: 0px;
}

#storebuy .detail .information .confirmation .actions .agreebox{
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext{
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext {
    display: block;
}



#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext {
    position: absolute;
    padding: 10px 10px;
    margin: 0px;
    text-align: right;
    left: 50px;
    right: calc(30% + 75px);
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext p {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    text-align: right;
    text-transform: none;
    padding: 2px 0px;
    margin: 0px;
}
#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext p.short {
    color:#ffbc00;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext p.notice {
    color: rgba(200,200,200,1);
    font-size: 13px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext p.boring {
    color: rgba(150,150,150,1);
    font-size: 13px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreebuttom {
    position: absolute;
    top: 20px;
    height: 30px;
    line-height: 28px;
    left: calc(70% - 65px);
    border: 1px solid white;
    text-align: center;
    color: white;
    font-size: 12px;
    font-family: var(--fontFaimly_button);

    cursor: pointer;
    padding: 0px 15px;
    box-sizing: border-box;
}
#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreebuttom:hover {
    animation: blink 100ms linear 2 alternate;
}


#storebuy .detail .information .confirmation .actions .agreebox .agreecontent {
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
}

#storebuy .detail .information .confirmation .actions .agreebox .aactions {

}

#storebuy .detail .information .confirmation .actions .agreebox .aactions .iinfo {
    padding: 7px 13px;
    margin: 13px auto;
    background-color: var(--hud_invalid_background);
    color: white;
    /* font-family: var(--fontFaimly_button); */
    display: inline-block;
    font-size: 13px;
    line-height: 17px;
    text-shadow: none;
}

#storebuy .detail .information .confirmation .actions .agreebox .aactions .iinfo a {
    color: white;
    text-decoration: underline;

}

#storebuy .detail .information .confirmation .actions .agreebox .aactions .buybutton {
    display: block;
    font-size: 16px;
    padding: 0px 20px;
    margin: 3px auto 15px;

}






#storebuy .detail .information .confirmation .actions .agreebox .agreecontent .info {
    position: absolute;
    bottom: 0px;
    top: unset;
    left: 0px;
    right: 0px;
    padding: 0px;
    line-height: 14px;
    color: rgba(200,200,200,1);
    text-align: center;
    font-size: 12px;
    text-transform: none;
    line-height: 16px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreecontent .info p {
    text-align: center;
    padding: 1px 0px;
    margin: 0px;
    line-height: 18px;
    color: #b0b0b0;

}

#storebuy .detail .information .confirmation .actions .agreebox .agreecontent .info a {
    text-decoration: underline;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreecontent .footer-logos img {
    height: 30px;
}

#storebuy .detail .description {
    position: absolute;
    font-size: 14px;
    color: white;
    text-align: left;
    overflow-y: scroll;
    bottom: 15px;
    left: 20px;
    right: 20px;
    padding: 5px 3%;
    display: none;
}

#storebuy .detail .description ul li {
    list-style: none;
}


#stationnextlevel {
    position: absolute;
    width: 450px;
    top: calc(50% - 160px);
    height: 550px;
    left: calc(50% - 215px);
    background-color: rgba(0,0,0,0.85);

    overflow: hidden;
    color: white;
    clip-path: var(--clip_standardbox);

}

#stationnextlevel .content {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

#stationnextlevel .image {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%), url(zombiesonboard.jpg);
    background-size: cover,cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
}


#stationnextlevel .name {
    position: absolute;
    top: 27px;
    width: 300px;
    left: calc(50% - 150px);
    font-size: 22px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
}

#stationnextlevel .lvl {
    font-size: 54px;
    padding: 0px;
    font-family: var(--fontFaimly_header);
    position: absolute;
    top: 167px;
    width: 300px;
    left: calc(50% - 150px);
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    line-height: 54px;
}

#stationnextlevel .description {
    position: absolute;
    top: 63px;
    width: 350px;
    left: calc(50% - 175px);
    font-size: 14px;
    text-align: center;

}

#stationnextlevel .rescription {
    position: absolute;
    top: 396px;
    width: 350px;
    left: calc(50% - 175px);
    font-size: 14px;
    text-align: center;

}

#stationnextlevel .values {
    position: absolute;
    top: 233px;
    width: 239px;
    left: calc(50% - 130px);
    font-size: 13px;

    color: rgba(255,255,255,0.8);

    text-align: center;
    text-transform: uppercase;
    line-height: 16px;
}

#stationnextlevel .values table{
    width: 100%;
}

#stationnextlevel .values table td{
    text-align: left;
}

#stationnextlevel .values table td.nname{
    text-transform: uppercase;
    text-align: right;
    padding: 0px 10px 0px 0px;

    color: white;
    font-size: 11px;
}

#stationnextlevel .values table td.have{
    font-size: 16px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    padding-left: 10px;

    height: 27px;


}

#stationnextlevel .values table td.diff{
    font-size: 16px;
    color: var(--hud_tablevaluecolor);
    padding: 0px;
    text-transform: uppercase;
    padding-left: 10px;



    animation: highlited 1000ms linear infinite;
}

#stationnextlevel .values table td.diff small{
    font-size: 12px;
    white-space: nowrap;
    color: gray;
}
#stationnextlevel .values table td.mu{
    text-align: left;
    color: silver;
    font-size: 10px;
    text-transform: none;
    padding-right: 5px;

}

#stationnextlevel .button {
    position: absolute;
    top: 470px;

    left: 50%;
    transform: translateX(-50%);

}






#firststeps {
    position: absolute;
    width: 400px;
    top: 20%;
    height: 400px;
    left: 20%;

    cursor: pointer;
    z-index: 1000;
}

#firststeps:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0px;
    right: 0px;
    bottom: 0px;


    clip-path: var(--clip_menu_standardbox);
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%), url(./effects/bckg_glitch.gif);
    background-position: center;

}

#firststeps .content {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

}

#firststeps .image {
    position: absolute;
    top: 90px;
    left: 2px;
    right: 2px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter:

        drop-shadow(2px -2px 2px rgba(0, 0, 255, 0.3)) /*maly modry*/
        drop-shadow(-2px 2px 2px  rgba(255,0,0, 0.3)) /*maly cerveny*/
        drop-shadow(-40px -0px 5px rgba(0, 0, 255, 0.1)) /*velky modry levy*/

        drop-shadow(8px -8px 4px rgba(150, 0, 205, 0.2)) /*velky filaovy*/

        drop-shadow(0px 0px 40px rgba(155, 189, 235, 1)) /*velky filaovy*/
        ;
}


#firststeps .name {
    position: absolute;
    top: 11%;
    width: 360px;
    transform: translate(-50%, -50%);
    left: 50%;
    font-size: 23px;
    color: #b9dbff;
    text-align: center;
    text-transform: uppercase;
    line-height: 27px;
}

#firststeps .description {
    position: absolute;
    top: 230px;
    width: 360px;
    left: calc(50% - 180px);
    font-size: 14px;
    color: #b9dbff;
    text-align: center;
    text-transform: uppercase;
    line-height: 21px;
}

#firststeps .description > .ctrl-key.lmb,
#firststeps .description > .ctrl-key.mmb,
#firststeps .description > .ctrl-key.rmb{
    filter: brightness(1);
}

#firststeps .description > .ctrl-key.lmb:before,
#firststeps .description > .ctrl-key.mmb:before,
#firststeps .description > .ctrl-key.rmb:before{
    background-size: 8px;
}

#firststeps .roger {
    position: absolute;
    bottom: 40px;
    min-width: 120px;
    height: 30px;
    left: calc(50% - 60px);
    font-size: 12px;
    text-align: center;
    color: #b9dbff;
    padding: 0px 20px;
    font-size: 13px;
    font-family: var(--fontFaimly_button);
    box-sizing: border-box;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 35px;
    height: 35px;
    background-color: transparent;
    z-index: 1;
}

#firststeps .roger:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;


    z-index: -1;
}

#firststeps .roger:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}




#firststeps:hover .roger:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}



#firststeps .image.camera {
    animation: firststeps-camrot 3000ms linear infinite;
}

#firststeps .image.context {
    animation: firststeps-context 3000ms linear infinite;
}

#firststeps .image.zoom {
    animation: firststeps-zoom 3000ms linear infinite;
}

@keyframes firststeps-scrolldown{
    0% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
    }
    5% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    10% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    15% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    20% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    25% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    30% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    35% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    40% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    45% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    50% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-bottom);
    }
    60% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom)
    }
    70% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-bottom);
    }
    80% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom)
    }
    90% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-bottom);
    }
    100% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom)
    }
}

@keyframes firststeps-camrot{
    0% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }
    20% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }
    30% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb);
    }
    40% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb);
    }
    50% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb),
            var(--firstreps-amination-mouse-arrows-lr);
    }
    60% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb);
    }
    70% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb),
            var(--firstreps-amination-mouse-arrows-lr);
    }
    80% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb);
    }
    90% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb),
            var(--firstreps-amination-mouse-arrows-lr);
    }
    100% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-rmb);
    }
}

@keyframes firststeps-zoom{
    0% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
    }
    5% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    10% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    15% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    20% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    25% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    30% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody);
    }
    35% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    40% {
        background-image:
            var(--firstreps-amination-mouse-middle-mousebody),
            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    45% {
        background-image:

            var(--firstreps-amination-mouse-middle-mmb-bottom);
    }
    50% {
        background-image:

            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-top);
    }
    60% {
        background-image:

            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-top);
    }


    70% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-top),
            var(--firstreps-amination-mouse-middle-mmb-arrow-bottom);
    }

    100% {
        background-image:
            var(--firstreps-amination-mouse-middle-mmb-bottom),
            var(--firstreps-amination-mouse-middle-mmb-arrow-top),
            var(--firstreps-amination-mouse-middle-mmb-arrow-bottom);
    }
}


@keyframes firststeps-lmb{
    0% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }
    20% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }
    30% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb);
    }
    40% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb);
    }
    50% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb),

    }
    60% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb);

    }
    70% {
        background-image:
            var(-firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb),

    }
    80% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb);
    }
    90% {
        background-image:
            var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb),

    }
    100% {
        background-image: var(--firstreps-amination-mouse-mousebody),
            var(--firstreps-amination-mouse-lmb);
    }
}



@keyframes firststeps-context{
    0% {
        background-image:
            var(--firstreps-amination-station);
    }
    20% {
        background-image:
            var(--firstreps-amination-station);
    }
    30% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),

            var(--firstreps-amination-station);
    }
    35% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-mouse-mousebody-right-rmb),
            var(--firstreps-amination-mouse-mousebody-right-clicker),
            var(--firstreps-amination-station);
    }

    40% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-mouse-mousebody-right-rmb),
            var(--firstreps-amination-mouse-mousebody-right-clicker),
            var(--firstreps-amination-station);
    }
    50% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-mouse-mousebody-right-rmb),
            var(--firstreps-amination-mouse-mousebody-right-clicker),
            var(--firstreps-amination-station);
    }
    60% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-station);
    }
    70% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-station-context),
            var(--firstreps-amination-station);
    }
    100% {
        background-image:
            var(--firstreps-amination-mouse-mousebody-right),
            var(--firstreps-amination-station-context),
            var(--firstreps-amination-station);
    }
}

@keyframes firststeps-rotatespacecraft{
    0% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }
    50% {
        background-image:
            var(--firstreps-amination-mouse-mmb),
            var(--firstreps-amination-mouse-mousebody);
    }
    100% {
        background-image:
            var(--firstreps-amination-mouse-mousebody);
    }

}


#rank{
    z-index: 999000;
    position: absolute;
    right: 360px;
    min-width: 900px;
    min-height: 600px;

    top: 37px;
    left: 220px;
    bottom: 20px;
    z-index: 999999999;
    max-width: var(--hud-window-max-width);
    animation: deblur 1000ms ease-out forwards;
}



#rank:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(25,25,25);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#rank .info {
    padding: 0px;
}

#rank  #rank_header.header {
    position: absolute;
    top: 45px;
    left: 250px;
    padding: 5px 10px;
    color: black;
    background-color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;

    z-index: 10;
    cursor: pointer;
}
#rank  #rank_header.header span {
    padding: 3px 5px;
}

#rank  #rank_header.header span:hover {
    background: black;
    color: white;
    animation: blink 100ms linear 2 alternate;
}

#rank .content {
    position: absolute;
    top: 90px;
    right: 10px;
    width: calc( 100% - 260px );
    bottom: 10px;
    overflow-y: scroll;

    border-left: 1px solid white;
    box-sizing: border-box;
}

.pager{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

.pager .page {
    position: relative;
    color: silver;
    cursor: pointer;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    width: 44px;
}

.pager .page:not(.dots):after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

.pager .page.active {
    position: relative;
    color: white;
    cursor: pointer;

    font-size: 14px;

}

.pager .page.active:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;
    z-index: -1;
}

.pager .page.dots {
    cursor: default;

}

.pager .page.dots:hover {
    animation: none;
}

.pager .page.prev.active,
.pager .page.next.active {
    background-color: transparent;
    cursor: pointer;
    color: silver;
}

.pager .page.prev,
.pager .page.next {
    line-height: 25px;
    font-size: 25px;
}


.pager .page:hover:before{
    animation: blink 100ms linear 2 alternate;
}

.pager .page:not(.dots):hover:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;
    z-index: -1;
}

.pager .page.prev:not(.active),
.pager .page.next:not(.active) {
    background-color: transparent;
    cursor: default;
    color: gray;
}

.pager .page.prev:not(.active):hover,
.pager .page.next:not(.active):hover{
    animation: none;
}

.pager .page.prev:not(.active):hover:before,
.pager .page.next:not(.active):hover:before{
    background-color: transparent;
    box-shadow: none;
}

.pager .page.prev:not(.active):after,
.pager .page.next:not(.active):after{
    background-image: linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%), linear-gradient(0deg, var(--border-button-color-unactive) 0%, var(--border-button-color-unactive) 100%);

}

#rank .content .list {
    display: block;
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px 0px 20px;
}

#rank .content .list .ally {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-sizing: border-box;
    clear: both;
    color: white;
    background-color: rgba(0,0,0,.5);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}

#rank .content .list .ally:hover {

    background-color: rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,0);

}

#rank .content .list .ally .position {
    position: absolute;
    left: 0px;
    width: 45px;
    bottom: 0px;
    text-align: right;
}

#rank .content .list .ally .name {
    position: absolute;
    left: 55px;
    right: 145px;
    bottom: 0px;
    text-align: left;
}

#rank .content .list .ally .score {
    position: absolute;
    right: 10px;
    width: 80px;
    bottom: 0px;
    text-align: right;
}

#rank .content .list .ally .users {
    position: absolute;
    right: 100px;
    width: 30px;
    bottom: 0px;
    text-align: right;
}

#rank .content .list .corpos  {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#rank .content .list .corpos td  {
    padding: 5px;
    position: relative;
}

#rank .content .list .corpos td  {
    padding: 5px;
    position: relative;
}

#rank .content .list .corpos td.name:before,
#rank .content .list .corpos .sscore td:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 40px;
    right: 0px;
    bottom: 0px;

    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
}

#rank .content .list .corpos td:not(.nokills).name:before,
#rank .content .list .corpos .sscore td:not(.nokills):before{

    background-image: linear-gradient(90deg, rgba(50,50,50,0) 0%, rgb(50,50,50,1) 100%);

}

#rank .content .list .corpos td.score:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 40px;
    bottom: 0px;

    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
}

#rank .content .list .corpos td:not(.nokills).score:before{

    background-image: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(50,50,50,0) 100%);

}

#rank .content .list .corpos .sscore td:not(.nokills):before,
#rank .content .list .corp .score .swealth table td:not(.nokills):before{
    left: 0px;
    right: 30px;
}

#rank .content .list .corpos .sscore td:not(.nokills):before,
#rank .content .list .corp .score .swealth table td:not(.nokills):before{
    background-image: linear-gradient(90deg, rgba(50,50,50,0) 0%, rgba(50,50,50,1) 30%, rgba(50,50,50,1) 70%, rgba(50,50,50,0) 100%);
}

#rank .content .list .corpos .corp  {
    cursor: pointer;
}

#rank .content .list .corpos .corp:hover td  {
    animation: blink 100ms linear 2 alternate;
}

#rank .content .list .corp.hilited  {
    background-color: rgba(255,255,255,0.1);
    min-height: 37px;
}


#rank .content .list .corp .position {
    width: 30px;
    font-size: 12px;
    text-align: right;
    color: white;
}


#rank .content .list .corp .name {
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    text-align: left;
    color: rgb(150,150,150);
}

#rank .content .list .corp .name span {
    color: rgb(80,80,80);
    font-size: 12px;
    text-transform: uppercase;
    display: block;
}

#rank .content .list .corp.premium .name {
    color: #ffbc00;
}

#rank .content .list .corp.premium .name span {
    color: #9E7300;
}

#rank .content .list .corp .old {
    text-align: left;
    color: rgba(255,255,255,.3);
    width: 80px;
}

#rank .content .list .corp .score {
    position: relative;
    color: white;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;

}

#rank .content .list .corp:hover .score .sscore,
#rank .content .list .corp:hover .score .swealth{
    display: block;
}


#rank .content .list .corp .score .sscore,
#rank .content .list .corp .score .swealth{
    display: none;
    position: absolute;
    top: calc(50% + 10px);
    right: 25px;
    min-width: 185px;
    background-color: var(--subtext_color-background);
    color: var(--subtext_color);
    animation: var(--animation-subtext-fadein);
    z-index: 1;
    padding: 10px;
}

#rank .content .list .corp .score .sscore:before{
    content: "";
    display: block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    top: -8px;
    right: 0px;
    border-bottom: 8px solid var(--subtext_color-background);
}

#rank .content .list .corp .score .sscore table,
#rank .content .list .corp .score .swealth table{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

#rank .content .list .corp .score .sscore table th,
#rank .content .list .corp .score .swealth table th{
    width: 30px;
    padding: 0px 0px 0px 5px;
    text-align: left;
    text-transform: uppercase;

}

#rank .content .list .corp .score .sscore table th img {
    max-width: 20px;
    max-height: 20px;
    filter: brightness(1.5) grayscale(1);
}

#rank .content .list .corp .score .sscore table td,
#rank .content .list .corp .score .swealth table td{
    text-align: right;
    padding: 3px 5px;
    color: var(--subtext_color);
    font-size: 12px;
    position: relative;
}









#rank .content .list .corp .conviction {



    min-height: 22px;
    width: 22px;
    overflow: hidden;
    background-size: contain;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}


#rank .content .list .corp .conviction.conviction-1 {
    background-image: url(logo-humanity_128.png);
}

#rank .content .list .corp .conviction.conviction-2 {
    background-image: url(logo-inquisition_128.png);
}



#rank .menu .swich-users {
    position:absolute;
    height:90px;
    left:0px;
    right: 0px;
    top: 0px;
    cursor: pointer;
}
#rank .menu .swich-users:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;

    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#rank .menu .swich-users .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#rank .menu .swich-users .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#rank .menu .swich-users .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}
#rank .menu .swich-users .label {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#rank .menu .swich-users .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
}
#rank .menu .swich-users:hover {
    animation: blink 100ms linear 2 alternate;
}


#rank .menu .swich-zones {
    position:absolute;
    height:90px;
    left:0px;
    right: 0px;
    top: 130px;
    cursor: pointer;
}
#rank .menu .swich-zones:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;

    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#rank .menu .swich-zones .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#rank .menu .swich-zones .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#rank .menu .swich-zones .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}
#rank .menu .swich-zones .label {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#rank .menu .swich-zones .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
}
#rank .menu .swich-zones:hover {
    animation: blink 100ms linear 2 alternate;
}




#rank .content .list .corp .fraction {
    position: absolute;
    bottom: 6px;
    right: 80px;
    box-sizing: border-box;
    width: 50px;
    overflow: hidden;
    background-size: contain;
    font-size: 10px;
}

#rank .sort {
    position: absolute;
    top: 45px;
    right: 0px;
    width: calc( 100% - 250px );
    bottom: 0px;
    border-left: 1px solid white;
    box-sizing: border-box;
    height: 45px;
    padding: 0px 0px 0px 10px;
}


#rank .sort .switch {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#rank .sort .switch:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#rank .sort .switch.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#rank .sort .switch.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}


#rank .menu {
    position: absolute;
    top: 95px;
    left: 15px;
    width: 220px;
    bottom: 320px;
}

#rank .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);

}

#rank .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}

#rank .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}

#emailconfirmation {
    display: block;
    position: absolute;
    top: 10%;
    left: calc(50% - 240px);
    width: 480px;
    z-index: 100000000;
    height: 280px;
    background-color: rgb(125,125,125);

    clip-path: var(--clip_standardbox);
}

#emailconfirmation:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_standardbox);
    z-index: -1;
    background-image: linear-gradient(180deg, rgb(0 0 0) -15%, rgb(0 0 0 / 51%) 57%),url(recruit_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,bottom,top;
}

#emailconfirmation .headtext {
    position: absolute;
    top: 24px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    color: #ffbc00;
    font-family: var(--fontFaimly_header);
    font-size: 26px;
    text-align: center;
}

#emailconfirmation .iinfo {
    display: block;
    position: absolute;
    top: 75px;
    left: 40px;
    right: 40px;
    font-size: 14px;
    color: white;
    /* text-shadow: var(--shadow_textfull); */
    text-align: center;


}

#emailconfirmation .iinput {
    display: block;
    position: absolute;
    top: 146px;
    left: calc(50% - 22px);
    width: 100px;
    font-size: 14px;

}

#emailconfirmation .iinput .confirm-code {
    display: block;
    position: absolute;
    left: -110px;
    width: 160px;
}

#emailconfirmation .iinput .confirm-submit {
    display: block;
    position: absolute;
    right: -63px;
    width: 110px;
}




#emailconfirmation .notsend {
    display: block;
    position: absolute;
    bottom: 45px;
    left: 20px;
    right: 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    text-align: center;



}

#emailconfirmation .whitelink {

    /* padding: 1px 4px; */
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    /* font-family: var(--fontFaimly_button); */
    z-index: 1;
    display: inline-block;
    text-decoration: underline;
}

#emailconfirmation .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* background-color: rgba(255,255,255,1);*/

    clip-path: var(--clip_whitelink);
    z-index: -1;
}
#emailconfirmation .whitelink:hover {
    animation: blink 100ms linear 2;
}




#zombiesonboard,
#zombiesoutbreak,
#morewindows,
#unsupporteddevice
{
    position: absolute;
    width: 530px;
    top: calc(50% - 170px);
    height: 460px;
    left: calc(50% - 265px);
    background-color: rgba(0,0,0,0.85);

    cursor: pointer;
    overflow: hidden;
    z-index: 999999999;

    clip-path: var(--clip_unsupported);
}

#unsupporteddevice
{
    cursor: default;
}



#zombiesonboard:before,
#zombiesoutbreak:before,
#morewindows:before
#unsupporteddevice:before
{
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    z-index: 1;
}
#zombiesonboard:after,
#zombiesoutbreak:after,
#morewindows:after
#unsupporteddevice:after
{
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


#zombiesonboard .content,
#zombiesoutbreak .content,
#morewindows .content,
#unsupporteddevice .content {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}



#zombiesonboard .image,
#zombiesoutbreak .image,
#morewindows .image,
#unsupporteddevice .image
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover,cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
}


#zombiesonboard .image {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 100%),url('zombiesonboard.jpg');
}


#zombiesoutbreak .image {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 100%),url('zombiesonboard.jpg');
}

#morewindows .image {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 100%),url('zombiesonboard.jpg');
}

#unsupporteddevice .image {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 100%),url('zombiesonboard.jpg');
}





#zombiesonboard .name,
#zombiesoutbreak .name,
#morewindows .name,
#unsupporteddevice .name{
    position: absolute;
    top: 40px;
    width: 300px;
    left: calc(50% - 150px);
    font-size: 22px;
    color: rgba(255,255,255,1);
    text-align: center;
    z-index: 1;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

#zombiesonboard .description,
#zombiesoutbreak .description,
#morewindows .description,
#unsupporteddevice .description {
    position: absolute;
    width: 440px;
    font-size: 15px;
    color: rgba(255,255,255,1);
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    text-shadow: var(--shadow_textfull);
}

#zombiesonboard .nevershow,
#zombiesoutbreak .nevershow,
#morewindows .nevershow,
#unsupporteddevice .nevershow {
    position: absolute;
    font-size: 11px;
    color: rgba(255,255,255,1);
    text-align: center;
    line-height: 18px;
    left: 50%;
    bottom: 39px;
    transform: translate(-50%, 0);
    cursor: pointer;
}

#zombiesonboard .nevershow:hover,
#zombiesoutbreak .nevershow:hover,
#morewindows .nevershow:hover,
#unsupporteddevice .nevershow:hover {
    animation: blink 100ms linear 2 alternate;
    text-decoration: underline;
}

#zombiesonboard .description .reason,
#zombiesoutbreak .description .reason,
#morewindows .description .reason,
#unsupporteddevice .description .reason {
    display: block;
    padding: 22px 50px 20px;
    text-transform: none;
    font-size: 22px;
    color: #ffbc00;
    line-height: 25px;
}

#zombiesonboard .description .reason .current,
#zombiesoutbreak .description .reason .current,
#morewindows .description .reason .current,
#unsupporteddevice .description .reason .current {
    display: block;
    padding: 15px 0px 0px;
    text-transform: none;
    font-size: 16px;
    color: #ef4d27;
    line-height: 20px;
}

#zombiesonboard .description .reason .unsupported-icon,
#zombiesoutbreak .description .reason .unsupported-icon,
#morewindows .description .reason .unsupported-icon,
#unsupporteddevice .description .reason .unsupported-icon {
    display: block;
    width: 54px;
    margin: 16px auto 0px;

}





#zombiesonboard .description span,
#zombiesoutbreak .description span,
#morewindows .description span,
#unsupporteddevice .description span {
    font-size: 16px;
    display: block;
    padding: 0px 80px 25px;

}

#zombiesoutbreak .description span,
#zombiesonboard .description span {
    font-size: 26px;
    color: #ef4d27;
}

#unsupporteddevice .description span.browsers-icons {
    display: block;
    background-image: url(browsers_icons.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 25px;
    margin: 10px auto;
    padding: 0px;
}


#zombiesonboard .description ul,
#zombiesoutbreak .description ul,
#morewindows .description ul,
#unsupporteddevice .description ul {
    margin: 5px auto;
    padding: 0px 20px 10px 50px;
    width: 250px;

}

#zombiesonboard .description ul li,
#zombiesoutbreak .description ul li,
#morewindows .description ul,
#unsupporteddevice .description ul li {
    text-align: left;
    padding: 1px 0px;
}


#zombiesonboard .roger,
#zombiesoutbreak .roger,
#morewindows .roger,
#unsupporteddevice .roger {
    position: absolute;
    bottom: 70px;
    /* width: 120px; */
    height: 30px;
    left: 50%;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    text-transform: uppercase;
    border: 1px solid white;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;
    padding: 0px 14px;
    transform: translateX(-50%);
    cursor: pointer;
}

#zombiesonboard:hover .roger,
#zombiesoutbreak:hover .roger,
#morewindows:hover .roger {

    color: rgba(0,0,0,1);

    border: 1px solid white;
    background: white;
    animation: blink 100ms linear 2 alternate;
}

#unsupporteddevice .roger:hover {

    color: rgba(0,0,0,1);

    border: 1px solid white;
    background: white;
    animation: blink 100ms linear 2 alternate;
}







#camerafar_box
{
    position: absolute;

    top: 15%;
    left: 50%;
    z-index: 9999999999;
    transform: translateX(-50%);
}


#camerafar_box .name{
    position: absolute;
    top: 0px;

    left: 50%;
    font-size: 15px;

    color: rgba(255,255,255,1);

    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    text-shadow: var(--shadow_textfull);
    transform: translateX(-50%);
}

#camerafar_box .description {
    position: absolute;
    top: 0px;

    left: 50%;
    font-size: 14px;

    color: rgba(255,255,255,1);

    text-align: center;
    text-transform: uppercase;
    line-height: 17px;
    text-shadow: var(--shadow_textfull);
    transform: translateX(-50%);
    white-space: nowrap;
}

#camerafar_box .sdescription {
    position: absolute;
    top: 80px;
    width: 0px;
    left: 50%;
    font-size: 12px;

    color: rgba(255,255,255,1);

    text-align: center;
    text-transform: uppercase;
    line-height: 17px;
    text-shadow: var(--shadow_textfull);
    transform: translateX(-50%);
}


#camerafar_box .whitelink {
    color: black;
    padding: 0px 6px;
    margin: 0px;

    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
}


#camerafar_box .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,1);

    clip-path: var(--clip_whitelink);
    z-index: -1;
}






#camerafar_box .whitelink:hover {
    animation: blink 100ms linear 2;
}



#camerafar_box .roger {
    position: absolute;
    top: 125px;
    width: 120px;
    height: 30px;
    left: calc(50% - 60px);
    font-size: 12px;

    color: rgba(255,255,255,0.8);

    text-align: center;
    text-transform: uppercase;
    border: 1px solid white;
    line-height: 30px;
    display: none;

}



#dataflow{

    position: absolute;
    min-width: 950px;
    width: calc(100% - 400px);
    min-height: 600px;
    height: 90%;
    background-color: var(--hud_backgroundcolor);


}
#dataflow:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#dataflow:after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


#dataflow .info {
    padding: 0px;
}

#dataflow  #rank_header.header {
    position: absolute;
    top: 45px;
    left: 250px;
    padding: 5px 10px;
    color: black;
    background-color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;

    z-index: 10;
    cursor: pointer;
}
#dataflow  #rank_header.header span {
    padding: 3px 5px;
}

#dataflow  #rank_header.header span:hover {
    background: black;
    color: white;
    animation: blink 100ms linear 2 alternate;
}

#dataflow .content {
    position: absolute;
    top: 75px;
    right: 10px;
    left: 10px;
    bottom: 15px;
    overflow-y: scroll;

    box-sizing: border-box;
}

#dataflow .content .list {
    display: block;
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px 0px 20px;
}

#dataflow .content .list .info {
    margin: 70px 0px 0px;
}

#dataflow .content .list .bdfl  {
    position: relative;
    height: 345px;
    width: 220px;
    border: 1px solid rgba(255,255,255,.3);
    margin: 5px 5px 5px 5px;
    box-sizing: border-box;
    clear: both;
    color: white;
    background-color: rgba(0,0,0,.8);
    display: inline-block;
    overflow: hidden;
}

#dataflow .content .list .bdfl.downloaded  {
    position: relative;
    border: 1px solid rgba(255,255,255,1);
    color: black;
    background-color: rgba(255,255,255,1);
    background-image: url(tape.png);
    background-size: 110px;
    background-repeat: no-repeat;
    background-position: center 35px;
}





#dataflow .content .list .bdfl .quality  {
    position: absolute;
    top: 73px;
    left: calc(50% - 64px);
    width: 128px;
    box-sizing: border-box;
    height: 64px;
    overflow: hidden;
    background-position: center;
}

#dataflow .content .list .bdfl .quality canvas {
    position: absolute;
    left: calc(50% - 64px);
    top: calc(50% - 64px);
}


#dataflow .content .list .bdfl .signal  {
    position: absolute;
    top: 73px;
    left: calc(50% - 64px);
    width: 128px;
    box-sizing: border-box;
    height: 64px;
    overflow: hidden;
    background-position: center;
}

#dataflow .content .list .bdfl .signal canvas {
    position: absolute;
    left: calc(50% - 55px);
    top: calc(50% - 64px);
}


#dataflow .content .list .bdfl .base  {
    position: absolute;
    top: 10px;
    left: calc(50% - 80px);
    width: 160px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
    cursor: pointer;
}

#dataflow .content .list .bdfl .base:hover  {
    animation: blink 100ms linear 2;
}

#dataflow .content .list .bdfl .dtitle  {
    position: absolute;
    top: 196px;
    left: calc(50% - 80px);
    width: 160px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 10px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
    color: rgba(200,200,200,0.5);
    animation: highlited 1000ms linear infinite;
}

#dataflow .content .list .bdfl.downloaded .dtitle  {
    display: none;
    position: absolute;
    top: 130px;
    left: calc(50% - 80px);
    width: 160px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 10px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
    color: rgba(100,100,100,1);
}

#dataflow .content .list .bdfl .name  {
    position: absolute;
    top: 137px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 24px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
}

#dataflow .content .list .bdfl .description  {
    position: absolute;
    top: 175px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;

    text-decoration: none;
    text-shadow: none;
    text-align: center;
}

#dataflow .content .list .bdfl .blueprints  {
    position: absolute;
    top: 170px;
    left: 8px;
    right: 1px;
    bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;
    text-align: left;
    overflow-y: scroll;

    padding-right: 3px;
}

#dataflow .content .list .bdfl .blueprints .info  {
    color: black;
    text-shadow: none;
}

#dataflow .content .list .bdfl .blueprint  {
    position: relative;
    height: 30px;
    line-height: 30px;
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;

    text-transform: uppercase;
    text-align: left;
    margin: 3px 0px;
    cursor: pointer;
    background-color: white;
}

#dataflow .content .list .bdfl .blueprint:hover  {
    filter: invert(1);
}

#dataflow .content .list .bdfl .blueprint .name {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 6px;
    width: 110px;


    text-align: left;
    overflow: hidden
}

#dataflow .content .list .bdfl .blueprint .name span {
    display: table-cell;
    vertical-align: middle;
    line-height: 12px;
    font-size: 12px;
    height: 30px;
}

#dataflow .content .list .bdfl .blueprint .cycles {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 31px;
    width: 60px;

    line-height: 30px;
    text-align: right;
    overflow: hidden;
    font-size: 10px;
}

#dataflow .content .list .bdfl .blueprint .actions {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 140px;
    right: 0px;

    line-height: 30px;
    text-align: right;
    overflow: hidden
}

#dataflow .content .list .bdfl.downloaded .blueprint .actions button {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 30px;
    right: 0px;
    overflow: hidden;
    background-color: white;
    background-image: url(ico/save_blueprint.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

#dataflow .content .list .bdfl.downloaded .forget {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    cursor: pointer;
    top: 4px;
    right: 4px;
    background: black url(ico/close-window-16.png) center no-repeat;
    background-size: 14px;
    /* border: 1px solid white; */
    filter: invert(1);
}

#dataflow .content .list .bdfl.downloaded .forget:hover {
    filter: invert(0);
    animation: blink 100ms linear 2 alternate;
}


#dataflow .content .list .bdfl .size_mb  {
    position: absolute;
    top: 250px;
    left: 5px;
    right: 5px;
    font-size: 10px;
}

#dataflow .content .list .bdfl .time_left  {
    position: absolute;
    top: 223px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    color: white;
    font-size: 12px;


    text-decoration: none;
    text-shadow: none;
    text-align: center;
}

#dataflow .content .list .bdfl .time_left_bar  {
    position: absolute;
    top: 212px;
    width: 100px;
    left: calc(50% - 50px);
    height: 5px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgba(50,50,50,.8);
}

#dataflow .content .list .bdfl .time_left_bar .bar  {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
}

#dataflow .content .list .bdfl .actions  {
    position: absolute;
    bottom: 20px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    color: white;
    text-align: center;
}



#dataflow .content .list .bdfl.downloaded .actions button  {
    background-color: black;
    color: white;
}

#dataflow .content .list .dfl  {
    position: relative;
    height: 64px;
    border-bottom: 1px solid rgba(255,255,255,.3);
    margin: 0px 5px 0px 5px;
    box-sizing: border-box;
    clear: both;
    color: white;

    text-shadow: var(--shadow_textfull);
}




#dataflow .content .list .dfl .img {
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
    height: 50px;
    width: 50px;
    overflow: hidden;
    background-size: contain;
    background-color: black;
    filter: grayscale(10%) brightness(110%) contrast(110%);
    background-position: center;
}

#dataflow .content .list .dfl .name {
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
    line-height: 28px;
    font-size: 24px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;

    text-decoration: none;
    text-align: left;
    height: 28px;
    overflow: hidden;
}



#dataflow .content .list .dfl .description {
    position: absolute;
    top: 33px;
    left: 5px;
    bottom: 0px;
    font-size: 12px;
    overflow: hidden;
    text-align: left;
    text-transform: uppercase;
}


#dataflow .content .list .dfl .signal {
    position: absolute;
    top: 0px;
    right: 250px;
    height: 64px;
    overflow: hidden;
    width: 128px;
}

#dataflow .content .list .dfl .signal_remarks {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: calc(100% - 570px);
    text-align: right;
    left: 200px;




    display: table;
}

#dataflow .content .list .dfl .signal_remarks .srem {
    display: table-cell;
    vertical-align: middle;
    height: 63px;
}

#dataflow .content .list .dfl .signal_remarks .srem span {
    display: inline-block;
    line-height: 10px;
    padding: 2px 5px;
    margin: 1px;
    font-size: 10px;
    color: black;
    text-transform: uppercase;
    text-shadow: none;

    background-color: var(--hud_invalid_background);
}

#dataflow .content .list .dfl .signal canvas {
    position: absolute;
    left: calc(50% - 64px);
    top: calc(50% - 64px);
}


#dataflow .content .list .dfl .time_decode {
    position: absolute;
    top: 15px;
    right: 115px;
    font-size: 13px;
    text-align: right;
    line-height: 35px;
}

#dataflow .content .list .dfl .size_mb {
    position: absolute;
    top: 15px;
    right: 205px;
    font-size: 13px;
    text-align: right;
    line-height: 35px;
}

#dataflow .content .list .dfl .actions {
    position: absolute;
    top: 18px;
    right: 5px;
}







#dataflow .menu .swich-dataflows {
    position:absolute;
    height:90px;
    left:0px;
    right: 0px;
    top: 0px;
    cursor: pointer;
}
#dataflow .menu .swich-dataflows:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;

    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#dataflow .menu .swich-dataflows .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
#dataflow .menu .swich-dataflows .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}
#dataflow .menu .swich-dataflows .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(store/store_deal.png);
    background-size: cover;
    background-position: top right;
    animation: crt 5000ms linear infinite;
}
#dataflow .menu .swich-dataflows .label {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: white;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}
#dataflow .menu .swich-dataflows .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
}
#dataflow .menu .swich-dataflows:hover {
    animation: blink 100ms linear 2 alternate;
}









#dataflow .sort {
    position: absolute;
    top: 45px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    height: 30px;
    padding: 0px 0px 0px 10px;
}


#dataflow .sort .switch {
    display: block;
    position: absolute;
    font-size: 23px;

    /* position: relative; */
    /* font-style: italic; */
    /* padding: 0px 20px; */
    bottom: 110px;
    left: 25px;
    right: 90px;
    /* text-transform: uppercase; */
    text-align: left;
    z-index: 1;
    font-family: var(--fontFaimly_header);
}

#dataflow .sort .switch:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#dataflow .sort .switch.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#dataflow .sort .switch.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}


#dataflow .menu {
    position: absolute;
    top: 95px;
    left: 15px;
    width: 220px;
    bottom: 320px;
}

#dataflow .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);



}

#dataflow .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}

#dataflow .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}




#getpack{
    position: absolute;
    left: 50%;
    max-width: 1580px;
    min-width: 350px;
    height: 715px;

    z-index: 10000;
    top: calc(50% - 357px);
    width: calc(100% - 100px);
    transform: translateX(-50%);
}

#getpack:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_right_context);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}



#getpack .content {
    position: absolute;
    top: 110px;
    right: 10px;
    left: 10px;
    bottom: 00px;
    box-sizing: border-box;
}

#getpack .subtitle {
    display: block;
    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
    height: 50px;
    background: linear-gradient(to right,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.4) 60%,rgba(0,0,0,0.0) 100%);
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    color: white;
    /* text-transform: initial; */
    font-family: var(--fontFaimly_header);
    color: #ffbc00;
    overflow: hidden;
    text-shadow: var(--shadow_textfull);
}



#getpack .content .deals  {
    display: block;
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px;
}
#getpack .content .deal {
    display: inline-block;
    position: relative;
    width: 260px;
    margin: 0px 0px 10px;
    height: 530px;
    box-sizing: border-box;
    overflow: hidden;
}

#getpack .content .deal:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 5px;
    right: 5px;
    bottom: 0px;
    background-color: rgb(6 12 20);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}



#getpack .content .deal .img {
    position: absolute;
    top: 18px;
    left: 0px;
    right: 0px;
    height: 230px;

}
/*
#getpack .content .deal .img:before { content: ''; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: linear-gradient(165deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 40%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%); background-size: cover; background-position: top left; transition: .2s;   }
*/
#getpack .content .deal .img .insider {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover;
    background-position: center top;
    filter: grayscale(0.8) blur(4px);
    transition: filter 0.5s;

}


#getpack .content .deal:hover .img .insider {
}




#getpack .content .deal .img .uotsider {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 5px #000) contrast(1.2) brightness(1.3);
}



#getpack .content .deal:hover .img:after {


}

#getpack .content .deal .name {
    position: absolute;
    bottom: 244px;
    left: 0px;
    right: 0px;
    font-size: 26px;
    font-family: var(--fontFaimly_header);
    color: white;

    background: none;
    animation: none;
    line-height: 40px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}
#getpack .content .deal .html {
    text-align: left;
    position: absolute;
    font-size: 12px;

    color: white;

    top: 279px;
    left: 20px;
    text-shadow: var(--shadow_textfull);
    display: none;
}

#getpack .content .deal .html p {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    margin: 0px 0px 10px;
}
#getpack .content .deal .html ul {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
}
#getpack .content .deal .html ul li {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 15px;
}
#getpack .content .deal .html ul li .tit {
    font-size: 16px;
    color: #ffbc00;
    width: 20px;
    text-align: right;
    display: inline-block;
    padding-right: 5px;
}
#getpack .content .deal .html ul li .desc {
    display: inline;
    padding-left: 5px;
    font-size: 10px;
    color: white;
    text-transform: uppercase;
}

#getpack .content .deal .description {
    text-align: center;
    position: absolute;
    font-size: 12px;

    color: white;

    top: 81px;
    left: 40px;
    right: 40px;
    text-shadow: var(--shadow_textfull);
    display: none;
    line-height: 16px;
}

#getpack .content .deal .description p {
    padding: 0px;
    margin: 0px;
}

#getpack .content .deal ul.adcards {

    position: absolute;
    bottom: 195px;
    left: 5px;
    right: 5px;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#getpack .content .deal ul.adcards .adbf {

    display: block;
    position: absolute;
    top: -33px;
    left: 5px;
    right: 0px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
}

#getpack .content .deal .adcards li.adcard {
    display: inline-block;
    position: relative;
    width: 50px;
    margin: 0px 0px;
}

#getpack .content .deal .adcards li.adcard .adcbf {

    display: none;

}

#getpack .content .deal .adcards li.adcard:nth-child(1n+3) {
    padding-left: 40px;
}

#getpack .content .deal .adcards li.adcard:nth-child(1n+3) .adcbf {

    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    bottom: 0px;
    line-height: 72px;
    text-align: center;
    font-size: 10px;
    color: gray;
    text-shadow: var(--shadow_textfull);
}

#getpack .content .deal .orderpack.increase .infosight,
#getpack .content .deal .adcards .adbf .infosight {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 12px;
    z-index: 1;

}

#getpack .content .deal .orderpack.increase .infosight:before,
#getpack .content .deal .adcards .adbf .infosight:before {
    content: '';
    position: absolute;
    right: 0px;
    width: 14px;
    top: -1px;
    height: 14px;
    line-height: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    text-align: center;
    border: 1px solid gray;
    border-radius: 20px;
    background: #00000000 url(ico/info-window-16.png) center no-repeat;
    background-size: 14px;

}

#getpack .content .deal .orderpack.increase .infosight:hover .html,
#getpack .content .deal .adcards .adbf .infosight:hover .html {
    display: block;
    animation: blink 100ms linear 2 alternate;

}
#getpack .content .deal .orderpack.increase .infosight .html,
#getpack .content .deal .adcards .adbf .infosight .html {
    position: absolute;
    right: -50px;
    left: unset;
    width: 230px;
    bottom: -10px;
    background-color: rgba(0, 0, 0, 1);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    line-height: 17px;
    text-align: left;
    top: unset;
    text-shadow: none;
    font-size: 13px;
    color: #ffbc00;
    text-transform: none;
    font-family: var(--fontFaimly_default);
    white-space: normal;
}

#getpack .content .deal .orderpack.increase .infosight .html {
    bottom: 30px;
}


#getpack .content .deal .orderpack.increase .infosight .html table {
    width: 100%;
    border-spacing:0px;
    border-collapse:separate;
    margin: 0px 0px 15px;
}

#getpack .content .deal .orderpack.increase .infosight .html table th {
    text-align: left;
    white-space: normal;
    vertical-align: top;
    color: #919191;
    border-bottom: 1px solid #414141;
    padding: 5px 6px;
    text-align: left;
}

#getpack .content .deal .orderpack.increase .infosight .html table th > small,
#getpack .content .deal .orderpack.increase .infosight .html table td > small{
    display: block
}

#getpack .content .deal .orderpack.increase .infosight .html table td {
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    color: #919191;
    border-bottom: 1px solid #414141;
    padding: 5px 6px;
    text-align: right;
}

#getpack .content .deal .orderpack.increase .infosight .html ul,
#getpack .content .deal .adcards .adbf .infosight .html ul {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: circle;
}

#getpack .content .deal .orderpack.increase .infosight .html ul li,
#getpack .content .deal .adcards .adbf .infosight .html ul li {
    font-size: 13px;
    color: #ffbc00;

    text-transform: none;
    padding: 5px 0px;
    list-style-type: none;

}




#getpack .content .deal .adcards .adcard canvas {
    position: absolute;
    width: 50px;
    top: 0px;
    right: 0px;
    filter: drop-shadow(0px 0px 2px #000);
}

#getpack .content .deal .adcards .adcard:hover canvas {
    position: absolute;
    width: 155px;
    right: -50px;
    top: -105px;
    z-index: 10000;
    transition: .08s;
}



#getpack .content .deal .orderpack  {

}




#getpack .content .deal .orderpack.free  {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    width: auto;
    padding: 6px 13px;
    line-height: initial;
    font-size: 12px;

}

#getpack .content .deal .orderpack.increase  {
    position: absolute;
    bottom: 66px;
    left: 50%;
    transform: translateX(-50%);
}

#getpack .content .deal .orderpack.increase .mor {
    padding-right: 20px;
    background: url(./ico/morale_16.png) center right no-repeat !important;
    background-size: 16px;
    font-size: 13px;

    margin-left: 5px;
}






.owl-theme .owl-controls .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 10px !important;
    margin: 5px;
    padding: 4px 7px;
    background: rgba(255,255,255,0.3);
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}



#marketing {
    position: absolute;
    top: 64px;
    left: 280px;
    ;
    z-index:100;
}

#marketing .moffer {
    position: absolute;
    height: 230px;
    left: 0px;
    width: 310px;
    top: 0px;

    clip-path: var(--clip_marketing);
}

#marketing .moffer .mclose{
    position: absolute;
    bottom: 16px;
    right: calc(50% - 70px);
    width: 140px;
    height: 16px;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 1;
    line-height: 16px;
    color: white;
    text-decoration: underline;
    white-space: nowrap;
    font-size: 12px;
}




#marketing .moffer .mclose:hover {
    animation: blink 100ms linear 2 alternate;
}

#marketing .moffer .close:hover:before {
    filter: invert(1);
}

#marketing .moffer .titl{
    position: absolute;
    top: 8px;
    left: 20px;
    right: 20px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

#marketing .moffer .titl .big{
    position: absolute;
    font-size: 20px;
    top: 7px;
    left: 0px;
    right: 0px;
    color: white;
    white-space: nowrap;


}

#marketing .moffer .titl .small{
    display: block;
    font-size: 14px;
    color: white;
    line-height: 20px;
    /* margin-top: 43px; */
    /* padding-left: 10px; */
    position: absolute;
    text-align: center;
    top: 92px;
    left: 0px;
    right: 0px;
}

#marketing .moffer .img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#marketing .moffer .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(marketing/chambers.jpg);
    background-size: cover;
    background-position: top right;

}

#marketing #marketing_minerpack.moffer .img:before {
    background-image: url(marketing/miner_pack.jpg);
}
#marketing #marketing_evilslayerpack.moffer .img:before {
    background-image: url(marketing/evilslayer_pack.jpg);
}

#marketing #marketing_connect_discord.moffer .img:before {
    background-image: url(marketing/connect_discord.jpg);
}

#marketing .moffer .img:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%),linear-gradient(160deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%);
    background-size: cover;
    background-position: bottom left;
}

#marketing .moffer .buttn {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 90px;
    z-index: 1;

}



#marketing .moffer .txt {
    bottom: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
}


.influence {
    position: relative;
    display: inline-block;
    padding: 3px 6px;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    color: black;
    margin: 3px 0px 6px;
    text-shadow: none;
}



.influence.in:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(163 210 174);
    filter: drop-shadow(0px 0px 6px rgb(163 210 174 / 50%));
    z-index: -1;
}

.influence.mainst:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(163 210 174);
    filter: drop-shadow(0px 0px 6px rgb(163 210 174 / 50%));
    z-index: -1;
}


.influence.out:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(100,100,100);
    z-index: -1;

}

#bluepages{
    position: absolute;
    width: 90%;
    height: 90%;
    min-width: 760px;
    z-index: 99999999;
    max-width: 1500px;
}

#bluepages:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    clip-path: var(--clip_starlink);
    z-index: -1;
    background-image: linear-gradient(rgb(2 2 21 / 0%) 0%, rgb(2 2 21 / 80%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}

#bluepages .content .showmore {
    display: block;
    position: relative;
    margin: 30px 0px 250px 0px;
    box-sizing: border-box;
    text-align: center;
}

#bluepages .content .showmore span {
    display: inline-block;
    position: relative;
    font-size: 12px;
    padding: 2px 8px;
    background-color: white;
    color: black;
    margin: 10px auto 50% auto;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    text-align: center;

    clip-path: var(--clip_whitelink);
    text-transform: uppercase;
}

#bluepages .content .showmore span:hover{
    animation: blink 100ms linear 2 alternate;
}

#bluepages .content .offer.listitem {
    display: block;
    width: calc(100% - 10px);
    height: 25px;
    position: relative;
    color: rgb(255,255,255);

    box-sizing: border-box;
    background-color: rgb(30,30,30);
    line-height: 25px;
    cursor: pointer;

}


#telo.rightcontext #bluepages {
    right: 350px;
}


#bluepages  #bluepages_header.header {
    position: absolute;
    top: 45px;
    left: 250px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 10;
    font-family: var(--fontFaimly_button);
}

#bluepages  #bluepages_header.header > span {
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}

#bluepages  #bluepages_header.header > span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}
#bluepages  #bluepages_header.header > span:hover:before {
    background-color: black;
    filter: invert(0);
}

#bluepages  #bluepages_header.header > span:hover {
    animation: blink 100ms linear 2 alternate;
}

#bluepages  #bluepages_header.header .stockpiled-inline:before {
    filter: invert(1);
}

#bluepages .content {
    position: absolute;
    top: 70px;
    right: 10px;
    width: calc(100% - 250px);
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 320px;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    min-height: 0;
    max-height: calc(100% - 83px);
}

#bluepages .content .info {
    display: block;
    text-align: center;
    color: rgb(200,200,200);
    margin-top: 60px;
}



#bluepages .content .offer.listitem {
    display: block;
    height: 56px;
    position: relative;
    color: rgb(255,255,255);
    box-sizing: border-box;
    background-color: rgb(28,47,75);
    line-height: 25px;
    cursor: pointer;
    grid-column: 1 / -1;
}

#bluepages .content .offer.listitem:hover {
    background-color: rgb(44 48 63);
}

#bluepages .content .offer.listitem .name {
    position: absolute;
    top: 4px;
    left: 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    line-height: 25px;
}

#bluepages .content .offer.listitem .price_total {
    position: absolute;
    right: 15px;
    top: 10px;
    text-align: left;
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    color: rgb(255,255,255);
    line-height: 25px;
}

#bluepages .content .offer.listitem .qty {
    position: absolute;
    top: 5px;
    right: 205px;
    text-align: right;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    line-height: 25px;
}

#bluepages .content .offer.listitem .min_qty {
    position: absolute;
    bottom: 10px;
    text-align: left;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    right: 205px;
    background-color: #858585;
    color: black;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--fontFaimly_button);
    line-height: 15px;

}

#bluepages .content .offer.listitem .price_unit {
    position: absolute;
    bottom: 12px;
    right: 15px;
    text-align: right;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    color: rgb(150 150 150);
    line-height: 10px;
}

#bluepages .content .offer.listitem .loc {
    position: absolute;
    top: 50%;
    left: 220px;
    max-width: calc(100% - 500px);
    text-align: right;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    color: silver;
    line-height: 14px;
    white-space: nowrap;
    transform: translateY(-50%);

}

#bluepages .content .offer.listitem .station {
    display: inline;
}



#bluepages .content .offer.listitem .distance {
    display: inline;
}

#bluepages .content .offer.listitem  .more_offers {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 130px;
}

#bluepages .content .offer.none {
    display: block;

    height: 95px;

    position: relative;

    box-sizing: border-box;
    background-color: rgb(18,20,29);

}

#bluepages .content .offer.none .name {
    position: absolute;
    top: 1px;
    left: 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(255,255,255);
    line-height: 25px;
    box-sizing: border-box;
    display: block;

}

#bluepages .content .offer.none .price {
    position: absolute;
    bottom: 7px;
    left: 10px;
    right: 81px;
    text-align: left;
    line-height: 15px;

}

#bluepages .content .offer.none .price .startsfrom .text {
    display: none;

}

#bluepages .content .offer.none .station {
    position: absolute;
    top: 25px;
    left: 8px;
    right: 73px;
    text-align: left;
    color: silver;
    font-size: 12px;
    max-height: 48px;
}


#bluepages .content .offer.none .distance {
    position: absolute;
    top: 22px;
    left: 250px;
    text-align: left;
    color: silver;
    font-size: 10px;
}

#bluepages .content .offer.none .buttons {
    position: absolute;
    top: 0px;
    right: 5px;
    text-align: right;
    width: 130px;
    bottom: 5px;
}

#bluepages .content .offer.none .buttons .more_offers {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
}



#bluepages .content .offer.line {
    display: block;
    height: 50px;
    position: relative;
    box-sizing: border-box;
    background-color: rgb(34 38 53);
    grid-column: 1 / -1;
}

#bluepages .content .offer.line .name {
    position: absolute;
    top: 15px;
    left: 15px;
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(255,255,255);
    box-sizing: border-box;
    display: block;
}

#bluepages .content .offer.line .price {
    position: absolute;
    top: 50%;
    right: 95px;
    text-align: right;
    line-height: 15px;
    min-width: 100px;
    max-width: calc(100% - 530px);
    transform: translateY(-50%);
}

#bluepages .content .offer.line .station {
    position: absolute;
    top: 50%;
    left: 275px;
    text-align: left;
    color: silver;
    font-size: 12px;
    transform: translateY(-50%);
}


#bluepages .content .offer.line .distance {
    position: absolute;
    top: 22px;
    left: 250px;
    text-align: left;
    color: silver;
    font-size: 10px;
}

#bluepages .content .offer.line .buttons {
    position: absolute;
    top: 0px;
    right: 5px;
    text-align: right;
    width: 130px;
    bottom: 5px;
}

#bluepages .content .offer.line .buttons .more_offers {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
}



#bluepages .content .offer.box {
    display: block;
    position: relative;
    width: 100%;
    height: 260px;
    box-sizing: border-box;

    padding: 30px 5px 0px 50%;
}

#bluepages .content .offer.box:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(34 38 53);
    z-index: -1;
}

#bluepages .content .offer.box .guser{
    padding-left: 0px;

}

#bluepages .content .offer.box .guser .uimgd{
    display: none;

}

#bluepages .content .offer.box .img {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-size: 80px;
    background-position: left 12% top 49px;
    background-repeat: no-repeat;
    overflow: hidden;
}

#bluepages .content .offer.box .img:after {
    content: "";
    position: absolute;
    display: block;
    left: -40px;
    right: -40px;
    bottom: -40px;
    top: -40px;
    background-size: cover;
    background-image: linear-gradient(105deg, rgb(27 47 75 / 0%) 0%, rgb(21 25 37 / 80%) 100%);
    background-position: -10px 0px;
}

#bluepages .content .offer.box .name {
    position: absolute;
    top: 9px;
    left: 9px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    color: white;
    line-height: 16px;
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    right: 10px;
    text-align: center;
}

#bluepages .content .offer.box .price {
    position: absolute;
    top: 142px;
    left: 50%;
    right: 10px;
    text-align: left;
    line-height: 16px;
}

#bluepages .content .offer.box .user {
    position: absolute;
    height: 60px;
    top: 30px;
    left: 20px;
    right: 5px;
}

#bluepages .content .offer.box .station {
    position: absolute;
    bottom: 30px;
    left: 10px;
    text-align: left;
    max-width: calc(100% - 89px);
    color: silver;
    font-size: 12px;
    max-height: 48px;
    transform: translateY(50%);
}


#bluepages .content .offer.bigbox {
    display: block;
    position: relative;
    width: 100%;
    height: 260px;
    box-sizing: border-box;
    grid-column: span 1;
    padding: 85px 5px 0px 50%;
}


#bluepages .content .offer.bigbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(26 26 44);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(rgb(48 78 117) 0%, rgb(20 27 45) 100%);
    background-position: 0px 0px;
}

#bluepages .content .offer.bigbox .guser{
    padding-left: 0px;

}

#bluepages .content .offer.bigbox .guser .uimgd{
    display: none;

}

#bluepages .content .offer.bigbox .name {
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 18px;
    color: #ffbc00;
    line-height: 22px;
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    right: 10px;
    text-align: center;
}

#bluepages .content .offer.bigbox .img {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-size: 110px;
    background-position: left 14% top 40px;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 30px rgb(130, 194, 224));
    overflow: hidden;
}



#bluepages .content .offer.bigbox .price {
    position: absolute;
    top: 61px;
    right: 10px;
    left: 50%;
    text-align: left;
    /* max-width: 160px; */
    color: silver;
    font-size: 13px;
    display: inline-block;
    transform: translateY(-50%);
}

#bluepages .content .offer.bigbox .price .startsfrom  .val {
    font-size: 23px;
    color: #ffa700;
}

#bluepages .content .offer.box .price .startsfrom  .val {
    font-size: 17px;
    color: #ffa700;
}

#bluepages .content .offer.bigbox .station {
    position: absolute;
    bottom: 30px;
    left: 14px;
    right: 88px;
    text-align: left;
    overflow: hidden;
    color: silver;
    max-height: 48px;
    font-size: 12px;
    transform: translateY(50%);
}

#bluepages .content .offer.bigbox .user {
    position: absolute;
    height: 60px;
    top: 30px;
    left: 120px;
    right: 10px;

}

#bluepages .content .offer .station .whitelink {
    color: black;
    background-color: white;
    padding: 2px 6px;
    margin: 2px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    font-family: var(--fontFaimly_button);
    background-size: 13px;
    background-position: left 4px center;
    background-repeat: no-repeat;
    padding-left: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='black' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='black' stroke-width='6' /></svg>");
}

.tradesite .station_img {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 55px;
    height: 60px;

}

.tradesite .station_img .station_subimg {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    background-repeat: no-repeat;
}

.tradesite .station_name {
    display: block;
    padding-left: 64px;


}


.tradesite .remark {
    display: block;
    font-size: 12px;
    color: gray;

    left: 0px;
    line-height: 17px;
    padding: 3px 0px 0px 62px;
}

.tradesite .station_name .starname {

    display: block;

    color: #c3d5f1;



    padding: 0px 8px;

    text-transform: uppercase;
    font-size: 12px;



    background-image: url(ico/sun-16.png);
    padding-left: 18px;
    background-position: center left 2px;
    background-size: 10px;
    background-repeat: no-repeat;
}

.tradesite .station_name .csname {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    text-transform: uppercase;
    padding: 5px 0px 5px 18px;
    background-image: url(ico/viewcontrols_stations_32.png);
    background-size: 14px;
    background-position: center left;
    background-repeat: no-repeat;
}

#bluepages .content .offer .station .whitelink{
    /*background-image:url('ico/viewcontrols_stations_32.png');*/

}

#bluepages .content .offer .station .whitelink:hover {
    animation: blink 100ms linear 2;
}

.tradesite .station_name.rmown .csname,
#bluepages .content .offer .station.rmown .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(100,255,255)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(100,255,255)' stroke-width='6' /></svg>");


}

.tradesite .station_name.rmown .csname{
    color: rgb(100,255,255);
}
.tradesite .station_name.rmnpc .csname{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,255,255)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,255,255)' stroke-width='6' /></svg>");
}
#bluepages .content .offer .station.rmnpc .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(0,0,0)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(0,0,0)' stroke-width='6' /></svg>");
}



.tradesite .station_name.rmnpc .csname{
    color: rgb(255,255,255);
}
.tradesite .station_name.rmzone-safe .csname,
#bluepages .content .offer .station.rmzone-safe .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(100,255,255)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(100,255,255)' stroke-width='6' /></svg>");
}

.tradesite .station_name.rmzone-safe .csname{
    color: rgb(100,255,255);
}
.tradesite .station_name.rmzone-danger .csname,
#bluepages .content .offer .station.rmzone-danger .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,80,80)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,80,80)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmzone-danger .csname{
    color: rgb(255,80,80);
}
.tradesite .station_name.rmally-safe .csname,
#bluepages .content .offer .station.rmally-safe .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(163,210,174)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(163,210,174)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmally-safe .csname{
    color: rgb(163,210,174);
}
.tradesite .station_name.rmally-danger .csname,
#bluepages .content .offer .station.rmally-danger .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,80,80)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,80,80)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmally-danger .csname{
    color: rgb(255,80,80);
}
.tradesite .station_name.rmneutral-safe .csname,
#bluepages .content .offer .station.rmneutral-safe .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,179,0)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,179,0)' stroke-width='6' /></svg>");
}

.tradesite .station_name.rmneutral-safe .csname{
    color: rgb(255,179,0);
}
.tradesite .station_name.rmneutral-danger .csname,
#bluepages .content .offer .station.rmneutral-danger .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,80,80)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,80,80)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmneutral-danger .csname{
    color: rgb(255,80,80);
}
.tradesite .station_name.rmnenemy-safe .csname,
#bluepages .content .offer .station.rmnenemy-safe .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,80,80)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,80,80)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmnenemy-safe .csname{
    color: rgb(255,80,80);
}
.tradesite .station_name.rmnenemy-danger .csname,
#bluepages .content .offer .station.rmnenemy-danger .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='rgb(255,80,80)' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='rgb(255,80,80)' stroke-width='6' /></svg>");

}

.tradesite .station_name.rmnenemy-danger .csname{
    color: rgb(255,80,80);
}
.tradesite .station_name.nodock .csname,
#bluepages .content .offer .station.nodock .whitelink{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='gray' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='gray' stroke-width='6' /></svg>");

}

.tradesite .station_name.nodock .csname{
    color: gray;
}

#bluepages .content .offer .station small {
    text-transform: none;
    font-size: 12px;
    /* display: block; */
    margin: 5px;
    white-space: nowrap;
}




#bluepages .content .offer.bigbox .distance {
    position: absolute;
    top: 160px;
    left: 10px;
    text-align: left;
    color: silver;
    font-size: 10px;
    display: block;
}

#bluepages .content .offer.bigbox .buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}




#bluepages .content .offer .price .startsfrom .text {
    display: block;

    text-transform: uppercase;
    color: rgba(200,200,200,1);
}

#bluepages .content .offer .price .startsfrom .val {

    font-size: 14px;

    color: rgba(255,255,255,1);
}

#bluepages .content .offer .price .startsfrom .min_qty {


    text-transform: uppercase;
    color: rgba(200,200,200,1);
    text-align: left;
}

#bluepages .content .offer .price .startsfrom .min_qty .min_qty_per {
    font-size: 10px;
}

#bluepages .content .offer .price .startsfrom .min_qty .mu {
    text-transform: none;
}

#bluepages .content .offer.bigbox .buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}


#bluepages .content .offer .buttons .more_offers {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 70px;
    z-index: 0;
    cursor: pointer;
}

#bluepages .content .offer .buttons .more_offers .mobf {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 12px;
}

#bluepages .search {
    position: absolute;
    top: 65px;
    left: 10px;
    width: 224px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;
}
#bluepages .search input {
    z-index: 1000;
    position: absolute;
    width: 197px;
    text-transform: uppercase;
}

#bluepages .sortfilter {
    position: absolute;
    top: 175px;
    left: 10px;
    width: 220px;
    text-align: center;
}
#bluepages .sortfilter .sort {
    position: relative;
    display: inline-block;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 6px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 10px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
#bluepages .sortfilter .sort.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}
#bluepages .sortfilter .sort:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}



#bluepages .radiusfilter {
    position:absolute;
    top:100px;
    left:15px;
    width:210px;
}
#bluepages .radiusfilter input {
    width: 80%;
    position: absolute;
    top: 10px;
    left: 10%;
}
#bluepages .radiusfilter .rangeval {
    width: 80%;
    position: absolute;
    top: 37px;
    left: 10%;
    text-align: center;
    color: silver;
}


#bluepages .menu {
    position:absolute;
    top:245px;
    left:15px;
    width:220px;
    bottom:250px;
}
#bluepages .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
#bluepages .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}
#bluepages .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}

#skipTutrialBox{
    position: absolute;
    width: 380px;
    height: 240px;

    z-index: 999999999;

    top: calc(50% - 120px);
    left: calc(50% - 190px);

}
#skipTutrialBox:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(180deg, rgb(0 0 0) -15%, rgb(0 0 0 / 51%) 57%),url(recruit_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,bottom,top;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}
#skipTutrialBox:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #585858;

    clip-path: var(--clip_menu_standardbox);
    z-index: -2;
}


#skipTutrialBox .subinfo{
    position: absolute;
    left: 80px;
    right: 80px;
    top: 80px;

    color: rgba(255,255,255,0.5);

    text-align: center;
    font-size: 15px;

    font-family: var(--fontFaimly_header);
    color: white;
    text-shadow: var(--shadow_textfull);
}

#skipTutrialBox .actions{
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 50px;
    text-align: center;
}

#selectTutrialBox{
    position: absolute;
    width: 950px;
    height: 675px;

    z-index: 99999999;

    top: calc(50% - 340px);
    left: calc(50% - 425px);

}

#selectTutrialBox:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(180deg, rgb(0 0 0) -15%, rgb(0 0 0 / 71%) 57%), url(tutorial_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,bottom,top;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}
#selectTutrialBox:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #585858;

    clip-path: var(--clip_menu_standardbox);
    z-index: -2;
}

#selectTutrialBox .title{
    position: absolute;
    top: 50px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    color: white;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 43px;
    text-align: center;
    background-color: transparent;
    text-transform: none;
    padding: 0px;
}

#selectTutrialBox .tlist{
    position: absolute;
    left: 25px;
    right: 25px;
    /* top: 100px; */
    bottom: 82px;

}


#selectTutrialBox .actions .skip-tutorials-link {
    color: white;


    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline;
    line-height: 16px;
    font-size: 12px;
    z-index: 1;

    text-decoration: underline;
}









#selectTutrialBox .actions .skip-tutorials-link:hover {
    animation: blink 100ms linear 2;
}




#selectTutrialBox .subinfo{
    position: absolute;
    left: 10px;
    right: 10px;
    top: 94px;
    /* bottom: 10px; */
    color: rgba(255, 255, 255, 0.5);
    /* text-transform: uppercase; */
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    font-family: var(--fontFaimly_header);
    color: white;
    text-shadow: var(--shadow_textfull);
}

#selectTutrialBox .actions{
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 54px;
    text-align: center;
}



#selectTutrialBox .tlist .titem{
    position: relative;
    width: 240px;
    height: 360px;
    margin: 0px 5px 15px;


    box-sizing: border-box;

}



#selectTutrialBox .tlist .titem.available{
    cursor: pointer;
}
#selectTutrialBox .tlist .titem.available:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #5a656f;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover, cover;
    background-position: bottom right, bottom, top;
    clip-path: var(--clip_selecttutorial_titem);
    z-index: -1;
}
#selectTutrialBox .tlist .titem .ttitle{
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 198px;
    color: white;
    font-size: 26px;
    font-family: var(--fontFaimly_header);
    text-align: center;
    line-height: 32px;
    text-shadow: var(--shadow_textfull);
}

#selectTutrialBox .tlist .titem .tdifficulty{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 173px;
    color: gray;
    font-size: 13px;
    text-align: center;
    line-height: 15px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);

}

#selectTutrialBox .tlist .titem .tsubtitle{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 138px;
    color: gray;
    font-size: 12px;

    text-align: center;
    line-height: 15px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);

}

#selectTutrialBox .tlist .titem .tsubtitle span{
    background-color: #fcba00;
    padding: 3px 8px;
    text-shadow: none;
    color: black;
    line-height: 12px;
    font-size: 12px;

    font-family: var(--fontFaimly_button);
    clip-path: var(--clip_whitelink);
}

#selectTutrialBox .tlist .titem.available .tsubtitle span {

}

#selectTutrialBox .tlist .titem.unavailable .tsubtitle span {
    background-color: #565656;
    color: #adadad;
}


#selectTutrialBox .tlist .titem .tsubtitle span.completed{
    background-color: black;
    color: white;
}


#selectTutrialBox .tlist .titem.available .tsubtitle span {
    background-color: #ffbc00;
    color: black;
}

#selectTutrialBox .tlist .titem .reset{
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);

    transition: opacity 0.2s;
    padding: 3px 7px;
    font-size: 11px;
    color: black;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    z-index: 1;
}

#selectTutrialBox .tlist .titem .reset:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#selectTutrialBox .tlist .titem .reset:hover{
    animation: blink 100ms linear 2 alternate;
    color: white;

}

#selectTutrialBox .tlist .titem .reset:hover:before {
    background: black;
}

#selectTutrialBox .tlist .titem:hover .reset{
    opacity: 1;
}

#selectTutrialBox .tlist .titem.unavailable .name{
    color: #404040;
    text-shadow: none;
}

#selectTutrialBox .tlist .titem.unavailable .html{
    color: #404040;
    text-shadow: none;
}

#selectTutrialBox .tlist .titem .html{
    position: absolute;
    left: 25px;
    right: 25px;
    top: 243px;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 18px;
    text-shadow: var(--shadow_textfull);
}

#selectTutrialBox .tlist .titem .img{
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-size: cover;
    background-position: center;
    clip-path: var(--clip_selecttutorial_titem);
    /*animation: crt 5000ms linear infinite;*/

}

#selectTutrialBox .tlist .titem .img:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient(
        43deg
        , rgb(0 0 0 / 60%) 00%, rgb(0 0 0 / 14%) 150%);

}

#selectTutrialBox .tlist .titem.unavailable{
    cursor: default;

}


#selectTutrialBox .tlist .titem.unavailable .img{
    filter: brightness(0.2) grayscale(1);
    animation: none;

}

#selectTutrialBox .tlist .titem.completed .img{
    animation: none;

}



#selectTutrialBox .tlist .titem:not(.unavailable):not(.completed):hover .img:after{
    display: none;
}

#selectTutrialBox .tlist .titem.available:hover .html,
#selectTutrialBox .tlist .titem.available:hover .tsubtitle{
    animation: blink 100ms linear 2;
}


#novicescreen{

    position:absolute;
    min-width: 900px;
    height: 785px;
    width: 80%;



    top: 37px;
    left: 220px;
    bottom: 20px;
    z-index: 999999999;
    max-width: var(--hud-window-max-width)
}

#novicescreen:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_standardbox);
}


#novicescreen .banner {
    position: absolute;
    top:1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-image: url(novice_select_ally.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size:  cover;
    background-position: top left, top right;

    clip-path: var(--clip_standardbox);
}

#novicescreen .banner:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(175deg, rgb(26 76 113 / 41%) -20%, rgba(0, 0, 0, 1) 100%), url(novice_select_ally.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size:  cover;
    background-position: bottom left,top left;

}



#novicescreen .banner .html {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#novicescreen .banner .html .zonlink {
    color: #ffbc00;
    cursor: pointer;
}

#novicescreen .banner .html .zonlink:hover {
    animation: blink 100ms linear 2 alternate;
}

#novicescreen .banner .html span.nadpis1 {
    position: absolute;
    top: 50px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    display: block;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 43px;
    text-align: center;
    font-family: var(--fontFaimly_header);

}



#novicescreen .banner .html span.nadpis3 {
    display: block;
    font-size: 20px;
    padding: 0px 0px;
    color: white;
    line-height: 25px;
    text-align: center;
    position: absolute;
    top: 120px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_header);
    text-shadow: var(--shadow_textfull);
}



#novicescreen .content {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#novicescreen .content .zones {
    position: absolute;
    top: 0px;
    left: 20px;
    right: 20px;

}


#novicescreen .content .zone{
    position: relative;
    height: 520px;
    margin: 0px 10px;
}

#novicescreen .content .zone:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_standardbox);
}

#novicescreen .content .zone:hover .img {
    animation: blink 100ms linear 2;
}

#novicescreen .content .zone:hover .imgbckg {

}



#novicescreen .content .zone .img{
    position: absolute;
    top: 25px;
    left: calc(50% - 45px);
    box-sizing: border-box;
    height: 90px;
    width: 90px;
    overflow: hidden;
    background-size: contain;
    background-color: black;


}

#novicescreen .content .zone .imgbckg{
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;


    clip-path: var(--clip_standardbox);

}

#novicescreen .content .zone .imgbckg span{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover;
    background-position: center;
    background-color: black;


}




#novicescreen .content .zone .imgbckg:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgb(57 94 151 / 2%) 70%), linear-gradient(160deg, rgb(25 37 73 / 86%) 30%, rgba(0, 0, 0, 1) 100%);
    background-size: cover;
    background-position: bottom left;
}

#novicescreen .content .zone .img.empty{
    background-image: url(ally-no-image.png);
    background-size: cover;
}

#novicescreen .content .zone .discord_link{
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    height: 28px;
    width: 28px;
    opacity: 1;
}



#novicescreen .content .zone .discord_link .st0{
    fill: white;
}

#novicescreen .content .zone .discord_link svg{
    cursor: pointer;
}

#novicescreen .content .zone .discord_link svg:hover {
    animation: blink 100ms linear 2;
}


#novicescreen .content .zone .name{
    position: absolute;
    top: 115px;
    left: 30px;
    box-sizing: border-box;
    height: 50px;

    text-align: center;
    right: 30px;

    overflow: hidden;
}



#novicescreen .content .zone .name span{
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;
    text-align: center;
    color: #ffbc00;
    font-size: 20px;
    line-height: 25px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}


#novicescreen .content .zone .subinfo{
    position: absolute;
    top: 162px;
    left: 0px;
    right: 5px;
    line-height: 18px;
    font-size: 14px;
    color: #d2d2d2;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

#novicescreen .content .zone .description{
    position: absolute;
    top: 250px;
    left: 20px;
    right: 20px;
    bottom: 95px;
}

#novicescreen .content .zone .description .lang{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#novicescreen .content .zone .description .lang .switcher{
    position: absolute;
    top: -20px;
    left: 0px;
    /* width: 50px; */
    height: 15px;
    font-size: 12px;
    color: silver;
    text-transform: uppercase;
    /* background-color: gray; */
    text-align: center;
    line-height: 15px;
    padding: 2px 6px;

    border: 1px solid silver;
    font-family: var(--fontFaimly_button);
}

#novicescreen .content .zone .description .lang:not(.lang_natural) .switcher{
    left: 33px;
}

#novicescreen .content .zone .description .lang.active .switcher{
    background-color: white;
    border: 1px solid white;
    color: black;
}

#novicescreen .content .zone .description .lang:not(.active) .switcher{
    cursor: pointer;
}

#novicescreen .content .zone .description .lang:not(.active) .switcher:hover{
    animation: blink 100ms linear 2 alternate;
}

#novicescreen .content .zone .description .lang .html{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 160px;
}


#novicescreen .content .zone .description .lang .html span{
    display: block;
    font-size: 14px;
    color: silver;
    width: 100%;
    text-align: center;
    /* margin-top: 50%; */
    position: absolute;
    top: 50%;
    text-shadow: var(--shadow_textfull);
    line-height: 18px;
    transform: translateY(-50%);
}


#novicescreen .content .zone .description .lang.active .html{
    display: block;
}


#novicescreen .content .zone .description .lang .lang_en{
    position: absolute;
    top: -20px;
    left: 0px;
    width: 50px;
    height: 15px;
    font-size: 12px;
    color: black;
    background-color: white;
    text-align: center;
    line-height: 15px;
}

#novicescreen .content .zone .actions{
    position: absolute;
    bottom: 20px;
    left: 30px;
    right: 30px;
    text-align: center;
}

#novicescreen .content .zone .actions .zoneapply{
    position: absolute;
    display: block;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);


}

#novicescreen .content .zone .actions .zoneapply .subtext{
    animation: var(--animation-subtext-fadeinFast);


}


#novicescreen .content .zone .actions .zoneinfo{
    position: absolute;
    display: block;
    bottom: 5px;

    left: 50%;
    text-align: center;
    box-sizing: border-box;

    color: #8d8d8d;
    text-decoration: underline;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    transform: translateX(-50%);

}

#novicescreen .content .zone .actions .zoneinfo:hover {
    animation: blink 100ms linear 2 alternate;
}




#invitation {
    position: absolute;
    width: 950px;
    height: 550px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 900000000;

}

#invitation:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(180deg, rgb(0 0 0) -15%, rgb(0 0 0 / 51%) 57%),url(recruit_bckgr.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,bottom,top;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#invitation:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #585858;

    clip-path: var(--clip_menu_standardbox);
    z-index: -2;
}

#invitation .heeadtext {
    position: absolute;
    top: 50px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    color: white;
    color: #ffbc00;
    text-shadow: var(--shadow_textfull);
    font-size: 43px;
    text-align: center;
    font-family: var(--fontFaimly_header);
}

#invitation .link {
    position: absolute;
    top: 155px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;

}

#invitation .link .linkval{
    position: absolute;
    top: 0px;
    right: 20px;
    left: 20px;
    box-sizing: border-box;
    background-color: white;
    color: black;
    font-size: 20px;
    padding: 10px 20px;
    cursor: text;
    user-select: all;

}


#invitation .link .copy{
    position: absolute;
    top: 72px;
    left: 50%;
    /* width: 80px; */
    box-sizing: border-box;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid white;
    text-align: center;
    color: white;
    font-size: 12px;
    padding: 0px 13px;
    font-family: var(--fontFaimly_button);
    transform: translateX(-50%);

}

#invitation .link .copy.copied{
    border: 1px solid gray;
    color: gray;
    cursor: default;
}

#invitation .link .copy:not(.copied):hover{
    animation: blink 100ms linear 2;
}

#invitation .link .ttext {
    position: absolute;
    top: -40px;
    right: 20px;
    left: 20px;
    color: white;
    text-shadow: var(--shadow_textfull);

    font-size: 16px;
    text-align: center;
}

#invitation .text {
    position: absolute;
    top: 323px;
    right: 20px;
    left: 20px;
    bottom: 20px;
    box-sizing: border-box;

}

#invitation .col {
    float: left;
    position: relative;
    top: 0px;
    width: 30%;
    height: 100%;
    color: white;
    margin: 0px 1.5%;
    bottom: 20px;
    box-sizing: border-box;
}

#invitation .col .subtitle {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    font-size: 20px;
    color: #ffbc00;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    /* font-family: var(--fontFaimly_button); */
    text-shadow: var(--shadow_textfull);
}

#invitation .col .html {
    position: absolute;
    top: 65px;
    left: 0px;
    right: 0px;
    font-size: 14px;
    color: white;
    text-shadow: var(--shadow_textfull);

    line-height: 20px;

}

#Ship2ShipRechargeBox{
    position:absolute;
    width:450px;
    height:570px;
    z-index:99999999;

    clip-path: var(--clip_standardbox);

}
#Ship2ShipRechargeBox:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(60,60,60,1);

    clip-path: var(--clip_standardbox);
    z-index: -1;
}


#Ship2ShipRechargeBox .subtext {

    text-align: center;
    font-size: 12px;

    text-transform: uppercase;

    position: absolute;
    top: 90px;
    left: 30px;
    right: 30px;
    color: silver;

}



#Ship2ShipRechargeBox .img {
    animation: blink 100ms linear 2 alternate;
    position: absolute;
    display: block;
    height: 160px;
    top: 133px;
    left: 30px;
    right: 30px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: gray;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 235px;
}

#Ship2ShipRechargeBox .img.sourceb {
    top: 105px;
    left: 30px;
    right: calc(50% + 40px);
}

#Ship2ShipRechargeBox .img.targetb {
    top: 105px;
    right: 30px;
    left: calc(50% + 40px);
}

#Ship2ShipRechargeBox .img.targetb:before {
    content: '';
    position: absolute;
    left: -80px;
    right: 100%;
    top: calc(50% - 20px);
    height: 40px;
    background: url(./ico/arrow-32-32.png) center no-repeat;
    background-size: 32px;
    opacity: 0.5;
}

#Ship2ShipRechargeBox .input {
    position: relative;
    top: 250px;
    left: 30px;
    width: calc(100% - 60px);
    color: white;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 30px;
    padding-top: 5px;
    margin-top: 30px;

}

#Ship2ShipRechargeBox .items {
    top: 40px;
}
#Ship2ShipRechargeBox .items table.items_table {
    width: calc(100% - 20px);
}

#Ship2ShipRechargeBox .items table.items_table .source_qty,
#Ship2ShipRechargeBox .items table.items_table .source_su{
    text-align: right;
}



#Ship2ShipRechargeBox .input:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#Ship2ShipRechargeBox .input .input_table{
    width: 320px;
    margin: 10px auto 0px;
    border-spacing: 0px;
    border-collapse: separate;
    line-height: 12px;
}





#Ship2ShipRechargeBox .input .input_table td
#Ship2ShipRechargeBox .input .input_table th {
    height: 25px;
    font-size: 10px;
    padding: 0px;
    line-height: normal;
    vertical-align: middle;
    text-transform: uppercase;
    text-align: right;
}

#Ship2ShipRechargeBox .items .items_table td.source_input {
    width: 240px;
}

#Ship2ShipRechargeBox .info {
    padding: 125px 0px;
    font-size: 23px;
    text-align: center;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
}

#Ship2ShipRechargeBox .input .input_table td.source_image{
    width: 25px;
    height: 25px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}
#Ship2ShipRechargeBox .input .input_table td.source_name {
    color: var(--hud_tablevaluecolor);

    text-align: left;
    padding-left: 10px;
    font-size: 10px;
}

#Ship2ShipRechargeBox .input .input_table td.source_qty {
    color: var(--hud_tablecolor);

    padding-left: 10px;
    text-align: right;
    width: 50%;
}

#Ship2ShipRechargeBox .input .input_table td.source_qty.red {
    color: rgb(164,2,4);
    animation: highlited 1000ms linear infinite;

}



#Ship2ShipRechargeBox .qty {
    text-align: center;
    vertical-align: top;
    position: absolute;
    bottom: 80px;
    left: 10px;
    right: 10px;
}

#Ship2ShipRechargeBox .actions input[type="number"] {
    text-align: center;
    width: 100px;
}




#Ship2ShipRechargeBox .actions{
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 10px;
    right: 10px;
}


#Ship2ShipRechargeBox .actions .actions_table{
    width: 100%;
    margin: 0px auto 30px;
    border-spacing: 0px;
    border-collapse: separate;

}

#Ship2ShipRechargeBox .actions .actions_table td{
    width: 33.3%;
    padding: 10px 0px;
    color: white;
    line-height: 20px;
    text-transform: uppercase;
}
#Ship2ShipRechargeBox .actions .actions_table td.rengeinput input{
    width: 100%;
}

#Ship2ShipRechargeBox .actions .actions_table td.tostationl span,
#Ship2ShipRechargeBox .actions .actions_table td.toshipl span
{
    display: block;
}



#addbuyout{
    position: absolute;
    width: 840px;


    z-index: 1;
}

#addbuyout:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #212f53;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(rgb(57 79 133 / 64%) 0%, rgb(43 43 95 / 64%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}


#addbuyout .html{
    position: relative;
    color: white;
    font-size: 16px;
    text-align: center;

    margin: 50px 35px 10px;
}

#addbuyout .html.spodni{

    margin: 10px 35px 40px;
}


#addbuyout .data{
    position: relative;
    color: white;
    font-size: 16px;
    text-align: center;
    width: calc(100% - 50px);
    margin: 10px 25px 35px;
}

#addbuyout .maindom{
    position: relative;
    color: white;

    margin: 0px;
}

#addbuyout .maindom.left{
    position: relative;
    float: left;
    width: calc(50% - 15px);
    margin: 0px 15px 0px 0px;
}

#addbuyout .maindom.right{
    position: relative;
    float: right;
    width: calc(50% - 15px);
    margin: 0px 0px 0px 15px;
}

#addbuyout .maindom.actions{
    position: relative;
    clear: both;
    width: 100%;

}

#addbuyout .data .subdata{

    margin: 12px 0px;
}


#addbuyout .data .subdataheades{
    font-size: 21px;
    padding: 5px 0px 10px;
}


#addbuyout .data .subdata .stitle{
    font-size: 14px;
}

#addbuyout .data .subdata .stitle:not(.small){
    margin-top: 10px;
}

#addbuyout .data .subdata .stitle.small{
    font-size: 13px;
    color: #ffffffb5;
    padding-top: 5px;
}

#addbuyout .data .subdata .subsubdata{
    margin: 6px 0 4px;
    text-align: center;
}

#addbuyout .data .subdata .subsubdata.left{

    text-align: left;
}



#addbuyout .data .subdata .subsubdata input.bqty,
#addbuyout .data .subdata .subsubdata input.bqty_total,
#addbuyout .data .subdata .subsubdata input.bunit_price,
#addbuyout .data .subdata .subsubdata input.noffer_minoffer,
#addbuyout .data .subdata .subsubdata input.noffer_minofferamount,
#addbuyout .data .subdata .subsubdata input.noffer_pricepart{
    width: calc(100% - 50px);
}



#addbuyout .data .subdata .subsubdata input.bqty_total.uzky{
    width: calc(100% - 260px);
}
#addbuyout .data .subdata .subsubdata input.bmin_rich{
    width: 80px;
    margin-left: 15px;
}

#addbuyout .data .subdata .subsubdata .submj{
    padding-left: 10px;
}

#addbuyout .data .subdata .subsubdata .autotradecontainer{

}

#addbuyout .data .subdata .subsubdata label{
    font-size: 14px;
}

#addbuyout .data .subdata .subsubdata select{
    width: 100%;
}

#addbuyout .data .subdata .subsubdata .button.createbuyout{
    margin-top: 15px;
}


#cstationbox  .tradelink_header {
    position: absolute;
    top: 200px;
    left: 250px;
    padding: 0px;


    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    z-index: 10;
}
#cstationbox .tradelink_header > span {
    padding: 3px 28px 3px 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}
#cstationbox .tradelink_header > span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}
#cstationbox .tradelink_header > span:hover:before {
    background-color: black;
    filter: invert(0);
}




#cstationbox .tradelink_header .stockpiled-inline:before {
    filter: invert(1);
}

#cstationbox .tradelink_content {
    position: absolute;
    top: 230px;
    right: 10px;
    width: calc( 100% - 250px );
    bottom: 10px;
    overflow-y: scroll;

    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
}




#cstationbox .tradelink_content .showmore {
    display: block;


    position: relative;

    margin: 30px 0px 250px 0px;
    box-sizing: border-box;


    text-align: center;

}

#cstationbox .tradelink_content .showmore span {
    display: inline-block;
    position: relative;
    font-size: 12px;
    padding: 2px 8px;
    background-color: white;
    color: black;
    margin: 10px auto 50% auto;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    cursor: pointer;
    text-align: center;

    clip-path: var(--clip_whitelink);
    text-transform: uppercase;
}

#cstationbox .tradelink_content .showmore span:hover{
    animation: blink 100ms linear 2 alternate;
}





#cstationbox .tradelink_content .tosellitem.listitem {
    display: block;
    width: calc(100% - 10px);
    min-height: 25px;
    position: relative;
    color: rgb(255,255,255);
    margin: 0px 0px 4px 0px;
    box-sizing: border-box;
    background-color: rgb(25 37 53);
    line-height: 26px;
    cursor: pointer;
    padding: 1px;
}

#cstationbox .tradelink_content .tosellitem.listitem.quest-gray {
    background-color: #272727;
    color: gray;
}

#cstationbox .tradelink_content .tosellitem.listitem:not(.quest-gray):hover {

    background-color: rgb(33 50 73);

}

#cstationbox .tradelink_content .tosellitem.listitem .thint {
    right: calc(80% - 80px);
    top: 50%;
    transform: translateY(-50%);
}

#cstationbox .tradelink_content .tosellitem.listitem .thint:before  {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid var(--color-thint);
    border-bottom: 10px solid transparent;
    border-left: none;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
    right: unset;
}


#cstationbox .tradelink_content .tosellitem.listitem .name {
    position: relative;
    top: 0px;
    bottom: 0px;
    left: 8px;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    box-sizing: border-box;
    display: block;

    min-height: 25px;
}

#cstationbox .tradelink_content .tosellitem.listitem.quest-gray .name {
    filter: grayscale(1);
}

#cstationbox .tradelink_content .tosellitem.listitem .name .inline-stasis {
    margin-bottom: 3px;
}

#cstationbox .tradelink_content .tosellitem.listitem .price {
    position: absolute;
    right: 10px;
    top: 0px;
    bottom: 0px;
    text-align: left;

    font-size: 12px;
    box-sizing: border-box;
    display: block;
    color: rgb(200, 200, 200);
}

#cstationbox .tradelink_content .tosellitem.listitem.quest-gray .price {
    color: gray;
}

#cstationbox .tradelink_content .tosellitem.listitem .qty {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 135px;
    text-align: right;
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    line-height: 25px;
}

#cstationbox .tradelink_content .buyout {
    display: block;
    width: calc(100% - 10px);
    height: 65px;
    position: relative;
    color: rgb(255,255,255);
    margin: 0px 0px 4px 0px;
    box-sizing: border-box;
    background-color: #473612;


    font-size: 12px;
}


#cstationbox .tradelink_content .buyout .name {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    text-align: left;
    text-transform: uppercase;
    box-sizing: border-box;
    display: block;
    max-width: 160px;
    line-height: unset;
    height: unset;
    padding: 0px 0px 0px 40px;
    margin: 0px;
}

#cstationbox .tradelink_content .buyout .name .miniature  {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

#cstationbox .tradelink_content .buyout .price_unit {
    position: absolute;
    right: 160px;




    box-sizing: border-box;
    display: block;
    color: rgb(151,237,255);
    top: 50%;
    text-align: right;
    transform: translateY(-50%);
    right: 70px;
}

#cstationbox .tradelink_content .buyout .min_rich {
    position: absolute;
    right: 160px;




    box-sizing: border-box;
    display: block;
    color: rgb(151,237,255);
    top: calc(50% + 17px);
    text-align: right;
    transform: translateY(-50%);
    right: 70px;
}

#cstationbox .tradelink_content .buyout .html {
    position: absolute;
    left: 190px;
    right: 152px;
    top: 50%;

    transform: translateY(-50%);

}







#cstationbox .tradelink_content .buyout .unlimitedbo {
    text-transform: uppercase;
    color: rgb(255 191 0);
}






#cstationbox .tradelink_content .buyout .cancelbuyout {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}


#cstationbox .tradelink_content .buyout .cancelbuyout {
    margin: 0px 0px 0px 0px;
    height: 35px;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-color: transparent;
    line-height: 35px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0px 13px 0px 21px;
    text-align: left;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;
    position: absolute;
    background-image: url(ico/x-mark-64.png);
}


#cstationbox .tradelink_content .offer.listitem {
    display: block;
    width: calc(100% - 10px);
    height: 25px;
    position: relative;
    color: rgb(255,255,255);
    margin: 0px 0px 4px 0px;
    box-sizing: border-box;
    background-color: rgb(25 37 53);
    line-height: 25px;
    cursor: pointer;
}

#cstationbox .tradelink_content .offer.listitem .thint {
    top: 0px;
    right: 99px;
    left: unset;
    bottom: unset;
}

#cstationbox .tradelink_content .offer.listitem:hover {
    background-color: rgb(33 50 72);
}

#cstationbox .tradelink_content .offer.listitem .name {
    position: absolute;
    top: 0px;
    bottom:0px;
    left: 8px;
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
    box-sizing: border-box;
    display: block;
    line-height: 25px;
}

#cstationbox .tradelink_content .offer.listitem .name .miniature  {
    vertical-align: middle;
    margin-right: 5px;
}

#cstationbox .tradelink_content .offer.listitem .price_total {
    position: absolute;
    right: 7px;
    top: 0px;
    bottom: 0px;
    text-align: left;
    line-height: 25px;
    font-size: 13px;
    line-height: 25px;
    box-sizing: border-box;
    display: block;
    color: rgb(151,237,255);
}



#cstationbox .tradelink_content .offer.listitem .qty {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 285px;
    text-align: right;

    font-size: 13px;
    box-sizing: border-box;
    display: block;
    line-height: 25px;
}

#cstationbox .tradelink_content .offer.own .name,
#cstationbox .tradelink_content .offer.listitem.own .price_total,
#cstationbox .tradelink_content .offer.listitem.own .price_unit,
#cstationbox .tradelink_content .offer.listitem.own .qty,
#cstationbox .tradelink_content .offer.own{
    color: rgb(173 194 207);
}

#cstationbox .tradelink_content .offer.own {
    background-color: rgb(30,55,59);
    color: rgb(170,170,170);
    box-sizing: border-box;
}

#cstationbox .tradelink_content .offer.own:hover {
    background-color: rgb(40 75 81);

}

#cstationbox .tradelink_content .offer.listitem .qty .min-qty {
    background-color: #858585;
    color: black;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
}



#cstationbox .tradelink_content .offer.listitem .price_unit {
    position: absolute;
    right: 140px;
    top: 0px;
    bottom: 0px;
    text-align: left;
    line-height: 25px;
    font-size: 13px;
    box-sizing: border-box;
    display: block;
    color: rgb(200,200,200);
}





#cstationbox .tradelink_content .offer.listitem  .more_offers {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 130px;
}

#cstationbox .tradelink_content .offer .thint {
    top: 7px;
    right: unset;
    left: 5px;
    bottom: unset;

}

#cstationbox .tradelink_content .offer.none {
    display: block;
    width: calc(100% - 10px);
    height: 40px;
    overflow: hidden;
    position: relative;
    margin: 4px 0px;
    box-sizing: border-box;
    background-color: rgb(25 37 53);
    cursor: pointer;
}

#cstationbox .tradelink_content .offer.own {
    background-color: rgb(30,55,59);
}



#cstationbox .tradelink_content .offer.quest-gray {
    background-color: rgb(50 50 50);


}

#cstationbox .tradelink_content .offer.quest-hide {
    display: none !important;

}

#cstationbox .tradelink_content .offer.none:hover {
    background-color: rgb(33 50 72);
}

#cstationbox .tradelink_content .offer.quest-gray:hover {
    background-color: rgb(50 50 50);
}

#cstationbox .tradelink_content .offer.none .img {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 32px;
    height: 32px;
    filter: var(--shadow_drpofull);
}

#cstationbox .tradelink_content .offer.quest-gray .img {
    filter: grayscale(1) contrast(0.5) brightness(0.5);
}


#cstationbox .tradelink_content .offer.none .name {
    position: absolute;
    top: 12px;
    left: 50px;
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(255,255,255);
    line-height: 15px;
    box-sizing: border-box;
    display: block;
}

#cstationbox .tradelink_content .offer.quest-gray .name {
    opacity: 0.3;
}

#cstationbox .tradelink_content .offer.none .name .miniature {
    position: absolute;
    top: -0px;
    left: -30px;
}

#cstationbox .tradelink_content .offer.none .name .miniature,
#cstationbox .tradelink_content .offer.line .name .miniature {
    vertical-align: middle;
    margin-right: 5px;
}


#cstationbox .tradelink_content .offer.none .price {
    position: absolute;
    top: 5px;
    /* left: 450px; */
    right: 10px;
    text-align: left;
    line-height: 15px;
    min-width: 100px;
    width: calc(100% - 460px);
}

#cstationbox .tradelink_content .offer.quest-gray .price {
    opacity: 0.3;
}

#cstationbox .tradelink_content .offer.none .station {
    position: absolute;
    top: 10px;
    left: 245px;
    text-align: left;
    color: silver;
    font-size: 12px;
}


#cstationbox .tradelink_content .offer.none .distance {
    position: absolute;
    top: 22px;
    left: 250px;
    text-align: left;
    color: silver;
    font-size: 10px;
}

#cstationbox .tradelink_content .offer.none .buttons {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    width: 130px;
    bottom: 0px;
}

#cstationbox .tradelink_content .offer.none .buttons .more_offers {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
}



#cstationbox .tradelink_content .offer .buttons .more_offers .thint {
    top: 0px;
}





#cstationbox .tradelink_content .offer.line {
    display: block;
    width: calc(100% - 10px);
    height: 40px;
    overflow: hidden;
    position: relative;
    margin: 4px 0px;
    box-sizing: border-box;
    background-color: rgb(33 50 72);
    cursor: pointer;

}


#cstationbox .tradelink_content .offer.quest-gray {
    background-color: rgb(50 50 50)  !important;
}


#cstationbox .tradelink_content .offer.line .name {
    position: absolute;
    top: 12px;
    left: 50px;
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(255,255,255);
    line-height: 15px;
    box-sizing: border-box;
    display: block;

}

#cstationbox .tradelink_content .offer.quest-gray .name {
    opacity: 0.3 !important;
}


#cstationbox .tradelink_content .offer.line .img {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 32px;
    height: 32px;
    filter: var(--shadow_drpofull);
}

#cstationbox .tradelink_content .offer.quest-gray .img {
    filter: grayscale(1) contrast(0.5) brightness(0.5)  !important;
}

#cstationbox .tradelink_content .offer.line .name .miniature {
    position: absolute;
    top: -8px;
    left: -40px;

}



#cstationbox .tradelink_content .offer.line .price {
    position: absolute;
    top: 5px;
    left: 450px;
    right: 150px;
    text-align: left;
    line-height: 15px;
    white-space: nowrap;

}

#cstationbox .tradelink_content .offer.own .price {
    color: rgb(100,100,100);
}


#cstationbox .tradelink_content .offer.line .buttons {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    width: 130px;
    bottom: 0px;
}

#cstationbox .tradelink_content .offer.quest-gray .buttons .more_offers {
    color: #555555 !important;
}

#cstationbox .tradelink_content .offer.quest-gray .buttons .more_offers:before {
    background-color: #272727 !important;
}

#cstationbox .tradelink_content .offer.line .buttons .more_offers {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    z-index: 1;
}

#cstationbox .tradelink_content .offer.own .buttons .more_offers:before {
    color: rgb(100,100,100);
    background-color: #1d1d1d;
}



#cstationbox .tradelink_content .offer.box {
    display: inline-block;
    position: relative;
    width: 280px;
    height: 190px;
    margin: 4px 4px 4px 4px;
    box-sizing: border-box;

}

#cstationbox .tradelink_content .offer.box:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_starlink_adbox);
    z-index: -1;
}


#cstationbox .tradelink_content .offer.box .name {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(0,0,0);
    line-height: 15px;
    box-sizing: border-box;
    display: block;
    background-color: white;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--fontFaimly_button);
}

#cstationbox .tradelink_content .offer.box .img {
    position: absolute;
    width: 90px;
    right: 0px;
    top: 26px;
    height: 60px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


#cstationbox .tradelink_content .offer.box .price {
    position: absolute;
    top: 105px;
    left: 15px;
    right: 10px;
    text-align: left;
    line-height: 16px;
}

#cstationbox .tradelink_content .offer.box .guser {
    position: absolute;

    top: 22px;
    left: 8px;

}

#cstationbox .tradelink_content .offer.box .station {
    position: absolute;
    top: 111px;
    left: 10px;
    text-align: left;
    color: silver;
    font-size: 12px;
}



#cstationbox .tradelink_content .offer.box .station small {
    font-size: 10px;
}






#cstationbox .tradelink_content .offer.bigbox {
    display: inline-block;
    position: relative;
    width: 270px;
    height: 190px;
    margin: 4px 4px 4px 4px;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;
}


#cstationbox .tradelink_content .offer.bigbox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_starlink_adbox);
    z-index: -1;
}

#cstationbox .tradelink_content .offer.bigbox .guser {
    position: absolute;
    top: 20px;
    left: 133px;
    padding-left: 5px;
}

#cstationbox .tradelink_content .offer.bigbox .guser .uimgd {
    display: none;
}

#cstationbox .tradelink_content .offer.bigbox .name {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(0,0,0);
    line-height: 15px;
    box-sizing: border-box;
    display: block;
    background-color: #ffbc00;
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--fontFaimly_button);
}

#cstationbox .tradelink_content .offer.bigbox .img {
    position: absolute;
    width: 128px;
    left: 10px;
    top: 34px;
    height: 128px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#cstationbox .tradelink_content .offer.bigbox .price {
    position: absolute;
    top: 100px;
    left: 140px;
    right: 10px;
    text-align: left;
    line-height: 16px;
}

#cstationbox .tradelink_content .offer.bigbox .station {
    position: absolute;
    top: 152px;
    left: 20px;
    text-align: left;
    max-width: 160px;
    color: silver;
    font-size: 12px;
}

#cstationbox .tradelink_content .offer .station .whitelink {
    color: black;
    background-color: white;
    padding: 1px 4px;
    margin: 0px;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    display: inline;
}

#cstationbox .tradelink_content .offer .station .whitelink:hover {
    animation: blink 100ms linear 2;
}

#cstationbox .tradelink_content .offer .station small {
    margin-left: 5px;
    text-transform: none;
    font-size: 10px;
}




#cstationbox .tradelink_content .offer.bigbox .distance {
    position: absolute;
    top: 160px;
    left: 10px;
    text-align: left;
    color: silver;
    font-size: 10px;
}

#cstationbox .tradelink_content .offer.bigbox .buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#cstationbox .tradelink_content .offer.bigbox .user {
    position: absolute;
    height: 60px;
    top: 20px;
    left: 140px;
    right: 10px;
}

#cstationbox .tradelink_content .offer .user .uimgd {
    position:absolute;
    width:35px;
    height: 35px;
    top: 7px;
    left: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

#cstationbox .tradelink_content .offer .user .uimgd .uimg{
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(150,150,200);
    filter: brightness(100%) grayscale(10%);
    background-size: auto, contain, auto, contain;
    background-position: top center, center,center, center;
    animation: crt 5000ms linear infinite;
}

#cstationbox .tradelink_content .offer .user .ucname {
    position:absolute;
    left: 43px;
    top: 6px;
    color: rgb(100,100,100);

    font-size: 12px;
    padding-bottom: 2px;
    display: block;
    text-align: left;
}

#cstationbox .tradelink_content .offer .user .uname {
    position:absolute;
    left: 43px;
    top: 20px;
    color: rgb(150,150,150);
    font-size: 10px;
    text-transform: uppercase;

    display: block;
    text-align: left;
}

#cstationbox .tradelink_content .offer .user .lactivity {
    position:absolute;
    left: 43px;
    top: 33px;
    color: rgb(150,150,150);
    font-size: 8px;

    display: block;
    text-transform: uppercase;
    text-align: left;
}



#cstationbox .tradelink_content .offer .user .lactivity .premlink {
    color: #ffbc00;
    cursor: pointer;
}

#cstationbox .tradelink_content .offer .user .lactivity .premlink:hover {
    animation: blink 100ms linear 2;
}


#cstationbox .tradelink_content .offer .price .startsfrom .text {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(200,200,200,1);
    white-space: nowrap;
}

#cstationbox .tradelink_content .offer.own .price .startsfrom .text {
    color: rgb(173 194 207);
}

#cstationbox .tradelink_content .offer .price .startsfrom .val {
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255,255,255,1);
}

#cstationbox .tradelink_content .offer.own .price .startsfrom .val {
    color: rgb(173 194 207);
}

#cstationbox .tradelink_content .offer .price .startsfrom .min_qty {
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(200,200,200,1);
    text-align: left;
}

#cstationbox .tradelink_content .offer .price .startsfrom .min_qty .mu{

    text-transform: none;
}


#cstationbox .tradelink_content .offer.own .price .startsfrom .min_qty {
    color: rgb(173 194 207);
}

#cstationbox .tradelink_content .offer.bigbox .buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
}


#cstationbox .tradelink_content .offer .buttons .more_offers {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    color: white;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    font-family: var(--fontFaimly_button);
}

#cstationbox .tradelink_content .offer .buttons .more_offers:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    text-align: center;
    background-color: #192535;
    z-index: -1;
}

#cstationbox .tradelink_content .offer:hover .buttons .more_offers:before {
    filter: drop-shadow(0px 0px 12px #f8fbff3b);

    background-color: #354e6e;
}

#cstationbox .tradelink_content .offer.quest-gray:hover .buttons .more_offers:before {
    filter: unset !important;
    background-color: #272727 !important;
}

#cstationbox .tradelink_content .offer:hover .buttons .more_offers {
    color: white;
}

#cstationbox .tradelink_content .offer.own:hover .buttons .more_offers:before {
    background-color: #1d1d1d;
    color: unset;
    animation: blink 100ms linear 2 alternate;
}

#cstationbox .tradelink_search {
    position: absolute;
    top: 210px;
    left: 17px;
    width: 214px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;
}
#cstationbox .tradelink_search input {
    z-index: 1000;
    position: absolute;
    width: 190px;

    text-align: left;
    box-sizing: border-box;
    text-transform: uppercase;
}

#cstationbox .tradelink_subbuttons {
    position: absolute;
    top: 192px;
    right: 11px;

}

#cstationbox .tradelink_sortfilter {
    position: absolute;
    top: 264px;
    left: 10px;
    width: 220px;
    text-align: center;
}
#cstationbox .tradelink_sortfilter .sort {
    position: relative;
    display: inline-block;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 8px;
    line-height: 27px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
#cstationbox .tradelink_sortfilter .sort.active {
    color: var(--hud_bookmarkcolor);

}
#cstationbox .tradelink_sortfilter .sort:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);

}



#cstationbox .tradelink_radiusfilter {
    position:absolute;
    top:100px;
    left:15px;
    width:210px;
}
#cstationbox .tradelink_radiusfilter input {
    width: 80%;
    position: absolute;
    top: 10px;
    left: 10%;
}
#cstationbox .tradelink_radiusfilter .rangeval {
    width: 80%;
    position: absolute;
    top: 37px;
    left: 10%;
    text-align: center;
    color: silver;
}

#cstationbox .tradelink_subzalozky {
    position: absolute;
    top: 20px;
    right: 43px;

    text-align: center;
}

#cstationbox .tradelink_subzalozky .subzalozka {
    position: relative;
    display: inline-block;
    height: 27px;
    color: #b9dbff;
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
}

#cstationbox .tradelink_subzalozky .subzalozka.quest-hide {
    display: none !important;
}

#cstationbox .tradelink_subzalozky .subzalozka.quest-gray {
    color: gray;
}

#cstationbox .tradelink_subzalozky .subzalozka:not(.thint):before {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background-color: transparent;
}

#cstationbox .tradelink_subzalozky .subzalozka:not(.thint):after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image: linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color2) 0%, var(--border-command-fleets-effect-color2) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%), linear-gradient(0deg, var(--border-command-fleets-effect-color) 0%, var(--border-command-fleets-effect-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#cstationbox .tradelink_subzalozky .subzalozka.quest-gray:not(.thint):after {
    background-image:
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color2-gray) 0%, var(--border-command-fleets-effect-color2-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%),
        linear-gradient(0deg, var(--border-command-fleets-effect-color-gray) 0%, var(--border-command-fleets-effect-color-gray) 100%);
}

#cstationbox .tradelink_subzalozky .subzalozka.active {
    color: white;
    filter: drop-shadow(0px 0px 12px #b9dbff);

    animation: highlitedPRESSEDBox 800ms ease infinite;
}




#cstationbox .tradelink_subzalozky .subzalozka:not(.thint):not(.quest-gray):hover {
    animation: none;
    color: white;
    animation: highlitedPRESSED 800ms ease infinite;
}

#cstationbox .tradelink_subzalozky .subzalozka:not(.thint):not(.quest-gray):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;

}
#cstationbox .tradelink_subzalozky .subzalozka.active:not(.thint):not(.quest-gray):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation:blink 100ms linear 2 alternate;
}


#cstationbox .tradelink_menu {
    position:absolute;
    top:340px;
    left:15px;
    width:220px;
    bottom:250px;
}
#cstationbox .tradelink_menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
#cstationbox .tradelink_menu .filter.active {
    color: var(--hud_bookmarkcolor);

}
#cstationbox .tradelink_menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);

}

#cstationbox .tradelink_menu .filter .thint {
    left: 100%;
    text-align: center;
    bottom: -1px;
    top: unset;
    right: unset;
}

#cstationbox .tradelink_menu .filter .thint:before {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid var(--color-thint);
    border-bottom: 10px solid transparent;
    border-left: none;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
    right: unset;
}

#cstationbox .tradelink_capacity  {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#cstationbox .tradelink_capacity .stationcredit {
    position: absolute;
    top: 70px;
    left: calc(50% + 5px);
    height: 110px;
    width: calc(50% - 15px);
    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}
#cstationbox .tradelink_capacity .stationcredit:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clip-path: var(--clip_csbox_st_cargo);
}
#cstationbox .tradelink_capacity .stationcredit .stationcreditbar .stationcreditbarbox .stationcreditbefore {
    display: block;
    position: absolute;
    top: 13px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}
#cstationbox .tradelink_capacity .stationcredit .stationcreditbar .stationcreditbarbox #station_credit_txt {
    position: absolute;
    top: 44px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}









#cstationbox .tradelink_capacity .stationcapacity {
    position: absolute;
    top: 70px;
    left: 10px;
    height: 110px;
    width: calc(50% - 15px);
    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}
#cstationbox .tradelink_capacity .stationcapacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_cargo);
}

#cstationbox .capacity .stationcapacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .tradelink_capacity .stationcapacity .cargobar .cargobarbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
    top: 69px;
    right: 30px;
}
#cstationbox .tradelink_capacity .stationcapacity .cargobar .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}
#cstationbox .tradelink_capacity .stationcapacity .cargobar .cargobarbox #station_cargo_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .tradelink_capacity .stationcapacity .cargobar .cargobarbox #station_cargo_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .tradelink_capacity .stationcapacity .cargobar .cargobarbox:before {
    display: block;
    content: '';
    position: absolute;
    top: -55px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    color: white;
    white-space: nowrap;
}

#cstationbox .tradelink_capacity .shipcapacity {
    position: absolute;
    top: 70px;
    left: calc(50% + 5px);
    height: 110px;
    width: calc(50% - 15px);

    box-sizing: border-box;
    animation: text-shadowing-white-small 500ms ease-out forwards;
}

#cstationbox .tradelink_capacity .shipcapacity:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: var(--upperbox_background_color);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_csbox_st_cargo);
}

#cstationbox .tradelink_capacity .shipcapacity .capacity-bar{
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#cstationbox .tradelink_capacity .shipcapacity .cargobar .cargobarbox{
    height: 7px;
    left: 10%;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    top: 69px;
    right: 30px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
#cstationbox .tradelink_capacity .shipcapacity .cargobar .cargobarbox .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
}
#cstationbox .tradelink_capacity .shipcapacity .cargobar .cargobarbox #ship_cargo_capacity_txt{
    position: absolute;
    top: 18px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: white;
}
#cstationbox .tradelink_capacity .shipcapacity .cargobar .cargobarbox #ship_cargo_capacity_maintxt{
    position: absolute;
    top: -26px;
    line-height: 10px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 33px;
    text-align: center;
    white-space: nowrap;
    color: white;
}




.raidsbox {
    display: block;
    position: absolute;
    top: 332px;
    right: 45px;
    max-width: 200px;
    bottom: calc(100% - 656px);
    transition: top .2s;
}



.telo.fleetships .raidsbox{
    display: none;
}

.telo.maphud .raidsbox{
    top: 413px;
    bottom: calc(100% - 700px);
}


.starmaphud .raidsbox {
    display: none;
}

.raidsbox .raid {
    display: block;
    position: relative;
    color: white;
    max-width: 200px;
    white-space: nowrap;

    text-shadow: var(--shadow_textfull);
    height: 48px;
    padding: 6px 0;

}



.raidsbox .raid:not(:last-child):after{
    content: '';
    position: absolute;
    height: 1px;
    width: 40px;
    right: 5px;
    bottom: 6px;
    display: block;
    border-bottom: 1px solid var(--border-ctrlkey-color);
}


.raidsbox .raid .name {
    position: absolute;
    right: 0px;
    top: 2px;
    padding: 2px 5px;
    text-transform: uppercase;
}

.raidsbox .raid:not(.own) {
    color: gray;
}

.raidsbox .raid.clickable .name {
    background-color: rgba(255,255,255,.8);
    color: black;
    text-shadow: none;
    cursor: pointer;
    padding: 1px 6px;
    font-family: var(--fontFaimly_button);

    clip-path: var(--clip_whitelink);
}

.raidsbox .raid.clickable:not(.own)  .name {
    background-color: rgb(123 123 123 / 80%);
}

.raidsbox .raid.clickable .name:hover  {
    animation: blink 100ms linear 2 alternate;
}


.raidsbox .raid .html {
    position: absolute;
    line-height: 20px;
    right: 5px;
    top: 24px;
}

.raidsbox .raid .ptimer {
    position: absolute;
    right: 5px;
    top: 50px;

    text-align: left;
}



.raidsbox .raid .html .eu {
    display: inline-block;
    position: relative;
    height: 20px;
    padding-left: 22px;
    min-width: 10px;

}

.raidsbox .raid .html .eu img {
    position: absolute;
    max-width: 20px;
    max-height: 20px;
    top: 0px;
    left: 0px;
    filter: brightness(1.5) grayscale(1);

}



#jump-window {
    position: absolute;
    width: 600px;
    height: 440px;


    z-index: 1;
}

#jump-window:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);


    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#jump-window .info {

    position: absolute;
    left: 30px;
    right: 30px;
    top: 30%;
    text-transform: none;
    font-size: 15px;
    line-height: 23px;
    color: gold;

}

#jump-window .actions {

    position: absolute;
    display: block;
    left: 30px;
    right: 30px;

    text-align: center;

    bottom: 40px;

}


#jump-window .info .whitelink {
    color: black;
    padding: 2px 7px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: none;
    position: relative;
}

#jump-window .info .whitelink:hover {
    animation: blink 100ms linear 2;
}

#jump-window .info .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;

    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#jump-window .jump-button {
    display: block;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    width: 120px;
    height: 30px;
    line-height: 30px;
    bottom: 40px;
    left: calc(50% - 60px);
    color: black;

}

#jump-window .jump-button.possible {

    cursor: pointer;


}



#jump-window .jump-button.possible:hover {
    animation: blink 100ms linear 2 alternate;
}

#jump-window .jump-button:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;

    text-align: center;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    background-color: white;

    clip-path: var(--clip_button);
    z-index: -1;
}

#jump-window .jump-button.impossible:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;

    text-align: center;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    background-color: gray;

    clip-path: var(--clip_button);
    z-index: -1;
}








#arrivininfobox {
    position: absolute;
    width: 440px;
    height: 220px;
    z-index: 1;
}

#arrivininfobox:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    background-image: linear-gradient(rgb(16 32 71 / 80%) 0%, rgb(44 41 83 / 40%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#arrivininfobox .arrivininfobox {
    top: calc(50% + 10px);
    position: absolute;
    display: block;
    left: 30px;
    right: 30px;
    color: gold;
    font-size: 16px;
    text-align: center;
    transform: translateY(-50%);

}

#arrivininfobox .arrivininfobox small{
    margin-top: 20px;
    display: block;
    line-height: 13px;
    font-size: 12px;

}


#ship_hud {

    position: absolute;
    bottom: 45px;
    left: calc(50% - 300px);
    width: 600px;
    height: 300px;
    border: 1px solid white;

}


#pvp-client {
    position: absolute;
    top: 70px;
    left: 30px;
    right: 30px;
    bottom: 40px;

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
}

#pvp-client:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%,rgb(30,30,30) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#pvp-client .clog {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    color: #c3c3c3;
    text-align: center;
    font-size: 22px;
}

#pvp-client .clog span {
    color: white;
    background-color: var(--hud_invalid_background);
    padding: 3px 8px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;

}

#pvp-client .configurator {
    position: absolute;
    top: 55px;
    right: 40px;
    left: 40px;
    color: white;
    text-align: left;
    text-shadow: var(--shadow_textfull);
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.8);

    clip-path: var(--clip_menu_standardbox);
    height: 90px;
}

#pvp-client .configurator .info {
    position: relative;
    color: silver;
    line-height: 15px;
    text-align: center;
    padding-top: 28px;
    text-transform: uppercase;
    text-shadow: none;

}


#pvp-client .configurator .info .whitelink {
    color: black;
    padding: 0px 8px;
    margin: 3px 3px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
}


#pvp-client .configurator .info .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;

    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#pvp-client .configurator .info .whitelink:hover {
    animation: blink 100ms linear 2;
}

#pvp-client .htitle-configurator {
    position: absolute;
    top: 30px;
    left: 65px;
    color: rgba(255,255,255,0.2);
    text-align: left;
    text-shadow: none;
    font-size: 16px;
}


#pvp-client .htitle-pvpsessions {
    position: absolute;
    top: 161px;
    left: 67px;
    color: rgba(255,255,255,0.2);
    text-align: left;
    text-shadow: none;
    font-size: 16px;
}

#pvp-client .configurator input {
    position: absolute;
    text-align: left;
    top: 20px;
    width: 170px;
    padding: 3px 5px;
}

#pvp-client .configurator select {
    position: absolute;
    text-align: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 3px 5px;
    width: 200px;
    top: 20px;
}

#pvp-client .configurator .stitle {
    color: rgba(255,255,255,0.2);
    text-shadow: none;
    margin-bottom: 0px;
    position: absolute;
    top: -4px;
    left: 10px;
    white-space: nowrap;
}

#pvp-client .configurator select.maxp_select {
    width: 60px;
}


#pvp-client .configurator .server {
    position: absolute;
    top: 15px;
    left: 30px;
}

#pvp-client .configurator .battle {
    position: absolute;
    top: 15px;
    left: 430px;
}

#pvp-client .configurator .max-players {
    position: absolute;
    top: 15px;
    left: 645px;
}

#pvp-client .configurator .base-select {
    position: absolute;
    top: 15px;
    left: 720px;
}


#pvp-client .configurator .name-select {
    position: absolute;
    top: 15px;
    left: 245px;
}

#pvp-client .configurator .create {
    position: absolute;
    top: 35px;
    left: 935px;
}


#pvp-client .configurator .create .create-button {
    width: 140px;
    position: absolute;
    box-sizing: border-box;
    color: black;
    left: 0px;
    top: 0px;
    height: 30px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
    text-shadow: none;
}
#pvp-client .configurator .create .create-button:after {

    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #ffbc00;
    color: black;

    clip-path: var(--clip_button);

    z-index: -1;

}


#pvp-client .configurator .create .create-button:hover {
    animation:blink 100ms linear 2 alternate;
}


#pvp-client .pvpsessions-outer {
    position: absolute;
    right: 40px;
    left: 40px;
    top: 190px;
    bottom: 200px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.8);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-client .pvpsessions {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 20px;
    bottom: 20px;
    overflow-y: scroll;

    padding: 10px 20px;
    box-sizing: border-box;

}

#pvp-client .pvpsessions .info {
    position: relative;
    color: silver;
    line-height: 30px;
    text-align: center;
    padding-top: 80px;
    text-transform: uppercase;
    text-shadow: none;
}


#pvp-client .pvpsessions .session {
    position: relative;
    height: 30px;
    color: white;
    line-height: 30px;
    cursor: pointer;
    background-color: rgba(100,100,100,0.3);
    margin-bottom: 2px;
}

#pvp-client .pvpsessions .session.unavailable {
    color: gray;
    cursor: default
}

#pvp-client .pvpsessions .session.own {
    background-color: rgb(24 42 33) !important;
}

#pvp-client .pvpsessions .session.connected {
    background-color: rgba(100,100,100,0.6);
}

#pvp-client .pvpsessions .session:not(.unavailable):hover {
    background-color: var(--hud_popiseck_gray_color);
}



#pvp-client .pvpsessions .session .stitle {
    display: block;
    position: absolute;
    top: 0px;
    left: 10px;
}

#pvp-client .pvpsessions .session .stype {
    display: block;
    position: absolute;
    top: 0px;
    left: 220px;
}

#pvp-client .pvpsessions .session .splayers {
    display: block;
    position: absolute;
    top: 0px;
    right: 90px;
}

#pvp-client .pvpsessions .session .sttl {
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
}

#pvp-client .text {
    position: absolute;

    right: 20px;
    left: 20px;
    bottom: 20px;
    box-sizing: border-box;

}

#pvp-client .text .col {
    float: left;
    position: relative;
    top: 0px;
    width: 30%;
    height: 135px;
    color: white;
    margin: 0px 1.5%;
    bottom: 20px;
    box-sizing: border-box;
}

#pvp-client .text .col .subtitle {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    font-size: 18px;
    color: #ffbc00;
    line-height: 25px;
    text-align: center;

    text-shadow: var(--shadow_textfull);
}

#pvp-client .text .col .html {
    position: absolute;
    top: 65px;
    left: 20px;
    right: 20px;
    font-size: 14px;
    color: white;

    line-height: 16px;
    line-height: 20px;
    text-shadow: var(--shadow_textfull);
    text-align: center;
}


#pvp-session {
    position: absolute;
    top: 70px;
    width: 550px;
    height: 700px;
    left: calc(50% - 275px);
    top: calc(50% - 350px);

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
    z-index: 100000000;
}

#pvp-session:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}


#pvp-session .htitle-configurator {
    position: absolute;
    top: 25px;
    right: 10px;
    left: 10px;
    color: #c3c3c3;
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
}

#pvp-session .log_div {
    position: absolute;
    top: 63px;
    right: 10px;
    left: 10px;
    text-align: center;
}

#pvp-session .log_div span {
    color: white;
    background-color: var(--hud_invalid_background);
    padding: 3px 8px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;

}

#pvp-session .configurator {
    position: absolute;
    top: 95px;
    left: 20px;
    right: 20px;
    bottom: 100px;
}


#pvp-session .configurator .content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.4);

    clip-path: var(--clip_menu_standardbox);
}

#pvp-session .configurator .content .members {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow-y: scroll;

}



#pvp-session .configurator .content .members .base {
    position: relative;
    width: auto;
    height: 100px;
    margin-bottom: 10px;
    overflow: hidden;
    margin-right: 10px;
}

#pvp-session .configurator .content .members .base:before {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(20,20,20,0.8);
    content: '';

    clip-path: var(--clip_pvp_session_spacecraft);
}

#pvp-session .configurator .content .members .base.own:before {
    background-color: rgb(24 42 33);
}




#pvp-session .configurator .content .members .base.empty:before {
    padding-top: 45px;

    content: 'FREE SLOT';
    line-height: 12px;
    color: silver;
    text-align: center;
    background-image: url(pvp_session_base_emptyslot.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 255px;
    font-size: 12px;
}



#pvp-session .configurator .content .members .base .user_box {
    position: absolute;
    top: 32px;
    left: 280px;
    right: 5px;
    height: 60px;
}

#pvp-session .configurator .content .members .base .role {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 8px;
    left: 8px;
    opacity: 0.5;
    z-index: 1;
}

#pvp-session .configurator .content .members .base .kick {
    background-image: url('ico/ban-32.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 8px;
    right: 7px;
    opacity: 0.5;
    z-index: 1;
    cursor: pointer;
}

#pvp-session .configurator .content .members .base .kick:hover {
    animation:blink 100ms linear 2 alternate;
}

#pvp-session .configurator .content .members .base .role.organiser {
    background-image: url('ico/pvp_session_user_organiser_32.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
}

#pvp-session .configurator .content .members .base .name {
    position: absolute;
    top: 8px;
    left: 280px;
    text-align: right;
    font-size: 14px;
    color: silver;
    text-transform: uppercase;
}

#pvp-session .configurator .content .members .base .image {
    position: absolute;
    top: 0px;
    left: 30px;
    width: 230px;
    bottom: 0px;
}

#pvp-session .configurator .content .members .base .image .innerimage {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#pvp-session .configurator .create {
    position: absolute;
    bottom: -75px;
    left: 0px;
    right: 0px;
    text-align: center;
}


#pvp-session .configurator .create .play-button,
#pvp-session .configurator .create .goplay-button,
#pvp-session .configurator .create .connect-button,
#pvp-session .configurator .create .leave-button {

    width: 140px;
    /* position: absolute; */
    box-sizing: border-box;
    color: black;
    /* left: calc(50% - 70px); */
    top: 0px;
    height: 30px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
    text-shadow: none;
    width: 123px;
    display: inline-block;
    margin: 5px;
    position: relative;

}
#pvp-session .configurator .create .play-button:after,
#pvp-session .configurator .create .goplay-button:after,
#pvp-session .configurator .create .connect-button:after,
#pvp-session .configurator .create .leave-button:after {
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #ffbc00;
    color: black;

    clip-path: var(--clip_button);
    cursor: pointer;
    z-index: -1;
}

#pvp-session .configurator .create .leave-button:after {
    background-color: silver;
}

#pvp-session .configurator .create .goplay-button {
    animation: highlited 1000ms linear infinite;
}



#pvp-session .configurator .create .play-button:hover,
#pvp-session .configurator .create .goplay-button:hover,
#pvp-session .configurator .create .connect-button:hover,
#pvp-session .configurator .create .leave-button:hover {
    animation:blink 100ms linear 2 alternate;
}


#pvp-joinconfig {
    position: absolute;
    top: 70px;
    width: 550px;
    height: 350px;
    left: calc(50% - 275px);
    top: calc(50% - 125px);

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
    z-index: 100000010;
}

#pvp-joinconfig:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(80,80,80);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-joinconfig .jc-title {
    position: absolute;
    top: 25px;
    right: 10px;
    left: 10px;
    color: #c3c3c3;
    text-align: center;
    font-size: 22px;
}


#pvp-joinconfig .jc-base-select {
    position: absolute;
    top: 80px;
    right: 10px;
    left: 10px;

}
#pvp-joinconfig .jc-base-select .stitle {
    position: absolute;
    top: 18px;
    right: 0px;
    left: 0px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    font-size: 12px;
}


#pvp-joinconfig .jc-base-select select {
    position: absolute;
    left: calc(50% - 100px);
    text-align: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 3px 5px;
    width: 200px;
    top: 40px;
}


#pvp-joinconfig .create {
    position: absolute;
    bottom: 90px;
    left: 0px;
    right: 0px;
}


#pvp-joinconfig .create .create-button {
    width: 140px;
    position: absolute;
    box-sizing: border-box;
    color: black;
    left: calc(50% - 70px);
    top: 0px;
    height: 30px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
    text-shadow: none;
}

#pvp-joinconfig .create .create-button:after {
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #ffbc00;
    color: black;

    clip-path: var(--clip_button);
    cursor: pointer;
    z-index: -1;
}





#pvp-joinconfig .create .create-button:hover {
    animation:blink 100ms linear 2 alternate;
}

#pvp-session .sinfo {
    position: absolute;
    bottom: -25px;
    right: 10px;
    left: 10px;
    text-align: center;
    text-transform: uppercase;
    color: silver;
    font-size: 12px;
    line-height: 15px;
}


#pvp-session .sinfo .whitelink {
    color: black;
    padding: 1px 6px;
    margin: 3px 3px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
}


#pvp-session .sinfo .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;

    clip-path: var(--clip_whitelink);
    z-index: -1;
}

#pvp-session .sinfo .whitelink:hover {
    animation: blink 100ms linear 2;
}



#pvp-results {
    position: absolute;
    top: 70px;
    left: 30px;
    right: 30px;
    bottom: 40px;

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
}

#pvp-results:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(30,30,30,0.5) 30%,rgb(30,30,30) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-results .pvpinfo {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 33%;
    color: silver;
    text-align: center;
    font-size: 14px;
}

#pvp-results .scoretable-outer {
    position: absolute;
    right: 40px;
    left: 40px;
    top: 105px;
    bottom: 40px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.8);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-results .scoretable-outer .scoretable {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 20px;
    bottom: 20px;
    overflow-y: scroll;

    padding: 10px 15px;
    box-sizing: border-box;
}

#pvp-results .scoretable-outer .scoretable .scoretab{
    color: silver;
    width: 100%;
    border-spacing: 0px 5px;
}



#pvp-results .scoretable-outer .scoretable td.info {
    text-align: center;
    background-color: rgba(100,100,100,0);
    padding: 50px 15px;
    color: silver;
    font-size: 12px;
    text-transform: uppercase;
}



#pvp-results .scoretable-outer .scoretable td.rdetail {
    width: 30px;
    padding-right: 0px;
    ;
}

#pvp-results .scoretable-outer .scoretable td.rdetail .rdetailbutton{
    width: 30px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    opacity: 0.8;
}

#pvp-results .scoretable-outer .scoretable td.rdetail .rdetailbutton:hover {
    opacity: 1;
    animation:blink 100ms linear 2 alternate;
}

#pvp-results .scoretable-outer .scoretable td {
    background-color: rgba(100,100,100,.1);
    padding:  0px 15px;
}

#pvp-results .scoretable-outer .scoretable tr.itsme td {
    background-color: rgba(24,42,33,.5);
}

#pvp-results .scoretable-outer .scoretable td.tuser {
    min-width: 250px;
}





#pvp-results .scoretable-outer .scoretable td.tdbasename {
    position: relative;
    text-align: right;
}

#pvp-results .scoretable-outer .scoretable td.tdbasename .basename {

    padding: 0px 0px 1px;

    font-size: 12px;
}

#pvp-results .scoretable-outer .scoretable td.tdbasename .destroyed {
    line-height: 17px;

    font-size: 12px;
}


#pvp-results .scoretable-outer .scoretable td.baseimage {
    width: 90px;
    height: 60px;
    position: relative;
    overflow: hidden;
}

#pvp-results .scoretable-outer .scoretable td.baseimage .imgdiv {
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}





#pvp-results .scoretable-outer .scoretable td.kills {

    font-size: 30px;
    text-align: right;
}

#pvp-results .scoretable-outer .scoretable td.score {

    font-size: 14px;
    text-align: right;

}


#pvp-results .headtitle {
    position: absolute;
    right: 10px;
    left: 10px;
    top: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 37px;
    text-align: center;
}




#pvp-results .switchers {
    position: absolute;
    top: 50px;
    left: 65px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;

}
#pvp-results .switchers li {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#pvp-results .switchers li:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#pvp-results .switchers li.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#pvp-results .switchers li.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}



#pvp-results .actions {
    position: relative;

    text-align: center;
}

#pvp-results .actions .rmorale {
    color: white;
    font-size: 12px;
    opacity: 0.2;
    display: inline-block;
}

#pvp-results .actions .rmorale.active {
    color: white;
    opacity: 1;
}



#pvp-results .actions .rbutton,
#pvp-results .actions .gbutton {
    width: 90px;
    position: relative;
    box-sizing: border-box;
    color: black;
    height: 30px;

    text-align: center;
    line-height: 30px;
    font-size: 10px;
    z-index: 1;
    text-shadow: none;
    display: inline-block;
    margin: 0px;
    overflow: hidden;
}

#pvp-results .actions .rbutton:after,
#pvp-results .actions .gbutton:after {
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #2a2a2a;
    color: black;

    clip-path: var(--clip_button);
    z-index: -1;
}

#pvp-results .actions .rbutton.active,
#pvp-results .actions .gbutton.active {
    cursor: pointer;
}

#pvp-results .actions .rbutton.active:after {
    background-color: #ffbc00;
}
#pvp-results .actions .gbutton.active:after {
    background-color: white;
}

#pvp-results .actions .rbutton.active:hover,
#pvp-results .actions .gbutton.active:hover {
    animation:blink 100ms linear 2 alternate;
}










#pvp-result {
    position: absolute;
    top: 70px;
    left: 30px;
    right: 30px;
    bottom: 40px;

    clip-path: var(--clip_standardbox);
    animation: deblur 1000ms ease-out forwards;
}

#pvp-result:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(30,30,30,0.5) 30%,rgb(30,30,30) 70%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-result .pvpinfo {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 33%;
    color: silver;
    text-align: center;
    font-size: 14px;
}

#pvp-result .actions {
    position: absolute;
    right: 40px;
    left: 40px;
    bottom: 45px;
    text-align: center;
}

#pvp-result .actions .rmorale {
    color: white;
    font-size: 22px;
    opacity: 0.5;
}

#pvp-result .actions .rmorale.active {
    color: white;
    opacity: 1;
}



#pvp-result .actions .rbutton {
    width: 140px;
    position: relative;
    box-sizing: border-box;
    color: black;
    height: 30px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
    z-index: 1;
    text-shadow: none;
    display: inline-block;
    margin: 10px 0px 0px;
}

#pvp-result .actions .rbutton:after {
    display: block;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: gray;
    color: black;

    clip-path: var(--clip_button);
    z-index: -1;
}

#pvp-result .actions .rbutton.active {
    cursor: pointer;
}

#pvp-result .actions .rbutton.active:after {
    background-color: #ffbc00;
}

#pvp-result .actions .rbutton.active:hover {
    animation:blink 100ms linear 2 alternate;
}

#pvp-result .actions .rbutton.rclose {
    cursor: pointer;
    margin: 0px 0px 20px;
}

#pvp-result .actions .rbutton.rclose:hover {
    animation:blink 100ms linear 2 alternate;
}


#pvp-result .scoretable-outer {
    position: absolute;
    right: 40px;
    left: 40px;
    top: 175px;
    bottom: 145px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.8);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#pvp-result .scoretable-outer .scoretable {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 20px;
    bottom: 20px;
    overflow-y: scroll;

    padding: 10px 15px;
    box-sizing: border-box;
}

#pvp-result .scoretable-outer .scoretable .scoretab{
    color: white;
    width: 100%;
    border-spacing: 0px 5px;
}





#pvp-result .scoretable-outer .scoretable th {

    color: rgba(255,255,255,0.2);

    padding:  5px 15px;
    text-transform: uppercase;
}

#pvp-result .scoretable-outer .scoretable th.tuser {
    text-align: left;
}

#pvp-result .scoretable-outer .scoretable th.baseimage {
    text-align: center;
}

#pvp-result .scoretable-outer .scoretable th.tdbasename {
    text-align: right;
}

#pvp-result .scoretable-outer .scoretable th.kills {
    text-align: right;
}

#pvp-result .scoretable-outer .scoretable th.score {
    text-align: right;
}


#pvp-result .scoretable-outer .scoretable td {
    background-color: rgba(100,100,100,.1);
    padding:  0px 15px;
}

#pvp-result .scoretable-outer .scoretable tr.itsme td {
    background-color: rgba(24,42,33,.5);
}

#pvp-result .scoretable-outer .scoretable td.tuser {
    width: 220px;
}





#pvp-result .scoretable-outer .scoretable td.tdbasename {
    position: relative;
    text-align: right;
}

#pvp-result .scoretable-outer .scoretable td.tdbasename .basename {

    padding: 0px 0px 1px;

    font-size: 19px;
}

#pvp-result .scoretable-outer .scoretable td.tdbasename .destroyed {
    line-height: 17px;

    font-size: 12px;
}


#pvp-result .scoretable-outer .scoretable td.baseimage {
    width: 220px;
    height: 90px;
    position: relative;
    overflow: hidden;
}

#pvp-result .scoretable-outer .scoretable td.baseimage .imgdiv {
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}





#pvp-result .scoretable-outer .scoretable td.kills {
    width: 100px;
    font-size: 30px;
    text-align: right;
}

#pvp-result .scoretable-outer .scoretable td.score {
    width: 140px;
    font-size: 22px;
    text-align: right;
    padding-right: 25px;
}


#pvp-result .gamename {
    position: absolute;
    right: 10px;
    left: 10px;
    top: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 37px;
    text-align: center;
}

#pvp-result .gamename:after {
    content: 'GAME SCORE';
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(100% + 8px);
    font-size: 12px;
}



#pvp-result .duration {
    position: absolute;
    right: 10px;
    left: 10px;
    top: 90px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    text-align: center;
}

#pvp-result .duration:before {
    content: 'DURATION:';
    display: inline-block;
    position: relative;
    font-size: 12px;
    padding-right: 5px;
}



#pvp-result .switchers {
    position: absolute;
    top: 115px;
    left: 65px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;

}
#pvp-result .switchers li {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;

    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}

#pvp-result .switchers li:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#pvp-result .switchers li.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#pvp-result .switchers li.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}


#ownshipshud-box {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 999999999999;


}


#ownshipshud-box:before {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -2;
    opacity: 0.99;
    background-image: radial-gradient(rgba(2,2,21,0) 0%, rgba(2,2,21,0.8) 100%),url(./effects/bckg_glitch.gif);
    background-position:center left;
    background-repeat:no-repeat;
    background-size: cover;

}

#zoombar {
    display: block;
    position: absolute;
    top: 1px;
    left: 0px;
    width: 10px;
    bottom: 1px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    opacity: 0.95;
}

#zoombar:hover {
    opacity: 1;
}

#zoombar .zoombarbox {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 10px;
    z-index: 1;
    border-left: 1px solid rgba(255,255,255,0.5);
}

#telo #zoombar .zoombarbox:before,
#zoombar .zoombarbox:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    height: 1px;
    right: 0px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    z-index: -1;
}

#telo.tmodule-desktop #zoombar .zoombarbox:before {
    top: 17.05%;
}

#telo.tmodule-desktop.maphud #zoombar .zoombarbox:before {
    top: 17.05%;
}

#telo.tmodule-desktop.starmaphud #zoombar .zoombarbox:before {
    top: 17.05%;
}



#telo.tmodule-desktop #zoombar .zoombarbox:after {
    top: 47.7%;
}

#telo.tmodule-desktop.maphud #zoombar .zoombarbox:after {
    top: 47.7%;
}

#telo.tmodule-desktop.starmaphud #zoombar .zoombarbox:after {
    top: 37.0%;
}


#zoombar .zoombarbox .zbar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 3px;
    background-color: rgba(255,255,255,0.2);
    border-bottom: 4px solid rgba(255,255,255,0.5);
}


#zoombar .zoombarbox .zbar .zbaricon {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;


}



#zoombar .zoombarbox .zbar .zbaricon:before {
    display: block;
    content: '';
    position: absolute;
    top: -2px;
    left: -5px;
    height: 5px;
    width: 0px;
    z-index: 1;
    transition: box-shadow 0.2s ease;
    box-shadow: 10px 0px 25px 12px rgba(0, 112, 202, .0), 2px 0px 12px 6px rgba(11, 183, 226, .0);
}


#zoombar .zoombarbox .zbar.highlight .zbaricon:before {
    box-shadow: 10px 0px 25px 12px rgba(0, 112, 202, .4), 2px 0px 12px 6px rgba(11, 183, 226, .49);
}



#telo #playing {
    position: absolute;
    top: 120px;
    right: 10px;
    width: 160px;
    bottom: 195px;
    z-index: 1;
    overflow: hidden;
}


#telo.hidesocials #playing {
    display: none;
}

#telo #playing .users {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
}

#telo #playing .users .before {
    display: block;
    color: rgb(150,150,150);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    font-size: 10px;
    padding-right: 20px;
}

#telo #playing .users .before .heatext {
    display: inline-block;
    position: relative;
}

#telo #playing .users .before .opener {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 12px;
    width: 12px;
    cursor: pointer;
}

#telo #playing .users .before .opener:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: transparent url(ico/info-window-16.png) center no-repeat;
    background-size: 10px;
    border: 1px solid white;
    border-radius: 20px;
    z-index: -1;
    opacity: 0.3;
}

#telo #playing .users .before .opener:hover {
    animation: blink 100ms linear 2 alternate;
}

#telo #uachart {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: default;
    border: none;
    border-radius: 0px;
    z-index: 1;
    width: 800px;
    height: 600px;
}

#telo #uachart canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

#telo #uachart:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(180deg, rgb(0 0 0) -15%, rgb(18 24 28/70%) 57%), url('recruit_bckgr.jpg');
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover, cover;
    background-position: bottom right, bottom, top;
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-color: #12181c;
}

#telo #playing .users .ulist {
    position: absolute;
    top: 23px;
    left: 0;
    right: 0;

    display: grid;
    grid-template-columns: repeat(4, 40px);
    grid-auto-rows: 40px;
}

#telo #playing .users .user {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
}

#telo #playing .users .user .ucname {
    display: none;
}
#telo #playing .users .user .uname {
    display: none;
}






#telo #playing .users .user .uimgd {
    position:absolute;
    width:32px;
    height: 32px;
    top: 4px;
    left: 0px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgb(150,150,150);
}


#telo #playing .users .user .uimgd .uimg {
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;

    background-color: rgb(0,0,0);
    filter: grayscale(10%);
    background-size: contain;
    background-position: center;


}



#telo #playing .users .user .ucname {
    color: rgb(150,150,150);
    font-size: 14px;

    display: block;
    text-shadow: var(--shadow_textfull);

    font-family: var(--fontFaimly_header);
}

#telo #playing .users .user.premium .ucname{
    color: #ffbc00;
}

#telo #playing .users .user.premium .uimgd{
    border-color: #9E7300;
}


#telo #playing .users .user.premium .uname {
    color: #9E7300;
}

#telo #playing .users .user .uname {
    color: rgb(80,80,80);
    font-size: 12px;

    display: block;
    text-shadow: var(--shadow_textfull);

}



#telo #playing .users .user.unactive .uimgd .uimg {
    filter: grayscale(1) brightness(1.2) contrast(0.8);
    background-color: rgb(200,200,200);
}

#telo #playing .users .user.unactive .ucname,
#telo #playing .users .user.unactive .uname,
#telo #playing .users .user.unactive .joined,
#telo #playing .users .user.unactive .active {
    color: rgb(190,190,190);
}

#bigchart {
    position: absolute;
    width: 1150px;
    height: 550px;
    z-index: 999999999;


    color: white;
}

#bigchart:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 5px;
    top: 0px;
    /* background-color: rgb(30, 30, 40); */
    clip-path: var(--clip_cstation_buybox);
    z-index: -1;
    /* background-color: var(--gitem-background); */
    clip-path: var(--clip_cstationbox);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(#2130498c 0%, rgb(13 14 18 / 0%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}

#bigchart .pricehistorygraph {
    position: absolute;
    left: 20px;
    right: 20px;
    z-index: -1;
    top: 15px;
}


#bigchart .pricehistorygraph .controls {
    bottom: -10px;
}


#hud_selectastronaut {
    position: absolute;
    width: 900px;
    height: 405px;



}
#hud_selectastronaut:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
}


#hud_selectastronaut .list {
    position: absolute;
    top: 55px;
    left: 15px;
    right: 15px;
    bottom: 15px;

}

#hud_selectastronaut .list .info {
    margin-top: 13%;
    font-size: 15px;

}

#hud_selectastronaut .list .info small {
    display: block;
    font-size: 12px;
    padding-top: 5px;

}

#hud_selectastronaut .list:before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: -10px;
    bottom: 0px;
    background-color: #292c39;
    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
    background-image: linear-gradient(180deg, #28495c 50%, rgba(0, 0, 0, 0) 90%);
}


#hud_selectastronaut .list .astronaut
{
    float: left;
    position: relative;
    width: 160px;
    text-align: center;
    height: 270px;
    margin: 0px 5px 12px 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: none;
    background-position: center bottom;
    background-size: contain;
    overflow: hidden;

}

#hud_selectastronaut .list .astronaut:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(60,60,60);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_desktop_basemodule_astronaut);
}

#hud_selectastronaut .list .astronaut.available:before{

    background-color: rgb(32 57 95);

}


#hud_selectastronaut .list .astronaut .thint  {
    display: block;
    position: absolute;
    top: 0px;
    right: calc(50% - 37px);
    width: 74px;
    text-align: center;
    animation: highlited 1000ms linear infinite;
}









#hud_selectastronaut .list .astronaut.available .thint  {
    display: block;
    position: absolute;
    top: 2px;
    left: -15px;
    width: auto;
    text-align: left;
    right: unset;
}






#hud_selectastronaut .list .astronaut .astronautface {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 230px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(1);
    /* animation: crt 5000ms linear infinite; */
    background-position: bottom center;
    background-repeat: no-repeat;

    clip-path: var(--clip_desktop_basemodule_astronaut);

}

#hud_selectastronaut .list .astronaut.available .astronautface {
    filter: brightness(1.0) grayscale(0.5);
}

#hud_selectastronaut .list .astronaut .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(117 117 117) 0%, rgba(0,0,0,0) 70%);
}

#hud_selectastronaut .list .astronaut.unavailable .astronautface:after{
    background-image: linear-gradient(0deg, rgb(21 21 21) 0%, rgb(255 255 255 / 6%) 70%);
}


#hud_selectastronaut .list .astronaut .popup_inf {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 95px;
    box-sizing: border-box;

}


#hud_selectastronaut .list .astronaut .popup_inf .reason {
    position: absolute;
    top: 150px;
    left: 5px;
    right: 0px;

}


#hud_selectastronaut .list .astronaut .popup_inf .reason span {
    font-size: 12px;
    color: var(--hud_invalid_text);
    background-color: var(--hud_invalid_background);
    padding: 6px 10px;
    display: inline-block;
    font-family: var(--fontFaimly_button);
    line-height: 15px;
    position: relative;
}

#hud_selectastronaut .list .astronaut .popup_inf .reason span:before {
    content: "";
    display: block;

    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    left: calc(50% - 5px);
    bottom: -5px;
    border-top: 5px solid var(--hud_invalid_background);
    ;

}








#hud_selectastronaut .list .astronaut.available .popup_inf,
#hud_selectastronaut .list .astronaut.unavailable .popup_inf {
    height: 135px;
}



#hud_selectastronaut .list .astronaut .popup_inf {

    color: white;
}













#hud_selectastronaut .list .astronaut .popup_inf .name {
    display: block;

    position: absolute;
    left: 0px;
    right: 0px;
    top: 10px;
    text-align: center;



}



#hud_selectastronaut .list .astronaut .popup_inf .name span {
    display: inline-block;
    font-size: 12px;
    position: relative;
    padding: 2px 6px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    color: black;
    cursor: pointer;
    z-index: 1;
}


#hud_selectastronaut .list .astronaut .popup_inf .name span:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;
    z-index: -1;

}

#hud_selectastronaut .list .astronaut .popup_inf .name span:hover {
    animation: blink 100ms linear 2 alternate;
}



#hud_selectastronaut .list .astronaut.available .popup_inf .trace,
#hud_selectastronaut .list .astronaut.unavailable .popup_inf .trace {
    position: absolute;
    top: 32px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

#hud_selectastronaut .list .astronaut.available .popup_inf .prof,
#hud_selectastronaut .list .astronaut.unavailable .popup_inf .prof {
    position: absolute;
    top: 45px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

#hud_selectastronaut .list .astronaut .popup_inf .race {

    display: none;
    font-size: 13px;

    width: 36px;
    height: 36px;
    position: absolute;
    bottom: -14px;
    left: calc(50% - 18px);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid white;
    line-height: 49px;
    color: white;
    text-shadow: var(--shadow_textfull);
    background-color: black;
}

#hud_selectastronaut .list .astronaut.unavailable .popup_inf .race{
    filter: brightness(0.3) grayscale(1);
}


#hud_selectastronaut .list .astronaut .popup_inf .values {
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    white-space: nowrap;
}





#hud_selectastronaut .list .astronaut .popup_inf .health_bar  {
    position: absolute;
    top: 30px;
    height: 7px;
    left: 6px;
    right: 6px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
}

#hud_selectastronaut .list .astronaut.available .popup_inf .health_bar,
#hud_selectastronaut .list .astronaut.unavailable .popup_inf .health_bar {
    top: 61px
}

#hud_selectastronaut .list .astronaut .popup_inf .health_bar .abar  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}


#hud_selectastronaut .list .astronaut .hover {
    display: none;
    position: absolute;
    left: 5px;
    top: calc(50% - 15px);
    right: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*#ffbc00*/
    color: white;
    background: black;
    cursor: pointer;

    font-size: 20px;
    animation: highlited 1000ms linear infinite;
    font-family: var(--fontFaimly_header);
}


#hud_selectastronaut .list .astronaut:hover .hover {
    display:block;
}

#hud_selectastronaut .list .astronaut .addtopos {
    position: absolute;
    height: 35px;
    box-sizing: border-box;
    z-index: 1000;
    font-size: 13px;
    white-space: nowrap;
    color: white;
    cursor: pointer;
    bottom: 10px;
    left: 15px;
    right: 10px;
    line-height: 35px;
    font-family: var(--fontFaimly_button);
    background-color: transparent;
}

#hud_selectastronaut .list .astronaut .addtopos:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #0000008f;
    z-index: -1;
}

#hud_selectastronaut .list .astronaut .addtopos:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image:
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, white 0%, white 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}


#hud_selectastronaut .list .astronaut .addtopos:hover:before{
    box-shadow: 0px 0px 15px #cf2525 inset;
    animation: blink 100ms linear 2 alternate;

}

#hud_selectastronaut .list .astronaut .addtopos:hover:before {
    box-shadow: 0px 0px 15px white inset;
    animation: blink 100ms linear 2 alternate;

}

#hud_selectastronaut .list .astronaut .addtopos:hover .thint {
    filter: invert(1);

}


#hud_showcrew {
    position: absolute;
    width: 800px;
    height: 405px;



}
#hud_showcrew:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 5px;
    background-color: rgb(30,30,30);

    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
}


#hud_showcrew .list {
    position: absolute;
    top: 55px;
    left: 15px;
    right: 15px;
    bottom: 15px;

}

#hud_showcrew .list .info {
    margin-top: 20%;
    font-size: 15px;

}

#hud_showcrew .list .info small {
    display: block;
    font-size: 12px;
    padding-top: 5px;

}

#hud_showcrew .list:before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: -10px;
    bottom: 0px;
    background-color: rgb(20,20,20);
    clip-path: var(--clip_desktop_basemodule);
    z-index: -1;
}

#hud_showcrew .list .slot
{
    float: left;
    position: relative;
    width: 116px;
    text-align: center;
    height: 270px;
    margin: 0px 5px 12px 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: none;
    background-position: center bottom;
    background-size: contain;
    overflow: hidden;

}

#hud_showcrew .list .slot:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(60,60,60);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    clip-path: var(--clip_desktop_basemodule_astronaut);
}

#hud_showcrew .list .slot .thint {
    display: block;
    position: absolute;
    top: 0px;
    right: calc(50% - 37px);
    width: 74px;
    text-align: center;
    animation: highlited 1000ms linear infinite;
}
#hud_showcrew .list .slot .thint:before  {
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    bottom: -20px;
    left: calc(50% - 10px);
    right: unset;
    top: unset;
}


#hud_showcrew .list .slot .astronautface {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    height: unset;
    background-size: 230px;
    box-sizing: border-box;
    filter: brightness(1.3) grayscale(1);
    /* animation: crt 5000ms linear infinite; */
    background-position: bottom center;
    background-repeat: no-repeat;

    clip-path: var(--clip_desktop_basemodule_astronaut);

}

#hud_showcrew .list .slot.occupyed .astronautface {
    background-size: 230px;
    background-position: bottom center;
}

#hud_showcrew .list .slot .astronautface:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(117 117 117) 0%, rgba(0,0,0,0) 70%);
}




#hud_showcrew .list .slot.occupyed .popup_inf {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 95px;
    box-sizing: border-box;

}




#hud_showcrew .list .slot.occupyed .addtopos {
    position: absolute;
    height: 30px;
    box-sizing: border-box;
    z-index: 1000;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    cursor: pointer;
    bottom: 10px;
    left: 15px;
    right: 10px;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    font-size: 14px;
}

#hud_showcrew .list .slot.occupyed .addtopos:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;

    clip-path: var(--clip_button);
    z-index: -1;
}

#hud_showcrew .list .slot.occupyed .addtopos:hover {
    animation:blink 100ms linear 2 alternate;
    filter: invert(1);

}

#hud_showcrew .list .slot.occupyed .addtopos:hover .thint {
    filter: invert(1);

}

#hud_showcrew .list .slot.occupyed .removefrompos {
    position: absolute;
    height: 30px;
    box-sizing: border-box;
    z-index: 1000;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    cursor: pointer;
    bottom: 10px;
    left: 15px;
    right: 10px;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    font-size: 14px;
}


#hud_showcrew .list .slot.occupyed .removefrompos:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;

    clip-path: var(--clip_button);
    z-index: -1;
}


#hud_showcrew .list .slot.occupyed .removefrompos:hover {
    animation:blink 100ms linear 2 alternate;
    filter: invert(1);

}

#hud_showcrew .list .slot.occupyed .popup_inf {

    color: white;
}


#hud_showcrew .list .slot.occupyed .popup_inf .name {
    display: block;

    position: absolute;
    left: 0px;
    right: 0px;
    top: 10px;
    text-align: center;



}

#hud_showcrew .list .slot.occupyed .popup_inf .name {
    top: 7px;
}

#hud_showcrew .list .slot.occupyed .popup_inf .name span {
    display: inline-block;
    font-size: 12px;
    position: relative;
    padding: 2px 6px;
    text-align: center;
    font-family: var(--fontFaimly_button);
    color: black;
    cursor: pointer;
    z-index: 1;
}
#hud_showcrew .list .slot.occupyed .popup_inf .name span:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;
    z-index: -1;

}
#hud_showcrew .list .slot.occupyed .popup_inf .name span:hover {
    animation: blink 100ms linear 2 alternate;
}

#hud_showcrew .list .slot.occupyed .popup_inf .trace {
    position: absolute;
    top: 32px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

#hud_showcrew .list .slot.occupyed .popup_inf .prof {
    position: absolute;
    top: 45px;
    left: 2px;
    right: 2px;
    font-size: 10px;
    text-transform: uppercase;
}



#hud_showcrew .list .slot.occupyed .popup_inf .values{
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
}


#hud_showcrew .list .slot.occupyed .popup_inf .values div {
    width: 33px;
    color: white;
    background-color: rgb(29,29,29);

}

#hud_showcrew .list .slot.occupyed.t .popup_inf .values .tactical {
    color: white;
    background-color: var(--color-t);
    background-image: none;
}
#hud_showcrew .list .slot.occupyed.e .popup_inf .values .engineer {
    color: white;
    background-color: var(--color-e);
    background-image: none;
}
#hud_showcrew .list .slot.occupyed.s .popup_inf .values .science {
    color: white;
    background-color: var(--color-s);
    background-image: none;
}

#hud_showcrew .list .slot.occupyed .popup_inf .health_bar {
    position: absolute;
    top: 61px;
    height: 7px;
    left: 6px;
    right: 6px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--hud_health_barbckg_color);
    box-sizing: border-box;
}

#hud_showcrew .list .slot.occupyed .popup_inf .health_bar .abar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

#hud_showcrew .list .slot.empty {
    cursor:pointer;

}

#hud_showcrew .list .slot.empty .emptybckg {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    bottom: 2px;
    background: rgba(0,0,0,0) url(human_white_plus_180x57.png) center no-repeat;
    background-size: contain;
    opacity: 0.5;
}

#hud_showcrew .list .slot.empty .values {
    position: absolute;
    top: 37px;
    left: 10px;
    right: 10px;
    color: white;
}

#hud_showcrew .list .slot.empty:hover{
    animation:blink 100ms linear 2 alternate;
}

#hud_showcrew .list .slot.empty .values .min
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    line-height: 120px;
    font-size: 28px;
}
#hud_showcrew .list .slot.empty .values:before
{
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    right: unset;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    transform: translateX(-50%);
}


#hud_showcrew .list .slot.empty.t .values:before{
    content: 'TACTICAL STATION';
}
#hud_showcrew .list .slot.empty.e .values:before{
    content: 'ENGENEERING STATION';
}
#hud_showcrew .list .slot.empty.s .values:before{
    content: 'SCIENCE STATION';
}


#hud_showcrew .list .slot.empty .values .min.t,
#hud_showcrew .list .slot.empty .values .min.e,
#hud_showcrew .list .slot.empty .values .min.s{
    height: 25px;
    color: rgba(255,255,255,1);
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    margin: 0px 1px;
    box-sizing: border-box;
    position: absolute;
    top: 35px;
    left: calc(50% - 30px);
    width: 60px;
}


#hud_showcrew .list .slot.empty .values .min.t{
    background-color:rgb(29 29 29);
    color: white;

    clip-path: var(--clip_t);
}
#hud_showcrew .list .slot.empty .values .min.e{
    background:rgb(29 29 29);
    color: white;

    clip-path: var(--clip_e);
}
#hud_showcrew .list .slot.empty .values .min.s{
    background:rgb(29 29 29);
    color: white;

    clip-path: var(--clip_s);
}



#hud_showcrew .list .slot.empty .values .min small
{
    display: none;
    line-height: 20px;

    font-family: var(--fontFaimly_header);
    font-size: 16px;
    margin-right: 4px;
}



#hud_showcrew .list .slot .hover {
    display: none;
    position: absolute;
    left: 5px;
    top: calc(50% - 15px);
    right: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*#ffbc00*/
    color: white;
    background: black;
    cursor: pointer;

    font-size: 20px;
    animation: highlited 1000ms linear infinite;
    font-family: var(--fontFaimly_header);
}

#hud_showcrew .list .slot:hover .hover {
    display:block;
}



#stockpileBox,
#unStockpileBox {
    position: absolute;
    width: 450px;
    height: 570px;
    top: calc(50% - 240px);
    left: calc(50% - 300px);
    z-index: 999999999;
}

#stockpileBox:before,
#unStockpileBox:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(25,25,25);
    background-image: linear-gradient(#1d3061cc 0%, rgb(2 2 21 / 0%) 100%), url(./effects/bckg_glitch.gif);
    clip-path: var(--clip_standardbox);
    z-index: -1;
}


#stockpileBox .showWindowItem,
#unStockpileBox .showWindowItem {
    top: 14px;
    right: 35px;
}

#stockpileBox .text,
#unStockpileBox .text {
    position: absolute;
    top: 65px;
    left: 40px;
    right: 40px;
    font-size: 14px;
    text-align: center;
    color: #82b8e7;
}


#stockpileBox table,
#unStockpileBox table {
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    position: absolute;
    top: 125px;
    left: 0px;
}
#stockpileBox table td,
#unStockpileBox table td {
    font-size:15px;
    color:rgba(255,255,255,1);
    padding: 5px 20px;
}

#stockpileBox table td.subinfo,
#unStockpileBox table td.subinfo {
    font-size:15px;
    color:rgba(255,255,255,1);
    padding: 5px 20px;
    text-align: center;
}

#stockpileBox table td.subinfo .subinfo,
#unStockpileBox table td.subinfo .subinfo {
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#stockpileBox table td.img,
#unStockpileBox table td.img {
    height: 156px;
    text-align: center;
    padding: 0px 0px 0px;
    position: relative;
}
#stockpileBox table td.name,
#unStockpileBox table td.name {
    text-align: center;
    font-size: 25px;
    /* color: rgb(255,215,0); */
    /* cursor: pointer; */
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    padding: 20px 20px 0px;
}
#stockpileBox table td.type,
#unStockpileBox table td.type {
    text-align:center;
    padding:5px;
}
#stockpileBox table td.price,
#unStockpileBox table td.price {
    text-align:left;
    padding-left: 30%;
}
#stockpileBox table td.qty,
#unStockpileBox table td.qty {
    text-align:left;
    padding-left: 30%;
    padding-top: 30px;
}
#stockpileBox table td.qty input,
#unStockpileBox table td.qty input {
    width: 100px;
    margin-right: 10px;
}
#stockpileBox table td.space,
#unStockpileBox table td.space {
    text-align:center;
    font-size: 13px;
    padding-top: 10px;
}
#stockpileBox table td.space .hilited,
#unStockpileBox table td.space .hilited {
    animation: highlited 1000ms linear infinite;
}
#stockpileBox table td.totalprice,
#unStockpileBox table td.totalprice {
    text-align: center;
    font-size: 30px;
    color: rgb(0,255,255);
    padding: 15px 0px 11px 0px;
    letter-spacing: 0px;
}
#stockpileBox table td.actions,
#unStockpileBox table td.actions {
    text-align:center;
    padding-top: 25px;
}
#stockpileBox table td.subactions,
#unStockpileBox table td.subactions {
    text-align:center;
    padding-top: 10px;
}
#stockpileBox table td.subactions table,
#unStockpileBox table td.subactions table {
    position: relative;
    top: unset;
    left: unset;
    width: unset;
    margin: 5px auto 0px;
}
#stockpileBox table td.subactions table td,
#unStockpileBox table td.subactions table td {
    padding: 2px 4px;
    text-align: left;
}
#stockpileBox table td.subactions table td label,
#unStockpileBox table td.subactions table td label {
    display: block;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
}
#stockpileBox table td.subactions table td span,
#unStockpileBox table td.subactions table td span {
    display: block;
    color: gray;
    font-size: 12px;
    padding-top: 4px;
    max-width: 150px;
}



#stockpileBox table td.actions button .thint ,
#unStockpileBox table td.actions button .thint  {
    top: 50%;
    left: unset;
    right: calc(100% + 5px);
    bottom: unset;
    transform: translateY(-50%);
}


.jettison {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    cursor: pointer;
}



.jettison {
    background-image: url(ico/ico_jettison_128.png);
}

.jettison .thint{
    top: -3px;
    right: calc(100% + 7px);
}

.stockpile,
.unstockpile {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;

}

.stockpile:not(.unavailable),
.unstockpile:not(.unavailable) {
    cursor: pointer;
}

.stockpile .sub,
.unstockpile .sub {
    display: none;

}
/*
.stockpile:not(.unavailable):hover,
.unstockpile:not(.unavailable):hover,
.jettison:not(.unavailable):hover{
    animation: blink 100ms linear 2 alternate;
}
*/
.stockpile:hover .sub,
.unstockpile:hover .sub {


    display: block;
    position: absolute;
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    min-width: 80px;
    font-size: 12px;
    z-index: 100;
    text-align: left;
    top: -1px;
    right: calc(50% + 17px);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}



.stockpile:hover .sub:before,
.unstockpile:hover .sub:before {
    content: "";
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid black;
    position: absolute;
    top: 3px;
    right: -12px;


}

.stockpile {
    background-image: url(ico/stockpile_in_64.png);
}

.unstockpile {
    background-image: url(ico/stockpile_un_64.png);
}

.stockpile.unavailable {
    background-image: url(ico/stockpile_ua_64.png);

}



.stockpiled-inline {
    display: inline-block;
    padding-left: 20px;
    background-position: left center;
    background-size: 14px;
    background-repeat: no-repeat;
    position:relative;

}

.stockpiled-inline:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    width: 16px;
    height: 16px;
    /*cursor: pointer;*/
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;
    background-image: url(ico/stockpile_stockpiled_64.png);
}


.stockpile-inline,
.unstockpile-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;
    margin: 2px 2px 0px;
    padding: 0px 7px;
    box-sizing: border-box;
}

.stockpile-inline:not(.unavailable),
.unstockpile-inline:not(.unavailable) {
    cursor: pointer;
}

.stockpile-inline {
    background-image: url(ico/stockpile_in_64.png);
}

.unstockpile-inline {
    background-image: url(ico/stockpile_un_64.png);
}

.stockpile-inline .sub,
.unstockpile-inline .sub {
    display: none;

}

.stockpile-inline:not(.unavailable):hover,
.unstockpile-inline:not(.unavailable):hover {
    animation: blink 100ms linear 2 alternate;
}

.stockpile-inline:hover .sub,
.unstockpile-inline:hover .sub {
    display: block;
    position: absolute;
    background-color: black;
    color: var(--hud_invalid_color);
    padding: 4px 6px;
    min-width: 80px;
    font-size: 12px;
    z-index: 100;
    text-align: left;
    top: 20px;
    right: 50%;
    transform: translateX(50%);
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}



.stockpile-inline:hover .sub:before,
.unstockpile-inline:hover .sub:before {
    content: "";
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid black;
    position: absolute;
    top: -12px;
    right: calc(50% - 6px);


}


.stockpile-inline.unavailable {
    background-image: url(ico/ico_stockpile_ua_128.png);
}

#playing .users .badges {
    padding-top: 2px;


}


.badge {
    position: relative;
    display: inline-block;
}




.badge:hover .dom_subtitle {
    display: block;
    animation: blink 100ms linear 2 alternate;
}

.badge:hover .dom_subtitle:before {
    content: "";
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: calc(50% - 10px);
    border-bottom: 10px solid rgb(8 13 37);
}


.badge .dom_subtitle {
    text-align: center;
    display: none;
    position: absolute;

    width: 140px;
    top: 25px;
    background-color: rgb(8 13 37);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 100;
    font-size: 13px;
    color: #ffbc00;

    text-transform: none;
    padding: 12px 10px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: none;
}


.badge .dom_subtitle .badge_img {

    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 80px;
    margin: 5px 0px 10px 0px;
}

.badge .dom_subtitle .badge_n {
    display: block;
    font-size: 14px;
}

.badge .dom_subtitle .badge_s {
    display: block;
    color: gray;
    padding: 5px 0px;
    font-size: 12px;
    text-transform: uppercase;
}

.badge .dom_subtitle .badge_d {
    display: block;
    color: silver;
    padding: 2px 0px 2px;
    line-height: 17px;
}





#users{

    position: absolute;
    width: 950px;
    height: 80%;
    min-height: 650px;



}

#users .title{

    right: unset;
    padding: 9px 0px 0px 10px;


}



#users:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* background-color: rgb(25,25,25); */
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 30%, rgb(0, 0, 0,0.8) 70%),url('mj_2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



#users  #users_header.header {
    position: absolute;
    top: 25px;
    left: 250px;
    padding: 0px;
    color: black;
    font-family: var(--fontFaimly_button);
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 10;
}

#users  #users_header.header span {
    padding: 3px 28px 3px 8px;
    color: black;
    background-color: white;
    margin: 0px 7px 0px 0px;
    position: relative;
}

#users  #users_header.header span:before {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    background: transparent url(ico/close-window-16.png) center no-repeat;
    filter: invert(1);
}
#users  #users_header.header span:hover:before {
    background-color: black;
    filter: invert(0);
}

#users  #users_header.header span:hover {
    animation: blink 100ms linear 2 alternate;
}

#users .content {
    position: absolute;
    top: 45px;
    right: 10px;
    width: calc( 100% - 250px );
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 20px;
    max-height: calc(100% - 60px);
    padding-right: 10px;
}


#users .content .actions {
    display: block;
    position: relative;
    text-align: center;
}

#users #users_content.content {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
}


#users #users_content.content .user{
    display: block;
    position: relative;
    /* float: left; */

    height: 200px;

    box-sizing: border-box;
    cursor: pointer;

}

#users #users_content.content .user .language{
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    background-image: url(https://account.outspacegame.com/translations/en/en.jpg);
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 7;
    width: 20px;
    height: 11px;
    opacity: 0.8;
}

#users #users_content.content .user .language.language-cs {
    background-image: url('https://account.outspacegame.com/translations/cs/cs.jpg');
}


#users #users_content.content .user .language.language-pl {
    background-image: url('https://account.outspacegame.com/translations/pl/pl.jpg');
}


#users #users_content.content .user .conviction{
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    background-size: 30px;
    background-position: bottom 10px center;
    background-repeat: no-repeat;
    z-index: -1;
}

#users #users_content.content .user .conviction.conviction-1 {
    background-image: url(logo-humanity_128.png);
}

#users #users_content.content .user .conviction.conviction-2 {
    background-image: url(logo-inquisition_128.png);
}



#users #users_content.content .user:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;
    z-index: -1;
}

#users #users_content.content .user.premium:before{
    background-color: #271d03c2;
    box-shadow: 0px 0px 15px #ab8009d6 inset;
}

#users #users_content.content .user:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#users #users_content.content .user:hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#users #users_content.content .user.premium .uimgd {
    border-color: #9E7300;
}

#users #users_content.content .user .uimgd {
    display: block;
    position: absolute;
    height: 80px;
    top: 10px;
    z-index: 2;
    left: calc(50% - 40px);
    width: 80px;
    box-sizing: border-box;
    border: 1px solid rgb(150, 150, 150);
}

#users #users_content.content .user.premium .uimgd {
    border-color: #9E7300;
    filter: drop-shadow(0px 0px 6px #9E7300);
}

#users #users_content.content .user .uimgd .uimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-color: black;
    filter: grayscale(10%);
    background-size: contain;
    box-sizing: border-box;
}




#users #users_content.content .user .name {
    position: absolute;
    box-sizing: border-box;
    top: 117px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    overflow: hidden;


}

#users #users_content.content .user .name .u_name {

    padding-top: 3px;
    display: block;
    line-height: 15px;
    font-size: 14px;
    text-transform: none;
    text-align: center;
    color: silver;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}

#users #users_content.content .user.premium .name .u_name {
    color: #ffbc00;
}

#users #users_content.content .user .name .c_name {

    padding-top: 3px;
    display: block;
    line-height: 15px;
    font-size: 12px;
    text-transform: none;
    text-align: center;
    color: silver;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}


#users #users_content.content .user.premium .name .c_name {
    color: #9E7300;
}

#users #user_content.content {
    bottom: 10px;
}



#users #user_content.content .uimgd {
    position: relative;
    width: 128px;
    height: 128px;
    /* top: 30px; */
    left: calc(50% - 64px);
    box-sizing: border-box;


    margin-top: 30px;
    margin-bottom: 20px;
}
#users #user_content.content .uimgd .uimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;



    background-size: contain;
    background-position: center;

}


#users #user_content.content .corp_name {
    color: white;
    font-size: 10px;
    display: block;
    text-shadow: var(--shadow_textfull);
    left: 30px;
    right: 30px;
    font-size: 24px;
    text-align: center;
    font-family: var(--fontFaimly_header);
}

#users #user_content.content .conviction {
    display: block;

    text-align: center;
    background-size: 33px;
    background-position: center;
    background-repeat: no-repeat;
    height: 50px;


}

#users #user_content.content .conviction.conviction-1 {
    background-image: url(logo-humanity_128.png);
}

#users #user_content.content .conviction.conviction-2 {
    background-image: url(logo-inquisition_128.png);
}


#users #user_content.content .name {
    color: white;
    font-size: 10px;
    display: block;
    text-shadow: var(--shadow_textfull);
    left: 30px;
    right: 30px;
    font-size: 40px;
    text-align: center;
    font-family: var(--fontFaimly_header);
}

#users #user_content.content .badges {
    display: block;
    margin: 20px 0px;
    text-align: center;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

#users #user_content.content .badges .sbadges {

    padding-right: 40px;

    padding-left: 40px;
}

#users #user_content.content .badges .sbadges .badge {
    margin: 5px 0px 0px;
}

#users #user_content.content .cards {
    display: block;

    position: relative;
    text-align: center;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    margin: 20px 0px;
}

#users #user_content.content .badges .stitle,
#users #user_content.content .cards .stitle,
#users #user_content.content .zones .stitle{
    position: relative;
    padding: 10px 10px 8px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    color: rgba(155,155,155);
    font-size: 12px;
    text-transform: uppercase;
    clear: both;
    border-bottom: 1px solid rgba(155,155,155);
    margin: 8px 10px;
}

#users #user_content.content .cards .card {
    display: inline-block;
    position: relative;
    width: 105px;
    height: 150px;
    box-sizing: border-box;
}

#users #user_content.content .cards .card .imgcard {
    width: 80px;
    left: calc(50% - 40px);
    top: 10px;
    position: absolute;
    transition: .08s;
    ;
}

#users #user_content.content .cards .card .qty {
    display: block;
    position: absolute;
    left: calc(50% - 17px);
    width: 34px;
    bottom: 9px;
    height: 20px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: rgb(150,150,150);
    font-size: 12px;
    line-height: 20px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.03));
    top: unset;
}

#users #user_content.content .cards .card:hover {
    padding: 0px 0px 0px;
}
#users #user_content.content .cards .card:hover .imgcard {
    width: 140px;
    left: calc(50% - 70px);
    top: -35px;
    z-index: 100;
    cursor: pointer;
}
#users #user_content.content .cards .card:hover .qty {
    opacity: 0;
}

#users #user_content.content .zones {
    display: block;

    margin: 20px 0px;
    margin-bottom: 40px;

    text-align: center;


    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;

}


#users #user_content.content .zones .zone{
    position: relative;
    height: 80px;
    margin: 0px;
    box-sizing: border-box;
    color: #b9dbff;
    cursor: pointer;
}

#users #user_content.content .zones .zone:hover:before{
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#users #user_content.content .zones .zone:before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;

    background-color: #0e1b37c4;
    box-shadow: 0px 0px 15px #3b466f inset;

    z-index: -1;
}

#users #user_content.content .zones .zone:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color2) 0%, var(--border-button-color2) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%), linear-gradient(0deg, var(--border-button-color) 0%, var(--border-button-color) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) 1px, 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 1px calc(20% - 2px), 1px calc(60% - 4px), 1px calc(20% - 2px), 36% 3px, calc(100% - 4px) 1px;
    background-position: top 1px center, top 2px left 1px, center left 1px, bottom 2px left 1px, top 2px right 1px, center right 1px, bottom 2px right 1px, bottom center, bottom 1px center;
}

#users #user_content.content .zones .zone .img{
    position: absolute;
    top: 10px;
    left: 10px;
    box-sizing: border-box;
    height: 60px;
    width: 60px;
    overflow: hidden;
    background-size: contain;
    background-color: black;
    filter: grayscale(100%) brightness(130%) contrast(110%);


}
#users #user_content.content .zones .zone .img.empty{
    background-image: url(ally-no-image.png);
    background-size: cover;



}

#users #user_content.content .zones .zone .zname {
    position: absolute;
    top: 5px;
    left: 80px;
    box-sizing: border-box;
    line-height: 28px;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: left;
    height: 28px;
    overflow: hidden;
    right: 90px;
}

#users #user_content.content .zones .zone .zrole {
    position: absolute;
    top: 25px;
    left: 80px;
    box-sizing: border-box;
    line-height: 28px;
    font-size: 12px;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: left;
    height: 28px;
    overflow: hidden;
    right: 90px;
}

#users .content .info {
    text-align: center;
    color: rgb(200,200,200);
    margin-top: 12%;
    grid-gap: initial;
    grid-column: 1 / -1;
}

#users .content .info .whitelink,
#messages .messages-context .messages-contextwritemessage .mheader .search .searchresults .info .whitelink{
    color: black;
    background-color: white;
    padding: 1px 8px;
    margin: 0px 3px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fontFaimly_button);
    text-shadow: none;

    clip-path: var(--clip_whitelink);
}

#users .content .info .whitelink:hover,
#messages .messages-context .messages-contextwritemessage .mheader .search .searchresults .info .whitelink:hover{
    animation: blink 100ms linear 2;
}

#users .search {
    position: absolute;
    top: 65px;
    left: 10px;
    width: 213px;
    height: 30px;
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;

}
#users .search input {
    z-index: 1000;
    position: absolute;
    width: 184px;
    text-transform: uppercase;
}

#users .menu {
    position:absolute;
    top:115px;
    left:15px;
    width:220px;
    bottom:0px;
}
#users .menu .filter {
    position: relative;
    display: block;
    float: left;
    height: 27px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px 10px;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}
#users .menu .filter.active {
    color: var(--hud_bookmarkcolor);
    animation: highlited 1000ms linear infinite;
}
#users .menu .filter:hover {
    border: 1px solid white;
    color: rgba(255,255,255,1);
    animation: blink 100ms linear 2 alternate;
}

#salvage{
    position: absolute;
    width: 950px;
    height: 80%;
    min-height: 650px;
}


#salvage:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* background-color: rgb(25,25,25); */
    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 30%, rgb(0, 0, 0,0.8) 70%),url(./salvages/0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#salvage .facility-personel{
    width: calc(100% - 20px);
    top: 155px;
}
#salvage .facility-personel .personels{
    display: block;
    text-align: center;
}

#salvage .facility-personel .personels .personel{
    display: inline-block;
    width: 70px;
    margin: 0px 2.5px;
}


#salvage .content {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    z-index: -1;
}

#salvage .content .info {
    margin-top: 200px;
    width: 400px;
    margin-left: 50%;
    transform: translateX(-50%);

}

#salvage .oimg {

    position: absolute;
    left: 10px;
    right: 10px;
    top: 110px;
    bottom: 170px;
    z-index: -1;
}

#salvage .oimg .uimg{

    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0.5);
}

#salvage .tcontent {
    position: absolute;
    bottom: 120px;
    left: calc(50% - 300px);
    width: 600px;
}

#salvage .timer #salvagetimervalue  {
    position: absolute;
    bottom: 60px;
    left: calc(50% - 35px);
    width: 70px;
    display: none;
}



#salvage .timer #salvagetimerrange  {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 255px);
    width: 510px;
}

#salvage .tcontent .timersubtext {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 100px);
    width: 200px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}

#salvage .tcontent .saltimertoteltext {
    position: absolute;
    bottom: -21px;
    left: calc(50% - 100px);
    width: 200px;
    color: white;
    text-align: center;
    font-size: 13px;
}

#salvage .tcontent .timerbar {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 255px);
    width: 510px;
    height: 10px;
    background-color: #353535;
    box-sizing: border-box;
}

#salvage .tcontent .timerbar .timerbarbar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0px;
    top: 0px;

}

#salvage .tcontent .timerbar .timerbarbar:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    right: -10px;

    box-sizing: border-box;
    background-color: white;
}

#salvage .tcontent .tbutton {
    position: absolute;
    height: 22px;
    font-family: var(--fontFaimly_button);
    text-align: center;
    line-height: 30px;
    padding: 0px 6px;
    bottom: 0px;
    color: white;
    cursor: pointer;
    width: 27px;
    box-sizing: border-box;
    clip-path: var(--clip_button);
}

#salvage .tcontent .tbutton.minus {
    left: 0px;
    background: rgba(255,255,255,0.9) url(./ico/minus-32.png) center no-repeat;
    background-size: 12px;
}

#salvage .tcontent .tbutton.plus {
    right: 0px;
    background: rgba(255,255,255,0.9) url(./ico/plus-32.png) center no-repeat;
    background-size: 12px;
}

#salvage .ocontent {
    position: absolute;
    top: 295px;
    bottom: 190px;
    left: calc(50% - 350px);
    width: 700px;
    overflow-y: scroll;

    overflow-x: hidden;
}

#salvage .ocontent .socontent  {
    position: absolute;

    width: 100%;


}

#salvage .ocontent .crow {
    position: relative;
    height: 40px;
}

#salvage .ocontent .crow .crtitle {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#salvage .ocontent .crow .crtitle .namelink {
    position: relative;
    color: black;
    /* background-color: white; */
    /* padding: 1px 4px; */
    /* margin: 0px 3px; */

    /* white-space: nowrap; */
    text-shadow: none;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

#salvage .ocontent .crow .crtitle .namelink:not(.unactive){
    cursor: pointer;
}

#salvage .ocontent .crow .crtitle .namelink:not(.unactive):hover{
    animation: blink 100ms linear 2;
}

#salvage .ocontent .crow .crqty {
    position: absolute;
    left: 100px;
    top: 0px;
    bottom: 0px;
    width: 230px;
    text-shadow: var(--shadow_textfull);
    color: white;
    font-size: 14px;
}

#salvage .ocontent .crow .crqty:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 88.5px;
    width: 20px;
    bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    background-image: url(ico/range_between-32.png);
}

#salvage .ocontent .crow .crqty .crmin {
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    white-space: nowrap;

}

#salvage .ocontent .crow .crqty .crmax {
    position: absolute;
    left: 115px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    white-space: nowrap;

}

#salvage .ocontent .crow .crqty .crmu {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    color: white;
    font-size: 12px;
    display: none;
}

#salvage .ocontent .crow .crpriority {
    position: absolute;
    right: 10px;
    top: 0px;
    bottom: 0px;
}

#salvage .ocontent .crow .crpriority .sbutton {
    position: absolute;
    height: 22px;
    font-family: var(--fontFaimly_button);
    text-align: center;
    line-height: 30px;
    padding: 0px 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    cursor: pointer;
    width: 27px;
    box-sizing: border-box;
    clip-path: var(--clip_button);
}

#salvage .ocontent .crow .crpriority .sbutton:not(.unactive):hover {
    animation: blink 100ms linear 2 alternate;
    background-color: white;
    color: black;
}

#salvage .ocontent .crow .crpriority .sbutton.maxpriority {
    right: 0px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_top_lined.png) center no-repeat;
    background-size: 12px;
}

#salvage .ocontent .crow .crpriority .sbutton.minpriority {
    right: 214px;
    background: rgba(255,255,255,0.9) url(./ico/arrow_bottom_lined.png) center no-repeat;
    background-size: 12px;
}

#salvage .ocontent .crow .crpriority .sbutton.plus {
    right: 30px;
    background: rgba(255,255,255,0.9) url(./ico/plus-32.png) center no-repeat;
    background-size: 12px;
}

#salvage .ocontent .crow .crpriority .sbutton.minus {
    right: 184px;
    background: rgba(255,255,255,0.9) url(./ico/minus-32.png) center no-repeat;
    background-size: 12px;
}

#salvage .ocontent .crow .crpriority .sbutton.plus.unactive,
#salvage .ocontent .crow .crpriority .sbutton.minus.unactive,
#salvage .ocontent .crow .crpriority .sbutton.maxpriority.unactive,
#salvage .ocontent .crow .crpriority .sbutton.minpriority.unactive{
    background-color: #353535;
    cursor: default;
}

#salvage .ocontent .crow .crpriority .spriority {
    position: absolute;
    right: 69px;
    height: 5px;
    width: 100px;
    background-color: #353535;
    bottom: 9px;
    border-left: 2px solid gray;
    border-right: 2px solid gray;
}

#salvage .ocontent .crow .crpriority .spriority .bar {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    bottom: 0px;
    text-align: center;
    background-color: white;
    transition: width 0.2s linear;

}

#salvage .ocontent .crow .crpriority .spriority .txt {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: calc(100% + 5px );
    text-align: center;
    font-size: 10px;
    color: white;
}



#salvage .name {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50px;
}

#salvage .name .o_name {
    font-size: 31px;
    color: #ffbc00;
    text-align: center;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}

#salvage .name .o_sname {
    font-size: 13px;
    color: white;
    padding-top: 5px;
    text-align: center;
    text-shadow: var(--shadow_textfull);
}

#salvage .actions {
    position: absolute;
    bottom: 50px;
    left: 10px;
    right: 10px;
    text-align: center;
}

.facility-personel {
    position: absolute;
    top: 70px;
    right: 10px;
    padding: 0px;
    width: calc(66.6% - 20px);
    height: 110px;
    box-sizing: border-box;
    overflow: hidden;
}



.facility-personel .owl-dots .owl-dot span {
    height: 5px;
    width: 18px;
    margin: 8px 3px 3px;
    background-color: gray;
    border: none;
}

.facility-personel .name {
    display: none;
    position: absolute;
    top: 37px;
    left: 10px;
    width: 90px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}

.facility-personel .personels{
    padding-left: 0px;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));

}
.facility-personel .personels .no-personel{
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    padding-top: 30px;
    grid-column: 1 / -1;
    color: white;

    animation:highlited 1000ms linear infinite;
}
.facility-personel .personels .personel{
    display: block;
    position: relative;
    width: auto;
    height: 110px;
    margin: 0px;
    overflow: hidden;
    color: black;
    line-height: normal;
    box-sizing: border-box;
    cursor: pointer;
}


.facility-personel .personels .personel:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 9px;
    top: 0px;
    background-color: rgb(117,117,117);

    clip-path: var(--clip_personel);
}



.facility-personel .personels .personel.rengineer:before{
    box-shadow: 0px 0px 27px var(--color-e) inset;
}





.facility-personel .personels .personel .img{
    padding: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    top: 0px;
    bottom: 9px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    clip-path: var(--clip_personel);
}

.facility-personel .personels .personel .img:after{
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(0deg, rgb(117 117 117) 0%, rgba(0,0,0,0) 70%);
}


.facility-personel .personels .personel .img .face{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 150px;
    box-sizing: border-box;
    background-position: -37px -21px;
    background-repeat: no-repeat;
    filter: brightness(1.3) grayscale(1);
}

.facility-personel .personels .personel:hover .img .face{

    filter: brightness(1.5) grayscale(1);
}

.facility-personel .personels .personel .img .aid{
    display: none;
    position: absolute;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: rgba(255,255,255,.5);
    text-align: center;
    cursor: pointer;
}


.facility-personel .personels .personel.unusable .img .face{
    filter: grayscale(1) brightness(0.4);
}

.facility-personel .personels .personel .health{
    display: block;
    position: absolute;
    bottom: 0px;
    height: 6px;
    left: 5px;
    right: 0px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
    background-color: gray;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}

.facility-personel .personels .personel .health .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--hud_health_bar_color);
}

.facility-personel .personels .personel.unusable .health .bar{
    background-color: rgb(160,160,160);
}

.facility-personel .personels .personel .name{
    display: none;
    position: absolute !important;
    top: 88px !important;
    left: 0px !important;
    right: 0px !important;
    font-family: var(--fontFaimly_button);
    font-size: 10px !important;
    color: #000000a6 !important;
    text-align: center !important;
    width: unset;

    background-color: unset;
    text-transform: unset !important;
    cursor: unset;

}

.facility-personel .personels .personel:hover .name{
    display: block;

}

.facility-personel .personels .personel .base_engeneering{
    display: block;
    background: var(--color-e);
    position: absolute;
    bottom: 22px;
    left: calc(50% - 20px);
    width: 40px;

    font-size: 12px;
    color: silver;
    text-align: center;
    line-height: 20px;
    height: 20px;

    clip-path: var(--clip_e);
    font-family: var(--fontFaimly_button);
}

.facility-personel .personels .personel.unusable .base_engeneering{
    filter: grayscale(1);
}

.facility-personel .personels .personel.unusable .name{
    color: rgb(200,200,200);
}

.facility-personel .personels .personel .subinfo{
    display: block;
    position: absolute;
    top: 10px;
    text-align: center;
    left: 0px;
    right: 0px;
    font-size: 10px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
}

.facility-personel .personels .personel .subinfo span{
    text-align: center;
    text-transform: uppercase;
    color: white;
    background-color: black;
    padding: 0px 8px 0px 8px;

    clip-path: var(--clip_personel_occupation);
    white-space: nowrap;
    display: inline-block;
}


.facility-personel .personels .personel .subinfo.station.own span,
.facility-personel .personels .personel .subinfo.ship.own span{
    color: white;
    background-color: black;
}

.facility-personel .personels .personel .subinfo.station.enemy span,
.facility-personel .personels .personel .subinfo.ship.enemy span{
    color: black;
    background-color: rgb(255,160,0);
}

.facility-personel .personels .personel .subinfo.station.npc span,
.facility-personel .personels .personel .subinfo.ship.npc span{
    color: black;
    background-color: white;

}

.facility-personel .personels .personel .subname{
    display: none;
    position: absolute;
    top: 72px;
    text-align: center;
    font-size: 9px;
    line-height: 11px;
    left: 0px;
    right: 0px;
    height: 11px;
    text-transform: uppercase;
    color: white;
    text-shadow: var(--shadow_textfull);
}

.facility-personel .personels .personel.unusable .reason{

    position: absolute;
    bottom: 35px;
    text-align: center;
    font-size: 9px;
    line-height: 11px;
    left: 0px;
    right: 0px;
    height: 11px;
    text-transform: uppercase;

    color: rgb(200,200,200);
    text-shadow: var(--shadow_textfull);
}



#card-uncast-confirm{
    position: absolute;
    width: 420px;
    height: 220px;

    z-index: 1;
}

#card-uncast-confirm:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(60,60,60);

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
}

#card-uncast-confirm .infotext{
    position: absolute;
    top: 83px;
    left: 30px;
    right: 30px;
    color: white;
    font-size: 16px;
    text-align: center;
}

#card-uncast-confirm .actions{
    position: absolute;
    top: 145px;
    left: 30px;
    right: 30px;
    text-align: center;
}

#card-uncast-confirm .image {
    right: 1px;
    left: 1px;
    bottom: 1px;
    top: 1px;
    position: absolute;
    z-index: -1;

    clip-path: var(--clip_menu_standardbox);
}

#card-uncast-confirm .image span {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-size: cover;
    background-position: center;
    animation: crt 5000ms linear infinite;
    z-index: -1;
}
#card-uncast-confirm .image span:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: -10px;
    background-image: linear-gradient(40deg, rgb(0 0 0) 0%, rgb(0 0 0 / 30%) 100%);
}


#spaceSearch {
    position: absolute;
    height: 200px;
    width: 455px;
    z-index: 1000;
    animation: blink 100ms linear 2 alternate;
}

#spaceSearch .actions {
    display: block;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;

    width: 100%;
    position: absolute;
    bottom: 28px;
}



#spaceSearch .ctrl:after{
    content: 'CLOSE';
    display: block;
    position: absolute;
    top: 0px;
    left: 100%;
    bottom: 0px;
    color: rgba(255,255,255,.8);

    font-size: 10px;
    white-space: nowrap;

    font-size: 12px;
    text-align: left;
    padding-left: 8px;
}

#spaceSearch:before {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: var(--gitem-background);
    clip-path: var(--clip_standardbox);
    z-index: -1;
    background-image: linear-gradient(rgb(16 25 48 / 80%) 0%, rgb(2 2 21 / 0%) 100%),url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
    background-size: cover;
}

#spaceSearch .search  {
    position: absolute;
    top: 50px;
    left: 30px;
    right: 30px;
    height: 34px;
    z-index: 10;
}

#spaceSearch #spaceSearch_searchbox {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: unset;
    text-align: left;
    font-size: 18px;
}

#spaceSearch .ssresults {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    width: unset;
    text-align: left;
    background-color: rgb(17,22,34);
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: calc(50vh - 50px);
}

#spaceSearch #spaceSearch_results {
    position: relative;
    text-align: left;
    background-color: rgb(17,22,34);
}

#spaceSearch #spaceSearch_results .result {
    position: relative;
    min-height: 16px;
    padding: 6px 100px 5px 38px;


    cursor: pointer;
    color: white;
    background-size: 14px;
    background-position: 11px center;
    background-repeat: no-repeat;
}

#spaceSearch #spaceSearch_results .result.station {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='12' stroke='none' fill='white' stroke-width='6' /></svg>");
    color: rgb(255,179,0);
}

#spaceSearch #spaceSearch_results .result.station.main {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><circle cx='32' cy='32' r='28' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='16' stroke='white' fill='none' stroke-width='6' /><circle cx='32' cy='32' r='6' stroke='none' fill='white' stroke-width='6' /></svg>");

}

#spaceSearch #spaceSearch_results .result.base {
    background-image: url(ico/ico_ship_16.png);
    color: rgb(255,179,0);
}

#spaceSearch #spaceSearch_results .result.planet {
    background-image: url(ico/ico_planet_16.png);
    color: rgb(255,255,255);
}

#spaceSearch #spaceSearch_results .result.asteroid {
    background-image: url(ico/ico_asteroid_32.png);
    color: rgb(255,255,255);
}

#spaceSearch #spaceSearch_results .result.star {
    background-image: url(ico/ico_star_32.png);
    color: rgb(255,255,255);
    background-size: 23px;
    background-position: 7px center;
}


#spaceSearch #spaceSearch_results .result.npc {
    color: white;
}

#spaceSearch #spaceSearch_results .result.zone {
    color: rgb(163,210,174);
}

#spaceSearch #spaceSearch_results .result.own {
    color: rgb(100,255,255);
}

#spaceSearch #spaceSearch_results .result.asteroid {
    color: rgb(255,255,255);
}

#spaceSearch #spaceSearch_results .result:hover {

    background-color: rgba(255,255,255,0.1);

}

#spaceSearch #spaceSearch_results .result .rtitle {
    position: relative;
    font-size: 14px;

}

#spaceSearch #spaceSearch_results .result .rdistance {
    position: absolute;
    right: 15px;
    top: 8px;
    white-space: nowrap;
}

#change-cssetting-confirm{
    position: absolute;
    width: 420px;
    height: 290px;

    z-index: 1;
}

#change-cssetting-confirm:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #212f53;

    clip-path: var(--clip_menu_standardbox);
    z-index: -1;
    background-size: cover;
    background-image: linear-gradient(rgb(57 79 133 / 64%) 0%, rgb(43 43 95 / 64%) 100%), url(./effects/bckg_glitch.gif);
    background-position: -10px 0px;
}

#change-cssetting-confirm .infotext{
    position: absolute;
    top: 130px;
    transform: translateY(-50%);
    left: 30px;
    right: 30px;
    color: white;
    font-size: 16px;
    text-align: center;
}

#change-cssetting-confirm .actions{
    position: absolute;
    bottom: 40px;
    left: 30px;
    right: 30px;
    text-align: center;
}

#change-cssetting-confirm .image {
    right: 1px;
    left: 1px;
    bottom: 1px;
    top: 1px;
    position: absolute;
    z-index: -1;

    clip-path: var(--clip_menu_standardbox);
}

#change-cssetting-confirm .image span {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-size: cover;
    background-position: center;
    animation: crt 5000ms linear infinite;
    z-index: -1;
}
#change-cssetting-confirm .image span:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: -10px;
    background-image: linear-gradient(40deg, rgb(0 0 0) 0%, rgb(0 0 0 / 30%) 100%);
}


.button-shrotcut {
    display: inline-block;
    position: relative;

    box-sizing: border-box;

    font-size: 12px;
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;

    margin: 0px 0px 0px 0px;

    line-height: 20px;
    white-space: nowrap;

    padding: 0px 3px;

}



.button-shrotcut .ctrl-title {
    display: inline-block;
    position: relative;
    color: #777676;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    height: 20px;
    margin: 0px;
    line-height: 20px;
    padding: 0px 5px;
    box-sizing: content-box;
    min-width: 16px;
}

.buttons-right > .sub-buttons > .button-shrotcut > .ctrl-title {
    /*display: none;*/
}

.button-shrotcut .ctrl-title img{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 12px;
    max-height: 12px;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0.5;
}

.button-shrotcut > .ctrl-key {
    display: inline-block;
    cursor: pointer;
    color: #595959;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 11px;
    font-family: var(--fontFaimly_button);
    height: 18px;
    min-width: 19px;
    margin: 0px;
    line-height: 18px;


    padding: 0px 5px;
    box-sizing: border-box;
    text-shadow: none;
    position: relative;
    background-size: 6px;
    background-position: center;
    background-repeat: no-repeat;
}

.button-shrotcut > .ctrl-key:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background-image:
        linear-gradient(0deg, var(--border-ctrlkey-color) 0%, var(--border-ctrlkey-color) 100%),
        linear-gradient(0deg, var(--border-ctrlkey-color) 0%, var(--border-ctrlkey-color) 100%),
        linear-gradient(0deg, var(--border-ctrlkey-color) 0%, var(--border-ctrlkey-color) 100%),
        linear-gradient(0deg, var(--border-ctrlkey-color) 0%, var(--border-ctrlkey-color) 100%);
    background-repeat: no-repeat;
    background-size:
        calc(100% - 4px) 1px,

        1px calc(100% - 4px),


        1px calc(100% - 4px),


        calc(100% - 4px) 1px;
    background-position:
        top 1px center,

        center left 1px,

        center right 1px,

        bottom 1px center;
}
.button-shrotcut > .ctrl-key img{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 7px;
    max-height: 7px;
    transform: translateX(-50%) translateY(-50%);
}




.controls{
    --border-ctrlkey-color:#3b3a3a;
    --fontFaimly_button:Chakra,sans-serif;
    gap:8px 10px
}
.button-shrotcut{
    font-weight:700;
    --fontFaimly_button:Chakra,sans-serif
}
.controls .button-shrotcut{
    cursor:default
}
.controls .ctrl-key{
    background-color:transparent;
    border:0;
    cursor:default
}
.button-shrotcut:hover{
    animation:shortcut-blink .1s linear 2 alternate;
    z-index:10
}
@keyframes shortcut-blink{
    to{
        opacity:.55
    }
}
@media(prefers-reduced-motion:reduce){
    .button-shrotcut:hover{
        animation:none
    }
}

/* GUNMAN reward verification form. */
#save-form { text-align:left; }
#save-form > label { display:block; margin:14px 0 7px; }
#save-form .optional { color:var(--muted); font-size:10px; }
#save-form .consent { display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.6; letter-spacing:0; text-transform:none; }
#save-form .consent input { appearance:auto; width:17px; height:17px; flex:0 0 17px; margin:2px 0 0; padding:0; accent-color:var(--accent); }
#save-form a, .verification-return { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
#save-form .save-row button { width:100%; padding:14px; }
#save-form #reward-email { text-transform:none; }
#save-form #reward-note { margin:8px 0 12px; line-height:1.6; }
#save-score[hidden] { display:none; }
.verification-page { min-height:100vh; min-height:100dvh; display:grid; place-items:center; overflow:auto; background:#03060b; padding:22px; }
.verification-dialog { padding:36px; }
.verification-return { display:inline-block; margin:14px 0; }

/* Pre-flight countdown and fixed top-down tactical radar. */
#start-countdown {
    flex-direction:column;
    justify-content:center;
    gap:12px;
    text-align:center;
    background:radial-gradient(ellipse,#030b1366,transparent 65%);
    pointer-events:auto;
}
#start-countdown .eyebrow { color:var(--accent); letter-spacing:4px; }
#countdown-number { font-size:clamp(96px,20vh,200px); font-weight:300; line-height:1; color:var(--accent); text-shadow:0 0 40px #a6f0ff88; }
#radar-panel { position:absolute; top:145px; right:30px; width:clamp(100px,17vh,184px); pointer-events:none; }
#radar-panel > .eyebrow { display:flex; justify-content:space-between; gap:8px; font-size:9px; letter-spacing:1px; }
#radar-panel > .eyebrow span { color:var(--accent); white-space:nowrap; }
#radar { display:block; width:100%; height:auto; }
.radar-legend { display:flex; justify-content:center; gap:12px; font-size:8px; letter-spacing:.7px; }
.radar-legend span::before { content:''; display:inline-block; width:4px; height:4px; background:currentColor; margin-right:5px; border-radius:50%; vertical-align:middle; }
.radar-evil { color:#ff4757; }
.radar-rocket { color:#ffdb4d; }
body[data-mode="menu"] #radar-panel, body[data-mode="loading"] #radar-panel, body[data-mode="result"] #radar-panel { display:none; }
.telemetry { top:max(45%,calc(145px + clamp(100px,17vh,184px) + 44px)); }
@media(max-width:1000px) { #radar-panel { right:18px; } }
@media(max-width:600px) { #radar-panel { top:90px; right:16px; } }

/* Language selection belongs to the pre-game menu. */
.language-picker { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:12px; font:400 13px Chakra, sans-serif; color:#b8c4d5; }
.language-picker select { font:inherit; color:#e2ebf7; background:#101925; border:1px solid #3a5068; border-radius:3px; padding:6px 10px; cursor:pointer; }
.language-picker select:focus-visible { outline:2px solid #a6f0ff; outline-offset:3px; }
html[lang="uk"] .briefing h1 { font-family:Chakra, Arial, sans-serif; font-size:clamp(42px, 5vw, 76px); }
html[lang="uk"] .button-shrotcut .ctrl-key, html[lang="pl"] .button-shrotcut .ctrl-key { font-size:11px; }