:root {
	--border-rad: 0.8vw;
	--ui-border-color: black;
	--ui-bg-alpha: 0.7;
}

/* make scrollbar smaller on webkit browsers (not compatible with Firefox, IE and Edge) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background: #888; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

:target {
	padding:1px;
	border-style:dashed;
	border-width:4px;
	border-color:red;
	border-radius:5px;
}

#inputelem {
    background-color:#cecece;
    border:solid 1px #cecece;
    color:#000000;
    height:2vw;
    padding-left:10px;
    width:43vw;
    box-shadow:2px 2px 0 #828181 inset;
	
    border: 0;
    border-radius:var(--border-rad);
	font-size:1vw;
	font-family: Courier;
}

body { /* disable image antialiasing */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

img:not(.noantialias) {  /* disable image antialiasing */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.imgpreload {
	position:absolute;
	top:120vh;
}

#timercontainer {
	background-color:rgba(50,50,50,var(--ui-bg-alpha));
	border-radius:var(--border-rad);
	padding:5px;
	color:white;
	position:absolute;
	z-index:11;
	font-family:Courier;
	font-size:0.9vw;
	width:11vw;
	
	border-style:solid;
	border-width:0.2vw;
	border-color:var(--ui-border-color);
	border-radius:var(--border-rad);
}

#uicontainer {
	position:absolute;
	bottom:1vh;
	left:27vw;
	
	font-family:Courier;
	background-color:rgba(50,50,50,var(--ui-bg-alpha));
	border-radius:var(--border-rad);
	padding:10px;
	z-index:11;
	width:46vw;
	
	border-style:solid;
	border-width:0.2vw;
	border-color:var(--ui-border-color);
	border-radius:var(--border-rad);
}

#controlpanelcontainer {
	font-family:Courier;
	background-color:rgba(50,50,50,var(--ui-bg-alpha));
	border-radius:var(--border-rad);
	padding:5px;
	z-index:11;
	width:9vw;
	
	border-style:solid;
	border-width:0.2vw;
	border-color:var(--ui-border-color);
	border-radius:var(--border-rad);
}

#keyhelpcontainer {
	font-family:Courier;
	background-color:rgba(50,50,50,var(--ui-bg-alpha));
	border-radius:var(--border-rad);
	padding:5px;
	z-index:11;
	width:20vw;
	
	border-style:solid;
	border-width:0.2vw;
	border-color:var(--ui-border-color);
	border-radius:var(--border-rad);
}

#keyhelptable th {
	width: 20%;
}

#keyhelptable td {
	width: 80%;
	font-size:1vw;
	padding-left: 0.5vw;
	color: white;
}

select {
  width: 7.5vw;
  height: 2vw;
  font-size: 1vw;
  background-color: #FF7B00;
  border: 0.2vw solid black;
  border-radius: 0.5vw;
  display: inline-block;
  line-height: 1.5em;
  padding: 0.1em 0.1em 0.1em 0.1em;

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:focus {
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-color: white;
  outline: 1;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

#isecontainer {
	position:fixed;
	top:120vh;
}

#sc_structure_shelter {
	width:30vw;
	height:30vw;
	z-index:-1;
}

#bg_sc_structure_shelter {
	position:absolute;
	top:15vh;
	left:35vw;
	z-index:-1;
}

#sc_structure_shipwreck {
	width:15vw;
	height:15vw;
	z-index:-1;
}

#bg_sc_structure_shipwreck {
	position:absolute;
	top:30vh;
	right:3vw;
	z-index:-1;
}

#sc_effect_hunger {
	width:5vw;
	height:5vw;
	z-index:-1;
}

#bg_sc_effect_hunger {
	position:absolute;
	top:33vh;
	right:8.5vw;
	z-index:-1;
}

#sc_structure_chicken_coop {
	width:30vw;
	height:30vw;
	z-index:-1;
}

#bg_sc_structure_chicken_coop {
	position:absolute;
	bottom:5vh;
	right:3vw;
	z-index:-1;
}

#sc_structure_chicken {
	width:4vw;
	height:4vw;
	z-index:-1;
}

#devmenu {
	display:none;
}

#chickencooppopup {
	position:fixed;
	width:80vw;
	height:80vh;
	top:120vh;
	z-index:5000;
	border-radius:var(--border-rad);
}

.hoverhelp{
	background-color:#fff493;
	cursor:help;
}

div#preload { display: none; }

#outputelem{
	box-shadow:5px 5px 10px grey;
	overflow:auto;
	padding:5px;
	width:45vw;
	height:60vh;
	background-color:#dfdfdf;
	border-width:3px;
	border-radius:var(--border-rad);
	z-index:10;
	font-size:0.9vw;
}

#retryelem{
	width:auto;
	height:auto;
	background-color:#efefef;
	border-color:#efefef;
	border-width:3px;
	border-radius:var(--border-rad);
	color:#000;
	font-size:1.5vw;
}

#itemelem{
	box-shadow:5px 5px 10px grey;
	width:45vw;
	height:2vw;
	background-color:#cda732;
	border-width:3px;
	border-radius:var(--border-rad);
	z-index:10;
}

#structureelem{
	box-shadow:5px 5px 10px grey;
	width:45vw;
	height:2vw;
	background-color:#cecece;
	border-width:3px;
	border-radius:var(--border-rad);
	z-index:10;
}

#effectselem{
	box-shadow:5px 5px 10px grey;
	width:45vw;
	height:2vw;
	background-color:#76dbf8;
	border-width:3px;
	border-radius:var(--border-rad);
	z-index:10;
}

#submitelem{
	width:2vw;
	height:2vw;
	font-size:1vw;
	background-color:#efefef;
	border-color:#efefef;
	border-width:0.2vw;
	border-radius:var(--border-rad);
	color:#000;
}

#premsg #checkload {
	z-index:-20;
}

#jsout {
	z-index:-20;
}