@keyframes pulse {
  0% {
    transform: translateY(-6%);
  }

  50% {
    transform: translateY(6%);
  }

  100% {
    transform: translateY(-6%);
  }
}

@keyframes fadeOutIn {

  0%,
  45% {
    opacity: 1;
  }

  50%,
  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInOut {

  0%,
  45% {
    opacity: 0;
  }

  50%,
  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.preview-wrapper .class-position .co2-wrapper {
  animation: fadeOutIn 15s infinite;
}

.preview-wrapper .class-position .class-wrapper {
  animation: fadeInOut 15s infinite;
}

.scaled-preview-floor {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.preview-wrapper {
  position: relative;
  width: 100%;
  transform-origin: top left;
}

#floor-image {
  width: 100%;
  height: auto;
  position: relative;
}

.preview-wrapper .class-position {
  position: absolute;
  text-align: center;
  transform-origin: top left;
  background: transparent;
}

.preview-wrapper .class-position .svg-class {
  display: block;
  position: relative;
  max-width: 100%;
}

.preview-wrapper .class-position .co2-wrapper,
.preview-wrapper .class-position .class-wrapper {
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.preview-wrapper .class-position .co2-wrapper .co2,
.preview-wrapper .class-position .class-wrapper .co2,
.preview-wrapper .class-position .co2-wrapper .class-text,
.preview-wrapper .class-position .class-wrapper .class-text,
.preview-wrapper .class-position .co2-wrapper .co2-value,
.preview-wrapper .class-position .class-wrapper .co2-value {
  animation: pulse 4s infinite;
  transition: all 0.2s ease-out;
  font-size: 0;
}

.preview-wrapper .class-position .co2-wrapper.sml .co2-value>span {
  display: none;
}

.preview-wrapper .class-position.has-svg {
  background-color: transparent !important;
}

.preview-wrapper .class-position.green {
  background-color: #CFA65A;
}

.preview-wrapper .class-position.yellow {
  background-color: #ED815E;
}

.preview-wrapper .class-position.red {
  background-color: #D53939;
}

.sensor-search {
  padding-top: 20px;
  max-width: 300px;
  margin: auto;
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group .btn {
  margin-left: 5px;
  margin-right: 5px;
}

.flex-container {
  display: flex;
  align-items: center;
}

svg {
  width: 100%;
  height: 100%;
}

.label-container,
.error-container {
  margin-left: 5px;
}