@font-face {
    font-family: 'ChakraPetchLight';
    src: url('fonts/ChakraPetch-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChakraPetchSemiBold';
    src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChakraPetchRegular';
    src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChakraPetchBold';
    src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {

    --fontFaimly_default: 'ChakraPetchRegular', sans-serif;
    --fontFaimly_text: 'ChakraPetchRegular', sans-serif;
    --fontFaimly_header: 'ChakraPetchLight', sans-serif;
    --fontFaimly_button: 'ChakraPetchBold', sans-serif;
    --fontFaimly_semi: 'ChakraPetchSemiBold', sans-serif;

    --hud_valueline_bckimg: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%);

    --hud_popiseck_gray_color: rgb(150 148 148);
    
    
    

    --hud_backgroundcolor: rgba(0,0,0,0.95);
    --hud_backgroundcolor_industry_box: rgba(0,0,0,0.95);

    --hud_valuecolor: rgb(166,240,255);
    --hud_buttonlabelcolor: rgb(166,240,255);
    --hud_bookmarkcolor: rgba(255,255,255,1);
    --hud_bookmarkbackgroundcolor: rgba(255,255,255,0.1);
    --hud_tablecolor: rgba(255,255,255,1);
    --hud_tablebackgroundcolor: rgba(0,0,0,0);
    --hud_tablevaluecolor: rgb(255,255,255);
    --hud_barvaluecolor: rgb(166,240,255);

    --hud_health_text_color: rgb(255,255,255);
    --hud_health_bar_color: rgba(255,255,255,1);
    
    --hud_health_bar_color_050: rgba(255,255,0,1);
    --hud_health_bar_color_020: rgba(255,0,0,1);
    
    --hud_health_barbckg_color: rgba(85,85,85,1);

    --hud_healthcanheal_bar_color: white;

    --hud_storage_bar_color: rgb(130, 194, 224);
    --hud_storage_text_color: rgb(130, 194, 224);
    --hud_storage_barbckg_color: rgba(57, 83, 95,1);


    --hud_fuel_bar_color: rgb(130, 194, 224);
    --hud_fuel_text_color: rgb(130, 194, 224);
    --hud_fuel_barbckg_color: rgba(57, 83, 95,1);
    
    --hud_battery_cycle_color: #b7b7b7;
    
    --hud_ammo_bar_color: rgb(152,100,17);
    --hud_ammo_text_color: rgb(220,146,28);
    --hud_ammo_barbckg_color: rgba(152,100,17,.5);
    
    

    --hud_exp_bar_color: rgb(152,100,17);
    --hud_exp_text_color: rgb(220,146,28);
    --hud_exp_text_color_negative: rgb(255,80,80);
    
    --hud_exp_barbckg_color: rgba(152,100,17,.5);

    --hud_sexp_bar_color: rgb(116,218,179);
    --hud_sexp_text_color: rgb(116,218,179);
    --hud_sexp_barbckg_color: rgb(60,106,97);

    --hud_quarters_bar_color: rgb(0,0,0);
    --hud_quarters_text_color: rgb(255,255,255);
    --hud_quarters_barbckg_color: rgba(255,255,255,.5);

    --hud_quarters_bar_color_light: rgb(255,255,255);
    --hud_quarters_text_color_light: rgb(255,255,255);
    --hud_quarters_barbckg_color_light: rgba(255,255,255,.5);

    --hud_energy_bar_color: rgb(255,255,255);
    --hud_energy_text_color: rgb(255,255,255);
    --hud_energy_barbckg_color: rgba(255,255,255,.5);

    --hud_invalid_color: #b92b00;
    --hud_invalid_background: #b92b00;
    --hud_invalid_text: #ffbda9;

    --hud_valid_color: white;
    --hud_valid_background: white;
    --hud_valid_text: black;
    
    --hud_danger_color: rgb(255,179,0);

    --hud_construction_bar_color: rgb(180,130,0);
    --hud_construction_text_color: rgb(180,130,0);
    --hud_construction_barbckg_color: rgba(180,130,0,.5);

    --shadow_textfull:  -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -1px  0px 0px #000, 1px  0px 0px #000, -1px  1px 0px #000, 0px  1px 0px #000, 1px  1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000, 1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px  0px 0px #000, 2px  1px 0px #000, 2px  2px 0px #000, 1px  2px 0px #000, 0px  2px 0px #000, -1px  2px 0px #000, -2px  2px 0px #000, -2px  1px 0px #000, -2px  0px 0px #000, -2px -1px 0px #000;
    --shadow_boxfull:  -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000, 1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000, 2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000, -1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000, -2px -1px 0px #000;
    --shadow_drpofull:
        drop-shadow(0px -1px 0px #000000b5)
        drop-shadow(-1px  0px 0px #000000b5)
        drop-shadow(1px  0px 0px #000000b5)
        drop-shadow(0px  1px 0px #000000b5);

    --border-color: rgba(255,255,255,0.05);
    --border-effect-color: rgba(255,255,255,0.3);
    --border-fleets-effect-color: #121829;
    --border-fleets-effect-color-hover: rgba(255,255,255,0.2);
    --border-fleets-effect-color-selected: rgba(255,255,255,0.8);
    --background-fleets-effect-color: #121829;
    --background-fleets-effect-color_hilight: #2e3549;
    
    --border-command-fleets-effect-color: #2f3649;
    --border-command-fleets-effect-color2: #6d86c9;
    
    --border-command-fleets-effect-color-gray: #3f3e3e8c;
    --border-command-fleets-effect-color2-gray: #c0c0c085;
    
    --border-editor-effect-color: #58668d;
    --border-editor-effect-color2: #96a3c5;
    
    --border-editor-effect-color-unavailable: #555555;
    --border-editor-effect-color-unavailable2: #555555;
    
    
    --border-itemlist-effect-color: #2f3649;
    --border-itemlist-effect-color2: #2f3649;
    
    --border-button-color: #8c98b9;
    --border-button-color2: #bbbdc3;
    
    --border-button-upgradeliq: #426232;
    --border-button-upgradeliq2: #426232;
    
    --border-button-color-unactive: #797979;
    --border-command-fleets-effect-color-hover: #62719b;
    --border-command-fleets-effect-color2-hover: #99aee8;
    --background-command-fleets-effect-color: #070b14;
    --background-command-fleets-effect-color_hilight: #00709df0;
    
    --background-command-fleets-effect-color-red: #43050487;
    
    --border-command-unavailable-effect-color: #555555;
    --border-command-unavailable-effect-color2: #555555;
    
    --border-assembly_select: #6d86c96b;
    
    --border-beltitem-color: #3b3b3b;
    --border-beltitem-color2: #3b3b3b;
    
    --border-beltitem-color-hover: #7c7c7d;
    --border-beltitem-color2-hover: #7c7c7d;
    
    --border-beltitemempty-color: #3b3b3b;
    --border-beltitemempty-color2: #3b3b3b;
    
    --border-beltitemempty-color-hover: #7c7c7d;
    --border-beltitemempty-color2-hover: #7c7c7d;
    
    --border-ability-color: #2f3649;
    --border-ability-color2: #6d86c9;
    
    --border-ability-color-hover: #62719b;
    --border-ability-color2-hover: #99aee8;
    
    --border-ability-color-disabled: silver;
    --border-ability-color2-disabled: silver;
    
    --border-ability-color-activated: #ff9100;
    --border-ability-color2-activated: #ffa800;
    
    --border-ctrlkey-color: #3b3a3a;
    
    --cross-color: #b1b1b1;
    
    --border-ability-color-prepared: rgba(11,183,226,1);
    --border-ability-color2-prepared: rgba(11,183,226,1);
    
    --border-command-fleets-effect-color-clicked: rgba(11,183,226,1);
    --border-command-fleets-effect-color2-clicked: rgba(11,183,226,1);
    
    --box-background: rgba(0,0,0,0.1);
    --box-background-unavailable: rgba(0,0,0,0.1);
    --box-backdrop-filter: none;/*blur(8px)*/
    --barbox-background: rgba(255,255,255,0.2);

    --box-topbackground: rgba(20,20,20,1);
    --border-topeffect-color: rgba(255,255,255,0.5);


    --gitem-background: rgb(16 20 26);
    --gitem-border: rgba(255,255,255,0.4);
    --gitem-corner: rgba(255,255,255,0.6);
    --gitem-site: rgba(255,255,255,0.2);

    --line-background: rgba(0,0,0,1);
    --subtext_color-background: rgb(16,15,33);
    --subtext_color: #bfbfbf;

    --hud-window-max-width: 1300px;

    --color-t: #81201e;
    --color-e: #185793;
    --color-s: #347156;
    
    
    --color-thint: rgb(255,188,0);

    --clip_t: polygon(4px 0,calc(100% - 2px) 0,calc(100% - 2px) calc(100% - 6px),calc(100%) calc(100% - 6px), calc(100%) calc(100% + 0px), calc(100% + 0px) calc(100% + 0px), 0px calc(100%), 0px 5px);
    --clip_e: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_s: polygon(0 0, calc(100%) 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --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_btn_menu: polygon(0 3px, calc(100% - 5px) 3px, 100% calc(5px + 3px), 100% 100%,  0px calc(100%));
    --clip_btn_1: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 15px 100%, 11px calc(100% + -3px), 0px calc(100% - 3px));
    --clip_btn_2: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 10px), calc(100% - 76px) calc(100% - 10px), calc(100% - 76px) 100%, calc(20px) 100%, 0 calc(100% - 20px));
    --clip_play_btn: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_login_btn: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_btn_ship: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 5px), calc(100% - 76px) calc(100% - 5px), calc(100% - 76px) 100%, calc(20px) 100%, 0 calc(100% - 20px));
    --clip_btn_ship_select: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_waitbox: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 8px), calc(100% - 70px) calc(100% - 8px), calc(100% - 70px) 100%, calc(20px) 100%, 0 calc(100% - 20px));

    --clip_dock_waitbox: polygon(0 5px, 20px 5px, 20px 0%, 100% 0, 100% 100%,   calc(20px) 100%, 0 calc(100% - 20px));



    --clip_marketing:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_win_destroyed: polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 20px), calc(100% - 20px) calc(100%),  calc(5px + 10px) 100%, calc(5px) calc(100% - 10px), 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_win_marketoffer: polygon(0 0, calc(100% - 10px) 0, 100% 10px,  calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%, calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_win_new_link: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 75% 100%, calc(75% - 3px) calc(100% - 3px), 0 calc(100% - 3px));


    --clip_zalozka: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px), 0 calc(100% - 2px));
    --clip_refinery_process: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, calc(100% - 25px - 8px) calc(100% - 8px),calc(100% - 125px) calc(100% - 8px),calc(100% - 125px) calc(100%),5px 100%, 5px calc(48% + 5px), 0 48%);
    --clip_refinery_embarkwindow: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(66% + 10px), 0 66%);

    --clip_refinery_refinebox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(66% + 10px), 0 66%);

    --clip_cstation_buybox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px) , calc(100% - 10px) 100% , 5px 100%, 5px calc(66% + 5px), 0 66%);
    --clip_itembox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px) , calc(100% - 10px) 100% , 5px 100%, 5px calc(60% + 5px), 0 60%);

    --clip_underline: polygon(0 0, 100% 0, 100% 1px, calc(50px) 1px, calc(50px - 4px) 4px, 0 4px);
    --clip_underline_right: polygon(0 0, 100% 0, 100% 4px, calc(100% - 50px) 4px, calc(100% - 50px - 4px) 1px, 0 1px);

    --clip_attribute: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_button: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_title: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_ability: polygon(0 0, calc(100%) 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));

    --clip_controller: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));


    --clip_subzalozka: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px), calc(100% - 40px) calc(100% - 2px), calc(100% - 40px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
    --clip_subzalozka_nocount: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));

    --clip_market_catalog_item: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 71px), 0 calc(100% - 71px));

    --clip_astronaut:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);

    --clip_zonemeber:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px),calc(100% - 95px) calc(100% - 10px),calc(100% - 95px) calc(100%),5px 100%, 5px calc(80px + 5px), 0 80px);

    --clip_button_right: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));
    --clip_button_left: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 11px, calc(100% ) 11px, 100% 100%, 6px 100%, 0 calc(100% - 6px));

    --clip_button_astronaut: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_window_construction:  polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 10px), calc(100% - 245px) calc(100% - 10px), calc(100% - 245px - 10px) calc(100%),10px calc(100%), 10px calc(350px + 10px), 0 350px);

    --clip_personel: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_personel_occupation: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_fleetcrew: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 3px) 100%, 3px 100%, 3px calc(46% + 3px), 0 46%);
    --clip_fleetship:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 18px), calc(100% - 70px) calc(100% - 18px),calc(100% - 70px - 18px) calc(100%),73px calc(100%), 73px calc(100% - 10px),0 calc(100% - 10px));

    --clip_dockfleetship:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%,  0 100%);
    --clip_dockfleetcrew: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);

    --clip_refinery_embark:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%,  0 100%);
    --clip_refinery_store:  polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    
    --clip_clipbox_rb:  polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    --clip_clipbox_lb:  polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    
    --clip_clipbox_corners_small:  polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
    

    --clip_hangar_crewbar: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 3px) 100%, 3px 100%, 3px calc(46% + 3px), 0 46%);

    --clip_borehole_container: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_unsupported:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 20px), calc(100% - 20px) calc(100%),  5px 100%, 5px calc(46% + 5px), 0 46%);
    
    --clip_overtake_cs:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 20px), calc(100% - 20px) calc(100%),  5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_cstationbox:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_cstationbox_bdata:  polygon(
        0 0, 
        calc(100% - 10px) 0,
        calc(100% - 00px) 10px,
        
        calc(100% - 00px) 80px,
        calc(100% - 05px) 85px,
        
        calc(100% - 05px) calc(100% - 40px),
        calc(100% - 05px) calc(100% - 35px),
        calc(100% - 05px) calc(100% - 10px), 
        
        calc(100% - 15px) calc(100%),  
        calc(5px + 10px) 100%,  
        calc(5px) calc(100% - 10px), 
        5px calc(46% + 5px), 
        0 46%
    );

    --clip_starlink:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_starlink_adbox:  polygon(0 0, calc(100%) 0, 100% calc(100% - 10px),  calc(100% - 10px) 100%,   calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_button_dailyreward: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_csbox_addmodule_controls: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);


    --clip_csbox_sp_quarters: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_st_quarters: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_sp_cargo: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_st_cargo: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_pricehistory: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 71px), 0 calc(100% - 71px));

    --clip_user_corplogo: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 21px), 0 calc(100% - 21px));


    --clip_csbox_engineering_capacity: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);
    --clip_csbox_st_energy: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);


    --clip_csbox_hangar_ship: polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100% - 0px) calc(100% - 10px),calc(100% - 155px - 16px) calc(100% - 8px),calc(100% - 170px - 13px) calc(100%),8px 100%, 8px calc(66% + 0px), 0 66%);

    --clip_csbox_hangar_assembly_hoverbox: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 2px),calc(100% - 85px) calc(100% - 2px),calc(100% - 85px) calc(100%),5px 100%, 5px calc(76% + 5px), 0 76%);
    --clip_csbox_hangar_assembly_hoverbox_button: polygon(0 0, calc(100%) 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 2px 100%, 2px calc(100% - 11px), 0 calc(100% - 11px));

    --clip_growbase_databox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);

    --clip_right_context: polygon(5px 0, calc(100%) 0, 100% 100%, calc(100%) calc(100%), calc(5px + 5px) 100%, 5px calc(100% - 5px), 5px calc(46% + 5px), 0 46%,0 115px, 5px 110px);
    --clip_combox: polygon(5px 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100%), calc(5px + 5px) 100%, 5px calc(100% - 5px), 5px calc(46% + 5px), 0 46%,0 80px, 5px 75px);

    --clip_voicedescriptor: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), 100% calc(100% - 10px), calc(100% - 10px) 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(76% + 5px), 0 76%);
    
    
    
    --clip_production_slot: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_pvp_session_spacecraft: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_selecttutorial_titem:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_standardbox:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 100px), calc(100% - 5px) calc(100% - 100px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);
    --clip_standardstatus: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_standarminiature: polygon(0 0, calc(100% - 3px - 10px) 0, calc(100% - 3px) 10px, calc(100% - 3px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 3px 100%, 3px calc(11px), 0 calc(11px));

    --clip_alerttext: polygon(0 0, calc(100% + 10px) 0, calc(100% + 10px) calc(100%), 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));

    
    
    --clip_whitelink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_controllink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_rcbutton: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100%  2px, 100% 100%,0 100%,0 0);
    --clip_checkbox: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_flashback_icon: polygon(0 0, calc(100% - 3px ) 0, calc(100% - 3px) calc(100% - 11px), 100% calc(100% - 11px), 100% calc(100%) ,  calc(3px + 10px) calc(100%), calc(3px + 10px) calc(100%), calc(3px) calc(100% - 10px), 3px calc(11px), 0 calc(11px));

    --clip_messages:  polygon(0 0, calc(100% - 10px) 0, calc(100% - 5px) 5px,  calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    
    
    --clip_qquestbox:  polygon(0 0, calc(100% - 10px) 0, calc(100% - 5px) 5px,  calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_destroyed_win:  polygon(0 0, calc(100% - 10px) 0, calc(100% - 5px) 5px,  calc(100% - 5px) calc(100% - 60px), calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_dailyreward:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);


    --clip_dailyreward_day:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_menu_premiumbox:  polygon(0 0, calc(100%) 0,  calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);

    --clip_menu_standardbox:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(46% + 5px), 0 46%);

    --clip_waitingpayment:  polygon(0 0, calc(100% - 5px) 0, 100% 5px, calc(100%) calc(100% - 10px), calc(100% - 5px) calc(100% - 10px + 5px), calc(100% - 5px) calc(100% - 5px),  calc(100% - 10px) calc(100%),  calc(5px + 5px) 100%,  calc(5px) calc(100% - 5px), 5px calc(56% + 5px), 0 56%);
    --clip_menu_funding_parms: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_zones_zone: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_menu_selectship_astronaut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_menu_newship_location:  polygon(0 0, calc(100% - 10px) 0, 100% 10px,  calc(100%) calc(100% - 60px + 5px), calc(100%) calc(100% - 10px), calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_desktop_basemodule:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_astronaut:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_astronaut_namelink: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 2px 100%, 2px 6px, 0 6px);
    --clip_desktop_basemodule_weapon:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_basemodule_attributes: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    
    --clip_desktop_ownships:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 75%), calc(100% - 5px) calc(100% - 75% + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    
    --clip_desktopaction:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);

    --clip_antenna_bdfl:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_new_satellite_borehole:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_new_satellite_borehole_item:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 25px) 100%, 5px 100%, 5px calc(46% + 5px), 0 46%);
    --clip_desktop_adtronaut_dismisshire:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_desktop_boreholescene:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);
    --clip_desktop_satellitescene:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 180px), calc(100% - 5px) calc(100% - 180px + 5px), calc(100% - 5px) calc(100% - 10px),  calc(100% - 15px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_csbox_cstationrotbox: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 5px),calc(100% - 85px) calc(100% - 5px),calc(100% - 85px) calc(100%),8px 100%, 8px calc(66% + 8px), 0 66%);
    --clip_desktop_weponfitting_weapon:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, calc(100%) calc(100% - 10px),  calc(100% - 10px) calc(100%),  calc(5px + 10px) 100%,  calc(5px) calc(100% - 10px), 5px calc(46% + 5px), 0 46%);

    --clip_cardinfo_card: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 18px - 14px),calc(100% - 14px) calc(100% - 18px), calc(100% - 65px) calc(100% - 18px), calc(100% - 65px - 14px) calc(100%), calc(65px + 14px) calc(100%), calc(65px) calc(100% - 18px), 14px calc(100% - 18px), 0 calc(100% - 18px - 14px), 0 14px);
    --animation-subtext-fadein: fadeIn 0.5s;
    --animation-subtext-fadeinSlow: fadeIn 0.9s;
    --animation-subtext-fadeinSuperSlow: fadeIn 1.2s;
    --animation-subtext-fadeinFast: fadeInSoft 0.1s;

    --scrollbar-width: 1vw; /* Výchozí šířka scrollbaru jako procento šířky viewportu */
    --highlitedPRESSEDboxShadow_color: #6a7dc7;
    --subtext_shadow_color: #ffffff00;
    /*--subtext_shadow: drop-shadow(0px 0px 20px var( --subtext_shadow_color));*/
    --subtext_shadow: unset;
    --pack_shadow_color: #333c5f5e;
    --pack_shadow_color2: #2d575345;
    
    --logo_shadow_color1: #a7cac4;
    --logo_shadow_color2: #2183f3a6;
    
    
    --upperbox_background_color: rgb(33 50 72);
    
    --firstreps-amination-mouse-lmb: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAHZ0lEQVR42u3bbYhcVxkH8GdmN02TtdWs3W0aJSUak74kgVRTutSQBFshpNEUrCARUtB+EQTT0qIVfAEFIfgGfhJlaq2hohgthoa6oekuMW53kl01s5m8bNqZdWbvzuzszuzct7n3nufvB88tEaXZSfCT/9+XmTk7sx8e/jznnnvPESEiIiIiIiIiIiIiIiIi+t8CkEnfF4vFQQCHALzsed7rExMTd4mIlMvlTXEclwHA8zyXVaObZozJLCwsrBkeHl4hIlKtVnclSTIKoNzpdI4Xi8W7REROnjy5qd1unwGATqfz9uXLl/ewenRTVPWWRqOxK5fLrRARmZycHDLGvAUgApBPkuRuEZHx8fGNruuWVRVJkriO4wydOnUqywrSzUy5g3EcH6zX632lUinTaDR2R1HUAmAAnAHwgfR7AF7Bv7wdRdGQHd/AKtKNhm+rMebzpVJplf282RgzbUM2moYLwJ0ATtlQugD2AMgC2ADgNCtJXS80AOwD8ByA1fbzAwCWACiAAoB114TvNRvKCoCt13TE0wDAilI34esFsB/AlwHcZse229AhiqIzSZKsFxFJkmQQwHHb+WoAHrVh3QzgzwCQJMkVVpWW2/UyAD4ex/F3Aay0q99PA+gAQBAE4cTExJZ8Pp8Jw3C/qv7Ddj4fwH0iIjMzM+tVdcaugpempqY+werSu4rjOA3fqqWlpRdGRka2iog0Go2dAAIACMMwKZVKD9lV8IYoipqqCmOMV6/XnxIRGR0dHfR9v2ZDqY7jfG9gYICrYLrubZYsgEwYhk+NjY2tExEpFov3dTqds3YanahUKg8ePXo04zjOriAIKgBgjLnSbrd3O46THR8fv7vdbr9qp+m5mZmZL+zYsSPD6tKypt84jtd4nneniMj58+fv8X2/CgCu67ZLpdIDIyMjmUKhsC0Mw0u2w52Pomi9iEg2m+1rNpt/UlWjqkvNZvMJVpW66YAZAKtFRKrV6oeiKBoFgDiOr1y6dGm7iIjneZt8379sw3cJwIM2vP0AXrLj80EQPMmKUrcdMGtf1xpjzgAwqrrYarV2Tk9PZ+z9v3M2ZH8DcO81v30BQAygrqqfYTXpRkO4FsAbNmQzURRttuODAN604xcBbLPjtwH4tR1vA3hSRCQIgl5VfZoVpW7CtxrA7wEkAGYA7LLjWwDkbcj+DuCjdnwVgJy9Ke0AeOeaz3Xdp1V1kVWlbgL4FTuNLgLYLCJijFkFIF0FlzzP+4jtcD2q+hsbygTAQRGRCxcuZObm5p5Lb8GwqtRNAA8DuAxgp4jI7OzsFmPMWQDwfb9eKpX29ff3Z5vN5vuiKMrZBcqiqn4u/R+VSuVLcRy3VDVutVovsarUTQB/XqvVHgaQuXr16qDneXn7JKNer9c3DQ0NZUREfN8/CiBR1dDzvEP1ej0jIpLP559X1cAG89VyufxeVpWWrVAobBcRuXjx4ocbjcabdtqdX1xcPHD69OnM9PT0mvn5+V/YgLm1Wu2rBw8eXCEi0ul0nlDVlt0b+DKAVawodWVycrIHwEAcx+mulrlOp/OQ67pZEZFms/ljVY1UNXBd9/CJEyd6bOfcazchAMBvAbxfRGRhYeFjrCp1MwX3dzqd39kgOcaYfenquFKp/NSOB+12+ztHjhzptXv9DtiFSwzgD2nnszthzrKq1E0A053MDoBP2oBlAXzTTq0ugMPFYrHXfv8xAFX7m18BWGPHtwH4K/cAUrcBBIA5ALvt5xUAnrHjMYBvA+gJwzCrqo/ZcRMEwbnh4eE0fJsAXLAn4WqsKnUTwBqAT9mudyuAb13zhONZACtERMIwPKCqVVVV3/f/ODY21m/H70+flvi+XykWi4+yqrRsjuPsuSaMz9odzgrga+lz4mKxuNd2Q3ied3ViYmKdyH+eAS4UCltzuVzm2LFjd1Qqlb2sLi2nA2bn5+f74jj+ht3nFywsLPxkeHg43SHzeJIkNQDa6XReLxaL60T++xngtWvXZqamph5ut9slAF9kdWlZ6vX6140xoaqaRqPxw1wut9LeotlpjEkXHOeudwa4XC5/0HXdK7aLMoB0fdVq9fk4jgEgieP4xXq9frs9A7wniqKlbs4ApyfhALyV7hkkeldJkgQAEmPMD0qlUp8N0w2dAbbfnwJwPytLy70GNABeBNB3s2eAjTEz1Wr1EVaVugngjwDcbt/f1Blgx3Ee2bhxY4/tiutZXVpOAFfa13ts50MQBG4+n79XRMR13TtU9YztfK30DHAYhrcA+ItdBS+kZ4AB9AD4JRchtGyqOgjgZwBGoyg6XigU3jn3EYbhM6r6hqq+Nj8//7hduLwnjuPv2+vD0dnZ2c8ODAxkW61Wr6oestv797OytNwA9thrwL5Wq/VvW6o8z1sNoC9JktWO42RtALPp91W1Lz0D3Gq1MkmS3Gr/1svKEhERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERH93/gnzKEbywzx6yYAAAAASUVORK5CYII=);
    --firstreps-amination-mouse-rmb: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAHUklEQVR42u3cXYzcVR3G8d9MW6BdQVvZUqopqdaWt5KAQmiwKY1gQgCFRExMTSBRbkxMBAJRTHxJNDEhviVeGc0iYqPRiBIIBEso3dRaumVX7WynL1uYXWc63dnZndmZ//zfz9eLnjHrhTILXHDxfO727Nm5+OXJeZtz1kxERERERERERERERERE5L0nCIIuQJqm09PT01vNzMbHxy8PguAV4LfA/eVyeX2/P1BQ1eRdc+rUqd1xHL8J0Ol0Dr388stbzczK5fLlcRw/D0xnWTZaq9V2mZnt27dv1fz8/No8zxVEeef2799frNfrO7Is6zrn6Ha700eOHNliZpZl2RXAGJDkef7GxMTEDjOzkZGRVc1mc5dz7gJVUN4RYLOZWZIkO4A3Oe9ZYL3//YeAQ0CeJEm72WzeWqlUCo1GYyhN0z39fiJvN4AHgc1AEdgNdIEc2A9c1g8pMAqQ5/kUsM3MrFKprM7z/IvAdlVS3m4A8SHsj3jbgapvf2lJCDcCJcABi8ANQAFYAzwG3KkNiixblmWnfdj+CmzzobodmPUj4fNZlq33fTclSXLI9y8B1/twXgx8FbgbWKmqysAmJyc/FcfxIoBzbmZmZmaTD9XVQM+3/yuKorvHxsYK4+Pj14ZhGPkQxnmef9b3vzBN0+8Dn/Qh1mgob214eLhYr9d/4KdWer3e7Ojo6Hozs0aj8WCe54FzjiRJWhMTE5v92u/mKIoyH8Kw2WzuNDM7cODA9sXFxSeB1UAhTVOFUN7ajTfeWJiZmflSkiTn/HngC0eOHLmiXq8XO53OrXmenwYIw7Bar9d37d27t1CtVm/KsmwcII7jo+Vy+Wozs8OHD2+MouhBoOCcK6q6MrBWq3Wfc27ROZe3Wq2/FIvFIX9Eswk4BhBF0clSqXTdgQMHCpVK5YZut9vxI2ft2LFjV5qZBUFwWZqmazUNy7KFYfgAMOen16eBdX6NdxNw0oftVBAEW83MTp48eX2apqcBkiQZrdVqH/H91zjnFEBZPufc54AGkAJPLjmyuQr4hz8PfB3YNjU1VWi32zudcwvnm/NDwAbfX1OwLCt4D4dhuNKH5wGg40fC3wEX+/brgBO+/bX++WGSJNuAGd/+aj+EIssJ4EK32314yYh3H1D3O+QRYLVv/zjwTx+2MeBa377LhzAD/gSsUVVlYP2jmHPnzj12/Pjxgm/b4wOFc+73YRiu8BuNj2VZVvEhPJrneT+c24AFP31/TVWVgbXb7aedc2mapu1qtfqVJSPjF9I0XfAbjZFWq/WBdevWFSuVyp29Xq/h14RHz5492x8JdwKngIdUVRnY9PT0+9M0fcGPduHY2NjjZmaNRqMQBMH9zrkIyHq93l4zsx07dhQajcbWOI4bAEEQjJ05c2Y9UJidnb0F+KWqKsudhlf7m9CJc64dx/F9ZmZ79uxZNTs7+/U0TbsAc3Nzv5qamlp78ODBwsLCwj1Zls0BNJvN106cOPFRM7NSqXS9KioDm5+f/4QP4QeBP/j13Sxwh5nZiy++uKLb7T7knAudc0mr1fqpmVm32y3GcXwzcM5f738JGJ6YmFihqspyRr+j/bt+fiT8s99MpMA9QPGJJ55Y2el0vgeEANVq9ef93W6e53f6XTNxHP+xf4gtMmgAAf4OXOd/Xgv8xrfXgLvMzMrl8krgIX95NQG+7S+0FoFP90MIPKuqysCCIJj1wTkObDUz27dv39owDF/3dwNxzt0VRVERWAF814+OAI8Aq3xwb+1Px6qqDKxcLt/e6/X6t6Ffi6LoGjOzw4cPr+v1es+582pRFN3jg7YKeHTJNybfAS7yI+FngFlVVd5StVq945lnnrl0ZGSkUCqVtv+Pt8IbgyA444OWlsvlO3wIi8A3/CF2Djza/9x6vb5b1ZVB1n5f7nQ6lcnJyVs2bNhQ+D9vhTfGcfwK4LIsm63Vavf6aXrN/Pz8z/I8D31wvzU3NzekywgycACBvNvtnp6env7wAG+FX/ffftQmJiZ2mpmNjIxc2Gw2f+ycy/M8jxqNxjdVWRk0gDcBbyx5Ibect8KLzWZzt38rfEmapk8BWZqm1Gq1x1VdGTSE1wCTS0P4Nt8KD+V5/iMgy7IsVGVlYLVa7bY8z2fehbfCQ8BTQK6qyiCj3yaguGXLlhX1ev22d+mt8CXAT1RdGXQT8mtghdl/3grP+1D9LYqiC3y/q4G2P5A+1O12LzUzGxsbuyoMw67vvwhc6ftfqOrKIAG8G3jVOXd/u91eOTw8XDx79uzn/RpvNE3TH9ZqtfeZmc3Nzd3rnHvJOfdqFEWP9D+jVCpdlSTJ8/5vfuGc0z8tkoEDuBIYyrLsona7XTA7/1bYOTfk13NDtVqtaGZWr9eLWZatAYaCIPivK/ftdnt1v79zTjdhRERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERETeO/4NCsIby/1giLcAAAAASUVORK5CYII=);
    --firstreps-amination-mouse-mousebody: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAGzUlEQVR42u2dXYgcVRqGnzPTMzHJ5seJmERGNEw05kejKGRBN4ngzbIXe7GMeqWIEPXOi2VZ7wVFRPA2MWgETdxAQkzAaJTArlk2y7qwKIomJKMhJpGgrpPRTqa7Xy/6K6b8Gc2keyZd1e8DDdVDz+mvz/f0V+ecqq4CY4wxxhhjjDHGGGOMMWYaSe6CyZHUA1Ti0TvFf68DNaCWUmq4Ny3gxQiXgHnAOuBO4BZgGbAUmDvF5saAL4AR4L/AIeAwMJpSknvb/KDSSVot6TlJxyXV1H5q0fZz8V497vkur4BR8ZYBTwD3RfUDEPAt8BnwMXAGOA2M5v59CHg0tl+I12XMA5YAi+N1Q8DsXH+PAq8BTwHHXRG7U74+SZsknc5VqfOS3pT0iKRlkmZNVqkkbYiqVpO04Rcqa/+YxpZHm+/Ee2SclvSYpD5npIuoq76wpto2SeMhwgVJr0taL6lykQL/qoCTSL9e0t7ce9ckbZa0wJnpjsq3RNI+SY0QYETS8MWK14qAPxLxXkmfRgyNkPJqZ6jc8i0I+TIOShq6xLYuWcBcGysihow9khY6U+Ud823NVb43JS1qob2WBYx2rpb0Vq4SbvOYsISz3ZhwZOOuf7S6u2uXgDkJs0o4HrF6jbZEAg7lZrsjkpa3oc2NEwI2NrYpxpHc7HjImSuHfD2StuRmu8NtaHOVpP2xy2xI9b2SVrah3T/lqvQWL1aXQ8A1kr6JpL4+1dnuz7Q3KOnozxzpOCrp+jaMU/dGe99IWuMMFn/s93wk9DtJd7WhvSdz63c745Edunu61bFbrBNWo73nPRYstoDzc+Oq/W2ofj2SdkV770m6Ih7vxd92tbrblFSJGXo2Xp1f5hyVfYyxDhikeWz3bymlWhvazE7LGgXG45EdI265WkWMuyLmwfgMFrCgbAhhvgXeaVdhnYG434qYe+MzWMAizn6BtfH0CHCqQAKeBI7F9toyz4bLXAErQDYrPUrz7OSiUAM+ie3r47NYwILRH2MogM+LdFp8xHoyng7GZ7GABSPlKseJAsZ/IlfJkwU0xgKaMg7UzaX3XXI/WsCZRMDZ2L4NeDy3DdTPwkn/wMgCTtvsVJK2AsPAAuCZ3ITnK+jdnNJ1FtBjwGnlMNQfAo2EeAk4DjwA/Mfd4wo47VUQ2C3pHPBG/PmRlNIB944r4ExyYZJtYwGNBTTGAhoLaIwFNJ1KtyzD3CTp921u82YmDsWtkzSn3TF3Q2JKe5qPpHnA58BvaB5C0zT0XdZ/09n+OeCalNKoK6C/bD/xvBu+zBawdV4G9hQs5j8CD1rAcvBBSml3wYYQXXFtGM+CjQU0FtAYC2gsoDEW0FhAYyygsYDGWEBjAY2xgMYCGmMBjQU0xgIaC2iMBTQWsBNpANXYHihg/Nn9jKfjF3cWcAaoAWdie7BIN/2LWJfE09MU6x4nFrDJeA2UCXgdE/d4KwK9EbMFLC7HGqCj8eQGYE6Bgp8TMQN8BNQtYMFI6SZBz/vx9CrgxgKFvzJiBng/rspqAQvIIZpXL+0D7i5Q3Osj5gvAPz1XLiiSZkv6MG7+/K6kvgLE3BexKmKfXeYclb0CVoG9sX07zStadTq3RqyA9jGxlGQKWgXXSvouKsqWTr73rqSeiFGSxqTqbc5g8QWsSNoTSf1S0uoOjnWNpK8j1n2SfBuNkkj4O0nVSOz2TkxsfFG2R4xVSRuduXJVwdciuRckDXdgjMMRmyS96upXPglvlHQqEjwiNYY6KLYbJH0asZ2RtMoZK5+ASdImSePNPNf/LjUWdUBcA5IOhny1iNFXWy2phH2SNktqRMJ3Spp7GeOZGzEoYnpJUr8zVW4Jr5R0YCLptZ1SfdFliGNA0iu5L8N+SQPOUHdIeK2kw5rg4ExeElfSUG63K0n/lnStM9NdEi6W9EauAp2ImWhlGt+zIuneeK9st3vA8nWvhAOSXozBvySdjyWQm9t5xCSOcKyIdb5sqWVc0lZJVzoT3S1hf8w8T+V2iaMhx7pWTmCISc8d0dbXufZPSXq4CCdHmJmRMElaHhWqmhPlvKRDkv4aMs6P3WiapMpVJC2M1/4l/jffXlXSjlj381ILvrvPT8ZowG+BPwP3APklmnHgLHAEOAn8n+atwACuofnDpyU0T3xdRPN8vowx4G3gWeBfKaWae9sC/pKIvcAq4H7gDzRvHDhris2cB44Bu4EdwIcppbp71wJOadcM9AMraJ6lvBpYDiyFxlLoyRaNq8AXNH9A9AnwP5pnMh8BqmU+pd4CXpbqqAqM90F/1n8Nmr9cq7nKGWOMMcYYY4wxxhhjjDEdxPfGupQpVf2YtwAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-arrows-lr: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAIyElEQVR42u3bfWwbZx0H8Od8rl/yUqdhTdIqHW2iRmyIAIJtvAwxxipQKybeURT+odOAgoqAgrp13R+dhDRpEWxCoLUaEevUgBTRSrSqqlZttYFaaEFLmzbJkjhJY8dOYp/P9r3fPc9z/IEdriZpkxLSa/P9SJYc52Tfc883v3uex08IAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYKWfPng1fuHChBlfCX44fPx6+fPny/d0vxWLxW5TSNKVUSSQS70e3+0NnZ6do2/YoY0zTNO2506dPB++rBiaTyQbLsnpdj2KxuANd7w/9/f1N3r6xbftSJpN5+L5oXD6f/walNONWKBaL30TX+0M8Hm+t7B/GmKWq6nMHDx4M3JONGhkZecA0zT9WNMosP8/n8x3oen8YHh5um6+PStXwb9PT0x+4pxoky/LTlNJ0uRGcc6qq6suKojzrqYAIoE9MTEzMBdCyrNcKhcKzlNKiJ5Saoig/OXfunL+r4djYWJ1pmm96/4IcxxnIZrOPEkKIoigd5ddVVUUAfWJqamougIZhdBFCSDqdftCyrDMV1fDtmZmZVl82IpfLfZFSmvRWPV3Xu/r6+qKe8WCHp6EIoE9ks9m5AOq63lV+vbW1VVAUZRdjTPVUQ0VRlB/s3bvXH9VweHi41jCMQ5xz7ql6I5IkfWaeW3OH5xgE0CdUVZ0LoKZpXZW/T6VSrZZlveOthpZlnUmlUnd3KU2W5c85jjPuqXrcMIzfxOPxmgWO7/AciwD6BGPslgEkhJATJ06IqqruYYwZ5WMppYVisbizpaVFWNETHhoaqjYM4zXOOfNUtElZlp+6TWA7PH9ECKBPuK572wCWzczMPGTb9t+91dA0zRPJZHLjnX7+kla9JUl6fO3atd3BYHBr+TXTNN9Mp9M/bmlpyS/2fSilnbquf8x1XUIIIaIo0lAoZDLGCOecuK479+Cck2AwaHPOLdd1JVVV/9rY2DiK6Nx0m2yora39vCiKjaIohh3HiQqCQAKBABEEgZSfBwIBwhhb4zhOmBBCBEEgtm2vC4VCi/qcxsbGwYsXLz7e3t7+fDQafUEQhFA4HN7R1NR0rVAo7I7FYkf+Lw3s6+uL6LrexTmnnhKczufzTy/hlt3hLoPSBOfg1atXo4geIYqi/Jwxpi3Htb1dBayYvHzEcZyrFdXwaDqdbljWBkqS9Iht24MVH9Q7Pj7+wBLHjMsSQG/p379/v7Caw6eq6kvLeU2XEsBSYQrpuv6ydzhGKc0UCoWvL/Y9FuzA3t7e4Pbt21+MRqP7BEEIEkII51xWVfWOSq0sy7V1dXUbEolEjeu6QvkWIAj/PoXKW0X5IYoiCQaDRBRFwjn/YDgc/qUoiu8jhBBN075dU1NzZDWGL5vNPlxfX98vCEKAc04ty3oxEAicYYwRSilhjJHykKb8KA9rSmO/ueeEELJhwwbNcRypuro6cwfLcJ+qra09HAwGy+uErmVZPZOTk7vb2trkJTcumUw227b9j3mm3s0+uPCPlJd9TNM8t1qrn67rr5T7RlGU793t8+nv76/Wdf2gNzOU0kQ2m/3Ekt/MsqzXPWMuN5/P/6y1tdU3tzvbtq+UFkbfW60BpJT2lDrZPXr06Bq/nJckSTu8Y1LHcS7f6vjAAh0cn7tHCwKpqqrqvHTpki+26PT09IiCIDSU1rDsVRxAmxBCAoEAaW9vb/LDOSUSiYbq6urvBgKBKs95xpf8RuvWrRMURdntTTJjzFBV9aeHDh0S72Yji8XiHs9E5M3VGkBN037kuQ5vHT58+K72Sy6X+zKldNZz52S6rr965cqV6B1NQkoLj211dXWHQ6HQY+XXHMc5l81mn9m4cePEUk5wenr6o7FYrLNy0uF9Xp6EmKZZ5bruTRe09Pst4XB4W2kQTSVJenT9+vXvrsYADg4O1m3duvU9URQbSnetPs75Je/EoiwajSoLTUK8PxuG8XZ9ff3xpZzH8PBw7aZNm16NRCLfKeeJUjqhKMoz9fX1//sY/eTJk6Kqqvs456anGhYKhcLO5ubmRY8Ll3MZhnPOFEXZtdrXAGVZ/qx3s8BKL8PIsvyE4zgTFV/HvhGPx9cue2NnZ2c/7DjOPyvW4v6cTCabViqAnHNu2/Y7+Xz+SQLlu9RDtm3/iTFmrVQABwYGqnRd/1XF+t9UPp/fvtTzX/RXcQ0NDVcGBgY+uXnz5hcikcg+QRCC4XD4S6WvYXbFYrHexb4XY2yPqqonbjHAnrs1UEqJaZrEdV0aj8ez27ZtKyJ2/9HY2DhICPnasWPHou3t7Q2EkHAkEiHer9fWrFl4khyJRLaEw+FTS1gGeywWi/0+GAzO7ZQ2TfOIJEm7m5ub5RVpdC6X+7ht2wPevx7DMP4wOTlZv8gKiM0IPrHYzQjnz58PaZr2C86546l6s/l8/qt35cRHR0cjmqa9Mk8Z3nG7ADLGEECfsG37tgHMZDIfsm373YqCc3RqaqrhrjdAkqRPO44z7B2qGYbxxujoaK33OO+OaMuyEECfKBQKCwawu7tb1DTtee/4kjEmFQqFTl81Ynx8PKrr+q8rdkZP5HK5J+cLoK7rCKB/JjHzbsmfnZ1tsyzrv/b+TU9Pb/BtYyRJeqJyl7Smab8dGhqqUlUV/5TkQ4lEos0TsK4DBw4IiqLctPuZMZYvFAo774kGXb9+vcYwjNe91ZBSGtc07Xf4t0z/GRsb8wbwpG3bf6moeqenp6eb77mG5XK5L1BKJ+dbb5JlGQH0iaGhobb5+ogxpiqK8v1QKHTv7rkcGRmpMwyj21sNS4Pdr6Dr/eHGjRsPVobPsqzzqVRqy/0009rurYaSJD2FrveHU6dOrSvXB8aYoqrqD3t6eu6/neapVCpmGEaXaZrd165di6Dr/UPTtJdM0+zOZDJbcDUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGD1+BeT95KSnUmh0wAAAABJRU5ErkJggg==);
    --firstreps-amination-station: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAOHUlEQVR42u2de7RVVRXGf+dyuSAJEc+I5GqJokVlohhdIXRCSFqY5iusAVkKlaKZSpENH6WpqKWlaWkoaZSmhJrCVAsQH/iKTFEUJUQB5aGi3OByT3+sbw9WZxzUylEHnd8YDs7ZZ6+19z3r2/PxzbmOEAj8H1H6dwe4eyNwDHAw0E2H1wNTgLPM7OX4WgNvOQHdvRPwB2Dw64wrAw8Dx5rZ3Ph6A2+EujdJvi8Dq4C9RbKXgFeBRcA6oCUj9EeAo929Kb7ewH9tAd39POAE4AVgNbAEeAhoBB4D+gK7iISLgC8CrcBNwBgzWxtfc+A/IqC7DwRmA8+JXCcB7wEWi2j3AweKiG1kDXcWYVuBW4Ezzeye+KoD1VD/Bp+fAjwD/Ai408yelmt9CbhYCcdMkbUJmCiiTgdGAZ8GFgBBwMCbt4DufhawJzAVeAD4KDADeM3MNrj7CDO7tcq4JmAoMBboo3hxA/AdM7twC9c6H/i43j4JnGFmS2Jp3qEEdPehwO3KZr9RyCxm9lDFeQ1mtqHK+Klyz0uB9+vwA2a2hz5vBL4H7CtX3qRkqB74hwh/BHCMmU2MJXrnEfAuYHfFdG2AaWZ2eKWlqyazuPulwNeAZcD5JL3wg8BGYBjwWeB4kW0tcJss5QagPzAHGA601TnPA4eEpPMOkWHc/TPAbsB9IkAJ2N/dJ1SMW1iFfIcCR+vt7YABl4jE7YEbgBOVSa8HPgwMAP4uwtcB+wAvZg9GL2COu98QS/UOIKAs0nNAV1mla0WIORXnDXX3hioJC8Cjct13AD/IPu+oBGUKsBdwsazhr+SS20jKeVL3kcs3o9x9WizX2z8LngB8QK+vUSZ7g5k9kFm6k4BvA1e4+yIR6IskAfopYLyZrXP354E1QAcNbQHmAhcB9WZ2YDbnABFvN+BUZc/rlNB012mHuPtiM5uoZGcAMETWeMWWkpzAVhIDalFvE2FeVILwIbnPXcxskc47GzhAFq0H0E5TlIFJZvbDbM5ngd562wrcBZyU64Ka72Tgl2Z2VHa8EfgmcBTw7myOapa7wHLg5nyewNbjgh9WfPYccIKZDQS+os/OESnGkpoQFstCXqbzAe4Ffp0RaCTwJ2W2rbrWTsBMd++QXXdb4Nl8LICkGNfDsDG733+QdMhnlKQ8BjTrAXgv8BVPaIzl3boIOEoWajSpzIaZTQOeBka4+1HA5cD2wP7At4DxwPuUSIwv9Dst/o+BT8lCFtfpIaIckV23BehhZndWub95iidbKu75FOAKxZPT5Npn6D5uJDVMTHf3YbHEWw8BxwHzteCeHf+5SDNZScMvFMc9nrnFayp0wl5KQn5RkUw0A53kcnH33sqc76rIqBvcfTzwZ+AwkWuTPm6nEODHZjbRzE4zs2G6519JwpmkWHaaux8ey1zjBJTFWgs8CPwReCI753eyLJ2AC2W99gd2Fflm54Kxu9cDnyC1bu2pcQVe05hJWRJUlvvO8SDwE2Xf18uqPZN9PrzyDzGzi8zs+wol+gF3K579qSSiQA1bwDoRZR9ll4eoIlLEYjcCVwErZMV6K4F52cyGVszZkyQ4L1SMWFjBxcAsoJ9cOyJ0idTgUBD4t5rjBSUh58rFbpu54lZlwFQh4iTd3xCSIN6piGEDtSvDfFILtRepfLYYGO7u/UWmznJtPZWotCX1A44TaY4hNSJ0kjvtL9I+Kmnna5rjdI0t0FVZ9qGqPz8t6WY2sIOSikZZtHmkzpvigRkk10yF+74bGKhrz9TY/dz9ajM7Mpa8Ni3gALnMjiSBeBqwHfAdUs12d+l8JZGmFZhnZr/L4sc+ItlI4GVSn+BBis2K+G0MUCc3DanJoaxxj+m8LsDn5OKnK5a8hdT+vz67772qkO8sHX9JichSufdNwGh3PzOWvAZ1QHefKQ3wk1rA4bJ2i4HPi4jbApXVjzJJMO6o16Xs+EZZoY9ln33BzK5z976kSstcWblNmttJNeOyYtGXgf2AO/UQ9M4eml+S6s1/lP73qrLu+4DPmtlKd99DJO6lMS+aWfdY9tqzgDsDOyrGOh54wsxuN7OnzWwyqV3qFjbXcouM9n5pcS2ZlSuIvUnkKwhZVpaNyDdY7v5Ckbgk1/lkkUmrCeI4Wd+ppAbXTcBf5OoH630PkW8NMNjMVioenE+qSxc6YrfYKlCbBHS52r8B06u1WQGfkas9XIS7w8z2lMv9oazl30W0FmCbCkKWgBnu/ifgakk5haxSVC46KeYrAbu5+7FmNkWSzzdkmdvIdV8G/Ezue3uSYD2yyr3fJOtYVFEslr32CLi9iNBkZs0VcVUXSTF1snjzlCTs5+6jlWR8U66uRBKJr1e8tlKELKzgdspO92Zzee3rGlMQpG12/gXuXgZGiHi5lZ2v+K5BFm64md2bxZcFbgNeyf7WPWLZa9MFNwCPV+ly+ZJc8E3AWDNbR+peKQMXiBzLRNJrZEWbZAE3ZBbwXpGvcON3iqSrFd+VqsSnddnrNpJmCqIOVLzaQBKrB8nttlTM8+4K4tbHstceAefIgrWQxOPC+u0rDW0ZMK5cLje7e52ZzVNM1pXUcNpV5w2Ta7xZbq9ndq1rzGyBmU02s64i1AzgWFLF41Ldx6u6j8rddO2U7NRlWmCLLGh/oOOsWbPqquiCSxQzzhbZH41lrz0dsLdkjj6K5wpcJ+sx3syeFykbSVszh0ru6CyidVfWuo3iuFeU4SLLtTdwkbv30PGBsqA3Sy45jtSOtV4xYqE5DpGL7ZJJQEUL/xpSg8MoYHmpVDrF3a8nleSW6to7ZTFoF1L9OFBjFvBeJQBLFNMVbVKdgQvM7OYKi1K4xfayQnVKAlpJ3Sr9M/dbWKvfaPxKZbXtRL7tSbvmxgG/lysfTBKd9xdp6qUTrtV1X8ru4ThS3bdJ7nYMcCYwVffal9SV01dhw3ti2WuPgDMVB5aB3u7+ddIe4HuAs0XIJnc/y92nqsvkZLnmpzTHBNKG9bbS5vroeItI9Eh23bFAs/Z61CmrnS6t8WeyoIW8Ml73MVsWELnrR0i15YtJteO/ivStuv5vsySkIN5KZeqBGnPB87XgL5DE6OF6fzBwnLsvkzY4sSJDvpUkUu8sd7q3dLdDpRO2l064SpaxQGe5T8zsYQnG3TJ98FpSL2KJtK9kHpsF7bVKfE5X0rODLOAd0jA7mFleovuqCNlWf9O6WPYaI6CZrXX3h0jlr+4K9i83s2XAGRnheprZiswdrwZOdPfDSH2Bk2VxxmjBX5Fluqpir+8O/Ot+kb8qOdgOWGtmX3X3KXKdHUkt+kXnzG1mdoTup5cs9LHAjPze9Hl7vRwtMs+vPCdQGy640N2KFvyLzezoKuc3bGGeU7XAnUj136IU1wpsyLpfcPchiv8WZERulpveqIcAuefrSB04uRxzTjbuJ9IQzy3GVZFgJgBFE8JjseQ1SECVp0xWaw1VWp0kSK/ZwjzH698mWaoGudMZ+eYjoa+u83jF8bFyze11vU7SFOdlBFwNrKpo6Z+uJOrqzOIVOIDU7l/sWwnrV2sElKxycnasJ/CUOpL/5VyJ0NVwtf5tKyu4XolNNdF3mDTASr3uKZHvfe5+hOLSgaRmiMKiLlQG3L0iKz9aMebC7IEZBRzC5l1+62LnXG1awF30eiOp4QAd6+fuZ2QL/WK1CfRrCN9VAlPO5JkRQEd3H1wxZKQSlGMkdOc4Q674ZElCn2DzRvUNpGrHoMrfjtH7s4E+7n6FtMZPyyJDErcvi+WuPRTtWI1KCpbLamwn1zdfbmsOqdV9RzN7WGMOlotrlozyUVm8Vcpo28gS3gqMM7MVKvO9Smrj39fdtyX9GNHxmnOGMvAbSRWWfsC7SJWSAXpg1phZ7y08DKcpK39W99KFJIzP1y6/QC0SsGIRv0Wq13aVS1uuWKyZJBSfKnL1UlC/nlRt6E9qQhibWcKNIuRcUpvVCmXKXzazqdk1G+Vqz5GLXaesehObW7jas7mRYL8t/DrXBMlBZd3XNiL87mb2RCx3bWfBhTubDFxJqrGeSxKSDyC11U+RTjdXhLmH1L28nFSam0TqmCk0xfNIFZAP6/wLdM0TMtLsRqp6dBf5Wkgi9iMi3ywzG6zWryKJ6FeFfPsq3lso8ncglQYPCvJtRRYws0gtZrZMWlsrqd56k4jVU1bvGVLt+EjSz228prGnkwTkg4DTSF3NU2SRXiNtZn+IJGD3UCa7QDFgM2n/cS+Nu4TNO+tmkLYLdAYazWy1Nk+N0TkdReTivxJwZfxSwlZGwAoyNuhHKeuB9vrdl+GkklY9SUDukGfI7n4kqWF1mbvvamaPqq8PUsPBSFmoB/V+tEh4vxKhjrKKe4ps9XLLdZKL2sm9PyJrO0fyTrMs8Ymkct3rxoyBrYCAVQjZDehmZgvf4LxeRQeN3rcodjzIzH5fWFozW+Lut4jQlwOLiv/XiLuPMbMr9XooqZ57oIh7Dmkn3n2k8tylspBTzWyp4sF9FL9ea2YLYrnfBgT8T+HuG2WR/iLL1loulymVSruS2vm7v95P87p7fd5s6u6rlCEbsLTaWHcfQWpi6PNGD0zg7U/AVl3vz2b2qbdgviGkWvHdZjYolnLrxP+yPX08qXX+1LeAfHWKHQ8julsC/wZxBr2Fcw2ObzTwZskSG4ECgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFA4O2AfwKGO++4x83VUAAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-mousebody-right: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAGzUlEQVR42u2dXYhUZRjHf+/u7JaaH61RGkbFmpZaFgUGlRp0E110EVtdFRH0cddFRN0HRUTQrSZ9QJ+CYgpZFkJlZFQQRVGKbolfIX1tW6M7M/8u5jnsKdpyZ2Z35sz+fzBwZpl95pl9fvuc933PmXPAGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjikryn6DYSOoBSvHoneSvV4EKUEkp1SygOR3hEjAXWANcB1wBXAwsBuZMMtwo8CMwDHwO7AH2AiMpJfmvbf7W6SStlPSMpIOSKmo9lYj9TLxXjzugxUvR4R4D7ojuByDgD+AH4FvgOHAMGMn9+iDwQGw/F6/LmAssAs6L1w0Cs3JOjACvA08AB90RZ6Z8fZLuk3Qs16VOSnpb0v2SLpZ0xkSdStK66GoVSev+o7P2j2p0acR8L94j45ikByX1uSIziKqqCyqqvChpLEQ4JelNSWsllU5T4P8VcALp10rannvviqQNkua7MjOj8y2StENSLQQYljR0uuI1I+A/RLxd0veRQy2kPNcV6m755od8GbslDTYYq2EBczGWRw4Z2yQtcKW6d8y3Kdf53pa0sIl4TQsYcc6V9E6uE77oMWEXznZjwpGNuz5odnfXKgFzEmadcCxy9SpKFwk4mJvtDkta2oKY68cFrK1vUY7DudnxoCvXHfL1SNqYm+0OtSDmCkk7Y5dZk6rbJV3Wgri35br0xulYrDZTL+AqSb9FUd+c7Gz3X+ItkbT/X4507Jd0UQvGqdsj3m+SVrmCxR/7PRsF/VPS9S2I93hu/W5zPLJDd082O3aLdcJyxHvWY8FiCzgvN67a2YLu1yNpS8T7TNKZ8fgsfral2d2mpFLM0LPx6rxGY3n/3X7WAEuoH9t9I6VUaUHM7LSsEWAsHtkx4qa7VeS4JXJeEp/BAhaUdSHMH8B7rWqs05D3O5Fzb3wGC1jE2S+wOp7uA44WSMDDwIHYXt3obt0CtpcSkM1K91M/O7koVIDvYvui+CwWsGD0xxgK4Ei7TotvcBxYiy5IfIZ+C1g8Uq5zHCpg/odynTxZQFM4LKBp+yDYdHd9UyfX2gJ2HwJOxPZVwEO5baB6Ag7LApqpmp1K0iZgCJgPPJWb8PwMvRtSurBjBPQYsDvZC9V7QMMhXgIOAncBn3oXbKa8CwJbJf0OvBU/vj+ltMuzYDOdnJpg2wIaYwGNBTQW0BgLaGYmXobpHC6VdHOLY17O+KG4NZJmtzrnZgP420xtRNJc4AhwFvVDaK0+QpFyNZ7K+L8D56eURtwBi81UNAR1csOxgJ3DS8C2guV8K3C3BewOvkopbS3YEKLpa8N4FmzaigU0FtBYQGMsoLGAxlhAYwGNsYDGAhpjAY0FNMYCGgtojAU0FtAYC2gsoDEWsMDUgHJsDxQw/+x+xg1/484CtpcKcDy2lxTppn+R66J4eowG73FiAdvKWAWUCXgh4/d4KwK9kbMFLC4HaqD98eQSYHaBkp8dOQN8A1QtYMFI6VJBz5fx9BxgWYHSvyxyBvgyrspqAQvIHupXL+0DbixQ3msj51PARy5jQZE0S9LXcfPnDyX1FSDnvshVkfusRmO5A7afMrA9tq+mfkWrTufKyBXQDsaXkkxBu+BqSX9GR9nY6L13pynXnshRkkal8lWuYPEFLEnaFkX9SdLKDs51laRfItcdknx9oS6R8AZJ5Sjsq51Y2PhHeTVyLEta78p1Vxd8PYp7StJQB+Y4FLlJ0ivuft0n4TJJR6PAw1JtsINyu0TS95HbcUkrXLHuEzBJuk/SWL3O1fel2sIOyGtA0u6QrxI5+vLOXSphn6QNkmpR8M2S5rQxnzmRgyKnFyT1u1LdLeHZknaNF72yWaoubEMeA5Jezv0z7JQ04ArNDAkvkLRX4+xuxSVxJ/H+g7ndriR9IukCV2ZmSXiepLdyHehQzERLU/ieJUm3x3tlu91dlm/mSjgg6fkY/EvSyVgCubyVR0ziCMfyWOfLllrGJG2SdLYrMbMl7I+Z59HcLnEk5FjTzAkMMem5JmL9kot/VNK9RTg5wkyPhEnS0uhQ5ZwoJyXtkfRoyDgvdqNpgi5XkrQgXvtI/G4+XlnSa7HuN+VLLV7LKZ6IJeBa4GHgJiC/RDMGnAD2AYeBX6nfCgzgfOpffFpE/cTXhdTP58sYBd4FngY+TilVpuPzWMDiitgLrADuBG6hfuPAMyYZ5iRwANgKvAZ8nVKqTufnsIBdsGsG+oHl1M9SXgksBRZDbTH0ZIvGZeBH6l8g+g74gvqZzPuAcqOn1FtAM0F3VAnG+qA/q3GN+jfXKtPd5f6LvwCnXJQpvKNmAgAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-mousebody-right-rmb: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAHLElEQVR42u3bXYycVR3H8f/MbmnpyksrWxrUErS2vFapQmhIA41g0gBaEjHRXoBRb7yDBqMYRaMXJkRR45UxrgI2Go3ERgLBoqVNqaVbdtXOdvqyldl1ptOd2e3MzjPzvJ+vFz2TbOIF08Ll73O3Z87OxT+//J/znDnHTEREREREREREREREREREREREREREREREREREpK/b7QYAaZrOzMzMbDAzm5iYuK7b7Z4BzgHPl8vlj/XnA0OqmrxnTp06tS2O47cBOp3Ooddee22DmVm5XL4ujuO/Ay7LsrlarfawmdnevXtXLiwsbM7zfAgYStN0tNlsXqZKyiXZt29fsV6vb8myLHDOEQTBzJEjR9abmWVZdj3wFkCe57XJycmtZmZjY2PL5+fnv++cW5vn+bJGo3GFKimXBLjBzCxJki3A21ywB1jjP/8AcAjIkyRZnJ+f31apVAqNRuPKNE2fA7anaTqsSsqlBvAgcANQBLYBAZAD+4Br+yEFDvhOOA1sNDOrVCojeZ7/GNiVZVkxiqIVqqhcbADxIex3vNuAqh9/dUkIrwNKgAMWgc1AARgBngOeBy5bWFgoAgVVVgaSZdlpH7Y3gI0+VPcDc74TvpRl2Ro/d12SJIf8/BJwuw/nlcCzwK+AqwE9kmUwU1NTn4rjeBHAOTc7Ozu7zofqZqDnx/8bRdFD4+PjhYmJiVvDMIx8COM8zz/r5y9P03QP8G1gWNs1MpDR0dFivV7/oX+00uv15g4cOLDGzKzRaHw1z/Ouc44kSVqTk5M3+LXfXVEUZT6E4fz8/FYzs/37929eXFw8DazyWzRFVVje0R133FGYnZ39cpIk5/x+4MtHjhy5vl6vFzudzr15np8GCMOwWq/X79m9e3ehWq3emWXZBEAcx0fL5fLNZmaHDx/+UBRFTwMF55zWgjK4Vqv1iHNu0TmXt1qtvxaLxRG/RbMOOAYQRdHJUqm0af/+/YVKpbI5CIKO75y1Y8eO3Whm1u12r03T9CpVVC5aGIaPAU3/eH0BWO3XeHcCJ33YTnW73Q1mZidPnrw9TdPTAEmSHKjVah/281eoA8olcc59DmgAKfDrJVs2NwH/8vuBbwEbp6enC+12e6tz7vyF4fwNYK2frwDKRQXviTAMh314HgM6vhP+HrjCj28CTvjxN/v7h0mSbARm/fjf+uMiFxPA80EQPLGk4z0C1P0b8hhwuR//BPBvH7Zx4FY/fo8PYeI3pperqjKw/lbMuXPnvn78+PGCH9sJZH4/8A9hGA75F42PZllW8SE8mud5P5wbgQWgBXxRVZWBtdvtF5xzaZqm7Wq1+rUlnfELaZqe9y8aY61W6+rVq1cXK5XKA71er+HXhEfPnj3b74RbgePAl1RVGdjMzMxVaZq+7LtdOD4+/pSZWaPRKHS73UedcxGQ9Xq93WZmW7ZsKTQajQ1xHDcAut3u+JkzZ9YAhbm5ubuBn6mqcrGP4cuB3wGJc64dx/EjZmY7d+5cNjc39400TQOAZrP5m+np6VUHDx4snD9/fkeWZU2A+fn5N0+cOPERM7NSqfRxVVQGtrCw8EkfwvcDf/Truzlgu5nZK6+8MhQEwePOudA5l7RarZ+amQVBUIzj+C5/hJ80TV8FRicnJ/V7sFxU9zvaP+vnO+Gf/V5gCuwAis8888xwp9P5ARACVKvVXwArzczyPH/AvzUTx/Gf+pvYIoMGEOCfwCb/9yrgt368BjxoZlYul4eBx/3h1QR42h9oLQKf7ocQ2KOqysC63e6cD85xYIOZ2d69e1eFYfiWPxuIc+7BKIqKwBDwPd8dAXYBy3xw7+0/jlVVGVi5XL6/1+v1T0O/GUXRLWZmhw8fXt3r9f7iLqhFUbTDB20Z8OSSX0y+C6zwnfAzwJyqKu+oWq1uf/HFF68ZGxsrlEql297hrjBAWi6Xt/sQFoFv+k3sHHiy/731en2bqiuDrP2+0ul0KlNTU3evXbu2cIl3hX+e53nog/udZrM5AuhAqgwWQCAPguD0zMzMB9/FXeFnnXN5nudRo9H4liorgwbwTuA/S27Ivdu7wlmaptRqtadUXRk0hLcAU0tD+C7vCmdZloWqrAysVqvdl+f57Ht4VzhXVWWQ7rcOKK5fv36oXq/f9x7eFf6JqiuDvoQ837/L6+8KL/hQ/SOKosv8vJuBtt+QPhQEwTVmZuPj4zeFYRj4+YvAjX6+DqTKQAF8CHjdOfdou90eHh0dLZ49e/bzfo13IE3TH9VqtfeZmTWbzYedc686516PomhX/ztKpdJNSZK85P/nl845HcmXgQM4DIxkWbai3W4XzC7cFXbOjfj13EitViuamdXr9WKWZSuBkW63u3Lp97Tb7cv7851zOgkjIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIv/vfzEdPT7/uIbXAAAAAElFTkSuQmCC);
    --firstreps-amination-mouse-mousebody-right-clicker: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAFE0lEQVR42u3dX4hUVQDH8XNt81+Bw5JYkqWVFCGhmP3RKIueIsUsMwlCkKAgSBMJJILIsojwoXrqj1oJRmhq9AcUogKhIJSS0v642J8HH8rKstJ2vz14lg6XO3fundk0d7+flx1mzjn3cu6PM3PmnjMbgiRJkiRJkiRJkiRJkiRJkiSpQ8Bc4Biwy94YOob9j87lyhBCVwhhKjDKS2MAT7TTmjyWATwh+po8lgGUTqEAAjOA8R2cy7Cax5sJTPRyKgD3cdwh4PIa9R7nX6Nr1HsiOd5wr4AjYHf82wghbK8RwqzJ49LwhRAeTI430kvqCDgc2J6MZpVGQmB1UueMGiNfv9vtfaUh3FonhMBjSfmRNcL3u+FTUUgawLZcCKeWlJ8DHG51J6QgfIvtbZWNhGkID5eF0LddnYgQ/gqMaKOde3Phu9neVZ0Q7ojB6asyyShoY6kjnzoJYRewELiggzbmAdPtTUnSqS87mQeP6/5eCMfvyGwKIWzLsuyol0UnKoCzczPbQ8CjwMX2jiNglQBdGEKY0KLY0SzLdjap3wghHGpSb3cIYXUIYWuWZX95qZQPzxSqW1/Szust6v4JrAeutteVBmdqjQC+UdLOjKTc28Di+LfIXmB5HHnlWzBLKrwFHwshvJJl2bcl7fSEECaGEI6EEKZkWdYTb9ndFUK4reAYR0MIG0MIW+PE5W8vpToJ8kPJKLeq4PVbgC1NRsVDwArgIntS7QZwDNAbA7WvpFw38DSwv0kYdwC3Aqfbq6obwk1JkG6sUH4asDluZi8aFZ8BJtuzqhrAWUmANteo14gTl91NRsXPgWWOigrAFfG7v2av742h6QW625yZPwd8XxDEI8C6uPDV7ahDMHz9u972lJRZmQRmWQfH6h8V320xKp7vlRl6s1yavR0Ck4DfYpmeATr2JcAa4LuCIP4RR8W5gD8HMkTCt6BF+VeTsjMH+Fzmx9XZvQVh3O/m9sEXvvwejpsq1JmXlN/yH34W/akghIu8aoMnfM/WDV9S94ek3jkDeE4LgZ0FwesDniybIOnUHvkW1Kz/QFL3ng7PZUT8GHCgIHg/x8nIOK/a4AnfnZ3u2wXOS9rY18G5rIm78PI+iLNkvxschAF8eCA2jQPvJ4G5ro360wqCtw64was0+EO4op3Q5Nq4PgnO82228VHSxi+dbIrX0AzywSQ8Y9uofybwXt0fSpLSkbTf0jbbGAW8kwvhNfauqoRnbBKcTzucCed/Mu4qe1hVwvNWEpzpBa83gI3Am8Ckkna6gNdyIZxlD6tVAOcnoVlb8PrdyesHym6nxbC+XPUn46T+4BxIllSNyL22K/dVS0+re7rA2qR8ryFUqwA+lQRmYfL83CbLrfa3WmoFvJQbCWfb02oWlsuSsOxOnt+QPH8/8GUuhONatLsxjoB9cRHrNHtbZWHpd2n8euVIunYwfsbbk5T7BphQYSQ8GPciz3FdoJoFZVESrBeBVUVbOeNXN+nnwq8rhPAO4No6/59EQy+Ao+Pqlf7fmu5JJiaNXNnxuRB+BZxb0vYooMteVqsQriyYcGxoUvas3NvxPuDsgnIZkNm7qhLAyQUBnFtSvgF8liw6/aSd3XZSGqr0rXVXhfIN4ItY/se48tl1gGo7gOmdkSUV6zSAj4EP454T/6ecOgrhcuARYEyNOt1xT4j7PnTSgtvlhEOSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSpHL/ADNnx+llWUZcAAAAAElFTkSuQmCC);
    --firstreps-amination-station-context: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAACkklEQVR42u3cMWsUQRQH8P+IrRCwFrUNFhewDmns8y2sBK1sY2EpoohgpSD2+QaJ2gnqVXaSoPYG7B2LbHGEvdxusmtC7veDI5ewuznePN7Om5u7BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYKFa69c6jt+11hsiTJtLM88nI/2PlSQSkFaXW/72IMl0oOvvCDF9E3BaStkd6LYuwvROwNkEWj9ym57nTynls3AyWAI2yfe+R7VbK6VMhZSTNiFH/WgeXewn+SWcDFYBSyn7Sa4LEWdVAeFM54ArSR4nWZ13SJLnpZTt5vhJkrtJXpkL0tvMOxcbze8bHd7l+DFz/tvmb1vzrgl95oC7tdZHC86frXRPknxP8k5YOXUFPK/XRBMC4ydgrfVGs5Olr01hZYgKeDWHO1n6WhVWhmhCPtda106QhB+FlVMnYJOE1vM4uwRsFpe7VMADycqgCdgk39euF7IbhqGbkIPm0cXPHsdCawUbcyF6KO+N1PJUwPNo3ZAtzxxwJcn9BedPj+yG2Uyy3TIXfJjk0yle5yTJU8O1RLfgjrth9mbOfz3WbpjZ12KklqQCJvmS5E2O/0zvy5nnz5qf2wuSadHSzn6zGxtNyOBVddLlmxRUQE3IWA5y+AGmY+eVhmW5b8E7YxWa5tZ6U9hpq4AWkjnTCriW4b9EaKdlPrfVo2JuGSKGbEI2er7zsaEJWb454JimSV4kudXh2G8aEgk4dBNykOSesNPWhMDFTsBa69Va617LXO+vDzNJwP/h2pxOuyS5YzjMAceeA05rrbeTXJnToCABR09C36TKf0/AySmX8CaG6mIqIzcdgy8cl1KKYdOEdPVh4OuZJ14w/wBvKNDU+QCPLgAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-mmb: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAABUUlEQVR42u3cvUrDYBiG4S/W1TNwchAUnF1cu7l5TuL5uHgwUicdC842eRyMGKpIC35JwOuCkJB2enuTn5K2FAAAAAAAAAAAAAAAAPgHkpwneUjSfSztfZIzk2GM+I6TPOa7VZITE6JmfE2S2z64dhDf5/ZdksakdndgBHtpSikX/XY72N/169P+PQiwmsN+vRjsWwwCRYBVtWIT4KSXgkYgwLlcDxZHQwGOPS8zE+AsbkIQ4CTzEqAAZ3cKdmMiwFF05etL525rP65nqmtLKS+/vLwu5dnRkHqSXCV5/eFhhHWSSxOidoBNsrlJuqetJ2GuPYjAmCEuk2z6ZWkiAAAAAAAAAAAA8PeSHJnC/PlREgJEgCBABAgCRIAgQAQIAkSAIEAECALckX8tFeCkNj5eAU7oTYACnNLKKRgAAAAAAAAAAAAAAAAAAAAAAADYwztdj7l9ppJ8IwAAAABJRU5ErkJggg==);
    
    --firstreps-amination-mouse-middle-mmb-arrow-bottom: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAACDElEQVR42u3ZPWsUQRwH4M3FE1QUYmHExsIvYClWYqmNiI2kC/gZ7CSlnbaCdilSBYR0VjZpTBMxGIiiFzFeTu72XsjumZ3dtcnCKQajeUHwebplZpoff+bHsFEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMB/o9/vT5cHbHt7++XMzExNuuzJcDhcOKjhy/N8sLm5eUmqPzomgt0NBoN79Xr9TZ7nZ6MoKrIsmxsbG/uyl7NlWdbGx8fv1mq18/V6PUqS5P7k5OR7qfJHer3eVHWLZVn2dmlp6eRezm1tbT0Yqd4Xqpf9VPF8NUxJkjz63f5Wq3W5KIpvZVmWIYTexsbGRSny15rN5rkQQqssy7IoijyO42u77V1ZWTmeZdnramD7/f60BNm3OI5vj1Tqx9XV1dO/2pckycNq33A4XIiiaEx6HIg0TWer4UrT9NnP6+12+2pRFPlO9XbW19cvSI0D02g0JkIIn3dmsIjj+Fa1try8fCqE8K4a0F6vNyUxDuNVfKMoimLnlms1m81zO7fjk5HqnZcUh1nFT0eG7Xmn07lZfYcQvlZDCYdibW3tTAjhw8hfjq2qlrvd7h0Jcei63e716sEx8jCZlQxHJkmSxyPV+6nRaExIhSOzuLh4Ik3TuSzLXrXb7SsSAQAAAACAf8x31rIc6RgOnTUAAAAASUVORK5CYII=);
    --firstreps-amination-mouse-middle-mmb-arrow-top: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAACHUlEQVR42u3XvWsTYQAG8EtCA1Yq2EHUxcF/oKM4iaMuIi7i1tXVWTq66SQIukgHJ0Fwc+nUxS4Vi4UKmoo1TUkvie1d7L1359KD+P2VOv1+08G9tzw88NwbRQAAAAC/tLi4eChN00dZlj3vdrtnJMJ/lSTJnXJfCOFdq9U6KhX+i16vd74oirwckabpvGQ4cGtra0dCCG+q4uV5vrv/WPR6vSsS4kClaXq/Kt9wOHyyvb19cWSKt9rt9jEpcSD6/f6FoiiK/bJ1qrKlaXpvpJSPJcXYtVqtoyGE99XcxnF8qXq3vLx8OITwuiphv9+/JjHGPb3zIxeOB1+/73a7Z6uLSQhhe319/aTUGIs4ji9X5dvb23u7uro69b1zSZLcGpnip1EU1aTHP2m328dCCJ2yLMuiKPI4js/96OzKykozy7IXVQkHg8GsBPknw+HwcVWoJElu/+p8p9OZKYri0/4U9zc2Nk5Jkb+99V6rypdl2aulpaXJ3/lud3f35shkP5ubm6tL81v+T35ia2vrxPT09Ms8z6ejKCqyLHtUq9U+/M63ZVnWG43G1Xq9fnxiYiLa2dm5PjU1dVeq/Mn0Pi3HJM/zj5ubm6el+qWGCL5vMBjMTk5O3hjb1NRqzWazOdNoNB4uLCyUEgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYq89U9cwMymZbWgAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-middle-mousebody: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAAEEklEQVR42u3cT4iVVRzG8e+ZGe2vjhCYxSyUEfpnSSsXhbpt1SKsXdEma9e2fVCECG41F7arQFGD1JAW0ULIVm0qySnRLITAMTPnOk8Lz6W3cky97wxz3/l+4MI7w51zzz3nub97zvveOyBJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJWmyKQ3BzSUaAsXobvc0/vwb0gF4pZdbRNIC3ErgCrAA2Ac8ATwHrgIeA+26zud+BX4Ep4GvgS+AEMF1KiaOtf1S6JE8k2ZnkdJJe2terbe+sjzViBTR4pVa4t4CXavUDCHAZ+An4FvgFOA9MN/58Eni9Hr9f79e3AlgDPFjvNwnc0xjzaeBD4B3gtBVxaYZvWZLXkpxvVKk/kxxNsj3JuiR3zVWpkmypVa2XZMtNKuvyK7myvrZ5vD5G3/kkbyRZ5owsrfCt6qW3L8lMDcLVJIeSbE4ydott/G8A5wj95iSHG4/dS7I7ybgzszTCtybJJ0lmawCmkmy71eANEsB/BfHFJD/WPszWUK52hrodvvEavr7Pk0zeYVt3HMBGG4/UPvQdTLLKmerumm9vo/IdTfLAAO0NHMDazuokxxqVcJ9rwg7uduuGo7/u+mLQt7u2AtgIYb8SztS+ep62QwGcbOx2p5Ksb6HNrY0Abm2pj1ON3fGkM9eN8I0k2dPY7W5roc3Hkxypb5mzyezhJI+10O4LjSq9x5PV3QjghiQX66Qeut3d7g3am0hy6gZXOk4lWdvCOvVwbe9ikg3O4PCv/XbVCf0jybMttPd24/zdx/XWv3T37qBrt3qe8Eptb5drweEO4MrGuupIC9VvJMn+2t7JJHfX28n6u/2Dvm0mGas79P56dWVX52cprC82ARNcv7b7USml10Kb/Y9lTQMz9da/Rjxwtap93F/7PFGfgwEcUltqYC4Dx9sqrAvQ72O1z6P1ORjAYdz9Ahvrj98DPw9RAM8CP9TjjV3dDXe9Ao4B/V3pKa5/OnlY9IDv6vHa+lwM4JBZXtdQAOeG6WPxta9n648T9bkYwCFTGpXjzBD2/0yjkhcDKBlAdW2RrsHGrziWBnAhBbhQj58G3mwcA9cuwKhfMDKA87Y7TZK9wDZgHHivseH5DUZ3+w0314Dz7QRcexUyVYNXgNPAy8BXDo8VcN6rIHAgySXg0/rr7aWUzxwdK+BCujrHsQygDKBkAGUAJQOoxWgpnYZ5NMlzLbf5JH9fituU5N62+9z1Sen0t62SrADOAfdz/RJa5mH8+mM4n+1fAh4upUxbAX3B/SfnS+UFbQAH8wFwcMj6/DzwigHshm9KKQeGbAnR+f8N4y5YBlAGUDKAMoBaREopOxwFSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSdJC+wul07l/yuMpZwAAAABJRU5ErkJggg==);
    --firstreps-amination-mouse-middle-mmb-bottom: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABkCAYAAAABtjuPAAABIklEQVR42u3av0rDUBiH4RPrZTg5CArOLq7d3Lwn8X5cvBjRzbHg3pyfQ48Y6h90OGmG54GQcNrp4yVNyikFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfpbkIsljkro76kOSc5NhjvhOkjzlq+ckpyZEz/iGJHctuHES38f1fZLBpP7myAj+bSilXLbrcbJe2/msfQcBdnPczqvJ2moSKALsahSbAA/6KGgEAlzK82BxNxTg3DMzNwEu4iUEAR5kZgIU4OJ+gr2YCHAWtXz+6Vz31hFgd2Mp5fWXjzfuhnSV5DrJ2zebETZJrkyI3gEOyfY2qS97O2FubERgzhDXSbbtWJsIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAS/AOLRmvni3pMccAAAAASUVORK5CYII=);
}

::-webkit-scrollbar {
    /*width: var(--scrollbar-width);*/
    
}


/* Track */
::-webkit-scrollbar-track {
    background: #1b1b1d;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #747475;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #616162;
}

input[type=range] {
    -webkit-appearance: none;
    margin: 5px 0;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #3b3939;
}
input[type=range]::-webkit-slider-thumb {
    border: none;
    height: 26px;
    width: 8px;
    background: #747475;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #3b3939;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #3b3939;
}
input[type=range]::-moz-range-thumb {
    height: 26px;
    width: 8px;
    background: #747475;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 8x 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #3b3939;
}
input[type=range]::-ms-fill-upper {
    background: #3b3939;
}
input[type=range]::-ms-thumb {
    height: 26px;
    width: 8px;
    background: #747475;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: #3b3939;
}
input[type=range]:focus::-ms-fill-upper {
    background: #3b3939;
}

input[type=range]:dispabled {
    filter: brightness(0.5);
}

.nowrap {
    white-space: nowrap;
}

.stack {
    display: inline-grid;
    grid-template-columns: 1fr;
}

.stack span {
 
  grid-row-start: 1;
  grid-column-start: 1;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: _stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), _glitch 4s ease infinite 4s alternate-reverse;
}

.stack span:nth-child(odd) { --glitch-translate: 4px; }
.stack span:nth-child(even) { --glitch-translate: -4px; }


@keyframes glowing-animation {
  0%, 100% {
    filter: invert(1) drop-shadow(0px 0px 20px white) drop-shadow(0px 0px 5px rgba(0, 112, 202, 0.4));
  }
  50% {
    filter: invert(1) drop-shadow(0px 0px 60px white) drop-shadow(0px 0px 40px rgba(0, 112, 202, 1));
  }
}

@keyframes pack-glowing-animation {
  0%, 100% {
    filter: brightness(1.3) drop-shadow(0px 0px 10px var(--pack_shadow_color)) drop-shadow(0px 0px 20px var(--pack_shadow_color2));
  }
  50% {
    filter: brightness(1.5) drop-shadow(0px 0px 40px var(--pack_shadow_color)) drop-shadow(0px 0px 5px var(--pack_shadow_color2));
  }
}

@keyframes working-animation {
  0%, 100% {
    filter: drop-shadow(0px 0px 1px rgba(180, 112, 202, 0.4)) drop-shadow(0px 0px 4px rgba(0, 112, 202, 0.4));
  }
  10%, 20%, 40%, 50%, 70%, 80% {
    filter: drop-shadow(0px 0px 4px rgba(100, 212, 202, 0.4)) drop-shadow(0px 0px 1px rgba(0, 112, 202, 0.1));
  }
  30%, 60%, 90% {
    filter: drop-shadow(0px 0px 1px rgba(180, 112, 102, 0.4)) drop-shadow(0px 0px 4px rgba(0, 112, 202, 0.4));
  }
  15%, 25%, 45%, 55%, 75%, 85% {
    filter: drop-shadow(0px 0px 2px rgba(200, 112, 202, 0.4)) drop-shadow(0px 0px 3px rgba(0, 112, 202, 0.6));
  }
}


@keyframes ability_activated {
  0% { filter: drop-shadow(0 0 2px #ff9100); }
  50% { filter: drop-shadow(0 0 6px #ff9100); }
  100% { filter: drop-shadow(0 0 2px #ff9100); }
}

@keyframes ability_prepared {
  0% { filter: drop-shadow(0 0 2px rgba(11,183,226,1)); }
  50% { filter: drop-shadow(0 0 6px rgba(11,183,226,1)); }
  100% { filter: drop-shadow(0 0 2px rgba(11,183,226,1)); }
}

@keyframes _stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 rgb(255,131,64), 2px -3px 0 rgb(126, 250, 255);
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 rgb(255,131,64), -2px 3px 0 rgb(126, 250, 255);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes _glitch {
  0% {
    text-shadow: -2px 3px 0 rgb(255,131,64), 2px -3px 0 rgb(126, 250, 255);
    transform: translate(var(--glitch-translate));
  }
  1% {
    text-shadow: 2px -3px 0 rgb(255,131,64), -2px 3px 0 rgb(126, 250, 255);
  }
  2%, 100% {  text-shadow: none; transform: none; 
  }
}

@keyframes shadowing{
    0% {
        text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    }
    15% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);
    }
    85% {
        text-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);
    }
    100% {
        text-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    }
}


@keyframes whitebox-shadowing-left{
    0% {
        box-shadow: 0px 1px 1px rgba(255,255,255,0.15);
    }
    100% {
        box-shadow: -4px 1px 1px rgba(255,255,255,0.05);
    }
}

@keyframes whitebox-text-shadowing-black-small{
    0% {
        text-shadow: 1px 1px 0px rgba(255,0,0,0.3);
    }
    100% {
        text-shadow: -3px 1px 1px rgba(255,0,0,0.2);
    }
}

@keyframes text-shadowing-black{
    0% {
        text-shadow: 1px -2px 0px rgba(0,0,0,0.3);
    }
    100% {
        text-shadow: 6px -2px 2px rgba(0,0,0,0.2);
    }
}

@keyframes text-shadowing-white{
    0% {
        text-shadow: 1px -2px 0px rgba(255,255,255,0.3);
    }
    100% {
        text-shadow: 6px -2px 2px rgba(255,255,255,0.2);
    }
}

@keyframes text-shadowing-white-small{
    0% {
        text-shadow: -2px 0px 2px rgba(127,255,248,0.3), 2px 0px 2px rgba(255,168,0,0.3);
    }
    100% {
        text-shadow: 6px -2px 2px rgba(255, 255, 255,0.05),-3px 2px 2px rgba(255, 255, 255,0.05);
    }
}



@keyframes text-shadowing-white-button{
    0% {
        text-shadow: -2px 0px 2px rgba(127,255,248,1), 2px 0px 2px rgba(255,168,0,1);
    }
    100% {
        text-shadow: 1px 0px 1px rgba(127,255,248,0.2),-1px 0px 1px rgba(255,168,0,0.2);
    }
}

@keyframes box-shadowing{
    0% {
        box-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    }
    15% {
        box-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);
    }
    85% {
        box-shadow:  0px 0px 0 rgba(255,131,64,.3), 0px 0px 0 rgba(126, 250, 255, .2);
    }
    100% {
        box-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);
    }
}

@keyframes fadeIn {
    0%{
        opacity:0;
    }
    90%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@keyframes fadeInSoft {
    0%{
        opacity:0;
    }
    70%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@keyframes blink{
    0%{
        opacity:1;
    }
    33%{
        opacity:0.4;
    }
    66%{
        opacity:1;
    }
    100%{
        opacity:0.3;
    }
}


@keyframes windowshow{
    /*
    0%{
        opacity:1;
    }
    33%{
        opacity:0.4;
    }
    66%{
        opacity:1;
    }
    100%{
        opacity:0.3;
    }
    */
  
    
}

@keyframes highlited{
    0%{
        opacity:0.2;
    }
    40%{
        opacity:1;
    }
    75%{
        opacity:1;
    }
    100%{
        opacity:0.2;
    }
}


@keyframes highlitedbckg{
    0%{
        background-color:rgba(255,255,255,.2);
    }
    70%{
        background-color:rgba(255,255,255,1);
    }
    100%{
        background-color:rgba(255,255,255,.2);
    }
}

@keyframes highlitedPRESSED{
    0%{
        box-shadow: 0px 0px 30px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    50%{
        box-shadow: 0px 0px 10px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    100%{
        box-shadow: 0px 0px 30px var(--highlitedPRESSEDboxShadow_color) inset;
    }
}

@keyframes highlitedPRESSEDButton{
    0%{
        box-shadow: 0px 0px 5px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    50%{
        box-shadow: 0px 0px 2px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    100%{
        box-shadow: 0px 0px 5px var(--highlitedPRESSEDboxShadow_color) inset;
    }
}

@keyframes highlitedPRESSEDBox{
    0%{
        box-shadow: 0px 0px 70px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    50%{
        box-shadow: 0px 0px 20px var(--highlitedPRESSEDboxShadow_color) inset;
    }
    100%{
        box-shadow: 0px 0px 70px var(--highlitedPRESSEDboxShadow_color) inset;
    }
}

@keyframes highlitedPRESSEDText{
    0%{
        color: white;
    }
    50%{
        color: #b9dbff;
    }
    100%{
        color: white;
    }
}


@keyframes highlitedFilter{
    0%{
        filter: hue-rotate(242deg) brightness(1.2) drop-shadow(0px 0px 5px rgba(255,188,0,.2));
    }
    70%{
        filter: hue-rotate(242deg) brightness(1.2) drop-shadow(0px 0px 15px rgba(255,188,0,.3));
    }
    100%{
        filter: hue-rotate(242deg) brightness(1.2) drop-shadow(0px 0px 5px rgba(255,188,0,.2));
    }
}



@keyframes lockingbckg{
    0%{
        background-color:rgba(255,0,0,.2);
    }
    70%{
        background-color:rgba(255,0,0,1);
    }
    100%{
        background-color:rgba(255,0,0,.2);
    }
}

@keyframes proggressbar{
    0%{
        width:1%;
    }
    100%{
        width:100%;
    }
}


@keyframes calculation{
    0%{
        top:100px;
        opacity:1;
    }
    100%{
        top:0px;
        opacity:0;
    }
}


@keyframes showBox{
    0%{
        opacity:0;
        transform: perspective( 500px ) rotateY( 55deg );
        transform-origin: 0% 0%;
    }
    100%{
        opacity:1;
        transform: perspective( 500px ) rotateY( 0deg );
    }
}

@keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(0.85);
        opacity: 0.1;
    }
}


@keyframes crt{
    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;
        transform: scale(1.1) skewY(0deg) skewX(0deg);
    }
    98%{
        opacity:0;
        transform: scale(1.05) skewY(-1deg) skewX(0deg);
    }
    98.2%{
        opacity:0;
        transform: scale(1) skewY(0deg) skewX(-1deg);
    }
    100%{
        opacity:1;
        transform: scale(1) skewY(0deg) skewX(0deg);
    }
}

@keyframes zoom{
    0%{
        transform: scale(1.0) skewY(0deg) skewX(0deg);
    }
    99.0%{
        transform: scale(1.1) skewY(0deg) skewX(0deg);
    }
    99.3%{
        transform: scale(1.05) skewY(-1deg) skewX(0deg);
    }
    99.6%{
        transform: scale(1) skewY(0deg) skewX(-1deg);
    }
    100%{
        transform: scale(1) skewY(0deg) skewX(0deg);
    }
}

@keyframes glitch{
    0%{
        opacity:1;
    }
    80%{
        opacity:0.5;
    }
    100%{
        opacity:0;
    }
}

@keyframes font_color_glitch{
    0%{
        text-shadow: -5px 0px 0 rgba(255,131,64,.13), 5px 0px 0 rgba(126, 250, 255, .12);
    }
    30% {
        text-shadow: -1px 0px 0 rgba(255,131,64,.4), 2px 0px 0 rgba(126, 250, 255, .4);
    }
    60% {
        text-shadow: -4px 0px 0 rgba(255,131,64,.1), 4px 0px 0 rgba(126, 250, 255, .1);
    }
    100% {
        text-shadow: -2px 0px 0 rgba(255,131,64,.25), 2px 0px 0 rgba(126, 250, 255, .25);
    }
}

@keyframes font_gold_glowing{
    0%{
        text-shadow: -5px 0px 0 rgba(255,188,0,.13), 5px 0px 0 rgba(255,188,0, .12);
    }
    30% {
        text-shadow: -1px 0px 0 rgba(255,188,0,.4), 2px 0px 0 rgba(255,188,0, .4);
    }
    60% {
        text-shadow: -4px 0px 0 rgba(255,188,0,.1), 4px 0px 0 rgba(255,188,0, .1);
    }
    100% {
        text-shadow: -2px 0px 0 rgba(255,188,0,.25), 2px 0px 0 rgba(255,188,0, .25);
    }
}

@keyframes hash{
    0.000% {
        bottom: -100%
    }

    2.000% {
        bottom: -100%
    }
    2.001% {
        bottom: -98%
    }

    4.000% {
        bottom: -98%
    }
    4.001% {
        bottom: -96%
    }

    6.000% {
        bottom: -96%
    }
    6.001% {
        bottom: -94%
    }

    8.000% {
        bottom: -94%
    }
    8.001% {
        bottom: -92%
    }

    10.000% {
        bottom: -92%
    }
    10.001% {
        bottom: -90%
    }



    12.000% {
        bottom: -90%
    }
    12.001% {
        bottom: -88%
    }

    14.000% {
        bottom: -88%
    }
    14.001% {
        bottom: -84%
    }

    16.000% {
        bottom: -84%
    }
    16.001% {
        bottom: -84%
    }

    18.000% {
        bottom: -84%
    }
    18.001% {
        bottom: -82%
    }

    20.000% {
        bottom: -82%
    }
    20.001% {
        bottom: -80%
    }



    22.000% {
        bottom: -80%
    }
    22.001% {
        bottom: -78%
    }

    24.000% {
        bottom: -78%
    }
    24.001% {
        bottom: -76%
    }

    26.000% {
        bottom: -76%
    }
    26.001% {
        bottom: -74%
    }

    28.000% {
        bottom: -74%
    }
    28.001% {
        bottom: -72%
    }

    30.000% {
        bottom: -72%
    }
    30.001% {
        bottom: -70%
    }



    32.000% {
        bottom: -70%
    }
    32.001% {
        bottom: -68%
    }

    34.000% {
        bottom: -68%
    }
    34.001% {
        bottom: -66%
    }

    36.000% {
        bottom: -66%
    }
    36.001% {
        bottom: -64%
    }

    38.000% {
        bottom: -64%
    }
    38.001% {
        bottom: -62%
    }

    40.000% {
        bottom: -62%
    }
    40.001% {
        bottom: -60%
    }



    42.000% {
        bottom: -60%
    }
    42.001% {
        bottom: -58%
    }

    44.000% {
        bottom: -58%
    }
    44.001% {
        bottom: -56%
    }

    46.000% {
        bottom: -56%
    }
    46.001% {
        bottom: -54%
    }

    48.000% {
        bottom: -54%
    }
    48.001% {
        bottom: -52%
    }

    50.000% {
        bottom: -52%
    }
    50.001% {
        bottom: -50%
    }



    52.000% {
        bottom: -50%
    }
    52.001% {
        bottom: -48%
    }

    54.000% {
        bottom: -48%
    }
    54.001% {
        bottom: -44%
    }

    56.000% {
        bottom: -44%
    }
    56.001% {
        bottom: -44%
    }

    58.000% {
        bottom: -44%
    }
    58.001% {
        bottom: -42%
    }

    60.000% {
        bottom: -42%
    }
    60.001% {
        bottom: -40%
    }


    62.000% {
        bottom: -40%
    }
    62.001% {
        bottom: -38%
    }

    64.000% {
        bottom: -38%
    }
    64.001% {
        bottom: -36%
    }

    66.000% {
        bottom: -36%
    }
    66.001% {
        bottom: -34%
    }

    68.000% {
        bottom: -34%
    }
    68.001% {
        bottom: -32%
    }

    70.000% {
        bottom: -32%
    }
    70.001% {
        bottom: -30%
    }


    72.000% {
        bottom: -30%
    }
    72.001% {
        bottom: -28%
    }

    74.000% {
        bottom: -28%
    }
    74.001% {
        bottom: -26%
    }

    76.000% {
        bottom: -26%
    }
    76.001% {
        bottom: -22%
    }

    78.000% {
        bottom: -22%
    }
    78.001% {
        bottom: -22%
    }

    80.000% {
        bottom: -22%
    }
    80.001% {
        bottom: -20%
    }


    82.000% {
        bottom: -20%
    }
    82.001% {
        bottom: -18%
    }

    84.000% {
        bottom: -18%
    }
    84.001% {
        bottom: -16%
    }

    86.000% {
        bottom: -16%
    }
    86.001% {
        bottom: -14%
    }

    88.000% {
        bottom: -14%
    }
    88.001% {
        bottom: -12%
    }

    90.000% {
        bottom: -12%
    }
    90.001% {
        bottom: -10%
    }




    92.000% {
        bottom: -10%
    }
    92.001% {
        bottom:  -8%
    }

    94.000% {
        bottom:  -8%
    }
    94.001% {
        bottom:  -6%
    }

    96.000% {
        bottom:  -6%
    }
    96.001% {
        bottom:  -4%
    }

    98.000% {
        bottom:  -4%
    }
    98.001% {
        bottom:  -2%
    }

    99.001% {
        bottom:  -2%
    }
    100.000% {
        bottom:  -0%
    }

}



@keyframes hash10 {
    0.000% {
        bottom:  0px
    }

    10.000% {
        bottom: 0px
    }
    10.001% {
        bottom: -40px
    }

    20.000% {
        bottom: -40px
    }
    20.001% {
        bottom: -80px
    }

    30.000% {
        bottom: -80px
    }
    30.001% {
        bottom: -100px
    }

    50.000% {
        bottom: -100px
    }
    50.001% {
        bottom: -130px
    }

    70.000% {
        bottom: -130px
    }
    70.001% {
        bottom: -150px
    }

    90.000% {
        bottom: -150px
    }
    90.001% {
        bottom: -180px
    }

    99.001% {
        bottom:  -180px
    }
    100.000% {
        bottom:  -200px
    }
}


@keyframes socials-menu {
    0.000% {
        top:  0px;
        opacity: 0.0;
    }
    100.000% {
        top:  20%;
        opacity: 0.8;
    }
}

@keyframes deblur {
    /*
      0.000% {filter:  blur(6px);}    
     99.9% {filter:  blur(0px); }
    100.000% {filter:  unset; }   
    */
}

@keyframes bar_progress_width {
  from {width: 1%;}
  to {width: 95%;}
}




.bhangarvals {
    position: relative;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    
}

.bhangarvals .hhinfo {
    display: block;
    position: absolute;
    top: 25px;
    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;
}

.bhangarvals .basehangarclass {
    position: relative;
    color: white;
    text-align: center;
    height: 70px;
}


.bhangarvals .basehangarclass:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 10px;
    left: 0px;
    right: 0px;
    
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    clip-path: var(--clip_dockfleetship);
    filter: invert(1);
    
}

.bhangarvals .basehangarclass.class-1:before{
    background-image: url(ico/ico_class_1_gr.png);
}
.bhangarvals .basehangarclass.class-2:before{
    background-image: url(ico/ico_class_2_gr.png);
}
.bhangarvals .basehangarclass.class-3:before{
    background-image: url(ico/ico_class_3_gr.png);
}
.bhangarvals .basehangarclass.class-4:before{
    background-image: url(ico/ico_class_4_gr.png);
}
.bhangarvals .basehangarclass.class-5:before{
    background-image: url(ico/ico_class_5_gr.png);
}
.bhangarvals .basehangarclass.class-6:before{
    background-image: url(ico/ico_class_6_gr.png);
}
.bhangarvals .basehangarclass.class-7:before{
    background-image: url(ico/ico_class_7_gr.png);
}
.bhangarvals .basehangarclass.class-8:before{
    background-image: url(ico/ico_class_8_gr.png);
}
.bhangarvals .basehangarclass.class-9:before{
    background-image: url(ico/ico_class_9_gr.png);
}
.bhangarvals .basehangarclass.class-10:before{
    background-image: url(ico/ico_class_10_gr.png);
}
.bhangarvals .basehangarclass.class-11:before{
    background-image: url(ico/ico_class_11_gr.png);
}
.bhangarvals .basehangarclass.class-12:before{
    background-image: url(ico/ico_class_12_gr.png);
}
.bhangarvals .basehangarclass.class-13:before{
    background-image: url(ico/ico_class_13_gr.png);
}

.bhangarvals .basehangarclass .basehangarclasstitle {
    display: none;
    position: absolute;
    top: 19px;
    line-height: 10px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}



.bhangarvals .basehangarclass .basehangarclasscount {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 17px;
    left: 0px;
    right: 0px;
}

.bhangarvals .basehangarclass .basehangarclassbarbox{
    height: 7px;
    left: 8px;
    right: 10%;
    box-sizing: border-box;
    position: absolute;
    top: 36px;
    right: 8px;
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    background-color: var(--barbox-background);
}
.bhangarvals .basehangarclass .basehangarclassbar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    bottom: 0px;
    max-width: 100%;
}


.nowrap {
    white-space: nowrap;
}

table th {
    font-weight: normal;
}

small {
    font-size: 13px;
}

.hashbox {
    position: absolute;
    top: 0px;
    left: 10px;
    right: 33%;
    height: 100%;
    overflow: hidden;
    z-index: 999;
}

.hashbox .hash {
    position: absolute;
    text-transform: uppercase;
    color: rgba(255,255,255,0.04);
    letter-spacing: 2px;

    font-size: 9px;
    animation: hash10 5000ms cubic-bezier(0.05, 1.03, 0.65, 0.61) infinite;
    line-height: 12px;
}

.format-exc {
    display: inline-block;
    padding-left: 20px;
    background: url(./ico/exc_16.png) center left no-repeat !important;
    background-size: 16px;
    line-height: 16px;

}

.format-mor {
    display: inline-block;
    padding-right: 20px;
    background: url(./ico/morale_16.png) center right no-repeat !important;
    background-size: 16px;
    line-height: 16px;

}

.format-data {
    background-size: 16px;
    min-height: 16px;
    display: inline-block;
    line-height: 16px;

}

.format-delivery {
    padding-left: 20px;
    /*background: url(./ico/delivery_16.png) center left no-repeat !important;*/
    background-size: 16px;
    font-size: 13px;

    text-transform: none;
}

.pricehistorygraph {
    position: relative;
    margin: 10px auto 0px;
}

.pricehistorygraph .controls {
    position: absolute;
    bottom: 0px;
    text-align: center;
    left: 0px;
    right: 0px;

}



.pricehistorygraph .controls .control {
    position: relative;
    display: inline-block;
    color: black;
    font-size: 10px;
    width: 18px;
    height: 18px;
    margin: 0px 2px;
    cursor: pointer;
}

.pricehistorygraph .controls .control:hover {
    animation: blink 100ms linear 2 alternate;
}

.pricehistorygraph .controls .control:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
}

.pricehistorygraph .controls .control.left:before {
    background-image: url(ico/arrow-97-24.png);
    background-size: 14px;
}
.pricehistorygraph .controls .control.right:before {
    background-image: url(ico/arrow-32-24.png);
    background-size: 14px;
}
.pricehistorygraph .controls .control.zoomin:before {
    background-image: url(ico/plus-24.png);
}
.pricehistorygraph .controls .control.zoomout:before {
    background-image: url(ico/minus-24.png);
}

.card .inner {
    position: absolute;
    width: 120px;
    top: -45px;
    margin: 0px;
    height: 175px;
    transform: scale(0.5);
    left: -25px;
    cursor: pointer;
}
.card .inner canvas {
    width: 100%;
    position: absolute;
    z-index: -1; /* kvuli tlacitkum */
}

.card.completed .inner canvas {
    animation: highlitedFilter 1200ms linear infinite;
}

.card.completed.zoomed .inner canvas {
    animation: none;
    filter: hue-rotate(242deg) brightness(1.2) drop-shadow(0px 0px 10px rgba(255,188,0,.1));
}


.card .bar-box {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 7px;
    background: #282727;
    bottom: -11px;
}

#cards-applyed .card.zoomed .bar-box {
    height: 7px;
}


.card .bar-box .bar {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
.card .timer {
    position: absolute;
    left: 5px;
    right: 5px;
    height: 5px;
    color: rgba(255,255,255,.8);
    text-align: center;
    bottom: -21px;
    font-size: 9px;
    opacity: 0;
    transition: .2s;
    text-shadow: var(--shadow_textfull);
}


.card .qty {
    position: absolute;
    left: calc(50% - 40px);
    width: 80px;
    /* height: 20px; */
    color: rgba(255,255,255,.8);
    text-align: center;
    top: -45px;
    font-size: 27px;

}




.card:not(.zoomed):hover .inner {
    top: -87px;
    transform: scale(1.2);
    /*z-index: 1000; */
}
/*.card:hover .timer {opacity: 1;  } */


.hint {
    display: block;
    position: absolute;
    top: 39px;
    left: calc(50% + 150px);
    outline: none;
    text-decoration: none;
    text-align: left;
    font-size: 18px;
    vertical-align: baseline;
    line-height: 14px;
    z-index: 1000;
    padding: 10px;
    width: 95px;
    color: black;
    font-family: var(--fontFaimly_header);
    background-color: var(--color-thint);
    text-transform: uppercase;
    text-shadow: none;
}


.hint:before {
    content: "";
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid var(--color-thint);
    position: absolute;
    top: 0px;
    left: -10px;
}



.thint  {
    display: block !important;
    position: absolute !important;
    top: 25px;
    right: calc(100% + 12px);
    outline: none !important;
    text-decoration: none !important;
    text-align: left;
    font-size: 12px !important;
    vertical-align: baseline;
    line-height: 14px !important;
    z-index: 1000;
    padding: 6px 8px !important;
    width: auto;
    color: black !important;
    font-family: var(--fontFaimly_button) !important;
    background-color: var(--color-thint) !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    float: none !important;
    animation: highlited 1000ms linear infinite;

}

.thint:before  {
    content: "";
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid var(--color-thint);
    position: absolute;
    top: 3px;
    right: -10px;
}

.quest-gray .thint {
    display: none !important;
}


._font_color_glitch_effect {
    animation:font_color_glitch 1300ms linear !important;
}




._glitch_effect {
    background-color:rgba(0,0,0,0)  !important;
    /*background-image:url(./effects/glitch1.gif) !important;*/
    background-image:url(./effects/RnWB.gif)  !important;
    background-position:center left  !important;
    background-repeat:no-repeat !important;
    background-size: cover !important;
    animation:glitch 50ms linear 1 !important;
    animation-fill-mode: forwards !important;
    filter: none !important;
}

._glitch_effect:before,
._glitch_effect:after {
    display:none !important;
}

._glitch_effect_loading {
    background-color:rgba(0,0,0,0)  !important;
    /*background-image:url(./effects/glitch1.gif) !important;*/
    background-image:url(./effects/RnWB.gif)  !important;
    background-position:center left  !important;
    background-repeat:no-repeat !important;
    background-size: cover !important;
    animation:glitch 50ms linear 1 !important;
}

._glitch_effect_loading:before,
._glitch_effect_loading:after {
    display:none !important;
}

li{
    padding:5px 0px 5px 0px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    position: relative;
    text-decoration: none;
    font-size: 16px;
    color: white;
    background-color: transparent;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    min-width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: right;
    margin: 0px;
    display: inline-block;
    font-family: var(--fontFaimly_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, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 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;
}

input:disabled { 
    cursor: default !important;
    background-color: transparent;
    color: rgb(84, 84, 84) !important; 
    
    background-image: 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%),
        linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 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;
}

input[type="number"]{
    
    padding: 0px 5px 0px 0px;
    
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 26px; /* Toto nastaví výšku šipek. */
    width: 10px;
    position: relative;
    transform: translateX(1px) translateY(4px); /* Posune šipky zprava o 10px */
}

input[type="text"],input[type="password"],input[type="email"]{
    padding: 0px 10px;
}


textarea {
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    font-family: var(--fontFaimly_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;
    resize: none;
}


select {
    position: relative;
    text-decoration: none;
    font-size: 14px;
    color: white;
    background-color: transparent;
    padding: 0px 5px 0px 5px;
    box-sizing: border-box;
    border: none;
    min-width: 35px;
    height: 34px;
    line-height: 34px;
    text-align: right;
    margin: 0px;
    display: inline-block;
    font-family: var(--fontFaimly_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;
}

select:disabled {
    cursor: default !important;
    background-color: transparent;
    color: rgb(84, 84, 84) !important; 
    
    background-image: 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%), 
        linear-gradient(0deg, rgb(84, 84, 84) 0%, rgb(84, 84, 84) 100%),
        linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 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;
}


select option{
    font-family: var(--fontFaimly_text);
    text-align: left;
    color: black;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.5);
    text-shadow: -2px 0px 0 rgba(255,255,255,.1), 6px 0px 0 rgba(126, 250, 255, .0);
    transition: all 0.3s ease-in-out;
}
input:focus::placeholder,
textarea:focus::placeholder {
    color: rgba(255,255,255,.4);
    text-shadow: 0px 0px 0 rgba(255,131,64,.3),0px 0px 0 rgba(126, 250, 255,.3);
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.slotprocess{
    position:relative !important;
    height:82px !important;
    width:82px !important;
    margin:4px !important;
    color:white !important;
    display: inline-block !important;
    line-height: 13px !important;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    box-sizing: border-box;
}
.slotprocess.premium:before{
    /*filter: drop-shadow(0px 0px 2px gold);*/
}

.slotprocess.idle{
    cursor: default;
}

.slotprocess.used:not(.fail):after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    animation: working-animation 1s infinite;
    z-index: -1;
    background: transparent;
}
 


    
.slotprocess.used:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    background-color: var(--gitem-background) !important;
    clip-path: var(--clip_production_slot);
    z-index: -1;
}

.slotprocess.used.premium{
    
    
}

.slotprocess.used.premium:before{
    background-color: #493916 !important;
    
    background-image: linear-gradient(180deg, rgb(64 64 64 / 26%) 25%, rgb(0 0 0 / 71%) 100%);
}




.slotprocess .sbefore {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: white;
    clip-path: var(--clip_production_slot);
    z-index: -1;
    padding-left: 5px;
}

.slotprocess.free .sbefore {
    text-align: center;
    font-size: 12px;
    color: #365b83;
    padding-top: 30px;
    box-shadow: 0px 0px 27px #3b466f  inset;
    background-color: #c3ddfd;
}


.slotprocess.premium.free .sbefore {
    text-align: center;
    font-size: 12px;
    color: #816002;
    padding-top: 30px;
    box-shadow: 0px 0px 27px #FFC107 inset;
    background-color: #ffebd6;
}



.slotprocess.fail .img {
    filter: grayscale(1);
}


.slotprocess.mining {
    /*background-image: url(slots/bcgkr/mining.png);*/
}


.slotprocess_subhelp {
    display: block;
    position: absolute;
    min-width: 120px;
    min-height: 40px;
    background-color: var(--subtext_color-background);
    z-index: 1000000;
    color: var(--subtext_color);
    animation: var(--animation-subtext-fadeinFast);
    font-family: var(--fontFaimly_default);
    box-sizing: border-box;
    padding: 10px 15px 17px;
    pointer-events: none;
    filter: var(--subtext_shadow);
}
.slotprocess_subhelp:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--subtext_color-background);;
    position: absolute;
    top: -10px;
    left: calc(50% - 10px);
}

.slotprocess_subhelp .name{
    font-size: 13px;
    display: block;
    text-align: center;
    padding: 5px 0px 0px 0px;
    color: #ffbc00;
}
.slotprocess_subhelp .locality{
    
    display: block;
    text-align: center;
    padding: 5px 0px 0px 0px;
}
.slotprocess_subhelp .resttime{
    display: block;
    text-align: center;
    padding: 5px 0px 0px 0px;
    color: white;
    font-size: 12px;
}

.slotprocess.premium.free:before{
    background-color: #ffbc00 !important;
}

.slotprocess.add{
    cursor: pointer !important;
    clip-path: var(--clip_production_slot);
    
}

.slotprocess.add .sbefore{
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 8px 5px 0px 10px;
    background-color: var(--gitem-background) !important;
    line-height: 15px;
    color: #ffbc00;
    text-align: center;
    background-image: url(prembanner_icon.png);
    background-position: 28px 41px;
    background-repeat: no-repeat;
    background-size: 28px;
    font-size: 12px;
    clip-path: var(--clip_production_slot);
}

.slotprocess.add .name{
    color: white !important;
    font-family: var(--fontFaimly_header);
    font-size: 17px !important;
    background-image: url(ico/plus_gold-24.png);
}

.slotprocess.add:hover {
    animation: blink 100ms linear 2 alternate;
}

.slotprocess .progressbar{
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    height: 7px;
    left: 10px;
    background-color: rgb(0,0,0);
    border-left: 2px solid var(--border-effect-color);
    border-right: 2px solid var(--border-effect-color);
    
}

.slotprocess .progressbar .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgb(152,100,17);
    top:0px
}

.slotprocess.construction .bar{
    background-color: var(--hud_construction_bar_color);
}
.slotprocess .progressbar .paused{
    position: absolute;
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--hud_invalid_color);
    line-height: 14px;
    text-shadow: var(--shadow_textfull);
    text-align: center;
}

.slotprocess .img{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    filter: grayscale(1);
    clip-path: var(--clip_production_slot);
}

html{
    margin:0;
    padding:0;
    font-size:12px;
    height:100%;
    position:relative;
    min-width:650px;
    min-height:375px;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color:black;  
    scrollbar-color: #747475 #1b1b1d;
}
body{
    margin:0;
    padding:0;
    font-family:var(--fontFaimly_default);
    font-size:12px;
    height:100%;
    width:100%;
    position:relative;
    background-color:black;
    overflow:hidden;
    
}



@media (max-width: 520px) {
    html {
        min-width:360px;
    }
}

.module-artefacts{
    position: relative;
    display: block;
    text-align: center;
}

.module-artefacts .artef{
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
    text-align: center;
    
}

.module-artefacts .artef.hoverable{
    cursor: pointer;
}





.module-artefacts .artef.hoverable:hover:after{
    /*animation: blink 100ms linear 2;*/
    background-color: rgb(80,80,80);
}

.module-artefacts .artef:not(.disabled).hoverable:hover .img{
    animation: blink 100ms linear 2;

}

.module-artefacts .artef:hover .artefactboxhtmlx{
    display: block;
}

.module-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;
    line-height: 32px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
    
}

.module-artefacts .artef.disabled .img{
    filter: grayscale(1); 
}

.module-artefacts .artef:after{
        content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    background-image: linear-gradient(180deg, rgb(155 107 0 / 37%) 25%, rgb(0 0 0) 100%);
    box-sizing: border-box;
    z-index: -1;
    border: 1px solid #735519;

}

.module-artefacts .artef.disabled:after{
    background-image: linear-gradient(180deg, rgb(220 62 62 / 31%) 25%, rgb(0 0 0 / 71%) 100%);
    border: 1px solid rgb(220 62 62 / 31%);
}

.module-artefacts .artef.artef_slots:after{
    background-image: linear-gradient(180deg, rgb(123 220 62 / 20%) 25%, rgb(0 0 0 / 71%) 100%);
    border: 1px solid rgb(123 220 62 / 20%);
}
#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx,
#modulecraft .artefacts .artefact .artefactboxhtmlx,
.module-artefacts .artef .artefactboxhtmlx {
    display: none;
    position: absolute;
    top: 6px;
    left: 110%;
    width: 202px;
    background-color: black;
    min-height: 20px;
    padding: 7px;
    z-index: 1000;
    color: var(--subtext_color);
    box-sizing: border-box;
    background-color: var(--subtext_color-background);
    
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx,
#modulecraft .artefacts .artefact .artefactboxhtmlx{
    
    top: calc(30% - 10px);
    left: calc(80% - 10px);
    
    
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx:before,
#modulecraft .artefacts .artefact .artefactboxhtmlx:before,
.module-artefacts .artef .artefactboxhtmlx:before{
    content: "";
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid var(--subtext_color-background);
    position: absolute;
    top: 0px;
    left: -10px;
}
#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .name,
#modulecraft .artefacts .artefact .artefactboxhtmlx .name,
.module-artefacts .artef .artefactboxhtmlx .name{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 5px 0px;
    bottom: unset;
    left: unset;
    right: unset;
    height: unset;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .name span,
#modulecraft .artefacts .artefact .artefactboxhtmlx .name span,
.module-artefacts .artef .artefactboxhtmlx .name span{
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    color: #ffbc00;
    font-size: 14px;
    line-height: 17px;
    font-family: var(--fontFaimly_button);
    
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .subname,
#modulecraft .artefacts .artefact .artefactboxhtmlx .subname,
.module-artefacts .artef .artefactboxhtmlx .subname{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 5px 0px;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .subname span,
#modulecraft .artefacts .artefact .artefactboxhtmlx .subname span,
.module-artefacts .artef .artefactboxhtmlx .subname span{
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    color: #008dff;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .restriction,
#modulecraft .artefacts .artefact .artefactboxhtmlx .restriction,
.module-artefacts .artef .artefactboxhtmlx .restriction{
    position: relative;
    width: 100%;
    text-align: center;
    padding: 2px 0px;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .restriction span,
#modulecraft .artefacts .artefact .artefactboxhtmlx .restriction span,
.module-artefacts .artef .artefactboxhtmlx .restriction span{
    text-transform: uppercase;
    color: #008dff;
    
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .restriction span.unpassed,
#modulecraft .artefacts .artefact .artefactboxhtmlx .restriction span.unpassed,
.module-artefacts .artef .artefactboxhtmlx .restriction span.unpassed{
    color: red;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .restriction span.passed,
#modulecraft .artefacts .artefact .artefactboxhtmlx .restriction span.passed,
.module-artefacts .artef .artefactboxhtmlx .restriction span.passed{
    color: green;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .descr,
#modulecraft .artefacts .artefact .artefactboxhtmlx .descr,
.module-artefacts .artef .artefactboxhtmlx .descr{
    position: relative;
    width: 100%;
    text-align: center;
    display: table;
    padding: 2px 0px;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .descr p,
#modulecraft .artefacts .artefact .artefactboxhtmlx .descr p,
.module-artefacts .artef .artefactboxhtmlx .descr p{
    padding: 0px;
    margin: 0px;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .descr span,
#modulecraft .artefacts .artefact .artefactboxhtmlx .descr span,
.module-artefacts .artef .artefactboxhtmlx .descr span{
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    line-height: 19px;
}

#modulecraft .slots .slotmap .artefactbox .artefactboxhtmlx .descr span b,
#modulecraft .artefacts .artefact .artefactboxhtmlx .descr span b,
.module-artefacts .artef .artefactboxhtmlx .descr span b{
    color: #ffbc00;
    font-size: 15px;
}

.inline_weaponslots .li,
.inline_weaponslots .me,
.inline_weaponslots .he {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

.inline_weaponslots .li {
    background-image: url('ico/weapon_light-32.png');
}
.inline_weaponslots .me {
    background-image: url('ico/weapon_medium-32.png');
}
.inline_weaponslots .he {
    background-image: url('ico/weapon_heavy-32.png');
}

.inline_weaponslots .sub {
    display: none;

}

.inline_weaponslots > span: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% + 10px);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}

.inline_weaponslots > span: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: 6px;
    right: -12px;


}


.inline_accuracy {
}
.inline_accuracy .sr,
.inline_accuracy .mr,
.inline_accuracy .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
}

.inline_accuracy .ssr.value,
.inline_accuracy .smr.value,
.inline_accuracy .slr.value {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 59.5%;
}

.inline_accuracy .ssr.bonus,
.inline_accuracy .smr.bonus,
.inline_accuracy .slr.bonus {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_accuracy .ssr.bonus:before,
.inline_accuracy .smr.bonus:before,
.inline_accuracy .slr.bonus:before {
    content: '+';
    position: absolute;
    top: 0px;
    left: -20px;
    width: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 20px;
}

.inline_accuracy .sr {
    background-image: url('ico/accuracy_short-32.png');
}
.inline_accuracy .mr {
    background-image: url('ico/acurracy_medium-32.png');
}
.inline_accuracy .lr {
    background-image: url('ico/accuracy_long-32.png');
}

.inline_range {
}
.inline_range .sr,
.inline_range .mr,
.inline_range .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
}

.inline_range .value.from,
.inline_range .value.from,
.inline_range .value.from {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 49.5%;
}

.inline_range .value.to,
.inline_range .value.to,
.inline_range .value.to {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_range .value.to:before,
.inline_range .value.to:before,
.inline_range .value.to:before {
    content: '';
    position: absolute;
    top: 0px;
    left: -17.5px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    background-image: url('ico/range_between-32.png');
}

.inline_range .sr {
    background-image: url('ico/attack_short-32.png');
}
.inline_range .mr {
    background-image: url('ico/attack_medium-32.png');
}
.inline_range .lr {
    background-image: url('ico/attack_long-32.png');
}

.inline_attack {
}
.inline_attack .sr,
.inline_attack .mr,
.inline_attack .lr {
    display: block;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
}

.inline_attack .ssr.value,
.inline_attack .smr.value,
.inline_attack .slr.value {
    float: left;
    display: block;
    text-align: right;
    box-sizing: border-box;
    width: 49.5%;
}

.inline_attack .ssr.bonus,
.inline_attack .smr.bonus,
.inline_attack .slr.bonus {
    position: relative;
    float: right;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
}

.inline_attack .ssr.bonus:before,
.inline_attack .smr.bonus:before,
.inline_attack .slr.bonus:before {
    content: '+';
    position: absolute;
    top: 0px;
    left: -20px;
    width: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 20px;
}

.inline_attack .sr {
    background-image: url('ico/attack_short-32.png');
}
.inline_attack .mr {
    background-image: url('ico/attack_medium-32.png');
}
.inline_attack .lr {
    background-image: url('ico/attack_long-32.png');
}




.inline_attacktype {
}
.inline_attacktype .beam,
.inline_attacktype .kinetic,
.inline_attacktype .plasma {
    display: inline-block;
    width: 58px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 10px;
}

.inline_attacktype .beam {
    background-image: url('ico/damage_beam-32.png');
}
.inline_attacktype .kinetic {
    background-image: url('ico/damage_kinetic-32.png');
}
.inline_attacktype .plasma {
    background-image: url('ico/damage_plasma-32.png');
}


.inline_defense {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: min-content;
}

.inline_defense .beam,
.inline_defense .kinetic,
.inline_defense .plasma {
    display: block;
    position: relative;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
    line-height: 20px;
    box-sizing: border-box;
    font-size: 14px;
    white-space: nowrap;

}

.inline_defense .beam {
    background-image: url('ico/damage_beam-32.png');
}
.inline_defense .kinetic {
    background-image: url('ico/damage_kinetic-32.png');
}
.inline_defense .plasma {
    background-image: url('ico/damage_plasma-32.png');
}

.inline_defense .sub {
    display: none;

}

.inline_defense > span: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% + 10px);
    line-height: 13px;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
}

.inline_defense > span: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: 6px;
    right: -12px;
}


.inline_stations {
}
.inline_stations .tac,
.inline_stations .eng,
.inline_stations .sci {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
    position: relative;
    padding: 0px;
    margin: 0px 1px;
}



.inline_stations .tac {
    background-image: url('ico/stations_t.png');
}
.inline_stations .eng {
    background-image: url('ico/stations_e.png');
}
.inline_stations .sci {
    background-image: url('ico/stations_s.png');
}

.inline_stations .tac .qty,
.inline_stations .eng .qty,
.inline_stations .sci .qty {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: var(--fontFaimly_button);

}

.inline_stations .tac .min,
.inline_stations .eng .min,
.inline_stations .sci .min {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    line-height: 15px;
    color: white;
    font-size: 10px;
    margin: 0px 0px;
    padding: 0px;
    font-family: var(--fontFaimly_button);

}

.inline_stations .tac .min{
    background-color: rgb(159,17,14);
}
.inline_stations .eng .min{
    background-color: rgb(37,96,128);
}
.inline_stations .sci .min{
    background-color: rgb(61,137,127);
}


.inline_stations .tac .qty{
    color: rgb(159,17,14);
}
.inline_stations .eng .qty{
    color: rgb(37,96,128);
}
.inline_stations .sci .qty{
    color: rgb(61,137,127);
}



.inline_tes {
    width: 100%;
    display: block;
    
    white-space: nowrap;
}

.inline_tes .tactical,
.inline_tes .engineer,
.inline_tes .science  {
    width: auto;
    margin: 0px 1px;

}

.title .tactical,
.title .engineer,
.title .science {
    transform: translateY(-3px);
}

.tactical,
.engineer,
.science {
    display: inline-block;
    position: relative;
    height: 22px;
    min-width: 33px;
    color: silver;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    padding: 0px 10px;
    margin: 0px 1px;
    box-sizing: border-box;
    font-family: var(--fontFaimly_button);
    z-index: 1;
    white-space: nowrap;
}



.tactical:before,
.engineer:before,
.science: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%);
}


.tactical:before{
    
    clip-path: var(--clip_t);
}
.engineer:before{
    
    clip-path: var(--clip_e);
}
.science:before{
    
    clip-path: var(--clip_s);
}

.tactical:not(.grayed):before{
    background-color:var(--color-t); 
}
.engineer:not(.grayed):before{
    background-color:var(--color-e);
}
.science:not(.grayed):before{
    background-color:var(--color-s);
}


.bigscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.bigscreen .centerbox {
    position: absolute;
    top: 38%;
    left: calc(50% - 200px);
    width: 400px;
}

.subtext-infosign {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 12px;
    margin-left: 3px;
}

.subtext-infosign: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;
}

.subtext {
    position: absolute;
    display: none;
    right: 25px;
    max-width: 200px;
    min-width: 180px;
    font-size: 12px;
    background-color: var(--subtext_color-background);
    padding: 6px 10px;
    box-sizing: border-box;
    z-index: 10000;
    line-height: initial;
    text-align: left;
    color: var(--subtext_color);
    bottom: calc(100% - 15px);
    animation: var(--animation-subtext-fadein);
    text-transform: none;
    white-space: initial;
    font-family: var(--fontFaimly_default);
    pointer-events: none;
    filter: var(--subtext_shadow);
    text-shadow: none;
}

#cstation .assembly_modules .module_body .hoverbox .unablebutton .subtext {
    animation: var(--animation-subtext-fadeinFast);
}

.subtext .aimg {
    position: relative;
    display: block;
    height: 50px;
    width: 50px;
    margin: 0px auto 5px;
}

.subtext .aimg .aimgg {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 60px;
    filter: brightness(1.0) grayscale(0.5);
    background-position: 50% -7px;
    background-repeat: no-repeat;
}

.subtext .bimg {
    position: relative;
    display: block;
    height: 60px;
    width: 80%;
    margin: 4px auto 3px;
}

.subtext .bimg .bimgg {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    filter: brightness(1.0) grayscale(0.5);
    background-position: 50% -7px;
    background-repeat: no-repeat;
}

.subtext .nimg {
    position: relative;
    display: block;
    height: 60px;
    width: 120px;
    margin: 0px auto 5px;
}

.subtext .nimg .nimgg {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    filter: brightness(1.0) grayscale(0.5);
    background-position: center;
    background-repeat: no-repeat;
}

.subtext .nname {
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: center;
    display: block;
    font-size: 14px;
    margin: 2px 0px 3px;
}

.subtext .ndifficulty {
    color: #ed9d03;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: center;
    display: block;
    font-size: 12px;
    margin: 2px 0px 9px;
}


.subtext span.fparm .inline_defense{
    position: absolute;
    top: 0px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.subtext span.fparm .inline_defense > span{
    
    
    font-size: 13px;
    background-size: 14px;
    
}

.subtext span.fparm{
    font-size: 12px;
    padding-top: 0px;
    display: block; 
    position: relative;
    min-height: 20px;
}

.subtext span.fparm .fparmleft{
    
    font-size: 12px;
    left: 5px;
    display: block; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}

.subtext span.fparm .fparmright{
    right: 5px;
    font-size: 13px;
    
    display: block; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fontFaimly_button);
}


.subtext span.fparm.ffexperience .fparmright{
    color: #ffbc00;
    
}
.subtext .aname {
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    text-align: center;
    display: block;
    font-size: 14px;
    margin: 2px 0px 4px;
}

.subtext .ates {
    margin: 7px 0px 10px;
    display: block;
    text-align: center;
}

.subtext .price {
    margin: 5px 0px 5px;
    display: block;
    text-align: center;
    color: #bdb322;
    font-size: 14px;
}

.subtext .fline {
    display: block;
    height: 15px;
    position: relative;
}

.subtext .fline:before {
    content: '';
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 3px;
    background-color: #ffffff3b;
    clip-path: var(--clip_underline);
}

.subtext .font-magic {
    color: rgb(0, 112, 202);
}

.subtext .font-bold {
    
}

.subtext .font-positive {
    color: green;
}

.subtext .font-negative {
    
}

.subtext .sitem .comodity {
    position: relative;
}

.subtext .sitem .comodity .html{
    padding: 3px 0px 5px;
}

.subtext .sitem .comodity .html .module-artefacts{
    text-align: left;
}

.subtext .sitem .comodity .comodity-headliner{
    position: relative;
    min-height: 57px;
}

.subtext .sitem .comodity .comodity-headliner .comodity-name {
    font-size: 18px;
    padding: 5px 95px 0px 0px;
    color: #ffbc00;
}

.subtext .sitem .comodity .comodity-headliner .comodity-name .stockpiled-inline {
    padding-left: 23px;
}

.subtext .sitem .comodity .comodity-headliner .comodity-name .stockpiled-inline:before {
    top: 12px;
}

.subtext .sitem .comodity .comodity-headliner .comodity-subname {
    font-size: 12px;
    padding: 3px 95px 7px 0px;
}




.subtext .sitem .comodity .comodity-headliner .comodity-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 70px;
}
.subtext .sitem .comodity .comodity-headliner .comodity-amount {
    font-size: 12px;
    padding: 5px 95px 3px 0px;
    color: dimgrey;
}
.subtext .sitem .comodity .comodity-headliner .comodity-amount .comodity-qty {
    display: inline;
    white-space: nowrap; 
}

.subtext .sitem .comodity .comodity-headliner .comodity-amount .comodity-mu {
    display: inline;
    padding-left: 3px;
    white-space: nowrap;
}

.subtext .sitem .comodity .comodity-description {
    font-size: 12px;
    padding: 12px 0px 0px 0px;
    position: relative;
    
}

.subtext .sitem .comodity .comodity-description:before {
    content: '';
    position: absolute;
    display: block;
    left: 0px;
    right: 90px;
    top: 0px;
    height: 3px;
    background-color: #ffffff3b;
    clip-path: var(--clip_underline);
}

.subtext .qty {
    margin: 0px 4px;
    font-size: 10px;
    padding: 0px 6px 0px 6px;
    color: #ffbc00;
    position: relative;
    white-space: nowrap;
    line-height: 14px;
    display: inline;
}

.subtext .qty:before {
    content: '(';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0.5; 
}

.subtext .qty:after {
    content: ')';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.5;
}

.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);
   
}

.subtext span.fname,
.button-shrotcut .ctrl-subtext span.fname{
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    clear: both;
   
}

.subtext span.fname .fimg,
.button-shrotcut .ctrl-subtext span.fname .fimg{
    float: left;
    margin: 0px 7px 7px 0px;
    max-width: 30px;
    max-height: 30px;
}

.subtext span.funame {
    display: block;
    font-family: var(--fontFaimly_button);
    font-size: 14px;
    padding-bottom: 5px;
}

.subtext span.funame .uname {
    display: block;
    
}

.subtext span.funame .cname {
    display: block;
    
}

.subtext span.fval {
    display: block;
    font-family: var(--fontFaimly_button);
    font-size: 18px;
    padding-bottom: 3px;
    padding-top: 3px;
    color: gold;
}

.subtext span.fval small {
    padding-left: 5px;
    font-size: 14px;
    color: goldenrod;
}


.subtext span.ftable,
.button-shrotcut .ctrl-subtext span.ftable{
   
}


.subtext span.ftable .s-solarefficiency {
    padding-left: 16px;
    background-image: url(./ico/solar_16.png);
    background-size: 14px; 
    background-repeat: no-repeat;
    background-position: left center;
}

.subtext span.ftable table,
.button-shrotcut .ctrl-subtext span.ftable table{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    margin-top: 5px;
}

.subtext span.ftable table tbody tr td,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr td{
    font-size: 12px;
    padding: 3px;
    color: var(--subtext_color);
}

.subtext span.ftable table tbody tr td.tt-x,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr td.tt-x{
    padding-left: 14px;
    background-image: url(./ico/multiply-2-16.png);
    background-size: 7px; 
    background-repeat: no-repeat;
    background-position: center;
}

.subtext span.ftable table tbody tr td.tt-val,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr td.tt-val{
    white-space: nowrap; 
    text-align: right;
    color: white;
}

.subtext span.ftable table tbody tr td.tt-exp,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr td.tt-exp{
    white-space: nowrap;
    text-align: right;
}

.subtext span.ftable table tbody tr td.tt-sub,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr td.tt-sub{
    white-space: nowrap;
    text-align: right;
}

.subtext span.ftable table tbody tr.ttr-total td,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr.ttr-total td{
    border-top: 1px solid var(--subtext_color);
    padding-top: 8px;
    padding-bottom: 4px;
    color: white;
}

.subtext span.ftable table tbody tr.ttr-total td.tt-total,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr.ttr-total td.tt-total{
    white-space: nowrap;
    text-align: right;
    color: gold;
}

.subtext span.ftable table tbody tr th,
.button-shrotcut .ctrl-subtext span.ftable table tbody tr th{
    
}

.subtext span.ftxt,
.button-shrotcut .ctrl-subtext span.ftxt {
    font-size: 12px;
    padding-top: 5px;
    display: block; 
    white-space: normal;
    width: auto;
}

.subtext span.ftxt .ftes,
.button-shrotcut .ctrl-subtext span.ftxt .ftes {
    margin: 4px 2px;
    display: inline-block;
}

.subtext span.ftxt .ftes .tactical,
.subtext span.ftxt .ftes .engineer,
.subtext span.ftxt .ftes .science,
.button-shrotcut .ctrl-subtext span.ftxt .ftes .tactical,
.button-shrotcut .ctrl-subtext span.ftxt .ftes .engineer,
.button-shrotcut .ctrl-subtext span.ftxt .ftes .science {
    height: 16px;
    min-width: 30px;
    color: silver;
    width: unset;
    font-size: 12px;
    line-height: 16px;
    padding: 0px 6px;
    margin: 0px 1px;
    
}

.subtext span.ftxt .gold,
.button-shrotcut .ctrl-subtext span.ftxt .gold {
    color: gold;
}

.subtext span.fvalue {
    display: block;
    font-family: var(--fontFaimly_button);
    color: gold;
    font-size: 17px;
}


.subtext span.fcalculation {
    display: block;
    font-family: var(--fontFaimly_button);
    color: darkgoldenrod;
    font-size: 12px;
}

.subtext span.fcalculation .neg{
    color: var(--hud_invalid_color);;
}

.subtext span.fcalculation .pos{
    color: #347156;
}


.subtext span.fpreminfo,
.button-shrotcut .ctrl-subtext span.fpreminfo{
    font-size: 12px;
    padding-top: 5px;
    display: block; 
    color: #ffbc00;
}

.subtext span.reason {
    font-size: 12px;
    padding-top: unset;
    display: block;
    color: var(--hud_invalid_color);
    font-family: var(--fontFaimly_button);
}

.subtext .shtct {
    display: block;
    margin: 5px 0px 0px 0px;
}



.subtext.astronaut {
    width: 220px;
    max-width: unset;
    animation: var(--animation-subtext-fadeinFast);
    
}

.subtext.iteminfo {
    width: 290px;
    max-width: unset;
    min-height: 100px;
    bottom: unset;
    top: unset;
    left: unset;
    right: unset;
    animation: var(--animation-subtext-fadeinFast);
}

.subtext.iteminfo.levy {
    top: calc(50% - 5px);
    bottom: unset;
    right: calc(100% - 0px);
    left: unset;
}

.subtext.iteminfo:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    bottom: unset;
    right: -5px;
    border-left: 5px solid var(--subtext_color-background);
    
}





.subtext.dolni {
    top: calc(50% - 5px);
    bottom: unset;
    right: calc(100% - 0px);
}

.subtext.dolni:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    bottom: unset;
    right: -5px;
    border-left: 5px solid var(--subtext_color-background);
    
}

.subtext.horni:before,
.subtext.pravy.horni:before{
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: unset;
    bottom: 0px;
    left: -5px;
    right: unset;
    border-right: 5px solid var(--subtext_color-background);
    border-left: none;
    
}

.subtext.levy.horni:before{
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    bottom: 0px;
    top: unset;
    right: -5px;
    left: unset;
    border-left: 5px solid var(--subtext_color-background);
    border-right: none;
    
}

.subtext.scombox {
    left: calc(21px);
    right: unset;
    top: unset;
    bottom: 7px;
    width: 126px;
    
    min-width: unset;
    animation: var(--animation-subtext-fadeinSuperSlow);
}


.subtext.scombox:before{
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: unset;
    bottom: 0px;
    left: -5px;
    right: unset;
    border-right: 5px solid var(--subtext_color-background);
    border-left: none;
    
}

.subtext.sradar {
    left: unset;
    right: calc(100% - 0px);
    top: 5px;
    bottom: unset;
   
   
    animation: var(--animation-subtext-fadeinSuperSlow);
    
}

.subtext.sradar:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    bottom: unset;
    left: unset;
    transform: translateX(-50%);
    right: -5px;
    border-left: 5px solid var(--subtext_color-background);
    border-right: none;
    
}
 
.subtext.pravy { 
    left: calc(100% - 5px);
    right: unset
}


.subtext.stredni.horni {
    bottom: calc(100% - -5px);
    left: 50%;
    transform: translateX(-50%);
    top: unset;
    right: unset;
    
}

.subtext.stredni.horni:before {
    content: "";
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    bottom: -5px;
    top: unset;
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    border-top: 5px solid var(--subtext_color-background);
    border-bottom: none;
 }

.subtext.stredni.dolni {
    top: calc(100% - -5px);
    left: 50%;
    transform: translateX(-50%);
    bottom: unset;
    right: unset;
    
}

.subtext.stredni.dolni:before {
    content: "";
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: -5px;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    border-bottom: 5px solid var(--subtext_color-background);
    border-top: none;
    
}


.subtext.pravy:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: unset;
    bottom: 0px;
    left: -5px;
    right: unset;
    border-right: 5px solid var(--subtext_color-background);
    border-left: none;
}

.subtext.dolni.pravy:before {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    bottom: unset;
    left: -5px;
    right: unset;
    border-right: 5px solid var(--subtext_color-background);
    border-left: none;
}

.subtext.uzky {
    max-width: 100px;
    min-width: 80px;
}

.subtext.uzsi {
    max-width: 145px;
    min-width: 145px;
}

.subtext.sirsi {
    max-width: 220px;
    min-width: 160px;
}

.subtext.strednesiroky {
    max-width: 400px;
    min-width: 200px;
}

.subtext.siroky {
    max-width: 400px;
    min-width: 280px;
}

.subtext.supersiroky {
    max-width: 500px;
    min-width: 380px;
}


.subtext.pomaly {
    animation: var(--animation-subtext-fadeinSlow);
}

.subtext.rychly {
    animation: var(--animation-subtext-fadeinFast);
}

.ctrl-key:before{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: 7px;
    background-position: center;
    box-sizing: border-box;
}

.ctrl-key {
    display: inline-block;
    cursor: pointer;
    color: #595959;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 10px;
    font-family: var(--fontFaimly_button);
    height: 18px;
    min-width: 18px;
    margin: 2px 4px;
    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;
}

.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;
}
.ctrl-key img{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 12px;
    max-height: 12px;
    transform: translateX(-50%) translateY(-50%);
}


.ctrl-key.lmb:before{
    background-image: url(ico/ico_inline_lmb_white.png);
}

.ctrl-key.mmb:before{
    background-image: url(ico/ico_inline_mmb_white.png);
}

.ctrl-key.rmb:before{
    background-image: url(ico/ico_inline_rmb_white.png);
}

.ctrl-key.plus:before{
    background-image: url(ico/plus-24.png);
}

.ctrl-key.minus:before{
    background-image: url(ico/minus-24.png);
}

.csremark {
    display: inline-block;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid #a9a9a9;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
    color: black;
    margin: 2px;
}

.csremark.red{ 
    background-color: transparent;
    border: 1px solid #871212;
    color: #cf8181;
}

.csremark.orange{ 
    background-color: transparent;
    border: 1px solid rgb(121 82 0);
    color: rgb(191 135 3);
}

.csremark.green{ 
    background-color: transparent;
    border: 1px solid #035f1e;
    
    color: #61c750;
}

.csremark.blue{ 
    background-color: transparent;
    border: 1px solid rgb(55 127 127);
    
    color: rgb(100,255,255);
}

@media (max-width: 520px) {
    .bigscreen .centerbox {
        right: 10px;
        left: 10px;
        width: unset;
        bottom: unset;
        top: 150px;
    }

    .bigscreen .centerbox:before {
        top: -50px;
        left: 0px;
        right: 0px;
    }


}



.bigscreen .logo {
    position: absolute;
    top: 10%;
    left: calc(50% - 200px);
    width: 400px;
    color: white;
    text-align: center;
    
}

.bigscreen .logo .logoimg {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 90px;
    background-image: url(https://account.outspacegame.com/img/osg_logo_150.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    /* animation: crt 5000ms linear infinite; */
    filter: drop-shadow(0px 0px 5px var(--logo_shadow_color1)) drop-shadow(0px 0px 15px var(--logo_shadow_color2));

}

.bigscreen .serverinfo {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: white;
    text-align: left;
    color: gray;
}

.bigscreen .serverinfo .servername {
    font-family: var(--fontFaimly_header);
    display: inline;
   
   
    text-transform: uppercase;
   
    
}

.bigscreen .serverinfo .serverversion {
    display: inline;
   
    
}


.bigscreen .logininfo {
    position: relative;


    background: rgba(0,0,0,.4);
    color: white;
    text-align: center;
    font-size: 12px;
    margin: 0px 0px 15px;
}

.bigscreen .logininfo h1 {
    font-family: var(--fontFaimly_header);
    font-size: 25px;
    padding: 8px 0px 0px 0px;
    margin: 0px;
    text-transform: uppercase;
}

.bigscreen .logininfo p {
    font-size: 16px;
    padding: 7px 15px 13px;
    margin: 0px;
    color: #ffedcc;
    line-height: 22px;
}


.bigscreen .loginform {
    position: relative;
    height: 200px;
}


.bigscreen .loginform table  {
    position: absolute;
    width: 80%;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.bigscreen  .kiosk-banner {
    background-image: url(kiosk-banner.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    width: 100vw;
    max-width: 800px;

    aspect-ratio: 800 / 334;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.bigscreen  .kiosk-banner .text {
    display: block;
    position: absolute;
    bottom: 6%;
    left: 5%;
    color: #f7921c;
    font-size: 89px;
    font-family: var(--fontFaimly_button);
    text-shadow: var(--shadow_textfull);
}

.bigscreen  .kiosk-banner:hover {
    animation: blink 100ms linear 2;
    filter: brightness(1.1);
}


.bigscreen .loginform .directlogin td  {
    position: relative;
    text-align: left;
    padding-top: 20px;

}

.bigscreen .loginform .directlogin td.txt  {
    position: relative;
    text-align: right;
    height: 35px;
    padding-right: 10px;
    color: #d7d7d7;
    font-size: 13px;
    text-shadow: var(--shadow_textfull);
}




.bigscreen .loginform .directlogin td .discord_oauth  {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./Discord-Logo-White.png) center no-repeat;
    background-size: 30px;
    padding: 5px 0px 0px 0px;
}




.bigscreen .loginform .loginsubmit  {
    text-align: center;
    height: 35px;
}


.bigscreen .loginform .directloginmail td  {
    padding: 25px 0px 20px 0px;
    text-align: center;
}

.bigscreen .loginform .directloginmail td .txt  {
    position: relative;
    text-align: center;
    color: white;
    margin-bottom: 10px;
    line-height: 21px;
    font-size: 15px;
}

.bigscreen .loginform .directloginmail td .txt a  {
    /*text-transform: uppercase; */
    /* color: black; */
    /* background-color: white; */
    display: inline-block;
    text-decoration: none;
    /* padding: 2px 10px; */
    /* clip-path: var(--clip_whitelink); */
    text-shadow: none;
    /* font-family: var(--fontFaimly_button); */
    white-space: nowrap;
    text-decoration: underline;
}

.bigscreen .loginform .register td {
    text-align: center;
    padding-top: 20px;
}

.bigscreen .loginform .register td .txt  {
    position: relative;
    text-align: center;
    color: #ffbc00;
    font-size: 14px;
    /* margin-bottom: 10px; */
    text-shadow: var(--shadow_textfull);
}

.bigscreen .loginform .register a  {
    text-transform: uppercase;
    color: black;
    background-color: #ffbc00;
    display: inline-block;
    text-decoration: none;
    padding: 2px 10px;
    font-size: 13px;
    font-family: var(--fontFaimly_button);
    text-shadow: none;
    margin: 3px;
    clip-path: var(--clip_whitelink);
}

.bigscreen .main-logo {
    position: absolute;
    top: 40px;
    left: calc(50% - 200px);
    width: 400px;
    height: 120px;
    z-index: 100000000000;
    background: url(osg_logo_150.png) center no-repeat;
    background-size: 400px;
}
.bigscreen .designby {
    position: absolute;
    right: 20px;
    bottom: 14px;
    width: 200px;
    height: 50px;
    background-image: url(https://account.outspacegame.com/img/graphics_by.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    z-index: 1000;
}


.legal  {
    display: block;
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 15px;
    z-index: 1000;
    padding: 0px calc(50% - 880px);
    font-size: 13px;
}


@media (max-width: 700px), (max-height: 600px) { 
    .legal  {
        display: none;
        
        
    }   
}
.legal h2  {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    text-align: center;
    padding: 5px 0px 5px;
    margin: 0px;
}
.legal p  {
    display: block;
    color:  rgba(255,255,255,0.5);
    
    text-align: center;
    padding: 0px 10px 3px;
    margin: 0px;
}


.bigscreen .loginlogo {
    position: absolute;
    left: calc(50% - 400px);
    top: calc(50% - 400px);
    width: 800px;
}
.bigscreen .loginform .input input[type="text"],
.loginform .input input[type="password"]  {
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    font-size: 17px;
    border: 1px solid rgba(255,255,255,0.8);
    color: white;
    background-color: rgba(0,0,0,0.8);
    padding: 0px 10px;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-shadow: -3px 0px 0 rgba(255,131,64,.4), 3px 0px 0 rgba(126, 250, 255, .4);
    animation: shadowing 5000ms linear infinite;
}
.bigscreen .loginform .loginsubmit button{
    position: relative;
    display: inline-block;
    min-width: 100px;
    margin: 15px 0px; 
}

.ajax-loader{
    display:block;
    position:absolute;
    top:40px;
    left:45%;
    text-align:center;
    z-index:9999999;
    color:gray;
    font-size:12px;
    line-height:20px;
    background:url(./img/loading.gif) center left no-repeat;
    background-size:30px;
    padding-left:30px;
}
.ajax-loader img{
    position:absolute;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    opacity:0.3;
}
span.hint{
    font-size:12px !important;
    color:white !important;
    font-weight:normal !important;
}

.message{
    display: block;
    color: gray;
    text-align: center;
    position: relative;
    font-size: 20px;
    padding: 8px 8px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 33px;
    font-family: var(--fontFaimly_header);
}
.message .solution{
    display:block;
    text-align:center;
    padding-top:20px;
}

h1{
    font-weight:normal;
    font-size:37px;
    color:white;
    margin:15px 0px;
}
h2{
    font-weight:normal;
    font-size:22px;
    color:white;
    margin:10px 0px;
}
.symbol_credit{
    display:inline-block;
    font-size:31px;
    font-weight:normal;
    letter-spacing:-1px;
    padding-left:30px;
    background:url(ico/money_32.png) left no-repeat;
}

.small_credit{
    display:inline-block;
    font-weight:bold;
    padding-left:14px;
    background:url(ico/money_16.png) left no-repeat;
}
.small_morale{
    display:inline-block;
    font-weight:bold;
    padding-left:20px;
    background:url(ico/morale_16.png) left no-repeat;
}
.staticpage-stars{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.reasoninfo {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.reasoninfo .reason {
    
   display: block;
    color: black;
    
    background-color: var(--hud_invalid_background);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    text-shadow: none;
    padding: 2px 9px;
    clip-path: var(--clip_whitelink);
    font-family: var(--fontFaimly_button);
}


.title {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 60px;
    color: #afc2ed;
    box-sizing: border-box;
    line-height: 19px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 19px;
    text-align: center;
    padding: 9px 0px 0px 60px;
    
}




.title.dragable{
    cursor: pointer;
}
.title.dragable:hover{

    animation: blink 100ms linear 2 alternate;

}



.user_box {
    position: relative;
    height: 50px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}


.user_box .pvprank {
    position:absolute;
    top: 0px;
    left: 0px;
}

.user_box .uimgd {
    position:absolute;
    width:50px;
    height: 50px;
    top: 0px;
    left: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.user_box .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;
}

.user_box .ucname {
    position:absolute;
    top:17px;
    left: 80px;
    color: rgb(100,100,100);
    font-size: 10px;
}

.user_box .uname {
    position:absolute;
    top:0px;
    left: 80px;
    color: rgb(150,150,150);
    font-size: 12px;
    text-transform: uppercase;
    display: block;
}

.user_box .conviction {
    position: absolute;
    top: 35px;
    left: 80px;
    background-size: 15px;
    background-position: 0px 0px;
    padding-left: 21px;
    background-repeat: no-repeat;
    line-height: 15px;
    height: 15px;
    min-width: 15px;
}


.user_box .conviction.conviction-1 {
    background-image: url(logo-humanity_128.png);
}

.user_box .conviction.conviction-2 {
    background-image: url(logo-inquisition_128.png);
}



#telo .waiting-payments{
    position: absolute;
    top: 60px;
    /* left: 250px; */
    /* right: 250px; */
    /* width: 593px; */
    z-index: 10000;
    min-width: 500px;
    max-width: 800px;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);

}



#telo.hidesocials .waiting-payments {
    display: none;
}

#telo .waiting-payments .ppayment{
    position: relative;
    display: block;
    
    margin: 5px 0px;

}

#telo .waiting-payments .ppayment .ptexts{
    position: relative;
    display: block;
    padding: 10px 0px 10px;
    margin-left: 80px;
    width: calc(100% - 80px - 190px);
    text-shadow: var(--shadow_textfull);
}

#telo .waiting-payments .ppayment .ptexts .ptitle{
    position: relative;
    font-size: 14px;
   
    color: white;
    
}
#telo .waiting-payments .ppayment .ptexts .ptext{
    position: relative;
    font-size: 12px;
    color: white;
    padding: 5px 0px;
}
#telo .waiting-payments .ppayment .plinkbutton{
    position: absolute;
    top: calc(50% - 15px);
    right: 20px;
    min-width: 110px;
    height: 30px;
    background-color: #ffbc00;
    color: black;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
    text-decoration: none;
    padding: 0px 12px;
}


#telo .waiting-payments .ppayment .plinkbutton:hover{
    animation: blink 100ms linear 2 alternate;
    background-color: black;
    color: white;
}

#telo .waiting-payments .ppayment .pimg{
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    width: 70px;
    
}

#telo .waiting-payments .ppayment .pimg .pimginner{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    
}
 
#telo .waiting-payments .ppayment .bimg{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    
}

#telo .waiting-payments .ppayment .bimg: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.5) 50%),linear-gradient(160deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,1) 100%);
    background-size: cover;
    background-position: bottom left;
    clip-path: var(--clip_waitingpayment);
}

#telo .waiting-payments .ppayment .bimg:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #585858;
    clip-path: var(--clip_waitingpayment);
    z-index: -2;
}

#telo .waiting-payments .ppayment .bimg .bimginner{
    z-index: -1;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: var(--clip_waitingpayment);
    
}

#telo .socials{
    position: absolute;
    top: 80px;
    left: 20px;
    width: 40px;
    z-index: 10000;
    animation: socials-menu 1000ms ease-out forwards;
    text-shadow: var(--shadow_textfull);

}

#telo.hidesocials .socials {
    display: none;
}

#telo .socials .social {
    display: block;
    height: 40px;
    width: 40px;
    background-position: center;
    background-repeat: no-repeat !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px 2px;
    background-size: 28px;
    cursor: pointer;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    padding-left: 40px;
    line-height: 39px;
    text-decoration: none;

}

#telo .socials .social:hover{
    animation: blink 100ms linear 2 alternate;
}

#telo .socials .social.discord {
    background-image: url(ico/Discord-Logo-White.png);
}

#telo .socials .social.facebook {
    background-image: url(ico/Discord-Logo-White.png);
}




#telo .mainheader{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    right: 0px;
}
#telo .mainheader .container{
    position:relative;
    margin:0px
}
#telo .mainheader .container.white{
    min-height:600px;
}
#telo .mainheader .logo{
    height: 40px;
    width: 190px;
    padding-top: 0px;
    background-image: url(osg_logo_150.png);
    background-size: 190px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - 95px);
    top: 0px;
    display: none;
}

#telo .mainheader .corp{
    position: absolute;
    left: 15px;
    top: 10px;
    height: 60px;
    width: 150px;
}

#telo .mainheader .corp a{
    display: table-cell;
    width: 150px;
    height: 60px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;

    vertical-align: middle;
    font-size: 12px;
    cursor: pointer;

    line-height: 18px;
}

#telo .mainheader .corp a span{
    display: inline-block;
    padding: 5px 10px;
}

#telo .mainheader .corp a span:hover{

    color: rgba(0,0,0,1);
    background-color: rgba(255,255,255,1);

}




#telo .mainheader .menu{
    position: absolute;
    top: 10px;
    width: 290px;
    left: calc(50% - 120px);
    text-align: center;
}
#telo .mainheader ul{
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
}
#telo .mainheader ul li{
    display: inline-block;
    padding:0px;
    margin:0px;
    color:rgba(255,255,255,0.5);
    position: relative;
}


#telo .mainheader ul li a{
    display: block;
    text-decoration: none;
    color: white;
    font-size: 20px;
    transition: color 0.2s linear;
    height: 60px;
    padding: 0px;
    line-height: 40px;
    margin: 0px;
    text-align: center;

    cursor: pointer;
}



#telo .mainheader ul li a:hover{
    animation: blink 100ms linear 2 alternate;

}


#telo .mainheader ul li ul li a:before{
    content:"";
    position:absolute;
    right:11px;
    top:10px;
}
#telo .mainheader ul li ul li a{
    position:relative;
    display:block;
    height:30px;
    text-align:left;
    line-height:30px;
    font-weight:normal;
    color:rgb(255,255,255);
    text-transform:none;
    padding:0px 10px 0px 10px;
    overflow:hidden;
    font-size:12px;
    min-width:30px;
}


#telo .mainheader .rcontainer ul li.ico a{
    display: block;
    height: 40px;
    width: 26px;
    background-position: center;
    background-repeat: no-repeat !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px 2px;
    background-size: 16px;
}

#telo .mainheader .menu ul li.ico a{
    display: block;
    height: 40px;
    width: 40px;
    background-position: center;
    background-repeat: no-repeat !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px 2px;
    background-size: 20px;
}

#telo .mainheader ul li.ico a:hover{
    animation: blink 100ms linear 2 alternate;

}
#telo .mainheader .ico a.stocks{
    background-image:url('ico/os_stocks_40.png');
}

#telo .mainheader .ico a.assets{
    background-image:url('ico/os_assets_40.png');
}

#telo .mainheader .rcontainer ul li.ico a.source{
    background-image:url('ico/source_text_120x19a.png');
    width: 110px;
    background-size: 94px;
}


#telo .mainheader .rcontainer ul li.ico a.setup{
    background-image:url('ico/os_setup_40.png');
}
#telo .mainheader .menu ul li.ico a.deck {
    background-image: url(ico/deck_32.png);
}

#telo .mainheader .rcontainer ul li.ico a.connectdiscord{
    background-image:url('ico/Discord-Logo-White.png');
    background-size: 21px;
    animation: highlited 1000ms linear infinite;
}
#telo .mainheader .rcontainer ul li.ico a.discord{
    background-image:url('ico/Discord-Logo-White.png');
    background-size: 21px;
}


#telo .mainheader .ico a.recruit{
    background-image:url('ico/os_recruit_40.png');
}


#telo .mainheader .ico a.bases{
    background-image:url('ico/os_spacecrafts_40.png');
}


#telo .mainheader .ico a.store{
    background-image:url('ico/os_store_40.png');
}

#telo .mainheader .ico a.messages{
    background-image:url(ico/message-64.png);
}

#telo .mainheader .ico a.import{
    background-image:url(ico/ico-card-import.png);
}

#telo .mainheader .ico a.messages .qty{
    
    position: absolute;
    box-sizing: border-box;
    display: block;
    top: 3px;
    right: 5px;
    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;
}

#telo .mainheader .ico a.store:after{
    content: '%';
    position: absolute;
    box-sizing: border-box;
    display: block;
    top: 3px;
    right: 5px;
    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;
}


#telo .mainheader .ico a.score{
    background-image:url('ico/os_rank_40.png');
}


#telo .mainheader .ico a.zone{
    background-image:url('ico/os_alliance_40.png');
}

#telo .mainheader .ico a.logout{
    background-image:url('ico/os_logout_40.png');
}


#telo .mainheader {
    position: absolute;

    background: linear-gradient(to top,rgba(0,0,0,0.0) 0%,rgba(0,0,0,1.0) 100%);
    /*background: rgb(0 0 0 / 62%);*/
    z-index: 9999999;
    min-width: 375px;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 70px;
}

#telo .mainheader .hcontainer {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#telo .mainheader .rcontainer {
    position: absolute;
    top: 10px;
    right: 10px;

}



#telo .mainheader .hcontainer  ul,
#telo .mainheader .rcontainer  ul {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
}
#telo .mainheader .hcontainer   ul li,
#telo .mainheader .rcontainer   ul li {
    display: inline-block;
    
    padding: 0px;
    margin: 0px;
 
    color: rgba(255,255,255,0.5);
}

#telo .mainheader .hcontainer   ul li.ico:first-child {
    
    margin-left: 20px;
 
}

#telo .mainheader .hcontainer  ul li ul li{
    display: block;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px 0px;
    position: unset;
    width: 100%;
}

#telo .mainheader .hcontainer  ul li ul li a{
    text-shadow: none;
    color: white;
    animation: blink 100ms linear 2 alternate;
    line-height: 30px;
    padding: 0px 0px 0px 20px;
    box-sizing: border-box;
    height: 30px;
    background-color: transparent;
    text-align: left;
    font-size: 16px;
}



#telo .mainheader .hcontainer   ul li.ico {
    width: 95px;
}

#telo .mainheader .hcontainer   ul li a{
    display: block;
    text-decoration: none;
    color: #969696;
    font-size: 18px;
    height: 50px;
    padding: 0px 0px 0px 0px;
    line-height: 50px;
    margin: 0px;
    text-align: center;

    cursor: pointer;
    white-space: nowrap;
    text-shadow: var(--shadow_textfull);

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





#telo .mainheader .hcontainer  ul li:hover a {
    /*text-shadow: -2px 0px 2px rgb(255 131 64 / 40%), 2px 0px 2px rgb(126 250 255 / 40%);*/
    /*color: black;*/
    /*background-color: white;*/
}








#telo .mainheader .hcontainer ul li ul li a:hover {
    text-shadow: -2px 0px 2px rgb(255 131 64 / 40%), 2px 0px 2px rgb(126 250 255 / 40%);
}

#telo .mainheader .hcontainer ul li ul li a.connectdiscord:hover:before {
    filter: invert(0);
}





#telo .mainheader .hcontainer  ul.subcategory li{
    display:block;
    float:none;
    text-transform:uppercase;
    padding:0px;
    margin:0px;
    position:relative;
    color:rgba(255,255,255,0.5);
}

#telo .mainheader .hcontainer  ul li ul.menubox{
    display: none;
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    width: 100%;
    min-height: 150px;
    padding: 25px 3% 30px 15%;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover,auto 100%;
    background-position: center left,center left;
    box-sizing: border-box;
    
}

#telo .mainheader .hcontainer  ul li ul.menubox.cworld{
    background-image: linear-gradient(111deg, rgba(10,10,10,.0) 0%, rgba(10,10,10,.8) 40%),url(menu/world.jpg); 
}

#telo .mainheader .hcontainer  ul li ul.menubox.ccorp{
    background-image: linear-gradient(111deg, rgba(10,10,10,.0) 0%, rgba(10,10,10,.8) 40%),url(menu/corp.jpg); 
}

#telo .mainheader .hcontainer  ul li ul.menubox.ccards{
    background-image: linear-gradient(111deg, rgba(10,10,10,.0) 0%, rgba(10,10,10,.8) 40%),url(menu/cards.jpg); 
}



#telo .mainheader .hcontainer  ul li.ico.opened ul.menubox{
    display: block;
    position: fixed;
    left: 0;
    width: 100vw;
}
#telo .mainheader .hcontainer   ul li.ico.opened a.opener{ 
   background-color: rgb(6 6 6);
}


#telo .mainheader .rcontainer   ul li ul li a {
    position: relative;
    display: block;
    height: unset;
    text-align: left;
    line-height: unset;

    color: rgb(255,255,255);
    text-transform: none;
    padding: 0px;
    font-size: 14px;
}





.reward-chest {
    display:none;
    position:absolute;
    width: 80px;
    height: 80px;
    left: 200px;
    top: 0px;
    background-size: 90%,contain;
    background-image: url(ico/ico-reward.png),radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
    background-position: center 14px,center;
    background-repeat: no-repeat;
    z-index: 1000000;
    cursor: pointer;
}

.reward-chest .wait {
    display:block;
    position:absolute;
    left: 0px;
    right: 0px;
    bottom: 12px;
    color: white;
    text-align: center;

    font-size: 12px;
}

.reward-chest:hover {
    animation:blink 100ms linear 2 alternate;
}

#showdisc {
    display: block;
    position: absolute;
    top: calc( 50% - 200px );
    left: calc( 50% - 400px );
    width: 800px;
    font-size: 12px;
    color: white;
    z-index: 10000;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    background-size: 90%,contain;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgba(55, 55, 55, 0.4) 40%, rgba(55, 55, 55, 0.4) 60%, rgba(0, 0, 0, 0.0) 100%); 
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

#showdisc.event-success {
    background: linear-gradient(
        to right,
        rgba(80, 55, 0, 0.0) 0%,
        rgba(120, 85, 10, 0.4) 40%,
        rgba(120, 85, 10, 0.4) 60%,
        rgba(80, 55, 0, 0.0) 100%
    );
    border-top: 1px solid rgba(255, 210, 80, 0.5);
    border-bottom: 1px solid rgba(255, 210, 80, 0.5);
    color: rgba(255, 210, 80, 0.9);
}

#showdisc.event-success .stitle:before {
   
    border-bottom: 1px solid rgba(255, 210, 80, 0.9);
}

#showdisc.event-failure {
    background: linear-gradient(
        to right,
        rgba(80, 20, 0, 0.0) 0%,
        rgba(120, 35, 15, 0.4) 40%,
        rgba(120, 35, 15, 0.4) 60%,
        rgba(80, 20, 0, 0.0) 100%
    );
    border-top: 1px solid rgb(255 172 162 / 50%);
    border-bottom: 1px solid rgb(255 172 162 / 50%);
    color: rgb(255 172 162 / 90%);
}

#showdisc.event-failure .stitle:before {
   
    border-bottom: 1px solid rgb(255 172 162 / 90%);
}

#showdisc .name {
    display: block;
    position: relative;
  
    padding: 5px 40px 15px;
    text-align: center;
    font-size: 28px;
    
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    
}

#showdisc .html {
    display: block;
    position: relative;
    line-height: 21px;
    text-align: center;
    font-size: 14px;
    
    padding: 0px 60px;
    
}

#showdisc .stitle {
    position: relative;
   
    background-color: transparent;
    

    box-sizing: border-box;
    line-height: 34px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    text-align: center;
    padding: 0px 14px 0px 10px;

}

#showdisc .stitle:before {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    left: calc(50% - 125px);
    bottom: 0px;
    border-bottom: 1px solid white;

}





#showdisc.dshowed {
    animation:dshowed 300ms ease-out 0s 1 forwards;
}

#showdisc.ddissapear {
    animation:ddissapear 200ms ease-in 0s 1 forwards;
}

@keyframes dshowed{
    0%{
        transform: translate(0px,-20px) ;
        opacity: 0;
    }
    100%{
        transform: translate(0px,0px);
        opacity: 1;
    }
}
@keyframes ddissapear{
    0%{
        transform: translate(0px,0px) ;
        opacity: 1;
    }
    100%{
        transform: translate(0px,20px);
        opacity: 0;
    }
}


#showsexp {
    display:block;
    position:absolute;
    top: 150px;
    right: 340px;
    width:200px;
    z-index:10000;
    
    
}

#telo.rightcontext #showsexp {
    right: 590px;
}

#showsexp .name {
    display: block;
    position: absolute;
    top: 4px;
    left: 0px;
    right: 0px;
    height: 25px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, var(--hud_sexp_barbckg_color) 40%, var(--hud_sexp_barbckg_color) 60%, rgba(0, 0, 0, 0.0) 100%);
    line-height: 26px;
    text-align: center;
    font-size: 15px;
    color: var(--hud_sexp_text_color);
    text-transform: uppercase;
    
    
}



#showsexp .imgprofile {
    position: absolute;
    top: 0px;
    left: -85px;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    opacity: 0.5;
}
#showsexp .imgprofile .content {
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: 0px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#showsexp .exp{
    position: absolute;
    top: 40px;
    height: 8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--hud_sexp_barbckg_color);
    box-sizing: border-box;
    width: 200px;
    
}
#showsexp .exp .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--hud_sexp_bar_color) 0%, rgba(164,245,224,1) 100%);
    transition: all .2s;
    
    box-sizing: border-box;
    border-right: 5px solid var(--hud_sexp_text_color);
    box-sizing: border-box;
    animation: blinksexpborder 500ms linear infinite;
}
#showsexp .exp .bar.glow{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.11) 0%, rgba(255, 215, 0, 1) 100%);
    filter: drop-shadow(0px 0px 7px rgba(255, 215, 0, 1)) drop-shadow(0px 0px 2px rgba(255, 215, 20, 1));
}
#showsexp .exp .count{
    position: absolute;
    top: 13px;
    white-space: nowrap;
    
    left: 50%;
    transform: translateX(-50%);
    
    
    font-size: 13px;
    
    color: var(--hud_sexp_text_color);
}



#showsexp .added{
    position: absolute;
    top: -20px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color: var(--hud_sexp_text_color);
    opacity: 0;
    transition: all .2s;
    
}



#showsexp .added.visible{
    top: -20px;
    opacity: 1;
}

#showsexp .added.lup.visible{
    top: -44px;
}

#showsexp .added.visible .nexp{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -4px;
    color: var(--hud_sexp_text_color);
    font-size: 16px;
    
    animation:blink 100ms linear 2 alternate;
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
    text-transform: uppercase;
}

#showsexp .added.visible .nexp.neg{
    
    color: var(--hud_exp_text_color_negative);
    
}

#showsexp .added.visible .levelup{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18px;
    color: gold;
    text-shadow: rgba(255, 160, 0, 0.5) 0px 0px 5px;
    font-size: 17px;
    animation:blink 100ms linear 2 alternate;
    filter: drop-shadow(0px 0px 7px var(--hud_sexp_text_color)) drop-shadow(0px 0px 7px var(--hud_sexp_text_color));
    white-space: nowrap;
}

#showsexp .added.visible .levelup.leveldown{
    color: var(--hud_exp_text_color_negative);
    text-shadow: rgba(255, 0, 0, 0.5) 0px 0px 5px;
    filter: drop-shadow(0px 0px 7px var(--hud_exp_text_color_negative)) drop-shadow(0px 0px 7px var(--hud_exp_text_color_negative));
}

#showsexp.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}

#showsexp.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}








#showexp {
    display:block;
    position:absolute;
    top: 150px;
    right: 340px;
    width:200px;
    z-index:10000;
    
    
}

#telo.rightcontext #showexp {
    right: 590px;
}

#showexp .name {
    display: block;
    position: absolute;
    top: 4px;
    left: 0px;
    right: 0px;
    height: 25px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgb(152 100 17 / 54%) 40%, rgb(152 100 17 / 54%) 60%, rgba(0, 0, 0, 0.0) 100%);
    line-height: 26px;
    text-align: center;
    font-size: 15px;
    color: #ebb536;
    text-transform: uppercase;
    
    
}


#showexp .imgprofile {
    position: absolute;
    top: 0px;
    left: -85px;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    opacity: 0.5;
}
#showexp .imgprofile .content {
    position: absolute;
    top: -4px;
    left: 0px;
    width: 70px;
    height: 70px;
    background-size: 70px;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
}


#showexp .exp{
    position: absolute;
    top: 40px;
    height: 8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--hud_exp_barbckg_color);
    box-sizing: border-box;
    width: 200px;
    
}
#showexp .exp .bar{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--hud_exp_bar_color) 0%, rgba(255,215,0,1) 100%);
    transition: all .2s;
    border-right: 5px solid yellow;
    box-sizing: border-box;
    border-right: 5px solid var(--hud_exp_text_color);
    box-sizing: border-box;
    animation: blinkexpborder 500ms linear infinite;
}
#showexp .exp .bar.glow{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.11) 0%, rgba(255, 215, 0, 1) 100%);
    filter: drop-shadow(0px 0px 7px rgba(255, 215, 0, 1)) drop-shadow(0px 0px 2px rgba(255, 215, 20, 1));
}
#showexp .exp .count{
    position: absolute;
    top: 13px;
    white-space: nowrap;
    
    left: 50%;
    transform: translateX(-50%);
    
    
    font-size: 13px;
    
    color: var(--hud_exp_text_color);
}



#showexp .added{
    position: absolute;
    top: -20px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 160, 0, 0);
    opacity: 0;
    transition: all .2s;
    
}



#showexp .added.visible{
    top: -20px;
    opacity: 1;
}

#showexp .added.lup.visible{
    top: -44px;
}

#showexp .added.visible .nexp{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -4px;
    color: var(--hud_exp_text_color);
    font-size: 16px;
    
    animation:blink 100ms linear 2 alternate;
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
    text-transform: uppercase;
}

#showexp .added.visible .levelup{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18px;
    color: gold;
    text-shadow: rgba(255, 160, 0, 0.5) 0px 0px 5px;
    font-size: 17px;
    animation:blink 100ms linear 2 alternate;
    filter: drop-shadow(0px 0px 7px var(--hud_exp_text_color)) drop-shadow(0px 0px 7px var(--hud_exp_text_color));
    white-space: nowrap;
}

#showexp.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}

#showexp.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}

@keyframes blinkexpborder{
    0%{
        border-right: 5px solid rgb(220,146,28);
    }
    50%{
        border-right: 5px solid rgb(127,85,18);
    }
    100%{
        border-right: 5px solid rgb(220,146,28);
    }
}

@keyframes blinksexpborder{
    0%{
        border-right: 5px solid rgb(163,210,174);
    }
    50%{
        border-right: 5px solid rgb(66,85,71);
    }
    100%{
        border-right: 5px solid rgb(163,210,174);
        
    }
}

@keyframes showed{
    0%{
        transform: translate(0px,-20px) ;
        opacity: 0;
    }
    100%{
        transform: translate(0px,0px);
        opacity: 1;
    }
}
@keyframes wiped{
    0%{
        transform: translate(0px,-10px) ;
        opacity: 1;
    }
    20%{
        opacity: 0.5;
    }
    90%{
        opacity: 0;
    }
    100%{
        transform: rotate(-155deg) scale(5);
        opacity: 0;
    }
}

#shownovice {
    display:block;
    position:absolute;
    top: calc( 50% - 200px );
    left: calc( 50% - 200px );
    width:400px;
    height: 400px;
    font-size:12px;
    color:white;
    z-index: 1000000000;

}

#shownovice: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;
}


#shownovice.selectproff {
    top: calc( 50% - 425px );
    left: calc( 50% - 325px );
    width:650px;
    height: 790px;
    background-position: center -30px;
    background-repeat: no-repeat;
}

#shownovice.selectproff .skip {
    bottom: 25px;
    position: absolute;
    left: 10px;
    right: 10px;
}

#shownovice.selectproff .skip .skipbutton {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 50px);
    width: 100px;
    text-align: center;
    padding: 0px 0px;
    box-sizing: border-box;
    text-transform: uppercase;
    z-index: 1;
    cursor: pointer;
    color: white;
    line-height: 28px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0);
    text-decoration: underline;
}

#shownovice.selectproff .skip .skipbutton:hover {
    animation: blink 100ms linear 2 alternate;
}


#shownovice.selectproff .skip .skipbutton .thint {
    top: 1px;
    right: calc(100% + -6px);
}

#shownovice .name {
    display: block;
    position: absolute;
    top: 280px;
    left: 0px;
    right: 0px;
    height: 47px;
    background: linear-gradient(to right,rgba(0,0,0,0.0) 0%,rgba(100,100,100,0.4) 40%,rgba(100,100,100,0.4) 60%,rgba(0,0,0,0.0) 100%);
    line-height: 47px;

    text-align: center;
    font-size: 29px;
    color: white;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    animation: font_color_glitch 1300ms linear !important;
    z-index: 100;
}

#shownovice.selectproff .name {
    top: 280px;
}



#shownovice .image {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-position: center -78px;
    /* animation: crt 5000ms linear infinite; */
    z-index: -1;
    background-size: contain;
    background-image: radial-gradient(closest-side,#276f897d,rgba(0,0,0,0));
}
#shownovice .imgprofile:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: calc(50% - 125px);
    width: 250px;
    height: 250px;
    box-sizing: border-box;
    background-image: linear-gradient(
        0deg
        , #293f4f 0%, rgba(0,0,0,0) 65%);
}

#shownovice .imgprofile {
    position: absolute;
    top: 30px;
    left: calc( 50% - 125px);
    width: 250px;
    height: 250px;

    box-sizing: border-box;


}



#shownovice .imgprofile .content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 250px;
    background-size: 250px;
    box-sizing: border-box;
    filter: brightness(100%) grayscale(10%);
    background-position: center;
    background-repeat: no-repeat;
}

#shownovice .tes {
    position: absolute;
    top: 247px;
    left: 50%;
    transform: translateX(-50%);
}



#shownovice.selectproff .title {
    top: 16px;
    left: 0px;
    right: 0px;
    text-align: center;
    background-color: transparent;
    color: white;
    font-size: 30px;
    line-height: 45px;
    height: 45px;
    text-transform: uppercase;
    color: rgb(133 132 132 / 90%);
    text-transform: none;
    padding: 0px;
}



#shownovice.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}

#shownovice.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}





#shownovice .stes {
    color: white;
    text-align: center;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 330px;

}

#shownovice.selectproff .stes {
    top: 312px;
}


#shownovice .stes .tactical,#shownovice .stes .engineer,#shownovice .stes .science {
    font-size: 13px;
}

#shownovice .subtitle {
    font-size: 18px;
    color: #FFC107;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 345px;

}

#shownovice .infobox {
    font-size: 13px;
    top: 397px;
    position: absolute;
    color: white;
    text-transform: uppercase;
    text-align: center;


    left: 10px;
    right: 10px;
}

#shownovice .infobox-bottom {

    top: 715px;
    position: absolute;

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

    font-size: 10px;
    color: gray;
    left: 10px;
    right: 10px;
}

#shownovice .proffesions {
    position: absolute;
    top: 390px;
    left: 5px;
    right: 5px;

}



#showdead {
    display:block;
    position:absolute;
    top: calc( 50% - 350px );
    left: calc( 50% - 250px );
    width:500px;
    height: 500px;
    font-size:12px;
    color:white;
    z-index:10000;
    background-size: contain;
    overflow: hidden;
    background-image: url(stripes-splash.png);
    background-position: center;
}

#showdead .title {
    top: 67px;
}



#showdead .name {
    display: block;
    position: absolute;
    top: 280px;
    left: 30px;
    right: 30px;
    height: 40px;
    background: linear-gradient(to right,rgba(0,0,0,0.0) 0%,rgba(100,100,100,0.9) 40%,rgba(100,100,100,0.9) 60%,rgba(0,0,0,0.0) 100%);
    line-height: 40px;

    text-align: center;
    font-size: 30px;
    color: white;
    text-transform: uppercase;

    color: rgba(255,255,255,0.9);
    animation: font_color_glitch 1300ms linear !important;

}


#showdead .image {
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    position: absolute;
    background-size: cover;
    background-position: center;
    animation: crt 5000ms linear infinite;
    z-index: -1;
    filter:blur(2px) grayscale(40%) brightness(50%) contrast(110%);
}


#showdead .imgprofile {
    position: absolute;
    top: 110px;
    left: calc( 50% - 80px);
    width: 160px;
    height: 160px;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid white;
}
#showdead .imgprofile .content {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-size: cover, cover, cover, contain;
    box-sizing: border-box;
    filter: brightness(100%) grayscale(10%);
    animation: crt 5000ms linear infinite;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(150,150,200);
}

#showdead.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}

#showdead.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}




#showdead .slevel {
    color: white;
    text-align: center;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 350px;

    font-size: 12px;

}
#showdead .sproffesion {
    color: white;
    text-align: center;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 325px;

    font-size: 19px;
}



#storedelivery {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: white;
    z-index: 99009990000;
    background-position: center 80px;
    background-repeat: no-repeat;
    background-size: 190px;
    background-color: rgb(6 5 12 / 95%);
}

#storedelivery #storedelivery_scene {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#storedelivery .closecards {
    display: none;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    width: auto;
    padding: 6px 13px;
    line-height: initial;
    font-size: 12px;
}

#storedelivery .closecards:hover {
    animation: blink 100ms linear 2 alternate;
}

#storedelivery:before {
    content: '';
    display: block;
    position: absolute;
    top: -50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(stripes-splash.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    animation: crt 25000ms linear infinite;
}
#storedelivery .name {
    display: block;
    position: absolute;
    top: calc(50% - 360px);
    left: calc(50% - 250px);
    width: 500px;
    height: 60px;
    background: linear-gradient(to right,rgba(0,0,0,0.0) 0%,rgba(100,100,100,0.4) 40%,rgba(100,100,100,0.4) 60%,rgba(0,0,0,0.0) 100%);
    line-height: 60px;

    text-align: center;
    font-size: 40px;
    color: white;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    color: rgba(255,255,255,0.9);
    animation: font_color_glitch 1300ms linear !important;
}
#storedelivery .subname {
    display: block;
    position: absolute;
    top: calc(50% - 275px);
    left: calc(50% - 200px);
    width: 400px;
    height: 60px;
    line-height: 15px;

    text-align: center;
    font-size: 12px;

    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

#storedelivery .helpinfo {
    position: absolute;
    top: 450px;
    left: 20px;
    right: 20px;
    text-align: center;
    color: rgba(255,255,255,0.5);


    font-size: 10px;
    padding: 0px;
    margin: 0px;
    line-height: 10px;
    text-transform: uppercase;
    animation:highlited 1000ms linear infinite;
}


#storedelivery .deck {
    position: absolute;
    height: 390px;
    width: 260px;
    transform-origin: 50% 50%;
    left: calc(50% - 130px);
    top: calc(50% - 200px);
    background-image: url('store/card_pack.png');
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.1s, filter 0.1s;
}

#storedelivery .deck:hover {
    filter: brightness(1.2);
    transform: rotate3d(1, 1, 1, 4deg) scale(1.05);
}


#storedelivery .card {
    position: absolute;
    height: 10px;
    width: 10px;
    transform-origin: 50% 50%;

    left: calc(50% - 5px);
    top: calc(50% + 5px);
    z-index: 20000;

    transition: all 0.4s, filter 0.1s;
}

#storedelivery .card.revealed {
    position: absolute;
    left: calc(50% - 5px) !important;
    top: calc(50% - 50px) !important;
}



#storedelivery .card.rar-premium .body {
    /*box-shadow: -3px 0px 0 rgba(255,131,64,.3), 3px 0px 0 rgba(126, 250, 255, .2);  */
}


#storedelivery .card .body {
    position: absolute;
    height: 420px;
    width: 260px;
    transform-origin: 50% 50%;
    left: calc(50% - 130px);
    top: calc(50% - 210px);
    transform: scale(0.7);
    cursor: pointer;
    transition: all 0.4s, filter 0.1s;
}

#storedelivery .card.revealed .body {
    cursor: default;
}



#storedelivery .card:not(.revealed):hover .body {
    filter: brightness(1.2);
}

#storedelivery .card .body .backimg {
    position:absolute;
    background-image: url(card_card_big.png);
    background-position: center;
    background-size: cover;
    z-index: 1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    opacity: 0;
}
#storedelivery .card .body .imgcard {
    display: none;
}

#storedelivery .card.revealed .actions {
    display: none;
    position: absolute;
    left: calc(50% - 115px);
    bottom: -230px;
    width: 230px;
    height: 45px;
    box-sizing: border-box;
    text-align: center;
    padding: 0px 0px 0px;
    color: rgba(210,210,210,1);

    font-size: 16px;
    line-height: 30px;

}

#storedelivery .card.revealed .actions {
    display: block;
}

#storedelivery .card .actions .info {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: white;

    font-size: 10px;
    padding: 0px;
    margin: 0px;
    line-height: 10px;
    text-transform: uppercase;
}

#storedelivery .card .actions .more {
    position: absolute;
    top: 15px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: white;


    font-size: 10px;
    padding: 0px;
    margin: 0px;
    line-height: 10px;
    text-transform: uppercase;
    text-decoration: underline;
}

#storedelivery .card .actions .more span{
    cursor: pointer;
    padding: 1px 3px;
}
#storedelivery .card .actions .more span:hover{
    background-color: black;
    animation: blink 100ms linear 2 alternate;
    filter: invert(1);
}


#storedelivery .card .actions .hide {
    position: absolute;
    top: 85px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: white;


    font-size: 10px;
    padding: 0px;
    margin: 0px;
    line-height: 10px;
    text-transform: uppercase;
    text-decoration: underline;
}

#storedelivery .card .actions .hide span{
    cursor: pointer;
    font-size: 12px;
    padding: 2px 8px;
    background-color: white;
    color: black;


    clip-path: var(--clip_whitelink);

}
#storedelivery .card .actions .hide span:hover{
    animation: blink 100ms linear 2 alternate;
}


#storedelivery .card .actions .discard-card {
    position: absolute;
    top: 40px;
    left: calc(50% - 65px);
    width: 130px;
    display: block;
    border: 1px solid white;
    text-align: center;
    color: white;


    font-size: 12px;
    cursor: pointer;
    padding: 0px 10px;
    margin: 0px;
    box-sizing: border-box;
    background-color: white;

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


#storedelivery .card .actions .discard-card:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: black;

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


#storedelivery .card .actions .discard-card:hover{
    background-color: black;
    border: 1px solid black;
    animation: blink 100ms linear 2 alternate;
    filter: invert(1);
}




#storedelivery .card.revealed .imgcard {
    animation:cr-reveal 500ms forwards;
    display: block;
}


#storedelivery .card .backimg.rotatedl {
    animation:cr-rotatel 500ms forwards;
}
#storedelivery .card .backimg.rotatedr {
    animation:cr-rotater 500ms forwards;
}

#storedelivery .card.revealed .backimg {
    animation:cr-hide 500ms forwards;
}

@keyframes cr-hide{
    0%{
        transform: rotate3d(0, 1, 0, 0deg);
        opacity: 1;
    }
    50%{
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 1;
    }
    100%{
        transform: rotate3d(0, 1, 0, 90deg) scale(1);
        opacity: 0;
    }
}
@keyframes cr-reveal{
    0%{
        transform: rotate3d(0, 1, 0, 0deg);
        opacity: 0
    }
    50%{
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 1
    }
    100%{
        transform: rotate3d(0, 1, 0, 0deg);
        opacity: 1;
    }
}

@keyframes cr-rotatel{
    0%{
        transform: rotate3d(0, 1, 1, 0deg);
        opacity: 0
    }
    50%{
        transform: rotate3d(0, 1, 1, 90deg);
        opacity: 1
    }
    100%{
        transform: rotate3d(0, 1, 1, 0deg);
        opacity: 1;
    }
}
@keyframes cr-rotater{
    0%{
        transform: rotate3d(0, 1, 1, 0deg);
        opacity: 0
    }
    50%{
        transform: rotate3d(0, 1, 1, -90deg);
        opacity: 1
    }
    100%{
        transform: rotate3d(0, 1, 1, 0deg);
        opacity: 1;
    }
}

#popeffect {
    display:block;
    position:absolute;
    top: calc( 50% - 256px );
    left: calc( 50% - 256px );
    width:512px;
    height: 512px;
    font-size:12px;
    color:white;
    z-index:10000;
    background-size: contain;
    box-sizing: border-box;
    background-image: url(stripes-splash.png);
    background-position: center;
    background-repeat: no-repeat;
}

#popeffect.small {
    display:block;
    position:absolute;
    top: calc( 50% - 330px );
    left: calc( 50% - 256px );
    width: 512px;
    height: 100px;
    font-size:12px;
    color:white;
    z-index:10000;
    background-image: none;
    
}




#popeffect .name {
    display: block;
    position: relative;
    margin-top: 334px;
    left: -100px;
    width: calc(100% + 200px);
    /* min-height: 50px; */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgba(200, 200, 200, 1) 40%, rgba(200, 200, 200, 1) 60%, rgba(0, 0, 0, 0.0) 100%),linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, #314689cc 40%, #314689cc 60%, rgba(0, 0, 0, 0.0) 100%);
    background-size: 100% 1px, cover;
    background-position: center top, center;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 33px;
    padding: 10px 45px;
    color: white;
    font-family: var(--fontFaimly_header);
    box-sizing: border-box;
    text-shadow: var(--shadow_textfull);
    
}

#popeffect.small .name {
    font-size: 20px;
    padding: 5px 35px;
    margin-top: 0px;
   
    
}


#popeffect .description {
    color: white;
    text-align: center;
    position: relative;
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px;
    text-shadow: var(--shadow_textfull);
    box-sizing: border-box;
}

#popeffect.small .description {
       margin-top: 10px;
    font-size: 16px;
    line-height: 23px;
    
}

#popeffect .image {
   
    left: calc(50% - 128px);
    width: 256px;
    bottom: 203px;
    height: 256px;
 
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
    z-index: -1;
    box-sizing: border-box;
    filter: drop-shadow(0px 0px 150px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.5));   
}

#popeffect.small .image {
    left: calc(50% - 32px);
    width: 64px;
    bottom: 120px;
    height: 64px;
 }

#popeffect.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}



#popeffect.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}





#cardinfo {
    display:block;
    position:absolute;
    top: calc( 50% - 325px );
    left: calc( 50% - 256px );
    width:512px;
    height: 650px;
    font-size:12px;
    color:white;
    z-index:10000;
    background-size: contain;
    box-sizing: border-box;
    background-image: url(stripes-splash.png);
    background-position: center;
    background-repeat: no-repeat;
}



#cardinfo .name {
    display: none;
    position: relative;
    margin-top: 445px;
    left: -100px;
    width: calc(100% + 200px);
    /* min-height: 50px; */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgba(200, 200, 200, 1) 40%, rgba(200, 200, 200, 1) 60%, rgba(0, 0, 0, 0.0) 100%),linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, #314689cc 40%, #314689cc 60%, rgba(0, 0, 0, 0.0) 100%);
    background-size: 100% 1px, cover;
    background-position: center top, center;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 33px;
    padding: 10px 45px;
    color: white;
    font-family: var(--fontFaimly_header);
    box-sizing: border-box;
    text-shadow: var(--shadow_textfull);
}
#cardinfo .description {
    color: rgb(198 225 253);
    text-align: center;
    position: relative;
    margin-top: 470px;
    font-size: 19px;
    line-height: 26px;
    width: 340px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: var(--shadow_textfull);
    box-sizing: border-box;
}

#cardinfo .image {
   left: calc(50% - 160px);
    width: 320px;
    top: 0px;
    height: 422px;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: crt 5000ms linear infinite;
    z-index: -1;
    box-sizing: border-box;
    text-align: center;
}

#cardinfo .image canvas {
    filter: drop-shadow(0px 0px 150px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.5));   
    max-width: 100%;
    max-height: 100%;
}

#cardinfo.showed {
    animation:showed 300ms ease-out 0s 1 forwards;
}

#cardinfo.wiped {
    animation:wiped 150ms ease-in 0s 1 forwards;
}








#time-reward {
    display:block;
    position:absolute;
    width:900px;
    font-size:12px;
    color:white;
    padding:5px;
    z-index:10000;
    height: 610px;
}

#time-reward .befb {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover,cover;
    background-position: bottom right,bottom,top;

    clip-path: var(--clip_dailyreward);
    z-index: -1;
    box-shadow: 0px 0px 70px #242e4b inset;
}

#time-reward:after {
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: transparent;

    clip-path: var(--clip_dailyreward);
    z-index: -2;
}

reward:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(35,35,35);

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


#time-reward .subtitle {
    display: block;
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    line-height: 50px;
    text-align: center;
    animation: font_color_glitch 1300ms linear !important;
    color: #ffbc00;
    font-size: 36px;
}

#time-reward .days {
    display:block;
    position:absolute;
    top:125px;
    left: 10px;
    right:10px;
    text-align: center;
}
#time-reward .days .day{
    display:block;
    position:relative;
    top:0px;
    width: 285px;
    height:440px;
    margin: 0px 0px;
    box-sizing: border-box;

}



#time-reward .days .day .inner-day{
    display:block;
    position:absolute;
    top:10px;
    left: 30px;
    bottom: 10px;
    right:5px;
    box-sizing: border-box;
    z-index: 1;

}


#time-reward .days .day .inner-day:before{
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(17 21 32);
    clip-path: var(--clip_dailyreward_day);
    z-index: -1;
    box-shadow: 0px 0px 44px #242e4b inset;
}

#time-reward .days .day.active .inner-day:before {
    background-color: rgb(47 29 3);
    box-shadow: 0px 0px 44px #71610a inset;
}


#time-reward .days .day.active:before {
    content:'';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}


#time-reward .days .day .claim-button{
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 46px;
    min-width: 90px;
}

#time-reward .days .day .claim-button.gold:after{
    
    animation: highlited 1000ms linear infinite;
    
}


#time-reward .days .day .header {
    display: block;
    position: absolute;
    top: 19px;
    left: 0px;
    right: 0px;
    font-size: 17px;
    text-align: center;
    color: gray;
    line-height: 25px;
}


#time-reward .days .day.active .header {
    color: #ffbc00;
}

#time-reward .days .day .credit{
    display:block;
    position:absolute;
    top:85px;
    left: 0px;
    right: 0px;
    text-align: center;
}

#time-reward .days .day .credit span{
    font-size: 26px;

}

#time-reward .days .day.active .credit span{
    color: #ffbc00;

}

#time-reward .days .day .morale{
    display: block;
    position: absolute;
    top: 130px;
    left: 0px;
    right: 0px;
    text-align: center;
}
#time-reward .days .day .morale span{
    font-size: 30px;
}
#time-reward .days .day.active .morale span{
    color: #ffbc00;

}

#time-reward .days .day .cards {
    display:block;
    position:absolute;
    top:190px;
    left: 0px;
    right:0px;
}
#time-reward .days .day .cards .rcard {
    display:inline-block;
    position:relative;
    width:60px;
    margin: 5px 4px;
}
#time-reward .days .day .cards .rcard .inner {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    transition: 0.1s
}
#time-reward .days .day .cards .rcard .inner.active {
    cursor: pointer;
}

#time-reward .days .day .cards .rcard .inner canvas  {
    width:100%;
}
#time-reward .days .day .cards .rcard:hover .inner.active {
    width:167px;
    left: -55px;
    top: -130px;
    z-index: 10000;
}

#time-reward .days .day .cards .rcard .inner .card {
    position: absolute;
    background-image: url(card_card_big.png);
    background-position: center;
    background-size: cover;
    height: 85px;
    width: 60px;
}





.miniature {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.miniature .miniature-image {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    filter: var(--shadow_drpofull);

}

.miniature .subcontent {
    display: none;
    position: absolute;
    top: calc(100% + 11px);
    color: var(--subtext_color);
    min-height: 20px;
    background-color: var(--subtext_color-background);
    z-index: 20;
    filter: none;
    left: 50%;
    transform: translate(-50%, 0);
    animation: var(--animation-subtext-fadein);
    filter: var(--subtext_shadow);
    pointer-events: none;
    min-width: 50px;
}

.miniature.rright .subcontent {
    right: unset;
    left: calc(100% + 10px);
    width: unset;
    top: calc(50% - 6px);
    transform: unset;
}

.miniature.rright .subcontent .subcontent-name {
    text-align: left;
    white-space: nowrap;
}

.miniature.rleft .subcontent {
    left: unset;
    right: calc(100% + 10px);
    width: unset;
    top: calc(50% - 6px);
    transform: unset;
}

.miniature.rleft .subcontent .subcontent-name {
    text-align: right;
    white-space: nowrap;
}


.miniature.mnright .subcontent {
    right: unset;
    left: calc(50% - 10px);
    width: unset;
    transform: unset;
}

.miniature.mnleft .subcontent {
    right: 0px;
    left: unset;
    width: unset;
    transform: unset;
    
    
}

.miniature .subcontent .subcontent-name {
    display: block;
    position: relative;
    color: var(--subtext_color);
    text-shadow: none;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    padding: 5px 10px;
    font-family: var(--fontFaimly_button);
    text-transform: uppercase;
}

.miniature.mnright .subcontent .subcontent-name {
    text-align: left;
}
.miniature.mnleft .subcontent .subcontent-name {
    text-align: right;
}

.miniature.top .subcontent {
    top: unset;
    bottom: calc(100% + 9px);
}

.miniature .subcontent:before {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-bottom: 6px solid var(--subtext_color-background);
    position: absolute;
    top: -12px;
    left: calc(50% - 6px);
    filter: none;

}

.miniature.mnright .subcontent:before {
    left: 0px;
    right: unset;
}
.miniature.mnleft .subcontent:before {
    left: unset;
    right: 0px;
}

.miniature.rright .subcontent:before {
    left: -11px;
    top: 0px;
    border-right: 6px solid var(--subtext_color-background);
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
}

.miniature.rleft .subcontent:before {
    right: -11px;
    left: unset;
    top: 0px;
    border-right: 6px solid transparent;
    border-left: 6px solid var(--subtext_color-background);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.miniature.top .subcontent:before {
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--subtext_color-background);
    border-bottom: 6px solid transparent;
    position: absolute;
    top: unset;
    bottom: -12px;
    left: calc(50% - 6px);
    filter: none;
}



.miniature:hover .subcontent {
    display: block;
    /*animation:blink 100ms linear 2 alternate;*/
    
    pointer-events: none;
}





#card-ready {
    display:block;
    position:absolute;
    width:900px;
    font-size:12px;
    color:white;
    padding:5px;
    z-index:10000;
    height: 700px;

}

#card-ready:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(45deg, rgb(0 0 0) 0%, rgb(0 0 0 / 34%) 50%),linear-gradient(160deg, rgb(101 85 85 / 34%) 60%, rgba(0,0,0,.85) 100%),url(getcard_background.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;
}





#card-ready .subtitle {
    display: block;
    position: absolute;
    top: 70px;
    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: 32px;
    color: white;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);

    color: rgba(255,255,255,0.9);
    animation: font_color_glitch 1300ms linear !important;
}

#card-ready .text {
    display: block;
    position: absolute;
    top: 180px;
    left: 50px;
    right: 50px;
    
    
    

    text-align: center;
    font-size: 13px;
    color: white;
   
    color: rgba(255,255,255,1);
    
}

#card-ready .fcards {
    display:block;
    position:absolute;
    top:230px;
    left: 20px;
    right:20px;
    text-align: center;
}
#card-ready .fcards .fcard{
    display:block;
    position:relative;
    top:0px;
    width: 245px;
    height:385px;
    margin: 0px 0px;
    box-sizing: border-box;
}

#card-ready .fcards .fcard .inner-fcard{
    display:block;
    position:absolute;
    top:0px;
    left: 0px;
    bottom: 0px;
    right:0px;
    box-sizing: border-box;
}

#card-ready #card-code {
    position: absolute;
    left: calc(50% - 165px);
    width: 330px;
    top: 140px;
    text-align: center;
    font-size: 26px;
    height: 45px;
    line-height: 45px;
    text-transform: none;
    background-color: rgba(0,0,0,0.8);
    font-family: var(--fontFaimly_header);
    box-sizing: border-box;
    margin: 0px;
    -webkit-user-select: all;
    user-select: all;
}

#card-ready .card-code-submit {
    position: absolute;
    left: 50%;
    /* width: 100px; */
    top: 242px;
    transform: translateX(-50%);
    /* height: 30px; */
    color: rgba(100,100,100,1);
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 9px 18px;
    /* line-height: 30px; */
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid rgba(100,100,100,1);
    margin: 0px 0px;
    background-color: rgba(0,0,0,.9);
    font-family: var(--fontFaimly_button);
}


#card-ready .card-code-submit.active {
    color: rgba(255,255,255,1);
    border: 1px solid rgba(255,255,255,1);
    animation:highlited 1000ms linear infinite;
}


#card-ready .smalltext {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 200px;
    text-align: center;

    color: rgba(255,255,255,1);
    font-size: 12px;
    text-shadow: var(--shadow_textfull);
    line-height: 15px;
}

#card-ready .err {
    position: absolute;
    left: calc(50% - 165px);
    width: 330px;
    top: 185px;
    text-align: center;

    background-color: rgba(200,0,0,1);
    font-size: 13px;

    box-sizing: border-box;
    padding: 2px 5px;
}

#card-ready .bigcard {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 300px;
    text-align: center;
}
#card-ready .bigcard canvas {
    height: 330px;
}

#card-ready .giventext {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 150px;
    text-align: center;

    color: rgba(255,255,255,1);
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
}

#card-ready .selecttext {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 153px;
    text-align: center;
    color: rgba(255,255,255,1);
    font-size: 17px;
    /* text-transform: uppercase; */
    text-shadow: var(--shadow_textfull);
}


#card-ready .givenbigcard {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 210px;
    text-align: center;
}
#card-ready .givenbigcard canvas {
    height: 400px;
}



#card-ready .fcards .fcard .fqty {
    display: block;
    position: absolute;
    top: 320px;
    left: 0px;
    right: 0px;
    font-size: 12px;

    text-align: center;
    line-height: 19px;
    text-shadow: var(--shadow_textfull);
}

#card-ready .fcards .fcard .fqty .qty {
    font-size: 14px;
    display: block;
}
#card-ready .fcards .fcard .fqty .valid {
    font-size: 14px;
    display: block;
}

#card-ready .fcards .fcard .inner-card: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;
}
#card-ready .fcards .fcard .inner-card: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;
}



#card-ready .fcards .fcard .scard {
    display:block;
    position:absolute;
    top:0px;
    left: 0px;
    right:0px;
}
#card-ready .fcards .fcard .scard .rcard {
    display:inline-block;
    position:relative;
    width:220px;
    margin: 5px 4px;
}
#card-ready .fcards .fcard .scard .rcard .inner {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    cursor: pointer;
    transition: 0.1s
}
#card-ready .fcards .fcard .scard .rcard .inner canvas  {
    width:100%;
}

#welcomescreen {
    position: absolute;
    top: 55px;
    left: 30px;
    right: 30px;
    bottom: 0px;
    overflow: hidden;
}



#welcomescreen .discordapp{
    position: absolute;
    top: 175px;
    right: 0px;
    width: 300px;
    bottom: 0px;
}

#menu-song-author{
    display: block;
    position: absolute;
    bottom: 52px;
    left: 35px;
    text-align: left;
    color: silver;
    font-size: 12px;
    padding: 0px 0px 0px;
    margin: 0px;
    white-space: nowrap;
    opacity: .3;
    z-index: 100;
}

#telo.hidesocials #menu-song-author{ 
    display: none;
}

#menu-song-author .mtitle{
    color: gray;
    font-size: 10px;
    padding: 0px 0px 0px;
    margin: 0px;
    white-space: nowrap;
    display: block;
    
}

#menu-song-author .name{
    display: block;
    
}

#menu-song-author .sname{
    display: block;
    color: white;
    
}

#menu-song-author .name a{
    text-decoration: none; 
    color: silver;
    
}



#welcomescreen #planet-description{
    display: block;
    position: absolute;
    bottom: 120px;
    right: 0px;
    width: 243px;
    text-align: left;
    /*text-shadow: var(--shadow_textfull);*/

}

#welcomescreen #planet-description .name{
    color: silver;
    font-size: 18px;
    padding: 0px 0px 0px;
    margin: 0px;
    font-family: var(--fontFaimly_header);
}

#welcomescreen #planet-description .description{
    line-height: normal;
    font-size: 14px;
}

#welcomescreen #planet-description .description p{
    color: gray;
    font-size: 12px;
    padding: 3px 0px;
    margin: 0px;
}

#welcomescreen #planet-description .view-buttons{
    display: block;
}
#welcomescreen #planet-description .view-buttons div{
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    margin-top: 4px;
    /* border: 1px solid silver; */
    cursor: pointer;
    border-radius: 10px;
    background-color: gray;

}

#welcomescreen #planet-description .view-buttons div:hover {
    animation: blink 100ms linear 2 alternate;
}


#welcomescreen.sw-news #planet-description{
    display: none;
}

#welcomescreen .news .close{
    display: none;
}

#welcomescreen.sw-news .news .close{
    display: block;
    top: -24px;
}


#welcomescreen #playnow{
    position: absolute;
    top: calc(37% + 140px);
    left: 0px;
    right: 0px;
}


#welcomescreen #playnow .playnow {
    width: 130px;
    position: absolute;
    
    
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    height: 40px;

    
    line-height: 40px;
    font-size: 15px;
    
}


#welcomescreen.sw-news #playnow{
    display: none;
}

#welcomescreen .cards{
   
    position: absolute;
    top: 7%;
    left: 0px;
    right: 0px;
    bottom: calc(50% - 85px);
    text-align: center;
}

#welcomescreen.sw-news .cards{
    display: none;
}

#welcomescreen .cards #cards{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
   
}

#welcomescreen .cards #cards .card{
    display: block;
    margin: 0px;
    width: auto;
    position: relative;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#welcomescreen .cards #cards .card .content{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#welcomescreen .cards #cards .card .content .ttitle{
    position: absolute;
    top: -5px;
    left: 0px;
    right: 0px;
    font-size: 17px;
    color: #ffc107;
    text-shadow: var(--shadow_textfull);
}

#welcomescreen .cards #cards .card .content .img{
    max-height: 340px;
    height: calc(100% - 170px);
    position: absolute;
    left: 50%;
    /* right: 0px; */
    transform: translateX(-50%);
    bottom: 140px;
    display: inline-block;
    width: fit-content;
    cursor: pointer;
}
#welcomescreen .cards #cards .card .content .img img{
    height: 100%;
}
#welcomescreen .cards #cards .card .content .img .animated{
    clip-path: var(--clip_cardinfo_card);
}

#welcomescreen .cards #cards .card .content .html{
    position: absolute;
    /* top: 117px; */
    left: calc(50% - 200px);
    width: 400px;
    top: calc(100% - 130px);
}



#welcomescreen .cards #cards .card .content .html .name{
    font-size: 22px;
    padding: 10px 0px;
    color: white;
    font-family: var(--fontFaimly_header);
    text-shadow: var(--shadow_textfull);
    cursor: pointer;
}

#welcomescreen .cards #cards .card .content .html .descr{
   
    
    line-height: 20px;
    max-width: 590px;
    text-align: center;
    font-size: 14px;
    color: rgb(152,152,152);
    text-shadow: var(--shadow_textfull);
}

#welcomescreen .cards #cards .card .content .html .subdescr{
    line-height: 13px;
    max-width: 590px;
    text-align: center;
    font-size: 10px;
    color: rgb(102,102,102);
    text-shadow: var(--shadow_textfull);
    text-transform: uppercase;
    padding: 10px 15% 0px;
}

#welcomescreen .cards #cards .card .content .html .action{
    display: inline-block;
    box-sizing: border-box;
    color: rgb(152,152,152);
    text-align: center;
    text-decoration: underline;
    padding: 4px 12px;
    cursor: pointer;
    z-index: 1;
    position: relative;
    margin-top: 10px;
}




#welcomescreen .cards #cards .card .content .html .action:hover {
    animation:blink 100ms linear 2 alternate;
}

#welcomescreen .zonejoin{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    
    
}

#welcomescreen.sw-news .zonejoin{
    display: none;
    
}

#welcomescreen .zonejoin #zonejoin{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

#welcomescreen .zonejoin #zonejoin .html{
    position: relative;
    
    margin-left: 50%;
    width: 330px;
    transform: translateX(-50%);
    padding: 20px;
    
}

#welcomescreen .zonejoin #zonejoin .html .header{
    position: relative;
  
    width: 150px;
    font-size: 15px;
    display: inline-block;
    text-align: right;
    filter: drop-shadow(0px 0px 14px black);
    color: white;

}

#welcomescreen .zonejoin #zonejoin .html .actions{
    position: absolute;
    top: 50%;
    left: 190px;
    width: 120px;
    transform: translateY(-50%);
}

#welcomescreen .zonejoin #zonejoin .html .actions button{
    position: absolute;
    top: 50%;
    left: 0px;
    
    transform: translateY(-50%);
}

@media (max-width: 520px) {
    #telo #playing {
        display: none;
    }
    #welcomescreen .tips{
        
        left: 0px !important;
        right: 0px !important;
        
    }
}

#welcomescreen .tips{
    position: absolute;
    top: 37%;
    left: 150px;
    right: 150px;
    height: 150px;
    text-align: center;
}

#welcomescreen.sw-news .tips{
    display: none;
}


#welcomescreen .tips #tips{
    position: relative;
    top: 0px;
    height: 150px;
    width:auto;
}

#welcomescreen .tips .tip{
    display: block;
    margin: 0px;
    height: 150px;
    width:auto;
    position: relative;
    text-align: center;
}

#welcomescreen .tips .tip .content{
    display: block;
    margin: 0px auto;
    height: 150px;
    width:auto;
    position: relative;
    max-width: 1200px;
    line-height: 150px;
    text-align: center;
}


#welcomescreen .tips .tip .content:before{
    content: "";
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;

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

#welcomescreen .tips .tip .content .img{
    display: none;
    top: 1px;
    right: 1px;
    position: absolute;
    left: 1px;
    bottom: 1px;

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

#welcomescreen .tips .tip .content .img:after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient( 16deg, rgb(0 0 0 / 64%) 0%, rgb(0 0 0 / 0%) 60%);
}

#welcomescreen .tips .tip .content .img span{
    top: 0px;
    right: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0px;
    bottom: 0px;
    animation: crt 10000ms linear infinite;
}




#welcomescreen .tips .tip .content .html{
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    max-width: 590px;

    text-align: center;

    font-size: 14px;

    color: rgb(200,200,200);
    text-shadow: var(--shadow_textfull);
}

#welcomescreen .tips .tip .content .html .ttitle{
    display: block;
    line-height: normal;
    text-align: center;
    font-size: 13px;
    color: gray;
    padding: 0px 0px 11px;
    text-transform: uppercase;
}

#welcomescreen .tips .tip .content .html i{
    color: white;
}

#welcomescreen .news{
    position: absolute;
    top: calc(100% + 10px);
    left: 0px;
    right: 0px;
    bottom: 0px;
    transition:top 0.4s ease;
    box-sizing: border-box;
    z-index: 100;
    
}

#welcomescreen .news .global_news{
    opacity: 1;
}

#welcomescreen .news .newsopener{
    color: white;
    position: absolute;
    display: block;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    bottom: unset;
    right: unset;
    padding-right: 20px;
    opacity: 0.7;
    box-sizing: border-box;
}

#welcomescreen .news .newsopener:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    right: 0px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: transparent url(ico/arrow-144-32.png) center no-repeat;
    background-size: 12px;
    
    z-index: -1;
    
}

#welcomescreen.sw-news:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient( 0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 33%) 100%);
}




#welcomescreen.sw-news .news{
    top: 45px;
   
}
#welcomescreen.sw-news .news .global_news{
    opacity: 1;
}

#welcomescreen.sw-news .news .newsopener {
    opacity: 0;
}

#welcomescreen.sw-news .news:after{
    content: "";
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: linear-gradient( 0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 33%) 100%);

}

#welcomescreen .news .global_news{
    position: absolute;
    padding: 1px;
    top: 20px;
    left: 0px;
    right: 15px;
    bottom: 0px;
}

#welcomescreen.sw-news .news .global_news{
    overflow-y: scroll;
    
}

#welcomescreen .news .shownews{
    position: absolute;
    bottom: calc(100% + 10px);
    left: 30px;
    width: 113px;
    height: 27px;
    color: rgba(255,255,255,0.2);

    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    line-height: 27px;
    font-size: 12px;
    padding: 0px 10px;
    text-transform: uppercase;

    border: 1px solid rgba(255,255,255,0.2);
}



#welcomescreen .news .shownews:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#welcomescreen.sw-news .news .shownews{
    animation:highlited 1000ms linear infinite;
    color: rgba(255,255,255,1);
    border: 1px solid rgba(255,255,255,0);
}


#welcomescreen .group.image {
    width: calc(100% - 60px);
    margin: 0px 30px 30px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

#welcomescreen .group.link {
    width: calc(100% - 60px);
    margin: 0px 30px 30px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}




#welcomescreen .stock_news .stockbox {
    display: inline-block;
    font-family: var(--fontFaimly_header);
    position: relative;
    width: 180px;
    height: 92px;
    margin: 5px;
    /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5); */
    /* border: 1px solid rgba(127,255,255,0.25); */
    background-color: white;
    cursor: pointer;
}


#welcomescreen .stock_news .stockbox:hover {
    animation:blink 100ms linear 2 alternate;
}


#welcomescreen .stock_news .stockbox .name {
    display: block;
    text-transform: uppercase;
    bottom: 0px;
    position: absolute;
    bottom: 7px;
    left: 7px;
    right: 6px;
    color: black;
    font-size: 17px;
    line-height: 12px;
}
#welcomescreen .stock_news .stockbox .index {
    display: block;
    text-transform: uppercase;
    position: absolute;
    top: 3px;
    left: 7px;
    right: 30px;
    height: 30px;
    box-sizing: border-box;
    font-size: 32px;
    line-height: 32px;
    color: black;
    /* text-shadow: 0 0 10px rgba(0,255,255,0.95); */
    /*  */
}

#welcomescreen .stock_news .stockbox .val {
    display: block;
    text-transform: uppercase;
    position: absolute;
    top: 34px;
    left: 6px;
    right: 30px;
    height: 28px;
    box-sizing: border-box;
    font-size: 24px;
    letter-spacing: -1px;
    color: black;
}

#welcomescreen .stock_news .stockbox .stocksign {
    display: block;
    text-transform: uppercase;
    position: absolute;
    top: 3px;
    width: 30px;
    right: 3px;
    height: 17px;
}

#welcomescreen .stock_news .stockbox .diff {
    display: block;
    text-transform: uppercase;
    position: absolute;
    top: 37px;
    right: 6px;
    box-sizing: border-box;
    font-size: 22px;
    text-align: right;

}

#welcomescreen .stock_news .stockbox .diff.d {
    color: rgba(200,0,0,1);
}

#welcomescreen .stock_news .stockbox .diff.a {
    color: rgba(0,200,0,1);
}

#welcomescreen .stock_news .stockbox .diff_perc {
    color: black;
    display: block;
    text-transform: uppercase;
    position: absolute;
    top: 23px;
    right: 6px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: right;
    line-height: 12px;
}

#welcomescreen .stock_news .stockbox .stocksign.a{
    background:url('ico/ico_stock_up-24.png') center no-repeat;
    background-size:15px;
}
#welcomescreen .stock_news .stockbox .stocksign.d{
    background:url('ico/ico_stock_down-24.png') center no-repeat;
    background-size:15px;
}



#welcomescreen .global_news .whitelink {
    color: black;
    padding: 1px 10px;
    margin: 3px 3px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
}


#welcomescreen .global_news .whitelink:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: white;

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




#welcomescreen .global_news .whitelink:hover {
    animation: blink 100ms linear 2;
}



#welcomescreen .global_news .group.link .new{
    position: relative;
    box-sizing: border-box;
    display: block;
    height: auto;
    width: auto;
    margin: 0px;
    min-height: 70px;
}

/*
#welcomescreen .global_news .group.link .new:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;

    clip-path: var(--clip_win_new_link);
}
*/


#welcomescreen .global_news .group.link .new .newtext_html{
    position: relative;
    color: white;
}



#welcomescreen .global_news .group.link .new .newtext_html .newtitle {
    position: relative;
    font-size: 14px;
    text-align: left;
    padding: 0px;
}

#welcomescreen .global_news .group.link .new .newtext_html .members {
    display: block;
    position: relative;
    text-align: left;
    padding: 0px 10px 10px;
}


#welcomescreen .global_news .group.link .new .newtext_html .members .user {
    position: relative;
    min-height: 60px;
    padding: 5px 17px 5px 65px;
    box-sizing: border-box;
    display: inline-block;
}




#welcomescreen .global_news .group.link .new .newtext_html .members .user .uimgd {
    position:absolute;
    width:50px;
    height: 50px;
    top: 7px;
    left: 7px;
    box-sizing: border-box;
    overflow: hidden;
}


#welcomescreen .global_news .group.link .new .newtext_html .members .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: grayscale(10%);
    background-size: auto, contain, auto, contain;
    background-position: top center, center,center, center;
    animation: crt 5000ms linear infinite;
}



#welcomescreen .global_news .group.link .new .newtext_html .members .user .ucname {
    color: rgb(150,150,150);
    font-size: 12px;
    padding-bottom: 2px;
    display: block;
}

#welcomescreen .global_news .group.link .new .newtext_html .members .user .uname {
    color: rgb(50,50,50);
    font-size: 10px;
    text-transform: uppercase;
    display: block;
}
#welcomescreen .global_news .group.link .new .newtext_html .members .user .active {
    color: rgb(50,50,50);
    font-size: 10px;

    display: block;
}


#welcomescreen .global_news .group.link .new .newtext_html .members .user .joined {
    color: rgb(50,50,50);
    font-size: 10px;

    display: block;
}

#welcomescreen .global_news .group.link .new .newtext_html .members .user.unactive .uimgd .uimg {
    filter: grayscale(1) brightness(1.2) contrast(0.8);
    background-color: rgb(200,200,200);
}

#welcomescreen .global_news .group.link .new .newtext_html .members .user.unactive .ucname,
#welcomescreen .global_news .group.link .new .newtext_html .members .user.unactive .uname,
#welcomescreen .global_news .group.link .new .newtext_html .members .user.unactive .joined,
#welcomescreen .global_news .group.link .new .newtext_html .members .user.unactive .active {
    color: rgb(190,190,190);
}



#welcomescreen .global_news .group.link .new .newtext_html .newtime {
    position: relative;
    text-align: left;
    display: block;
    color: #303030;
    font-size: 10px;
    padding: 3px 0px 3px 0px;
    text-transform: uppercase;
    z-index: 1;
}

#welcomescreen.sw-news .global_news .group.link .new .newtext_html .newtime {
    color: gray;
}




#welcomescreen .global_news .group.link .new .newtext_html .newtext {
    position: relative;
    font-size: 14px;
    line-height: 18px;
    padding: 0px;

}



#welcomescreen .global_news .group.image .new{
    position: relative;
    box-sizing: border-box;
    display: block;
    margin: 0px;
    height: 170px;
    position: relative;
    box-sizing: border-box;
    color: white;
}

#welcomescreen .global_news .group.image .new.popup{
    top: -220px;
}

#welcomescreen.sw-news .global_news .group.image .new.popup{
    top: unset;
}

#welcomescreen .global_news .group.image .new:before{
    content: "";
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #585858;

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





#welcomescreen .global_news .group.image .new .bckg{
    top: 0px;
    right: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    /* margin: 5px 0px; */
    /* display: none; */
    /* z-index: -1; */
    position: absolute;
    left: 0px;
    bottom: 0px;
}

#welcomescreen .global_news .group.image .new .bckg.grayed: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%);


}




#welcomescreen .global_news .group.image .new .newtime{
   
    position: absolute;
    text-align: right;

    top: 16px;
    right: 16px;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 1;

}



#welcomescreen .global_news .group.image .new .newtext_html{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;

    clip-path: var(--clip_win_new);

}





#welcomescreen .global_news .group.image .new .newtext_html .newtitle,
#welcomescreen .global_news .new.discordapp .newtext_html .newtitle{
    display: block;
    position: absolute;
    font-size: 22px;
    top: 14px;
    left: 18px;
    right: 90px;
    font-family: var(--fontFaimly_header);
    text-align: left;
    z-index: 1;
    line-height: 24px;
    /* min-height: 36px; */
   
}


#welcomescreen .global_news .new.discordapp:hover .newtext_html .newtitle{
    font-family: var(--fontFaimly_default);
}


#welcomescreen .global_news .group.image .new .newtitle:before{
    content: "";
    position: absolute;
    display: block;
    bottom: -14px;
    right: 0px;
    height: 3px;
    left: 0px;
    background-color: white;

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





#welcomescreen .global_news .group.image .new .newtext_html .newtext{
    position: absolute;
    top: calc(50% + 25px);
    left: 18px;
    right: 25px;
    /* bottom: 0px; */
    /* right: 0px; */
    /* text-align: left; */
    /* line-height: 16px; */
    font-size: 13px;
    /* cursor: pointer; */
    line-height: 18px;
    /* white-space: nowrap; */
    text-align: left;
    color: white;
    z-index: 1;
    transform: translateY(-50%);
}




#welcomescreen .global_news .group.image .new .newtext_html p{
    padding: 15px 5px 5px;
    line-height: 20px;
    margin: 0px;
}

#welcomescreen .global_news .new.link .newtime{
    position: absolute;
    left: -70px;
    top: 2px;
    width: 59px;
    text-align: right;
}


#welcomescreen .global_news .new.link .newtext_html{
    left: 80px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    text-align: left;
}



#welcomescreen .global_news .new.link .newtext_html .newtitle{
    display: inline-block;
    font-size: 13px;
    color: rgba(0,255,255,0.9);
    text-transform: uppercase;

    color: rgba(255,255,255,1);

    padding-right: 10px;
}

#welcomescreen .global_news .new.link .newtext_html .newtext{
    display: inline-block;
    color: rgb(255,255,255,0.7);
    font-size: 12px;
    position: absolute;

}






#corphist {
    display:block;
    position:absolute;
    top:50px;
    left:30px;
    right:30px;
    z-index:10000;
    bottom:30px;



}
#corphist:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 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;
    background-size: cover;

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



#corphist .corpname{
    position: absolute;
    top: 75px;
    left: 30px;
    text-transform: uppercase;
    line-height: 30px;
    font-size: 21px;
    color: rgba(255,255,255,1);
}
#corphist .corpid{
    font-size: 70px;
    position: absolute;
    top: 40px;
    right: 15px;

    color: rgba(255,255,255,1);
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
}
#corphist .subdescription{
    font-size:14px;
    position:absolute;
    top:117px;
    left:45px;
    right:320px;
    height:115px;
    color:white;
    padding-left:10px;
    box-sizing:border-box;
}
#corphist .description{
    font-size:14px;
    position:absolute;
    top:147px;
    left:45px;
    right:320px;
    height:115px;
    color:white;
    padding-left:10px;
    box-sizing:border-box;
}
#corphist .stockvalues{
    font-size: 45px;
    position: absolute;
    top: 120px;
    width: 300px;
    right: 15px;
    height: 37px;
    color: white;

    text-align: right;
    
}
#corphist .stockvalues .stocksign{
    display:inline-block;
    height:100%;
    width:24px;
}
#corphist .stockvalues .stocksign.up{
    background:url('ico/ico_stock_up-24.png') center 5px no-repeat;
}
#corphist .stockvalues .stocksign.down{
    background:url('ico/ico_stock_down-24.png') center bottom no-repeat;
}
#corphist .stockvalues .stocksign.updown{
}
#corphist .graph{
    position:absolute;
    top:240px;
    right:5px;
    left:5px;
    bottom:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
}
#corphist .graph .graphinside{
    position:absolute;
    top:23px;
    right:10px;
    left:10px;
    bottom:20px;
}
#corphist .graph .graphinside .columnbox{
    position:relative;
    float:left;
    width:5px;
    height:100%;
    overflow:hidden;
}
#corphist .graph .graphinside .columnbox .column{
    position:absolute;
    height:100%;
    left:1px;
    right:1px;
}
#corphist .graph .graphinside .columnbox .column .liner{
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    top:0px;
}
#corphist .graph .graphinside .columnbox .column .liner:before{
    content:'';
    position:absolute;
    bottom:0px;
    left:0px;
    right:50%;
    top:0px;
    border-right: 1px solid rgba(255,255,255,0.1);

}
#corphist .graph .graphinside .columnbox .column .topper{
    position:absolute;
    top:0px;
    left:2px;
    right:2px;
    height:3px;
    z-index:1000;
    
}
#corphist .graph .graphinside .columnbox .column .topper.positive{
    background-color:rgba(255,255,255,1);
    box-sizing: border-box;
}
#corphist .graph .graphinside .columnbox .column .topper.negative{

    box-sizing: border-box;
    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: 4px 4px;
    background-position: 0 0, 30px 30px;
}

#corphist .graph .graphinside .columnbox .column:hover .liner{
    opacity:0.9;
}
#corphist .graph .graphinside .columnbox .column:hover {
    animation:blink 100ms linear 2 alternate;
}
#corphist .graph .graphinside .columnbox .column .number{
    position: absolute;
    left: -51px;
    top: -70px;
    width: 100px;
    height: 0px;
    font-size: 12px;
    opacity: 0.9;
    transform: rotate(-90deg);
    line-height: 10px;
    visibility: hidden;
}
#corphist .graph .graphinside .columnbox .column:hover .number{
    visibility: visible;
}




#setup {
    display:block;
    position:absolute;
    top:65px;
    left:calc(50% - 290px);
    width:580px;
    z-index:10000;
    bottom:40px;
}

#setup: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;
}

#setup .scroll {
    position: absolute;
    top: 125px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}


#setup .switchers {
    position: absolute;
    top: 85px;
    left: 15px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
    height: 35px;

}
#setup .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);
}

#setup .switchers li:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#setup .switchers li.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#setup .switchers li.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}



#setup .setupitem {
    display: block;
    position: relative;
    margin: 0px auto;
    width: 460px;
}

#setup .setupitem .titler {
    color: #adacac;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    padding-top: 10px;
    height: 50px;
    display: block;
}

#setup .setupitem .titler:before {
    content: '';
    display: block;
    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
    height: 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}


#setup .setupitem .descr{
    display: block;
    color: #adacac;
    padding: 0px 20px 25px;
    text-align: center;
    font-size: 13px;
}


#setup .setupitem .input{
    color: rgba(255,255,255,.6);
    padding: 5px 10px 0px;
    
    text-align: center;
    font-size: 12px;
}

#setup .setupitem .input.gridvals-1,
#setup .setupitem .input.gridvals-2,
#setup .setupitem .input.gridvals-3,
#setup .setupitem .input.gridvals-4,
#setup .setupitem .input.gridvals-5,
#setup .setupitem .input.gridvals-6 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    justify-items: center;
    align-items: top;
}

#setup .setupitem .input.gridvals-1 {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
}

#setup .setupitem .input.gridvals-2 {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
}

#setup .setupitem .input.gridvals-3 {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}

#setup .setupitem .input.gridvals-4 {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
}

#setup .setupitem .input.gridvals-5 {
    grid-template-columns: repeat(5, minmax(70px, 1fr));
}

#setup .setupitem .input.gridvals-6 {
    grid-template-columns: repeat(6, minmax(60px, 1fr));
}

#setup .setupitem .input input[type=range]{
    position: relative;
    display: inline-block;
    width: 275px;
  
}

#setup .setupitem .input .inputrange-value{
    padding: 10px 0px;
}


#setup .setupitem .input .unmutebutton {
    position: relative;
    width: auto;
    height: 32px;
    cursor: pointer;
    background-image: url(ico/mute-2-32.png);
    background-size: 26px;
    background-position: center top 5px;
    background-repeat: no-repeat;
    padding-top: 51px;
    
}

#setup .setupitem .input .unmutebutton:hover {
  
    animation: blink 100ms linear 2 alternate;
}


#setup .setupitem .input.three-values .switch,
#setup .setupitem .input.three-values .checkbox{
    margin: 0px 5px;

}

#setup .setupitem .input input
{
    width: 65px;
    margin: 5px 5px;
    text-align: center;
}




#stockexch {
    position: absolute;
    top: 50px;
    left: 30px;
    right: 30px;
    bottom: 40px;
    z-index: 1;
}



#stockexch:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 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;
    background-size: cover;

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

#stockexch .scroll {
    position: absolute;
    top: 95px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}




#stockexch .scroll .stock-table{
    padding:0px;
    margin:0px;
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
#stockexch .scroll .stock-table td{
    font-size: 12px;
    height: 27px;
    color: white;
    padding: 0px 10px;
    text-transform: uppercase;
    line-height: 27px;
    cursor: pointer;
    font-family: var(--fontFaimly_button);
}

#stockexch .scroll .stock-table td .stocksign{
    display:block;
    background-size: 8px;
    position: absolute;
    right: 0px;
    bottom: 5px;
    top: 5px;
    background-repeat: no-repeat;
    width: 10px;

}
#stockexch .scroll .stock-table td .stocksign.up{
    background-image:url('ico/ico_stock_up-24.png');
    background-position: center 5px;
}
#stockexch .scroll .stock-table td .stocksign.down{
    background-image:url('ico/ico_stock_down-24.png') ;
    background-position: center bottom;
}
#stockexch .scroll .stock-table td .stocksign.updown{
}







#stockexch .scroll .stock-table tr:hover td {
    background-color: white;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    color: black;

}

#stockexch .scroll .stock-table th{
    background-color: white;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
    color: black;
    padding: 5px 10px;
    text-transform: uppercase;
    line-height: 15px;
    text-align: left;
}

#stockexch .scroll .stock-table th.qty,
#stockexch .scroll .stock-table td.qty{
    text-align: right;
}
#stockexch .scroll .stock-table th.price,
#stockexch .scroll .stock-table td.price{
    text-align: right;
    position: relative;
    padding-right: 15px;
}

#stockexch .switcher {
    position: absolute;
    top:60px;
    left: 15px;
    text-align: left;
    border-spacing: 0px;
    box-sizing: border-box;
    padding: 0px;
}

#stockexch .switcher 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);
}

#stockexch .switcher span:hover{
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#stockexch .switcher span.active:hover{
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#stockexch .switcher span.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}



#stockexch .graph{
    position:absolute;
    top:95px;
    right:5px;
    left:5px;
    bottom:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
}
#stockexch .graph .graphinside{
    position:absolute;
    top:23px;
    right:10px;
    left:10px;
    bottom:20px;
    overflow:hidden;
}
#stockexch .graph .graphinside .columnbox{
    position:relative;
    float:left;
    width:5px;
    height:100%;
}
#stockexch .graph .graphinside .columnbox .column{
    position:absolute;
    height:100%;
    left:1px;
    right:1px;
}
#stockexch .graph .graphinside .columnbox .column .liner{
    position: absolute;
    bottom: 0px;
    width: 16px;
    left: calc(50% - 8px);
    top: 5px;
    opacity: 1;
    border: 2px solid white;
    box-sizing: border-box;
}

#stockexch .graph .graphinside .columnbox .column:hover {
    animation:blink 100ms linear 2 alternate;
}

#stockexch .graph .graphinside .columnbox .column .topper{
    position:absolute;
    top:0px;
    left:1px;
    right:1px;
    height:3px;
    z-index:1000;
}
#stockexch .graph .graphinside .columnbox .column .topper.positive{
    background-color:rgba(255,255,255,1);
}
#stockexch .graph .graphinside .columnbox .column .topper.negative{
    background-color:rgba(255,255,255,0);
    border:1px solid rgba(255,255,255,1);
}
#stockexch .graph .graphinside .columnbox .column:hover .liner{
    opacity:0.9;
}
#stockexch .graph .graphinside .columnbox .column .number{
    position: absolute;
    left: calc(50% - 50px);
    top: -30px;
    width: 100px;
    height: 16px;
    font-size: 10px;
    opacity: 0.4;
    /* transform: rotate(-90deg); */
    line-height: 14px;

    white-space: nowrap;
    text-align: center;
}

#stockexch .graph .graphinside .columnbox .column .number .name{
    display: block;
}
#stockexch .graph .graphinside .columnbox .column:hover .number{
    opacity:0.9;
}



#corpstatements {
    display:block;
    position:absolute;
    top:70px;
    left:30px;
    right:30px;
    bottom:40px;
    z-index: 1;


}


#corpstatements:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 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;
    background-size: cover;

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


#corpstatements .subtitle {
    position: absolute;
    top: 60px;
    left: 15px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    font-size: 30px;
    color: rgba(255,255,255,.9);
    width: calc(100% - 350px);
}

#corpstatements .subtitle .label {
    position: relative;
    font-size: 13px;
    font-family: var(--fontFaimly_text);
    text-transform: none;
    padding: 10px;
}

#corpstatements .params {
    position: absolute;
    top: 45px;
    right: 25px;
    width: 300px;


    font-size: 12px;
    color: rgba(255,255,255,.9);
    line-height: 16px;
    border-spacing: 0px;
    border-collapse: separate;
    z-index: 1;
}


#corpstatements .params:before{
    content: '';
    position: absolute;
    left: 0px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    background-color: rgb(60,60,60);

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

#corpstatements .params th {
    text-align: right;

    padding: 2px 10px 2px 0px;

}

#corpstatements .params td {
    text-align: right;
    color: white;

    padding: 0px 10px;

}

#corpstatements .scroll {
    position: absolute;
    top: 180px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}




#corpstatements .scroll .assets-table{
    padding:0px;
    margin:0px;
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
#corpstatements .scroll .assets-table td{
    font-size: 12px;
    height: 27px;
    color: white;
    padding: 0px 10px;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#corpstatements .scroll .assets-table td .hname{
    padding: 1px 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    background-color: white;
    color: black;
}




#corpstatements .scroll .assets-table td .hname:hover {
    animation: blink 100ms linear 2 alternate;
    font-family: var(--fontFaimly_button);
}


#corpstatements .scroll .assets-table td .stocksign{
    display: block;
    width: 10px;
    background-size: 8px;
    position: absolute;
    right: 0px;
    bottom: 5px;
    top: 5px;
    background-repeat: no-repeat;

}

#corpstatements .scroll .assets-table th.price-unit,
#corpstatements .scroll .assets-table td.price-unit{
    text-align: right;
    position: relative;
    padding-right: 15px;
}

#corpstatements .scroll .assets-table td.price-unit .stocksign.up{
    background-image:url('ico/ico_stock_up-24.png');
    background-position: center 5px;
}
#corpstatements .scroll .assets-table td.price-unit .stocksign.down{
    background-image:url('ico/ico_stock_down-24.png') ;
    background-position: center bottom;
}
#corpstatements .scroll .assets-table td.price-unit .stocksign.updown{
}


#corpstatements .scroll .assets-table tr:hover td {
    color: rgba(255,255,255,0.8);
}

#corpstatements .scroll .assets-table th{
    background-color: white;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
    color: black;
    padding: 5px 10px;
    text-transform: uppercase;
    line-height: 15px;
    text-align: left;
}


#corpstatements .scroll .assets-table th.qty,
#corpstatements .scroll .assets-table td.qty{
    text-align: right;
}


#corpstatements .scroll .assets-table th.inc-total,
#corpstatements .scroll .assets-table td.inc-total{
    text-align: right;
}

#corpstatements .scroll .assets-table th.rel,
#corpstatements .scroll .assets-table td.rel{
    text-align: right;
}

#corpstatements .scroll .assets-table th.rel-total,
#corpstatements .scroll .assets-table td.rel-total{
    text-align: right;
}

.corporations .subtitle{
    font-size:36px;
    position:absolute;
    top:50px;
    left:0px;
    right:390px;
    height:150px;
    color:white;
    padding-left:10px;
    box-sizing:border-box;
    text-transform:uppercase;
    text-shadow:0px 0px 10px rgb(0,255,255);
}
.corporations .label{
    font-size:13px;
    color:white;
    padding-top:10px;
}
.corporations .params{
    position:absolute;
    top:57px;
    right:0px;
    width:348px;
    height:125px;
    color:white;
    text-align:left;
    background:linear-gradient(to right,rgba(0,255,255,0.0) 0%,rgba(0,255,255,0.1) 100%);
    padding:10px;
    font-size:13px;
}
.corporations .params td{
    padding:0px 10px;
    text-align:right;
    overflow:hidden;
    font-size:13px;
    font-weight:bold;
    color:rgb(0,255,255);
    text-shadow:0px 0px 10px rgb(103,232,237);
    line-height:18px;
}
.corporations .params th{
    font-size:13px;
    color:rgba(0,255,255,0.5);
    padding-right:10px;
    padding-left:10px;
    overflow:hidden;
    height:17px;
    font-weight:normal;
    text-align:right;
}
.corporations .attributes{
    position:absolute;
    top:205px;
    right:5px;
    left:5px;
    bottom:5px;
    color:white;
    text-align:left;
    border-spacing:0px;
    background:linear-gradient(to right,rgba(0,255,255,0.1) 0%,rgba(0,0,0,0) 100%);
}
.corporations .attributes table{
    padding:0px;
    margin:3px 3px;
    width:calc(100% - 6px);
    border-spacing:0px;
    border-collapse:separate;
}
.corporations .attributes tr:hover td{
    background-color:rgba(0,255,255,0.1);
}
.corporations .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);
}
.corporations .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;
}
.corporations .stocksign{
    display:inline-block;
    height:100%;
    width:10px;
}
.corporations .stocksign.up{
    background:url('ico/ico_stock_up-24.png') center 7px no-repeat;
    background-size:8px;
}
.corporations .stocksign.down{
    background:url('ico/ico_stock_down-24.png') center bottom no-repeat;
    background-size:8px;
}
.corporations .stocksign.updown{
}




#corporation {
    position: absolute;
    top: 70px;
    left: calc(50% - 490px);

    bottom: 40px;
    z-index: 1;
    width: 980px;
}

#corporation: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;
}

#corporation .inside{
    position: absolute;
    height: 155px;
    top: 15px;
    left: 15px;
    right: 225px;
    border-right: 2px solid white;
}
#corporation .inside .title{
    position: relative;
    height: auto;
    background: white;


    text-align: left;
    font-size: 47px;
    color: black;
    padding: 0px 12px;
    text-transform: none;
    height: 60px;
    line-height: 60px;
    text-transform: uppercase;
    text-shadow: none;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    overflow: hidden;
    clip-path: unset;
}

#corporation .inside .title .textinput {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#corporation .inside .title .textinput input{
    margin: 0px 0px;
    position: absolute;
    width: calc(100% - 35px);
    height: unset;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    font-size: 50px;
    padding: 0px 10px;
    color: black;
    border: none;
    font-family: var(--fontFaimly_header);

    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;
    text-align: left;
}
#corporation .inside .title .crcancel{
    position: absolute;
    height: 22px;
    width: 22px;
    right: 3px;
    top: 8px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(ico/ico-cancel-32.png);
    cursor: pointer;
    filter: invert(1);
    animation:highlited 1000ms linear infinite;
}
#corporation .inside .title .crok{
    position:absolute;
    display:block;
    height:22px;
    width:22px;
    right:3px;
    top:32px;
    background-size:22px;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url('ico/ico-save-32.png');
    cursor:pointer;
    background-color: transparent;
    box-shadow: none;
    filter: invert(1);
    animation:highlited 1000ms linear infinite;
}
#corporation .inside .title .text .change {
    position: absolute;
    display: none;
    height: 22px;
    width: 22px;
    left: calc(50% - 50px);
    top: calc(50% - 15px);
    background: #ffbc00;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;

    text-align: center;
    cursor: pointer;
    color: black;

}
#corporation .inside .title:hover .text .change {
    display: block;
    animation:blink 100ms linear 2 alternate;
}


#corporation .inside .description{
    bottom: 0px;
    position: absolute;
    color: rgba(200,200,200);
    text-decoration: none;
    text-transform: none;
    font-size: 14px;

    text-align: left;
    top: 65px;
    left: 5px;
    right: 5px;

    text-transform: none;
    box-sizing: border-box;

    padding: 10px 10px;
}


#corporation .inside .description .textinput textarea{
    margin: 0px;
    padding: 10px 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    font-size: 14px;
    color: black;
    font-family: var(--fontFaimly_button) !important;
    border: none;
    height: 100%;
    background-color: white;
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    box-sizing: border-box;

}
#corporation .inside .description .crbiocancel{
    position: absolute;
    height: 22px;
    width: 22px;
    right: 0px;
    top: 0px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(ico/ico-cancel-32.png);
    cursor: pointer;
    filter: invert(1);
    animation:highlited 1000ms linear infinite;
}
#corporation .inside .description .setcrbio{
    position:absolute;
    display:block;
    height:22px;
    width:22px;
    right:0px;
    top:20px;
    background-size:22px;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url('ico/ico-save-32.png');
    cursor:pointer;
    background-color: transparent;
    box-shadow: none;
    filter: invert(1);
    animation:highlited 1000ms linear infinite;
}
#corporation .inside .description .textinput {
    display: none;
    padding: 0px;
    line-height: 0px;
}
#corporation .inside .description .text .change {
    position: absolute;
    display: none;
    height: 22px;
    width: 22px;
    left: calc(50% - 50px);
    top: calc(50% - 15px);
    background: #ffbc00;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-family: var(--fontFaimly_button);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: black;

}
#corporation .inside .description:hover .text .change {
    display: block;
    animation:blink 100ms linear 2 alternate;
}

#corporation  .avatar{
    position: absolute;
    height: 195px;
    top: 15px;
    right: 15px;
    text-align: center;
    width: 210px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}
#corporation  .avatar .avatar_img{
    height: 195px;
    width: 210px;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    /* filter: grayscale(10%) brightness(110%) contrast(110%); */
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 45px, 100% 100%, 0 100%);
}

#corporation .avatar .editimage{
    display: none;
    position: absolute;
    top: calc(50% - 15px);
    
    left: 50%;
    transform: translateX(-50%);
    
}



#corporation .avatar:hover .editimage{
    display:block;
    animation:blink 100ms linear 2 alternate;
}


#userni{
    z-index: 999000;
    position:absolute;
    width:400px;
    min-height:140px;
    background-color: rgb(60,60,60);

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


#userni table.imageselect {
    color: white;
    width: 100%;
    margin-top: 50px;
    border-spacing: 20px;
    border-collapse: separate;
}
#userni .text {
    content:'';
    display: block;
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
}
#userni .ali-confirm {
    position: absolute;
    top: 115px;
    left: calc(50% - 80px);
}
#userni .ali-cancel {
    position: absolute;
    top: 115px;
    right: calc(50% - 80px);
}
#userni .info{
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 20px 10px;
    letter-spacing: 0px;
    text-transform: none;
}

#usernn{
    z-index: 999000;
    position:absolute;
    width:400px;
    min-height:140px;
    background-color: var(--hud_backgroundcolor);
}
#usernn: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;
}
#usernn: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;
}
#usernn table.newname {
    color: white;
    width: 100%;
    margin-top: 50px;
    border-spacing: 20px;
    border-collapse: separate;
}
#usernn table.newname input#nameinput {
    text-transform: none;
    font-size: 38px;
    text-align: center;
    font-family: var(--fontFaimly_header);
    height: 40px;
    line-height: 40px;
    text-shadow: -2px 0px 0 rgba(255,131,64,.3), 2px 0px 0 rgba(126, 250, 255, .2);
    animation: font_color_glitch 5300ms linear infinite;
}
#usernn .text {
    content:'';
    display: block;
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
}
#usernn .ali-confirm {
    position: absolute;
    top: 115px;
    left: calc(50% - 80px);
}
#usernn .ali-cancel {
    position: absolute;
    top: 115px;
    right: calc(50% - 80px);
}
#usernn .info{
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 20px 10px;
    letter-spacing: 0px;
    text-transform: none;
}
#usernn .error {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    text-transform: uppercase;
    color: rgb(164,2,4);
    animation: highlited 1000ms linear infinite;
}
#usernn .normal {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}

#userne{
    z-index: 999000;
    position:absolute;
    width:400px;
    min-height:140px;
    background-color: var(--hud_backgroundcolor);
}
#userne: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;
}
#userne: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;
}
#userne table.newmail {
    color: white;
    width: 100%;
    margin-top: 50px;
    border-spacing: 20px;
    border-collapse: separate;
}
#userne table.newmail input#emailinput {
    text-transform: none;
    font-size: 38px;
    text-align: center;
    font-family: var(--fontFaimly_header);
    height: 40px;
    line-height: 40px;
    text-shadow: -2px 0px 0 rgba(255,131,64,.3), 2px 0px 0 rgba(126, 250, 255, .2);
    animation: font_color_glitch 5300ms linear infinite;
}
#userne .text {
    content:'';
    display: block;
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    color: white;
    text-align: center;
}
#userne .ali-confirm {
    position: absolute;
    top: 115px;
    left: calc(50% - 80px);
}
#userne .ali-cancel {
    position: absolute;
    top: 115px;
    right: calc(50% - 80px);
}
#userne .info{
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 20px 10px;
    letter-spacing: 0px;
    text-transform: none;
}
#userne .error {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    text-transform: uppercase;
    color: rgb(164,2,4);
    animation: highlited 1000ms linear infinite;
}
#userne .normal {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}


#corporation .inside .label{
    height:37px;
    color:white;
    padding-left:10px;
    line-height:50px;
    text-decoration:none;
    font-size:12px;
    font-weight:normal;
    text-shadow:0px 0px 10px rgb(0,255,255);
    text-align:center;
}
#corporation .inside2{
    position:absolute;
    bottom:15px;
    top:175px;
    left:15px;
    right:15px;
}
#corporation .inside2 .switchers {
    display:block;
    margin:0px;
    padding:0px;
    height:35px;
}
#corporation .inside2 .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);
    margin: 0px 2px;
}

#corporation .inside2 .switchers li:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#corporation .inside2 .switchers li.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#corporation .inside2 .switchers li.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}



#corporation .inside2 #contentbox{
    position: absolute;
    bottom: 0px;
    top: 35px;
    left: 0px;
    right: 0px;
    border-top: 1px solid rgba(255,255,255,1);
}
#corporation .inside2 #contentbox .left{
    width: 320px;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
}

#corporation .inside2 #contentbox .right{
    width: calc(100% - 320px);
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

#corporation .inside2 #contentbox table{
    padding:0px;
    margin:0px;
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}


#corporation .inside2 #contentbox table .strade:hover td {
    cursor: pointer;    
    background-color: #4f4f4f6b;
    border-bottom: 1px solid #4f4f4f6b;
    animation: blink 100ms linear 2 alternate;
}

#corporation .inside2 #contentbox td{
    color: white;
    padding: 7px 10px;
    line-height: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
    font-size: 14px;
}


#corporation .inside2 #contentbox td span.msg{
    padding: 0px 0px 0px 5px;
    color: #939393;
}

#corporation .inside2 #contentbox td .miniature {
    padding-right: 10px;

}

#corporation .inside2 #contentbox td .minname {
    line-height: 32px;

}


#corporation .inside2 #contentbox td.bhprocess .progressbar {
    position: relative;
    top: 3px;
    color: white;
    height: 7px;
    left: 0px;
    background-color: rgb(33,39,43);
    overflow: hidden;
    width: 90%;
}
#corporation .inside2 #contentbox td.bhprocess .progressbar .bar{
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:rgb(255,255,255);
    top:0px;
}

#corporation .inside2 #contentbox td.bhprocess .resttime {
    position: relative;
    white-space: nowrap;
}







#corporation .inside2 #contentbox .astronauts tr td.loc {
    width: 300px;
    box-sizing: border-box;
    height: 60px;
    position: relative;
    white-space: nowrap;
}

#corporation .inside2 #contentbox .astronauts tr .baseimge{
    padding: 1px 4px;
    cursor: pointer;
    font-size: 12px;
}




#corporation .inside2 #contentbox .astronauts tr .baseimge:hover {
    color: black;
    background-color: white;

    animation: blink 100ms linear 2 alternate;
}






#corporation .inside2 #contentbox th{
    background-color: white;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
    color: black;
    padding: 5px 10px;
    text-transform: uppercase;
    line-height: 15px;
    text-align: left;
}





#corporation .inside2 #contentbox th.qty,
#corporation .inside2 #contentbox td.qty{
    text-align: right;
    min-width: 80px;
}

#corporation .inside2 #contentbox th.arace,
#corporation .inside2 #contentbox td.arace{
    min-width: 120px;
    text-align: right;
}

#corporation .inside2 #contentbox th.crew,
#corporation .inside2 #contentbox td.crew{
    text-align: right;
}
#corporation .inside2 #contentbox td.crew{
    font-size: 20px;
}



#corporation .inside2 #contentbox th.name,
#corporation .inside2 #contentbox td.name{
    width: 90%;
}

#corporation .inside2 #contentbox th.modules,
#corporation .inside2 #contentbox td.modules{
    text-align: right;
}
#corporation .inside2 #contentbox td.modules{
    font-size: 20px;
}

#corporation .inside2 #contentbox th.blocks,
#corporation .inside2 #contentbox td.blocks{
    text-align: right;
}
#corporation .inside2 #contentbox td.blocks{
    font-size: 20px;
}

#corporation .inside2 #contentbox th.colonists,
#corporation .inside2 #contentbox td.colonists{
    text-align: center;
    max-width: 350px;
    min-width: 350px;
}

#corporation .inside2 #contentbox th.price,
#corporation .inside2 #contentbox td.price{
    white-space: nowrap;
}



#corporation .inside2 #contentbox td.colonists{
    padding-top: 26px;
}

#corporation .inside2 #contentbox th.exp,
#corporation .inside2 #contentbox td.exp{
    text-align: right;
}

#corporation .inside2 #contentbox th.date,
#corporation .inside2 #contentbox td.date{
    text-align: right;
    width: 120px;
}

#corporation .inside2 #contentbox td.date{
    color: #939393;
}

#corporation .inside2 #contentbox th.time,
#corporation .inside2 #contentbox td.time{
    text-align: right;
}

#corporation .inside2 #contentbox th.change,
#corporation .inside2 #contentbox td.change{
    text-align: right;
}

#corporation .inside2 #contentbox th.balance,
#corporation .inside2 #contentbox td.balance{
    text-align: right;
    white-space: nowrap;
}

#corporation .inside2 #contentbox th.change_plus,
#corporation .inside2 #contentbox td.change_plus{
    text-align: right;
    white-space: nowrap;
}

#corporation .inside2 #contentbox th.change_minus,
#corporation .inside2 #contentbox td.change_minus{
    text-align: right;
    white-space: nowrap;
}

#corporation .inside2 #contentbox td .shipdesign{
    height:50px;
    position:relative;
    overflow:hidden;
}
#corporation .inside2 #contentbox td .shipdesign .module{
    background-position:left center;
    background-repeat:no-repeat;
    height:50px;
    float:left;
    background-size:100% auto;
}
#corporation .inside2 #contentbox td .shipdesign .module:hover{
    background-color:rgba(0,255,255,0.1);
}


#corporation .inside2 #contentbox .params{
    width: calc(100% - 15px);
}
#corporation .inside2 #contentbox .params th{
    color:rgba(255,255,255,0.5);
    padding:5px 10px;
    background-color:transparent;
    overflow:hidden;
    text-align:right;
    width: 100px;
}
#corporation .inside2 #contentbox .params td{
    color: rgb(255,255,255);
    padding: 0px 10px;
    font-size: 16px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;

}

#corporation .inside2 #contentbox .params th,
#corporation .inside2 #contentbox .params td{
    border-bottom: 1px solid rgba(255,255,255,0.05);
    height:35px;
    vertical-align: middle;
}


#corporation .inside2 #contentbox .params tr:hover td{
    background: none;
    color: white;
}
#corporation .inside2 #contentbox .params td.img{
    position: relative;
}


#corporation .inside2 #contentbox .params td .avatar {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0px auto;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(95, 95, 95);
    filter: grayscale(10%) brightness(110%) contrast(110%);
    background-size: auto, contain, auto, contain;
    background-position: top center, center,center, center;
}


#corporation .inside2 #contentbox .params td .avatar .avatar_img {
    height: 150px;
    width: 150px;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: rgb(95, 95, 95);
    filter: grayscale(10%) brightness(110%) contrast(110%);
    background-size: auto, contain, auto, contain;
    background-position: top center, center,center, center;
    animation: none;
}

#corporation .inside2 #contentbox .params td .sex .sex_male,
#corporation .inside2 #contentbox .params td .sex .sex_female {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 5px;
    background-color: black;
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: 4px;
    background-position: center;
    cursor: pointer;
}

#corporation .inside2 #contentbox .params td .sex .sex_male:not(.active):hover,
#corporation .inside2 #contentbox .params td .sex .sex_female:not(.active):hover {
    animation: blink 100ms linear 2 alternate;
    filter: invert(1);
}


#corporation .inside2 #contentbox .params td .sex .sex_male.active,
#corporation .inside2 #contentbox .params td .sex .sex_female.active {
    filter: invert(1);
}

#corporation .inside2 #contentbox .params td .sex .sex_male {
    background-image: url(ico/male-2-24.png);
}
#corporation .inside2 #contentbox .params td .sex .sex_female {
    background-image: url(ico/female-2-24.png);
}

#corporation .inside2 #contentbox .params td .email {
    position: relative;
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-size: 12px;
}
#corporation .inside2 #contentbox .params td .email .edit {
    position: absolute;
    display: none;
    left: calc(50% - 50px);
    top: calc(50% - 15px);
    background: #ffbc00;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;

    text-align: center;
    cursor: pointer;
    color: black;

}

#corporation .inside2 #contentbox .params td .email:hover .edit  {
    display: block;
    animation:blink 100ms linear 2 alternate;
}

#corporation .inside2 #contentbox .params td .name {
    position: relative;
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-size: 30px;
    font-family: var(--fontFaimly_header);
}
#corporation .inside2 #contentbox .params td .name .edit {
    position: absolute;
    display: none;
    left: calc(50% - 50px);
    top: calc(50% - 15px);
    background: #ffbc00;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-family: var(--fontFaimly_header);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;

    text-align: center;
    cursor: pointer;
    color: black;

}
#corporation .inside2 #contentbox .params td .name:hover .edit  {
    display: block;
    animation:blink 100ms linear 2 alternate;
}


#corporation .inside2 #contentbox table.astronauts tr:hover td {
    color: white;
    background-color: unset;

}

#corporation .inside2 #contentbox table.astronauts .hname {
    padding: 1px 6px;
    cursor: pointer;
    font-size: 12px;
    color: black;
    background-color: white;
    font-family: var(--fontFaimly_button);
}

#corporation .inside2 #contentbox table.astronauts .hname:hover {



    animation: blink 100ms linear 2 alternate;
}




#corporation .inside2 #contentbox table.astronauts td.face{
    width: 60px;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 106%;
    filter: grayscale(1);
    box-sizing: border-box;
    max-width: 60px;
    min-width: 60px;
    height: 60px;
    position: relative;
    padding: 0px;
    margin: 0px;
}

#corporation .inside2 #contentbox table.astronauts td.face .aid{
    position: absolute;
    display: block;
    right: 0px;
    bottom: 1px;
    left: 0px;
    font-size: 8px;
    color: rgba(255,255,255,.5);
    text-align: center;
}

#corporation .inside2 #contentbox table.astronauts tr:hover .aid{

}

#corporation .inside2 #contentbox table.astronauts td.arace{
    position: relative;
    width: 35px;
}

#corporation .inside2 #contentbox table.astronauts td.arace .race{
    position: absolute;
    display: block;
    right: 0px;
    bottom: 0px;
    left: 0px;
    top: 0px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center right;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 40px;
    color: rgb(166,240,255);
    padding-right: 20px;
    text-align: right;
}


#corporation .inside2 #contentbox table.spacecrafts tr:hover td {
    color: white;
    background-color: unset;

}

#corporation .inside2 #contentbox table.spacecrafts .hname {

    cursor: pointer;

    background-color: white;
    padding: 0px 7px;

    color: black;
    font-size: 20px;

}

#corporation .inside2 #contentbox table.spacecrafts .hname:hover {
    color: black;
    background-color: white;

    animation: blink 100ms linear 2 alternate;
}

#corporation .inside2 #contentbox table.spacecrafts .destroyed td {
    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;


}

#corporation .inside2 #contentbox table.spacecrafts td.baseimg {
    min-width: 256px;
    box-sizing: border-box;
    height: 100px;
    position: relative;
    overflow: hidden;

}

#corporation .inside2 #contentbox table.spacecrafts td.baseimg .baseimge {
    position: absolute;
    display: block;
    right: 0px;
    bottom: 10px;
    left: 0px;
    top: 10px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: grayscale(1) brightness(1.5);
}


#corporation .inside2 #contentbox table.stations .destroyed td {
    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;
}

#corporation .inside2 #contentbox table.stations td.name .hname {
    font-size: 16px;
    display: inline-block;
    font-family: var(--fontFaimly_header);

    padding: 0px 0px;
    line-height: 25px;
    color: white;
    font-size: 20px;

}

#corporation .inside2 #contentbox table.stations td.name .hdestroyed {
    font-size: 12px;
    display: block;
    margin: 5px 0px;
}


#corporation .inside2 #contentbox table.stations td.csimg {
    min-width: 256px;
    box-sizing: border-box;
    height: 150px;
    position: relative;
  

}

#corporation .inside2 #contentbox table.stations td.csimg .csimge {
    position: absolute;
    display: block;
    right: 0px;
    bottom: 10px;
    left: 0px;
    top: 10px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: grayscale(1) brightness(1);
}



#corporation .inside2 #contentbox table.inventory tr.baseobj td,
#corporation .inside2 #contentbox table.inventory tr.stationobj td {
    color: black;
    font-size: 25px;
    padding: 16px 0px 0px 0px;

    line-height: 30px;

}

#corporation .inside2 #contentbox table.inventory tr.baseobj td .namebox,
#corporation .inside2 #contentbox table.inventory tr.stationobj td .namebox {
    position: relative;
    display: inline-block;
}


#corporation .inside2 #contentbox table.inventory tr.stationobj td .namebox span.oname {

    padding: 0px 5px;
    color: white;

}

#corporation .inside2 #contentbox table.inventory tr.baseobj td .namebox span.oname {
    cursor: pointer;
    background-color: white;
    padding: 0px 7px;
}

#corporation .inside2 #contentbox table.inventory tr.baseobj td .namebox span.oname:hover {
    animation: blink 100ms linear 2 alternate;
}

#corporation .inside2 #contentbox table.inventory tr.baseobj td .namebox span.oname a {
    color: black;
    text-decoration: none;
}


#corporation .inside2 #contentbox table.inventory tr.baseobj td .namebox span.baseimge {
    position: absolute;
    left: calc(100% + 10px);
    width: 200px;
    height: 27px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto 50px;
    filter: grayscale(1) brightness(1.5);
}


#corporation .inside2 #contentbox table.inventory tr.stationobj td .namebox span.csimage {
    position: absolute;
    left: calc(100% + 10px);
    width: 50px;
    height: 27px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    filter: grayscale(1) brightness(2);
}

#corporation .inside2 #contentbox table.inventory tr.baseobj td span.oname .baseimge {
    position: relative;
    display: inline-block;
    text-align: left;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 36%;
    padding-left: 154px;
    padding-right: 10px;
    color: black;
    filter: grayscale(1);
}

#corporation .inside2 #contentbox table.inventory tr.baseobj .odestination,
#corporation .inside2 #contentbox table.inventory tr.stationobj .odestination{
    
    font-size: 12px;
    padding-left: 5px;
}

#corporation .inside2 #contentbox table.inventory tr.baseobj:hover td,
#corporation .inside2 #contentbox table.inventory tr.stationobj:hover td{

    background: none;
}

#mutebutton {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: right;
}

.splashbox-opened #mutebutton {
    z-index: 9999999991;
}

#mutebutton .muteswich{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    
    cursor: pointer;
    background-image: url(ico/unmute-2-32.png);
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    opacity:0.3;
    
}

#mutebutton .muteswich:hover {
    animation: blink 100ms linear 2 alternate;
    opacity:1;
}

#mutebutton .muteswich.muted{
    background-image: url(ico/mute-2-32.png);
}


#serverinfo {
    position: absolute;
    bottom: 14px;
    right: 30px;
    text-align: right;
}
#serverinfo .servertime {
    color: white;
    font-size: 10px;
    opacity: 0.1;
}
#serverinfo .version {
    color: white;
    font-size: 10px;
    opacity: 0.05;
}
#actiontext{
    position: absolute;
    bottom: 5px;
    right: 30px;
    text-align: right;

    color: white;
    font-size: 8px;
    opacity: 0.05;
}
@media (max-width: 520px) {
    #actiontext,#serverinfo {
        display: none;
    }
}

/*#registerscreen { position: absolute; height: 90%; width: 70%; min-width: 720px; max-width: 720px; min-height: 630px; background: rgba(0,0,0,.8);transition: transform 0.5s }  */

#registerscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}



@keyframes switching{
    0% {
        transform: rotateY(0deg) skewX(0deg) scale(1) scaleZ(1) translateZ(0px);
        opacity: 1
    }
    1% {
        transform: rotateY(-1deg) skewX(2deg) scale(1) scaleZ(1.2) translateZ(80px);
        opacity: 0;
    }
    80% {
        transform: rotateY(1deg) skewX(-1deg) scale(1) scaleZ(1.2) translateZ(10px);
        opacity: 0.9;
    }
    90% {
        transform: rotateY(-1deg) skewX(0.5deg) scale(1.0) scaleZ(1.2) translateZ(70px);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg) skewX(0deg) scale(1) scaleZ(1) translateZ(0px);
        opacity: 1
    }
}

#telo .designby {
    position: absolute;
    right: 20px;
    bottom: 14px;
    width: 200px;
    height: 50px;
    background-image: url(graphics_by.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    z-index: 1000;
}

#registerscreen.switching {
    animation: switching 200ms linear;

}

#registerscreen.inputs {
    max-width: 500px;
    width: 95%;
    height: 765px;
    left: 50%;
    top: 50%;
    background: rgb(6 8 30 / 99%);
    clip-path: var(--clip_standardbox);
    z-index: 10000;
    transform: translateX(-50%) translateY(-50%);
    bottom: unset;
    right: unset;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen.inputs  {
        height: 595px;
        
        
    }   
}

#registerscreen.spamtest {
    max-width: 590px;
    width: 95%;
    height: 600px;
    left: 50%;
    top: 50%;
    background: rgb(6 8 30 / 99%);
    clip-path: var(--clip_standardbox);
    transform: translateX(-50%) translateY(-50%);
    bottom: unset;
    right: unset;
}


    

#registerscreen .title.racesel{
    top: 50px;
    opacity: 0.5;
}


#registerscreen .inside {
    position: absolute;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#registerscreen .inside .title{
    position: absolute;
    top: 0px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 42px;
    color: white;
    padding: 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    z-index: 1000000;
    left: 0px;
    right: 0px;
    width: initial;
    color: rgba(255, 255, 255, 0.9);
    animation: font_color_glitch 1300ms linear !important;
    background-color: transparent;
    white-space: nowrap;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .inside .title{
        line-height: 20px;
        font-size: 20px;
        height: auto;
        top: 0px;
        
    }   
}

#registerscreen .inside .cdescr,
#registerscreen .inside .subtitle{
    position: absolute;
    top: 65px;

    text-align: center;
    font-size: 31px;
    color: #ffbc00;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    left: 20px;
    right: 20px;

    animation: font_color_glitch 1300ms linear !important;
}
#registerscreen .inside .cdescr {
    font-size: 24px;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .inside .cdescr,
    #registerscreen .inside .subtitle{
        line-height: 23px;
        font-size: 15px;
        height: auto;
        top: 40px;
        
    }   
}


#registerscreen .races{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}




#registerscreen .races .race{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#registerscreen .races .race .background{
    display: block;
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    animation: crt 20000ms linear infinite;
}


#registerscreen .preloader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1px;
    height: 1px;
    background-image: url(humanity_bckg.png),url(inquisition_bckg.png);
}

#registerscreen .races .race.humanity:not(.colonists):not(.medical):not(.military) .background{
    background-image: url(humanity_bckg.png);
    box-shadow: inset 0 0 40px rgb(0 133 204 / 20%), inset 0 0 160px rgb(0 122 204 / 44%);
}

#registerscreen .races .race.humanity.colonists .background{
    background-image: url(humanity_bckg.png);
}

#registerscreen .races .race.humanity.medical .background{
    background-image: url(humanity_bckg.png);
}

#registerscreen .races .race.humanity.military .background{
    background-image: url(humanity_bckg.png);
}

#registerscreen .races .race.inquisition:not(.crusaders):not(.pilgrims):not(.worshipers) .background{
    background-image: url(inquisition_bckg.png);
    box-shadow: inset 0 0 40px rgb(204 92 0 / 20%), inset 0 0 160px rgb(204 95 0 / 44%);

}

#registerscreen .races .race.inquisition.crusaders .background{
    background-image: url(inquisition_bckg.png);
    
}

#registerscreen .races .race.inquisition.pilgrims .background{
    background-image: url(inquisition_bckg.png);
}

#registerscreen .races .race.inquisition.worshipers .background{
    background-image: url(inquisition_bckg.png);
}

#registerscreen .racesel{
    font-family: var(--fontFaimly_header);
    font-size: 25px;
}

#registerscreen .races .race .race_name{
    position: absolute;
    top: 22%;
    height: 90px;
    background: linear-gradient(to right,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0.0) 100%);
    line-height: 90px;

    text-align: center;
    font-size: 60px;
    color: white;
    padding: 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    left: 155px;
    right: 155px;
    width: initial;
    color: rgba(255,255,255,0.9);
    animation: font_color_glitch 1300ms linear !important;
}


@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .race_name{
        position: absolute;
        top: 94px;
        height: 35px;
        line-height: 35px;
        
        font-size: 23px;
        
       
        left: 0px;
        right: 0px;
        
        animation: none;    
    }
}

#registerscreen .races .race .race_descr{
    position: absolute;
    top: 33%;
    text-align: center;
    font-size: 18px;
    color: white;
    left: 20px;
    right: 20px;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
    filter: drop-shadow(0px 0px 35px black);

}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .race_descr  {
        position: absolute;
        top: 153px;
        text-align: center;
        font-size: 18px;
        color: white;
        left: 10px;
        right: 10px;
        text-shadow: var(--shadow_textfull);
        font-family: var(--fontFaimly_header);
        filter: drop-shadow(0px 0px 12px black);
        
        
    }   
}

#registerscreen .races .race .race_descr p{
    max-width: 450px;
    margin: 0px auto;

}

#registerscreen .races .race .race_descr ul{
    max-width: 400px;
    margin: 20px auto 0px auto;
    padding-left: 60px;
}

#registerscreen .races .race .race_descr ul li{
    text-align: left;
    margin: 0px;
    padding: 4px 0px;
    color: #ffbc00;
    
}

#registerscreen .races .race.humanity .race_descr ul li{
    text-align: left;
    margin: 0px;
    padding: 4px 0px;
    color: #add5ff;
    
}

#registerscreen .races .race .race_descr.hidden{
    display: none;
}

#registerscreen .races .race .ability_name {
    position: absolute;
    top: calc(22% + 80px);
    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: 60px;

    text-align: center;
    font-size: 40px;
    color: white;
    padding: 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    z-index: 1000000;
    width: 600px;
    left: calc(50% - 300px);
    color: rgba(255,255,255,0.9);

}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .ability_name{
        position: absolute;
        top: 135px;
        
        line-height: 30px;
        
        font-size: 20px;
        
        
        left: 0px;
        right: 0px;
        width: unset;
       
        
    }
}

#registerscreen .races .race .ability_descr{
    position: absolute;
    top: calc(22% + 180px);

    text-align: center;
    font-size: 16px;
    color: white;


    left: 20px;
    right: 20px;


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


@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .ability_descr{
        position: absolute;
        top: 212px;
        text-align: center;
        font-size: 14px;
        color: white;
        left: 20px;
        right: 20px;
        text-shadow: var(--shadow_textfull);
        transform: translateY(-50%);
    }
}

#registerscreen .races .race .ability_descr p {
    max-width: 450px;
    margin: 0px auto;
}


#registerscreen .races .race .abilities{
    position: absolute;
    bottom: 220px;
    line-height: 21px;

    text-align: center;
    font-size: 14px;
    color: white;
    padding: 0px;
    z-index: 1000000;
    top: initial;
    right: 70px;
    left: 70px;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .abilities{
        bottom: 155px;
        right: 5px;
        left: 5px;
    }
}



#registerscreen .races .race .abilities .ability{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 342px;
    text-align: center;
    font-size: 14px;
    color: black;
    padding: 0px;
    text-transform: none;
    margin: 0px 15px;
    color: rgba(255, 255, 255, .8);
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    overflow: hidden;
    /* clip-path: var(--clip_standardbox); */
    text-shadow: var(--shadow_textfull);
    border-radius: 10px;
}


@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .races .race .abilities .ability{
        max-width: 30%;
        margin: 0px 1.5%;
    }
}

#registerscreen .races .race .abilities .ability.offline{
    background-image: linear-gradient(45deg, rgb(100,100,100) 25%, transparent 25%, transparent 75%, rgb(100,100,100) 75%, rgb(100,100,100)), linear-gradient(45deg, rgb(100,100,100) 25%, transparent 25%, transparent 75%, rgb(100,100,100) 75%, rgb(100,100,100));
    background-size: 2px 4px;
    background-position: 0 0, 30px 30px;
    cursor: not-allowed;
}

#registerscreen .races .race .abilities .ability.offline span{
    filter: grayscale(1) brightness(0.3);

}


#registerscreen .races .race .abilities .ability:hover:not(.selected) span {

    animation: crt 5000ms linear infinite;
}



#registerscreen .races .race .abilities .ability:hover:not(.selected) {
    filter: brightness(1);
}



#registerscreen .races .race .abilities .ability.selected:not(.offline):after{

    box-shadow: inset 0 0 40px rgb(0 102 204 / 30%), inset 0 0 160px rgb(0 102 204 / 20%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

}

#registerscreen .races .race .abilities .ability.selected:not(.offline) span{
    animation: crt 2500ms linear infinite;
    filter: brightness(1);
}

#registerscreen .races .race .abilities .ability.selected:before,
#registerscreen .races .race .abilities .ability.selected:after {
    opacity: 1;
}

#registerscreen .races .race .abilities .ability span{
    content:'';
    background-size: cover;
    background-position: center;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    filter: brightness(0.95);
}





#registerscreen .races .race .abilities .ability.h1 span{
    background-image: url(registration/conviction_ability_h1.png);
}

#registerscreen .races .race .abilities .ability.h2 span{
    background-image: url(registration/conviction_ability_h2.png);
}

#registerscreen .races .race .abilities .ability.h3 span{
    background-image: url(registration/conviction_ability_h3.png);
}

#registerscreen .races .race .abilities .ability.c1 span{
    background-image: url(registration/conviction_ability_c1.png);
}

#registerscreen .races .race .abilities .ability.c2 span{
    background-image: url(registration/conviction_ability_c2.png);
}

#registerscreen .races .race .abilities .ability.c3 span{
    background-image: url(registration/conviction_ability_c3.png);
}

#registerscreen #races_prev,
#registerscreen #races_next {
    position: absolute;
    top: 229px;
    transform: translateX(-50%);
    z-index: 1000000;
}

#registerscreen #races_prev {
    right: calc(50% + 290px);
}

#registerscreen #races_next {
    left: calc(50% + 290px);
}

@media (max-width: 700px), (max-height: 600px) { 
    
    #registerscreen #races_prev,
    #registerscreen #races_next {
        position: absolute;
        top: 85px;
    }
    #registerscreen #races_prev {
        right: calc(100% - 55px);
    }

    #registerscreen #races_next {
        left: calc(100% - 55px);
    }
}


#registerscreen #races_next .arrow,
#registerscreen #races_prev .arrow {
    cursor: pointer;
    position: absolute;
    top: 0px;
    height: 50px;
    width: 50px;
    z-index: 999;
    cursor: pointer;

}

#registerscreen #races_next .arrow.button.gold:before,
#registerscreen #races_prev .arrow.button.gold:before {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #407af666;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(1);
}



#registerscreen #races_next .arrow.button.gold:hover:before,
#registerscreen #races_prev .arrow.button.gold:hover:before {
    box-shadow: 0px 0px 10px #407af6 inset !important;
}


#registerscreen #races_next .arrow.button:not(.gold):before,
#registerscreen #races_prev .arrow.button:not(.gold):before {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #f6924057;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(1);
}



#registerscreen #races_next .arrow.button:not(.gold):hover:before,
#registerscreen #races_prev .arrow.button:not(.gold):hover:before {
    box-shadow: 0px 0px 10px #f67b40 inset !important;
}

#registerscreen #races_next .arrow {
   
    left: 0px;
}

#registerscreen #races_next .arrow:before {
    background-image: url('./ico/arrow_right.png');
}

#registerscreen #races_prev .arrow {
    
    right: 0px;
}

#registerscreen #races_prev .arrow:before {
    background-image: url('./ico/arrow_left.png');
}

#registerscreen .inside .recruiter  {
    position: absolute;
    text-align: center;
    left: 10px;
    right: 10px;
    top: 130px;
    color: rgba(150,150,150,1);
    line-height: 17px;
    text-transform: uppercase;
    font-size: 12px;
    height: 40px;
    overflow: hidden;
    display: none;
}


#registerscreen .inside .integrators  {
    position: absolute;
    text-align: center;
    height: 40px;
    left: 10px;
    right: 10px;
    bottom: 35px;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .inside .integrators  {
        display: none;
        
        
    }   
}


#registerscreen .inside .integrators .before{
    content: '- OR REGISTER WITH -';
    background-size: cover;
    background-position: center;
    display: block;
    position: absolute;
    top: -25px;
    left: 0px;
    right: 0px;
    color: white;

}

#registerscreen .inside .integrators .discord  {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(./discord_logo_gray.png) center no-repeat;
    background-size: 40px;
}


#registerscreen .inside .integrators .discord .discord_oauth  {
    position: absolute;
    display: block;

    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: url(./Discord-Logo-White.png) center no-repeat;
    background-size: 40px;
}
#registerscreen .inside .integrators .discord.disabled .discord_oauth  {
    display: none;
}


#registerscreen .inside .values_box{
    position: absolute;
    top: 170px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .inside .values_box  {
        top: 85px;
        
        
    }   
}

#registerscreen .inside .values_box .value{
    position: relative;
    z-index: 10000;
    padding: 10px 0px;
}




#registerscreen .inside .values_box .backg_corp,
#registerscreen .inside .values_box .backg_player,
#registerscreen .inside .values_box .backg_login{
    position: relative;


}


#registerscreen .inside .values_box .backg_agree{
    position: relative;
    padding-top: 15px;

}





#registerscreen .inside .values_box .label {
    color: rgba(255,255,255,1);
    text-align: center;
    font-size: 19px;
    padding: 0px 0px 0px 0px;
    text-transform: uppercase;
    font-family: var(--fontFaimly_header);
    text-shadow: -2px 0px 0 rgba(255,131,64,.3), 2px 0px 0 rgba(126, 250, 255, .2);
}


#registerscreen .inside .values_box .textinput input {
    text-decoration: none;
    text-transform: none;
    font-size: 18px;

    color: white;
    background-color: rgba(0,0,0,.8);
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    border: none;
    max-width: 350px;
    width: 90%;
    min-width: 35px;
    height: 38px;

    line-height: 27px;
    text-align: center;
    margin: 0px auto;
    display: block;
    
}

#registerscreen .inside .values_box .textinput input.highlighted {
    background-color: rgba(200, 0, 0, 0.5);
    border: 1px solid #c78686;
}



#registerscreen .inside .values_box .textinput input::placeholder {
    color: rgba(255,255,255,.5);
    font-size: 13px;
}



#registerscreen .inside .values_box .agreeinput,
#registerscreen .inside .values_box .agreemail {
    position: relative;
    width: auto;
    margin: 0px 0px 0px 34px;
    padding: 0px 20px 0px 39px;
    text-align: left;
    box-sizing: border-box;
}
    

#registerscreen .inside .values_box .agreeinput input,
#registerscreen .inside .values_box .agreemail input {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    left: 0px;
    top: 4px;
}



#registerscreen .inside .values_box .agreeinput .small_info,
#registerscreen .inside .values_box .agreeinput .addoninfo,
#registerscreen .inside .values_box .agreemail .small_info,
#registerscreen .inside .values_box .agreemail .addoninfo {
    color: rgba(255,255,255,0.8);
    text-shadow: none;
    font-size: 13px;
    display: block;
    text-transform: none;
}

#registerscreen a {
    color: rgba(255,255,255,0.8);

}

#registerscreen .inside .values_box .agreemail .small_info,
#registerscreen .inside .values_box .agreemail .addoninfo {
    text-transform: uppercase;
}

#registerscreen .inside .values_box .agreeinput .small_info.gray,
#registerscreen .inside .values_box .agreemail .small_info.gray {
    color: rgba(150,150,150,1);
}




#registerscreen .inside .spam_cont .subtitle.antispam{

    text-align: center;
    font-size: 27px;
    color: white;
    padding: 85px 0px 0px 0px;
    text-transform: none;
    font-family: var(--fontFaimly_header);
    animation:highlited 1000ms linear infinite;
}

#registerscreen .inside .spam_cont{
    position: absolute;
    text-align: center;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}


#registerscreen .inside .spam_cont .spam_ico{
    position: absolute;
    display: block;
    width: 160px;
    height: 160px;
    cursor: pointer;
    opacity: 1;
    overflow: hidden;

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



#registerscreen .inside .spam_cont .spam_ico.robot{
    top: 250px;
    left: 30px;
}

#registerscreen .inside .spam_cont .spam_ico.flower{
    top: 250px;
    right: 30px;

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

#registerscreen .inside .spam_cont .spam_ico.fire{
    top: 250px;
    left: calc(50% - 80px);
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .inside .spam_cont .spam_ico{
        width: 30%;
        margin: 0px 1.5%;
        
    }   
    
    #registerscreen .inside .spam_cont .spam_ico.robot{
        right: unset;
        left: 0%;
    }

    #registerscreen .inside .spam_cont .spam_ico.flower{
        right: unset;
        left: 33%;

       
    }

    #registerscreen .inside .spam_cont .spam_ico.fire{
        right: unset;
        left: 66%;
    }
}

#registerscreen .inside .spam_cont .spam_ico.robot:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ico/spam_1.png), radial-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
    animation: crt 5000ms linear infinite;
    background-color: rgb(92, 83, 100);
    background-size: contain;
    filter: grayscale(100%) brightness(130%) contrast(110%);
}
#registerscreen .inside .spam_cont .spam_ico.flower:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ico/spam_2.png), radial-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
    animation: crt 4900ms linear infinite;
    background-color: rgb(92, 83, 100);
    filter: grayscale(100%) brightness(130%) contrast(110%);
    background-size: contain;
}
#registerscreen .inside .spam_cont .spam_ico.fire:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ico/spam_3.png), radial-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
    animation: crt 5100ms linear infinite;
    background-color: rgb(92, 83, 100);
    filter: grayscale(100%) brightness(130%) contrast(110%);
    background-size: contain;
}






#registerscreen .inside .spam_cont .spam_ico:hover:before{
    animation:highlited 1000ms linear infinite;
    filter: grayscale(0%);
}



#msgscreen {
    display: none;
    position: absolute;
    top: 50%;
    font-size: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    roght: unset;
    bottom: unset;
    max-width: 400px;
    width: 90%;
    padding: 20px 20px 20px 20px;
    background-color: rgba(0,0,0,1);
    box-sizing: border-box;

    text-align: center;
    margin: 0px auto 100px;
    z-index: 1000000;
    font-family: var(--fontFaimly_header);
    font-size: 17px;
    text-transform: uppercase;
    color: #ffbc00;
    z-index: 100000000000;
}

#msgscreen: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;
}

#msgscreen: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;
}




#registerscreen div.descrtooltip{
    display:inline;
    outline:none;
    position: relative;
}
#registerscreen div.descrtooltip strong{
    line-height:16px;
}
#registerscreen div.descrtooltip:hover{
    text-decoration:none;
}
#registerscreen div.descrtooltip span.upper{
     z-index: 10000;
    visibility: hidden;
    padding: 10px 0px;
    opacity: 0;
    transition: visibility 0s linear 0.3s,opacity 0.3s linear,margin 0.3s linear;
    position: absolute;
    background-color: rgb(6 8 30 / 99%);
    width: 200px;
    min-height: 60px;
    left: calc(50% - 100px);
    bottom: calc(100% + 95px);
}

#registerscreen div.descrtooltip span.upper:before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgb(6 8 30 / 99%);
    border-bottom: 10px solid transparent;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
}

#registerscreen div.descrtooltip:hover span.upper{
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    animation:blink 100ms linear 2 alternate;
}
#registerscreen div.descrtooltip span.upper a{
    color:rgb(0,255,255);
    text-decoration:underline;
    max-width: 250px;
}
#registerscreen div.descrtooltip span.upper span.ab_title   {
    color: #ffbc00;
    display: block;
    text-transform: uppercase;
    font-size: 17px;
    font-family: var(--fontFaimly_header);
    padding: 5px 0px 0px;
}
#registerscreen div.descrtooltip span.upper span.ab_numbers {
    color: rgba(200,200,200,1);
    display: block;
    /* text-transform: uppercase; */
    font-size: 13px;
    line-height: 17px;
    font-family: var(--fontFaimly_header);
    padding: 10px 10px 7px;
}
#registerscreen div.descrtooltip span.upper span.ab_desc {
    color: rgba(255,255,255,0.8);
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 5px;
}

#registerscreen .inside #description{
    position: absolute;
    bottom: 0px;
    height: 27px;
    line-height: 21px;

    text-align: center;
    font-size: 14px;
    color: white;
    padding: 0px;
    text-transform: none;
    top: initial;
    right: initial;
    width: 600px;
    left: calc(50% - 300px);
    box-sizing: border-box;
}

#registerscreen .submit{
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
   
    z-index: 100000000000;
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .submit  {
        bottom: 36px;
        
        
    }   
}

#registerscreen.inputs .submit{
    position: absolute;
    bottom: 115px;
    left: 0px;
    left: calc(50% - 300px);
    width: 600px;
    transform: none;
    text-align: center;
    z-index: 100000000000;
}


@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen.inputs .submit  {
        bottom: 35px;
        
        
    }   
}

#registerscreen .submit .inf_race{
    display: block;
    color: white;
    text-align: center;
    animation: highlited 1000ms linear infinite;
    font-size: 15px;
    line-height: 30px;
    text-transform: uppercase;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
}


#registerscreen .main-logo{
    position: absolute;
    top: 40px;
    left: calc(50% - 200px);
    width: 400px;
    height: 120px;
    z-index: 100000000000;
    background:url(osg_logo_150.png) center no-repeat;
    background-size: 300px;
    filter: drop-shadow(0px 0px 5px var(--logo_shadow_color1)) drop-shadow(0px 0px 15px var(--logo_shadow_color2));
}

@media (max-width: 700px), (max-height: 600px) { 
    #registerscreen .main-logo{
        position: absolute;
        top: 36px;
        left: 0px;
        width: 100%;
        height: 51px;
        z-index: 100000000000;
        background: url(osg_logo_150.png) center no-repeat;
        background-size: contain;    
    }
}

#registerscreen .submit .submit_race{
    font-size: 17px;
    animation: highlited 1000ms linear infinite;
    height: 41px;
    line-height: 41px;
    padding: 0px 25px;  
}

#registerscreen .submit .submit_race:not(.gold):before {
    background-color: #3956798a;
}

.assaultscreen{
    display:block;
    position:absolute;
    top:43px;
    left:0px;
    right:0px;
    bottom:0px;
    font-size:12px;
    color:white;
    text-align:center;
    padding:5px;
    background-color:rgba(33,39,43,0.7);
    z-index:10000;
    text-align:left;
}
.assaultscreen .inside{
    position:relative;
    width:100%;
    height:100%;
    background:rgba(33,39,43,0.7);
}
.assaultscreen .inside .title{
    position:absolute;
    height:37px;
    width:100%;
    top:0px;
    left:0px;
    color:white;
    font-size:21px;
    padding-left:10px;
    box-sizing:border-box;
    background-color:rgba(33,39,43,0.8);
    line-height:32px;
    text-transform:uppercase;
    letter-spacing:-1px;
    text-shadow:0px 0px 10px silver;
}
.assaultscreen .close{
    position:absolute;
    width:16px;
    height:16px;
    cursor:pointer;
    top:16px;
    right:16px;
    opacity:0.5;
    z-index:10000;
}
.assaulttable{
    width:100%;
    height:100%;
}
.assaulttable th{
    height:30px;
}
.assaultcrewslots{
}
.assaultcrewslot{
    height:80px;
    margin:5px 0px;
    background:rgba(33,39,43,1) url(stations_plus.png) 5px no-repeat;
    cursor:pointer;
}
.assaultitemslot{
    height:30px;
    margin:5px 0px;
    background:rgba(33,39,43,1);
    cursor:pointer;
}
.assaulttransporter{
    height:130px;
    margin:5px 0px;
    background:rgba(33,39,43,.7);
    cursor:pointer;
    position:relative;
    padding-left:140px;
}
.assaulttransporter:hover{
    background:rgba(33,39,43,1);
}
.assaulttransporter img{
    position:absolute;
    top:0px;
    left:5px;
    max-width:130px;
    max-height:130px;
}
.assaulttransporter .name{
    text-shadow:0px 0px 10px rgb(103,232,237);
    color:rgb(103,232,237);
    font-size:16px;
    font-weight:normal;
    padding:8px 8px;
    text-transform:uppercase;
}
.assaulttransporter table{
    font-size:12px;
}
.assaulttransporter table th{
    text-align:right;
    color:white;
    font-weight:normal;
}
.assaulttransporter table td{
    color:rgb(103,232,237);
    padding-left:10px;
}
.assaulttransporter button{
    position:absolute;
    bottom:5px;
    right:5px;
}
.assaulttransporter .crewonboard{
    position:absolute;
    top:5px;
    left:390px;
    width:240px;
}
.assaulttransporter .crewonboard img{
    position:relative;
    width:30px;
}
.assaulttransporter .cargoonboard{
    position:absolute;
    top:55px;
    left:390px;
    width:240px;
}
.assaulttransporter .cargoonboard img{
    position:relative;
    width:30px;
}
.b2bscreen{
    display:block;
    position:absolute;
    top:20%;
    left:100px;
    right:400px;
    height:400px;
    font-size:12px;
    color:white;
    text-align:center;
    padding:5px;
    background-color:rgba(33,39,43,0.7);
    z-index:10000;
    text-align:left;
}
.b2bscreen .inside{
    position:relative;
    width:100%;
    height:100%;
    background:rgba(33,39,43,0.7);
}
.b2bscreen .inside .title{
    position:absolute;
    height:37px;
    width:100%;
    top:0px;
    left:0px;
    color:white;
    font-size:21px;
    padding-left:10px;
    box-sizing:border-box;
    background-color:rgba(33,39,43,0.8);
    line-height:32px;
    text-transform:uppercase;
    letter-spacing:-1px;
    text-shadow:0px 0px 10px silver;
}
.b2bscreen .close{
    position:absolute;
    width:16px;
    height:16px;
    cursor:pointer;
    top:16px;
    right:16px;
    opacity:0.5;
    z-index:10000;
}
.b2bscreen .inside .box{
    top:90px;
    width:32%;
    height:230px;
    cursor:pointer;
}
.b2bscreen .inside .box.attack{
    position:absolute;
    left:1%;
    background:url(astronauts1.png) center no-repeat;
}
.b2bscreen .inside .box.change{
    position:absolute;
    left:34%;
    background:url(astronauts1.png) center no-repeat;
}
.b2bscreen .inside .box.docking{
    position:absolute;
    right:1%;
    background:url(astronauts1.png) center no-repeat;
}
.inside .box .title{
    text-align:center;
    font-size:26px;
    position:absolute;
    width:100%;
    top:145px;
    color:white;
    background-color:rgba(33,39,43,0.4);
    line-height:32px;
    text-transform:uppercase;
    letter-spacing:-1px;
    text-shadow:0px 0px 10px silver;
    height:70px;
}
a{
    text-decoration:underline;
    color: #b9dbff;
}
a:visited {
    
}
a:hover{
    animation:blink 100ms linear 2 alternate;
}

a.url-out {
    background-image: url(ico/ico_externallink-32.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 13px;
    padding-right: 15px;
}

a img{
    border:0;
}
button,
.button{
    position: relative;
    text-align: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #b9dbff;
    padding: 0px 14px;
    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;
    text-shadow: none;
}

.button {
    display: inline-block;
}

button .miniature,
.button .miniature{
    z-index: 1;
}

button.hidden,
.button.hidden{
    visibility: hidden;
}

button:before,
.button:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;

    
    z-index: -1;
}

button:after,
.button: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;
}



button.highlited {
    animation:highlited 1000ms linear infinite;
}






button.grayed,
.button.grayed,
button.gray,
.button.gray,
button.unactive,
.button.unactive,
button.quest-gray,
.button.quest-gray{
    color: var(--border-button-color-unactive);
    
}

button.red,
.button.red{
    color: #e37171f7;
}

button.white,
.button.white{
    color: white;
}

button.qcompleted,
.button.qcompleted,
button.gold,
.button.gold{
    color: #ffbc00;
}

button.grayed:before,
.button.grayed:before,
button.gray:before,
.button.gray:before,
button.unactive:before,
.button.unactive:before,
button.quest-gray:before,
.button.quest-gray:before


{
    background-color: rgb(26 26 26 / 80%);
}

button.red:before,
.button.red:before{
    background-color:rgb(164 2 4 / 33%);
}

button.white:before,
.button.white:before{
    background-color:rgb(255 255 255 / 20%);
}

button.gold:before,
.button.gold:before,
button.qcompleted:before,
.button.qcompleted:before{
    background-color:#bf850966;
}

button.gold:after,
.button.gold:after,
button.qcompleted:after,
.button.qcompleted:after{
    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%);

}

button.white:after,
.button.white:after{
    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%);

}

button.red:after,
.button.red:after{
    background-image: linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%), 
        linear-gradient(0deg, #cf2525 0%, #cf2525 100%);

}

button.grayed:after,
.button.grayed:after,
button.gray:after,
.button.gray:after,
button.unactive:after,
.button.unactive:after,
button.quest-gray:after,
.button.quest-gray: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%);
}



button.unactive:hover,
.button.unactive:hover,
button.unactive:quest-gray,
.button.unactive:quest-gray

{
    color: var(--border-button-color-unactive);
    animation: initial;
}

button.hidden{
    display: none;
}


button.actionButton{
    background-color:inherit;
    box-shadow:inherit;
    height:40px;
    width:40px;
    background-position:center;
    background-repeat:no-repeat;
}
button.actionButton:after{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    transition:filter 0.2s linear;
}
button.actionButton:hover:after{
    background:radial-gradient(rgba(0,255,255,0.3),rgba(0,255,255,0.2),rgba(0,0,0,0.0));
    content:"";
    border:1px solid rgba(0,255,255,1);
    filter:blur(1px);
}
button:not(.gray):not(.unactive):not(.grayed):not(.quest-gray):hover,
.button:not(.gray):not(.unactive):not(.grayed):not(.quest-gray):hover{
    animation: none;
    color: white;
}


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




button.gold:hover:before,
.button.gold:hover:before,
button.qcompleted:hover:before,
.button.qcompleted:hover:before{
    box-shadow: 0px 0px 15px #ffbc00 inset !important;
}

button.gold:hover,
.button.gold:hover,
button.qcompleted:hover,
.button.qcompleted:hover{
    color: #f1cf6d !important;
}

button.red:hover:before,
.button.red:hover:before{
    box-shadow: 0px 0px 15px #cf2525 inset !important;
    
}

button.white:hover:before,
.button.white:hover:before{
    box-shadow: 0px 0px 15px #ffffff inset !important;
    
}

button.red:hover,
.button.red:hover{
    color: #f77a7a !important;
}


button.iconbutton{
    height:34px;
    width:34px;
    position:relative;
}
button.iconbutton img{
    position:absolute !important;
    top:5px !important;
    left:5px !important;
}





button.inline,
.button.inline{
    position: relative;
    display: inline-block;
    height: 30px;
    
    text-align: center;
    border-spacing: 0px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 30px;
    text-transform: uppercase;
    cursor: pointer;

    margin: 0px auto;
    clip-path: none;

    background-color: transparent;
}
button.inline:before,
.button.inline:before {
    content: "";
    display:block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
}

button.inline:after,
.button.inline: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;
}

button.inline.gray,
.button.inline.gray{
    background-color: var(--box-background);
    color: gray;
    cursor: default;
}

button.inline::first-letter {
    color: inherit;
}
button.inline:hover:before,
.button.inline:hover:before{
    
}

button.inline:hover,
.button.inline:hover{
    color: white;
    /*animation:blink 100ms linear 2 alternate;*/
}

button.inline.gray{
    cursor: default;
    border: none;
    background: none;
    color: gray;
}
button.inline.gray:hover{
    background: none;
    color: gray;
    animation: initial;
    cursor: default;
}

button.inline.gray:hover > .subtext{
    display: block;
}

.both{
    clear:both;
    font-size:1px;
    padding:0px;
    margin:0px;
}

.telo{
    position:absolute;
    width:100%;
    margin:0px;
    padding:0px;
    top:0px;
    height:100%;
    background:black;
    overflow: hidden;
}


.telo.maphud {
    background-image: linear-gradient(rgba(2,2,14,0.84) 0%, rgba(2,2,31,0.84) 100%),url(./effects/bckg_glitch.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.telo.starmaphud {



}

.telo.tmodule-sectormap {
    background-image: radial-gradient(rgba(2,2,21,0) 0%, rgba(2,2,21,0.8) 100%),linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 100%),url(./effects/bckg_glitch.gif);
    background-position:center left;
    background-repeat:no-repeat;
    background-size: cover;

}

.resources{
    text-align:left;
}

.basebox{
    color: white;
    position: relative;
    cursor: default;

    background: url(ico/viewcontrols_ships_32.png) 0px 13px no-repeat;
    font-size: 10px;
    background-size: 16px;
    padding: 3px 0px 3px 23px;
    
}

.basebox .stats {
    text-shadow:var(--shadow_textfull);
    width: 200px;
}

.basebox.hidden {
    display: none;
}
.basebox .btitle{
    color: white;
    position: relative;
    cursor: default;
    font-size: 22px;
    line-height: 24px;
    padding: 7px 0px 0px 0px;
    height: auto;
    text-shadow: var(--shadow_textfull);
    font-family: var(--fontFaimly_header);
    white-space: nowrap;
}

.basebox .btitle a{
    color: black;
    background-color: white;
    padding: 0px 6px;
    text-shadow: none;
}

.basebox .stats table {
    font-size: 12px;
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;

}
.basebox .stats th {
    text-align: left;

    color: white;
    width: 50px;
    padding: 0px 10px 0px 0px;
}
.basebox .stats td {
    text-align: left;

}

.basebox .stats .energyhandler{
    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_fuel_barbckg_color);
    margin-top: 21px;
    font-size: 12px;
    left: 0px;
}
.basebox .stats .energyhandler .bar{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--hud_fuel_bar_color);
    bottom: 0px;
}
.basebox .stats .energyhandler .counter{
    position: absolute;

    top: -15px;
    line-height: 10px;
    right: 0px;
    box-sizing: border-box;
    z-index: 1;

    text-align: right;
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;
    color: var(--hud_energy_text_color);
}

.basebox .stats .energyhandler .energytitle  {
    display: block;
    content: 'ENERGY';
    position: absolute;

    top: -15px;
    line-height: 10px;
    left: 0px;
    box-sizing: border-box;
    z-index: 1;

    text-align: left;
    color: var(--hud_energy_text_color);
    text-shadow: var(--shadow_textfull);
    white-space: nowrap;

}


.stationbox{
    color:white;
    position:relative;
    padding: 0px;
    cursor:default;
    width: 1px;
    padding-left: 23px;
    
    font-size: 10px;
    background-size: 16px;
    clear: both;
    text-shadow: var(--shadow_textfull);
    top: 10px;
    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>");
    background-position: left 0px top 8px;
    background-repeat: no-repeat;
    background-size: 16px;
}
.stationbox.ismain{
    background-image: url('ico/ico_main_station_32.png');
}

#telo.maphud .stationbox{
    visibility: hidden;
}

#telo.starmaphud .stationbox{
    visibility: hidden;
}




.stationbox.hidden {
    display: none;
}
.stationbox .name {
    font-size: 26px;
    font-family: var(--fontFaimly_header);
    line-height: 28px;
    white-space: nowrap;
}

.stationbox .name .logo {
    display: block;
    
}

.stationbox .name .logo .logoinv {
    max-height: 20px;
    max-width: 80px;
    position: relative;
    margin: 5px 0px 0px 0px;
}

.stationbox .destroyedinfo  {
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
    font-size: 10px;
    line-height: 10px;
    width: 210px;
}

.stationbox .destroyedinfo.clickable {
    cursor: pointer;

}

.stationbox .destroyedinfo.clickable:hover {
    animation: blink 100ms linear 2 alternate;
}

.stationbox .destroyedinfo span  {
    background-color: #FF5722;
    color: black;
    white-space: nowrap;
    font-size: 10px;
    padding: 2px 6px;
    display: inline-block;
    clear: both;
    animation: highlited 400ms linear infinite;
    text-shadow: none;
    font-family: var(--fontFaimly_button);
}

.stationbox .actions {
    text-align: center;
    width: 1px;
    height: 20px;
    position: relative;
    left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.stationbox .actions .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
{
    postion: 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;
}

@media (max-width: 1300px) {
    .right-column .wrank {
        display: none;
    }
}

.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);
}

@media (max-width: 980px) {
    .right-column .premium {
        display: none;
    }
}

.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;
    
    
}

@media (max-width: 980px) {
    #own-ships-parent:not(.shown) {
        display: none;
    }
}



#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;
}

@media (max-width: 1240px) {
    .right-column .buttons-right .sub-buttons .ctrl-title{
        /*display: none;*/
    }
}

@media (max-width: 520px) {
    .right-column .buttons-right .sub-buttons{
        right: 6px;
    }
}
.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{
    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{
    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 {
    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{
    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{
    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{
    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_item.rgs_artifact:before,
.graballitem.rgs_artifact: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;
}




.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);
    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;
}
.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: transparent url('ico/close-window-16.png') center no-repeat;
    /*animation: highlited 1000ms linear infinite; */
}


.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;
}


#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;
}





#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.owncrewwindow #cstation .filters button,
#cstationbox.crewwindow #cstation .filters button {    
    margin: 0px 3px !important;
}

#cstationbox.owncrewwindow #cstation .filters button:before,
#cstationbox.crewwindow #cstation .filters button:before {    
    background-color: transparent !important;
}

#cstationbox.owncrewwindow #cstation .filters button:hover:before,
#cstationbox.crewwindow #cstation .filters button:hover:before {    
    box-shadow: none !important;
}

#cstationbox.owncrewwindow #cstation .filters button:after,
#cstationbox.crewwindow #cstation .filters button:after {    
    background-image: none !important;
}

#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.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.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: 230px;
}

#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.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: 10px;
}


#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{

    height: 35px;
    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;
    disolay: 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 .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 .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 .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 .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 .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 .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;
    animation: text-shadowing-white-small 1000ms ease-out forwards;


}

#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 .deposit .deposit_input,
#cstationbox #cs-conf .withdraw .withdraw_input {
    color: white;
    padding: 5px 5px 10px;
    height: 38px;
    text-align: center;
}

#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 .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;
    animation: text-shadowing-white-small 500ms ease-out forwards;
    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;
    box-sizing: border-box;
    /*animation: text-shadowing-white-small 500ms ease-out forwards;*/
}

#cstationbox #cs-conf .csconf_scroller .setmaintip .titler {
    display: none;

}

#cstationbox #cs-conf .csconf_scroller .setmaintip .text {
    position: relative;
    color: rgb(180, 130, 0);
    padding: 0px 20px;
    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 .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);

    background-color: unset;
}

#cstationbox #cs-conf .csconf_scroller .destroyed .subtitle {
    position: absolute;
    height: unset;
    width: 100%;
    top: 55px;
    left: 0px;
    color: white;
    box-sizing: border-box;
    line-height: 20px;
    /* text-transform: uppercase; */
    text-shadow: none;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    text-align: center;


}

#cstationbox #cs-conf .csconf_scroller .destroyed .vault_withdraw {
    display: block;
    position: absolute;
    right: 0px;
    top: 130px;
    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: white;
    font-size: 13px;
    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-image: 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)));
    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: 260px;
    right: 260px;
}

#selectshipscene #shipname .shipname {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    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: 0px;
    right: 0px;
    color: silver;
  
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-transform: uppercase;
}

#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 10px;
    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(87 137 255 / 4%);
}

#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: #c3d5f1;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 10px;
    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: 12px;
    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: 60px;
    right: 60px;
    top: calc(50% - 31px);
    color: white;
    
}

#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: 190px;
    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;
    font-size: 18px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;
    cursor: pointer;
   
    border-bottom: 1px solid white;
    padding: 3px 0px 5px;
    color: #ffbc00;
}

#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;
   
    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;
    font-size: 13px;
}

#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: 190px;
    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;
    /*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: black;
    padding: 0px 8px;
    margin: 0px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-shadow: none;
    display: inline-block;
    z-index: 1;
    font-family: var(--fontFaimly_button);
    font-size: 12px;
    text-transform: uppercase;
    line-height: 16px;
}


#tutorialbox .qquest .qheader span.qhint .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;
}






#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;
}





#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;
}

#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 .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 .fee_exp {
    


}

#zone .content .parametters .fee_exp .value,
#zone .content .parametters .fee_exc .value{
    position: relative;
    padding: 5px 10px 20px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 18px;
    color: #FF9800;
    text-transform: uppercase;
    text-align: center;
}

#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: 8px 10px;
}


#zone .content .info {
    position: relative;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    color: silver;
    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 #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}


#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: 17px;
    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: 11px;
    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;
    filter: invert(100%);
    padding-left: 21px;
    color: black;
    line-height: 18px;
    font-family: var(--fontFaimly_button);
    background-size: 14px;
}

#zones .content .zone .members .total{
    background-image: url(ico/ico_member-16.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;
    width:235px;
    
    z-index: 10;
}

#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:245px;
    bottom:0px;
}

#zone .menu span {
    position: relative;
    display: 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 .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: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.begzones:before{
    box-shadow: 0px 0px 15px rgb(30 127 109) inset;
    background-color: rgb(14 49 59);

}

#zones .menu .header.begzones{
    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: #0e1b37c4;
   box-shadow: 0px 0px 15px #3b466f 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: -8px;
    right: 190px;
    text-shadow: var(--shadow_textfull);
    font-size: 22px;
    text-align: center;
    padding: 0px;
    margin: 0px;

    color: #ffbc00;
    line-height: 115px;
    width: 100px;
    height: 80px;
    z-index: 0;
    
}

#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;
    margin-bottom: 10px;
    text-transform: uppercase;

}

#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-color: #ffae00;


}
#questWindow .quests .qheader.active .qbckgr .qbckgrimg {
    filter: brightness(100%) grayscale(10%);
}


#questWindow .quests .qheader span.qname {
        text-align: left;
    display: block;
    font-size: 17px;
    letter-spacing: 1px;
    font-family: var(--fontFaimly_button);
    line-height: 19px;
    padding: 5px 0px;
}

#questWindow .quests .qheader.closed span.qname {
    font-size: 16px;

    letter-spacing: 0px;
    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: 10px;
    padding: 3px 0px 0px;
    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: 50px;
    color: white;
    box-sizing: border-box;
    font-size: 20px;
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
}

#questWindow .qbody .qquest .qheader .buttons {
    position: absolute;
    right: 10px;
    top: 60px;
}

#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;
    font-size: 45px;
    font-family: var(--fontFaimly_header);
    text-transform: uppercase;

    cursor: default;
    border-bottom: 1px solid white;
    padding: 10px 0px 8px 0px;
    margin: 0px 0px 13px;
}
#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: 5px 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  .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;
}
#questWindow .qbody .qquest  .qobjit {
   
   
    padding: 0px 0px 14px 0px;
    position: relative;
    line-height: 20px;
}

#questWindow .qbody .qquest  .qobjit:before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    left: -17px;
    top: 4px;
}
#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: block;
    box-sizing: border-box;
    margin: 8px 0px 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: block;
    box-sizing: border-box;
    margin: 8px auto 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;
    border-top: 1px solid #c0c0c033;
    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 {
    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 {
 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 {
    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
{
    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
{
    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 {
    position: relative;
    margin-top: 0px;
}



#questWindow .quests .quests_active_head,
#questWindow .quests .quests_available_head,
#questWindow .quests .quests_closed_head{
    position: relative;
    margin-top: 1px;
    text-align: center;
    color: rgb(255 255 255 / 68%);
    line-height: 35px;
    text-transform: uppercase;
    border-top: 1px solid #c0c0c047;
}

#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;
}
#questWindow .qbody .qquest .qheader .status .state {
    cursor: default;
    float: left;
    background-color: black;
    margin: 0px 0px 8px;
    display: inline-block;
    clip-path: var(--clip_standardstatus);
    padding: 4px 10px;
    line-height: 12px;
    font-size: 16px;
    color: #ffbc00;
    animation: highlited 1000ms linear infinite;
}
#questWindow .qbody .qquest .qheader .status .replayed {
    cursor: default;
    float: right;
    background-color: black;
    margin: 0px 0px 8px;
    display: inline-block;
    clip-path: var(--clip_standardstatus);
    padding: 4px 10px;
    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);
    padding: 5px 0 0;
}
#questWindow .qbody .qquest .qheader .status .ttlb {
    font-size: 24px;
    display: inline-block;
    font-family: var(--fontFaimly_header);
}
#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: url(osg_logo_150.png);
    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;
}
/*
@media (max-width: 980px) {
    #cards-quests .card {
        width: 10px;
    }
    
    #cards-quests .card:not(.zoomed) .inner .timer,
    #cards-quests .card:not(.zoomed) .inner .bar-box,
    #cards-quests .card:not(.zoomed) .inner .qty,
    #cards-quests .card:not(.zoomed) .inner .uncast,
    #cards-quests .card:not(.zoomed) .inner .qtext,
    #cards-quests .card:not(.zoomed) .inner .qperc {
        display: none;
    }
}
*/
#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%;
}
/*
@media (max-width: 980px) {
    #cards-station-applyed .card {
        width: 10px;
    }
    
    #cards-station-applyed .card:not(.zoomed) .timer,
    #cards-station-applyed .card:not(.zoomed) .bar-box,
    #cards-station-applyed .card:not(.zoomed) .qty,
    #cards-station-applyed .card:not(.zoomed) .uncast{
        display: none;
    }
}*/


#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 .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 .qlocate.station{
    background-image: url(ico/viewcontrols_stations_32.png);
    left: calc(50% - -10px);
}
#cards-quests .card:not(.zoomed) .qlocate.station{
    left: calc(50% - -16px);
}

#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% - 34px);
}

#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%;
}


/*
@media (max-width: 980px) {
    #cards-applyed .card {
        width: 10px;
    }
    
    #cards-applyed .card:not(.zoomed) .timer,
    #cards-applyed .card:not(.zoomed) .bar-box,
    #cards-applyed .card:not(.zoomed) .qty,
    #cards-applyed .card:not(.zoomed) .uncast{
        display: none;
    }
}
*/


#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;
}

@media (max-width: 520px) {
    #battledom #controls{
        bottom: 28px;
    }
}

#battledom #controls .controls-sup{
    display: block;   
}

#battledom #controls .controls-sub{
    display: none;
    
}

#battledom #controls.sub .controls-sup{
    display: none;
    
}

@media (max-width: 520px) {
    #battledom #controls .controls-sup,
    #battledom #controls.sub .controls-sup{
        display: inline-block !important;
    }
    #battledom #controls .controls-sub,
    #battledom #controls.sub .controls-sub{
        display: inline-block !important;
    }
}

#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;
    whidth: 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;
    min-width: 950px;
    width: 1077px;
    min-height: 600px;
    height: 90%;


}

#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;
    
}

#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;
}
#deck .content .card .imgcard {
    width: 140px;
    left: calc(50% - 70px);
    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;
}
#deck .content .card:hover .imgcard {
    width: 250px;
    left: calc(50% - 124px);
    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: 280px;
    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);
}
#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);
}
#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: 24px;
    height: 24px;
    padding: 0px;
    position: absolute;
    top: 10px;
    right: 37px;
    margin: 0px;
}



#carddetail .button.frombelt-card:after,
#carddetail .button.tobelt-card:after {
    display: none;
}

#carddetail .button.frombelt-card:before,
#carddetail .button.tobelt-card:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center 3px;
    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;
    height: 0px;
    left: 15px;
    width: 230px;
    bottom: 255px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

#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: 10px;
    left: 5px;
    right: 5px;
    font-size: 27px;
    font-family: var(--fontFaimly_header);
    color: #ffbc00;
    z-index: 10000;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
}


#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: 11px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    right: 10px;
    position: absolute;
    text-align: center;
    font-size: 12px;
    
}

#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: 13px;
    color: rgba(255,255,255,0.8);
    text-align: right;
    text-transform: none;
    padding: 2px 0px;
    margin: 0px;
    line-height: 16px;
}
#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: 12px;
}

#storebuy .detail .information .confirmation .actions .agreebox .agreetext .agreecontext p.boring {
    color: rgba(150,150,150,1);
    font-size: 12px;
}

#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: 660px;
    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;
}


#rank #rank-content.content .pager{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 10px;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}
#rank #rank-content.content .pager .page {
    color: silver; 
    border: 1px solid silver;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    width: 35px;
}

#rank #rank-content.content .pager .page.active {
    background-color: silver;
    color: black;
    border: 1px solid silver;
    font-family: var(--fontFaimly_button);
    cursor: default;
}


#rank #rank-content.content .pager .page:not(.active):hover {
    animation: blink 100ms linear 2 alternate;
}


#rank #rank-content.content .pager .page.dots {
    cursor: default;
    border: 1px solid transparent;
}

#rank #rank-content.content .pager .page.dots:hover {
    animation: none;
}

#rank #rank-content.content .pager .page.prev.active,
#rank #rank-content.content .pager .page.next.active {
    background-color: transparent;
    cursor: pointer;
    border: 1px solid silver;
    color: silver;
}

#rank #rank-content.content .pager .page.prev.active:hover,
#rank #rank-content.content .pager .page.next.active:hover{
    animation: blink 100ms linear 2 alternate;
}

#rank #rank-content.content .pager .page.prev:not(.active),
#rank #rank-content.content .pager .page.next:not(.active) {
    background-color: transparent;
    cursor: default;
    border: 1px solid gray;
    color: gray;
}

#rank #rank-content.content .pager .page.prev:not(.active):hover,
#rank #rank-content.content .pager .page.next:not(.active):hover{
    animation: none;
}

#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: 4px 10px;
    text-shadow: none;
    color: black;
    line-height: 12px;
    font-size: 12px;

    clip-path: var(--clip_standardstatus);
    font-family: var(--fontFaimly_button);
}

#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%);
    opacity: 0.2;
    transition: opacity 0.2s;
    padding: 2px 9px;
    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_standardstatus);
    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: calc(50% - 275px);
    left: calc(50% - 475px);

    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: 175px;
    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: -55px;
    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: 13px;
    color: white;
    text-shadow: var(--shadow_textfull);

    line-height: 18px;

}

#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;
}

@media (max-width: 520px) {
    .raidsbox {
        display: none;
    }
}

.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: 230px;
    z-index: 1;
   
}

#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 {
    display: block;
    position: absolute;
    top: 23px;
    right: 0px;
    z-index: 1;
    
}

#telo #playing .users .user {
    position: relative;
    min-height: 42px;
    padding: 5px 0px 5px 42px;
    box-sizing: border-box;
    display: inline-block;
    width: 160px;
    cursor: pointer;
}

#telo #playing .users .user:hover {
    animation: blink 100ms linear 2;
}




#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;
    filter: drop-shadow(0px 0px 6px #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 .pager{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 10px;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}
#users #users_content.content .pager .page {
    color: silver; 
    border: 1px solid silver;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    width: 35px;
}

#users #users_content.content .pager .page.active {
    background-color: silver;
    color: black;
    border: 1px solid silver;
    font-family: var(--fontFaimly_button);
    cursor: default;
}


#users #users_content.content .pager .page:not(.active):hover {
    animation: blink 100ms linear 2 alternate;
}


#users #users_content.content .pager .page.dots {
    cursor: default;
    border: 1px solid transparent;
}

#users #users_content.content .pager .page.dots:hover {
    animation: none;
}

#users #users_content.content .pager .page.prev.active,
#users #users_content.content .pager .page.next.active {
    background-color: transparent;
    cursor: pointer;
    border: 1px solid silver;
    color: silver;
}

#users #users_content.content .pager .page.prev.active:hover,
#users #users_content.content .pager .page.next.active:hover{
    animation: blink 100ms linear 2 alternate;
}

#users #users_content.content .pager .page.prev:not(.active),
#users #users_content.content .pager .page.next:not(.active) {
    background-color: transparent;
    cursor: default;
    border: 1px solid gray;
    color: gray;
}

#users #users_content.content .pager .page.prev:not(.active):hover,
#users #users_content.content .pager .page.next:not(.active):hover{
    animation: none;
}

#users #users_content.content .user{
    display: block;
    position: relative;
    /* float: left; */
    width: 150px;
    height: 200px;
    margin: 3px;
    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;
}

@media (max-width: 520px) {
    .button-shrotcut .ctrl-title {
        display: none;
    }
    
    .button-shrotcut.bsmore {
        display: none;
    }
    
    .button-shrotcut.bsless {
        display: none;
    }
}

.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%);
}



@media (max-width: 520px) {
    .button-shrotcut > .ctrl-key {
        height: 23px;
        min-width: 23px;
        line-height: 21px;
        font-size: 12px;
    }
}


.button-shrotcut .ctrl-thint{
   display: block !important;
    position: absolute !important;
    bottom: calc(100% + 14px);
    right: 50%;
    transform: translateX(50%);
    outline: none !important;
    text-decoration: none !important;
    text-align: left;
    font-size: 12px !important;
    vertical-align: baseline;
    line-height: 14px !important;
    z-index: 1000;
    padding: 6px 8px !important;
    width: auto;
    color: black !important;
    font-family: var(--fontFaimly_button) !important;
    background-color: var(--color-thint) !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    float: none !important;
    animation: highlited 1000ms linear infinite;
}

.button-shrotcut .ctrl-thint:before  {
    content: "";
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid var(--color-thint);
    position: absolute;
    top: 100%;
    right: calc(50% - 10px);
}

.button-shrotcut:hover{
    animation: blink 100ms linear 2 alternate;
    z-index: 10;
}



.button-shrotcut.hovered  {
    /*z-index: 100000;*/
}


.button-shrotcut.hovered .ctrl-subtext {
    display: block;
}

.button-shrotcut .ctrl-subtext {
    position: absolute;
    display: none;
    right: 3px;
    font-size: 12px;
    bottom: 100%;
    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);
    animation: var(--animation-subtext-fadein);
    filter: var(--subtext_shadow);
    pointer-events: none;
}

.button-shrotcut .ctrl-subtext:before {
    content: "";
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    bottom: -5px;
    right: 0px;
    border-top: 5px solid var(--subtext_color-background);
   
}


.button-shrotcut .ctrl-subtext > .ctrl-key {
    margin-right: 4px;
}


body.pressedSHIFT .distanceselect .shiftpresseffect.minus > .ctrl-key:before,
body.pressedSHIFT .distanceselect .shiftpresseffect.plus > .ctrl-key: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.pressedSHIFT .distanceselect .shiftpresseffect.minus > .ctrl-key:hover:before,
body.pressedSHIFT .distanceselect .shiftpresseffect.plus > .ctrl-key:hover:before{
    animation: highlitedPRESSEDButton 800ms ease infinite;
}

#signalScanner {
    position: absolute;
    height: 600px;
    width: 800px;
    z-index: 1000;
    animation: blink 100ms linear 2 alternate;
}

#signalScanner: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;
}

#signalScanner .signalScanner_actions {
    position: absolute;
    bottom: 25px;
    left: 15px;
    right: 15px;
    text-align: center;
}

#signalScanner .signalScanner_actions .ssbutton {
    position: relative;
    display: inline-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;
    margin: 5px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
}


#signalScanner .signalScanner_actions .ssbutton:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#signalScanner .signalScanner_maininfo {
    position: absolute;
    top: 35px;
    left: 50px;
    right: 50px;
   
    text-align: center;
    color: #bfbfbf;
    font-size: 14px;
}

#signalScanner .signalScanner_maininfo .anomdistance {
    padding: 4px 0px;
}

#signalScanner .signalScanner_maininfo .scaneffectivity {
    padding: 4px 0px;
}

#signalScanner .signalScanner_maininfo .scaneffectivity strong {
    color: white;
}

#signalScanner .signalScanner_maininfo .scanhelp {
    padding: 15px 0px 0px;
    animation: highlited 1000ms linear infinite;
}

#signalScanner .signalScanner_results {
    position: absolute;
    top: 120px;
    left: 50px;
    right: 50px;
    bottom: 120px; 
    text-align: left;  
}
/*
#signalScanner .signalScanner_results:before {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    left: -4px;
    right: -4px;
    bottom: calc(50% - 1px);
    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;
}
*/
#signalScanner .signalScanner_results .energy{
    position: absolute;
    /* width: calc(100% - 80px); */
    /* min-height: 30px; */
    left: 20px;
    bottom: 0px;
    top: 0px;
    width: 0px;
    
}

#signalScanner .signalScanner_results .energy.scanable{
    cursor: pointer;
    width: 24px;
    transform: translateX(-12px);
    z-index: 1;
    
}

#signalScanner .signalScanner_results .energy.scanable:hover{
    z-index: 10000;
}



#signalScanner .signalScanner_results .energy.scanable:before {
    content: '';
    position: absolute;
    bottom: -5px;
    top: -5px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 20%, transparent 75%);
    width: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

#signalScanner .signalScanner_results .energy .barbox{
    position: absolute;
    width: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    
}

#signalScanner .signalScanner_results .energy.scanable .barbox{
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    
}

#signalScanner .signalScanner_results .energy .barbox .bar{
    position: absolute;
    top: 50%;
    width: 0px;
    left: 0px;
    transform: translateY(-50%);
    mix-blend-mode: plus-lighter;
}

#signalScanner .signalScanner_results .energy.scanable .barbox .bar{
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0px;
    
    
}

#signalScanner .signalScanner_results .energy .barbox .bar .barimg{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 16px;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: plus-lighter;
}

#signalScanner .signalScanner_results .energy.scanable:hover:before {
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.25) 20%, transparent 75%);
}

#signalScanner .signalScanner_results .energy .btitle{
    position: absolute;
    left: 0px;
    bottom: -10px;
    font-size: 12px;
    color: white;
    display: none;
    text-align: left;
}

#signalScanner .signalScanner_results .energy .scanbutton{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 100;
}

#signalScanner .signalScanner_results .energy .subinfo{
    position: absolute;
    display: none;
    right: calc(100% - 10px);
    left: unset;
    font-size: 12px;
    top: 5px;
    background-color: var(--subtext_color-background);
    padding: 6px 12px;
    box-sizing: border-box;
    z-index: 1000;
    line-height: initial;
    text-align: center;
    color: var(--subtext_color);
    width: 160px;
    cursor: default;
}

#signalScanner .signalScanner_results .energy .subinfo:before {
    content: "";
    display: block;
    border-right: unset;
    border-left: 5px solid var(--subtext_color-background); 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    bottom: calc(50% - 5px);
    right: -5px;
    left: unset;
}

#signalScanner .signalScanner_results .energy.left .subinfo{
    
    left: calc(100% - 10px);
    right: unset;
}

#signalScanner .signalScanner_results .energy.left .subinfo:before {
    content: "";
    display: block;
    border-left: unset;
    border-right: 5px solid var(--subtext_color-background); 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    bottom: calc(50% - 5px);
    left: -5px;
    right: unset;
}


#signalScanner .signalScanner_results .energy .subinfo .html {
    margin: 5px 8px 10px;
}

#signalScanner .signalScanner_results .energy .subinfo .html .nowrap{
    white-space: nowrap;
}

#signalScanner .signalScanner_results .energy .subinfo .html .anomalyname {
    font-size: 19px;
    /* font-family: var(--fontFaimly_button); */
    padding: 3px 0px 3px 0px;
    line-height: 20px;
    color: white;
}


#signalScanner .signalScanner_results .energy .subinfo .html .objectstotal {
    font-size: 13px;
    padding: 3px 0px 3px 0px;
    color: #ff8f00;
}


#signalScanner .signalScanner_results .energy .subinfo .html .spenergy {
    padding: 3px 0px;
}

#signalScanner .signalScanner_results .energy .subinfo .html .spmorale {
    padding: 3px 0px;
}

#signalScanner .signalScanner_results .energy:hover .subinfo{
    display: block;
}

#signalScanner .signalScanner_results .energy .scanners {
    transform: translateY(-50%);
    position: absolute;
    text-align: left;
    top: 50%;
    left: 15px;
    z-index: 10;
}

#signalScanner .signalScanner_results .energy.left .scanners {
    text-align: right;
    right: 15px;
    left: unset;
    z-index: 10;
}

#signalScanner .signalScanner_results .energy .scanners .scanresult{
    padding: 3px 28px 3px 5px;
    position: relative;
    text-align: left;
    display: inline-block;
    color: black;
    background-color: white;
    white-space: nowrap;
    margin: 3px 0px;
    left: 10px;
    font-size: 13px;
}

#signalScanner .signalScanner_results .energy .scanners .scanresult.unactive{
    filter: invert(1);
    cursor: default;
}



#signalScanner .signalScanner_results .energy .scanners .scanresult:before  {
    content: "";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 5px solid white;
    position: absolute;
    top: 0px;
    left: -5px;
}


#signalScanner .signalScanner_results .energy.left .scanners .scanresult{
    
    right: 10px;
    left: unset;
}



#signalScanner .signalScanner_results .energy.left .scanners .scanresult:before  {
    
    border-left: 5px solid white;
    border-right: unset;
    right: -5px;
    left: unset;
}

#signalScanner .signalScanner_results .energy .scanners .scanresult.hidden{
    display: none;
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .close{
    top: 5px;
    right: 5px;
    filter: invert(1);
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .close .subtext{
    filter: invert(1);
}


#signalScanner .signalScanner_results .energy .scanners .scanresult .stitle{
    
    font-family: var(--fontFaimly_button);
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .sstitle{
    
    font-family: var(--fontFaimly_button);
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .sstitle .blueprins{
    padding: 3px;
    
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .sstitle .blueprins .blueprint{
    margin: 3px;
    
}

#signalScanner .signalScanner_results .energy .scanners .scanresult .simg{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}


.desktopContextMenu {
    position: absolute;
    width: 230px;
    z-index: 9999;
    color: rgba(255,255,255,0.8);
    /*filter: drop-shadow(0px 0px 30px rgb(22 76 129 / 20%));*/
}

.desktopContextMenu:before {
    content: '';
    position: absolute;
    left: -5px;
    right: 0px;
    top: -5px;
    bottom: 0px;
    background-color: rgb(16, 15, 33);
    clip-path: var(--clip_desktopaction);
    z-index: -1;
    
}

.desktopContextMenu:after {
    content: "";
    position: absolute;
    top: -135px;
    left: -80px;
    right: -30px;
    bottom: -75px;
    z-index: -1;
}

.desktopContextMenu .close {
    top: 7px;
    right: 11px;
    width: 8px;
    height: 8px;
}



.desktopContextMenu .cards-applyed{
    position: absolute;
    padding: 0px;
    text-align: left;
    box-sizing: border-box;
    bottom: calc(100% + 80px);
}


.desktopContextMenu .cards-applyed .card {
    height: 0px;
    display: inline-block;
    width: 57px;
    position: relative;
}

.desktopContextMenu .cards-applyed .card .inner {
    transform: scale(0.38);
    left: -31px;
    top: -60px;

}

.desktopContextMenu .cards-applyed .card:hover{
    z-index: 1000;

}

.desktopContextMenu .cards-applyed .card:hover .inner {
    transform: scale(0.6);
    left: -31px;
    top: -60px;
    transition: .05s;

}

.desktopContextMenu .cards-applyed .card:hover .inner .bar-box{
    position: absolute;
    height: 7px;
}

.desktopContextMenu .datas {
    font-size: 12px;
    padding: 5px 5px 10px 10px;
    background-color: transparent;

    text-shadow: none;
    height: auto;

}

.desktopContextMenu .datas .swtitle {
    display: block;
    color: white;

    font-size: 23px;
    padding: 0px 20px 2px 0px;
}

.desktopContextMenu .datas .swstitle {
    display: block;
    font-size: 14px;
    padding: 0px 0px 3px 0px;
}
.desktopContextMenu .datas .swstitle .relation {
    display: inline-block;
    font-size: 12px;
    padding: 2px 5px 2px 5px;
    background: #272f3d;
    color: white;
    /* font-family: var(--fontFaimly_button); */
    margin: 2px 0px;
    text-transform: uppercase;
}

.desktopContextMenu .datas .swsid {
    display: block;
    
    opacity: 0.5;
    font-size: 11px;
    padding: 0px 0px 0px 0px;
}

.desktopContextMenu .datas .swdist {
    display: block;
    font-size: 12px;
}
.desktopContextMenu .datas .sweta {
    display: block;
    font-size: 12px;
}

.desktopContextMenu .datas .wweta {
    display: block;
    font-size: 12px;
}

.desktopContextMenu .datas .wwee {
    display: block;
    font-size: 12px;
}

.desktopContextMenu .score {
    display: block;
    font-size: 12px;
}

.desktopContextMenu .score .sscore {
    display: grid;
    padding: 10px 5px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.desktopContextMenu .score .sscore .scoreitem {
    display: block;
}

.desktopContextMenu .score .sscore .scoreitem .scoreicon {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
}

.desktopContextMenu .score .sscore .scoreitem .scoreicon img {
    max-width: 100%;
    max-height: 100%;
    filter: brightness(1.5) grayscale(1);
}

.desktopContextMenu .score .sscore .scoreitem .scoreval {
    text-align: right;
    padding: 0px 0px 0px 35px;
    color: white;
    font-size: 12px;
    height: 30px;
    display: block;
    line-height: 30px;
    white-space: nowrap;
    text-align: left;
    font-family: var(--fontFaimly_button);
}

.desktopContextMenu .actions {
    margin-top: 3px;
    left: 0px;
    right: 0px;
    background-color: black;
}

.desktopContextMenu .actions .linkcommand {
    display: block;
    position: relative;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    height: 30px;
    padding: 0px 6px;
    margin: 0px 0px 3px;
    background-color: rgba(190,190,190,0.95);
    color: black;
    text-transform: uppercase;
    font-family: var(--fontFaimly_button);
}

.desktopContextMenu .actions .linkcommand:hover > .subtext {
    display: block;
}


.desktopContextMenu .actions .linkcommand.unactive {
    color: rgb(57,57,57);
    cursor: default;
    background-color: rgb(100,100,100);
    text-shadow: none;
}
.desktopContextMenu .actions .linkcommand.unactive:hover {
    color: rgb(47,47,47);
    background-color: rgb(100,100,100);
    animation: none;
}


.desktopContextMenu .actions .subfolder .linkcommand{
    padding-left: 10px;
    color: white;
    display: inline-block;
    margin: 1px 1px;
    width: calc(33.33% - 2px);
    box-sizing: border-box;
    font-size: 12px;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 2px 3px, 2px 3px,2px 3px, 2px 3px;
    background-position: top left, top right,bottom left, bottom right;
    background-color: #07070e;
}


.desktopContextMenu .actions .subfolder .linkcommand.distanceselect{
    position: relative;
    width: auto;
    display: block;
    height: 90px;
    padding: 0px;
}

.desktopContextMenu .actions .subfolder  .linkcommand.distanceselect:hover{
    background-color: #07070e;
    animation: none;
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceselectbox{
    position: absolute;
    top: 10px;
    padding: 0px;
    left: 10px;
    right: 10px;
    margin: 0px;
    z-index: 5;
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox{
    position: absolute;
    top: 0px;
    padding: 0px;
    left: 30px;
    right: 30px;
    height: 8px;
    z-index: 5;
    
    
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .distanceinput{
    position: absolute;
    top: 0px;
    padding: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    z-index: 5;
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .button-shrotcut{
    position: absolute;
    top: -7px;
    
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .button-shrotcut.plus{
    right: -30px;
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .button-shrotcut.minus{
    left: -30px;
}


.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .distancemetter.realdist{
    position: absolute;
    left: 0px;
    padding: 0px;
    bottom: 0px;
    background-color: gray;
    top: 0px;
    z-index: 3;
}



.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distanceinputbox .distancemetter.forbidden{
    position: absolute;
    left: 0px;
    padding: 0px;
    bottom: 0px;
    background-color: red;
    top: 0px;
    z-index: 4;
    border-radius: 5px;
    display: none;
}

.desktopContextMenu .actions .subfolder .linkcommand.distanceselect .distancebutton{
    display: block;
    position: absolute;
    width: auto;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
}


.desktopContextMenu .actions .subfolder .linkcommand.sqattack {
    position: relative;
    width: calc(20% - 2px);
    text-align: right;
    padding: 0px 8px;
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 5px center;
    opacity: 0.3;
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack.sqa:before{
    background-image: url('fleets/a.png');
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack.sqb:before{
    background-image: url('fleets/b.png');
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack.sqc:before{
    background-image: url('fleets/c.png');
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack.sqd:before{
    background-image: url('fleets/d.png');
}
.desktopContextMenu .actions .subfolder .linkcommand.sqattack.sq0:before{
    background-image: url('fleets/all.png');
}


.desktopContextMenu .actions .linkcommand .thint {
    top: 2px;
    animation: highlited 1000ms linear infinite;
    right: calc(100% + 5px);
    
}


.desktopContextMenu .actions .linkcommand:hover {
    background-color: rgba(255,255,255,1);
    color: black;
    animation: blink 100ms linear 2 alternate;
}


.desktopContextMenu .actions .linkcommand.sqattack:hover:before {
    filter: invert(1);
}



.desktopContextMenu .actions .subheader {
    display: block;
    position: relative;
    line-height: 30px;
    font-size: 13px;
    cursor: pointer;
    min-height: 30px;
    padding: 0px;
    margin: 0px 0px 3px;
    background-color: rgb(35,33,73);
    color: rgba(155,155,155,1);
}

.desktopContextMenu .actions .subheader > span:not(.button) {
    padding: 5px 5px;
}

.desktopContextMenu .actions .subheader:hover {
    background-color: rgba(255,255,255,0.8);
    color: rgba(0,0,0,1);
}

.desktopContextMenu .actions .subheader.opened {
    display: block;
    position: relative;
    color:rgba(255,255,255,0.5);
    cursor: default;
    background-color: #07070e;
    border-bottom: 1px solid rgba(50,50,50,0.95);
}

.desktopContextMenu .actions .subheader.opened:hover {
  
}

.desktopContextMenu .actions .subheader .subfolder{
    display: none;
    position: relative;

}

.desktopContextMenu .actions .subheader.opened .subfolder{
    display: block;
}


#warningWindow{
    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;
}

#warningWindow: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;
}

#warningWindow .content{
    position: relative;
    margin: 70px 0px 0px;
    padding: 0px 20px 20px;
}

#warningWindow .content .htmltext{
    display: block;
    position: relative;
    padding: 20px 50px;
    text-align: center;
    color: rgb(255,255,255);
    font-size: 14px;
    
}

#warningWindow .content .htmltext small{
    color: #e9e9e9;
    font-size: 12px;
    
}

#warningWindow .content .qty{
    display: block;
    position: relative;
    margin: 40px 20px 10px;
    text-align: center;
    
}

#warningWindow .content .qty input{
    width: 55px;
}

#warningWindow .content .actions{
    display: block;
    position: relative;
    margin: 30px 0px 40px;
    text-align: center;
    box-sizing: content-box;
    
}

.tags {
    margin: 0px 2px;
}

.tags .tag {
    display: inline-block;
    background-color: #979797;
    color: black;
    font-size: 10px;
    margin: 2px;
    padding: 1px 4px;
    font-family: var(--fontFaimly_button);
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
}

#itembox .sourcelink{
    display: block;
    position: absolute;
    top: 15px;
    right: 36px;
    opacity: 1;
    z-index: 10;
}

.sourcelink_link{
    display: inline-block;
    height: 10px;
    background-position: center;
    background-repeat: no-repeat !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px 2px;
    background-image: url(ico/source_text_120x19a.png);
    width: 73px;
    background-size: 65px;
}

.sourcelink_link.padded{
    margin-left: 8px;
    width: 34px;
    background-position: top left;
    background-size: 34px;
}

.battery {
    display: block;
    position: absolute;
    right: 9px;
    top: 6px;
    
}

.battery .battery_barbox {
    display: block;
    
    height: 12px; /* výška kontejneru baterie */
    border-right-style: solid;
    border-right-width: 2px;
    border-color: black;
    position: relative; /* aby šlo správně pozicionovat "hlavičku" baterie */
    background-color: black; /* barva pozadí kontejneru */
    width: calc((6px * var(--segment-count, 1))); /* šířka každého segmentu */
    box-sizing: border-box;
    color: rgb(calc((1 - var(--quality-count)) * 200),calc((var(--quality-count)) * 200),20);
}

.battery .battery_barbox::after {
    content: '';
    position: absolute;
    top: 15%; 
    right: -5px;
    width: 5px; 
    bottom: 15%;
    background: black;
    
    display: block;
}

.battery .battery_barbox.empty {
    /*border: 2px solid rgb(calc((1 - var(--quality-count)) * 255),calc((var(--quality-count)) * 200),20);*/
    font-family: var(--fontFaimly_button);
}
 
.battery .battery_barbox.empty:before {
    content: 'X';
    position: absolute;
    left: 50%;
    
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
   
    display: block;
    font-size: 9px;
    
}

.battery .battery_barbox.empty::after {
    /*background: rgb(calc((1 - var(--quality-count)) * 255),calc((var(--quality-count)) * 200),20);*/
}

.battery .battery_barbox .bar {
    position: absolute;
    left: 2px;
    display: block;
    bottom: 2px;
    /*height: calc((100% - 4px) * var(--quality-count));*/
    height: calc((100% - 4px));
   
    background-image: linear-gradient(-90deg, transparent 0px, transparent 2px, rgb(calc((1 - var(--quality-count)) * 200),calc((var(--quality-count)) * 200),20) 2px, rgb(calc((1 - var(--quality-count)) * 255),calc((var(--quality-count)) * 200),20) 100%);
    background-size: calc(100% / var(--segment-count, 1)) 100%;
    background-clip: content-box;
}


.battery .battery_text {
    display: block;
   position: absolute;
   top: 5px;
   left: 50%;
   transform: translateX(-50%);
   
}

.battery:hover > .subtext{
    display: block;
    
}

.pie-chart {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    margin: 19px auto;
}

.pie-slice {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0px, 150px, 300px, 0px);
    border-radius: 50%;
}

.pie-slice span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0px, 300px, 300px, 150px);
    border-radius: 50%;
    transform-origin: center center;
    background-color: transparent;
}



.module_connector {
    display: inline;
    width: 14px;
    height: 100%;
    position: relative;
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;
    margin: 0px 2px;
    padding: 0px 7px;
}

.module_connector.con_a {
    background-image: url(connectors/a.png);
}

.module_connector.con_hlo {
    background-image: url(connectors/hlo.png);
}

.module_connector .sub {
    display: none;
}

.module_connector: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);
}

.module_connector: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;
}




#messages {
    z-index: 999000;
    position: absolute;
    width: 90%;
    min-width: 760px;
    min-height: 600px;
    height: 90%;
    
    z-index: 999999999;
    max-width: var(--hud-window-max-width);
}

#messages:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: -5px;
    bottom: 0px;
    background-color: rgb(30, 30, 30);
    clip-path: var(--clip_messages);
    z-index: -2;
}

#messages .banner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    clip-path: var(--clip_messages);
}

#messages .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);
}

#messages .messages-actions {
    position: absolute;
    top: 45px;
    left: 20px;
    z-index: 10;
    
}

#messages .messages-actions .button.mnew{
    padding-left: 35px;
}

#messages .messages-actions .button.mnew:before {
    background-image: url(ico/message-64.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: top 7px left 8px;
}

#messages .messages-list-header {
    position: absolute;
    top: 100px;
    left: 5px;
    width: 315px;
    height:35px;
    
}

#messages .messages-list-header .zalozka {
    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;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0);
    margin: 0px 2px;
}

#messages .messages-list-header .zalozka:hover {
    border:1px solid white;
    color: rgba(255,255,255,1);
    animation:blink 100ms linear 2 alternate;
}

#messages .messages-list-header .zalozka.active:hover {
    border:1px solid rgba(255,255,255,0);
    color: var(--hud_bookmarkcolor);
    animation:none;
}

#messages .messages-list-header .zalozka.active{
    color: var(--hud_bookmarkcolor);
    animation:highlited 1000ms linear infinite;
}

#messages .messages-list-header .zalozka .qty{
    color: black;
    background-color: #e10303;
    position: relative;
    display: inline-block;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    margin: 0px 0px 0px 5px;
    font-family: var(--fontFaimly_button);
    transform: translateY(-7px);
    padding: 0px 7px;
    box-sizing: border-box;
    border-radius: 50px;
    color: white;
    font-size: 12px;
    position: absolute;
    top: 1px;
    right: -4px;
}

#messages .messages-list {
    position: absolute;
    top: 140px;
    left: 5px;
    width: 315px;
    bottom: 15px;
    overflow-y: scroll;
}

#messages .messages-list .head{
    position: relative;
    margin-top: 1px;
    text-align: center;
    color: rgb(255 255 255 / 68%);
    line-height: 35px;
    text-transform: uppercase;
    border-top: 1px solid #c0c0c047;
}

#messages .messages-list .info {
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    text-transform: uppercase;
    padding: 15px 20px;
}

#messages .messages-list .messages-message {
    position: relative;
    padding-left: 40px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 8px;
    color: white;
    box-sizing: border-box;
    text-align: left;
    border-bottom: 1px solid #c0c0c026;
    min-height: 40px;
}

#messages .messages-list .messages-message.unopened  {
    background-color: #c0c0c014;
}

#messages .messages-list .messages-message .mdate{
    
    color: silver;
    position: absolute;
    top: 10px;
    right: 10px;

}
#messages .messages-list .messages-message .mcontent{
    cursor: pointer;
    padding: 2px 0px 0px 7px;
    overflow: hidden;
}

#messages .messages-list .messages-message .mcontent:hover {
    animation: blink 100ms linear 2 alternate;
}

#messages .messages-list .messages-message .mfrom{
    position: absolute;
    top: 26px;
    left: 2px;
}

#messages .messages-list .messages-message .mreplyes{
    position: absolute;
    top: 4px;
    left: 7px;
}



#messages .messages-list .messages-message .mreply{
    text-align: left;
    display: inline-block;
    font-size: 13px;
    font-family: var(--fontFaimly_button);
    padding: 0px;
    color: #797979;
    position: relative;
    height: 20px;
    width: 24px;
    white-space: nowrap;
    margin: 2px;
}

#messages .messages-list .messages-message .mreply:not(.unactive){
    cursor: pointer;
}

#messages .messages-list .messages-message .mreply:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#messages .messages-list .messages-message .mreply:not(.unactive):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#messages .messages-list .messages-message .mreply:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: url(ico/reply-arrow-81-64.png), 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: 10px, 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: center, 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;
} 

#messages .messages-list .messages-message .mfrom .guser{
    padding: 1px 10px 0px 42px;
    min-height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#messages .messages-list .messages-message .mfrom .guser .uimgd{
    width: 30px;
    height: 30px;
}

#messages .messages-list .messages-message .mfrom .guser .ucname{
    display: none;
}

#messages .messages-list .messages-message .mfrom .guser .uname{
    display: none;
}

#messages .messages-list .messages-message .mfrom .guser .uname{
    display: none;
}

#messages .messages-list .messages-message .mfrom .guser .ubdzone{
    display: none;
}

#messages .messages-list .messages-message .mfrom .guser .ubdadmin{
    display: none;
}

#messages .messages-list .messages-message .mfrom .guser .lactivity{
    display: none;
}

#messages .messages-list .messages-message .msubject {
    text-align: left;
    display: block;
    font-size: 17px;
    letter-spacing: 1px;
    padding: 16px 0px 4px;
    color: silver;
}
#messages .messages-context .messages-contextmessage .mheader .msubject .readed,
#messages .messages-list .messages-message .msubject .readed {
    display: inline-block;
    font-size: 12px;
    padding: 1px 5px;
    color: black;
    background-color: gray;
    font-family: var(--fontFaimly_button);
    font-size: 10px;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 3px;
    margin-left: 5px;
}

#messages .messages-list .messages-message.unopened .msubject {
    color: white;
    font-family: var(--fontFaimly_button);
    
}

#messages .messages-context {
    position: absolute;
    top: 45px;
    right: 10px;
    width: calc( 100% - 360px );
    bottom: 15px;
    box-sizing: border-box;
}

#messages .messages-context .info{
    top: 40%;
    transform: translateY(-50%);
}

#messages .messages-context .messages-contextmessage,
#messages .messages-context .messages-contextwritemessage{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#messages .messages-context .messages-contextmessage .mactions{
    position: absolute;
    top: 0px;
    right: 10px;
}

#messages .messages-context .messages-contextmessage .mactions button{
    margin: 5px;
}

#messages .messages-context .messages-contextmessage .mactions button.mdelete{
    padding-left: 35px;
}

#messages .messages-context .messages-contextmessage .mactions button.mdelete:before {
    background-image: url(ico/trash-10-64.png);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center left 8px;
}

#messages .messages-context .messages-contextmessage .mactions button.mreply{
    padding-left: 35px;
}

#messages .messages-context .messages-contextmessage .mactions button.mreply:before {
    background-image: url(ico/reply-64.png);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: top 9px left 8px;
}

#messages .messages-context .messages-contextmessage .mheader{
    position: absolute;
    padding: 0px;
    top: 50px;
    left: 0px;
    right: 0px;
    height: 177px;
    border-bottom: 1px solid #c0c0c026;
    
}

#messages .messages-context .messages-contextmessage .mheader .mdate{
    position: absolute;
    font-size: 12px;
    color: silver;
    text-align: right;
    top: 100px;
    right: 7px;
}

#messages .messages-context .messages-contextmessage .mheader .msubject{
    text-align: left;
    display: block;
    font-size: 23px;
    letter-spacing: 1px;
    font-family: var(--fontFaimly_button);
    padding: 0px;
    color: white;
    position: absolute;
    bottom: 10px;
    max-height: 60px;
    overflow: hidden;
    left: 10px;
    right: 10px;
} 

#messages .messages-context .messages-contextmessage .mheader .replydata{
    display: block;
    position: absolute;
    left: 0px;
    top: -45px;
} 

#messages .messages-context .messages-contextmessage .mheader .replydata .isreply{
    text-align: left;
    display: block;
    font-size: 13px;
    font-family: var(--fontFaimly_button);
    padding: 0px 12px 0px 35px;
    color: #797979;
    position: relative;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    
}

#messages .messages-context .messages-contextmessage .mheader .replydata .isreply:not(.unactive){
    cursor: pointer;
}

#messages .messages-context .messages-contextmessage .mheader .replydata .isreply:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#messages .messages-context .messages-contextmessage .mheader .replydata .isreply:not(.unactive):hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#messages .messages-context .messages-contextmessage .mheader .replydata .isreply:after{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: url(ico/reply-64.png), 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: 14px, 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 12px left 10px, 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;
} 

#messages .messages-context .messages-contextmessage .mheader .maddresses{
    position: relative;
    display: grid;

    grid-gap: 0px 50px;
    grid-template-columns: repeat(2, minmax(20px, 1fr));
    
    padding: 0px 0px 10px;
} 

#messages .messages-context .messages-contextmessage .mheader .maddresses:before{
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 10px;
    
    background-image: url(ico/arrow-32-32.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px;
    
    filter: invert(1);
    
}


#messages .messages-context .messages-contextmessage .mheader .maddresses .mfrom{
    position: relative;
    
} 

#messages .messages-context .messages-contextmessage .mheader .maddresses .mto{
   position: relative;
    
} 

#messages .messages-context .messages-contextmessage .mbody{
    position: absolute;
    top: 230px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 5px 10px 150px;
    font-size: 16px;
    color: white;
    text-align: left;
    overflow-y: scroll;
    user-select: text;
}

#messages .messages-context .messages-contextmessage .mbody a{
    color: #afc2ed;
}


#messages .messages-context .messages-contextwritemessage .mheader{
    position: absolute;
    padding: 0px;
    top: 50px;
    left: 0px;
    right: 0px;
    height: 177px;
    border-bottom: 1px solid #c0c0c026;
     z-index: 10;
} 

#messages .messages-context .messages-contextwritemessage.cannot-add-contact .mheader{
    height: 75px;
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses{
    position: absolute;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    grid-gap: 6px;
    top: 85px;
    left: calc(5% + 3px);
   
    right: calc(5% + 27px);
    text-align: center;
    justify-content: center;
    
    padding: 5px;
    
    
    overflow-y: scroll;
    overflow-x: hidden;
}

#messages .messages-context .messages-contextwritemessage.cannot-add-contact .mheader .adresses{
    top: 0px;
    right: calc(5% + 3px);
    overflow-y: hidden;
}




#messages .messages-context .messages-contextwritemessage .mheader .adresses .guser{
    padding: 1px 10px 0px 42px;
    min-height: 35px;
    
}
#messages .messages-context .messages-contextwritemessage .mheader .adresses .guser .userlink:hover{
    animation: none;
}


#messages .messages-context .messages-contextwritemessage .mheader .adresses .guser:hover:before{
    display: block;
    animation: highlited 1000ms linear infinite;
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .guser.removable:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    height: unset;
    
    background-image: url(ico/close-window-16.png);
    background-repeat: no-repeat;
    background-position: top 5px right 5px;
   
    z-index: -1;
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .guser.unremovable .userlink{
    cursor: default;
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .uimgd{
    width: 30px;
    height: 30px;
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .ucname{
    
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .uname{
    
}

#messages .messages-context .messages-contextwritemessage .mheader .adresses .lactivity{
    display: none;
}

#messages .messages-context .messages-contextwritemessage .mheader .search{
    position: absolute;
    width: 90%;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    
    
    background-image: url(ico/ico_search-30.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px;
    z-index: 10;
} 

#messages .messages-context .messages-contextwritemessage .mheader .search input{
    text-align: left;
    width: calc(100% - 26px);
} 

#messages .messages-context .messages-contextwritemessage .mheader .search .searchresults{
    position: absolute;
    top: 35px;
    left: 2px;
    right: 30px;
    background: #535353;
    box-sizing: border-box;
    padding: 5px 5px 15px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 15px;
    background-image: linear-gradient(rgb(25 48 119 / 94%) 0%, rgb(0, 0, 0, 0.8) 70%);
} 

#messages .messages-context .messages-contextwritemessage .mheader .search .searchresults.empty{
    display: none;
}


#messages .messages-context .messages-contextwritemessage .mbody{
    position: absolute;
    top: 230px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#messages .messages-context .messages-contextwritemessage.cannot-add-contact .mbody{
    top: 125px;
}

#messages .messages-context .messages-contextwritemessage .mbody .templates{
    position: absolute;
    top: 65px;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
    text-align: left;
}

#messages .messages-context .messages-contextwritemessage .mbody .templates .template{
    position: relative;
    display: inline;
    /* height: 20px; */
    color: white;
    cursor: pointer;
    padding: 6px 13px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: var(--fontFaimly_button);
    margin: 3px;
}

#messages .messages-context .messages-contextwritemessage .mbody .templates .template:before{
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: transparent;
    z-index: -1;
}

#messages .messages-context .messages-contextwritemessage .mbody .templates .template:hover:before {
    box-shadow: 0px 0px 15px #3b466f inset;
    animation: blink 100ms linear 2 alternate;
}

#messages .messages-context .messages-contextwritemessage .mbody .templates .template: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;
}
    
#messages .messages-context .messages-contextwritemessage .mbody input.messagesubject{
    position: absolute;
    top: 20px;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    text-align: left;
}

#messages .messages-context .messages-contextwritemessage .mbody .textarea{
    position: absolute;
    top: 91px;
    left: 50%;
    width: 90%;
    bottom: 25px;
    transform: translateX(-50%);
    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;
    
   
}

#messages .messages-context .messages-contextwritemessage .mbody .textarea textarea.messagehtml{
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px; 
    color: white;
    resize: none;
    text-align: left;
    background: none;
    font-family: monospace;
}

#messages .messages-context .messages-contextwritemessage .mactions{
    position: absolute;
    top: 0px;
    right: 10px;
}

#site {
    display:block;
    position:absolute;
    top: calc(50% - 40px);
    left: 50%;
    width:620px;
    min-height: 720px;
    font-size:12px;
    color:white;
    z-index: 1000000000;
    transform: translateX(-50%) translateY(-50%);

}

#site:before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #292c39;
    background-image: linear-gradient(0deg, rgb(16 21 41 / 63%) 41%, rgba(0, 0, 0, 0) 98%), linear-gradient(0deg, rgb(16 21 41 / 0%) 21%, rgb(231 158 45 / 27%) 98%);
    background-size: cover;
    clip-path: var(--clip_standardbox);
    z-index: -1;
}

#site .scontent {
    display: block;
    position: relative;
    margin: 50px 20px 65px;
    
}

#site .scontent .description {
    display: block;
    position: relative;
    margin: 20px 0px 20px;
    left: 50%;
    text-align: center;
    font-size: 16px;
    line-height: 23px;
    
    color: rgba(255, 255, 255, 0.9);
    width: 90%;
    transform: translateX(-50%);
    min-height: 80px;
}

#site .scontent .description p {
    padding: 0px 0px;
    margin: 8px 0px;
}

#site .scontent .description p.preward {
    color: #FFC107;
}


#site .scontent .description span.img {
    display: block;
    width: 512px;
    left: 50%;
    transform: translateX(-50%);
    height: 512px;
    top: 20px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: 0.3;
}

#site .scontent .subinfo {
    display: block;
    position: relative;
    margin: 5px 0px 5px;
    left: 50%;
    text-align: center;
    font-size: 13px;
    color: rgb(187 187 187);
    width: 80%;
    transform: translateX(-50%);
    
}

#site .scontent .name {
    display: block;
    position: relative;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, #ffa50045 40%, #ffa50045 60%, rgba(0, 0, 0, 0.0) 100%);
    line-height: 34px;
    text-align: center;
    font-size: 29px;
    color: white;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    animation: font_color_glitch 1300ms linear !important;
    z-index: 100;
    padding: 10px 0px;
}

#site .scontent .smalltext {
    display: block;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    color: #818181;
    padding: 15px 0px 10px;
    
}

#site .scontent .actions {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin: 0px 0px 0px;
    padding: 0px;
    z-index: 1;
    
}

#site .scontent .actions .button {
    min-width: 100px;
    
}

#site .scontent ul.rewards {
    display: grid;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(auto-fit, 280px);
    grid-gap: 0px;
    align-items: start;
    justify-content: center;
    margin: 0px 0px 20px;
    padding: 0px;
    z-index: 1;
}

#site .scontent ul.rewards li{
    display: block;
    text-align: center;
    position: relative;
    
    height: 200px;
    
    padding: 0px;
    margin: 0px;
    
    z-index: 1;
}

#site .scontent ul.rewards li.card{
    height: 340px;
}

#site .scontent ul.rewards li.card .site_reward_card{
    width: 100%;
    height: 211px;
  
}



#site .scontent ul.rewards li.card .site_reward_card canvas{
    max-width: 100%;
    max-height: 100%;
}

#site .scontent ul.rewards li.card .qty{
    top: 217px;
}

#site .scontent ul.rewards li.card .ititle{
    font-size: 20px;
    line-height: 26px;
    position: absolute;
    line-height: unset;
    top: 285px;
}

#site .scontent ul.rewards li.card .ititle small{
    font-size: 16px;
    line-height: 21px;
   
}





#site .scontent ul.rewards li .qty{
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: black;
    background-color: white;
    font-size: 14px;
    padding: 0px 6px;
    width: unset;
    font-family: var(--fontFaimly_button);
}

#site .scontent ul.rewards li .inline_tes{
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    
}

#site .scontent ul.rewards li .img{
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 128px;
    
}

#site .scontent ul.rewards li .site_reward{
    filter: drop-shadow(0px 0px 100px rgb(231 158 45 / 47%));
    
}

#site .scontent ul.rewards li.astronaut-image .img{
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    height: 184px;
    background-position: top -10px center;
    background-repeat: no-repeat;
    background-size: 140px;
    filter: drop-shadow(0px 0px 100px rgb(231 158 45 / 47%));
}

#site .scontent ul.rewards li.astronaut-image .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(46 42 46) 34%, rgba(0, 0, 0, 0) 57%);
    border-radius: 90px;
}

#site .scontent ul.rewards li .ititle{
    position: absolute;
    top: 175px;
    left: 0px;
    transform: translateY(-50%);
    color: #FFC107;
    font-size: 20px;
    line-height: 26px;
    
    right: 0px;
    text-align: center;
    
}

#site .scontent ul.rewards li .ititle small{
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    color: #ffa500;
    text-transform: uppercase;
   
}


#site .scontent ul.rewards li.card .ititle small{

    text-transform: none;
   
}


#site .scontent ul.rewards li .ititle .astronaut_attrb_icon{
    display: inline-block;
    width: 23px;
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


#site .scontent ul.volby {
    display: grid;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(auto-fit, 120px);
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
    margin: 15px 0px 20px;
    padding: 0px;
}

#site .scontent ul.volby li{
    display: block;
    text-align: center;
    position: relative;
    cursor: pointer;
    height: 120px;
    width: 120px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    z-index: 1;
}

#site .scontent ul.volby li.unactive{
    
    cursor: default;
    
}

#site .scontent ul.volby li:after{
    content: '';
    position: absolute;
    left: 0px;
    display: block;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
    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;
}

#site .scontent ul.volby li.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%);
}

#site .scontent ul.volby li:before{
    content: '';
    position: absolute;
    display: block;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    z-index: -1;
    background: #1f293d;
    /*box-shadow: 0px 0px 15px #3b466f inset;*/
}

#site .scontent ul.volby li:not(.unactive):hover:before {
    box-shadow: 0px 0px 30px #546299 inset;
    animation: blink 100ms linear 2 alternate;
}

#site .scontent ul.volby li .qty{
    position: absolute;
    top: 69px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: black;
    background-color: white;
    font-size: 12px;
    padding: 0px 4px;
    font-family: var(--fontFaimly_button);
    white-space: nowrap;
}

#site .scontent ul.volby li.unactive .qty{
    
    background-color: gray;
    
}

#site .scontent ul.volby li .img{
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 60px;
    right: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px;
    filter: drop-shadow(0px 0px 25px rgba(0, 112, 202, 0.5));
}

#site .scontent ul.volby li.abstract .img{
    bottom: 35px;
    opacity: 0.7;
    background-size: 60px;
}

#site .scontent ul.volby li.deny .img{
    bottom: 35px;
    opacity: 0.7;
    background-size: 75px;
}

#site .scontent ul.volby li.abstract .img{
    bottom: 35px;
    
    opacity: 0.7;
    background-size: 60px;
    
}


#site .scontent ul.volby li.astronaut .img{
    filter: grayscale(1) brightness(1) drop-shadow(0px 0px 25px rgba(112, 112, 112, 0.5));
    top: 3px;
    left: 3px;
    bottom: 60px;
    right: 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px;
}

#site .scontent ul.volby li.astronaut:hover .img{
    filter: grayscale(1) brightness(1.2) drop-shadow(0px 0px 20px #6376bf);
}

#site .scontent ul.volby li.astronaut .inline_tes{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 60px;
}

#site .scontent ul.volby li.astronaut .inline_tes .tactical, 
#site .scontent ul.volby li.astronaut .inline_tes .engineer, 
#site .scontent ul.volby li.astronaut .inline_tes .science {
    height: 17px;
    line-height: 17px;
    padding: 0px 4px;
    font-size: 10px;
    margin: 0px 0px;
}

#site .scontent ul.volby li .ititle{
    position: absolute;
    top: 97px;
    /* left: 50%; */
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    /* white-space: nowrap; */
    left: 4px;
    right: 4px;
    line-height: 12px;
}

#site .scontent ul.volby li.unactive .ititle{
    
    color: gray;
    
}

@media (max-width: 850px) {
    #voicedescriptor {
        display: none;
    }
}

#voicedescriptor{
    z-index: 999000;
    position: absolute;
    bottom: calc(25%);
    /* transform: translateY(-50%); */
    right: 150px;
    width: 50%;
    max-width: 700px;
    /* height: 0px; */
    min-width: 390px;
    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);
    cursor: pointer;
    
}

#voicedescriptor:hover{
    
}




#voicedescriptor .bckg {
    position:absolute;
    height:130px;
    left:0px;
    width: 105px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
   
    filter: 
        drop-shadow(0px 0px 1px rgb(257 131 64 / 30%))         
        drop-shadow(0px 0px 20px rgba(255, 131, 64, 0.1));         
       
}

#voicedescriptor .bckg:before{
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
   
    

    clip-path: var(--clip_voicedescriptor);  
}
#voicedescriptor .bckg .slide {
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    background-position: center;
    background-size: cover;
    /*animation: crt 5000ms linear infinite;*/
    clip-path: var(--clip_voicedescriptor);  
    
}

#voicedescriptor .txt {
    position: absolute;
    left: 130px;
    right: 10px;
    top: 50%;
    text-align: left;
    font-size: 16px;
    z-index: 95;
    transform: translateY(-50%);
    line-height: 24px;
    color: rgb(192,122,63);
}

#voicedescriptor .txt p {
    padding: 5px 0px;;
    margin: 0px;
    transition: 0.2s;
    position: relative;
}


#voicedescriptor .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;
}



#grabnearestbox {
    position: absolute;
    min-width: 550px;
    max-width: calc(100% - 80px);
    height: 550px;
    z-index: 999999998;
    padding: 0px;
    top: unset;
    max-height: calc(100% - 80px);
}

#grabnearestbox: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;
}

#grabnearestbox .actions {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

#grabnearestbox .content {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translateX(-50%) translateY(-50%);
    width: calc(100% - 40px);
    max-height: calc(100% - 100px);
    text-align: center;
}

#grabnearestbox .content > :nth-child(n+17) {
    display: none !important;
}

#grabnearestbox .content .graballitem {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 12px;
}

#grabnearestbox .content .graballitem .qty {
    display: block;
    top: 9px;
    position: absolute;
    color: white;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
    right: 12px;
    text-shadow: var(--shadow_textfull);
}

#grabnearestbox .content .graballitem: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%);
}

#grabnearestbox .content .graballitem:after {
    content: '';
    z-index: -1;
    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;
}

#grabnearestbox .content .graballitem: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%);
}


#languageswicher {
    right: 6px;
    left: unset;
    width: 145px;
    

}

#languageswicher .inside .languages .language {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 13px;
    margin: 5px;
    cursor: pointer;
    clip-path: unset;
}

#languageswicher .inside .languages .language .img {
    border-radius: 3px;
    background-position: center;
   
}

#languageswicher .inside .languages .language.selected .img {
    border-radius: 3px;
    background-position: center;
}



 

#novicefra{
    z-index: 999000;
    position:absolute;
    width:750px;
    height:800px;
}

#novicefra: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;
}

#novicefra .content {
    position: absolute;
    top: calc(50% - 30px);
    right: 30px;
    left: 30px;
    background-image: url(ico/ico_pacifier.png);
    background-repeat: no-repeat;
    background-size: 27px;
    background-position: top center;
    padding-top: 36px;
    transform: translateY(-50%);
    
}

#novicefra .content h3{
        color: white;
    text-align: center;
    padding: 12px 0px;
    /* text-transform: uppercase; */
    font-size: 16px;
    margin: 0px;
    text-transform: uppercase;
    font-size: 12px;
    color: gray;
}

#novicefra .content p{
    color: white;
    text-align: center;
    padding: 6px 0px;
    /* text-transform: uppercase; */
    font-size: 16px;
    margin: 0px;
}

#novicefra .content p.disclaimer{
    color: var(--hud_invalid_text);
    text-align: justify;
    font-size: 13px;
}

#novicefra .actions {
    position: absolute;
    bottom: 50px;
    left: 10px;
    right: 10px;
    height: 40px;
    text-align: center;
    
}


#adminconfirmation {
    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;
}

#adminconfirmation:before{
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #2c0c33;
    clip-path:  var(--clip_dialog_box);
    z-index: -1;
}

#adminconfirmation .description{
    position: absolute;
    top: calc(50% - 20px);
    left: 20px;
    font-size: 16px;
    transform: translateY(-50%);
    right: 20px;
}

#adminconfirmation .actions{
    position:absolute;
    left: 20px;
    right: 20px;
    bottom: 40px;
    text-align: center;
    color: white;
}