:root {
	--clr-black: #000;
	--clr-lightblue: #DAEEF7;
	--clr-lightblue-secondary: #b9e1f3;
	--clr-blue: #5c88ba;
	--clr-blue-secondary: #0075BB;
	--clr-lightgray: #ccc;
	--clr-gray: #797979;
	--clr-darkgray: #555;
	--clr-green: #61a770;
	--clr-red: #E26B62;
	--clr-white: #fff;
	--clr-sidebar: #b2b2b2;
	--clr-rects: #bbb;
}

/* reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after {
	content: '';
}

abbr,
acronym {
	border: 0;
}

a {
	outline: none;
}

*:focus {
	outline: none !important;
}

/* /reset */

@font-face {
	font-family: 'Din';
	src: url('../fonts/din-pro-bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Din';
	src: url('../fonts/din-pro.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Din Medium';
	src: url('../fonts/din-pro-medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: 'Lato', sans-serif;
}

.hide {
	display: none;
}

.portfolio .country_list {
	top: 13px;
	left: 13px;
	right: 13px;
	bottom: 13px;
	position: absolute;
}

.portfolio .country_list li {
	padding: 5px 0;
}

.portfolio .country-wrp table {
	width: 100%;
	font-size: 90%;
	border-collapse: collapse;
	vertical-align: middle;
	line-height: 1;
	table-layout: fixed;
}

.portfolio .country_descr {
	display: none;
}

.portfolio .country_list .selected a {
	font-weight: 800;
}

.leaflet-popup-close-button {
	display: none;
}

.leaflet-popup-content-wrapper {
	border-radius: 0;
}

.leaflet-popup-content {
	font-family: "Lato", "Segoe UI", "Tahoma", sans-serif;
}

.bg-black {
	background-color: var(--clr-black);
}

.bg-blue {
	background-color: var(--clr-blue);
}

.bg-lightgray {
	background-color: var(--clr-lightgray);
}

.bg-darkgray {
	background-color: var(--clr-darkgray);
}

.bg-gray {
	background-color: var(--clr-gray);
}

.bg-green {
	background-color: var(--clr-green);
}

.bg-red {
	background-color: var(--clr-red);
}

.bg-white {
	background-color: var(--clr-white);
}

.bg-road {
	position: relative;
}

.bg-road::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: var(--clr-darkgray);
}

.leaflet-popup-pane {
	z-index: 11;
}

.leaflet-tile-pane {
	z-index: auto;
}

.portfolio #tree::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.portfolio #tree::-webkit-scrollbar-track {
	background: var(--clr-lightblue);
}

.portfolio #tree::-webkit-scrollbar-thumb {
	background: var(--clr-blue-secondary);
	transition: .2s;
	border-radius: 2px;
}

.portfolio #tree::-webkit-scrollbar-thumb:hover {
	background: var(--clr-blue-secondary);
}

.portfolio #tree {
	position: fixed;
	top: 39px;
	bottom: 0;
	left: 0;
	width: 315px;
	background-color: var(--clr-white);
	border: 1px solid var(--clr-sidebar);
	overflow-y: auto;
}

.portfolio #filter {
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--clr-white);
}


.portfolio #filter input {
	width: 315px;
	padding-left: 15px;
	padding-right: 35px;
	height: 40px;
	line-height: 40px;
	font-size: 17px;
	border: 1px solid var(--clr-sidebar);
	background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20%20%20%20%20viewBox%3D%22171%2045.5%20256%20239%22%20enable-background%3D%22new%20171%2045.5%20256%20239%22%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%234C4C4C%22%20d%3D%22M270.8%2C214.8c-40.6%2C0-73.8-33.2-73.8-73.8s33.2-73.8%2C73.8-73.8s73.8%2C33.2%2C73.8%2C73.8%09%09S311.4%2C214.8%2C270.8%2C214.8z%20M270.8%2C80.5c-33.2%2C0-60.4%2C27.2-60.4%2C60.4s27.2%2C60.4%2C60.4%2C60.4s60.4-27.2%2C60.4-60.4S304%2C80.5%2C270.8%2C80.5z%09%09%20M396.3%2C257.1l-47-47c-2.7-2.7-6.7-2.7-9.4%2C0c-2.7%2C2.7-2.7%2C6.7%2C0%2C9.4l47%2C47c2.7%2C2.7%2C6.7%2C2.7%2C9.4%2C0C399%2C263.8%2C399%2C259.8%2C396.3%2C257.1%09%09z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat calc(100% - 10px) 50%;
	background-size: 20px 20px;
}

#tree .country {
	display: block;
	padding: 5px 10px;
	font-size: 17px;
	color: #282828;
	cursor: pointer;
	user-select: none;
}

#tree .country-list .country.active+.country_descr {
	display: block;
}

#tree .country-list .country.active,
#tree .country-list .country:hover {
	background-color: var(--clr-lightblue-secondary);
}

#tree .country_descr {
	padding: 10px 10px 10px 15px;
	background-color: var(--clr-lightblue);
}

#tree .country_descr .link-wrap {
	text-align: right;
}

#tree .country_descr .link-wrap a {
	color: var(--clr-blue-secondary);
	display: inline-block;
	padding: 5px 5px 3px;
	font-size: 90%;
}

.portfolio #map-portfolio {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 320px;
}

.sample-dot {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid var(--clr-white);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	margin-bottom: -2px;
}

.sample-dot.dot-xs {
	width: 11px;
	height: 11px;
}

.sample-dot.dot-sm {
	width: 13px;
	height: 13px;
}

.sample-rectangle {
	display: inline-block;
	width: 30px;
	height: 20px;
	border-radius: 2px;
	border: 2px solid var(--clr-white);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	margin-bottom: -2px;
}

.sample-rectangle svg,
.sample-rectangle svg rect {
	width: 100%;
	height: 100%;
}

table.test tr td:first-child {
	text-align: center;
	width: 55px;
}

table.test td {
	padding: 4px 10px;
}

table.test tr+tr {
	border-top: 1px solid #89b1ce;
}

.widetype+.widetype {
	margin-top: 5px;
}

.widetype+table.test {
	margin-top: 10px;
}

#tree .widetype {
	display: flex;
	align-items: center;
	gap: 10px;
}

#tree .no-results {
	padding: 5px 10px;
}

.leaflet-tooltip {
	opacity: 1 !important;
	background-color: var(--clr-lightblue);
	border: none;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip-top::before {
	border-top-color: var(--clr-lightblue);
}

.tooltip {
	padding: 10px;
	font-size: 14px;
}

.tooltip .country-name {
	font-size: 16px;
}

#patterns {
	position: absolute;
	z-index: -200;
}

.pattern-layer {
	pointer-events: none;
	stroke: black;
	stroke-width: 1.5;
	fill-opacity: 1;
}

.pattern-blue {
	fill: url(#pattern-blue);
}

.pattern-green {
	fill: url(#pattern-green);
}

.pattern-green-blue {
	fill: url(#pattern-green-blue);
}

.pattern-dots {
	fill: url(#pattern-dots);
}

.pattern-rects {
	fill: url(#pattern-rects);
}

.country-label {
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.2;
	z-index: 16;
	color: #646464;
	letter-spacing: 1px;
	text-shadow:
		-1px -1px 0 #eee,
		1px -1px 0 #eee,
		-1px 1px 0 #eee,
		1px 1px 0 #eee;
	font-family: 'Din';
}

.country-label.blacklist-true {
	text-transform: lowercase !important;
}

.country-label span {
	display: block;
	transform: translate(-50%, -50%);
	text-align: center;
	white-space: nowrap;
}

.country-label.zoom-1 {
	font-size: 8px;
}

.country-label.zoom-2 {
	font-size: 8px;
}

.country-label.zoom-3 {
	font-size: 10px;
}

.country-label.zoom-4 {
	font-size: 12px;
}

.country-label.zoom-5 {
	font-size: 14px;
}

.country-label.zoom-6 {
	font-size: 15px;
}

.country-label.zoom-7 {
	font-size: 18px;
}

.country-label.zoom-8 {
	font-size: 35px;
}

.country-label.zoom-9 {
	font-size: 37px;
}

.country-label.zoom-10 {
	font-size: 40px;
}

.country-label.zoom-11 {
	font-size: 45px;
}

.country-label.zoom-12 {
	font-size: 47px;
}

.country-label.zoom-13 {
	font-size: 47px;
}

.country-label.zoom-14 {
	font-size: 47px;
}

.country-label.zoom-15 {
	font-size: 47px;
}

.country-label.zoom-16 {
	font-size: 47px;
}

.country-label.zoom-17 {
	font-size: 47px;
}

.country-label.zoom-18 {
	font-size: 47px;
}

.country-label.zoom-19 {
	font-size: 47px;
}

.point-shadow {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.5));
}








@media (max-width: 1100px) {

	.portfolio #tree,
	.portfolio #filter input {
		width: 280px;
	}

	.portfolio #map-portfolio {
		left: 285px;
	}
}

@media (max-width: 800px) {

	.portfolio #filter input,
	#tree .country {
		font-size: 14px;
	}

	.portfolio #filter input {
		height: 35px;
		line-height: 35px;
	}

	.portfolio #tree,
	.portfolio #filter,
	.portfolio #filter input {
		width: 100%;
	}

	.portfolio #tree {
		top: 34px;
		height: 260px;
	}

	.portfolio #map-portfolio {
		left: 0;
		top: 299px;
	}
}