:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

body {

  margin: 0;
  background-color: #fafafa !important;
  color: rgba(0,0,0,.87) !important;
  font: 400 14px/20px Roboto,Helvetica Neue,sans-serif !important;
  letter-spacing: normal;

}

input {
display:none;
}

body > div.app {
  height:100vh;
}

body.flutter > div.app beta7-app-root {
  display:none
}

.loader-progress {
    width: 100%;
    height: 2px !important;
    background-color: #b2ebf2;
    position: absolute;
    top: 0px;
    left: 0px;
}

.loader-progress  .progress-indeterminate {
  position: relative;
  width: 100%;
  height: 100%;
}

.loader-progress  .progress-indeterminate:before {
  content: '';
  position: absolute;
  height: 100%;
  background-color: #26c6da;
  animation: loader_indeterminate_first 2.0s infinite ease-out;
}

.loader-progress  .progress-indeterminate:after {
  content: '';
  position: absolute;
  height: 100%;
  background-color: #26c6da;
  animation: loader_indeterminate_second 2.0s infinite ease-in;
}

@keyframes loader_indeterminate_first {
  0% {
      left: -100%;
      width: 100%;
  }
  100% {
      left: 100%;
      width: 10%;
  }
}

@keyframes loader_indeterminate_second {
  0% {
      left: -150%;
      width: 100%;
  }
  100% {
      left: 100%;
      width: 10%;
  }
}

.app {
  opacity:1;
}

#loader {
  opacity: 1;
  z-index: 100;
  position: fixed;
  top:0px;
  left:0px;
  height: 100%;
  width: 100%;
  background: rgba(255,255,255,1);
  color:#000;
  font-family:Arial,sans-serif;
  padding-top: 25vh;
  text-align: center;

  display:none;

}

#loader.loading {
  display:block;
}




.material-icons {
  font-family: 'Material Icons';
  visibility:hidden;
}




svg.logo {
  height:40px;
}

.logo-link {
    color:#454545;
}

svg.logo  .vectors {

}
svg.logo  .vectors   .stroke {

}

svg.logo   .vectors   .climber {

}


@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

.loading div > span
,button.loading
,mat-icon.loading{
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.loading span:nth-child(2) {
  animation-delay: .2s;
}

.loading span:nth-child(3) {
  animation-delay: .4s;
}