:root {
	--headder-width: 55px;
	--bg-blue: #aae1fb;
	--bg-green: #abece1;
	--bg-orange: #fbeccd;
	--bg-red: #f7b3bf;
	--bg-purple: #b9cbff;
	--color-blue: rgb(41,98,255);
	--color-green: rgb(11,183,175);
	--color-orange: rgb(238,157,1);
	--color-red: rgb(246,78,96);
	--color-purple: rgb(116,96,238);
	--color-search: #167495;
}

.fa, .far, .fal, .fas {
	pointer-events: none
}

/*Custom Layout*/
.content-wrap {
	overflow: hidden;
	width: 100vw;
}

.header {
	border-bottom: 1px solid #f5f5f5;
	height: var(--headder-width);
	z-index: 99999
}

	.header .container {
		width: 100%;
		max-width: 100vw;
	}

	.header .logo-text {
		height: var(--headder-width);
	}

	.header .logo-img {
		width: 60px;
	}

	.header .logo-title {
		font-size: 1.2em;
		font-weight: 400;
		text-transform: uppercase
	}

.header-account:not(.nav) {
	top: 4px;
	z-index: 3
}

.header .header-account a.btn-register {
	border-color: var(--primary-color);
	background: var(--primary-color);
	margin-top: 7px;
}

.header .navbar-toggler {
	display: none;
}

@media only screen and (max-width: 767px) {
	.header .navbar-toggler {
		display: block;
	}
}

.header-nav {
	display: none;
}

.footer {
	display: none;
}

.nav-tabs .nav-link {
	color: #73818f;
}

/*End Custom Layout*/

.tooltip .tooltip-inner {
	white-space: nowrap
}

.notifyjs-corner {
	top: 70px !important;
	left: 50% !important;
	transform: translate(-50%, 0)
}

.notifyjs-metro-white {
	background-color: #fff !important;
	border: 1px solid var(--primary-color);
	box-shadow: 0 2px 26px rgba(22, 116, 149, 0.2) !important;
}

	.notifyjs-metro-white .image {
		color: var(--primary-color);
	}

.app-header {
	background: #fff;
	border-bottom: 1px solid #f5f5f5;
}

	.app-header .navbar-brand {
		color: #0093dd
	}

	.app-header .navbar-nav .nav-link {
		color: #0093dd;
	}

.panel-flex {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

	.panel-flex .panel-header {
		height: 50px;
		line-height: 50px;
		text-transform: uppercase;
		padding: 0 15px;
		font-weight: 600;
		text-align: center;
	}

	.panel-flex .panel-content {
		flex: 1;
	}

.custom-overflow {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ddd #f5f5f5;
}

	.custom-overflow::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.custom-overflow::-webkit-scrollbar-track {
		background: #f5f5f5;
	}

	.custom-overflow::-webkit-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 20px;
		border: 0px solid #f5f5f5;
	}

[vmodule-name="khaithacbando"] {
	width: 100%;
	height: calc(100vh - var(--headder-width));
	font-size: .875rem
}

.khaithacbando-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

	.khaithacbando-wrapper .map-wrapper {
		width: 100%;
		height: 100%;
	}

	.khaithacbando-wrapper .panel-left-wrapper {
		position: absolute;
		left: -400px;
		top: 0;
		height: 100%;
		width: 400px;
		max-width: calc(100vw);
		z-index: 101;
		transition: left 0.3s ease-in-out;
		background: #fff;
	}

.panel-left-wrapper .close-container {
	position: absolute;
	top: 0;
	right: 0
}

.panel-left-wrapper .tab-content {
	width: 100%;
	height: 100%;
	margin-top: 0;
	border: 0;
	position: relative;
	/*border-right: 1px solid #c8ced3;*/
}

	.panel-left-wrapper .tab-content .close-container {
		position: absolute;
		top: 10px;
		right: 10px
	}

		.panel-left-wrapper .tab-content .close-container a.close {
			height: 30px;
			width: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 1rem
		}

	.panel-left-wrapper .tab-content .tab-pane {
		width: 100%;
		height: 100%;
		padding: 0;
		overflow-x: hidden;
	}



#frmLayerSwitcher .accordion-content {
	margin-top: 0;
}

.list-map-layer {
	padding: 0;
	margin: 0
}

	.list-map-layer hr {
		width: 50%;
		margin-top: 5px
	}

	.list-map-layer .map-layer {
		padding: 10px;
		display: flex;
		flex-direction: row;
		color: #70757a;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		position: relative;
	}

		.list-map-layer .map-layer::after {
			content: "";
			position: absolute;
			left: 10px;
			bottom: 0;
			border-bottom: 1px solid;
			width: 35px
		}

		.list-map-layer .map-layer:last-child::after {
			border-bottom: 0;
		}

		.list-map-layer .map-layer:hover {
			text-decoration: none;
			background: #f5f5f5
		}


		/*green*/
		.list-map-layer .map-layer.green::after {
			border-color: var(--bg-green)
		}

		.list-map-layer .map-layer.green .icon {
			background: var(--bg-green);
			color: var(--color-green);
		}

		.list-map-layer .map-layer.green .switch input:checked ~ label {
			background: var(--bg-green);
		}


		/*blue*/
		.list-map-layer .map-layer.blue::after {
			border-color: var(--bg-blue)
		}

		.list-map-layer .map-layer.blue .icon {
			background: var(--bg-blue);
			color: var(--color-blue);
		}

		.list-map-layer .map-layer.blue .switch input:checked ~ label {
			background: var(--bg-blue);
		}

		/*orange*/
		.list-map-layer .map-layer.orange::after {
			border-color: var(--bg-orange)
		}

		.list-map-layer .map-layer.orange .icon {
			background: var(--bg-orange);
			color: var(--color-orange);
		}

		.list-map-layer .map-layer.orange .switch input:checked ~ label {
			background: var(--bg-orange);
		}

		/*red*/
		.list-map-layer .map-layer.red::after {
			border-color: var(--bg-red)
		}

		.list-map-layer .map-layer.red .icon {
			background: var(--bg-red);
			color: var(--color-red);
		}

		.list-map-layer .map-layer.red .switch input:checked ~ label {
			background: var(--bg-red);
		}


		/*purple*/
		.list-map-layer .map-layer.purple::after {
			border-color: var(--bg-purple)
		}

		.list-map-layer .map-layer.purple .icon {
			background: var(--bg-purple);
			color: var(--color-purple);
		}

		.list-map-layer .map-layer.purple .switch input:checked ~ label {
			background: var(--bg-purple);
		}

		.list-map-layer .map-layer .icon {
			height: 35px;
			width: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100%;
		}

		/*.list-map-layer li .map-layer span.icon i::before {
					content: '\f5ff';
					font-family: "Font Awesome 5 Pro";
				}*/
		.list-map-layer .map-layer .title {
			flex: 1;
			padding-left: 10px;
			padding-right: 10px
		}

		.list-map-layer .map-layer .switch {
			display: flex
		}

			.list-map-layer .map-layer .switch input[type=checkbox] {
				height: 0;
				width: 0;
				visibility: hidden;
			}

			.list-map-layer .map-layer .switch label {
				cursor: pointer;
				text-indent: -9999px;
				width: 36px;
				height: 18px;
				background: #dce7eb;
				display: block;
				border-radius: 100px;
				position: relative;
			}

				.list-map-layer .map-layer .switch label:after {
					content: '';
					position: absolute;
					top: 4px;
					left: 4px;
					width: 10px;
					height: 10px;
					background: #fff;
					border-radius: 10px;
					transition: 0.3s;
				}

			.list-map-layer .map-layer .switch input:checked ~ label {
				background: #bada55;
			}

				.list-map-layer .map-layer .switch input:checked ~ label:after {
					left: calc(100% - 4px);
					transform: translateX(-100%);
				}

		.list-map-layer .map-layer > .switch label:active:after {
			width: 25px;
		}


	.list-map-layer li .map-layer.selected {
		/*background: #63c2de*/
		/*color: #20a8d8;*/
	}

		.list-map-layer li .map-layer.selected span.icon i {
			font-weight: 800;
			color: #20a8d8;
		}

		/*.list-map-layer li .map-layer.selected span.icon i::before {
						content: '\f5fe';
						font-family: "Font Awesome 5 Pro";
					}*/

		.list-map-layer li .map-layer.selected span.title {
			font-weight: 600
		}




.map-wrapper .map-container {
	height: 100%;
	width: 100%;
}

.map-wrapper .map-loading {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgba(0, 123, 255, 0.05);
	display: none;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

.map-wrapper.loading .map-loading{
	display: flex;
}

	.map-wrapper.loading .map-loading .loader-ripple {
		display: inline-block;
		position: relative;
		width: 60px;
		height: 60px;
		transition: margin-left 0.3s ease-in-out;
	}

		.map-wrapper.loading .map-loading .loader-ripple div {
			position: absolute;
			border: 3px solid var(--primary-color);
			opacity: 1;
			border-radius: 50%;
			-webkit-animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
			-moz-animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
			-ms-animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
			animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
		}

			.map-wrapper.loading .map-loading .loader-ripple div:nth-child(2) {
				animation-delay: -0.5s;
			}


	.open-panel .map-wrapper.loading .map-loading .loader-ripple {
		margin-left: 400px
	}

.map-wrapper .window-complie {
	height: 100%;
	width: 400px;
	max-width: 100vw;
	background: #fff;
	border-left: 1px solid #f5f5f5;
	position: absolute;
	top: 0;
	right: -400px;
	z-index: 103;
	transition: right 0.3s ease-in-out;
}

.map-wrapper.open-complie .window-complie {
	right: 0;
}

.window-complie .close {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 1rem
}

.window-complie .notify-contaner {
	padding: 15px;
	padding-bottom: 0;
}

	.window-complie .notify-contaner .notify-item {
		font-style: italic
	}

.window-complie .list-coordinates {
	padding: 15px
}

.window-complie .coordinates {
	padding-bottom: 10px
}

	.window-complie .coordinates .btn-outline-secondary {
		border-color: #e4e7ea;
	}

		.window-complie .coordinates .btn-outline-secondary:hover {
			background-color: #f0f3f5;
		}

	.window-complie .coordinates .index:hover:before {
		content: '\f1f8';
		font-family: "Font Awesome 5 Pro";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #f0f3f5;
		line-height: 30px;
		color: #f86c6b
	}

	.window-complie .coordinates .dropdown-item {
		border-bottom: 0;
	}

.window-complie .input-file-container {
	position: relative;
	width: 100%;
	padding: 15px;
	padding-bottom: 0
}

.window-complie .file-drop-area {
	position: relative;
	display: flex;
	align-items: center;
	width: 450px;
	max-width: 100%;
	padding: 25px;
	border: 1px dashed rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	transition: 0.2s;
}

	.window-complie .file-drop-area.is-active {
		background-color: rgba(0, 0, 0, 0.05);
	}

.window-complie .fake-btn {
	flex-shrink: 0;
	background-color: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	padding: 8px 15px;
	margin-right: 10px;
	font-size: 12px;
	text-transform: uppercase;
}

.window-complie .file-msg {
	font-size: small;
	font-weight: 300;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.window-complie .file-msg a {
		height: 20px;
		width: 20px;
		border-radius: 100%;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 7px;
		cursor: pointer;
		z-index: 1;
	}

		.window-complie .file-msg a:hover {
			color: var(--color-red);
			border-color: var(--color-red);
		}

.window-complie .file-input {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	opacity: 0;
}

	.window-complie .file-input:focus {
		outline: none;
	}


.map-wrapper .dock {
	position: absolute;
	z-index: 100;
}


.dock .btn-action {
	background-color: #fff;
	font-size: 16px;
	font-weight: 500;
	height: 38px;
	width: 38px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	position: relative;
	color: var(--primary-color);
}

	.dock .btn-action:hover {
		text-decoration: none;
	}

		.dock .btn-action:hover i {
			font-weight: 500;
			-webkit-animation: jello-horizontal 0.9s both;
			animation: jello-horizontal 0.9s both;
		}

	.dock .btn-action.selected {
		background-color: var(--primary-color);
		color: #fff;
		/*border-inline: 1px solid #167495*/
	}

		.dock .btn-action.selected i {
			font-weight: 800
		}


@-webkit-keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/*top-left*/
.map-wrapper .dock.top-left {
	top: 20px;
	left: 10px;
	display: flex;
	flex-direction: column;
	transition: left 0.3s ease-in-out;
}

.dock.top-left .btn-action {
	margin-bottom: 5px;
}

.dock.top-left .donvihanhchinh_wrapper {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	margin-bottom: 10px;
	border-radius: 5px
}

.donvihanhchinh_wrapper ol {
	display: flex;
	padding: 7px 15px;
	margin: 0
}

	.donvihanhchinh_wrapper ol li.capdonvihanhchinh {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		position: relative;
		color: #23282c;
		padding-left: 10px;
		position: relative;
	}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh:first-child {
			padding-left: 0px
		}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh:last-child:after {
			content: "";
		}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh a {
			text-decoration: none;
			color: #23282c;
			max-width: 150px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh > a:not(.disabled):hover {
			text-decoration: underline;
			color: #20a8d8
		}

.donvihanhchinh_wrapper .select2-container {
	margin-left: 7px
}

.donvihanhchinh_wrapper .select2-selection {
	width: 18px;
	height: 18px;
	border-radius: 50% !important;
}

	.donvihanhchinh_wrapper .select2-selection .select2-selection__rendered {
		display: none;
	}

	.donvihanhchinh_wrapper .select2-selection .select2-selection__arrow {
		height: 18px;
		width: 18px;
		top: 0;
		right: 0;
		position: relative
	}

		.donvihanhchinh_wrapper .select2-selection .select2-selection__arrow:after {
			content: "\f054";
			font-family: "Font Awesome 5 Pro";
			font-weight: 400;
			position: absolute;
			top: 1px;
			left: 6px;
			color: #aaa;
			font-size: 0.7em;
			transition: transform 0.1s ease-in-out
		}

		.donvihanhchinh_wrapper .select2-container--open .select2-selection__arrow::after {
			transform: rotateZ(90deg);
			left: 5px;
		}

.donvihanhchinh_wrapper .select2-selection .select2-selection__arrow b {
	display: none;
}

.donvihanhchinh-dropdown {
	position: absolute;
	top: 20px;
	left: 100%;
}

	.donvihanhchinh-dropdown .select2-container {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
	}

	.donvihanhchinh-dropdown .select2-dropdown {
		width: auto !important;
		border: 1px solid #f5f5f5 !important;
		border-radius: 0px !important;
	}

	.donvihanhchinh-dropdown .select2-search__field {
		border: 1px solid #f5f5f5 !important;
		outline: none;
		border-radius: 0px !important;
	}

	.donvihanhchinh-dropdown .select2-results__options {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #ddd #f5f5f5;
	}


		.donvihanhchinh-dropdown .select2-results__options::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}


		.donvihanhchinh-dropdown .select2-results__options::-webkit-scrollbar-track {
			background: #f5f5f5;
		}


		.donvihanhchinh-dropdown .select2-results__options::-webkit-scrollbar-thumb {
			background-color: #ddd;
			border-radius: 20px;
			border: 0px solid #f5f5f5;
		}

	.donvihanhchinh-dropdown .select2-results__option {
		padding: 6px 10px;
		white-space: nowrap;
		font-size: 0.875rem
	}


/*bottom-left*/
.map-wrapper .dock.bottom-left {
	bottom: 45px;
	left: 10px;
	display: flex;
	transition: left 0.3s ease-in-out, bottom 0.3s ease-in-out;
	z-index: 102;
}

.dock.bottom-left #btnChangeBaseLayer {
	background-color: #ccc;
	bottom: 0;
	border-radius: 8px;
	border: 2px solid white;
	box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
	box-sizing: border-box;
	height: 80px;
	width: 80px;
	position: relative;
	background-position: center;
	background-image: url("../../images/map/planning.png");
	background-size: cover;
}


	.dock.bottom-left #btnChangeBaseLayer.default {
		background-image: url("../../images/map/default.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.terrain {
		background-image: url("../../images/map/terrain.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.satellite {
		background-image: url("../../images/map/satellite.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.administrative {
		background-image: url("../../images/map/administrative.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.dark {
		background-image: url("../../images/map/dark.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.light {
		background-image: url("../../images/map/light.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.bicycling {
		background-image: url("../../images/map/bicycling.png")
	}

	.dock.bottom-left #btnChangeBaseLayer.planning {
		background-image: url("../../images/map/planning.png")
	}

	.dock.bottom-left #btnChangeBaseLayer:hover {
		border-width: 4px
	}


	.dock.bottom-left #btnChangeBaseLayer label {
		position: absolute;
		border-radius: 6px;
		cursor: pointer;
		pointer-events: none;
		color: white;
		font-size: 11px;
		line-height: normal;
		text-align: center;
		padding: 10px 0 5px 0px;
		margin: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.6)));
		background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.6));
		background-image: linear-gradient(transparent,rgba(0,0,0,.6));
	}

/*.dock.bottom-left #btnChangeBaseMap:hover ~ .base-layer-switcher {
			display: block
		}*/


.dock.bottom-left .base-layer-switcher {
	visibility: hidden;
	position: absolute;
	left: 90px;
	bottom: 0;
	transition: visibility 0.5s ease-in-out;
}

	.dock.bottom-left .base-layer-switcher.open {
		visibility: visible;
	}

.dock.bottom-left .list-base-layer {
	background-color: #fff;
	border-radius: 8px;
	bottom: 0;
	box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
	color: black;
	left: 8px;
	position: relative;
	padding: 10px 16px 6px;
	display: flex;
	flex-direction: row;
	margin: 0
}

	.dock.bottom-left .list-base-layer li {
		list-style: none;
		padding-right: 15px
	}

		.dock.bottom-left .list-base-layer li:last-child {
			padding-right: 0px
		}

.dock.bottom-left .base-layer {
	color: inherit;
	cursor: pointer;
	display: inline-block;
	line-height: 0;
	position: relative;
	text-align: center;
	width: 70px;
}

	.dock.bottom-left .base-layer:hover {
		text-decoration: none
	}

	.dock.bottom-left .base-layer .image {
		margin: auto;
		background-position: center;
		background-size: 48px 48px;
		border-radius: 8px;
		display: inline-block;
		height: 48px;
		width: 48px;
		background-image: url("../../images/map/planning.png")
	}

	.dock.bottom-left .base-layer label {
		color: #70757a;
		cursor: pointer;
		display: block;
		font-size: 12px;
		line-height: 12px;
		margin-top: 3px;
	}


	.dock.bottom-left .base-layer.selected .image {
		background-clip: content-box;
		border: 2px solid #1a73e8;
		padding: 2px;
	}

	.dock.bottom-left .base-layer.selected label {
		font-weight: bold;
		color: #20a8d8;
	}

	.dock.bottom-left .base-layer.default .image {
		background-image: url("../../images/map/default.png")
	}

	.dock.bottom-left .base-layer.terrain .image {
		background-image: url("../../images/map/terrain.png")
	}

	.dock.bottom-left .base-layer.satellite .image {
		background-image: url("../../images/map/satellite.png")
	}

	.dock.bottom-left .base-layer.administrative .image {
		background-image: url("../../images/map/administrative.png")
	}

	.dock.bottom-left .base-layer.dark .image {
		background-image: url("../../images/map/dark.png")
	}

	.dock.bottom-left .base-layer.light .image {
		background-image: url("../../images/map/light.png")
	}

	.dock.bottom-left .base-layer.bicycling .image {
		background-image: url("../../images/map/bicycling.png")
	}

	.dock.bottom-left .base-layer.planning .image {
		background-image: url("../../images/map/planning.png")
	}

/*top right*/
.map-wrapper .dock.top-right {
	top: 20px;
	right: 10px;
	display: flex;
	flex-direction: column;
	transition: right 0.3s ease-in-out;
}

.map-wrapper.open-complie .dock.top-right {
	right: 410px;
}

.dock.top-right .btn-action {
	margin-bottom: 5px;
}


.dock.top-right .slider-opacity {
	margin-top: 10px;
	height: 150px;
	width: 38px;
	display: flex;
	justify-content: center;
	align-items: center;
}


.slider-opacity .slider-container {
	width: 150px;
	transform: translateX(0) translateY(0) rotate(-90deg);
	position: relative;
}

.slider-opacity input[type="range"] {
	outline: 0;
	border: 0;
	width: 150px;
	max-width: 100%;
	height: 5px;
	border-radius: 5px;
	-webkit-appearance: none;
	background-color: #fff;
}

	.slider-opacity input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		cursor: pointer;
		background: #fff;
		border-radius: 50%;
		transition: background 0.2s ease-in-out;
		position: relative;
		border: 3px solid var(--primary-color);
	}

	.slider-opacity input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		cursor: pointer;
		background: #fff;
		border-radius: 50%;
		transition: background 0.2s ease-in-out;
		position: relative;
		border: 3px solid var(--primary-color);
	}

	.slider-opacity input[type="range"]:active::-webkit-slider-thumb {
		background: var(--primary-color);
		border-color: #fff
	}

.slider-opacity .label-container {
	width: 150px;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	padding: 0 10px;
}

.slider-opacity .label-subcontainer {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.slider-opacity .label-opacity {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 22px;
	left: 100%;
	width: 38px;
	height: 38px;
	color: #fff !important;
	font-size: 12px;
	transform: translateX(-50%) rotate(90deg);
	transition: margin-bottom 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

	.slider-opacity .label-opacity span {
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 0;
		background-color: #1597ff;
		border-radius: 50% 50% 0 50%;
		transform: rotate(-45deg);
		z-index: -1;
	}

.slider-opacity input:not(:active) ~ .label-container .label-opacity {
	opacity: 0;
	margin-bottom: 0px;
	pointer-events: none;
}

.slider-opacity input:not(:active) {
	filter: none !important;
}

/*/*bottom right*/
.map-wrapper .dock.bottom-right {
	bottom: 10px;
	right: 10px;
	transition: right 0.3s ease-in-out;
}

.map-wrapper.open-complie .dock.bottom-right {
	right: 410px;
}

.dock.bottom-right .draw-action {
	display: flex;
	flex-direction: row;
}

.dock.bottom-right .btn-action {
	margin-left: 5px;
}


.dock.bottom-right .draw-toolbar {
	background: #fff;
	position: absolute;
	right: -190px;
	top: -65px;
	padding: 10px;
	width: 190px;
	visibility: hidden;
	transition: right 0.3s ease-in-out, visibility 0.3s step-end;
	font-size: .875rem
}

	.dock.bottom-right .draw-toolbar.active {
		visibility: visible;
		right: 0;
		transition: right 0.3s ease-in-out;
	}

	.dock.bottom-right .draw-toolbar input {
		width: 80px;
		margin: 0px 5px;
		font-size: .875rem
	}

.dock.bottom-right .search-toolbar {
	background-color: transparent;
	position: absolute;
	right: -190px;
	top: -45px;
	min-width: 40px;
	visibility: hidden;
	transition: right 0.3s ease-in-out, visibility 0.3s step-end;
}

	.dock.bottom-right .search-toolbar.active {
		visibility: visible;
		right: 0;
		transition: right 0.3s ease-in-out;
	}

.dock.bottom-right .draw-toolbar.active ~ .search-toolbar.active {
	right: 200px
}


/*doc bottom center*/
.map-wrapper .dock.bottom-center {
	bottom: 10px;
	left: 50%;
	transform: translate(-50%);
	transition: right 0.3s ease-in-out;
}


	.map-wrapper .dock.bottom-center .information {
		background: #fff;
		display: flex;
		flex-direction: row;
		border-radius: 40px;
		justify-content: center;
		align-items: center;
		height: 40px;
	}

.information .button-toggle {
	height: 100%;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary-color);
	text-decoration: none;
}

	.information .button-toggle:hover {
	}

		.information .button-toggle:hover i {
			transform: scale(1.1);
			-webkit-animation: jello-horizontal 0.9s both;
			animation: jello-horizontal 0.9s both;
		}

.information .content {
	height: 100%;
	display: flex;
	flex-direction: row;
	max-width: 0;
	transition: max-width 0.4s ease-in-out;
	overflow: hidden;
}

	.information .content div {
		position: relative;
		padding-right: 20px;
		height: 100%;
		line-height: 40px;
		cursor: pointer
	}

		.information .content div:after {
			content: '';
			position: absolute;
			top: 25%;
			right: 10px;
			border-right: 1px solid #dce7eb;
			height: 50%
		}

		.information .content div:last-child {
			padding-right: 20px;
		}

			.information .content div:last-child:after {
				border-right: 0;
			}

		.information .content div .icon {
			color: var(--primary-color);
			padding-right: 5px
		}

		.information .content div .value {
			/*font-weight: 500*/
		}

.information .button-toggle.active ~ .content {
	max-width: 800px;
}
/*open panel*/
.open-panel .panel-left-wrapper {
	left: 0
}

.open-panel .map-wrapper .dock.bottom-left {
	left: 410px;
	bottom: 10px
}

.open-panel .map-wrapper .dock.top-left {
	left: 410px
}


.accordion-custom {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

	.accordion-custom .accordion-item {
		position: relative;
		padding-bottom: 4px;
		padding-top: 18px;
		border-top: 1px solid #dce7eb;
	}

.accordion-item.blue {
	border-left: 5px solid var(--bg-blue);
}

.accordion-item.green {
	border-left: 5px solid var(--bg-green);
}

.accordion-item.orange {
	border-left: 5px solid var(--bg-orange);
}

.accordion-item.purple {
	border-left: 5px solid var(--bg-purple);
}

.accordion-item.red {
	border-left: 5px solid var(--bg-red);
}

.accordion-item > input[type="checkbox"] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 50px;
	z-index: 1;
	opacity: 0;
}

.accordion-item > i {
	position: absolute;
	transform: translate(-6px,0);
	margin-top: 9px;
	right: 10px;
}

.accordion-item > input[type=checkbox]:checked ~ .accordion-content {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translateX(-50%);
}

.accordion-item > input[type="checkbox"]:checked ~ i::before {
	transform: translate(2px,0) rotate(45deg);
}

.accordion-item > input[type="checkbox"]:checked ~ i::after {
	transform: translate(-2px,0) rotate(-45deg);
}

.accordion-item > i::before, .accordion-item > i::after {
	content: "";
	position: absolute;
	background: #333;
	width: 1px;
	height: 7px;
}

.accordion-item > i::before {
	transform: translate(-2px,0)rotate(45deg);
}

.accordion-item > i:after {
	transform: translate(2px, 0) rotate(-45deg);
}

.accordion-item .accordion-header {
	height: 50px;
	padding: 0px 20px 0px 10px;
	/*border-left: 3px solid rgba(11,183,175,.5);*/
}

	.accordion-item .accordion-header h5 {
		margin-bottom: 0;
		font-size: 1rem
	}

	.accordion-item .accordion-header p {
		color: #a1aab2;
	}

.accordion-item .accordion-content {
	font-size: 16px;
	color: rgba(48,69,92,0.8);
	line-height: 26px;
	position: relative;
	padding: 0 11px;
	margin-top: 14px;
	opacity: 1;
	transform: translate(0,0);
	overflow: hidden;
}

.transition, .accordion-content, .accordion-item > i:before, .accordion-item > i:after {
	transition: all 0.2s ease-in-out;
}

.flipIn, .accordion-header, .accordion-item {
	animation: flipdown 0.2s ease both;
}

.accordion-custom > .accordion-item:nth-of-type(1) {
	animation-delay: 0.4s;
}

.accordion-custom > .accordion-item:nth-of-type(2) {
	animation-delay: 0.6s;
}

.accordion-custom > .accordion-item:nth-of-type(3) {
	animation-delay: 0.8s;
}

.accordion-custom > .accordion-item:nth-of-type(4) {
	animation-delay: 1s;
}

.accordion-custom > .accordion-item:nth-of-type(5) {
	animation-delay: 1.2s;
}

.accordion-custom > .accordion-item:nth-of-type(6) {
	animation-delay: 1.4s;
}

.accordion-custom > .accordion-item:nth-of-type(7) {
	animation-delay: 1.6s;
}

.accordion-custom > .accordion-item:last-of-type {
	padding-bottom: 0;
}

@keyframes flipdown {
	0% {
		opacity: 0;
		transform-origin: top center;
		transform: rotateX(-90deg);
	}

	5% {
		opacity: 1;
	}

	80% {
		transform: rotateX(8deg);
	}

	83% {
		transform: rotateX(6deg);
	}

	92% {
		transform: rotateX(-3deg);
	}

	100% {
		transform-origin: top center;
		transform: rotateX(0deg);
	}
}




.list-layer-info {
	padding: 0.75rem;
	margin: 0;
	height: 100%;
	list-style: none
	/*overflow-y: auto;*/
}

.layer-info {
	margin: 0 0 0.75rem;
	padding: 1rem 1rem;
	/*border-left: 4px solid #404040;*/
	/*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
	background: white;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	border: 1px solid #ececec;
	border-radius: 5px
}

	.layer-info.green .icon {
		background: var(--bg-green);
		border: 1px solid #fff;
		transition: all 0.3s ease-in-out;
	}

		.layer-info.green .icon i {
			border-left-color: var(--color-green);
		}

	.layer-info.green:hover .icon {
		color: var(--color-green);
		border: 1px solid var(--color-green);
		background: #fff;
	}

	.layer-info.blue .icon {
		background: var(--bg-blue);
		border: 1px solid #fff;
		transition: all 0.3s ease-in-out;
	}

		.layer-info.blue .icon i {
			border-left-color: var(--color-blue);
		}

	.layer-info.blue:hover .icon {
		color: var(--color-blue);
		border: 1px solid var(--color-blue);
		background: #fff;
	}

	.layer-info.red .icon {
		background: var(--bg-red);
		border: 1px solid #fff;
		transition: all 0.3s ease-in-out;
	}

		.layer-info.red .icon i {
			border-left-color: var(--color-red);
		}

	.layer-info.red:hover .icon {
		color: var(--color-red);
		border: 1px solid var(--color-red);
		background: #fff;
	}

	.layer-info.orange .icon {
		background: var(--bg-orange);
		border: 1px solid #fff;
		transition: all 0.3s ease-in-out;
	}

		.layer-info.orange .icon i {
			border-left-color: var(--color-orange);
		}

	.layer-info.orange:hover .icon {
		color: var(--color-orange);
		border: 1px solid var(--color-orange);
		background: #fff;
	}

	.layer-info.purple .icon {
		background: var(--bg-purple);
		border: 1px solid #fff;
		transition: all 0.3s ease-in-out;
	}


		.layer-info.purple .icon i {
			border-left-color: var(--color-purple);
		}

	.layer-info.purple:hover .icon {
		color: var(--color-purple);
		border: 1px solid var(--color-purple);
		background: #fff;
	}


	.layer-info:hover {
		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 0.1);
	}

		.layer-info:hover .icon {
			/*transform: scale(1.1);*/
		}

			.layer-info:hover .icon i {
				font-weight: 800
				/*transform: scale(1.1);*/
			}

	.layer-info .wrapper {
		display: flex;
		align-items: center;
	}

	.layer-info .icon {
		width: 40px;
		height: 40px;
		line-height: 20px;
		padding: 0.5rem;
		margin: 0 0.75rem 0 0;
		text-align: center;
		background: silver;
		border-radius: 50%;
		font-size: 20px;
		color: white;
		overflow: hidden;
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.layer-info .content {
		margin: 0;
		line-height: 1.5;
		flex: 1
	}

		.layer-info .content .title {
			font-size: 1rem;
			font-weight: 600;
			margin: 0;
		}

		.layer-info .content .description {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 0.85rem
		}

			.layer-info .content .description span {
				/*display: flex*/
			}

		.layer-info .content small {
			font-size: 14px;
		}

.empty-layer-info {
	width: 100%;
	height: 100%;
	background: url(../../images/no_thing_here.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
	position: relative;
}

	.empty-layer-info::after {
		content: attr(data-title);
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 200px;
		font-size: 14px;
		font-weight: 600;
		color: #c8ccd5;
	}

.detail-layer-info {
	will-change: transform;
	display: flex;
	flex-flow: column wrap;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	z-index: 2;
	visibility: hidden;
	transform-origin: top center;
	transform: scaleY(0) translate(-50%, -50%);
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

	.detail-layer-info.active {
		visibility: visible;
		transform: scaleY(1) translate(-50%, -50%);
	}

		.detail-layer-info.active .title,
		.detail-layer-info.active .properties,
		.detail-layer-info.active .map-thuadat {
			opacity: 1;
		}

	.detail-layer-info .header {
		height: 100px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #5171C3;
		overflow: hidden;
		color: #fff;
		padding: 0px 40px;
		font-weight: bold;
	}

		.detail-layer-info .header:before {
			background-image: none !important;
		}

		.detail-layer-info .header:after {
			background-image: none !important;
		}

		.detail-layer-info .header .close {
			position: absolute;
			top: 1rem;
			left: 1rem;
			fill: rgba(0, 0, 0, 0.4);
			width: 32px;
			cursor: pointer;
			transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		}

			.detail-layer-info .header .close:hover {
				color: rgba(0, 0, 0, 0.7);
			}

	.detail-layer-info .content {
		flex: 1;
		/*display: flex;
		flex-flow: column;*/
		padding: 15px;
		background: white;
	}

		.detail-layer-info .content .row {
			padding-bottom: 10px
		}

			.detail-layer-info .content .row .value {
				font-weight: 600
			}

	.detail-layer-info .title, .detail-layer-info .properties, .detail-layer-info .map-thuadat {
		opacity: 0;
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition-duration: 2s;
		transition-delay: 0.35s;
	}


	.detail-layer-info .content .map-container {
		width: 100%;
		height: 330px;
	}

	.detail-layer-info .content .legends {
		margin-top: 10px
	}

	.detail-layer-info .content .legend {
		display: flex;
		margin-bottom: 10px
	}

		.detail-layer-info .content .legend .color {
			width: 30px;
			height: 30px;
			background-color: attr(data-color);
			border-radius: 5px
		}

		.detail-layer-info .content .legend .name {
			flex: 1;
			line-height: 30px;
			padding-left: 10px
		}

/*------------------------------------------------------------------
[ Input ]*/
.panel-search .panel-header {
	border-bottom: 1px solid #f5f5f5
}

.panel-search .panel-content {
	overflow: hidden;
}

	.panel-search .panel-content .tab-content {
		height: calc(100% - 50px);
		overflow: hidden;
	}

		.panel-search .panel-content .tab-content .tab-pane {
			overflow-y: auto;
			margin-top: 10px;
		}

.panel-search .nav-tabs {
	border-bottom: 0;
}

	.panel-search .nav-tabs .nav-link {
		border: 0;
		padding: 10px;
	}

		.panel-search .nav-tabs .nav-link i {
			padding-right: 5px;
		}

		.panel-search .nav-tabs .nav-link.active {
			font-weight: 600;
			color: var(--primary-color);
			border-bottom: 2px solid var(--primary-color)
		}

			.panel-search .nav-tabs .nav-link.active i {
				color: var(--primary-color);
				font-weight: 600;
			}

.form-search-thuadat {
	padding: 15px
}

	.form-search-thuadat > div {
		animation: flipdown 0.25s ease both;
	}

		.form-search-thuadat > div:nth-of-type(1) {
			animation-delay: 0.25s;
		}

		.form-search-thuadat > div:nth-of-type(2) {
			animation-delay: 0.5s;
		}

		.form-search-thuadat > div:nth-of-type(3) {
			animation-delay: 0.75s;
		}

		.form-search-thuadat > div:nth-of-type(4) {
			animation-delay: 1s;
		}


.wrap-inputsearch {
	width: 100%;
	position: relative;
	/*border: 1px solid #e6e6e6;*/
	border: 1px solid #f5f5f5;
	border-radius: 10px;
	margin-bottom: 20px;
}

.label-inputsearch {
	/*font-family: Montserrat-SemiBold;*/
	font-size: 11px;
	color: #666666;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 15px 0 2px 24px;
	position: absolute;
	z-index: 1
}

.inputsearch {
	display: block;
	width: 100%;
	background: transparent;
	/*font-family: Montserrat-Regular;*/
	font-size: 0.9rem;
	color: #404b46;
	line-height: 1.2;
	padding: 30px 26px 5px;
	outline: none;
	border: none;
}

input.inputsearch {
	height: 70px;
}

textarea.inputsearch {
	min-height: 130px;
	padding-top: 14px;
	padding-bottom: 15px;
}

.validate-input {
	position: relative;
}

.alert-validate::before {
	content: attr(data-validate);
	position: absolute;
	max-width: 70%;
	background-color: #fff;
	border: 1px solid var(--bg-red);
	border-radius: 2px;
	padding: 4px 25px 4px 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 15px;
	pointer-events: none;
	color: var(--color-red);
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	transition: opacity 0.4s;
	border-radius: 20px;
}

.alert-validate::after {
	content: "\f05a";
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	display: block;
	position: absolute;
	color: var(--color-red);
	font-size: 16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 20px;
}

.alert-validate:hover:before {
	visibility: visible;
	opacity: 1;
}

/*---------------------------------------------*/

.focus-inputsearch {
	position: absolute;
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	top: -1px;
	left: -1px;
	pointer-events: none;
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scaleX(1.1) scaleY(1.3);
	-moz-transform: scaleX(1.1) scaleY(1.3);
	-ms-transform: scaleX(1.1) scaleY(1.3);
	-o-transform: scaleX(1.1) scaleY(1.3);
	transform: scaleX(1.1) scaleY(1.3);
}

.inputsearch:focus + .focus-inputsearch {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.eff-focus-selection {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.form-search-thuadat .select2-container {
	display: block;
	max-width: 100% !important;
	width: auto !important;
}

	.form-search-thuadat .select2-container .select2-selection--single {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		align-items: center;
		background-color: transparent;
		border: none;
		height: 70px;
		outline: none;
		position: relative;
	}

		/*------------------------------------------------------------------
[ in select ]*/
		.form-search-thuadat .select2-container .select2-selection--single .select2-selection__rendered {
			/*font-family: Montserrat-Regular;*/
			font-size: 0.9rem;
			color: #404b46;
			line-height: 1.2;
			padding-left: 26px;
			padding-top: 30px;
			background-color: transparent;
		}

.form-search-thuadat .select2-container--default .select2-selection--single .select2-selection__arrow {
	width: 20px;
	height: 100%;
	top: 45%;
	margin-top: 20px;
	transform: translateY(-50%);
	right: 19px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}


	.form-search-thuadat .select2-container--default .select2-selection--single .select2-selection__arrow b {
		border-top-color: #404b46;
	}

.form-search-thuadat .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-bottom-color: #404b46;
}



/*------------------------------------------------------------------
[ Dropdown option ]*/
.form-search-thuadat .select2-container--open .select2-dropdown {
	z-index: 1251;
	width: calc(100% + 2px);
	border: 0px solid transparent;
	border-radius: 5px;
	overflow: hidden;
	background-color: white;
	left: -2px;
	box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
}

.form-search-thuadat .select2-dropdown--above {
	top: -34px;
}

.form-search-thuadat .select2-dropdown--below {
	top: 2px;
}

.form-search-thuadat .select2-container .select2-results__option[aria-selected] {
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 26px;
}

.form-search-thuadat .select2-container .select2-results__option[aria-selected="true"] {
	background: var(--primary-color);
	color: white;
}

.form-search-thuadat .select2-container .select2-results__option--highlighted[aria-selected] {
	background: var(--primary-color);
	color: white;
}

.form-search-thuadat .select2-results__options {
	/*font-family: Montserrat-Regular;*/
	font-size: 0.9rem;
	color: #404b46;
	line-height: 1.2;
}

.form-search-thuadat .select2-search--dropdown .select2-search__field {
	border: 1px solid #aaa;
	outline: none;
	/*font-family: Montserrat-Regular;*/
	font-size: 0.9rem;
	color: #404b46;
	line-height: 1.2;
}

.wrap-inputsearch .dropDownSelect2 .select2-container--open {
	width: 100% !important;
}

.wrap-inputsearch .dropDownSelect2 .select2-dropdown {
	width: calc(100% + 2px) !important;
}

.wrap-inputsearch .dropDownSelect2 .select2-search--dropdown {
}

.wrap-inputsearch .dropDownSelect2 .select2-search__field {
	height: 35px;
	border: 1px solid #f5f5f5;
	border-radius: 5px;
	padding: 0px 10px;
}


.wrap-inputsearch .dropDownSelect2 .select2-results__options {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ddd #f5f5f5;
}


	.wrap-inputsearch .dropDownSelect2 .select2-results__options::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}


	.wrap-inputsearch .dropDownSelect2 .select2-results__options::-webkit-scrollbar-track {
		background: #f5f5f5;
	}


	.wrap-inputsearch .dropDownSelect2 .select2-results__options::-webkit-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 20px;
		border: 0px solid #f5f5f5;
	}

.form-search-thuadat .checkbox-spin {
	display: none;
}

.form-search-thuadat .checkbox {
	position: relative;
	margin-bottom: 5px;
}

.form-search-thuadat .layer-search {
	margin-bottom: 20px
}

	.form-search-thuadat .layer-search .wrap-checkbox {
		max-height: 300px;
		padding: 15px 0px;
		padding-left: 20px;
	}

.form-search-thuadat .checkbox label {
	display: inline-block;
	/*color: #fff;*/
	cursor: pointer;
	position: relative;
}

.form-search-thuadat .checkbox {
	position: relative;
	text-align: left;
	padding-left: 5px;
}

	.form-search-thuadat .checkbox label {
		cursor: pointer;
		padding-left: 26px;
	}

		.form-search-thuadat .checkbox label:before,
		.form-search-thuadat .checkbox label:after {
			content: '';
			position: absolute;
			top: 50%;
			/*border-radius: 50%;*/
			border-radius: 0;
		}

		.form-search-thuadat .checkbox label:before {
			left: 0;
			width: 16px;
			height: 16px;
			margin: -8px 0 0;
			background: #fff;
			/*box-shadow: 0 0 1px var(--primary-color);*/
			border: 1px solid rgba(0,0,0,0.1);
			transition: border-color 0.3s ease-in-out;
			transform: rotate(45deg);
		}

		.form-search-thuadat .checkbox label:after {
			left: 4px;
			width: 8px;
			height: 8px;
			margin: -4px 0 0;
			opacity: 0;
			background: var(--primary-color);
			transform: translate3d(-40px, 0, 0) scale(0.5);
			transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
		}

	.form-search-thuadat .checkbox input[type="checkbox"] {
		position: absolute;
		top: 0;
		left: -9999px;
		visibility: hidden;
	}

		.form-search-thuadat .checkbox input[type="checkbox"]:checked + label:before,
		.form-search-thuadat .checkbox input[type="checkbox"]:checked + label:after {
			transform: rotate(45deg);
			opacity: 1;
			border-color: var(--primary-color);
		}

.search-region-container {
	padding: 15px;
	position: relative;
}

	.search-region-container button {
		color: #fff;
		background-color: var(--color-green);
		border-color: var(--color-green);
		transition: all 0.3s ease-in-out;
	}

		.search-region-container button:not(:disabled):not(.disabled):active:focus {
			box-shadow: var(--bg-green);
		}


		.search-region-container button:not(:disabled):not(.disabled).active {
			color: #fff;
			background-color: #3a9d5d;
			border-color: #379457;
		}

		.search-region-container button.btn-unsuccess:disabled {
			cursor: default;
			background-color: var(--bg-orange);
			border-color: var(--bg-orange);
			color: var(--color-orange);
		}

		.search-region-container button.btn-unsuccess:disabled i:before {
			content: '\f071';
			font-family: "Font Awesome 5 Pro";
		}

	.search-region-container .message {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s;
		margin-top: 10px;
		font-style: italic;
		color: var(--color-green);
		text-align: left;
	}

	.search-region-container button.btn-unsuccess:disabled ~ .message {
		color: var(--color-orange);
	}

	.search-region-container button:hover ~ .message {
		max-height: 5rem;
	}

/*Custom map*/

.vbd_info {
	max-height: 39px !important;
}

	/*.vbd_info > div:first-child > div:nth-of-type(1) {
		height: 39px !important;
	}*/

	.vbd_info > div:first-child > div:nth-of-type(2) > div {
		top: -12px !important
	}

/*.vbd_info > div:first-child > div:nth-of-type(3) {
		height: 37px !important;
	}*/

.vbd_info_content {
	height: 21px !important;
}

	.vbd_info_content .distance-info {
		white-space: nowrap
	}

.vbd_info_div_img {
	display: none !important;
}

/*Icon Marker*/
.icon-marker {
	font-size: 10px;
	color: white;
	border-radius: 100%;
	text-align: center;
	position: relative;
	height: 34px;
	line-height: 23px
}

	.icon-marker .pin-marker {
		border-radius: 50%;
		border: 10px solid #05cb63;
		width: 10px;
		height: 10px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

		.icon-marker .pin-marker::after {
			position: absolute;
			content: '';
			width: 0px;
			height: 0px;
			bottom: -34px;
			left: -10px;
			border: 10px solid transparent;
			border-top: 21px solid #05cb63;
		}

.marker-thuadat {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	pointer-events: none !important;
}

	.marker-thuadat span {
		pointer-events: none !important;
	}

	.marker-thuadat .loaidat {
		padding-right: 3px;
		pointer-events: none !important;
	}

	.marker-thuadat .thuadat {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		text-align: center;
		pointer-events: none !important;
	}

		.marker-thuadat .thuadat:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			border-top: 1px solid #23282c;
			transform: translate(-50%, -50%)
		}

/*RESPONSIVE*/

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

	.map-wrapper .dock.bottom-left {
		right: 10px;
		bottom: 55px;
		left: auto;
		transition-delay: 0.2s;
	}

	.dock.bottom-right.expanded ~ .dock.bottom-left {
		bottom: 120px;
		transition-delay: 0;
		transition: left 0.3s ease-in-out, bottom 0.3s ease-in-out;
	}
		.dock.bottom-left .base-layer-switcher {
			bottom: 0px;
			left: -105px;
		}

	.dock.bottom-left .list-base-layer {
		flex-direction: column;
		padding: 10px;
	}

		.dock.bottom-left .list-base-layer li {
			padding-right: 0px;
			padding-bottom: 10px;
		}

			.dock.bottom-left .list-base-layer li:last-child {
				padding-bottom: 0px;
			}


	.dock.top-left .donvihanhchinh_wrapper {
		background-color: transparent !important;
	}

	.donvihanhchinh_wrapper ol {
		display: block !important;
		padding: 0;
	}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh {
			background: #fff;
			margin-bottom: 5px;
			padding: 7px 7px 7px 10px !important;
			border-radius: 5px;
			display: table;
		}

		.donvihanhchinh_wrapper ol li.capdonvihanhchinh a{
			display: table-cell;
		}

	.donvihanhchinh_wrapper .select2-container {
		margin-top: -3px;
	}

	.donvihanhchinh_wrapper .donvihanhchinh-dropdown {
		left: 45px !important;
		top: 29px !important;
	}

	.map-wrapper .dock.bottom-center {
		display: none;
	}
}

#btnSearchThuaDat {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

#btnDrawShapeText {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

@media only screen and (max-width: 550px) {
	.notifyjs-corner {
		top: 50vh !important;
	}
}

#lbGhiChu{
	position:absolute;
	bottom:10px;
}

@media only screen and (max-height: 700px) {
	#lbGhiChu {
		position: relative;
		height: 50px;
		padding-top: 50px;
		padding-bottom: 30px;
	}

}



.btn-spinner i{
	-webkit-animation: spin 1.5s linear infinite;
	-moz-animation: spin 1.5s linear infinite;
	-ms-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}

	.btn-spinner i:before {
		content: '\f110' !important;
		font-family: "Font Awesome 5 Pro";
	}

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

	100% {
		transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loader-ripple {
	0% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	4.9% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	5% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0px;
		left: 0px;
		width: 54px;
		height: 54px;
		opacity: 0;
	}
}


@-moz-keyframes loader-ripple {
	0% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	4.9% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	5% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0px;
		left: 0px;
		width: 54px;
		height: 54px;
		opacity: 0;
	}
}

@-ms-keyframes loader-ripple {
	0% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	4.9% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	5% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0px;
		left: 0px;
		width: 54px;
		height: 54px;
		opacity: 0;
	}
}

@keyframes loader-ripple {
	0% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	4.9% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 0;
	}

	5% {
		top: 27px;
		left: 27px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0px;
		left: 0px;
		width: 54px;
		height: 54px;
		opacity: 0;
	}
}