/* When global CSS rules are needed. Seriously try to minimize */

/* Remove arrows from native number inputs */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

html,
body,
#root {
  height: 100%;
  overflow-x: hidden;
  /* overflow-y: hidden; */
}

body.easteregg_hellokitty {
  cursor: url('../img/hellokittycursor.png'), auto !important;
}

/* Used for creating animated line in the flow component */
@keyframes dashdraw-line {
  0% {
    stroke-dashoffset: 30;
  }
}

/* Used to avoid uneccessary padding in the map popups */
.mapboxgl-popup-content {
  padding: 0 !important;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: rgba(72, 123, 122, 0.856);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #0d2d2ccb;
  border-radius: 10px;
}

.mapboxgl-popup-tip {
  display: none;
}

@keyframes battery-charging {
  0% {
    content: '\f244';
  }
  20% {
    content: '\f243';
  }
  40% {
    content: '\f242';
  }
  60% {
    content: '\f241';
  }
  80% {
    content: '\f240';
  }
}
.fa-battery-charging:before {
  content: '\f244';
  animation: 2s battery-charging infinite;
}