:root {
	--form-control-color: #4374e0;
}

body {
	font-size: 14px;
	font-family: Segoe UI;
	background: url(background.webp) repeat;
	color: white;
	text-align: center;
}

table {
	font-size: 14px;
	color: white;
	text-align: center;
}

.share-mode body {
	background: #0e0e0e !important;
}

table td {
	padding: 0px;
	white-space: nowrap;
}

.groupselector {
	margin: 10 auto;
	width: 90%;
	border-collapse: collapse;
}

.groupselector td {
	border: 1px solid black !important;
}

.raktiv img {
	width: 15px;
	float: right;
}

.bottom {
	vertical-align: bottom;
	font-size:20px;
	font-weight:bold;
	color:lightgray
}

.rbutton {
	width: 160px;
	text-align: left;
	color: white;
	font-size: 20px;
}

input[type=radio] {
	margin-top: -2px;
	vertical-align: middle;
	cursor: pointer;
}

input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--form-background);
	margin: 2px;
	margin-right: 10px;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em dotted #6f6c6c;
	border-radius: 50%;
	transform: translateY(-0.075em);
	display: inline-grid;
	place-content: center;
}

input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
	background-color: CanvasText;
}

input[type="radio"]:checked::before {
	transform: scale(1);
}

input[type="radio"]:checked {
	outline-offset: max(2px, 0.15em);
	border: 0.32em dotted #6f6c6c;
}

.clean {
	background: none;
}

button {
	float: right;
	padding: 6px 10px;
	background: sandybrown;
	border-radius: 5px;
	border: white;
	cursor: pointer;
	margin-left: 5px;
}

button:hover {
	background: #ff7d0e;
}

.fotabla tr > td:first-child {
	width: 30px !important;
}

.periodicnum {
    font-size: 20px;
	font-weight:bold;
	color:lightgray;
}

td {
	width: 90px;
	text-align: center;
	vertical-align: middle;
	height: 94px;
}

.vekony td {
	height: 25px;
}

.wiki {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	height: 90%;
	border: 4px solid #a1813a;
	box-shadow: 20px 19px 16px 11px #0000008f;
	z-index:100;
}

.wiki .fej {
	background: white;
	color: black;
	text-align: left;
	font-size: 2.4em;
}

.wiki .close {
	color: #020202;
	float: right;
	cursor: pointer;
	text-align: center;
	font-size: 1.1em;
	position: absolute;
	right: -25px;
	top: -25px;
	background: white;
	border: 1px solid gray;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	box-shadow: 2px 2px 11px #777373;
}

.wiki .close:hover {
	border: 1px solid orange;
	color: red;
}

.wiki iframe {
	width: 100%;
	height: 100%;
	background: white;
	border: none;
}

.white {
	background: black !important;
	border: 1px solid lightgray !important;
	color: lightgray !important;
	opacity: 0.3 !important
}

.white .lapka {
	background: unset !important
}

.white:not(.orange) * {
	color: lightgray !important;
}

.halogen,
.alkalifold,
.acti,
.acti2,
.alkali,
.lagy,
.atmeneti,
.nemes,
.nemfem,
.felfem,
.radioaktiv {
	border: 1px solid transparent;
	height: 25px;
	color: black;
}

.felfem,
.femek {
	background: rgb(51, 102, 255);
}

.nemfem {
	background: rgb(153, 255, 153);
}

.nemes {
	background: rgb(227 227 152);
}

.alkalifold {
	background: rgb(153, 153, 255);
}

.atmeneti {
	background: rgb(255, 204, 153);
}

.lagy {
	background: #ccc;
}

.alkali {
	background: rgb(204, 204, 255);
}

.acti {
	background: rgb(51, 204, 255);
}

.acti2 {
	background: #219bc4;
}

.halogen {
	background: #FFCCCC;
}

.nemfemek {
	background: #FFCCCC;
}

#radioaktiv {
	background: yellow;
	cursor: pointer;
}

#nemesfem {
	background: gold;
	color: black;
	cursor: pointer;
}

#mesterseges {
	background: gray;
	color: white;
	cursor: pointer;
}

#gazok,
#folyadek,
#ismeretlen {
	border: 1px solid rgb(221, 221, 221);
	color: black;
	background: white;
	cursor: pointer;
	height: 25px;
}

#gazok:hover,
#folyadek:hover,
#ismeretlen:hover {
	background: orange;
}

#gazok {
	color: red;
}

#folyadek {
	color: blue;
}

#ismeretlen {
	color: gray;
}

#radioaktiv,
#nemesfem,
#mesterseges,
.femek {
	height: 25px;
}

.bold {
	font-weight: bold;
}

.halogen:hover .lapka,
.alkalifold:hover .lapka,
.acti:hover .lapka,
.acti2:hover .lapka,
.alkali:hover .lapka,
.lagy:hover .lapka,
.atmeneti:hover .lapka,
.nemes:hover .lapka,
.nemfem:hover .lapka,
.felfem:hover .lapka,
.femek:hover .lapka,
.nemfemek:hover .lapka,
#radioaktiv:hover .lapka,
#nemesfem:hover .lapka,
#mesterseges:hover .lapka{
	background: orange !important;
	cursor: pointer;
}

.halogen:hover,
.alkalifold:hover,
.acti:hover,
.acti2:hover,
.alkali:hover,
.lagy:hover,
.atmeneti:hover,
.nemes:hover,
.nemfem:hover,
.felfem:hover,
.femek:hover,
.nemfemek:hover,
#radioaktiv:hover,
#nemesfem:hover,
#mesterseges:hover {
	background: orange !important;
	border:1px solid white;
	cursor:pointer;
}
.rsz {
	float: left;
	color: #2f2e2e;
	font-weight: bold;
}

.vj {
	font-size: 25px;
	font-weight: bold;
}

.neve {
	font-size: 13px;
}

.at,
.su,
.ol,
.fo,
.fe,
.iz,
.ep {
	color: white;
	font-size: 14px;
	text-shadow: 2px 2px 12px black;
}

.su,
.ol,
.fo,
.fe,
.iz,
.ep {
	display: none;
}

.highlight {
	background: white !important;
}

.jatekModTd {
	background: lightgray;
}

.green {
	background: #bce6bc;
}

.red {
	background: #f9b6b6;
}

.allapot-szilard .lapka, .legend-box.allapot-szilard {
	background: black;
}

.allapot-szilard span {
	color: #b1b1b1 !important;
}

.allapot-folyadek .lapka, .legend-box.allapot-folyadek{
	background: blue;
}

.allapot-folyadek span {
	color: #c9c9c9 !important;
}

.allapot-gaz .lapka, .legend-box.allapot-gaz{
	background: #d36173;
}

.allapot-ismeretlen .lapka, .legend-box.allapot-ismeretlen {
	background: #c7bfbfc7;
}

.allapot-gaz .vj, .allapot-folyadek .vj, .allapot-szilard .vj {
	color: #b5abab
}

.allapot-ismeretlen .vj{
	color: gray;
}

#thermoControls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 20px;
	color: gray;
	position: absolute;
	left: calc(50% - 500px);
}

#thermoControls .top-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	justify-content: center;
}

#thermoControls .top-row input[type="range"] {
	width: 100%;
	max-width: 420px;
}

#thermoControls .bottom-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: center;
}

#thermoControls input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	border: 2px solid #ccc;
	border-radius: 4px;
	background: #222;
	position: relative;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

#thermoControls input[type="checkbox"]:checked {
	background-color: #2f7fff;
	border-color: #2f7fff;
}

#thermoControls input[type="checkbox"]:checked::after {
    content: '✔';
    color: white;
    font-size: 20px;
    position: absolute;
    top: -4px;
    left: 3px;
}

#thermoControls input[type="range"] {
	-webkit-appearance: none;
	height: 20px;
	border-radius: 5px;
	background: linear-gradient(90deg, #0000ff 0%, #ffff00 50%, #ff0000 100%);
	outline: none;
	cursor: pointer;
}

#thermoControls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 35px;
	border-radius: 4px;
	background: white;
	border: 2px solid #555;
	cursor: pointer;
	transition: transform 0.15s;
}

#thermoControls input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

#thermoControls input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	border: 2px solid #555;
	cursor: pointer;
	transition: transform 0.15s;
}

#thermoControls input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.2);
}

#thermoControls label {
	display: contents;
}

#tempReadout, #discReadout {
	font-weight: bold;
	color: #ffd966;
	min-width: 140px;
	text-align: center;
}

#stateLegend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: center;
	font-size: 20px;
	color: gray;
}

#stateLegend .legend-box:hover {
	cursor: pointer;
	border: 2px solid orange;
	filter: drop-shadow(2px 4px 6px black)
}

.legend-box {
	display: inline-block;
	width: 25px;
	height: 25px;
	border: 2px solid #ccc;
	margin-right: 4px;
	vertical-align: middle;
}

.tip::after, .tip::before { content: none !important; }

.tip { position: relative; cursor: help; }

.tip-label { white-space: nowrap; }

.tip-label sup { font-size: .75em; line-height: 0; vertical-align: super; }

.tip .tip-box {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(6px);
	background: #fff;
	color: #000 !important;
	padding: 8px 10px;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0,0,0,.35);
	max-width: 150px;
	width: max-content;
	white-space: pre-wrap;
	text-align: center;
	font-size: 12px;
	line-height: 2;
	z-index: 10001;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	text-shadow: none !important;
}

.tip .tip-box::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
}

.tip:hover .tip-box { opacity: 1; }

.lapka {
	overflow: visible;
	margin: 1px;
    padding: 4px;
    border: 0px solid #543020;
}

#discoveryControls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 20px;
	color: gray;
	position: absolute;
	left: calc(50% - 500px);
	width: 650px;
}

#discoveryControls .top-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	justify-content: center;
}

#discoveryControls .top-row input[type="range"] {
	width: 100%;
	max-width: 420px;
}

#discoveryControls .bottom-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: center;
}

#discoveryControls input[type="range"] {
	-webkit-appearance: none;
	height: 20px;
	border-radius: 5px;
	background: linear-gradient(
		to right,
		#cccccc 0%,
		#cccccc 60%,
		#2f7fff 60%,
		#2f7fff 100%
	);
	outline: none;
	cursor: pointer;
}

#discoveryControls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 15px;
	height: 35px;
	border-radius: 4px;
	background: white;
	border: 2px solid #555;
	cursor: pointer;
	transition: transform 0.15s;
}

#discoveryControls input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

#discoveryControls input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	border: 2px solid #555;
	cursor: pointer;
	transition: transform 0.15s;
}

#discoveryControls input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.2);
}

#discoveryControls input[type="checkbox"] {
	width: 25px;
	height: 25px;
	cursor: pointer;
	position: relative;
	appearance: none;
	border: 2px solid gray;
	border-radius: 4px;
	background-color: white;
}

#discoveryControls input[type="checkbox"]:checked {
	background-color: #2f7fff;
	border-color: #2f7fff;
}

#discoveryControls input[type="checkbox"]:checked::after {
	content: '✔';
	color: white;
	font-size: 18px;
	position: absolute;
	top: 0px;
	left: 4px;
}

#discoveryControls label {
	display: contents;
}

@media (max-width: 1800px) {
	#thermoControls, #discoveryControls {
		position: absolute;
		left: auto;
		transform: none;
		width: 623px;
		max-width: 100%;
		gap: 8px;
		left: 380px;
	}

	#thermoControls .top-row, #discoveryControls .top-row  {
		padding: 0 8px;
		gap: 10px;
		justify-content: center ;
	}

	#thermoControls .top-row input[type="range"],
	#discoveryControls .top-row input[type="range"]	{
		width: 100%;
		max-width: 900px;
	}

	#thermoControls .bottom-row, #discoveryControls .bottom-row {
		flex-wrap: wrap;
		gap: 8px 14px;
		justify-content: center;
	}

	#tempReadout {
		min-width: 0;
		text-align: center;
	}

	#stateLegend {
		margin-left: 0;
		flex-wrap: wrap;
		gap: 8px 12px;
		justify-content: center;
	}
}