* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body * {
  font-family: 'Overpass', sans-serif;
  /*  font-weight: map-get($font-weights, bold ); */
  font-weight: 700;
}

body {
  height: 95vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #c5e4e7;
}

.main-container {
  font-size: 24px;
  width: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  background-color: white;
  border-radius: 1rem;
  padding: 2rem;
}

@media (max-width: 800px) {
  .main-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 90%;
  }
}

.info-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
  gap: 2rem;
}

@media (max-width: 800px) {
  .info-container {
    width: 100%;
  }
}

.info-container input, .info-container .button {
  cursor: pointer;
}

.info-container .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  gap: .5rem;
}

.info-container .row .input-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 2.5rem;
}

.info-container .row .input-row input {
  outline: none;
  width: 80%;
  background-color: #f4fafa;
  color: #00494d;
  text-align: right;
  font-size: 1rem;
}

.info-container .row .text-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.info-container .row .text-row .error-people {
  display: none;
  color: rgba(255, 0, 0, 0.616);
  font-size: 1rem;
}

.info-container .row .grid-tips {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[3];
      grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.info-container .row .grid-tips .focused {
  background-color: #26c0ab;
  color: #00494d;
}

.info-container H3 {
  color: #5e7a7d;
  font-size: 1rem;
}

.info-container .costum-tip,
.info-container .button {
  font-size: 1.2rem;
  height: 2.5rem;
  line-height: 2.8rem;
  border-radius: .3rem;
}

.info-container .tip-button {
  background-color: #00494d;
  color: #f4fafa;
}

.info-container .tip-button:hover {
  background-color: #26c0ab;
  color: #00494d;
}

.info-container .input-row,
.info-container .costum-tip {
  background-color: #f4fafa;
  color: #00494d;
  outline: none;
  text-align: right;
  padding: .5rem .8rem;
}

.info-container .input-row:hover, .info-container .input-row:focus,
.info-container .costum-tip:hover,
.info-container .costum-tip:focus {
  border: 2px solid #26c0ab;
}

.info-container .input-row::-webkit-input-placeholder,
.info-container .costum-tip::-webkit-input-placeholder {
  text-align: center;
  font-size: 1rem;
}

.info-container .input-row:-ms-input-placeholder,
.info-container .costum-tip:-ms-input-placeholder {
  text-align: center;
  font-size: 1rem;
}

.info-container .input-row::-ms-input-placeholder,
.info-container .costum-tip::-ms-input-placeholder {
  text-align: center;
  font-size: 1rem;
}

.info-container .input-row::placeholder,
.info-container .costum-tip::placeholder {
  text-align: center;
  font-size: 1rem;
}

.calc-container {
  height: 21rem;
  width: 45%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2rem;
  border-radius: .5rem;
  background-color: #00494d;
}

@media (max-width: 800px) {
  .calc-container {
    width: 100%;
  }
}

.calc-container .calc-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.calc-container .calc-area h3 {
  color: #c5e4e7;
  font-size: .8rem;
}

.calc-container .calc-area p {
  color: #7f9c9f;
  font-size: .8rem;
}

.calc-container .row-calc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.calc-container .row-calc .calc-value-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.calc-container .row-calc .calc-value-area p {
  color: #26c0ab;
  font-size: 2rem;
}

.calc-container .row-calc .calc-value-area h1 {
  color: #26c0ab;
  font-size: 2.5rem;
}

.calc-container .reset-button {
  width: 100%;
  color: #00494d;
  background-color: #26c0ab;
  text-transform: uppercase;
  font-size: 1.2rem;
  height: 2.5rem;
  line-height: 2.8rem;
  border-radius: .3rem;
}

.calc-container .reset-button:hover {
  background-color: #c5e4e7;
}

.calc-container .attribution {
  font-size: 11px;
  text-align: center;
}

.calc-container .attribution a {
  color: #3e52a3;
}

.focused {
  background-color: #26c0ab;
  color: #00494d;
}
/*# sourceMappingURL=style.css.map */