@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*{
	box-sizing: border-box;
}

html,
body {
	--color: #E2A74F;
	overflow: hidden;
	height: 100%;
	scrollbar-color: var(--color) #4c4c4c;
}

body{
	margin:0;
	font-family: Roboto, sans-serif;
}
.mb-0{margin-bottom: 0 !important;}
.mb-5{margin-bottom: 5px !important;}
.mb-10{margin-bottom: 10px !important;}
.mb-15{margin-bottom: 15px !important;}
.mb-20{margin-bottom: 20px !important;}

.mt-0{margin-top: 0 !important;}
.mt-5{margin-top: 5px !important;}
.mt-10{margin-top: 10px !important;}
.mt-15{margin-top: 15px !important;}
.mt-20{margin-top: 20px !important;}

.mb--5{margin-bottom: -5px !important;}
.mt--5{margin-top: -5px !important;}
.mb--10{margin-bottom: -10px !important;}
.mt--10{margin-top: -10px !important;}
.mb--15{margin-bottom: -15px !important;}
.mt--15{margin-top: -15px !important;}
.mb--20{margin-bottom: -20px !important;}
.mt--20{margin-top: -20px !important;}

.ml-0{margin-left: 0 !important;}
.ml-5{margin-left: 5px !important;}
.ml-10{margin-left: 10px !important;}
.ml-15{margin-left: 15px !important;}
.ml-20{margin-left: 20px !important;}

.mr-0{margin-right: 0 !important;}
.mr-5{margin-right: 5px !important;}
.mr-10{margin-right: 10px !important;}
.mr-15{margin-right: 15px !important;}
.mr-20{margin-right: 20px !important;}

.radius-10{border-radius: 10px !important;}
.radius-15{border-radius: 15px !important;}

.transparent{background-color: transparent;}

.pd-0{padding: 0 !important;}
.pd-5{padding: 5px !important;}
.pd-10{padding: 10px !important;}
.pd-15{padding: 15px !important;}
.pd-20{padding: 20px !important;}

.pdl-0{padding-left: 0 !important;}
.pdl-5{padding-left: 5px !important;}
.pdl-10{padding-left: 10px !important;}
.pdl-15{padding-left: 15px !important;}
.pdl-20{padding-left: 20px !important;}

.pdr-0{padding-right: 0 !important;}
.pdr-5{padding-right: 5px !important;}
.pdr-10{padding-right: 10px !important;}
.pdr-15{padding-right: 15px !important;}
.pdr-20{padding-right: 20px !important;}

.pdb-0{padding-bottom: 0 !important;}
.pdb-5{padding-bottom: 5px !important;}
.pdb-10{padding-bottom: 10px !important;}
.pdb-15{padding-bottom: 15px !important;}
.pdb-20{padding-bottom: 20px !important;}

.pdt-0{padding-top: 0 !important;}
.pdt-5{padding-top: 5px !important;}
.pdt-10{padding-top: 10px !important;}
.pdt-15{padding-top: 15px !important;}
.pdt-20{padding-top: 20px !important;}

#map { 
	height: calc(100vh - 3em);
	cursor: default;
}

#color {
	background-color: #121313;
}

.leaflet-container{
	background-color: #A0C3C9 !important;
}

.leaflet-control-attribution{
	margin: 10px !important;
}

.leaflet-boundaryMarker-pane{
	z-index:640 !important;
}

.leaflet-boundaryMarker-pane .leaflet-marker-icon{
	z-index:300 !important;
}

.leaflet-tooltip {
	background-color: #B5B2A7;
	font-size: 1em;
	border: 3px solid #B5B2A7;
	font-family: Roboto, sans-serif;
}

.panel{
	height: calc(100vh - 3em);
	width: 320px;
	position:absolute;
	left: 0px;
	top: 0px;
	background-color: #121313;
	z-index: 1000;
	/* border-right: 4px var(--color) solid; */
	overflow-y: scroll;
	scrollbar-width: thin;
}

.button_collapse_in,.button_collapse_out{
	color:#fff;
	width:1.3em;
	position:absolute;
	cursor: pointer;
}

.button_collapse_in{
	right:15px;
	top:5px;
}

.button_collapse_out{
	top: 0;
	padding: .2em 0.75em;
	background: #121313;
	margin: 5px;
	border: 2px var(--color) solid;
	z-index:1000;
	display:block;
	box-sizing: content-box;
}
.button{
	border: 2px var(--color) solid;
	font-size: 1.1em;
	background: #121313;
	color: #fff;
	cursor:pointer;
	display: inline-block;
	margin: 2px;
	padding: 1px 4px;
}

.button_link {
	background: none!important;
	border: none;
	padding: 0!important;
	color: #069;
	text-decoration: underline;
	cursor: pointer;
	margin-bottom: 5px;
}

.panel_buttons{
	padding: 10px;
	padding-top: 0px;
	text-align: center;
	color: #fff;
}

a, .btn_link{
	color: var(--color);
}


body.panel_hide > .panel{
	left: -330px;
}
body.panel_hide > #map{
	margin-left:0px;
}


.button_collapse_out .fa-angle-right{
	display:none;
}

body.panel_hide > .button_collapse_out .fa-angle-right{
	display:block;
}

body.panel_hide > .button_collapse_out .fa-angle-left{
	display:none;
}


.footer{
	height: 3em;
	width: 100%;
	position:fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin-bottom: 0px;
	background-color: #121313;
	z-index: 1000;
	border-top: 4px var(--color) solid;
}

#coordinates{
	color: #ddd;
	font-size: 1.5em;
	font-weight: bold;
	float: right !important;
	position: absolute;
	right: 9px;
	bottom: 7px;
}

.author{
	color:#ffff;
	vertical-align:top;
	line-height: 30px;
}

.links{
	display: inline-block;
}

h2{
	text-align:center;
	color:#fff;
}

.checkbox_block{
	padding: 3px 15px 3px 15px;
	font-size: 1.1em;
	color: #fff;
}

/* для элемента input c type="checkbox" */
.checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
  color: #fff;
}

/* для элемента label, связанного с .custom-checkbox */
.checkbox+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.checkbox+label::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 3px solid #fff;
  border-radius: 0.35rem;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 75% 75%;
}

/* стили при наведении курсора на checkbox */
.checkbox:not(:disabled):not(:checked)+label:hover::before {
  border-color: #fff;
}

/* стили для активного чекбокса (при нажатии на него) */
.checkbox:not(:disabled):active+label::before {
  background-color: #fff;
  border-color: #fff;
}

/* стили для чекбокса, находящегося в фокусе */
.checkbox:focus+label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.checkbox:focus:not(:checked)+label::before {
  border-color: #fff;
}

/* стили для чекбокса, находящегося в состоянии checked */
.checkbox:checked+label::before {
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23121313' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили для чекбокса, находящегося в состоянии disabled */
.checkbox:disabled+label::before {
  background-color: #e9ecef;
}


.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: none;
	overflow-y: auto;
	z-index: 1100;
}

.modal .modal-dialog {
	position: relative;
}

.modal.active {
	display: flex;
}

.modal {
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.modal-dialog {
	padding: 20px;
	background: #2a2b2b;
	color: #fff;
	width: 100%;
	max-width: 800px;
	cursor: auto;
	border-radius:6px;
	min-height: 50px;
	padding-top: 60px;
}

.modal_cross {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 10px;
	right: 10px;
	fill: #8e8e8e;
	cursor: pointer;
}

#modal_content{
	max-height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.tab {
	display: flex;
	max-height: 600px;
}

.tab-content {
	display: none;
}

.tab-content.show{
	display: block;
}

.tab-nav {
	padding-right: 2em;
	overflow-y: scroll;
	scrollbar-width: thin;
}

.tab-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	background: 0 0;
	border: 2px var(--color) solid;
	min-width: 90px;
	font-size: 22px;
	padding: 0.1rem 0.1rem;
	text-align: center;
	font-weight: bold;
	margin: 2px 2px 2px 2px;
	cursor:pointer;
	user-select: none;
}

.tab-link img{
	width: .9em;
	filter: brightness(0) invert(1);
}

.tab-link.active,
.button.active{
	background: var(--color) ;
}

.tab-link.small{
	min-width: 40px;
	font-size: 16px;
}

.tab-link > span{
	font-size: 12px;
	font-weight: 300;
	display: block;
}

.tab-tabs{
	width: 100%;
	position: relative;
}

.server{
	padding: 0.325rem;
	border: 2px var(--color) solid;
	margin-bottom: 1px;
	display: flex;
	align-items: center;
	flex-flow: row wrap;
}

.server > div{
	display: inline-block;
	flex: 1;
}

.server_name{
	font-size: 22px;
	font-weight: bold;
}

table{
	width: 100%;
}

td{
	border: 1px var(--color) solid;
}

tr.active{
	background: var(--color);
}

.calculator_result{
	font-size: 1.5em;
	color: #fff;
	font-weight: bold;
	margin-left: 20px;
}

.calculator_result > img,
.text-icon{
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	margin-bottom: 3px;
}

.path-text{
	padding: 3px;
	font-size: .9em;
}

.path-text.white{
	fill: #ffff;
}

.leaflet-marker-icon.white{
	filter: invert(100%);
}

.animation-spin {
	animation: spin 4s linear infinite;
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    } 
}


.btn_square{
	background: #282828;
	height:3.5em;
	width: 3.5em;
	border: 2px solid #282828;
	padding: 0;
	margin: 1px;
}

.btn_square img,
.btn_square svg{
	width: 100%;
	height: 100%;
	filter: brightness(0) invert(1);
}

.btn_square.active{
	border: 2px solid #e2a74f;
}

.btn_square.small {
	height:2.5em;
	width: 2.5em;
}

.btn_square.small .color_circle{
	height:1.75em;
	width: 1.75em;
}


.shadow {
	-webkit-filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .5));
	filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .5));
}

.color_circle{
	width: 2.5em;
	height: 2.5em;
	margin:auto;
	border-radius:50%;
}

input[type="range"] {
	accent-color: var(--color);
	width:100%;
}


input[type="range"]::-webkit-slider-thumb {
	border-radius: 0%;
}

input[type="text"] {
	width: 100%; 
	background:#282828;
	border: 1px solid #826740;
	font-size: 1.25em;
	color: #fff;
	padding: 6px;
}

input[type="text"]:focus,
input[type="text"]:focus-visible {
	outline: none;
}

.leaflet-marker-icon img{
	width: 100%;
	border: 1px solid transparent;
}
.leaflet-marker-icon span{
	line-height: 1;
	display: block;
	font-size: 0.95em;
	font-weight: 900;
	text-align: center;
}

.leaflet-marker-icon > div{
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
}

.leaflet-marker-icon.selected > div{
	border: 1px solid var(--color);
}

.details{
	text-align: start;
	padding: 0em 0.15em;
	font-size: 1.25em;
}

.details p{
	margin: .15em 0em;
}

.details b{
	float: right;
	font-size: 0.9em;
}


select {
	background-color: #000;
	color: #fff;
	border: 2px var(--color) solid;
	font-size: 1.25em;
	width: 60%;
	border-radius: 0;
}

.map_text-1,
.map_text-2,
.map_text-3{
	font-size: 1.55em;
}

.map_text-4{
	font-size: 1.5em;
}

.map_text-5{
	font-size: 1.25em;
}

#map[data-zoom="1"] .map_text-2,
#map[data-zoom="1"] .map_text-3,
#map[data-zoom="1"] .map_text-4,
#map[data-zoom="1"] .map_text-5,
#map[data-zoom="1"] .map_text-6,
#map[data-zoom="1"] .map_text-7,
#map[data-zoom="2"] .map_text-3,
#map[data-zoom="2"] .map_text-4,
#map[data-zoom="2"] .map_text-5,
#map[data-zoom="2"] .map_text-6,
#map[data-zoom="2"] .map_text-7,
#map[data-zoom="3"] .map_text-4,
#map[data-zoom="3"] .map_text-5,
#map[data-zoom="3"] .map_text-6,
#map[data-zoom="3"] .map_text-7,
#map[data-zoom="4"] .map_text-5,
#map[data-zoom="4"] .map_text-6,
#map[data-zoom="4"] .map_text-7,
#map[data-zoom="5"] .map_text-6,
#map[data-zoom="5"] .map_text-7,
#map[data-zoom="6"] .map_text-7{
	display: none;
}

.shadow-black{
	text-shadow: 1px 1px 2px #0f0f0f;
}

body.dark .leaflet-container{
	background-color: #323339 !important;
}


body.dark .leaflet-tile-container{
	filter: contrast(100%) brightness(90%);
}

@media(max-width: 768px) {
	.modal-dialog {
		/* min-height: calc(100vh - 20px); */
	}
	
	.author{
		display: none;
	}
	
	#coordinates{
		font-size: .5em;
	}
	
	.calculator_result{
		margin-left:0;
		font-size: 1em;
	}
	.tab-link.small {
		font-size: 22px;
	}
	
	.tab-link {
		font-size: 28px;
	}
	
	thead tr th{
		font-size: 0.8em;
	}
	
	h2{
		font-size: 32px;
	}
	
	p{
		font-size: 1.375em;
	}
	
	.footer{
		height: 3.75em;
	}

	.details {
		padding: 0em;
		font-size: .75em;
	}
	
	.details h4{
		font-size: 1.75em;
	}
}