/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
#inspector-host,
#scene-explorer-host{
z-index: 999999999;
}
@font-face {
font-family: 'dogica_bold';
src: url('../font/dogicapixelbold-webfont.eot');
src: url('../font/dogicapixelbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/dogicapixelbold-webfont.woff2') format('woff2'),
url('../font/dogicapixelbold-webfont.woff') format('woff'),
url('../font/dogicapixelbold-webfont.ttf') format('truetype'),
url('../font/dogicapixelbold-webfont.svg#dogica_pixelbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dogica';
src: url('../font/dogicapixel-webfont.eot');
src: url('../font/dogicapixel-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/dogicapixel-webfont.woff2') format('woff2'),
url('../font/dogicapixel-webfont.woff') format('woff'),
url('../font/dogicapixel-webfont.ttf') format('truetype'),
url('../font/dogicapixel-webfont.svg#dogica_pixelregular') format('svg');
font-weight: normal;
font-style: normal;
}
#tempbox{
position: fixed;
left: 0;
bottom: 280px;
z-index: 9900;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
}
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'dogica';
font-size: 14px;
}
b, strong{
font-weight: normal;
font-family: 'dogica_bold';
font-size: inherit;
}
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'dogica';
font-size: 14px;
color: #2b2b2b;
}
#renderCanvas {
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
-ms-touch-action: none;
touch-action: none;
z-index: 1;
}
button{
font-family: 'dogica_bold';
padding: 10px 20px 7px 20px;
-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
border: 2px solid #fff;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
-webkit-transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
-o-transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
color: inherit;
}
button:HOVER{
background-color: rgba(255,255,255,0.7);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
#tectree{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255,255,255,0.7);
z-index: 9999;
padding: 40px;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
transition: -webkit-transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
-o-transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.tectree #tectree{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#tectree_info{
position: fixed;
height: calc(100vh - 70px);
width: 33vw;
background-color: rgba(0,0,0,0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 5;
top: 60px;
right: 10px;
padding: 20px;
color: #fff!important;
-webkit-transform: translate3d(calc(100% + 15px),0,0);
transform: translate3d(calc(100% + 15px),0,0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
-o-transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
#tectree_info h4{
position: relative;
background-color: rgba(255,255,255,0.7);
padding: 5px 10px 2px 25px;
font-weight: normal;
color: #2b2b2b;
margin: 0;
margin-bottom: 5px;
}
#tectree_info h4:BEFORE{
position: absolute;
background-color: #fff;
height: 100%;
width: 21px;
top: 0;
left: 0;
text-align: center;
line-height: 21px;
font-size: inherit;
}
#tectree_table tr td{
padding: 0!important;
padding-bottom: 5px!important;
}
#tectree_table tr td:NTH-CHILD(2){
text-align: right;
}
#tectree_table_reveal{
border: 2px solid #fff;
table-layout: fixed;
border-collapse: collapse;
}
#tectree_table_reveal tr td:FIRST-CHILD{
background-color: #fff;
color: #2b2b2b;
width: 19px;
position: relative;
}
#tectree_table_reveal tr td:before{
position: absolute;
top: 0;
left: -2px;
width: 21px;
height: 100%;
line-height: 21px;
text-align: center;
}
#tectree_info #tectree_table_reveal tr td{
border: 2px solid #fff;
padding: 5px 5px 2px 5px;
}
.tectree_scroll{
position: absolute!important;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
#tectree_info h3{
font-size: 18px;
font-family: 'dogica_bold';
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #fff;
}
#tectree_info table{
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
#tectree_info table tr td{
color: #fff;
padding: 4px;
}
#tectree_table tr td:FIRST-CHILD{
padding-left: 12px!important;
position: relative;
}
#tectree_table tr td:FIRST-CHILD:BEFORE{
content: '';
position: absolute;
left: 0;
width: 7px;
height: 7px;
background-color: #fff;
top: 3px;
}
#tectree_content{
line-height: 1.4;
background-color: rgba(0,0,0,0.3);
padding: 20px;
margin: 20px 0;
}
#tectree_content p:FIRST-OF-TYPE{
margin-top: 0;
}
#tectree_content p:LAST-OF-TYPE{
margin-bottom: 0;
}
#tectree_info h3,
#tectree_info p{
color: #fff;
}
.tectreeinfo #tectree_info{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#tectree .simplebar-content{
height: 100%;
}
#tectree .simplebar-track{
bottom: 35px;
left: 80px!important;
right: 80px;
border: 2px solid #111;
z-index: 4;
}
#tectree .simplebar-scrollbar:BEFORE{
background-color: #111;
}
#tectree_info_scroll{
position: relative;
width: 100%;
height: 100%;
}
#tectree_info .simplebar-track{
bottom: 0;
top: 0;
left: auto!important;
right: -15px;
border: 2px solid #fff;
z-index: 4;
}
#tectree_info .simplebar-scrollbar:BEFORE{
background-color: #fff;
}
#tectree_close{
position: fixed;
top: 80px;
right: 30px;
height: 42px;
width: 42px;
z-index: 10;
text-align: center;
line-height: 42px;
font-size: 24px;
}
.tectree_scroll svg{
height: calc(100% - 160px);
width: auto;
display: block;
z-index: 1;
margin: 80px;
}
.tectree_scroll svg text{
font-family: 'dogica'!important;
}
#tectree svg .tectreetec:HOVER .tectreetec_bg{
cursor: pointer;
}
.tectreetec_icon{
display: none;
}
.tectreetec.tec_possible .tectreetec_question,
.tectreetec.tec_disabled .tectreetec_disabled,
.tectreetec.researching .tectreetec_researching,
.tectreetec.researched .tectreetec_check{
display: block;
}
.tectreetec{
opacity: .3;
transform-box: fill-box;
transform-origin: center center;
cursor: pointer;
}
.tectree_change_tree{
transform-box: fill-box;
transform-origin: center center;
cursor: pointer;
}
.tectree_change_tree:HOVER{
transform: scale3d(1.1,1.1,1.1);
}
.tectreetec.tec_possible,
.tectreetec.researching{
opacity: 1;
}
.tectreetec.researched{
opacity: 1;
}
.tectreetec_progress_box{
display: none!important;
}
.tectreetec.researching .tectreetec_progress_box{
display: block!important;
}
.tectreetec.researching .tectreetec_bg{
fill: #008bca;
fill-opacity: 0.5;
animation: col 2s linear infinite;
}
@keyframes col {
0%,100% {
fill: #008bca!important;
fill-opacity: 0.5;
}
50% {
fill: #ffffff!important;
fill-opacity: 1;
}
75% {
fill: #ffffff!important;
fill-opacity: 1;
}
}
.tectreetec.tec_possible .tectreetec_bg{
fill: #008bca!important;
fill-opacity: 0.3;
}
.tectreetec.tec_possible .tectreetec_typeicon,
.tectreetec.tec_possible .tectreetec_icon,
.tectreetec.tec_possible .tectreetec_changetext{
fill: #fff!important;
}
.tectreetec.tec_possible:HOVER .tectreetec_typeicon,
.tectreetec.tec_possible:HOVER .tectreetec_icon,
.tectreetec.tec_possible:HOVER .tectreetec_changetext{
fill: #555!important;
}
.tectree_line,
.tectreetec_bg{
stroke: #555;
stroke-width: 4px;
}
.tectreetec_bg{
fill: #fff;
}
.tectree_line{
fill: none;
opacity: 0.3;
}
.tectree_line.researched,
.tectree_line.focus{
opacity: 1;
}
.tectree_line.focus.enable{
stroke: #008bca;
}
.tectreetec:HOVER .tectreetec_bg{
fill: #ffffff!important;
opacity: 1!important;
}
.tectreetec:HOVER {
opacity: 1;
}
#tectree_message{
margin-top: 20px;
}
#tectree_required_ul{
list-style: none;
padding: 20px;
background-color: rgba(0,0,0,0.3);
margin-top: 0;
}
#tectree_required_ul li{
position: relative;
margin-bottom: 5px;
margin-left: 10px;
}
#tectree_required_ul li:ONLY-CHILD,
#tectree_required_ul li:LAST-OF-TYPE{
margin-bottom: 0;
}
.build_indicator_okay,
#tectree_required_ul li.researched{
color: #218600;
}
.build_indicator_need,
#tectree_required_ul li.not_researched{
color: #ff0000;
}
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 4px;
z-index: 99999;
text-align: right;
color: #111!important;
}
#nav{
display: inline-block;
position: absolute;
top: 0;
right: 0;
height: 52px;
padding: 4px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255,255,255,0.1);
}
.li_fixed_width{
min-width: 95px;
}
nav ul,
nav ul li{
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
line-height: 1;
vertical-align: top;
}
nav ul li{
position: relative;
margin-left: 4px;
}
nav ul li.icon{
font-size: 40px;
}
nav ul li ul li{
position: relative;
background-color: rgba(255,255,255,0.3);
padding: 4px 5px;
margin-left: 2px;
}
nav ul li:FIRST-CHILD{
margin-left: 0;
}
nav ul li .val_raus,
nav ul li .val{
font-size: 10px;
font-family: 'dogica_bold';
color: #fff;
}
.nav_seperator{
position: relative;
margin-right: 8px;
}
.nav_seperator:AFTER{
content: '';
position: absolute;
width: 2px;
height: 12px;
top: 4px;
right: -5px;
background-color: #fff;
}
#menu_button{
position: relative;
display: inline-block;
width: 42px;
height: 42px;
background-color: rgba(255,255,255,0.4);
}
#nav_poi_box{
position: fixed;
bottom: 8px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: rgba(255,255,255,0.3);
padding: 20px 72px 20px 20px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: 9900;
}
#nav_poi{
list-style: none;
margin: 0;
font-size: 0;
padding: 0;
}
#ui_button_next_round_box{
position: absolute;
right: 0;
top: 0;
width: 72px;
height: 82px;
}
#ui_button_next_round{
position: absolute;
bottom: 10px;
left: 0;
width: 62px;
height: 62px;
padding: 10px 20px;
font-family: 'dogica_bold';
border: 0;
cursor: pointer;
display: none;
margin: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 24px;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
background-image: url('data:image/svg+xml,');
color: #fff;
}
#ui_button_next_round:HOVER{
-webkit-transform: scale3d(1.2,1.2,1.2);
transform: scale3d(1.2,1.2,1.2);
}
#ui_button_next_round .mainnav_qt,
#ui_button_next_round:HOVER .mainnav_qt{
color: #2b2b2b;
}
.firstclick #ui_button_next_round{
-webkit-animation: none;
animation: none;
background-image: url('data:image/svg+xml,');
color: #2b2b2b;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
70% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
95% {
-webkit-transform: scale3d(1.2,1.2,1.2);
transform: scale3d(1.2,1.2,1.2);
}
100% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
70% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
95% {
-webkit-transform: scale3d(1.2,1.2,1.2);
transform: scale3d(1.2,1.2,1.2);
}
100% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
#ui_button_next_round:HOVER .mainnav_qt{
opacity: 1;
top: -31px;
}
#nav_poi li{
width: 42px;
height: 42px;
display: inline-block;
font-size: 14px;
margin-right: 10px;
}
.squarepixelbg{
background-size: 100% 100%;
background-color: transparent!important;
background-image: url('data:image/svg+xml,');
}
.squarepixelbg:HOVER{
background-color: transparent!important;
background-image: url('data:image/svg+xml,');
}
.squarepixelbg.disabled:HOVER{
background-color: transparent!important;
background-image: url('data:image/svg+xml,');
}
.mainnav_qt{
position: absolute;
top: -41px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: rgba(255,255,255,0.7);
padding: 5px 10px 2px 10px;
opacity: 0;
line-height: 1;
white-space: nowrap;
cursor: none;
pointer-events: none;
}
#nav_poi li:HOVER .mainnav_qt{
opacity: 1;
}
#nav_poi li.disabled:HOVER .mainnav_qt{
opacity: 0;
}
#menu_button img,
.nav_btn img{
position: absolute;
width: 22px;
height: 22px;
top: 10px;
left: 10px;
}
.nav_btn{
position: relative;
}
.nav_btn:BEFORE{
position: absolute;
color: #111;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
font-size: 24px;
line-height: 40px;
}
#logo{
position: absolute;
left: 4px;
top: 4px;
z-index: 99;
}
#logo_icon{
position: absolute;
width: 42px;
height: 42px;
background-color: rgba(255,255,255,0.7);
}
#menu_button{
position: absolute;
top: 14px;
left: 44px;
height: 28px;
width: 28px;
background-color: rgba(255,255,255,0.7);
}
#menu_button_box{
position: absolute;
width: 20px;
height: 20px;
top: 4px;
left: 4px;
}
.menu_button_row{
position: absolute;
top: 8px;
left: 0;
font-size: 0;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-o-transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
#menu_button_row1{
-webkit-transform: translate3d(0,-6px, 0);
transform: translate3d(0,-6px, 0);
}
#menu_button_row3{
-webkit-transform: translate3d(0,6px, 0);
transform: translate3d(0,6px, 0);
}
.menu_button_row span{
display: inline-block;
width: 4px;
height: 4px;
background-color: #111;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-o-transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.menu #menu_button_row1,
.menu #menu_button_row3{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.menu #menu_button_row1 span:NTH-CHILD(1),
.menu #menu_button_row1 span:NTH-CHILD(5){
-webkit-transform: translate3d(0,-8px,0);
transform: translate3d(0,-8px,0);
}
.menu #menu_button_row1 span:NTH-CHILD(2),
.menu #menu_button_row1 span:NTH-CHILD(4){
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
.menu #menu_button_row3 span:NTH-CHILD(1),
.menu #menu_button_row3 span:NTH-CHILD(5){
-webkit-transform: translate3d(0,8px,0);
transform: translate3d(0,8px,0);
}
.menu #menu_button_row3 span:NTH-CHILD(2),
.menu #menu_button_row3 span:NTH-CHILD(4){
-webkit-transform: translate3d(0,4px,0);
transform: translate3d(0,4px,0);
}
.menu #menu_button_row2 span:NTH-CHILD(1){
-webkit-transform: translate3d(8px,0,0);
transform: translate3d(8px,0,0);
}
.menu #menu_button_row2 span:NTH-CHILD(2){
-webkit-transform: translate3d(4px,0,0);
transform: translate3d(4px,0,0);
}
.menu #menu_button_row2 span:NTH-CHILD(4){
-webkit-transform: translate3d(-4px,0,0);
transform: translate3d(-4px,0,0);
}
.menu #menu_button_row2 span:NTH-CHILD(5){
-webkit-transform: translate3d(-8px,0,0);
transform: translate3d(-8px,0,0);
}
#logo_stats{
position: absolute;
top: 0;
left: 44px;
font-size: 0;
line-height: 1;
padding: 3px;
background-color: rgba(255,255,255,0.3);
white-space: nowrap;
height: 12px;
}
#logo_stats span{
font-size: 8px;
}
#logo_icon img{
position: absolute;
top: 5px;
left: 5px;
width: 32px;
height: 32px;
display: block;
}
#mainmenu_box{
position: fixed;
top: 54px;
left: 4px;
z-index: 9999;
}
#mainmenu_box ul,
#mainmenu_box ul li{
display: block;
margin: 0;
font-size: 14px;
background-color: transparent;
width: auto;
text-align: left;
line-height: 1;
}
#mainmenu_box ul li{
-webkit-transform: translate3d(-105%,0,0);
transform: translate3d(-105%,0,0);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: -webkit-transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56), -webkit-transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
position: relative;
margin-bottom: 14px;
}
.menu #mainmenu_box ul li{
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainmenu_box ul li span:BEFORE{
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
background: #2b2b2b;
color: #fff;
text-align: center;
line-height: 32px;
}
#mainmenu_box ul li span:HOVER:BEFORE{
font-size: 18px;
}
.menu #mainmenu_box ul li:NTH-CHILD(2){
-webkit-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.menu #mainmenu_box ul li:NTH-CHILD(3){
-webkit-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
.menu #mainmenu_box ul li:NTH-CHILD(4){
-webkit-transition-delay: .6s;
-o-transition-delay: .6s;
transition-delay: .6s;
}
.menu #mainmenu_box ul li:NTH-CHILD(5){
-webkit-transition-delay: .8s;
-o-transition-delay: .8s;
transition-delay: .8s;
}
.menu #mainmenu_box ul li:NTH-CHILD(6){
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
.menu #mainmenu_box ul li:NTH-CHILD(7){
-webkit-transition-delay: 1.2s;
-o-transition-delay: 1.2s;
transition-delay: 1.2s;
}
#mainmenu_box ul li span{
position: relative;
cursor: pointer;
padding: 10px 20px 7px 40px;
background-color: rgba(255,255,255,0.7);
line-height: 1;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
#mainmenu_box ul li span:HOVER{
background-color: #fff;
}
#mainmenu_box ul li#camhelperli{
display: none;
}
#controls_box{
position: absolute;
left: 0px;
height: 20px;
width: 100%;
bottom: -22px;
width: 100%;
}
#progress_box{
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 6px;
width: calc(100% - 66px);
background-color: rgba(255,255,255,0.4);
/* backdrop-filter: blur(5px);transform: translate3d(0, 0, 0);*/
}
#progress_bar{
position: absolute;
top: 2px;
left: 2px;
height: 2px;
width: 42%;
background-color: #fff;
}
#control_buttons{
font-size: 0;
}
#control_buttons button{
position: relative;
width: 20px;
height: 20px;
border: 0;
background-color: rgba(255,255,255,0.7);
margin-left: 2px;
vertical-align: top;
font-size: 6px;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#control_buttons button img{
position: absolute;
width: 12px;
height: 12px;
left: 4px;
top: 4px;
}
#nav_store{
position: relative;
}
nav ul{
height: 20px;
display: inline-block;
font-size: 0;
}
.nav_store_box {
font-size: 0;
margin-bottom: 4px;
}
#store_quicktip{
position: absolute;
bottom: 4px;
left: 4px;
}
#store_quicktip div{
width: auto;
display: none;
font-size: 12px;
height: auto;
background-color: rgba(255,255,255,0.7);
padding: 5px 25px 3px 7px;
line-height: 1;
}
#store_quicktip div:BEFORE{
position: absolute;
width: 20px;
height: 20px;
right: 0;
top: 0;
background-color: #fff;
font-size: 14px;
text-align: center;
line-height: 20px;
}
nav ul li{
position: relative;
width: 62px;
font-size: 10px;
padding: 0;
height: 20px;
line-height: 1;
text-align: right;
padding-top: 6px;
padding-right: 22px;
margin-left: 2px;
background-color: rgba(255,255,255,0.3);
}
#nav_store ul li:HOVER{
background-color: #ff5500;
}
nav ul li:before{
position: absolute;
width: 20px;
height: 20px;
right: 0;
top: 0;
background-color: rgba(255,255,255,0.4);
font-size: 14px;
text-align: center;
line-height: 19px;
}
#nav_stats{
font-size: 0;
}
#nav_stats ul li:before{
color: #fff;
background-color: rgba(0,0,0,0.4);
}
#nav_stats ul li{
background-color: rgba(0,0,0,0.3);
}
#office_stats1{
height: 400px;
}
.nav_btn:HOVER{
background-color: rgba(255,255,255,0.7);
cursor: pointer;
}
#fill1:AFTER,
#fill2:AFTER{
width: 100%!important;
height: 3px!important;
bottom: -3px!important;
left: 0!important;
right: auto!important;
top: auto!important;
background-color: rgba(255,255,255,0.3)!important;
/* backdrop-filter: blur(5px);transform: translate3d(0, 0, 0);*/
}
#fill3:AFTER{
display: none;
}
#nav_bottom{
bottom: 4px;
top: auto;
display: none;
}
#nav_bottom .nav_btn{
width: 42px;
height: 42px;
}
#log{
width: 400px;
height: 42px;
padding: 5px;
background-color: rgba(255,255,255,0.3);
}
#log_text{
font-size: 10px;
line-height: 1.2;
text-align: left;
}
#mainmenu{
position: fixed;
width: 33vw;
min-width: 535px;
height: calc(100% - 68px);
right: 8px;
top: 60px;
z-index: 1000;
overflow: hidden;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-transform: translate3d(102%,0,0);
transform: translate3d(102%,0,0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: -webkit-transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56), -webkit-transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mainmenu_stay{
position: absolute;
width: 100%;
height: 52px;
background-color: rgba(255,255,255,0.9);
top: 0;
left: 0;
z-index: 99;
border-bottom: 2px solid #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
}
.mainmenu_stay_icon{
background-color: #fff;
position: relative;
height: 100%;
width: 58px;
display: inline-block;
font-size: 24px;
text-align: center;
line-height: 50px;
}
#mainmenu.show{
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainmenu h2{
margin: 0;
padding: 10px 10px 7px 10px;
background: rgba(255,255,255,0.7);
line-height: 1;
width: 100%;
}
.chart_bg{
background-color: rgba(255,255,255,0.7);
height: 200px;
margin-bottom: 20px;
border: 2px solid #fff;
}
.chart_bg_hl{
position: relative;
line-height: 1;
color: #fff;
margin-bottom: 0;
display: inline-block;
background-color: rgba(0,0,0,0.4);
padding: 5px 10px 2px 10px;
font-size: 12px;
border: 2px solid #fff;
border-bottom: 0;
}
.uilvlmanagement{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: calc(400% + 12px);
height: calc(100% - 50px);
margin-top: 50px;
gap: 4px;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
-o-transition: transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
transition: transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
transition: transform 0.5s cubic-bezier(0.37, 0, 0.63, 1), -webkit-transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
}
.uilvl{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.uilvloption{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 20px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
#mainmenu.lvl2 .uilvlmanagement{
-webkit-transform: translate3d(-25%,0,0);
transform: translate3d(-25%,0,0)
}
#mainmenu.lvl3 .uilvlmanagement{
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0)
}
#mainmenu.lvl4 .uilvlmanagement{
-webkit-transform: translate3d(-75%,0,0);
transform: translate3d(-75%,0,0)
}
.uioverlay button{
line-height: 1;
padding: 14px 20px 10px 20px;
border: 2px solid #fff;
font-family: 'dogica_bold';
-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
background: rgba(255,255,255,0);
cursor: pointer;
-webkit-transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
-o-transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
transition: all 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}
.uioverlay button:HOVER{
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
background: rgba(255,255,255,0.7);
}
.uioverlay hr{
border: 0;
width: calc(100% - 40px);
height: 4px;
background-color: #fff;
margin: 20px;
}
.mainmenu_quicknav{
margin: 0;
padding: 0;
list-style: none;
margin-top: 8px;
margin-left: 10px;
width: 100%;
}
.mainmenu_quicknav li{
display: inline-block;
list-style: none;
}
.mainmenu_quicknav li img{
width: 20px;
height: 20px;
}
#tectree_close,
.mainmenu_quicknav li button{
-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
border: 2px solid #fff;
background-color: rgba(255,255,255,0.3);
height: 36px;
line-height: 33px;
width: 42px;
padding: 0;
text-align: center;
font-size: 20px;
}
.mainmenu_quicknav li button:HOVER{
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.7);
}
.mainmenu_quicknav li button.menu_back{
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.3;
background-color: rgba(255,255,255,0.3)!important;
}
.mainmenu_quicknav li button.active{
background-color: #fff;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.5);
box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.5);
}
.lvl2 .mainmenu_quicknav li button.menu_back{
-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
opacity: 1;
background-color: rgba(255,255,255,0.3);
}
.lvl2 .mainmenu_quicknav li button.menu_back:HOVER{
background-color: rgba(255,255,255,0.7)!important;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.menu_close_li{
float: right;
margin-right: 10px;
}
.menu_lvl2,
.menu_lvl1{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
}
.menu_lvl2 li,
.menu_lvl1 li{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.menu_lvl1 li{
position: absolute;
top: 0;
}
.menu_lvl1 li:NTH-CHILD(2){
left: calc(100% + 20px);
}
.menu_lvl1 li:NTH-CHILD(3){
left: calc(200% + 40px);
}
.menu_lvl1 li:NTH-CHILD(4){
left: calc(300% + 60px);
}
.menu_lvl1 li:NTH-CHILD(5){
left: calc(400% + 80px);
}
.menu_lvl1 li:NTH-CHILD(6){
left: calc(500% + 100px);
}
.menu_lvl1 li .menu_lvl2 li{
position: relative;
left: 0;
margin-bottom: 20px;
}
.menucontent{
position: relative;
width: 100%;
height: 100%;
padding: 66px 10px 100px 10px;
font-size: 14px;
background-color: rgba(255,255,255,0.4);
overflow-x: hidden;
white-space: normal;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
.menucontent.simplebar-scrollable-y{
padding-right: 18px;
}
.menucontent p{
line-height: 1.4;
margin-top: 0;
}
.menu_intro_text{
background-color: rgba(255,255,255,0.3);
padding: 10px;
}
.menu_intro_text p{
margin: 0;
}
#menu_marketing table{
border: 2px solid #fff;
margin-bottom: 20px;
}
.marketing_content .feedback_box{
margin-bottom: 10px;
}
#menu_marketing .sellsettings_content table:LAST-OF-TYPE{
border: 2px solid #fff;
margin-bottom: 0;
}
#menu_marketing table tr td{
border: 2px solid #fff;
margin-bottom: 10px;
padding: 5px 10px 2px 10px;
}
#menu_marketing table tr td:NTH-CHILD(2){
text-align: right;
}
#menu_marketing table tr td.marketing_progress_td{
padding: 10px;
}
.marketingbox,
.sellsettings{
background-color: rgba(255,255,255,0.3);
margin-top: 20px;
}
.marketingbox h4,
.sellsettings h4{
margin-bottom: 5px;
}
.marketingbox .hl,
.sellsettings .hl{
position: relative;
padding: 10px 10px 7px 10px;
line-height: 1;
margin: 0;
background-color: rgba(255,255,255,0.5);
}
.marketingbox .hl .icon,
.sellsettings .hl .icon{
position: absolute;
width: 32px;
height: 100%;
right: 0;
top: 0;
background-color: rgba(255,255,255,0.5);
text-align: center;
line-height: 32px;
font-size: 20px;
}
.campagne_content,
.marketing_content,
.sellsettings_content{
padding: 10px;
}
#menu_marketing #marketing_recycle_table{
margin-bottom: 0;
}
#marketing_recycling_button{
margin: 20px 0;
}
#marketing_recycle_current .recyclecampain{
padding: 10px;
background-color: rgba(0,0,0,0.3);
color: #fff;
margin-top: 10px;
}
#marketing_recycle_current .recyclecampain:FIRST-OF-TYPE{
margin-top: 0;
}
#marketing_recycle_current p{
margin-bottom: 5px;
}
#marketing_recycle_current .progress{
background-color: #fff;
}
#menu_marketing #marketing_recycle_table tr td:NTH-CHILD(2){
text-align: left;
}
.campagne_content{
display: none;
}
.sellsettings table tr td{
padding: 10px 0;
}
.sellsettings table tr td input{
width: 100%;
margin: 10px 0;
}
.sellsettings table tr td:NTH-CHILD(2){
width: 100px;
text-align: right;
}
#menu_marketing .marketing_content table{
margin-top: 10px;
margin-bottom: 10px;
}
.kredit_box{
background-color: rgba(255,255,255,0.5);
margin-top: 10px;
}
.kredit_content{
padding: 10px;
}
#kredit_slider{
width: 100%;
}
.kredit_box table tr td:NTH-CHILD(2){
text-align: right;
font-family: 'dogica_bold';
}
.kredit_overview .creditbox:NTH-CHILD(1){
margin-top: 0;
}
#elepedia_search_box_par{
background-color: rgba(255,255,255,0.3);
margin-bottom: 15px;
padding: 20px;
}
#elepedia_search_box{
position: relative;
padding: 10px;
background-color: rgba(0,0,0,0.4);
}
#elepedia_back_box{
background-color: rgba(255,255,255,0.3);
margin-bottom: 15px;
padding: 20px;
}
#elepedia_search_button{
position: absolute;
width: 33px;
height: calc(100% - 20px);
right: 10px;
top: 10px;
background-color: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
line-height: 32px;
}
#elepedia_search_button:HOVER{
background-color: #111;
}
#elepedia_search{
padding: 10px 10px 8px 10px;
line-height: 1;
width: calc(100% - 37px);
border: 0;
background-color: rgba(255,255,255,0.4);
}
#elepedia_search:FOCUS{
background-color: #fff;
outline: none;
}
.elepedia_cat_box{
background-color: rgba(0,0,0,0.4);
margin-bottom: 10px;
overflow: hidden;
}
.elepedia_cat_cont_box{
padding: 10px;
padding-bottom: 1px;
}
.elepedia_entry_box{
background-color: rgba(255,255,255,0.5);
margin-bottom: 10px;
overflow: hidden;
}
.elepedia_entry_box h3{
position: relative;
background-color: rgba(255,255,255,0.8);
padding: 10px 10px 7px 10px;;
margin: 0;
font-size: 12px;
}
.elepedia_cat_box h2{
position: relative;
}
.strat_box_cont h2:BEFORE,
.elepedia_cat_box h2:BEFORE,
.elepedia_entry_box h3:BEFORE{
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 32px;
text-align: center;
line-height: 30px;
background-color: #fff;
}
/*
.elepedia_cat_cont_box .elepedia_entry_box:LAST-OF-TYPE{
margin-bottom: 0;
}
*/
.elepedia_entry_cont ul{
-webkit-transform: none!important;
-ms-transform: none!important;
transform: none!important;
list-style: square;
padding-left: 15px;
font-size: inherit;
}
.elepedia_entry_cont ul li{
overflow: visible!important;
margin-bottom: 5px!important;
font-size: inherit;
}
.elepedia_entry_cont{
padding: 10px;
font-size: 10px;
}
.elepedia_entry_cont p:LAST-OF-TYPE{
margin-bottom: 0;
}
.elepedia_entry_cont img{
width: 100%;
height: auto;
display: block;
border: 2px solid #fff;
}
.elepedia_cat_count_box{
float: right;
margin-right: 30px;
}
.elepedia_cat_count{
font-family: inherit;
}
.strat_height_box{
height: 0;
overflow: hidden;
}
.strat_box_cont{
background-color: rgba(255,255,255,0.3);
margin-top: 20px;
padding-bottom: 1px;
}
.strat_box_cont h2{
position: relative;
}
.strat_box{
background-color: rgba(255,255,255,0.3);
margin: 10px;
padding: 10px;
}
#menu_strategie .strat_height_box p,
#menu_strategie .strat_box p{
margin-top: 10px;
}
.strat_box button{
margin-top: 10px;
}
.strat_box h3{
background-color: rgba(255,255,255,0.7);
margin: 0;
padding: 10px 10px 7px 10px;
line-height: 1;
width: calc(100% + 20px);
margin-left: -10px;
margin-top: -10px;
}
.strat_table_box{
padding: 10px;
background-color: rgba(0,0,0,0.5);
margin-top: 10px;
}
table.strat_table{
border: 2px solid #fff;
color: #fff;
table-layout: fixed;
border-collapse: collapse;
}
table.strat_table tr td{
border-bottom: 2px solid #fff;
line-height: 1;
padding: 5px 5px 3px 5px!important;
border-right: 2px solid #fff;
text-align: left;
}
table.strat_table tr td:nth-child(1){
width: 26px;
text-align: center;
}
table.strat_table tr td:LAST-OF-TYPE{
border-right: 0;
}
table.strat_table tr:LAST-OF-TYPE td{
border-bottom: 0;
}
table.strat_table tr td:NTH-CHILD(3){
text-align: right;
width: 100px;
}
#ente_level_input,
#fmd_level_input{
margin: 20px 0;
width: 100%;
}
#newspaperbox{
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 99999;
display: none;
}
#newspaper{
position: absolute;
top: 50%;
left: 50%;
width: 50vw;
height: 80vh;
background-color: #eee;
-webkit-transform: translate3d(30%,80%,0) rotate(-30deg);
transform: translate3d(30%,80%,0) rotate(-30deg);
-webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.5);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56), -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
padding: 20px;
line-height: 1.3;
}
#newspaper .simplebar-track.simplebar-vertical{
top: 0!important;
bottom: 0!important;
border: 2px solid #2b2b2b!important;
right: -15px!important;
}
#newspaper .simplebar-scrollbar::before {
background: #2b2b2b!important;
}
#newspaper_scroll{
position: relative;
width: 100%;
height: 100%;
}
#newspaper.show{
-webkit-transform: translate3d(-50%,-50%,0) rotate(0);
transform: translate3d(-50%,-50%,0) rotate(0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#newspaper_header{
background-color: #ccc;
border-bottom: 4px solid #fff;
}
#newspaperbox h2{
font-size: 16px;
font-family: 'dogica_bold';
}
#newspaper_market{
line-height: 1;
}
#newspaper_market,
#newspaper_story{
position: relative;
padding-bottom: 40px;
margin-bottom: 40px;
}
#newspaper_market:AFTER,
#newspaper_story:AFTER{
content: '';
position: absolute;
width: 80%;
height: 4px;
background-color: #2b2b2b;
left: 10%;
bottom: 0;
}
#newspaper_story_img_box{
width: 100%;
height: 400px;
}
#newspaper_story_img_box img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#newspaper_header h2{
margin: 0;
text-align: center;
padding: 40px;
font-size: 24px;
}
#newspaper_header h2 span{
display: block;
font-size: 18px;
}
#newspaper_close{
position: absolute;
border: 0;
background-color: rgba(255, 255, 255,0.8);
right: -60px;
top: 0;
height: 50px;
font-size: 20px;
width: 50px;
text-align: center;
line-height: 50px;
}
#newspaper_close:HOVER{
font-size: 24px;
}
#newspaper_close:BEFORE{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#newspaper_market_table table{
width: 100%
}
#newspaper_market_table table tr th{
white-space: nowrap;
background-color: #555;
color: #fff;
padding: 10px;
}
#newspaper_market_table table tr th:FIRST-CHILD{
text-align: left;
}
#newspaper_market_table table tr th:BEFORE{
margin-right: 4px;
}
#newspaper_market_table table tr th.right{
text-align: right;
}
#newspaper_market_table table tr td{
height: 24px;
}
#newspaper_market_table table tr:NTH-CHILD(odd) td{
background-color: rgba(0,0,0,0.1);
}
#newspaper_market_table table tr td:NTH-CHILD(2){
width: 70px;
text-align: right;
}
#newspaper_market_table table tr td:NTH-CHILD(3),
#newspaper_market_table table tr td:NTH-CHILD(4){
text-align: right;
}
#newspaper_market button{
margin-top: 20px;
}
.questbox{
margin-bottom: 20px;
}
#newspaper_quest_box .questbox:LAST-OF-TYPE{
margin-bottom: 0;
}
.questbox_content{
background-color: rgba(0,0,0,0.2);
padding: 20px;
}
.quest_table_box table{
border: 2px solid #fff;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.quest_table_box table tr td:LAST-CHILD{
width: 100px;
max-width: 100px;
text-align: right;
}
.quest_table_box table tr td:FIRST-CHILD{
width: 30px;
max-width: 30px;
background-color: #2b2b2b!important;
color: #fff;
text-align: center;
}
.quest_table_box table tr td{
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 5px 5px 2px 5px!important;
}
.questbox_office{
background-color: rgba(0,0,0,0.2);
margin-top: 20px;
}
.questbox_office_content{
padding: 0px 10px 20px 10px;
}
.questbox_office_content h4{
margin-bottom: 5px;
font-family: 'dogica_bold';
}
.questbox_office_hl{
position: relative;
background-color: #fff;
padding: 10px 20px 5px 40px;
font-family: 'dogica_bold';
}
.questbox_office_hl:BEFORE{
position: absolute;
left: 0;
top: 0;
background-color: #2b2b2b;
color: #fff;
height: 100%;
width: 30px;
text-align: center;
line-height: 30px;
}
#newspaper_quest_box h3{
margin-bottom: 5px;
font-family: 'dogica_bold';
}
.questbox_hl{
position: relative;
background-color: rgba(0,0,0,0.4);
color: #fff;
padding: 10px 20px 5px 45px;
margin-bottom: 0;
border-bottom: 2px solid #fff;
}
.questbox_hl:BEFORE{
position: absolute;
background-color: #2b2b2b;
top: 0;
left: 0;
height: 100%;
width: 33px;
text-align: center;
line-height: 33px;
}
#credits,
#settings{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
z-index: 999999;
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-transform: scale3d(0,0,0);
transform: scale3d(0,0,0);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.settings #settings{
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
opacity: 1;
-webkit-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#credits_box_close,
#settings_box_close{
position: absolute;
width: 42px;
height: 42px;
top: 20px;
right: -62px;
border: 2px solid #fff;
font-size: 20px;
text-align: center;
line-height: 40px;
}
#credits_box_close:HOVER,
#settings_box_close:HOVER{
background-color: #fff;
color: #2b2b2b;
}
#settings .simplebar-track.simplebar-vertical{
top: 0;
bottom: 0;
right: -30px;
}
#settings .menucontent{
background: transparent;
padding: 0;
overflow-x: visible;
}
#settings .menucontent input[type="range"]{
background-color: rgba(255,255,255,0.4);
margin-top: 20px;
width: 100%;
}
#settings input[type="checkbox"] {
width: 0;
height: 0;
display: none;
}
#settings .settings_check{
position: relative;
padding-left: 25px;
}
#settings .settings_check .checkmark{
position: absolute;
left: 0;
top: -9px;
display: block;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
#settings .settings_check .settings_check_text{
padding: 10px;
}
#settings .settings_check input:checked ~ .checkmark {
background-image: url('data:image/svg+xml,');
}
#settings label{
display: block;
}
#settings h3{
margin: 0;
}
#settings h3 span{
background-color: #fff;
padding: 10px 20px 5px 10px;
color: #2b2b2b;
}
#credits_box,
#settings_box{
position: relative;
width: 50vw;
margin: auto;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
height: 100vh;
padding: 20px 40px 20px 20px;
background-color: rgba(0,0,0,0.3);
}
.settingsbox{
margin: 10px 0 50px 0;
}
.settings_cont{
position: relative;
padding: 20px;
border: 2px solid #fff;
margin-top: 5px;
}
.settings_copy{
position: absolute;
bottom: 0;
right: 0;
padding: 7px 8px 5px 10px;
line-height: 1;
background-color: #fff;
color: #2b2b2b;
cursor: pointer;
}
.settingsbox .feedback_box{
margin-top: -10px;
margin-bottom: 15px;
}
.settings_copy:HOVER{
background-color: #008bca;
color: #fff;
}
.settings_copy_cont{
margin: 10px 0;
display: inline-block;
}
.setting_box{
border-bottom: 2px solid rgba(255,255,255,0.3);
padding-bottom: 20px;
margin-bottom: 20px;
}
#settings_savemulti .setting_box{
border: 0;
margin-bottom: 0;
}
.settingsbox .setting_box:LAST-OF-TYPE{
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.keysettingsbox{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;
}
.keysettingsbox .setting_box{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: calc(33% - 40px / 3);
flex-basis: calc(33% - 40px / 3);
border-bottom: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.settings_key{
border: 2px solid #fff;
background: transparent;
padding: 10px;
color: #fff;
opacity: 0.5;
width: 100%;
}
.settings_key:FOCUS{
opacity: 1;
outline: none;
}
#credits{
text-align: center;
}
.credits #credits{
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
opacity: 1;
-webkit-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#credits hr{
border: 0;
height: 2px;
width: 50%;
background-color: #fff;
opacity: 1;
}
#credits_box_close{
position: fixed;
top: 20px;
right: 20px;
}
#credits_box_scroll{
padding-top: 100vh;
padding-bottom: 30px;
}
#credits_box{
width: 70vw;
line-height: 1.5;
padding-top: 0;
border: 0;
background-color: transparent;
}
.credits_box{
position: relative;
margin-top: 100px;
padding-bottom: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 40px;
}
.credits_box img{
max-width: 250px;
height: auto;
}
#ui_credits_table:AFTER,
.credits_box:AFTER{
content: '';
position: absolute;
bottom: 0;
width: 30%;
left: 35%;
height: 2px;
background-color: #fff;
}
.cb1, .cb2{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: left;
}
.cb1{
text-align: right;
opacity: 0.5;
}
#credits_logo_box{
position: relative;
width: 200px;
height: 200px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
color: #fff;
font-size: 100px;
line-height: 200px;
}
#ui_credits_table{
position: relative;
display: inline-table;
margin: auto;
padding-bottom: 100px;
width: 100%;
}
#ui_credits_table tr td{
padding-bottom: 20px;
}
#ui_credits_table tr td:first-CHILD{
text-align: right;
padding-right: 10px;
width: 50%;
opacity: 0.5;
}
#ui_credits_table tr td:LAST-CHILD{
padding-left: 10px;
width: 50%;
text-align: left;
}
#dummy{
display: none;
}
.menudummy{
height: 100%;
}
.menudummy table{
width: 100%;
border-collapse: collapse;
}
.menudummy table th{
background-color: #111;
color: #fff;
padding: 8px 0 4px 0;
text-align: left;
}
.menudummy table th:NTH-CHILD(1){
padding: 8px 0px 4px 10px;
}
.menudummy table th img{
width: 20px;
height: 20px;
}
.menudummy table tr:NTH-CHILD(odd) td{
background-color: rgba(255,255,255,0.3);
}
.menudummy table tr td{
position: relative;
padding: 4px;
}
.menudummy table tr td.right{
text-align: right;
}
.menudummy input[type=text]{
border: 2px solid #fff;
background-color: transparent;
padding: 4px 4px 0px 4px;
font-family: 'dogica';
}
.menudummy input[type=text]:FOCUS{
border: 2px solid #111;
outline: none;
}
.ui_menu_stock_sell_input,
.ui_menu_stock_buy_input{
width: 50px;
text-align: right;
}
input[type=range]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
height: 8px;
border: 0;
background-color: rgba(255,255,255,0.3);
}
.menucontent input[type=range]{
background-color: rgba(0,0,0,0.5);
}
.ui_menu_stock_sell_range,
.ui_menu_stock_buy_range{
width: 100px;
}
.ui_menu_stock_sell_range:HOVER,
.ui_menu_stock_buy_range:HOVER{
background-color: rgba(255,255,255,0.7);
}
.stockindicator.alert,
.alert{
-webkit-animation: alert 1s infinite; /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
animation: alert 1s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes alert {
0%, 49% {
background-color: rgba(255,0,0,0.5);
}
50%, 100% {
background-color: rgba(255,255,255,0.5);
}
}
/*
input[type='range']::-webkit-slider-thumb {
appearance: none;
background-color: #fff;
border: 2px solid blue;
width: 30px;
height: 30px;
border-radius: 15px;
cursor: pointer;
}
*/
input[type=range]::-moz-range-thumb {
background: #111;
border: 0;
width: 18px;
height: 26px;
border-radius: 0;
cursor: pointer;
border: 2px solid #fff;
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
#ui_menu_stock_buy_button,
#ui_menu_stock_sell_button{
margin-bottom: 20px;
}
.ui_menu_stock_sell_symbol,
.ui_menu_stock_buy_symbol{
display: block;
width: 20px;
height: 20px;
}
.ui_menu_stock_buy_line td,
.ui_menu_stock_sell_line td{
min-height: 42px;
}
.pricetag{
position: relative;
display: inline-block;
height: 100%;
width: 70px;
}
.ui_menu_stock_sell_price_td .pricetag,
.ui_menu_stock_buy_price_td .pricetag{
padding-top: 22px;
}
.ui_menu_stock_buy_price{
position: absolute;
left: 20px;
top: 5px;
min-width: 50px;
text-align: right;
}
.ui_menu_stock_buy_priceindicator{
position: absolute;
width: 20px;
height: 20px;
left: 0;
top: 0;
background-color: #bbb;
-webkit-transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ui_menu_stock_buy_priceindicator img{
width: 12px;
height: 12px;
top: 4px;
position: absolute;
left: 4px;
-webkit-transition: -webkit-transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ui_menu_stock_sell_table,
#ui_menu_stock_buy_table{
margin-top: 10px;
}
#ui_menu_stock_buy_table th span{
color: #fff;
}
.ui_menu_stock_sell_sum td,
.ui_menu_stock_buy_sum td{
background-color: transparent!important;
padding-top: 20px!important;
}
.ui_menu_stock_sell_sum b,
.ui_menu_stock_buy_sum b{
position: relative;
}
.ui_menu_stock_sell_sum b:BEFORE,
.ui_menu_stock_sell_sum b:AFTER,
.ui_menu_stock_buy_sum b:BEFORE,
.ui_menu_stock_buy_sum b:AFTER{
content: '';
width: 100px;
height: 2px;
background-color: #111;
position: absolute;
top: -8px;
right: -4px;
}
.ui_menu_stock_sell_sum b:AFTER,
.ui_menu_stock_buy_sum b:AFTER{
top: -11px;
}
.ui_menu_stock_sell_td_range,
.ui_menu_stock_buy_td_range{
width: 108px;
}
.ui_menu_stock_sell_price_sum,
.ui_menu_stock_buy_price_sum{
width: 65px;
display: block;
}
.ui_menu_stock_sell_td_input,
.ui_menu_stock_buy_td_input{
width: 58px;
}
.ui_menu_stock_sell_td_sum,
.ui_menu_stock_buy_td_sum{
width: 65px;
}
.ui_menu_success,
.ui_menu_error{
line-height: 1.2;
padding: 20px;
color: #fff;
background-color: #ff0000;
display: none;
}
.ui_menu_success.show,
.ui_menu_error.show{
display: block;
}
.ui_menu_success{
background-color: #157B0D;
}
.uilvlmanagement button{
padding: 10px 20px 7px 20px;
-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
border: 2px solid #fff;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
}
.uilvlmanagement button:HOVER{
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.7);
}
.disabled,
.disabled button,
button:disabled{
-webkit-box-shadow: none;
box-shadow: none;
background-color: rgba(255,255,255,0.3);
opacity: .2;
pointer-events: none;
}
select{
border: 2px solid #fff;
background-color: rgba(255,255,255,0.3);
padding: 10px 20px 7px 20px;
width: 100%;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right 7px top 7px;
}
select:HOVER{
background-color: rgba(255,255,255,0.5);
}
.ui_menu_stock_overview{
padding-top: 10px;
padding-bottom: 20px;
border-bottom: 2px solid #fff;
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.ui_menu_stock_overview_border{
padding-bottom: 20px;
border-bottom: 2px solid #fff;
margin-bottom: 20px;
}
#ui_menu_stock_material_overview{
padding-bottom: 0;
border-bottom: 0;
}
.ui_menu_stock_overview_border ul,
.ui_menu_stock_overview_border ul li{
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
margin-right: 10px;
}
.ui_menu_stock_overview_box{
position: relative;
border: 2px solid #fff;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: calc(20% - 40px / 5);
flex-basis: calc(20% - 40px / 5);
background-color: rgba(255,255,255,0.3);
min-height: 100px;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.ui_menu_stock_overview_box:HOVER{
background-color: rgba(255,255,255,0.7);
}
.ui_menu_stock_overview_box:BEFORE{
position: absolute;
top: -2px;
left: -2px;
width: 36px;
height: 36px;
background-color: #fff;
font-size: 26px;
text-align: center;
line-height: 36px;
}
.ui_menu_stock_overview_box_name{
position: absolute;
right: 0;
bottom: -2px;
padding: 3px 0 0 3px;
background-color: #fff;
color: #111;
font-size: 9px;
}
.ui_menu_stock_overview_box_count{
position: absolute;
font-size: 22px;
color: #111;
text-align: center;
width: 100%;
top: 50%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
font-family: 'dogica_bold';
}
#ui_menu_stock_orders_overview{
margin: 0;
margin-top: 10px;
padding: 0;
list-style: none;
}
.ui_menu_stock_icon{
position: relative;
width: 28px;
min-width: 28px;
}
.ui_menu_stock_sell_name_td,
.ui_menu_stock_buy_name_td{
padding-top: 7px!important;
}
.ui_menu_stock_icon:BEFORE{
position: absolute;
top: 3px;
font-size: 22px;
}
.market_order_progress{
position: relative;
padding: 10px 10px 15px 46px;
background-color: rgba(255,255,255,0.3);
margin-bottom: 4px;
height: 42px;
}
.progress_box{
height: 8px;
width: 100%;
border: 2px solid #fff;
}
.order_progress_box{
position: absolute;
bottom: 6px;
right: 10px;
width: calc(100% - 56px);
}
.market_order_progress_icon{
position: absolute;
top: 2px;
left: 2px;
width: 38px;
height: 38px;
background-color: rgba(255,255,255,0.7);
font-size: 30px;
text-align: center;
line-height: 37px;
}
.progress{
position: relative;
background-color: #111;
height: 6px;
width: 0;
-webkit-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
/* cubic-bezier(0.37, 0, 0.63, 1); */
}
.order_progress{
}
.recyclingbox,
.refurbishbox,
.duckshipbox,
.maschinebox{
background-color: rgba(255,255,255,0.3);
padding: 10px;
}
.maschine_empty{
position: relative;
height: 120px;
}
.maschine{
position: relative;
border: 2px solid #fff;
margin-bottom: 20px;
min-height: 120px;
background-color: rgba(0,0,0,0.3);
}
.maschine.focus{
background-color: rgba(0,0,0,0.5);
}
.maschine.status_repair,
.maschine.status_resource{
background-color: rgba(255,0,0,0.3);
}
.maschine.status_broken{
background-color: rgba(255,0,0,0.8);
}
.maschine h3{
position: relative;
background-color: #fff;
font-size: 14px;
margin: 0;
padding: 10px 10px 7px 35px;
}
.maschine_content{
padding: 20px;
padding-bottom: 10px;
}
.optional_production td{
opacity: 0.3;
}
.optional_production.researched td{
opacity: 1;
}
.button_machine_buy{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.button_machine_destroy{
display: none;
}
.button_machine_destroy.show{
display: inline-block;
}
.machine_info_box{
background-color: rgba(0,0,0,0.3);
}
.machine_info_box h3{
position: relative;
padding: 10px 0 7px 35px;
background-color: rgba(255,255,255,0.4);
}
.maschine_name:BEFORE{
position: absolute;
width: 30px;
height: calc(100% - 2px);
background-color: #111;
top: 0;
left: 0;
text-align: center;
line-height: 30px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
color: #fff;
}
.machine_info_box h3:BEFORE{
border: 0;
height: 100%;
}
.machine_status_ul{
position: absolute;
padding: 0;
margin: 0;
list-style: none;
right: 5px;
top: 5px;
}
.machine_status_ul li{
background-color: #ff0000;
width: 20px;
height: 20px;
display: inline-block;
margin-left: 5px;
overflow: hidden;
text-align: center;
line-height: 20px;
color: #fff;
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
display: none;
}
.buy_info{
display: none;
}
.status_broken .error_broken{
display: inline-block;
}
.status_pause .error_pause{
display: inline-block;
}
.status_broken .maschine_production_pause_button{
display: none;
}
.status_resource .error_material{
display: inline-block;
}
.status_repair .error_repair{
display: inline-block;
}
#machine_info_box .maschine_name{
display: none;
}
.machinemenu{
overflow: hidden;
margin-bottom: 20px;
display: none;
-webkit-transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
-o-transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.machinemenu_hl{
position: relative;
}
.machinemenu_hl:BEFORE{
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 32px;
text-align: center;
line-height: 32px;
background-color: #fff;
}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
/*
.button_machine_info{
display: none;
}
*/
.iconbutton{
position: relative;
padding-left: 50px!important;
min-height: 40px;
}
.iconbutton:BEFORE{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 40px;
background-color: #fff;
color: #111;
text-align: center;
line-height: 38px!important;
font-size: 20px;
}
.maschine_production .b_lvl1{
display: inline-block;
}
#machine_info_box .b_lvl1{
display: none;
}
#machine_info_box .b_lvl2{
display: inline-block;
}
#machine_buy_info{
display: none;
}
.machine_buy_select{
margin: 15px 0;
}
.machine_buy_button{
margin: 20px 0;
}
.maschine_all_button_box{
position: relative;
}
.maschine_button_box{
position: relative;
text-align: right;
list-style: none;
margin: 0;
padding: 0;
-webkit-transform: none!important;
-ms-transform: none!important;
transform: none!important;
margin-top: 15px;
}
.maschine_button_box li{
margin: 0!important;
padding: 0;
overflow: visible;
}
.maschine_build p{
margin: 10px 0 0 0;
font-size: 10px;
}
.maschine_build h2{
border-bottom: 2px solid #fff;
}
.maschine_build .maschine_content{
padding-bottom: 20px;
}
.button_machine_info{
margin-bottom: 10px;
}
.maschinebox div.machine:LAST-OF-TYPE{
margin-bottom: 0;
}
.maschine_zustand_box{
height: 6px;
width: 100%;
background-color: rgba(255,255,255,0.3);
}
.maschine_zustand{
position: relative;
height: 100%;
background-color: #111;
}
.maschine_zustand_no{
line-height: 1;
position: absolute;
right: 0;
top: -4px;
font-size: 10px;
background-color: #111;
padding: 3px 3px 1px 3px;
color: #fff;
}
.maschine_zustand_no:AFTER{
content: '%';
}
/*
.maschine_produktion_values table tr td:FIRST-CHILD{
width: 40px;
}
*/
.maschine_produktion_values{
padding-bottom: 20px;
}
.maschine_produktion_values_subtable{
border: 2px solid #fff;
width: auto!important;
display: inline-table;
}
.maschine_produktion_values_subtable td{
border-left: 2px solid #fff;
height: auto!important;
padding: 0!important;
}
.info_cost{
padding: 5px 5px 2px 5px!important;
display: block;
}
.maschine_produktion_values_subtable td:HOVER{
background-color: #111!important;
}
.maschine_produktion_values_subtable tr td:FIST-CHILD{
border: 0;
}
.maschine_produktion_slider_box{
position: relative;
padding: 10px;
padding-top: 14px;
margin-bottom: 10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.maschine_produktion_slider_box label{
position: absolute;
top: -12px;
left: 0;
background-color: #fff;
padding: 2px 2px 0 2px;
font-size: 8px;
}
.maschine_produktion_slider{
width: 100%;
}
.maschine_production{
position: relative;
}
.maschine_production_pause_button{
position: absolute;
left: 0;
top: 0;
width: 42px;
z-index: 99;
}
.machine_action_box{
height: 0;
overflow: hidden;
-webkit-transition: height 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: height 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: height 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.machine_action_box.show{
-webkit-transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.machine_action_box_option{
border: 2px solid #fff;
margin-top: 10px;
}
.machine_action_button{
margin-top: 10px;
color: #fff;
}
.machine_action_box_option h3{
position: relative;
background-color: rgba(0,0,0,0.4);
padding: 10px 10px 7px 10px;
color: #fff;
border-bottom: 2px solid #fff;
margin: 0;
}
.machine_action_box_close{
position: absolute;
height: 100%;
width: 38px;
top: 0;
right: 0;
border-left: 2px solid #fff;
color: #fff;
text-align: center;
line-height: 31px;
}
.machine_action_box_close:HOVER{
background-color: #000;
}
.machine_action_box_option .strat_table_box{
margin: 0;
}
.maschine_production_pause_button:BEFORE{
position: absolute;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
line-height: 40px;
top: 0;
left: 0;
color: #2b2b2b;
}
.machine_produces_option .machine_production,
.machine_uses .machine_production,
.machine_produces .machine_production{
margin: 0;
margin-left: 4px;
}
.machine_production{
position: relative;
display: inline-block;
margin: 4px;
background-color: rgba(255,255,255,0.3);
padding-left: 17px;
min-height: 16px;
}
.machine_production_icon{
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 100%;
background-color: rgba(255,255,255,0.7);
color: #111;
}
.machine_production_icon:BEFORE{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 16px;
font-size: 12px;
top: 0;
left: 0;
}
.duckshipmachine{
position: relative;
}
#duckship_buy h2{
margin-bottom: 15px;
}
#duckship_buy_info{
display: none;
}
#duckship_buy .strat_table_box{
margin: 15px 0;
}
#duckship_marketing_button{
display: none;
}
.button_refurbish_buy,
.button_duckship_buy{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
#tooltip{
position: fixed;
display: none;
z-index: 99999;
background-color: #111;
color: #fff;
padding: 5px 10px;
max-width: 500px;
-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
}
#tooltip p{
display: none;
color: inherit;
font-size: 10px;
}
#tooltip h4{
margin: 0;
margin-bottom: 10px;
padding: 5px 0;
border-bottom: 2px solid #fff;
color: inherit;
font-size: 12px;
font-family: "dogica_bold";
}
#tooltip.notext h4{
margin-bottom: 0;
border: 0;
}
.machine_production_val{
font-size: 12px;
padding: 3px 3px 1px 3px;
}
.maschinebox table tr td{
background-color: transparent!important;
border-bottom: 2px solid #fff;
color: #fff;
font-size: 10px;
height: 34px;
line-height: 1;
}
.feedback_box{
position: relative;
}
.feedback_box_cont{
position: relative;
overflow: hidden;
height: 0;
-webkit-transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feedback_text{
padding: 10px;
padding-bottom: 10px;
line-height: 1.4;
color: #fff;
padding-bottom: 30px;
z-index: 1;
position: relative;
}
.feedback_text.error{
background-color: #f00;
}
.feedback_text.success{
background-color: #249400;
}
.feedback_progress_box{
position: absolute;
bottom: 15px;
left: 10px;
width: calc(100% - 20px);
border: 2px solid #fff;
height: 8px;
z-index: 9;
opacity: 0;
-webkit-transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feedback_box.show .feedback_progress_box{
opacity: 1;
}
.feedback_progress{
position: absolute;
height: 100%;
width: 0%;
background-color: #fff;
}
#dialog{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 999999;
display: none;
}
#dialog_meta_box{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: scale3d(0,0,0);
transform: scale3d(0,0,0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
transition: -webkit-transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
-o-transition: transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
transition: transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
transition: transform 0.6s cubic-bezier(0.7, 0, 0.84, 0), -webkit-transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
}
#dialog.show #dialog_meta_box{
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
#dialog_box{
min-width: 50vw;
min-height: 30vh;
background-color: rgba(255,255,255,0.8);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
}
#dialog_box h4{
background-color: #fff;
padding: 16px 20px 10px 20px;
font-size: 24px;
margin: 0;
font-family: "dogica_bold";
}
#dialog_close{
position: absolute;
right: 0;
top: 0;
width: 42px;
height: 42px;
background-color: #111;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 42px;
}
#dialog_buttons{
position: absolute;
bottom: 10px;
right: 10px;
}
#dialog_text{
padding: 20px;
line-height: 1.4;
}
#dialog_content table{
padding: 20px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
width: 100%;
}
#dialog_content table tr td:LAST-CHILD{
text-align: right;
}
#dialog_buttons button{
margin-left: 10px;
}
#loadingscreen{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 9999999;
background-color: #008bca;
}
#loadingscreenlogo{
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 100px;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
background-image: url('data:image/svg+xml,'); background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
}
.start #loadingscreenlogo{
background-image: url('data:image/svg+xml,');
}
#loadingscreenversion,
#loadingscreenversion span{
font-size: 8px;
opacity: 0.5;
}
#loadingscreenversion span{
font-family: 'dogica_bold';
}
#loadingscreentext{
position: absolute;
left: 150px;
bottom: -10px;
text-align: center;
color: rgba(255,255,255,0.4);
width: 100vw;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu_button_list{
-webkit-transform: none!important;
-ms-transform: none!important;
transform: none!important;
margin: 0;
padding: 0;
margin-top: 10px;
list-style: none;
}
.menu_button_list li{
overflow: visible!important;
/*
border-bottom: 2px solid #fff;
padding-bottom: 20px!important;
*/
background-color: rgba(0,0,0,0.2);
padding: 10px;
padding-bottom: 14px;
}
.menu_button_list_horizontal li{
display: inline-block;
width: auto;
margin-right: 20px;
border-bottom: 0;
margin-bottom: 0!important;
padding: 0;
background-color: transparent;
}
.menu_button_list_horizontal{
border-bottom: 2px solid #fff;
margin-bottom: 20px;
padding-bottom: 20px;
}
#scene-explorer-host *,
#inspector-host *{
color: #fff;
}
#com{
position: absolute;
bottom: 100px;
min-height: 150px;
width: 70vh;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(0,0,0,0.3);
z-index: 9800;
left: 50%;
-webkit-transform: translate3d(-50%,300px,0);
transform: translate3d(-50%,300px,0);
padding: 10px;
color: #fff;
-webkit-transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: all 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
opacity: 0;
}
#com.show{
-webkit-transform: translate3d(-50%,0,0)!important;
transform: translate3d(-50%,0,0)!important;
-webkit-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 1;
}
#comcont{
position: relative;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
-o-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
#comwords:BEFORE{
content: '';
width: 36px;
height: 36px;
position: relative;
float: right;
z-index: -1;
}
#comwords span{
margin-right: 4px;
}
#comwords span.wait{
margin-right: 0;
}
#comimg{
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
aspect-ratio: 1/1;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-preferred-size: 150px;
flex-basis: 150px;
background-color: #111;
border: 2px solid #fff;
max-height: 150px;
}
#comimg video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 99;
}
#speakervid_noise{
display: block!important;
z-index: 100;
opacity: 1;
transition: opacity 0.4s cubic-bezier(0, 0.55, 0.45, 1);
mix-blend-mode: color-burn;
}
.delay #speakervid_noise{
transition-delay: 0.5s;
}
#speakervid_noise.show{
opacity: 0;
}
#dialog_trigger_sound{
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background-color: rgba(0,0,0,0.5);
border-top: 2px solid #fff;
border-left: 2px solid #fff;
z-index: 999;
text-align: center;
font-size: 16px;
line-height: 28px;
}
#dialog_trigger_sound:HOVER{
background-color: rgba(0,0,0,0.8);
}
#comclose{
position: absolute;
top: 0;
right: 0;
padding: 10px;
background-color: rgba(0,0,0,0.4);
width: 36px;
height: 36px;
text-align: center;
line-height: 16px;
cursor: pointer;
}
#comclose:HOVER:BEFORE{
font-size: 18px;
}
#comtext{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 2px 0 45px 0;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
-o-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
#comspeaker,
#comwords{
display: inline;
line-height: 1.3;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
-o-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
#combuttons{
position: absolute;
bottom: 0;
right: 0;
}
#combuttons button{
margin-left: 10px;
opacity: 0.5;
}
#combuttons.show button{
opacity: 1;
}
#comwords span{
display: inline-block;
opacity: 0;
}
#comwords span.break{
display: block;
font-size: 5px;
}
#comwords span.show{
opacity: 1;
}
#comspeaker,
#comspeaker span{
color: #ff5500;
font-family: 'dogica_bold';
}
.effectul{
padding: 0;
list-style: none;
}
.effectul li{
margin-bottom: 4px;
}
.effectul li span:BEFORE{
background-color: #111;
padding: 4px;
margin-right: 4px;
}
#statuslog{
position: fixed;
bottom: 4px;
left: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.status_big #statuslog{
-webkit-transform: scale3d(1.5,1.5,1.5);
transform: scale3d(1.5,1.5,1.5);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.status_noshow #statuslog{
display: none;
}
.statuslog_round{
margin-right: 4px;
color: inherit;
display: none;
}
.statuslog_message{
color: inherit;
}
.statuslog_msg{
position: relative;
min-height: 14px;
max-height: 14px;
height: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 2px;
}
.statuslog_bg{
padding: 3px 4px 0px 18px;
background-color: rgba(255,255,255,0.8);
display: inline-block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.statuslog_msg.status_newround .statuslog_bg{
background-color: rgba(0,0,0,0.7);
color: #fff;
}
.statuslog_msg.status_newround .statuslog_message{
font-family: 'dogica_bold';
}
/*
.statuslog_msg.status_newround .statuslog_round{
display: block;
}
*/
.statuslog_icon{
width: 14px;
height: 14px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 13px;
}
.statuslog_icon:BEFORE{
color: #111;
}
.statuslog_msg *{
font-size: 10px;
}
.build_box{
}
.build_progress_tr{
display: none;
}
.build_progress_tr td{
text-align: left!important;
}
.build_box .progress_box{
margin-bottom: 2px;
height: 10px;
}
.build_box .progress_box .progress{
background-color: #fff;
height: 6px;
}
.build_box .strat_table{
margin-top: 15px;
color: #2b2b2b!important;
}
.build_box table,
.build_box table tr td{
border: 2px solid #fff;
}
.build_box table tr td:LAST-OF-TYPE{
text-align: right;
width: 100px;
}
.build_needs_ul{
-webkit-transform: none!important;
-ms-transform: none!important;
transform: none!important;
padding-left: 30px;
margin-top: 10px;
}
.build_text_box{
padding: 10px;
border-bottom: 2px solid #fff;
margin-bottom: 15px;
font-size: 12px;
}
.build_needs_box{
background-color: rgba(0,0,0,0.2);
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 1px;
}
.build_needs_box h3,
.build_needs_box h4{
position: relative;
margin: 0;
background-color: rgba(0,0,0,0.4);
padding: 10px 10px 7px 10px;
color: #fff;
line-height: 1;
}
.build_needs_box h4:BEFORE{
position: absolute;
right: 0;
height: 100%;
background-color: rgba(0,0,0,0.4);
top: 0;
width: 31px;
text-align: center;
line-height: 31px;
}
.build_needs_box div{
margin: 10px;
margin-bottom: 9px;
background-color: rgba(0,0,0,0.2);
padding-bottom: 1px;
}
.build_indicator_okay,
.build_indicator_need{
position: relative;
list-style: none;
overflow: visible!important;
margin-bottom: 10px!important;
}
.building_start{
margin-bottom: 15px;
}
.build_needs_box_building{
padding-bottom: 0
}
.researched:BEFORE,
.not_researched:BEFORE,
.researched .maschine_optional_name_icon:BEFORE,
.not_researched .maschine_optional_name_icon:BEFORE,
.build_indicator_okay:BEFORE,
.build_indicator_need:BEFORE{
content: '';
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: -3px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
.not_researched .maschine_optional_name_icon:BEFORE,
.not_researched:BEFORE,
.build_indicator_need:BEFORE{
background-image: url('data:image/svg+xml,');
}
.researched .maschine_optional_name_icon:BEFORE,
.not_researched .maschine_optional_name_icon:BEFORE{
left: 0;
top: auto;
margin-top: -3px;
}
.maschine_optional_name{
padding-left: 20px!important;
}
tr.researched:BEFORE,
tr.not_researched:BEFORE{
display: none;
}
#main_button_start{
position: absolute;
bottom: -100px;
left: 50%;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-animation: startani 1s infinite; /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
animation: startani 1s infinite; /* IE 10+, Fx 29+ */
padding: 15px 20px 12px 20px;
line-height: 1;
}
.start #main_button_start{
-webkit-transform: translate3d(-50%,-300px,0);
transform: translate3d(-50%,-300px,0);
}
.stockindicator.alert,
.alert{
}
@-webkit-keyframes startani {
0%, 49% {
background-color: rgba(255,255,255,0.5);
}
50%, 100% {
background-color: inherit;
}
}
#all{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*TMP*/
#campos{
position: absolute;
top: 50px;
left: 4px;
background-color: rgba(255,255,255,0.8);
padding: 10px;
z-index: 99998;
display: none;
}
.campos #campos{
display: block;
}
#campos label{
display: block;
}
.cam_inp{
width: 70px;
}
.label_pos{
display: inline-block!important;
margin-left: 10px;
}
.cam_range{
width: 216px;
}
#control_buttons,
#progress_box,
#nav_btn_refurbish,
#nav_btn_recycle{
display: none;
}
.menubuttonstay{
position: relative;
}
#menubuttonstay_factory_lvl2,
#menubuttonstay_factory_lvl3{
display: none;
}
.noresearchindicator:AFTER{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 7px;
height: 7px;
background-color: #ff0000;
display: none;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
animation: blink-animation 1s steps(5, start) infinite;
}
.noresearchindicatortext{
color: #ff0000;
display: none;
}
.tecwarn .noresearchindicatortext,
.tecwarn .noresearchindicator:AFTER{
display: inline-block;
}
#ui_button_next_round{
display: block;
}
#savegame{
position: absolute;
top: 50%;
left: 50%;
width: 450px;
background-color: rgba(0,0,0,0.7);
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
z-index: 999999999;
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
-o-transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56), -webkit-transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}
#savegame p{
color: #fff;
}
#savegame.show{
-webkit-transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-o-transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#savegame_close{
position: absolute;
top: 0;
right: 0;
width: 35px;
height: 35px;
background: #2b2b2b;
color: #fff;
line-height: 34px;
text-align: center;
}
#savegame h3{
background-color: #fff;
margin: 0;
padding: 10px;
}
.savegame_cont{
padding: 10px;
}
/*MOBILE VERSION */
#turnaround{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: -100vw;
background-color: #008bca;
color: #fff;
z-index: 99999999999;
display: none;
}
#turnaround_box{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
padding: 10px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ismobile *{
font-size: 10px;
}
.ismobile #nav_poi_box{
left: auto;
right: 4px;
bottom: 4px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
padding: 10px;
}
.ismobile #nav_poi li:LAST-CHILD{
margin-right: 0;
}
/*
.ismobile #nav_poi li{
display: block;
margin-bottom: 10px;
margin-right: 0;
}
*/
.ismobile #ui_button_next_round_box{
top: -10px;
right: auto;
left: -67px;
}
.ismobile #com{
z-index: 999999;
width: 384px;
bottom: 71px;
-webkit-transform: translate3d(0,calc(100% + 75px),0)!important;
transform: translate3d(0,calc(100% + 75px),0)!important;
min-height: auto;
right: 4px;
left: auto;
}
.ismobile #com.show{
-webkit-transform: translate3d(0,0,0)!important;
transform: translate3d(0,0,0)!important;
}
.ismobile #comimg{
display: block;
float: left;
width: 80px;
margin-right: 4px;
margin-bottom: 4px;
}
.ismobile #comcont{
display: block;
}
.ismobile #comtext{
padding-bottom: 2px;
}
.ismobile #comclose{
position: relative;
float: right;
top: -10px;
right: -10px;
}
.ismobile #comtext{
padding-bottom: 2px;
}
.ismobile #combuttons{
position: relative;
bottom: auto;
right: auto;
float: right;
margin-top: 4px;
margin-left: 4px;
}
.ismobile #mainmenu{
width: 50%;
height: auto;
min-width: auto;
top: 4px;
bottom: 4px;
left: 4px;
right: auto;
-webkit-transform: translate3d(-102%,0,0);
transform: translate3d(-102%,0,0);
z-index: 999999;
}
.ismobile #mainmenu.show{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.ismobile .ui_menu_stock_overview_box {
-ms-flex-preferred-size: calc(25% - 30px / 4);
flex-basis: calc(25% - 30px / 4);
}
.ismobile #fps b{
font-size: 8px;
}
.ismobile .maschine_content{
padding: 10px;
}
.ismobile .button_machine_info{
margin-bottom: 0;
}
.ismobile #tectree_close{
top: 20px;
left: 20px;
}
.ismobile #tectree_info{
height: 100%;
top: 0;
width: 50%;
left: 0;
padding-top: 60px;
-webkit-transform: translate3d(-102%,0,0);
transform: translate3d(-102%,0,0);
}
.ismobile.tectreeinfo #tectree_info{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.ismobile #tectree{
z-index: 999999;
-webkit-transform: translate3d(-102%,0,0);
transform: translate3d(-102%,0,0);
}
.ismobile.tectree #tectree{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.ismobile .tectree_scroll svg{
width: 250%;
height: auto;
margin: 20px 70px;
}
.ismobile #tectree .simplebar-track{
right: 20px;
left: 20px!important;
bottom: 10px;
}
.ismobile #tectree .simplebar-track.simplebar-vertical{
right: 10px !important;
left: auto !important;
bottom: 20px;
top: 20px;
width: 11px;
}
.ismobile .mainmenu_quicknav li button{
font-size: 16px;
}
.ismobile .mainmenu_stay_icon{
font-size: 24px;
}
.ismobile nav{
height: 1px;
}
.ismobile #nav_store{
right: 0;
}
.ismobile nav ul{
height: auto;
}
.ismobile nav ul li{
display: block;
margin-bottom: 2px;
height: 14px;
font-size: 8px;
width: auto;
min-width: 35px;
padding-top: 4px;
padding-right: 16px;
margin-left: 0;
}
.ismobile #nav_stats ul li{
display: block;
}
.ismobile .nav_seperator{
margin-bottom: 2px;
margin-right: 4px;
}
.ismobile .nav_seperator:AFTER{
display: none;
}
.ismobile nav ul li::before {
width: 14px;
height: 14px;
line-height: 14px;
font-size: 12px;
}
.ismobile #nav_stats{
position: absolute;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
width: 100vw;
top: 4px;
}
.ismobile #nav_stats ul li{
display: inline-block;
margin-left: 2px;
}
.ismobile .nav_store_box{
font-size: 0;
}
.ismobile #nav_stats ul{
margin-right: 4px;
font-size: 0;
}
.ismobile #nav_stats ul li .val{
font-size: 8px;
padding-left: 3px;
}
.ismobile .statuslog_msg *{
font-size: 6px;
}
.ismobile .statuslog_msg{
min-height: 10px;
max-height: 10px;
height: 10px;
margin-bottom: 1px;
}
.ismobile .statuslog_icon{
height: 10px;
width: 10px;
line-height: 10px;
}
.ismobile .statuslog_bg{
height: 10px;
line-height: 10px;
padding: 1px 2px 0px 14px;
}
.ismobile #newspaperbox{
z-index: 999999999999;
}
.ismobile #newspaper{
left: 10px;
width: calc(100% - 80px);
height: calc(100% - 20px);
-webkit-transform: translate3d(50%,80%,0) rotate(-30deg);
transform: translate3d(50%,80%,0) rotate(-30deg);
}
.ismobile #newspaper.show{
-webkit-transform: translate3d(0,-50%,0) rotate(0);
transform: translate3d(0,-50%,0) rotate(0);
}
.ismobile #newspaper_header h2{
padding: 5px 20px;
}
.ismobile #main_button_start{
top: 100%;
-webkit-transform: translate3d(-50%,10px,0);
transform: translate3d(-50%,10px,0);
bottom: auto;
}
.ismobile.start #main_button_start{
-webkit-transform: translate3d(-50%,-300%,0);
transform: translate3d(-50%,-300%,0);
bottom: auto;
}
.ismobile #menubox{
width: 1px;
height: 50px;
transition: -webkit-transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.ismobile.gamemenu #menubox{
-webkit-transform: translate3d(0,-102%,0);
transform: translate3d(0,-102%,0);
}
.ismobile.gamemenu #mainmenu_box ul li{
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate3d(-105%,0,0);
transform: translate3d(-105%,0,0);
}
.ismobile #mainmenu_box{
z-index: -1;
pointer-events: none;
}
.ismobile.menu #mainmenu_box{
z-index: 9999;
pointer-events: all;
}
.ismobile #mainmenu_box ul li{
margin-bottom: 17px;
}
.ismobile #mainmenu_box ul li span{
padding: 10px 20px 7px 37px;
}
.ismobile #mainmenu_box ul li span::before{
width: 28px;
height: 100%;
line-height: 28px;
}
.ismobile .menu_button_row,
.ismobile .menu_button_row span,
.ismobile #menu_button_box{
font-size: 0;
}
.ismobile #settings_keyboard{
display: none;
}
.ismobile #settings_box{
width: calc(100% - 80px);
margin: 0;
left: 10px;
}
.ismobile .credits_box{
margin-top: 50px;
padding-bottom: 50px;
}
.ismobile #ui_credits_table{
padding-bottom: 50px;
}
.ismobile .menucontent{
padding-bottom: 30px;
}
@media (orientation: portrait) {
.ismobile #turnaround{
left: 0;
display: block;
}
}