html, body {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--theme-background-color,white);
}

html {
	/* 
	use this together with <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	so that iPhoneX+ background top "notch" has the same background
	but that leads to many little issues in bottom etc... use it carefully or don't

    margin-top: constant(safe-area-inset-top); // for iOS 11
	margin-top: env(safe-area-inset-top); // for iOS 12+
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
	margin-bottom: env(safe-area-inset-bottom);
	*/
	margin-top: constant(safe-area-inset-top);
	margin-top: env(safe-area-inset-top);
}

body {
	margin: 0;
	padding:0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* hide scrollbars on mobile devices */
/*
@media (hover: none) {
	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 0;
		height: 0;
		display: none;
	}
}
*/

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid var(--theme-color-3);
	border-radius: 2px;
	background-color:var(--theme-background-color);
	color:var(--theme-color-1);
}

input:disabled {
	color: var(--theme-color-disabled);
}

button {
	color: var(--theme-color-2);
	background-color: var(--theme-button-color);
	outline: none;
	border-radius: 0.5em;
}
button:hover {
	background-color: var(--theme-button-hover-color);
}
@media (hover: none) {
	button {
		background-color: var(--theme-button-active-color);
	}
}

input:disabled, button:disabled, select:disabled, textarea:disabled {
	color: var(--theme-color-disabled);
}

button:not(:disabled):active, select:not(:disabled):active {
	background-color: var(--theme-button-active-color);
}

input:focus, button:focus, select:focus, textarea:focus {
	border-color: var(--theme-color-2);
}

.table {
	display:table;
}
.table > div {
	display:table-row;
}
.table > div > div {
	display:table-cell;
}
.row {
	display:table-row;
}
.row > div {
	display:table-cell;
}
.bold {
	font-weight:bold;
}
.left {
	text-align:left;
}
.right {
	text-align:right;
}
.center {
	text-align: center;
}
.pointer {
	cursor:pointer;
}