html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner > main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner > *{
  opacity: 0;
}

/* Spinner */
body.show-spinner::after{
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.active .title-name { 
	font-weight:bold;
}

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

.marker {
	    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-image: url(https://api.wa-maps.de/v1/images/marker/01/dark.svg);
}
.marker.active {
    background-image: url(https://api.wa-maps.de/v1/images/marker/01/seaGreen.svg);
}


.app-menu.map-menu .glyph-icon.simple-icon-arrow-down {
    display: inline;
    /* float: right; */
}

.app-menu.map-menu button.btn.btn-link.collapsed {
    /* width: 87%; */
    text-align: left;
}

.app-menu.map-menu button.btn.btn-link {
    width: calc(100% - 40px);
    text-align: left;
}

.app-menu.map-menu .glyph-icon.simple-icon-trash {
    display: inline;
    float: right;
    margin-left: 14px;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #8c0000;
    padding: 13px;
    color: #FFF;
	cursor:pointer;
}
.app-menu.map-menu .glyph-icon.simple-icon-trash:hover {
	cursor:pointer;
}

.app-menu.map-menu .border {
    position: relative;
}


.maps-form-inputs-marker {
	border-top:#CCC 1px solid;
}

body .app-menu {
	width:450px;
}

body .app-row {
    padding-right: 450px;
}

@media (max-width: 1199px){
	body  .app-row {
		padding-right: 0;
	}
}

@media (max-width: 1199px){
	body .app-menu {
		top: 80px;
		transform: translateX(450px);
		height: calc(100% - 80px);
	}
}
.map-container {
	width:100%;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.app-menu .app-menu-button {
    left: -125px;
}

.input-group-prepend.order-2 {
	order:2;
	margin-left:-1px;
	margin-right:0px;
}





/*
=======================================
=======================================
Login page
=======================================
=======================================
*/

@font-face {
  font-family: 'Montserrat';
  src: url('/../font/montserrat/montserrat-bold-webfont.eot');
  src: url('/../font/montserrat/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/../font/montserrat/montserrat-bold-webfont.woff2') format('woff2'),
       url('/../font/montserrat/montserrat-bold-webfont.woff') format('woff'),
       url('/../font/montserrat/montserrat-bold-webfont.ttf') format('truetype'),
       url('/../font/montserrat/montserrat-bold-webfont.svg#montserratbold') format('svg');
  font-weight: 700;
  font-style: normal;

}
@font-face {
  font-family: 'Montserrat';
  src: url('/../font/montserrat/montserrat-extrabold-webfont.eot');
  src: url('/../font/montserrat/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/../font/montserrat/montserrat-extrabold-webfont.woff2') format('woff2'),
       url('/../font/montserrat/montserrat-extrabold-webfont.woff') format('woff'),
       url('/../font/montserrat/montserrat-extrabold-webfont.ttf') format('truetype'),
       url('/../font/montserrat/montserrat-extrabold-webfont.svg#montserratextrabold') format('svg');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/../font/montserrat/montserrat-regular-webfont.eot');
  src: url('/../font/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/../font/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
       url('/../font/montserrat/montserrat-regular-webfont.woff') format('woff'),
       url('/../font/montserrat/montserrat-regular-webfont.ttf') format('truetype'),
       url('/../font/montserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
  font-weight: 400;
  font-style: normal;
}


.loginform .fixed-background {
  background-image: url(../img/wa-maps-10.png), linear-gradient(90deg, rgba(0,111,120,1) 0%, rgba(24,176,146,1) 50%);
  background-size: contain;
}

.loginform .text-white {
  font-family: 'Montserrat';
  font-size: 40px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: normal;
  color: #1f1f1f !important;
}

.loginform .auth-card .image-side {
  background-image: none;
  background-color: #fff;
  padding: 162px 75px;
}


.loginform .position-relative.image-side .white {
  font-family: Montserrat;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #808988 !important;
}

.loginform .position-relative.image-side .white br {
  display: none;
}

.loginform .position-relative.image-side .white a {
  color: #09abaa !important;
  text-decoration: underline;
  transition: all .3s ease-in-out;
}

.loginform .position-relative.image-side .white a:hover {
  text-decoration: none;
  color: #00292d !important;
}

.loginform .auth-card .form-side {
  background-color: #00292d;
  border-radius: 0 10px 10px 0;
}

@media all and (min-width: 992px) {
  .loginform .auth-card .form-side {
    width: 55%;
  }

  .loginform .auth-card .image-side {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
} /* End 991 */


.loginform .auth-card {
  align-items: stretch;
  border: 2px dashed #fff;
  margin: 20px;
  padding: 20px;
  box-shadow: none;
  background-color: transparent;
  height: 100%;
}

.loginform .has-float-label label, 
.loginform .has-float-label > span:last-of-type {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.72px;
  left: 0;
  top: -3px;
  transition: all .3s ease-in-out;
}

.loginform .has-float-label input:focus ~ span {
  top: -22px;
}

.loginform .has-float-label label::after, 
.loginform .has-float-label > span::after {
  content: none;
}

.loginform .form-control, .bootstrap-tagsinput {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgb(255 255 255 / 30%); 
  margin-bottom: 45px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: normal;
  color: #fff;
}

.loginform .form-control, .bootstrap-tagsinput:focus {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

.loginform .card h6.mb-4 {
  display: none;
}

.loginform button[type="submit"] {
  border-radius: 25px;
  border: dashed 2px #fff;
  background-color: transparent;
  min-width: 200px;
  transition: all .3s ease-in-out;
}

.loginform button[type="submit"]:hover {
  color: #00292d;
  background-color: #fff;
  border-color: #fff;
}

.loginform form .align-items-center.d-flex {
  justify-content: flex-end !important;
}

.loginform .logo-single {
  background: url('../img/wa-maps-logo-white.svg') no-repeat;
}

@media all and (max-width: 1440px) {
  .loginform .auth-card .image-side {
    padding: 162px 32px;
  }
} /* End 1440 */

@media all and (max-width: 1202px) {
  .loginform .auth-card .image-side {
    padding: 112px 32px;
  }
} /* End 1200 */


@media all and (max-width: 768px) {
  .loginform .auth-card {
    border: none;
    margin: 0;
    padding: 0;
  }
} /* End 768 */

#add-marker-button,
#add-filter-button  {
    float: right;
	cursor:pointer;
}


#accordion .glyph-icon.simple-icon-arrow-down,
#filter-accordion .glyph-icon.simple-icon-arrow-down {
    display: inline;
    float: right;
    margin-left: 14px;
    position: absolute;
    right: 40px;
    top: 0px;
    background-color: #027574;
    padding: 13px;
    color: #FFF;
	cursor:pointer;
}

.stile-image {
	width:100%;
}
.card_styles {
	cursor:pointer;
	padding:0px;
}
.card_styles .card_name {
    text-align: center;
    background-color: #09abaa;
    color: #FFF;
    padding: 7px 0px 5px;
    text-transform: uppercase;
    font-size: 11px;
	transition:all 0.3s;
}



.card_styles.active .card_name,
.card_styles:hover .card_name {
    background-color: #027574;
	transition:all 0.3s;
}
.settings-filter-container .input-group-prepend {
	display:inline-block;
}
.settings-filter-container .select2-container--bootstrap .select2-selection--multiple {
	padding: 5px 0px 0px 0px !important;
	border-radius:0px !important;
	height:auto !important;
}
.settings-filter-container .select2-container--bootstrap {
	display:inline-block !Important;
	width: calc(100% - 56px) !Important;
	vertical-align: top;
}

.settings-filter-container .select2-search__field {
	width:100% !Important;
}



#boxscroll {
	padding: 40px;
	height: 220px;
	width: 300px;
	border: 2px solid #00F;
	overflow: auto;
  margin-bottom:30px;
}
#boxscroll2 {
	padding: 40px;
	height: 120px;
	width: 730px;
	border: 2px solid #F00;
	overflow: auto;
}
#boxscroll3 {
	overflow: hidden;
}
#boxframe {
	position:absolute;
	top:28px;
	left:420px;
	width:400px;
	height:300px;
	overflow:auto;
	border: 2px solid #0F0;
}
#boxscroll4 {
	height: calc(100vh - 200px);
	overflow: auto;
}

.settings-icons-container .icon-cnt img {
    width: 100%;
	opacity: 0.5;
	transition:all 0.3s;
	cursor:pointer;
}
.settings-icons-container .icon-cnt:hover img,
.settings-icons-container .icon-cnt.active img {
    width: 100%;
	opacity: 1;
	transition:all 0.3s;
}

.settings-icons-container .icon-cnt:hover,
.settings-icons-container .icon-cnt.active {
    border: #505050 1px solid;
}

.settings-icons-container .col-1 {
    margin: 3px;
    padding: 3px;
    border: #ccc 1px solid;
}

.settings-icons-container .row {
    margin: 10px -2px;
}

.settings-icons-container .col-1.light {
    background-color: #454545;
}

.settings-icons-container img {
    width: 100%;
   
}


.marker.wa-marker[data-marker-icon="1"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/dark.svg);
}
.marker.wa-marker[data-marker-icon="2"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/darkOrange.svg);
}
.marker.wa-marker[data-marker-icon="3"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/deepPink.svg);
}
.marker.wa-marker[data-marker-icon="4"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/dodgerBlue.svg);
}
.marker.wa-marker[data-marker-icon="5"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/green.svg);
}
.marker.wa-marker[data-marker-icon="6"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/light.svg);
}
.marker.wa-marker[data-marker-icon="7"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/limeGreen.svg);
}
.marker.wa-marker[data-marker-icon="8"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/rebeccaPurple.svg);
}
.marker.wa-marker[data-marker-icon="9"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/red.svg);
}
.marker.wa-marker[data-marker-icon="10"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/saddleBrown.svg);
}
.marker.wa-marker[data-marker-icon="11"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/seaGreen.svg);
}
.marker.wa-marker[data-marker-icon="12"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/slateGray.svg);
}
.marker.wa-marker[data-marker-icon="13"] {
	background-image: url(https://api.wa-maps.de/v1/images/marker/01/yellow.svg);
}

.card-image img { 
	width:100%;
}

.uppercase {
	text-transform:uppercase;
}

.bold { font-weight:bold;
}

.payment-cnt.text-center {
    border: #CCC 1px solid;
    border-radius: 5px;
	transition:all 0.3s;
}

.payment-cnt:hover, .payment-cnt:hover i, 
.payment-cnt.active, .payment-cnt.active i 
{
    color: #FFF;
    background-color: #09abaa;
	transition:all 0.3s;
	border: #09abaa 1px solid;
	cursor:pointer;
}

i.iconsminds-file-copy.copy-script {
    text-align: right;
    display: inline-block;
    font-size: 20px;
    border: #CCC 1px solid;
    padding: 2px;
    float: right;
    margin-top: 5px;
    position: absolute;
    bottom: 0;
    right: 15px;
    background-color: #FFF;
}

a.btn.btn-primary.btn-xs.mb-3.text-right.download-btn {
    float: right;
}

.btn-address span#inputGroup-sizing-default {
    background-color: #008514;
    color: #FFF;
    cursor: pointer;
}

.address_error {
    width: 100%;
    height: 100%;
    font-size: 11px;
    color: #8c0000;
    text-align: right;
    margin-top: 5px;
	display:none;
}

.address_error.active {
	display:block;
}

#domain_limit_error {
	display:none;
}

.sort_filter.glyph-icon.simple-icon-cursor-move {
    display: inline;
    float: right;
    margin-left: 14px;
    position: absolute;
    right: 81px;
    top: 0px;
    background-color: #09abaa;
    padding: 13px;
    color: #FFF;
    cursor: pointer;
}

.customstyleInputs {
	display:none;
	border: #CCC 1px solid;
	padding: 10px;
	margin: 15px;
	max-width: calc(100% - 30px);
	background-color: #f8f8f8;
}
.customStyleFilterInputs {
	border: #CCC 1px solid;
	padding: 10px;
	margin: 15px;
	max-width: calc(100% - 30px);
	background-color: #f8f8f8;
}

.customstyleInputs.active {
	display:block;
}

#style_json {
	display:none !important;
}

.card_styles.active {
    border: #027574 1px solid;
    padding: 0;
}	


span.switch-label {
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    top: -7px;
    margin-right: 10px;
    font-size: 18px;
    color: #09abaa;
}


#buy_package .col-item-package {
	display:none;
}

#buy_package .col-item-package.active {
	display:block;
}

.pro-badget-input {
	position:absolute;
	background-color: #09abaa;
	color: #FFF;
	text-transform: uppercase;
	padding: 5px 15px;
	border-radius: 9px;
	font-size: 9px;
	top: -15px;
	left: -10px;
}

.pro-badget {

	background-color: #09abaa;
	color: #FFF;
	text-transform: uppercase;
	padding: 5px 15px;
	border-radius: 9px;
	font-size: 9px;
}