:root {
	--success-color				: hsl( 114, 100%, 30% );
	--warning-color				: hsl( 37,  100%, 51% );
	--danger-color				: hsl( 0,   100%, 67% );
	--info-color				: hsl( 195, 80%,  60% );
	--neutral-color				: hsl( 360, 0%,   85% );
	--inverse-color				: hsl( 53,  53%,  20% );
	--primary-color				: hsl( 220, 100%, 58% );
	--success-color-light		: hsl( 114, 100%, 85% );
	--warning-color-light		: hsl( 37,  100%, 61% );
	--danger-color-light		: hsl( 0,   100%, 90% );
	--info-color-light			: hsl( 195, 80%,  70% );
	--neutral-color-light		: hsl( 360, 0%,   95% );
	--inverse-color-light		: hsl( 53,  53%,  30% );
	--primary-color-light		: hsl( 220, 100%, 68% );
	--standard-width			: 140px;
	--narrow-width				: 60px;
	--wide-width				: 240px;
	--modal-width				: 640px;
	--modal-height				: 400px;
	--td-infopad-width			: 350px;
	--standard-font				: Tahoma;
	--font-size-l				: 1.3em;
	--font-size-m				: 1.1em;
	--font-size-normal			: 1em;
	--font-size-s				: .8em;
	--font-size-xs				: .7em;
	--font-dark					: #000000;
	--font-grey					: #777777;
	--font-bright				: #ffffff;
	--background-dark			: #404020;
	--background-medium			: #eeeeee;
	--background-light			: #fcfcfc;
	--button-bg-color			: #dddddd;
	--button-bg-color-bright	: #ffff00;
	--link-color				: #ffffcc;
	--link-color-visited		: #e3e3ac;
	--border-light				: 2px solid #eeeeee;
	--border-medium				: 2px solid #cccccc;
	--border-dark				: 2px solid #444444;
	--border-radius				: 6px;

}

@keyframes fadeIn {
	from	{ opacity: 0; transform: scale(0.95);	}
	to		{ opacity: 1; transform: scale(1);		}
}

body{
	font-family				: var(--standard-font);
	font-size				: var(--font-size-normal);
	padding					: 0;
	margin					: 0;
}

h5{
	font-size				: 14px;
	font-weight				: bold;
	color					: var(--font-grey);
	margin					: 5px;
}

.nav{
	margin-left				: 5px;
	width					: calc(100% - 42px);
	height					: auto;
	background-color		: var(--background-medium);
	overflow-y				: scroll;
	padding					: 16px;
	box-shadow: -4px -3px 13px 6px rgba(0,0,0,0.75) inset;
	border-radius			: var(--border-radius);
	scrollbar-width			: thin;
}

.navItem {
	font-size				: 1em;
	padding					: 3px;
	margin-bottom			: 3px;
	height					: 25px;
	overflow				: hidden;
	width					: 95%;
	border					: var(--border-medium);
	border-radius			: var(--border-radius);
	clear					: both;
	cursor					: pointer;
	color					: #000;
}

.navItem:hover {
	border					: var(--border-dark);
	background-color		: var(--background-light);
	color					: var(--font-dark);
	transition				: background-color 500ms ease;
}

div.menuSwitch {
	display					: none;
}

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

div.main {
	height					: 900px;
	width					: 100%;
	outline					: var(--border-light);
	border-collapse			: collapse;
	float					: left;
}

#distanceHeader {
	text-align				: center;
}

div.dashboard {
	top						: 0;
	right					: 0;
	bottom					: 0;
	float					: right;
	width					: 300px;
	z-index					: 810;
	position				: fixed;
	clear					: none;
}

.graybackground {
	background-color		: var(--background-medium);
}

#LMapsID {
	outline					: non;
	cursor					: crosshair;
	width					: calc(100% - 300px);
	z-index					: 0;
}

table.form{
	height					: 400px;
	width					: 100%;
	border-collapse			: collapse;
	font-size				: 1.2em;
}

.hide {
	display					: none;
}
.show {
	display					: block;
}

#resetMeasurer {
	background-color		: var(--button-bg-color);
	border					: var(--border-medium);
	border-radius			: var(--border-radius);
	text-align				: center;
	padding					: 6px;
	margin					: 6px;
	cursor					: pointer;

}

#resetMeasurer:hover {
	background-color		: var(--background-light);
}

#measureResult {
	height					: 45px;
	width					: 100%;
	text-align				: center;
	font-size				: 32px;
	font-weight				: bold;
}

.legendTable {
	font-size				: .8em;
	border					: none;
	border-spacing			: 4px;
	---border-collapse		: collapse;
	width					: 290px;
	margin					: 4px;
}

.legendTable td.col1 {
	width					: 45px;
}

.legendTable td.col2 {
	width					: 5px;
}

.legendTable td.col3 {}

#filter {
	width					: 280px;
	margin-left				: 5px;
	height					: 24px;
	padding					: 4px;
	font-size				: 18px;
	color					: var(--font-dark);
	border-radius			: var(--border-radius);
	margin-bottom			: 3px;
	border					: var(--border-medium);
}

.userName {
	text-align				: center;
}

.logout{
	text-decoration			: none;
	color					: #000000;
	font-weight				: bold;
	font-size				: 1.3em;
	line-height				: 1.5em;
}

#dasboardToggler{
	width					: 290px;
	text-align				: right;
	height					: 40px;
	padding-top				: 5px;
	padding-right			: 10px;
	line-height				: 1.4em;
	float					: left;
	clear					: both;
	margin-bottom			: 10px;
	cursor					: pointer;
	background-color		: transparent;
}


#dasboardToggler:hover {
	---background-color		: #FFFFFF;
}

/* Slider */

.switch {
	position				: relative;
	display					: inline-block;
	width					: 60px;
	height					: 34px;
}

.switch input {
	display					: none;
}

.slider {
	position				: absolute;
	cursor					: pointer;
	top						: 0;
	left					: 0;
	right					: 0;
	bottom					: 0;
	background-color		: #ccc;
	-webkit-transition		: .4s;
	transition				: .4s;
	box-shadow				: inset 2px 2px 5px rgb(154 147 140 / 78%), 1px 1px 5px rgb(255 255 255);
}

.slider:before {
	position				: absolute;
	content					: "";
	height					: 26px;
	width					: 26px;
	left					: 4px;
	bottom					: 4px;
	background-color		: white;
	-webkit-transition		: .4s;
	transition				: .4s;
}

input:checked + .slider {
	background-color		: #00cb11;
	box-shadow				: inset 2px 2px 5px rgb(154 147 140 / 78%), 1px 1px 5px rgb(255 255 255);
}

input:focus + .slider {
	box-shadow				: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform		: translateX(26px);
	-ms-transform			: translateX(26px);
	transform				: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius			: 34px;
}

.slider.round:before {
	border-radius			: 50%;
}

.doSubscribe {
	color					: red;
}

/* --- Переключатель языка: поезд на рельсах --- */
.rail-lang-switch {
	display					: flex;
	align-items				: center;
	background				: rgba(255,255,255,0.92);
	padding					: 6px 12px;
	border-radius			: 30px;
	box-shadow				: 0 3px 10px rgba(0,0,0,0.18);
	user-select				: none;
	cursor					: pointer;
	gap						: 10px;
}
.rls-label {
	font-weight				: 700;
	font-size				: 14px;
	transition				: color 0.3s ease;
	pointer-events			: none;
}
.rail-lang-switch[data-lang="ru"] .rls-left  { color: #222; }
.rail-lang-switch[data-lang="ru"] .rls-right { color: #aaa; }
.rail-lang-switch[data-lang="en"] .rls-left  { color: #aaa; }
.rail-lang-switch[data-lang="en"] .rls-right { color: #222; }

.rls-track {
	position				: relative;
	width					: 66px;
	height					: 26px;
	flex-shrink				: 0;
}
.rls-rail {
	position				: absolute;
	top						: 50%;
	left					: 0;
	right					: 0;
	height					: 3px;
	background				: #b0b0b0;
	border-radius			: 2px;
	transform				: translateY(-50%);
}
.rls-rail::after {
	content					: '';
	position				: absolute;
	top						: 100%;
	left					: 0;
	right					: 0;
	height					: 5px;
	background				: repeating-linear-gradient(
			90deg,
			#a0826d 0,
			#a0826d 4px,
			transparent 4px,
			transparent 9px
		);
	margin-top				: 1px;
	border-radius			: 1px;
}
.rls-train {
	position				: absolute;
	top						: 50%;
	left					: 0;
	transform				: translateY(-50%);
	width					: 22px;
	height					: 18px;
	background				: #007bff;
	border					: 1px solid #fff;
	border-radius			: 4px 4px 2px 2px;
	z-index					: 2;
	transition				: left 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.rls-train::before {
	content					: '';
	position				: absolute;
	top						: 3px;
	left					: 3px;
	width					: 16px;
	height					: 5px;
	background				: #b3d9ff;
	border-radius			: 2px;
}
.rls-train::after {
	content					: '';
	position				: absolute;
	bottom					: -3px;
	left					: 2px;
	width					: 5px;
	height					: 5px;
	background				: #333;
	border-radius			: 50%;
	box-shadow				: 11px 0 0 #333;
}
.rail-lang-switch[data-lang="en"] .rls-train {
	left					: calc(100% - 22px);
}

/* --- попап предложить правку --- */
.btn-suggest {
	position				: fixed;
	bottom					: 20px;
	right					: 20px;
	padding					: 10px 16px;
	background				: #d9534f;
	color					: var(--font-bright);;
	border					: none;
	border-radius			: var(--border-radius);
	cursor					: pointer;
	z-index					: 9999;
}
.modal {
	position				: fixed;
	top						: 0;
	left					: 0;
	width					: 100%;
	height					: 100%;
	background				: rgba(0,0,0,0.5);
	display					: flex;
	justify-content			: center;
	align-items				: center;
	z-index					: 10000;
}
.modal-content {
	background				: #fff;
	padding					: 20px;
	width					: 400px;
	max-width				: 90%;
	border-radius			: var(--border-radius);
	position				: relative;
}
.close {
	position				: absolute;
	top						: 10px;
	right					: 15px;
	cursor					: pointer;
	font-size				: 20px;
}
.btn-submit {
	width					: 100%;
	padding					: 10px;
	background				: #5cb85c;
	color					: var(--font-bright);
	border					: none;
	border-radius			: var(--border-radius);
	margin-top				: 10px;
}

#open-modal-btn{
	color					: red;
	text-decoration			: underline;
	cursor					: pointer;
	/*
	padding					: 10px 20px;
	background				: #d9534f;
	text-decoration			: none;
	border-radius			: var(--border-radius);
	font-size				: 14px;
	border					: none;
	position				: fixed;
	bottom					: 5px;
	left					: 10px;
	*/
}

.langSwitcherContainer {
	position				: fixed;
	top						: 5px;
	right					: 90px;
	z-index					: 9999;
}

.localizedField[data-key=registerMessage] {
	color					: red;
}

#modal-overlay{
	display					: none;
	position				: fixed;
	top						: 0;
	left					: 0;
	width					: 100%;
	height					: 100%;
	background				: rgba(0, 0, 0, 0.6);
	z-index					: 9999;
	justify-content			: center;
	align-items				: center;
}
#modalWindow {
	background				: white;
	padding					: 30px;
	width					: 100%;
	max-width				: 500px;
	border-radius			: var(--border-radius);
	box-shadow				: 0 5px 15px rgba(0,0,0,0.3);
	position				: relative;
	animation				: fadeIn 0.3s ease;
}

#modalWindow h2 {
	color					: #666;
	font-size				: 14px;
}

#modalWindow label {
	font-weight				: bold;
	color					: #333;
	margin-bottom			: 5px;
	display					: block;
}
#modalWindow button[type=submit] {
	background				: #d9534f;
	color					: white;
	border					: none;
	padding					: 12px 20px;
	border-radius			: var(--border-radius);
	cursor					: pointer;
	font-size				: 16px;
	width					: 100%;
	margin-top				: 10px;
}

#modal-message {
	width					: 100%;
	height					: 150px;
	padding					: 10px;
	border					: var(--border-medium);
	border-radius			: var(--border-radius);
	box-sizing				: border-box;
	resize					: vertical;
}

#close-modal-btn {
	position				: absolute;
	top						: 10px;
	right					: 15px;
	background				: none;
	border					: none;
	font-size				: 24px;
	color					: #aaa;
	cursor					: pointer;
	line-height				: 1;
}

.descriptionContainer{
	---border					: var(--border-medium);
	padding					: 4px;
}
.descriptionHeaderRW{
	font-weight				: bold;
	font-size				: 1.4em;
	border-bottom			: var(--border-medium);
	margin-bottom			: 10px;
}
.descriptionHeader{
	font-weight				: bold;
	font-size				: 1.1em;
	border-bottom			: var(--border-dark);
	margin-bottom			: 5px;
}
.descriptionElement{
	font-size				: 1.1em;
	padding-left			: 4px;
}
.loading{
	margin					: -100px -90px;
	opacity					: 0.2;
}

@media screen and (max-device-width: 660px) {
	div.dashboard {
		opacity				: .90;
		---display			: none;
		float				: right;
		width				: 100%;
		z-index				: 995;
		position			: absolute;
		background-color	: var(--background-medium);
		clear				: none;
	}

	div.menuSwitch {
		top					: 5px;
		right				: 10px;
		float				: right;
		display				: block;
		width				: 36px;
		height				: 30px;
		line-height			: 36px;
		position			: absolute;
		color				: var(--font-grey);
		clear				: none;
		z-index				: 1020;
		border				: var(--border-medium);
		border-radius		: var(--border-radius);
		font-size			: 2.5em;
		text-align			: center;
		padding-bottom		: 10px;
		background-color	: (--background-light);
		cursor				: pointer;
		-webkit-user-select	: none; /* Safari 3.1+ */
		-moz-user-select	: none; /* Firefox 2+ */
		-ms-user-select		: none; /* IE 10+ */
		user-select			: none; /* Standard syntax */
	}

	div.menuSwitch:hover {
		color				: var(--font-dark);
		background-color	: var(--background-light);
	}

	.nav{
		width				: auto;
		height				: 300px;
		background-color	: val(--background-medium);
		overflow-y			: scroll;
		padding				: 4px;
	}

	.navItem {
		font-size			: 1.2em;
		padding				: 3px;
		margin-bottom		: 3px;
		height				: 25px;
		overflow			: hidden;
		width				: 95%;
		border				: var(--border-light);
		border-radius		: var(--border-radius);
		clear				: both;
		cursor				: pointer;
		color				: var(--font-grey);
		background-color	: var(--background-medium);
	}

	.navItem:hover {
		border				: var(--border-dark);
		background-color	: var(--background-light);
		color				: var(--font-dark);
		transition			: background-color 500ms ease;
	}
	#dasboardToggler{
		display				: none;
	}
	#LMapsID {
		width				: 100%;
	}
	#resetMeasurer{
		width					: calc( 100% - 190px );
	}
	#filter{
		width					: calc( 100% - 25px );
	}
	.langSwitcherContainer{
		position				: fixed;
		top						: 67px;
		---left					: 5px;
		right					: 5px;
		z-index					: 9999;
	}
}