/*
 *Add default styling for messages.
 */
 .message {
	position: absolute;
	top: 20px;
	z-index: 2023;
	width: 500px;
	left: 0;
	right: 0;
	border-radius: 10px;
	box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.75);
	color: white;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
}

/*
 * Give the various message types the correct colors
 */
.message.success {
	background-color: #54babb;
}

.message.error {
	background-color: #e60050;
}

.message.warning {
	background-color: #f7a000;
}

.message.info {
	background-color: #85c9e8;
}

/* Search Results */
/* (Might be separated later on if we need different CSS in different places) */

#search-results-map { 
	height: 720px;
}

.search-results-image {
	max-width: 250px;
	max-height: 55px;
}

/* The item below is used to override a Soft UI default for the search dropdown, which is normally not to highlight keyboard-selected search terms in the dropdown (because transparent) */

.dropdown-item.active, .dropdown-item:active {
    color: #67748e;
    text-decoration: none;
    background-color: #e9ecef !important;
}

/* https://forum.ionicframework.com/t/marker-png-404-not-found-when-using-leaflet-in-ionic-app/185529/2 */
.leaflet-default-icon-path {
    background-image: url(https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png);
}


/* Loading overlay from: https://codepen.io/umng/pen/wZzbbQ */

.loading-spanner{
	position:absolute;
	top: 50%;
	left: 0;
	background: #2a2a2a55;
	width: 100%;
	display:block;
	text-align:center;
	height: 300px;
	color: #FFF;
	transform: translateY(-50%);
	z-index: 1000;
	visibility: hidden;
  }
  
  .loading-overlay{
	position: fixed;
	  width: 100%;
	  height: 100%;
	background: rgba(0,0,0,0.5);
	visibility: hidden;
  }
  
  .loader,
  .loader:before,
  .loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
  }
  .loader {
	color: #ffffff;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
  }
  .loader:before,
  .loader:after {
	content: '';
	position: absolute;
	top: 0;
  }
  .loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
  }
  .loader:after {
	left: 3.5em;
  }
  @-webkit-keyframes load7 {
	0%,
	80%,
	100% {
	  box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
	  box-shadow: 0 2.5em 0 0;
	}
  }
  @keyframes load7 {
	0%,
	80%,
	100% {
	  box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
	  box-shadow: 0 2.5em 0 0;
	}
  }
  
  .show{
	visibility: visible;
  }
  
  .loading-spanner, .loading-overlay{
	  opacity: 0;
	  -webkit-transition: all 0.3s;
	  -moz-transition: all 0.3s;
	  transition: all 0.3s;
  }
  
  .loading-spanner.show, .loading-overlay.show {
	  opacity: 1
  }

  .loading-spinner {
    border: 4px solid #f3f3f3; /* Lichte kleur achtergrond */
    border-top: 4px solid #3498db; /* Blauwe kleur voor de draaiende lijn */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite; /* De animatie voor de draaiende beweging */
}

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

/* For some forms' tr, we'd like specific heights */

tr.h-25-px {
	line-height: 25px;
	min-height: 25px;
	height: 25px;
}

/* Override for a wider modal we use in specific cases */

.modal-dialog-wide {
	max-width: 1200px!important;
}

/*progressbar*/
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #ccc;
	padding: 20px;
	background: #fff;
	z-index: 1;
  }
  
  .popup-content {
	text-align: center;
  }
  
  .close {
	position: absolute;
	top: 5px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
  }
  
  #progressBar {
	width: 0;
	height: 20px;
	background-color: #4CAF50;
	margin-top: 10px;
  }