button {
	background-color: var(--button-color);
	border: var(--button-border);
	border-radius: var(--border-radius);
	cursor: pointer;
	/*transition: all .3s;*/
}

button:hover {
	background-color: var(--button-color-hover);
}

button:active {
	background-color: var(--button-color-click);
}

label.deactiv {
	color: var(--text-color-disabled);
}

select {
	cursor: pointer;
}

a {
	color: inherit;
}

/* THEME SELECTOR */

#btn-theme {
	position: absolute;
	top: 5px;
	right: 5px;
}

#btn-theme img {
	width: 25px;
	height: 25px;
	content: url('../images/moon.svg');
	cursor: pointer;
}

body.dark #btn-theme img {
	content: url('../images/sun.svg');
}

/* GITHUB LINK */

#github-link {
	position: absolute;
	top: 5px;
	left: 5px;
}

#github-link img {
	width: 25px;
	height: 25px;
	content: url('../images/github-mark.png');
}

body.dark #github-link img {
	content: url('../images/github-mark-white.png');
}

/* GAME SELECTOR */

div#game-container > div:first-child {
	float: left;
	margin: 0.15em 0.5em 0 0.5em;
}

div#game-container > div:last-child {
	overflow: hidden;
	width: auto;
}

div#game-container select {
	width: 100%;
	font-size: 110%;
	border: var(--button-border);
	background-color: var(--background-game-selector-color);
}

/* RESULTS */

div.extras-header {
	margin-top: 0.5em;
	text-decoration: underline;
}

div.result-line-ex {
	font-size: 90%;
}

span.result-value {
	font-weight: bold;
}

span.result-extra {
	font-style: italic;
}

/* CUSTOMIZATION HEADERS */

button#btn-customize {
	width: 100%;
}

div.cat-header {
	margin-top: 0.2em;
}

label.cat-label {
	font-weight: bold;
}

div.cat-header {
	position: relative;
	border-bottom: var(--category-header-border);
}

div.cat-header > button {
	position: absolute;
	right: 0;
	width: 4em;
	padding: 0;
	height: 100%;
}

div.condition-block {
	font-size: 90%;
	padding: 0.1em 0.2em 0 0.2em;
}

span.condition-header {
	color: var(--condition-color);
}

/* POP-UP HINTS */

.hint-coord-base {
	position: relative;
}

div.hint {
	display: inline-block;
}

div.hint > svg {
	cursor: pointer;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: -0.15em;
	margin-left: 0.1em;
	vertical-align: middle;
	fill: var(--text-color);
}

div.hint > svg > path {
	stroke: var(--info-icon-color);
	stroke-width: var(--info-icon-thickness);
}

.popup-block {
	z-index: 1;
	position: absolute;
	border-radius: calc(var(--border-radius) * 2);
	background-color: var(--hint-bckg-color);
    color: var(--hint-text-color);
	text-align: center;
    font-style: normal;
    font-size: 90%;
    padding: 0.4em;
	top: 100%;
	left: 50%;
	width: 22em;
	transform: translateX(-50%);
	max-width: 80vw;
	display: none;
}

/* special case for the hint on "Extra" */
.hint.extra {
	font-size: 90%;
	font-weight: normal;
}
.hint.extra .popup-block {
	top: unset;
	bottom: 0;
}
.hint

.popup-block.shown {
	display: flex;
	justify-content: space-between;
	column-gap: 0.4em;
}

.popup-text {
	width: 100%;
	align-self: center;
	margin-bottom: 0.1em;
}

.popup-controls {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.popup-controls > div {
	cursor: pointer;
}

/* top buttons simpler, on-hover hints */
.popup-block#theme-hint,
.popup-block#github-hint {
	top: 0;
	left: auto;
	width: auto;
	transform: unset;
	max-width: unset;
	white-space: nowrap;
	font-size: 81%;
}

.popup-block#theme-hint {
	right: 30px;
}

.popup-block#github-hint {
	left: 30px;
}

#btn-theme:hover > .popup-block#theme-hint,
#github-link:hover > .popup-block#github-hint {
	display: block;
}

#theme-hint > span:first-child,
body.dark #theme-hint > span:last-child {
	display: block;
}

body.dark #theme-hint > span:first-child,
#theme-hint > span:last-child {
	display: none;
}