* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

html,
body {
  background-color: #414141;
}

.container {
  max-width: 1650px;
  margin: 0 auto;
}

p.text {
  font-size: 20px;
  color: white;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 20px 10%;
}

.main-container {
  display: flex;
  gap: 5%;
  justify-content: space-between;
}

.car-table {
  width: 100%;
}

.tabela-wrapper {
  width: 100%;
  position: relative;
}

img.contorno-carro {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 15px;
  user-select: none;
  pointer-events: none;
}

table.temperaturas {
  position: absolute;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.input-range {
  width: 100%;
  margin-top: 20px;
}

.div-with-shadow {
  border-radius: 20px;
  box-shadow: 0px 0px 10px 4px rgb(80 80 80);
}

aside.helper {
  display: flex;
  flex-direction: column;
  width: 250px;
  justify-content: space-between;
  padding: 10px 0;
}

input.input {
  background-color: unset;
  border: 0;
  outline: 0;
  color: white;
}

@keyframes hide-animation {
  from {
    height: auto;
  }
  to {
    height: 0;
  }
}

.hide {
  font-size: 0;
  padding: 0;
  margin: 0;
  background-color: none;
  box-shadow: none;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s ease;
  animation: hide-animation 0.26s forwards;
}

@media screen and (max-width: 900px) {
  .main-container {
    flex-direction: column-reverse;
    gap: 30px;
  }

  aside.helper {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .main {
    gap: 20px;
    padding: 10px 2%;
  }
}