select, ::picker(select) {
  appearance: base-select;
}

html{
	font-size: 16px;
	overflow: hidden;
}

// Bigger font on phones
@media (max-width: 1000px) and (hover: none) and (pointer: coarse)  { 
	html{
		font-size:64px;
	}
}

body{
	overflow: hidden;
	background-color: #111;
	height: 100vh;
	margin: 0px;
}


.node{
	position: absolute;
	border-radius: 50%;
	z-index: 1;
	user-select: none;
}

.nodeChanged{
	border: 10px yellow solid;
}

.nodePositionChanged{
	border: 10px lightblue solid;
}


.nodeUnchanged{
	
}
.nodeRemoved{ 
	border: 10px red solid;
}
.nodeAdded{ 
	border: 10px lightgreen solid;
}

.loadingImage{
	background-color: white;
}

.popupText{
	display: inline;
	margin-right: 5px;
}

.popupOld{
	color: red;
	text-decoration: line-through;
}

.popupNew{
	color: lightgreen;
}

.popupSame{
	//color: white;
}

.popupRecipe{
	font-size: 0.5rem;
}



#idPopup{
	position: fixed;
	display:none;
	background-color: #000000dd;
	left: 0px;
	top: 0px;
	z-index: 2;
	border: 2px #af6025 solid;
	font-size:1rem;
}


#idPopupReminder{
	color:lightgray;
	font-size: 0.5em;
	border-top: 2px #af6025 solid;
	padding: 4px;
	list-style-type: none;
	margin: 0px;
}

#idPopupHeader{
	padding: 4px;
	color: white;
}

#idPopupList{
	border-top: 2px #af6025 solid;
	margin: 0px;
	list-style-type: none;
	font-size:0.8em;
	padding: 4px;
	color: #8888FF;
}

#idTreeContainer{
	width: 1px;
	height: 1px;
	position: relative;
	transform-origin: 0 0;
	transform: scale(0.1);
	opacity: 0.999; // To fix a bug in vivaldi/brave where the div's at the bottom are not rendered
}



.fixedImage{
	z-index: -1;
	position: absolute;
	user-select: none;
}

.rotatedImage{
	transform: rotateX(180deg);
}

#idFooter{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #000000dd;
	//height:35px;
	z-index: 3;
	font-size: 30px;
	padding-bottom: env(safe-area-inset-bottom);
}

.treeSelect{
	vertical-align: middle;
	font-size: 0.7em;
	background: lightgray;
}

.treeSelectLabel{
	vertical-align: middle;
	color: white;
}

.treeSelectContainer{
	display: inline-block;
	white-space: nowrap;  
}

#idPopupPositionChanged{
	border-top: 2px #af6025 solid;
	width: 100%;
	color: yellow;
}

#idLoadingInfo{
	text-align: center;
	font-size: 4rem;
	color: white;
	padding: 10%;
}

/*input#idMenu {
	display:none;
}

label.menuButton{
	width: 75px;
	height: 75px;
	display: block;
	z-index: 4;
	position: fixed;
	background-color: lightgray;
	border-style: solid;
	border-width: 2px;
	border-color: white;
}


label.menuButton:hover{
	cursor:pointer;	
}

.line{
	width:80%;
	margin-left: 10%;
	margin-top:10%;
	height:10%;
	display: block;
	background: #000;
	border-radius: 2px;
	transition: 0.5s; 
	transform-origin: center; 
}

.line:nth-child(1) { margin-top:25%; }

#idMenu:checked + .menuButton .line:nth-child(1){
   transform: translateY(190%) rotate(-45deg);
}
#idMenu:checked + .menuButton .line:nth-child(2){
   opacity:0;
}
#idMenu:checked + .menuButton .line:nth-child(3){
   transform: translateY(-190%) rotate(45deg);
}

#idMenuContainer{
	transition:  0.5s ease-in-out;
	//transform-origin: center;
	background-color: lightgray;
	width: 0px;
	height: 0px;
	z-index: 3;
	position: fixed;
}

#idMenu:checked ~ #idMenuContainer{
	width: 100%;
	height: 100%;
}*/