/*
 * DiLoc|Radar styling
 * Copyright (c) 2023 CN-Cosult GmbH
 * 
 */

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.glitch.global/d6692176-9421-4165-92d3-ccc45286ba5c/lato-v23-latin-regular.woff2?v=1683060440150') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('https://cdn.glitch.global/d6692176-9421-4165-92d3-ccc45286ba5c/lato-v23-latin-regular.woff?v=1683060440822') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
  font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;
  height: 100%;
  width:100%;
}


h1 {
  color: white;
  
  display:block;
  top:0px;
  left:70px;
  position:absolute;
  z-index:1000;
  text-shadow: 0px 0px 16px #000000;
}

html, body {
  height: 100%;
  width: 100vw;
  margin: 0;
}

#info {
  background-image: url(https://cdn.glitch.global/d6692176-9421-4165-92d3-ccc45286ba5c/info-256.png?v=1683058543722);
  background-size: cover;
  width:24px;
  height:24px;
  top:32px;
  left:280px;
  position:absolute;
  z-index:1000;    
}

/* Tooltip container */
.tooltip {
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: black;
  color: #fff;
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;
  margin-left:32px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  font-size:90%;
  z-index: 1001;
}

/* Make the map a bit more grayscale darker and contrasty */
.leaflet-tile-pane img {
  filter: grayscale(0.7) brightness(70%) contrast(1.3) !important;
}

/* Info button and tooltip styling */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

#radar {
  width:100%;
  height: 100%;
  /*zoom:0.7;*/
}


/* pulsating marker styles */
.leaflet-pulsing-icon {
    border-radius: 100%;
    animation: fade_in_out 4s ease-in-out forwards;
    animation-iteration-count: 1;  
      
    /*box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.75);*/
}


/** Leaflet pulsing marker styles: */

.leaflet-pulsing-icon:after {
    content: "";
    border-radius: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    /*margin: -100% 0 0 -100%;*/

}

@keyframes fade_in_out {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    10% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    70% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@keyframes pulsate {
    0% {
        transform: scale(1, 1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    10% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    80% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        transform: scale(2.2, 2.2);
        width: 3000%;
        height: 3000%;
        margin: -1500% 0 0 -1500%;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}