html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

.hidden,
[hidden] {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}


#app {
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100vh;
  max-height: 100vh;
}
.sidebar {
  min-width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -2500px;
  /* top pxlayer */
  z-index: 9999;
  transition: all 0.3s;
  box-shadow: 3px 0px 3px #000;
  overflow-y: auto;
}

.sidebar.active {
  left: 0;
}

.overlay {
  display: none;
  position: fixed;
  /* full screen */
  width: 100vw;
  height: 100vh;
  /* transparent black */
  background: rgba(0, 0, 0, 0.7);
  /* middle layer, i.e. appears below the sidebar */
  z-index: 998;
  opacity: 0;
  /* animate the transition */
  transition: all 0.5s ease-in-out;
}
/* display .overlay when it has the .active class */
.overlay.active {
  display: block;
  opacity: 1;
}
#dismiss {cursor: pointer;}
#canvas {
  display: flex;
  width: 100%;
  flex: 1;
  position: relative;
}

#canvas canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

#measurementToast {
  z-index: 9999;
}

#alert1, #alert2 {
  transition: all 0.5s ease;
}

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

.noUi-pips {font-size: 0.7em;}
.noUi-marker-horizontal.noUi-marker {height:2px}
.noUi-marker-horizontal.noUi-marker {height:7px}
.noUi-connect {background: #0d6efd}
.font-emoji {font-family: "AppleColorEmoji","Apple Color Emoji","Segoe UI Emoji",'Noto Color Emoji',"NotoColorEmoji","Segoe UI Symbol","EmojiSymbols",Symbola,"Android Emoji","AndroidEmoji","Arial Unicode MS","Zapf Dingbats","AppleSDGothicNeo-Regular","lucida grande",tahoma,verdana,arial,sans-serif;}
.text-justify {text-align: justify;}
.btn-pink {
  color: #fff;
  background-color: #0d6efd;
  /* border-color: #0d6efd; */
}

/* Responsive */
/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .navbar-brand {font-size: 0.8em;}
  .btn {font-size: 0.7em;}
  .sidebar {font-size: 0.8em;width:100vw;overflow-y:auto;}
  .sidebar hr {display: none}
  .noUi-pips.noUi-pips-horizontal {height:auto}
  .navbar {padding:0;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}