:host, :root {
    /* #c3c70f */
    --col_game_yellow_main_bg: var(--ld_col_primary_400, Yellow);
    --col_game_yellow_main_fg: var(--ld_col_primary_400_txt, Black);
    /* #4a4b1d */
    --col_game_yellow_main_bg_hov: var(--ld_col_primary_200, Yellow);
    --col_game_yellow_main_fg_hov: var(--ld_col_primary_200_txt, Black);
}



html, body {
    overflow: hidden;
    background:#222222;
    cursor: default;
    height: 100%;
    width: 100%;
}

a {
    cursor:pointer;
    outline: 0 none; /*remove the dotted outline*/
    text-decoration: none;
}

a:hover, a:active, a:focus,
.btn, .btn:hover, .btn:active/*, .btn:focus*/
{
    outline: 0 none; /*remove the dotted outline*/
    text-decoration: none !important;
}

.visibleDesktop {
    display: block;
}

.visibleMobile {
    display: none;
}

.take_trade_icon {
    margin-right: 0.75em;
}

.ld_hr {
    /* border-top: 1px solid #c3c70f; */
    border-top: 1px solid var(--col_game_yellow_main_bg, Yellow);
}

.burgerMenuIcon {
    float:left;
    width: 3em;
    text-align: center;
    margin-right: 1em;
}

#GUIBigImage {
    width: 100%;
    height: auto;
}

.ld_fonticonTut {
    font-size: 2em !important;
}

.ld_fonticonWeb {
    font-size: 2em !important;
}

.fonticonComment {
    font-size: 2em !important;
}
.btn:focus {
    outline: 1px solid yellow;
    outline-offset: -2px;
}

.clickable {
    cursor: pointer;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
not supported by any browser */
}

input, textarea .contentEditable {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -khtml-user-select: text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

.circle {
    box-shadow: none;
}

.current {
    /* border: 2px solid #c3c70f; */
    border: 2px solid var(--col_game_yellow_main_bg, Yellow);
}

.float_left {
    float: left;
}

#quizGameContainer {
    background-color:#ffffff;

    position: absolute;
    top: 0px; left: 0px;
    border: none;
    width:100%;
    height:100%;

    z-index: 9999;
}

.container-fluid {
    margin-bottom: 24px;
}

.resourceTableCellMiddle {
    padding-left: 0.5em;
}

.resourceTableCellEnd {
    padding-right: 0.5em;
}

.panel-heading {
    border: 0 !important;
}

.panel-heading.clickable {
    margin-bottom: 5px;
}

.panel-heading.clickable.read {
    /* color: #999; */
    /* background-color: #4a4b1d; */
    color: var(--col_game_yellow_main_fg_hov, Black);
    background-color: var(--col_game_yellow_main_bg_hov, DarkYellow);
}

.panel-heading.clickable:hover {
    /* color: #fff; */
    /* background-color: #4a4b1d; */
    color: var(--col_game_yellow_main_fg_hov, Black);
    background-color: var(--col_game_yellow_main_bg_hov, DarkYellow);
}

.panel-heading:not(.collapsed) > .glyphicon-collapse:before {
    content: "\e160";
}
.panel-heading.collapsed > .glyphicon-collapse:before {
    content: "\e159";
}

.panel-heading:not(.collapsed) > .fa-caret-square-o-updown:before {
    content: "\f151";
}
.panel-heading.collapsed > .fa-caret-square-o-updown:before {
    content: "\f150";
}

#topGUI {
    pointer-events: auto;
}

/* ------ Player Avatar Dialog ------- */
.avatarPortraitCell {
    width: 25%;
    margin-right: 3%;
    margin-left: 2%;
}

.avatarAbilitysCell {
    width: 68%
}

.avatarProgress {
    margin-bottom: 1%;
}

.player_name {
    margin-left: 10px;
    margin-top: 0px;
}

.quizControllPadding {
    padding: 10px 10px;
}

.quizControlBlocker {
    height: 20px;
}

#GUIQuizAwardTemplate row{
    margin: 0px;
}

/* ------ End Player Avatar Dialog ------- */


/* ------ Statistics ------ */

.statistics_field {
    width: 100%;
    height: 480px;
}
/* ------ end Statistics ------ */







.float_left {
    float: left;
}


.shadow {
    -webkit-box-shadow: 0px 0px 5px #000;
    -moz-box-shadow: 0px 0px 5px #000;
    box-shadow: 0px 0px 5px #000;
}
.shadowOver {
    -webkit-box-shadow: 0px 0px 15px #00ccff;
    -moz-box-shadow: 0px 0px 15px #00ccff;
    box-shadow: 0px 0px 15px #00ccff;
}
#gameContainer {
    position: absolute;
    width:	100%;
    top:	0px;
    bottom:	0px;
    transition: 0.25s ease-in-out width;
}
#gameContainer.with_chat {
    width:	calc( 100% - 280px );
    transition: none;
}
#gameContainer.with_chat #chatMenu {
    display: block;
}
#worldScene {
    display: block;
    /*width:100%;*/
    height:100%;
    background: #000;
    /*position: relative;*/
    margin: 0px;
    /*cursor:url(../img/game/gui/grab.png),url(../img/game/gui/grab.cur),auto;*/
}
#GUIFPS {
    text-align: left;
    font-size: 10px;
    background: #000;
    color: #fff;
    padding: 4px 6px;
    min-width: 60px;
    min-height: 20px;
    opacity: 0.5;
    position: absolute;
    top:0px;
    left:0px;
    cursor:default;
    z-index: 1000;
}
#portraitContainer{
    display:none;
    background: #316BB2;
    color: #fff;
    width:100%;
    height:100%;
    text-align: center;
    padding: 0% 0px 0px 0px;
}
#portraitTurn{
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
}
.centerDisplay{
    position: absolute;
    height: 400px;
    width: 800px;
    margin: -200px 0 0 -400px;
    top: 50%;
    left: 50%;
}

.rescourceTable {
    width:100%;
    border-radius:20em;
    margin-bottom:2px;
    background-color: var(--ld_col_black_400, #131313);
    pointer-events: all;
}

#gui{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
    pointer-events:none;
    background:none !important;
}
.guiDisable{
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    pointer-events:none !important;
}
#gui-main{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: block;
    pointer-events:none;
    background:none !important;
}

#chatMenu{
    display: none;
    position:absolute;
    right:-280px;
    top:0px;
    width:280px;
    /*height:100px;*/
    height:100%;
    /*background-color: inherit;*/
    /*background: url(../img/game/gui/bgWhite80.png);*/
    pointer-events:auto;
    background-color: rgba( 0, 0, 0, 1.5 ); /*#222222;*/
}

.potentialProduction {
    background-color: #555;
    padding-top: 0.5em;
    font-size: 10px;
}

.table-spaced {
    border-collapse: separate;
    border-spacing: 8px 1px;
    font-size: 10px;
}


.table_activities > tbody > tr:nth-child(2n+1) > td.past{
    background-color: #363636;
    color: #595959;
}

.table_activities > tbody > tr:nth-of-type(even) > td.past {
    background-color: #363636; /*#323232*/
    color: #595959; /*#6f6f6f*/
}

.table_activities > tbody > tr> td.past .btn-scheduler {
    opacity: 0.25;
}

td:hover .btn-scheduler:enabled, .btn-scheduler:hover:enabled {
    /* color: #fff !important; */
    color: var(--col_game_yellow_main_fg_hov, Black) !important;
    background: none;
    /* background-color: #4a4b1d; */
    background-color: var(--col_game_yellow_main_bg_hov);
    /* border-color: #c3c70f; */
    border-color: var(--col_game_yellow_main_bg, Yellow);
    border: 2px;
    /* color: black !important; */
    /* background-color: white !important; */
}

/*
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: #414141;
}*/

.table_activities > tbody > tr > th {
    background-color: #414141;
    font-weight: 100;
}

.table_activities > tbody > tr:nth-child(2n+1) > td, table_activities > tbody > tr:nth-child(2n+1) > th {
    background-color: #414141;
}

.table_activities > tbody > tr:nth-of-type(even) > td {
    background-color: #414141;
}

.potentialProduction {
    background-color: #555;
    padding-top: 0.5em;
    font-size: 10px;
}


.scheduler_table_header {
    text-align: center;
    /*background: #414141;*/
    font-weight: 100;
}

.scheduler_actions_area {
    text-align: center;
    /*background: #414141;*/
    margin-bottom: 13px;
    margin-left: 15px;
    margin-right: 15px;
    /*padding-bottom: 10px;*/
}






::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 12px;
}
::-webkit-scrollbar:horizontal {
    height: 12px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 1px solid #888;
    /*background-color: rgba(0, 0, 0, .5);*/
    /* background-color: #5b175a; */
    background-color: var(--ld_col_secondary_400, Purple);
}
::-webkit-scrollbar-track {
    background-color: rgba(34, 34, 34, 0.66);
    border-radius: 8px;
}

::-webkit-scrollbar-corner {background-color: #222;}

.listItem{
    width: 212px;
    height: 30px;
    line-height: 30px;
    padding: 0px 0px 0px 45px;
    cursor: pointer;
}
.listItem.small{
    width: 202px;
    height: 30px;
    line-height: 30px;
    padding: 0px 0px 0px 55px;
    font-size:12px;
    cursor: pointer;
}
.listItem.disabled{
    pointer-events:none;
    color:#999999;
}
.disabled_ld{
    pointer-events:none;
    opacity: .35;
    filter:Alpha(Opacity=35);
    background-image: none;
}
.listItem.notAvailable{
    color:#aaa;
}
.listItem.small.dotSmall{
    background-image: url('../img/game/gui/ico_dot_s.png');
    background-position: 32px 3px;
    background-repeat: no-repeat;
}
#btIndexFood{
    background-image: url('../img/game/gui/icons/icon_food.png');
    background-position: 22px 3px;
    background-repeat: no-repeat;
}
#btIndexInfo{
    background-image: url('../img/game/gui/ico_info.png');
    background-position: 22px 3px;
    background-repeat: no-repeat;
}
#btIndexHelp{
    background-image: url('../img/game/gui/ico_help.png');
    background-position: 22px 3px;
    background-repeat: no-repeat;
}
#btIndexAnims{
    background-image: url('../img/game/gui/ico_settings.png');
    background-position: 22px 3px;
    background-repeat: no-repeat;
}
.arrowSmallLeft{
    background: url('../img/game/gui/ico_arr_s_l.png') no-repeat 22px 3px;
}
.arrowSmallBottom{
    background: url('../img/game/gui/ico_arr_s_b.png') no-repeat 22px 3px;
}
.dotSmall{
    background: url('../img/game/gui/ico_dot_s.png') no-repeat 22px 3px;
}

/* profile */
#disProfile{
    display:none;
    /*display:block;*/
    position:absolute;
    right:10px;
    top:20px;
    width:319px;
    height:117px;
    background: url(../img/game/gui/guitop_bg.png) no-repeat;
    pointer-events:auto;
}
#barScienceBack{
    position: absolute;
    left: 15px;
    top: 26px;
    width: 160px;
    height: 12px;
    background: #054364;
    pointer-events:auto;
}
#barScience{
    position: absolute;
    left: 18px;
    top: 27px;
    width: 126px;
    height: 10px;
    background: #01BABC;
}
#barScienceImg{
    position: absolute;
    left: 5px;
    top: 21px;
    width: 22px;
    height: 22px;
    background: url(../img/game/gui/ico_top_science.png) no-repeat;
}
#barProductionBack{
    position: absolute;
    left: 15px;
    top: 49px;
    width: 160px;
    height: 12px;
    background: #054364;
}
#barProduction{
    position: absolute;
    left: 18px;
    top: 50px;
    width: 126px;
    height: 10px;
    background: #C60D1F;
}
#barProductionImg{
    position: absolute;
    left: 5px;
    top: 44px;
    width: 22px;
    height: 22px;
    background: url(../img/game/gui/ico_top_production.png) no-repeat;
}
#barSustainBack{
    position: absolute;
    left: 15px;
    top: 72px;
    width: 160px;
    height: 12px;
    background: #054364;
}
#barSustain{
    position: absolute;
    left: 18px;
    top: 73px;
    width: 126px;
    height: 10px;
    background: #008455;
}
#barSustainImg{
    position: absolute;
    left: 5px;
    top: 67px;
    width: 22px;
    height: 22px;
    background: url(../img/game/gui/ico_top_sustain.png) no-repeat;
}
#barStaffBack{
    position: absolute;
    left: 15px;
    top: 95px;
    width: 160px;
    height: 12px;
    background: #054364;
}
#barStaff{
    position: absolute;
    left: 18px;
    top: 96px;
    width: 126px;
    height: 10px;
    background: #FC9200;
}
#barStaffImg{
    position: absolute;
    left: 5px;
    top: 90px;
    width: 22px;
    height: 22px;
    background: url(../img/game/gui/ico_top_staff.png) no-repeat;
}
.barRounded{
    /*-webkit-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;*/
}
#textUsername{
    color:#fff;
    text-align: left;
    font-size: 14px;
    font-weight:bold;
    line-height: 16px;
    position: absolute;
    left: 11px;
    top: 3px;
    width: 200px;
    height: 20px;
}
#textMoney{
    color:#000;
    text-align: center;
    font-size: 14px;
    font-weight:bold;
    line-height: 16px;
    position: absolute;
    left: 201px;
    top: 98px;
    width: 100px;
    height: 20px;
}

/* ? */
#conNavi{
    position:absolute;
    left:53%;
    bottom:20px;
    width:1px;
    height:48px;
}

.title{
    position: relative;
    margin:0 auto;
    width: 300px;
    text-align: center;
    font-weight: bold;
}
.titleOff{
    /*display:none;*/
}
#title2{
    position: relative;
    padding: 0 50px;
    width: 1000px;
    text-align: left;
}
.corners{
    /*-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;*/
}
.cornersTop{
    /*-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;*/
}
.centerContainer{
    width:100%;
    text-align:center;
}
.bottomAlign{
    position:absolute;
    bottom:20px;
}
.clear{
    clear: both;
}
.bgFillImg{
    background:#bbb;
}

/*TODO:Jan Bootstrap Panels*/
.panel{
    margin:5px;
}

/* image dump */
#imageDump{
    display:none;
}

.triangle-right {
    position: relative;
    padding: 1em 2em;
    display: block;
    float: left;
    background-color: #ff9900;
}
.triangle-right:after {
    content:"\00a0";
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50%;
    right: 0%;
    margin-top: -14px;
    margin-right: -28px;
    border-style: solid;
    border-width: 14px 0 14px 28px;
    border-color: transparent transparent transparent #ff9900;
}


.btMenu {
    background-color: rgb(34, 34, 34);
    width:	0.8em;
    font-size: 3em;

    position: relative;
    top:	10px;
    left:	-12px;
}

#GUIBlockedGameStop table thead a:hover{
    text-decoration:none;
    color:#999;
}

#GUIBlockedGameStop table thead a:hover span.yellow-text{
    text-shadow: 0px 1px 6px #c3c70f;
}

#GUIBlockedGameStop table thead a span[data-localization]{
    text-decoration:underline;
}

.fa-sort{
    color:#666;
}

.shadow-below {
    box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.5) inset;
    z-index: 1;
    position: relative;
    height: 20px;
    margin-bottom: -20px;
    transition: 0.5s box-shadow;
}

.shadow-below.nope {
    box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.0) inset;
}

.score {
    display: inline-block;
    font-weight: bold;
    padding: 0px 10px;
    margin-top: 0px;
    margin-right: 25px;
    /*margin-bottom: 10px;*/
    /*background:#c3c70f;*/
    /*color: #561b59;*/
    color: white;

}

.ld_no_padding {
    padding: 0;
}

.bkg_modal_grey {
    background-color: #222222;
}
.ld_avatar_row {
    display: flex;
    flex-direction: row;
}

.ld_margin_10px {
    margin: 10px;
}

#btn_avatarCustomizeReady{
    float:right;
}

.ld_col_35 {
    width: 35%;

}

.ld_col_40 {
    width: 40%;
}

.ld_col_50 {
    width: 50%;
}

.ld_col_60 {
    width: 60%;
}

.ld_col_100 {
    width: 100%;
}


.score.text-muted {
    /*color: #fff;*/
    /*background-color: #aaa;*/
    color: #aaa;
}

.ld_no_padding {
    padding: 0 !important;
}

.ld_no_margin {
    margin: 0 !important;
}

.ld_tab_color {
    Background-color: #2e2e2e !important;
}

.ld_tab_row {
    margin-top: 15px;
    padding: 10px 0 10px 0;
}

.ld_minigame_button_div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ld_nav-tabs{
    border: none;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.ld_tab_pane {
    padding: 10px;
}

.scheduler_table_area {
    max-height: 70vh;
    overflow: scroll;
}

.ld_nav-tabs > li.active > a,
.ld_nav-tabs > li.active > a:hover,
.ld_nav-tabs > li.active > a:focus {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
    background-color: #2e2e2e;
    border: 1px solid #1c1e22;
    border-bottom-color: transparent;
    cursor: default;
}

label:hover input[type=radio] + span,
label:hover input[type=checkbox] + span {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
}

.ld_nav_tabs_li {
    width: 50%;
    text-align: center;
}

.ld_nav-tabs > li.active {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
}

.ld_avatar_modal {
    max-height: 430px;
    height: 100%; /* height: 430px;*/
    overflow: scroll;
    /*overflow-y: hidden;*/
    overflow-x: hidden;
}

.ld_avatar_modaltab {
    /*padding: 10px 10px;*/
}

.ld_inventory_table {
    width: 100%;
    padding-top: 10px;
}

.ld_inventory_row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ld_inventory_cell {
    width: 100px; /*145*/
    height: 90px; /*145*/
    border: 2px dashed #414141;
    margin: 10px;
}

.ld_inventory_cell img {
    width: 100%;
    height: auto;
}



/* Buy-Button */
.ld_inventory_buy_button {
    color: black;
    background-color: var(--col_game_yellow_main_bg, Yellow);
    width: 100%;
    border-width: 0px;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    padding: 6px 4px 6px 4px;
}

.ld_inventory_buy_button:disabled {
    background-color: grey;
}

.ld_inventory_buy_button:hover:not([disabled]){
    background-color: var(--col_game_yellow_main_bg_hov, Yellow);
}

/* 3 div's (kaufen: - 100 - icon) */
.ld_inventory_buy_button div {
    display: inline-block;
}

/* icon */
.ld_buy_circle {
    border-radius:	50%;
    display:		inline-block;
    font-size:		1.0em;
    line-height:	1.7em;
    height:			1.5em;
    width:			1.5em;
    text-align:		center;
    vertical-align:	middle;
    text-shadow:	0.66px 0.66px 2.66px rgba(0, 0, 0, 1);
    box-shadow:		0.66px 0.66px 2.66px rgba(0, 0, 0, 0.33);
}



ul.activity_toggle {
    display: inline-block;
    margin: auto;
}

ul.activity_toggle li {
    display: inline-block;
    margin: 0px 5px;
}

ul.activity_toggle li a span.tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

ul.activity_toggle li a:hover span.tooltip {
    visibility: visible;
}

ul.activity_toggle li i.selected {
    border: 2px solid var(--col_game_yellow_main_bg, Yellow);
}

ul.activity_toggle li i {
    border: 2px solid transparent;
}

/* custom tutorial window styling */
.tutorialWindow {
    padding: 10px 25px;
    position: fixed;
    z-index: 9999;
    width: 60%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: rgb(34, 34, 34);
    border-radius: 8px;
    box-shadow: 5px 5px 5px 5px black;

}

.tutorialWindowContent {
    overflow-y: auto;
    height: 85%;
}

.tutorialWindowFooter {
    position: fixed;
    bottom: 0;
    margin-bottom: 10px;
}

.tutorialWindow .box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.tutorialCloseBtn {
    position: relative;
    right: -15px;
}

/* (LM): Prevent images from flowing out of the help window */
#GUIHelpText img {
    max-width: 100%;
}

/* (LM): Scroll the body content inside the modal window */
#GUIHelpText .modal-dialog {
    overflow-y: initial !important;
}

#GUIHelpText .modal-body {
    height: 80vh;
    overflow-y: auto;
}

.btn_help {
    font-size: 1em !important;
}

.box .boxheader {
    flex: 1 0 auto;
    /* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}

.boxcontent {
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 100%;
}

.box .boxfooter {
    flex: 0 1 40px;
}

.detail .mainResourceChange {
    float: right;
}

.compact .mainResourceChange {
    display: none;
}

#GUICustomizeAvatarCanvas {
    max-height: 285px;
}


/*	dark  yellow #4a4b1d;
ligth yellow #c3c70f;
*/
.yellow-text {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
}
a.yellow-text:focus {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
}
.blue-text {
    color: #3e716c;
}

.icon-lg {
    font-size:		1.666666em;
    vertical-align:	-20%;
}

.fa-lg {
    font-size: 1.3em;
    /*vertical-align: -20%;*/
}



.btn:disabled > .badge {
    display: none;
}

span[data-token="vote_mode"],
span[data-token="building_type"] {
    font-style: italic;
}
/*
label:hover input[type=radio] + span {
color: #c3c70f;
}
*/
:disabled	label				input[type=radio]:not(:checked) + span > i.icon-voting,
label:not(:hover)	input[type=radio]:not(:checked) + span > i.icon-voting,
:enabled	label:hover			input[type=radio]				+ span > i.icon-voting-empty,
label				input[type=radio]:checked		+ span > i.icon-voting-empty {
    display: none;
}
input[type=radio]:disabled + span {
    color: GrayText !important;
}
input:disabled,
input:disabled + span {
    cursor: not-allowed;
}

/* TODO */
/*input[type=checkbox]:checked {*/
/*	color: #c3c70f !important;*/
/*	background-color: #c3c70f !important;*/
/*}*/


.producty-and-safety td span.questionmark,
.producty-and-safety td.unelected > div,
.producty-and-safety td.unlocked > div,
.producty-and-safety td.locked > div {
    display: none;
}

.producty-and-safety td.unelected span.questionmark,
.producty-and-safety td.unlocked span.questionmark,
.producty-and-safety td.locked span.questionmark {
    color: #000;
    font-size: 6vw;
    text-shadow: none;

    display: block;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.producty-and-safety td.clickable.elected:hover {
    cursor:pointer;
    /*background-color: #4a4b1d;*/
    opacity:0.75;
}



#comprogress td i.icon-unelected,
#comprogress td span.questionmark,
#comprogress td.locked div.ss {
    display: none;
}
#comprogress td.unelected i.icon-unelected {
    color: #111;
    font-size: calc(6vw + 10px);
    text-shadow: none;

    display: block;
    position: absolute;
    top: calc(-3.5vw + 50%);
    text-align: center;
    width: 100%;
    margin-left: -8px;
}
#comprogress td.locked span.questionmark {
    color: #000;
    font-size: 6vw;
    text-shadow: none;

    display: block;
    font-weight: bold;
    text-align: center;
    width: 100%;
}
#comprogress tr.data-row td {
    position:relative;
}
#comprogress td.locked {
    background-color: rgba( 255, 255, 255, 0.08 );
}
#comprogress td.unlocked {
    background-color: #17353d;
}
#comprogress td.elected,
#comprogress td.unelected {
    background-color: #323321;
}

#comprogress td.unlocked img {
    opacity: 0.65;
}

#comprogress tr.data-row td.unlocked:hover {
    cursor:pointer;
    background-color: #25464f;
}
#comprogress tr.data-row td.elected:hover,
#comprogress tr.data-row td.unelected:hover {
    cursor:pointer;
    /* background-color: #4a4b1d; */
    background-color: var(--col_game_yellow_main_bg_hov, DarkYellow);
}
#comprogress tr.foot-row > td {
    padding: 0;
}
#comprogress tr.foot-row > td > table > tbody > tr > td:not(:first-child) {
    border-left: 5px solid #222;
    padding: 8px 0;
    text-align: center;
}

td.unlocked i.icon-voting,
td.elected i.icon-voting-empty,
td.locked i.icon-voting-empty {
    display: none;
}
td.locked i.icon-voting {
    visibility: hidden;
}

span.warning {
    color: #f00 !important;
}


.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.disabled-dark-grey {
    color: #858585;
}

.enabled-yellow {
    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
}

.vs-circle-block {
    text-align: center;
    vertical-align: middle;
}
.vs-circle {
    color: #000;
    /* background-color: #c3c70f; */
    background-color: var(--col_game_yellow_main_bg);
    text-shadow: none;
    font-size: 41px;
    font-weight: normal;
    border-radius: 74px;
    height: 74px;
    width: 74px;
    display: table;
    margin: 20px auto;
}
.vs-circle p {
    vertical-align: middle;
    display: table-cell;
}

.result-circle-block {
    text-align: center;
    vertical-align: middle;
}
.result-circle {
    color: #fff;
    background-color: #828282;
    text-shadow: none;
    font-size: 18px;
    font-weight: normal;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    display: table;
    margin: 0 auto;
}
.result-circle p {
    vertical-align: middle;
    display: table-cell;
}

.result-circle-good {
    color: #000;
    background-color: #2f8730;
}

.result-circle-bad {
    color: #000;
    background-color: #f13a00;
}

.quiz-win-panel
{
    display: block;
    position: relative;
    margin-top: -40px;
    left: 10px;
    width: 114px;
    height: 34px;

    /* color: #c3c70f; */
    color: var(--col_game_yellow_main_bg, Yellow);
    font-size: 20px;
    font-weight: bold;
    background: transparent url('../img/game/gui/quiz_winner.png') no-repeat;
}

.bold {
    font-weight:bold;
}

table.warning span.circle {
    border: 2px solid red;
}
table.warning span.circle i {
    position: relative;
    top:  -2px;
    left: -2px;
}
table.warning span[data-resource] {
    color: red;
    font-weight: bold;
}

.bg-white {
    background-color: #fff !important;
}

.btnFocus {
    font-size: 1.25em;
    background-color: rgb(34, 34, 34);
    padding: 21px 5px 7px 5px;
    width: 2em;
    z-index: -1;
    height: auto;
}

.rel_pos_top_2 {
    position: relative;
    top: 2px;
}

/* Desktop */
@media (max-width: 768px) {
    #GUIBlockedGameStop [data-localization="WEEKS"] {
        display: none;
    }
}


/* overall only screen devices*/
@media only screen {
    .ld_modal_mobile {
        max-width: 85vw;
        margin: 0 auto;
    }
}



/***********************************************************************************************************************************************/
/* for mobile-screen */
@media only screen and (max-height: 600px) {

}

/* for portait-viewport */
/*@media all and (orientation:portrait) {*/
@media (max-width: 559px) {
    #gameContainer{
        display:none;
    }
    #portraitContainer{
        display:block;
    }
}


@media (max-width: 1191px) {
    #gameContainer.with_chat .collapsed #burger_headline {
        display: none;
    }
}

/*sm+*/ @media (min-width: 768px) {
    .sm-top-margin {
        margin-top:		40px;
        margin-bottom:	10px;
    }

    .game-stopped-text-layer {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
        margin-top: -70px;
        max-width: 830px;
        height: 70px;
        padding:5px 15px;
        position: relative;
    }
}
/*xs-*/ @media (max-width: 767px) {
    .sm-top-margin {
        margin-top:		10px;
        margin-bottom:	20px;
    }

    .game-stopped-text-layer {
        margin-top:15px;
    }

    #GUIBlockedGameStop table thead,
    #GUIBlockedGameStop tbody tr td:first-child
    {
        font-size: 10px;
    }
}


/***********************************************************************************************************************************************/
/* ------ mobile landscape devices -------*/
@media only screen
/*and (min-device-width: 320px) */
/*and (max-device-width: 1200px)*/
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{
    body {
        font-size: 12px;
    }

    .visibleDesktop {
        display: none;
    }

    .visibleMobile {
        display: block;
    }

    .btn {
        /*font-size: 10px;*/
        padding: 5px 8px;
    }

    #GUIPlayer {
        overflow-y: hidden;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 5px;
    }
    /*
#btn_avatarCustomizeReady{
width: 50%;
float: none;
}*/

    #btChat{
        position:absolute;
        right:0;
        /*top:0;*/
        border-radius: 0.5em 0 0 0.5em;
        background-color: #222222;
        /*background-color: red;*/
        pointer-events:auto;
        cursor: pointer;
        min-width: 42px;
        transition: 0.25s ease-in-out right, left, top, bottom;
    }

    /* #topGUI { */
    /*     border-radius: 0 0 0 0.5em; */
    /*     right: 0px; */
    /*     position: absolute; */
    /*     background-color: #222222; */
    /*     top: 0px; */
    /*     transition: 0.25s ease-in-out all; */
    /*     /*display: none;*/ */
    /* } */

    .windowCornerIcon {
        font-size: 1em;
    }

    .modalNotifications {
        width: 85vw !important;
    }

    /* ------ Statistics ------ */

    .statistics_field {
        width: 100%;
        height: 430px;
    }
    /* ------ end Statistics ------ */


    /* ------ Player Avatar ------ */
    .col-sm-5 {
        width: 42%;
        float: left;
    }


    .col-sm-7 {
        width: 58%;
        float: left;
    }

    .col-sm-6 {
        width: 45%;
        float: left;
        margin: 0 0 0 10px;
    }

    /*
.col-sm-11 {
width: 91%;
}*/

    .col-sm-12 {
        width: 100%;
        margin: 0 10px 0 10px;
    }

    .visible-xs {
        display: none;
    }

    /*
.portriatField {
height: 290px;
}
*/

    /*
#GUIPlayerAvatarCanvas {
height: 50vh;
}*/

    #GUIStartConfigurationCanvas {
        max-height:175px;
    }
    /*
#GUICustomizeAvatarCanvas {
height: 228px;
}
*/

    .btMenu {
        font-size: 1.8em;

        position: absolute;
        top:	50%;
        left:	auto;
        right:	0px;

        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .avatarPortraitCell {
        width: 35%;

    }

    .avatarAbilitysCell {
        width: 58%;
    }



    .quizControllPadding {
        padding: 5px 8px;
    }

    .ld_inventory_cell {
        width: 100px;
        height: 90px;
    }

    .ld_avatar_modal {
        height: 325px;
    }

    .ld_con_sheduler_header_regenration
    {
        position: relative;
        top: 4px;
    }

    /* ------ End Player Avatar ------ */

    .scheduler_table_area {
        max-height: 50vh;

    }


    .container-fluid {
        margin-bottom: 24px;
    }

    .btMenu {
        font-size: 1.8em;

        position: absolute;
        top:	50%;
        left:	auto;
        right:	0px;

        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .btnFocus {
        font-size: 1.25em;
        background-color: rgb(34, 34, 34);
        padding: 21px 5px 7px 5px;
        width: 2em;
        z-index: -1;
        height: auto;
    }

    .btn-scheduler {
        min-width: 35px;
        min-height: 35px;
        margin: -5px auto -5px -5px;
        border: none;
    }

    .collapsed #burger_headline {
        display: none;
    }

    #GUISidemenu {
        display: none;
    }

    .circle {
        height: 1.5em;
        width: 1.5em;
        font-size: 1.5em;
    }

    ul.activity_toggle li {
        display: inline-block;
        margin: 0px 1px;
    }

    .burgerIconMobile {
        font-size: 25px !important;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        margin: 0px auto;
    }

    .modal-header {
        padding: 5px 15px;
    }

    /* .rescourceTable { */
    /*     width:55%; */
    /* } */

    .nav > li > a {
        padding: 5px 7px;
    }


    .table-blind > thead > tr > th, .table-blind > tbody > tr > th, .table-blind > tfoot > tr > th, .table-blind > thead > tr > td, .table-blind > tbody > tr > td, .table-blind > tfoot > tr > td {
        padding: 1px;
    }

    .tutorialWindow {
        width: 95%;
        height: 75%;
        top: 50%;
        left: 50%;
    }

    .btn_help {
        font-size: 1em !important;
        padding: 0px 3px;
    }

    .ld_fonticonTut {
        font-size: 1.5em !important;
    }

    .ld_fonticonWeb {
        font-size: 1.5em !important;

    }

    .mobilemodal {
        /*
height: 100vh;
width: 100vw;
*/
    }

    .mobileHight100P {
        /*
height: 100%;
*/
    }

    .mobileHidden {
        /*
display: none;
*/
    }

    .bigImageModalBody {
        /*
height: 85%;
*/
    }

    #GUIBigImage {
        /*
width: auto;
height: 65vh;
*/
    }

    .burgerTextMobile {
        font-size: 16px !important;
    }
}

/***********************************************************************************************************************************************/
/* ------- Ipad 5 ------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{

    .ld_avatar_modal {
        height: 325px;
    }

}

/***********************************************************************************************************************************************/
/* ------- Iphone 5 ------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

    #GUIPlayer {
        overflow-y:auto;
    }

    .resName
    {
        width:25%;
    }

    .rescourceTable {
        width:55%;

    }

    body {
        font-size: 10px;
    }

    .btn {
        padding: 4px 6px;
    }

    .avatarPortraitCell {
        width: 30%;
    }

    .quizControlBlocker {
        height: 10px;
    }

    /* ------ Statistics ------ */

    .statistics_field {
        width: 100%;
        height: 480px;
    }
    /* ------ end Statistics ------ */


    .btMenu {
        font-size: 1.8em;
        position: absolute;
        top: 50%;
        left: auto;
        right: 2px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

}
/*************************************************************************************************************************/
/* IphoneX Landscape */
@media only screen
and (min-device-width: 375px) /*X=375*/
and (max-device-height: 812px) /*X=812*/
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{
    body {
        font-size: 12px;
    }

    .visibleDesktop {
        display: none;
    }

    .visibleMobile {
        display: block;
    }

    .burgerTextMobile {
        font-size: 16px !important;
    }

    .btn {
        font-size: 15px;
        padding: 5px 8px;
    }

    #GUIPlayer {
        overflow-y: hidden;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 5px;
    }
    /*
#btn_avatarCustomizeReady{
width: 50%;
float: none;
}*/

    #btChat{
        position:absolute;
        right:0;
        /*top:0;*/
        border-radius: 0.5em 0 0 0.5em;
        background-color: #222222;
        /*background-color: red;*/
        pointer-events:auto;
        cursor: pointer;
        min-width: 42px;
        transition: 0.25s ease-in-out right, left, top, bottom;
    }


    #topGUI {
        border-radius: 0 0 0 0.5em;
        right: 0px;
        position: absolute;
        background-color: #222222;
        top: 0px;
        transition: 0.25s ease-in-out all;
        /*display: none;*/
    }

    .windowCornerIcon {
        font-size: 1.25em !important;
    }

    .modalNotifications {
        width: 75vw !important;
    }

    /* ------ Statistics ------ */

    .statistics_field {
        width: 100%;
        height: 430px;
    }
    /* ------ end Statistics ------ */


    /* ------ Player Avatar ------ */
    .col-sm-5 {
        width: 42%;
        float: left;
    }


    .col-sm-7 {
        width: 58%;
        float: left;
    }

    .col-sm-6 {
        width: 45%;
        float: left;
        margin: 0 0 0 10px;
    }

    /*
.col-sm-11 {
width: 91%;
}*/

    .col-sm-12 {
        width: 100%;
        margin: 0 10px 0 10px;
    }

    .visible-xs {
        display: none;
    }

    /*
.portriatField {
height: 290px;
}
*/

    /*
#GUIPlayerAvatarCanvas {
height: 50vh;
}*/

    #GUIStartConfigurationCanvas {
        max-height:175px;
    }
    /*
#GUICustomizeAvatarCanvas {
height: 228px;
}
*/

    .btMenu {
        font-size: 1.8em;

        position: absolute;
        top:	50%;
        left:	auto;
        right:	0px;

        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .avatarPortraitCell {
        width: 35%;

    }

    .avatarAbilitysCell {
        width: 58%;
    }



    .quizControllPadding {
        padding: 5px 8px;

    }

    .ld_inventory_cell {
        width: 100px;
        height: 90px;
    }

    .ld_avatar_modal {
        height: 80vh;
    }


    /* ------ End Player Avatar ------ */

    .scheduler_table_area {
        max-height: 50vh;

    }

    .container-fluid {
        margin-bottom: 24px;
    }

    .btMenu {
        font-size: 1.8em;

        position: absolute;
        top:	50%;
        left:	auto;
        right:	0px;

        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .btnFocus {
        font-size: 1.25em;
        background-color: rgb(34, 34, 34);
        padding: 21px 5px 7px 5px;
        width: 2em;
        z-index: -1;
        height: auto;
    }

    .btn-scheduler {
        min-width: 35px;
        min-height: 35px;
        margin: -5px auto -5px -5px;
        border: none;
    }

    #topGUIMobile {
        border-radius: 0 0 0 1em;
        right: 0px;
        position: absolute;

        bottom: 0px;
        transition: 0.25s ease-in-out all;

        text-align: right;
        display: block;
        pointer-events: auto;
        width: 100%;
    }

    .collapsed #burger_headline {
        display: none;
    }

    #GUISidemenu {
        display: none;
    }

    .circle {
        height: 1.5em;
        width: 1.5em;
        font-size: 1.5em;
    }

    ul.activity_toggle li {
        display: inline-block;
        margin: 0px 1px;
    }

    .burgerIconMobile {
        font-size: 25px !important;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        margin: 0px auto;
    }

    .modal-header {
        padding: 5px 15px;
    }

    .rescourceTable {
        width:55%;

    }

    .nav > li > a {
        padding: 5px 7px;
    }


    .table-blind > thead > tr > th, .table-blind > tbody > tr > th, .table-blind > tfoot > tr > th, .table-blind > thead > tr > td, .table-blind > tbody > tr > td, .table-blind > tfoot > tr > td {
        padding: 1px;
    }

    .tutorialWindow {
        width: 95%;
        height: 75%;
        top: 50%;
        left: 50%;
    }

    .btn_help {
        font-size: 1.25em !important;
        padding: 0px 3px;
    }

    .ld_fonticonTut {
        font-size: 2em !important;
    }

    .ld_fonticonWeb {
        font-size: 2em !important;

    }
}

/*************************************************************************************************************************/
/* IphoneXR Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-height: 896px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{
    .ld_col_40 {
        width: 29%;
    }

    .avatarAbilitysCell {
        width: 66%;
    }
}

/*************************************************************************************************************************/
/* Iphone12 Landscape */
@media only screen
and (min-device-width: 390px)
and (max-device-height: 844px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{
    .ld_col_40 {
        width: 32%;
    }

}

/*************************************************************************************************************************/
/* IphoneSE Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 375px)
and (min-device-height: 667px)
and (max-device-height: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{
    .ld_col_40 {
        width: 46%;
    }

}

/*************************************************************************************************************************/
/* IphoneSE Landscape */
@media only screen
and (min-device-width: 390px)
and (max-device-height: 844px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{
    .ld_col_40 {
        width: 32%;
    }

}

/*@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#indexWrapper {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
}*/


#GUIMarketplaceHist tbody tr {
    height: 48px;
}

#GUIMarketplaceHist thead td,
#GUIMarketplaceCurrent thead td,
#GUIMarketplaceTable thead td {
    text-align: center;
}

.player_avatar_canvas_container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.player_avatar_canvas_container canvas {
    max-height: 285px;
}




.jhs-icon-scheduler-menu {
    font-family: 'jhs' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* display: inline-block; */
    font-size: inherit;
    text-rendering: auto;
    width: 1.28571429em;
    font-size: 20px;
    padding: 5px 10px;
}

.ld_jhs-icon-scheduler-menu {
    /*font-family: 'jhs' !important;*/
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* display: inline-block; */
    text-rendering: auto;
    width: 1.28571429em;
	/*font-size: inherit;*/
    /*font-size: 20px;*/
    font-size: 20px;
    padding: 5px 10px;
}