@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
*{
  font-family: 'Lato', sans-serif;

}
body{
  background-color: #E7EBF0;
}
.ert{
  padding: 5% !important;
  
}
/* .square {
display: inline;
    height: 20px;
    width: 20px;
    background-color: yellow !important;
    color: black;
  } */
  .logo-image{
    width: 15%;
    margin-top: 10px;
  }
  .ani {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .tooltip1 {
margin-right:1% ;
    height: 0px !important;
    width: 15px !important;
    position: relative;
    display: inline-block;
    
border-radius: 50%;
  }
  .green{
      background-color: green;

  }
  .red{
      background-color: red;
  }
  .yellow{
      background-color: yellow;
  }
  .wid-1{
width: 240px;
  }
  .wid-2{
width: 100px;
  }
  .wid-3{
width: 120px;
  }
  /* Tooltip text */
  .tooltip1 .tooltiptext1 {
    visibility: hidden;
    
    background-color:azure;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  .color{
      display: inline;
  }
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip1:hover .tooltiptext1 {
    visibility: visible;
  }
  .tooltip1 .tooltiptext1 {
    left:-30px;
    top: 105%;
  }
  .jgsk{
    background-color: aqua !important;
  }
  .font-login{
    color: #475f7b;
  }
  @media only screen and (max-width: 576px) {
    .logo-image{
      width: 40%;
    }
    .font-login{
      margin-top: 10px !important;
      font-size: 1.5rem !important;
    }
    .leaflet-container {
      width: 100%;
      height: 30vh !important;
  }
  .mobilefooter{
    text-align: center;
  }
  }

  .css-1knaqv7-MuiButtonBase-root-MuiButton-root{
    color: black !important;
    text-transform: capitalize !important;
  }
  .css-ypofq1-MuiDataGrid-toolbarContainer{
    float: right;
  }


  .shadow-md {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
  }

  .card-1 {
    border-left: 5px solid red;
  }
  .card-2 {
    border-left: 5px solid yellow;
  }
  .card-3 {
    border-left: 5px solid green;
  }
  .card-4 {
    border-left: 5px solid red;
  }
  .rectangle{
    height: 10px;
    width: 20px;
    background-color: red;
  }
.logs{
  font-size: 2rem;
  font-weight: 700;
  color: #475f7b;
  text-decoration: dashed;
}
.ff{
  margin-top: 300px;
}
.table-wrapper {
  max-height: 500px;
  overflow: auto;
  
}

.three h1 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
}
.three h1:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #111;
}
.three h1:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 255px;
  background-color: #333;
}
.cont{
  padding: 2% 20%;
}
/* @media only screen and (max-width: 576px) {
  .fix-width{
    max-width: 100px !important;
  }
} */
/* .hu{
  background-color: #EEEEEE;
} */
.colorssl{
  color: #4C3A51;
  font-weight: 700;
  font-size: 0.9rem;
}
.device{
  display: inline-block;
}

.earth{
  width: 200px !important;
  height: 180px;
  border-radius: 10%;
  
  color: white;
  text-align: center;
  padding: 2px;
  margin-right: 5px;
}

.highlighted {
  color: green;
}

.not-highlighted {
  color: grey;
}

.mapstyle{
  width: 400px;
  height: 400px;
  border-radius: 5%;
}
@media screen and (max-width: 600px) {
  .mapstyle{
    width: 400px;
    height: 400px;
  
  }
}