#kmlEditorBtn, #btnLiveSave{
	position: absolute;
  	z-index: 999;
  	right: 80px;
  	top: -7px;
  	width: 100px;
  	height: 45px;
}
#kmlEditorBtn{
  	right: 80px;
}
#btnLiveSave{
	right: calc(80px + 100px + 0.5rem);
}
#kmlEditorBtn.open, #btnLiveSave{
	font-size: 1rem;
  	line-height: 1;
}
.kmlLayerButtons{
	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	align-items: center;
  	align-content: center;
  	position: absolute;
  	left: -80px;
	width: 80px;
	height: 33px;
	padding: 5px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.legend-small-btn{
	width: 30px;
	height: 30px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px 25px;
	cursor: pointer;
}
.kmlDeleteBtn{
	background-image: url("/map/images/icon-delete-white.svg");
}
.kmlEditBtn{
	background-image: url("/map/images/icon-edit-white.svg");
}
#kmlEditorBtn.disabled{
	background-color: #6d6d6d;
    font-size: 0.8rem;
	line-height: 120%;
    text-transform: none;
	cursor: not-allowed;
	width: 200px;
}
.kmlAddBtn, #kmlEditorConfirmModal .btn{
	font-size: 1rem;
  	line-height: 1;
	width: 100%;
	margin: 0.5rem 0;
}
.modal {
  	position: fixed;
  	z-index: 1000;
  	left: 0;
  	top: 0;
  	width: 100vw;
  	height: 100%;
  	background-color: rgba(0,0,0,0.5);
}
.modal-content {
  	background-color: #fff;
  	/*margin: 5% auto;*/
	margin: calc((100vh - 250px)/2) auto;
  	padding: 2rem;
  	width: 350px;
  	height: 350px;
  	overflow: auto;
  	border-radius: 8px;
  	position: relative;
}
#kmlEditorConfirmModal .btn{
	height: 50px!important;
	margin: 1rem 0;
}
#kmlEditorConfirmModal p{
	margin-bottom: 2rem;
}
#popupEditor{
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	top: 70px;
	right: 350px;
    /*top: 1.5rem;*/
    /*left: 1.5rem;*/
    /*right: 1.5rem;*/
    z-index: 999;
    width: 500px;
    height: auto;
/*    background: #fff;
    top: 300px;*/
}
.kmlEditor-card{
	position: relative;
	padding: 1rem;
	border-radius: 4px;
}
#closeButtonEditor{
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	width: 40px;
  	height: 40px;
  	background: #fff url("/layout/exit.svg") no-repeat center;
  	background-size: 28px;
  	box-shadow: none;
  	border: none;
	cursor: pointer;
}
#editorHeaderRow{
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 1rem;
	width: calc(100% - 50px);
}
.form-label{
	display: block;
	font-size: 0.9rem;
	font-weight: 300;
}
#replaceKmlButtonLabel{
	min-width: 100%;
	margin: 0;
	height: 30px;
	min-height: 30px;
  	padding: 0.1rem 1rem;
}
.form-input {
	display: block;
	margin: 0.25rem 0 1rem 0;
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.25rem;
}
#kmlFilename .form-input{
	display: flex;
	align-content: center;
	align-items: center;
}
.editorBtn{
	font-size: 0.9rem;
	height: 50px;
}
.styled-file::file-selector-button{
	display: none;
}
.color-selector {
    display: flex;
	justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    gap: 0.5rem;
    padding: 0.5rem;
}
.color-swatch {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s;
	border: 2px solid transparent;
    margin-right: 2px;
/*	box-shadow: 0 0 3px rgba(0,0,0,0.3);*/
}
.color-swatch.selected {
    transform: scale(1.35);
    border-color: #000;
    /*box-shadow: 0 0 6px rgba(0,0,0,0.6);*/
}
.color-swatch.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    box-shadow: none;
}
.form-counter{
	margin-top: -0.5rem;
  	text-align: right;
  	font-size: 0.9rem;
}
.kml-group,
.flexbox.row, .legendSubHeadline{
	cursor: grab;
}
.kml-group:active,
.flexbox.row:active,.legendSubHeadline:active {
	cursor: grabbing;
}
.sortable-chosen {
	cursor: grabbing;
}
.sortable-ghost {
	opacity: 0.4;
}
.dragIcon{
	display: inline-block;
	width: 15px;
	height: 20px;
	margin-right: 0.5rem;
	background: transparent url("/layout/icon-drag-handle.svg") no-repeat center center;
	background-size: contain;
}
#legend.kmlEditorMode .legendSubHeadline{
	display: flex;
  	flex-direction: row;
  	justify-content: flex-start;
  	align-items: center;
  	align-content: center;
}
@media (max-height: 910px) and (max-width: 768px) {
	#legend.kmlEditorMode .kmlLayerButtons{
		left: 0;
	}
}
@media (max-height: 965px) and (min-width: 768px) {
	#legend.kmlEditorMode .kmlLayerButtons{
		left: 0;
	}
	.kmlEditor-card{
		max-height: calc(100vh - 260px);
    	overflow-y: scroll;
    	overflow-x: visible;
	}
}