/* General Styling */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Loader Styles start here */
.loader-wrapper {
  --line-width: 5px;
  --curtain-color: #f1faee;
  --outer-line-color: #a8dadc;
  --middle-line-color: #457b9d;
  --inner-line-color: #1d3557;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000;
}

.loader {
  display:block;
  position: relative;
  top:50%;
  left:50%;
/*   transform: translate(-50%, -50%); */
  width:150px;
  height:150px;
  margin:-75px 0 0 -75px;
  border:var(--line-width) solid transparent;
  border-top-color: var(--outer-line-color);
  border-radius:100%;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  z-index:1001;
}

.loader:before {
  content:"";
  position: absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom:4px;
  border:var(--line-width) solid transparent;
  border-top-color: var(--inner-line-color);
  border-radius:100%;
  -webkit-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
}

.loader:after {
  content:"";
  position: absolute;
  top:14px;
  left:14px;
  right:14px;
  bottom:14px;
  border:var(--line-width) solid transparent;
  border-top-color: var(--middle-line-color);
  border-radius:100%;
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}

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

.loader-wrapper .loader-section {
  position:fixed;
  top:0;
  background:var(--curtain-color);
  width:51%;
  height:100%;
  z-index:1000;
}

.loader-wrapper .loader-section.section-left {
  left:0
}
.loader-wrapper .loader-section.section-right {
  right:0;
}

/* Loaded Styles */ 
.loaded .loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.loaded .loader-wrapper {
  visibility: hidden;
  transform:translateY(-100%);
  transition: all .3s 1s ease-out;
}

/*end of preloader*/

.titles{
         visibility:hidden;
         display:none;
         }
         .logo-map{
         visibility:hidden;
         display:none;
         }
		 .geosol{
         position:absolute;
		 bottom:10px;
		 right:10px;
		 height:50px;
		 width:auto;
		 z-index:999;
         }
         @media print{
         /*display only what is needed*/
         .ol-viewport * {
         visibility:visible;
         }
         .topnav,.search-layer,.ol-zoom,.prints,.ol-control, .layer-switcher{
         display:none;
         }
         .titles{
         visibility:visible;
         color:#254685;
         font-size:22px;
         display:block;
         }
         .logo-map{
         visibility:visible;
         display:block;
         }
         }		 
         .prints {
         top: 155px;
         left: .5em;
         position:absolute;
         z-index:999999999999999999999999;
         background-color: #fffff !important;
         color: #000000 !important;
         border-radius: 0px !important;
         padding: 3px !important;
         font-size:17px;
         background-color: rgba(255,255,255,.4);
         }
		 
         @media screen and (max-width: 800px) {
		 .prints {
         display:none
		         }
				 
		.geosol {
		 position:absolute;
		 bottom:10px;
		 right:10px;
		 height:40px;
		 width:auto;
		 z-index:999;
		 }
		 
		 .geosol img{
		 height:30px;
		 }
		 
		 
         
		 }
         .topnav {
         overflow: hidden;
         background-color: #333;
         }
		 
		 .topnav img {
         float: left;
         display: block;
         color: #f2f2f2;
		 padding: 5px 60px 0px 10px;
         text-align: center;
         text-decoration: none;
         font-size: 17px;
         }
		 
         .topnav a {
         float: left;
         display: block;
         color: #f2f2f2;
         text-align: center;
         padding: 20px 14px;
         text-decoration: none;
         font-size: 14px;
         }
         .topnav a:hover {
         background-color: #ddd;
         color: black;
         }
         .topnav a.active {
         background-color: #0096FF;
         color: white;
         }
		 
         .topnav .icon {
         display: none;
         }
		 
         @media screen and (max-width: 600px) {
         .topnav a:not(:first-child) {display: none;}
         .topnav a.icon {
         float: right;
         display: block;
         }
		 
         }
         @media screen and (max-width: 600px) {
         .topnav.responsive {
         position: relative;
         }
         .topnav.responsive .icon {
         position: absolute;
         right: 0;
         top: 0;
         }
         .topnav.responsive a{
         float: none;
         display: block;
         text-align: left;
		 font-size: 14px;
         }
		 
		 .topnav.responsive img{
         float: none;
         display: block;
         text-align: left;
		 padding-bottom:5px;
         }
         }
		 
         .search-layer {
         top: 65px;
         left: .5em;
         }
		 
         .ol-touch .search-layer {
         top: 100px;
         }
		 
         html, body {
         background-color: #ffffff;
         }
		 
         .ol-control button {
         background-color: #f8f8f8 !important;
         color: #000000 !important;
         border-radius: 0px !important;
         }
		 
         .ol-zoom, .geolocate, .gcd-gl-control .ol-control {
         background-color: rgba(255,255,255,.4) !important;
         padding: 3px !important;
         }
		 
         .ol-scale-line {
         background: none !important;
         }
		 
         .ol-scale-line-inner {
         border: 2px solid #f8f8f8 !important;
         border-top: none !important;
         background: rgba(255, 255, 255, 0.5) !important;
         color: black !important;
         }
		 
         html, body{
         position:absolute;
         width: 100%;
         left:0;
         top:0;
         height: 100%;
         padding: 0;
         margin: 0;			
         overflow:hidden;
         }
		 
		 
         #map{
         position:relative;
         width: 100%;
         left:0;
         top:0;
         height: 100%;
         padding: 0;
         margin: 0;
         overflow:hidden;
         }