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

* {
	--textcolor: #262626;
	--bgcolor: transparent;
	--boxcolor: #eef3f6;
	--btnhovercolor: #E8EEF2;
	--btntextcolor: rgba(0,0,0,0.2);
}

.dark-theme * {
	--textcolor: #eff3f5;
  --bgcolor: #141414;
	--boxcolor: #373c45;
	--btnhovercolor: #3f454f;
	--btntextcolor: rgba(255,255,255,0.4);
}

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

p {
	-webkit-font-smoothing: grayscale;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Charter", serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	margin: 0;
	margin-bottom: 10px;
	color: var(--textcolor);
}

.group {
	width: 100%;
	height: 44px;
	background-color: #0064fa;
	border-radius: 2px;
	background-image: url("images/group_arrow-expand.svg");
	background-repeat: no-repeat;
	background-size: 27px 27px;
	background-position: 14px 9px;
	margin-bottom: 10px;
}

.group-expanded {
	background-image: url("images/group_arrow-collapse.svg");
}

.group:hover {
	background-color: #155ade;
	cursor: pointer;
}

.group span {
	font-family: "GT Eesti", "Arial", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 44px;
	color: #fff;
	margin-left: 53px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none; /* Standard syntax */
}

.content {
	margin-top: 17px;
	margin-bottom: 30px;
	display: none;
}

.content-expanded {
	display: block;
}

.search {
	text-align: right;
}

input[type=text] {
	width: 300px;
	height: 35px;
	font-family: "GT Eesti", "Arial", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 15px;
	padding: 0;
	padding-left: 10px;
	border: 0;
	background-color: var(--boxcolor);
	border-radius: 3px;
	color: var(--textcolor);
	margin-top: 10px;
	margin-bottom: 17px;
	background-image: url("images/luup.svg");
	background-repeat: no-repeat;
	background-size: 25px 17px;
	background-position: right;

}

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

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

table td,
table th {
	font-family: "GT Eesti", "Arial", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 18px;
	vertical-align: middle;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
	padding: 5px;
	color: var(--textcolor);
}

table th {
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
}

.sorting-arrows {
	width: 7px;
	margin-right: 4px;
}

table td:nth-of-type(1) {
	min-width: 200px;
}

table th:nth-of-type(3),
table td:nth-of-type(3) {
	min-width: 142px;
	text-align: right;
}

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

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

.btn:hover {
	background-color: var(--btnhovercolor);
}

.btn-active {
	background-color: #0064FA;
	color: #fff;
	cursor: default;
	pointer-events: none;
}

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

.subcontent-expanded {
	display: block;
}

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

	.group span {
		font-size: 20px;
	}

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

	.btn {
	 font-size: 16px;
	}

  input[type=text] {
		width: -moz-calc(100% - 10px);
		width: -webkit-calc(100% - 10px);
		width: -o-calc(100% - 10px);
		width: calc(100% - 10px);
		margin-bottom: 7px;
  }

table {
	table-layout: fixed;
}

	table th, table td {
		text-align: left;
		font-size: 15px;
		line-height: 15px;
		padding: 4px;
	}

	table td {
		font-size: 15px;
	}

	table td:nth-of-type(1) {
	min-width: auto;
	max-width: 150px;
  }

  table td:nth-of-type(2),
	table th:nth-of-type(2) {
	width: 44%;
  }

  table td:nth-of-type(3),
	table th:nth-of-type(3) {
	max-width: 120px;
	text-align: right;
	width: 25%;
  }
}