:root {
  --color-main: hsl(201, 74%, 50%, 1);
}

#info { display: none; }
label { display: block; }

input, select, textarea {
  width: 100%;
  height: 3rem;
  font-size: 1.75rem;
  padding: 0 0.5rem;
  background-color: var(--color-input);
  border: none;
  border-bottom: 2px solid #b7b7b7;
  border-radius: 8px;
  transition: all 200ms ease-in-out;
}

textarea:focus {
  height: 10rem;
}

#root main {
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 2rem;
  border-radius: 4px 4px 60px 60px;
}

h1 {
  color: var(--color-main);
  margin: 0; 
}

#inputs { 
  margin: 2rem 0;
  text-align: center;
}

#inputs img, [data-picker] [data-value] img {
  max-width: 100%;  
  /*border: 2px solid #333;*/
}

[data-picker] [data-value] img { max-height: 150px; }

table { width: 100%; }
td:first-child { font-weight: bold; }
.big { font-size: 1.5rem; }

button[data-translate="calculate"] {
  width: 100%;
  background-color: var(--color-main);
  color: white;
  font-size: 1.25rem;
  text-transform: uppercase;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 4px;
}

p[data-translate="disclaimer"] { font-size: 0.75rem; }

/* Carousel */
.carousel {  
  display: flex; 
  margin: 0 -1rem;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: all 400ms ease-in-out;
}
.carousel .slide {
  width: 100%;
  flex-shrink: 0;
}
.carousel img { max-width: 100%; }
.carousel .combined { font-size: 0.75rem; }
.carousel .padding { padding: 0.5rem; }

.dots {
  display: flex;
  justify-content: center;
  position: relative;
  bottom: -25px;
  z-index: 1;
}

.dots div {
  width: 20px;
  height: 20px;
  background-color: #d9d9d9;
  margin: 0 5px;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
  cursor: pointer;
}

.dots div:hover { opacity: 0.8; }
.dots .selected { background-color: #848484; }