@import url("https://f.pmo.ee/fonts/Charter.css");
@import url("https://f.pmo.ee/fonts/GTEesti.css");

html {
	--webbg: #fff;
	--text: #262626;
	--bg: #eaedf1;
	--cubes: #acb2bd;
	--whiteorblack: #eff3f5;
	--white: #eff3f5;
	--black: #262626;
	--sectioncolor: #000099;
	--sectioncolor2: #3399ff;
	--sectioncolor3: #66ccff;
	--invert: none;
	--displayDark: none;
	--displayLight: block;
	--btntextcolor: rgba(0, 0, 0, 0.3);
	--btnhoverfilter: brightness(0.95);
	--groupbtnhoverfilter: brightness(1.15);
	--tableborder: rgba(0, 0, 0, 0.15);
}

html.dark-theme {
	--webbg: #141414;
	--text: #eff3f5;
	--bg: #202124;
	--cubes: #3f4550;
	--whiteorblack: #262626;
	--invert: invert(0.95) hue-rotate(180deg);
	--displayDark: block !important;
	--displayLight: none !important;
	--btntextcolor: rgba(255, 255, 255, 0.4);
	--btnhoverfilter: brightness(1.5);
	--tableborder: rgba(255, 255, 255, 0.15);
}

body {
	margin: 0;
	background: var(--webbg);
}

.cubes {
	height: 12px;
	color: var(--cubes);
	background-image: radial-gradient(
		circle at 1px 1px,
		currentColor 1px,
		transparent 0
	);
	background-size: 4px 4px;
	background-position: center left;
	margin-bottom: 11px;
}

* {
	-webkit-font-smoothing: grayscale;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Charter", serif;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
	color: var(--text);
}

h1 {
	font-family: "GT Eesti";
	font-weight: 700;
	font-size: 29px;
	line-height: 1.2;
	margin-bottom: 11px;
}

.formulas {
	/*background: var(--bg);
	padding: 13px 14px;*/
	margin-bottom: 10px;
}

.formulas .formula:not(:nth-last-of-type(1)) {
	margin-bottom: 10px;
}

.formulas .formula * {
	font-size: 14px;
	line-height: 1.5;
}

.noresults {
	text-align: center;
	font-size: 16px;
	margin-top: 13px;
	opacity: 0.5;
}

.hiddenrow {
	display: none;
}

.search {
	text-align: right;
}

input[type="text"] {
	width: 300px;
	height: 33px;
	font-family: "Charter";
	font-weight: 400;
	font-size: 16px;
	line-height: 15px;
	padding: 0;
	padding-left: 6px;
	border: 0;
	border-bottom: 1px solid var(--tableborder);
	color: var(--text);
	margin: 10px 0 12px 0;
	background-color: transparent;
	background-image: url("assets/images/luup.svg");
	background-repeat: no-repeat;
	background-size: 25px 17px;
	background-position: right;
	box-sizing: border-box;
}

input[type="text"]::placeholder {
	opacity: 0.5;
}

input[type="text"]:focus {
	outline: none;
	border-bottom-color: var(--text);
}

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

table td b {
	display: none;
}

table td,
table td *,
table th {
	font-size: 16px;
}

table td,
table th {
	vertical-align: middle;
	text-align: center;
	border-bottom: 1px solid var(--tableborder);
	padding: 9px 11px;
	color: var(--text);
}

table th {
	font-weight: bold;
	cursor: pointer;
	vertical-align: middle;
	background: var(--sectioncolor);
	color: #fff;
	border: 0;
	height: 25px;
	user-select: none;
	line-height: 1.2;
}

.sorting-arrows {
	width: 7px;
	margin-right: 4px;
	margin-bottom: -1px;
	filter: var(--invert);
}

table th:nth-of-type(1),
table td:nth-of-type(1) {
	font-weight: bold;
	padding-right: 5px;
	text-align: right;
	max-width: 33px;
}

table th:nth-of-type(2),
table td:nth-of-type(2) {
	text-align: left;
}

table td:nth-last-of-type(1) {
	font-weight: bold;
}

.btns {
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
	margin-bottom: 3px;
}

.btn {
	background-color: var(--bg);
	height: 36px;
	font-family: "GT Eesti", "Arial", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 36px;
	color: var(--btntextcolor);
	text-align: center;
	border-radius: 99px;
	padding: 0 22px;
	margin-right: 4px;
	margin-bottom: 7px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none; /* Standard syntax */
	cursor: pointer;
	border-radius: 99px;
}

.btn:hover {
	filter: var(--btnhoverfilter);
}

.btn-active {
	background-color: var(--sectioncolor);
	color: #fff;
	cursor: default;
	pointer-events: none;
}

.subcontent2,
.subcontent3,
.subcontent4 {
	display: none;
}

.subcontent-expanded {
	display: block;
}

@media only screen and (max-width: 650px) {
	p {
		-webkit-text-size-adjust: 100%;
	}

	.btns {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.btn {
		font-size: 17px;
		line-height: 32px;
		height: 32px;
		padding: 0px 18px;
	}

	table th,
	table td,
	table td * {
		font-size: 15px;
		line-height: 1.2;
	}

	table th {
		font-size: 14px;
	}

	table th,
	table td {
		padding: 9px 9px;
	}

	table th:nth-of-type(1),
	table td:nth-of-type(1) {
		padding-left: 0;
	}
}

@media only screen and (max-width: 450px) {
	h1 {
		font-size: 27px;
		margin-bottom: 8px;
	}
	.formulas .formula * {
		font-size: 13px;
	}
	.btn {
		font-size: 16px;
		line-height: 35px;
		height: 35px;
		padding: 0px 20px;
		margin-bottom: 6px;
	}
	table th {
		font-size: 14px;
		line-height: 1.2;
	}
	table td:nth-of-type(1),
	table th:nth-of-type(1) {
		padding-left: 0;
		padding-right: 3px;
	}
	table td:nth-of-type(2),
	table th:nth-of-type(2) {
		padding-left: 5px;
		padding-right: 0;
	}
	table td:not(:nth-of-type(2)) {
		font-size: 14px;
	}
}

@media only screen and (max-width: 390px) {
	input[type="text"] {
		width: 100%;
	}
	table td:nth-of-type(1),
	table th:nth-of-type(1) {
		display: none;
	}
	table td:nth-of-type(2),
	table th:nth-of-type(2) {
		padding-left: 8px;
	}
	table td:nth-of-type(2) b {
		display: inline;
	}
	table th,
	table td {
		padding: 7px 6px;
	}
}

@media only screen and (max-width: 340px) {

	table th {
		font-size: 13px;
	}

	table td,
	table td * {
		font-size: 14px;
	}
}