@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap");
/* line 4, ../scss/home.scss */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #c5e4e7;
}

/* line 10, ../scss/home.scss */
main {
  width: 100%;
}
/* line 13, ../scss/home.scss */
main .container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
/* line 16, ../scss/home.scss */
main .container .title {
  margin-bottom: 50px;
}
/* line 19, ../scss/home.scss */
main .container .title p {
  color: #5e7a7d;
  text-align: center;
  font-weight: 700;
}
/* line 24, ../scss/home.scss */
main .container .wrapper-content {
  display: flex;
  gap: 30px;
  background-color: #FFF;
  padding: 50px;
  border-radius: 10px;
  width: 100%;
  max-width: 900px;
}
/* line 32, ../scss/home.scss */
main .container .wrapper-content .left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* line 35, ../scss/home.scss */
main .container .wrapper-content .left .wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* line 38, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .top-wrapper {
  display: flex;
  justify-content: space-between;
}
/* line 41, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .top-wrapper p {
  color: #5e7a7d;
  font-weight: 700;
  font-size: 15px;
}
/* line 45, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .top-wrapper .error {
  color: #ff4242;
  font-weight: 700;
  font-size: 15px;
  display: none;
}
/* line 51, ../scss/home.scss */
main .container .wrapper-content .left .wrapper input {
  border: 0;
  border-radius: 5px;
  text-align: right;
  height: 40px;
  cursor: pointer;
}
/* line 59, ../scss/home.scss */
main .container .wrapper-content .left .wrapper input:focus-visible {
  border: 2px solid #26c0ab;
  outline: 0;
}
/* line 64, ../scss/home.scss */
main .container .wrapper-content .left .wrapper #input-one {
  background: url(../images/icon-dollar.svg) no-repeat #f4fafa 10px 11px;
}
/* line 68, ../scss/home.scss */
main .container .wrapper-content .left .wrapper #input-two {
  background: url(../images/icon-person.svg) no-repeat #f4fafa 10px 11px;
}
/* line 72, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers {
  display: grid;
  grid-template: "btn-one btn-two btn-three" "btn-four btn-five btn-six" / auto auto auto;
  gap: 10px 20px;
}
/* line 78, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #one {
  grid-area: btn-one;
}
/* line 82, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #two {
  grid-area: btn-two;
}
/* line 86, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #three {
  grid-area: btn-three;
}
/* line 90, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #four {
  grid-area: btn-four;
}
/* line 94, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #five {
  grid-area: btn-five;
}
/* line 98, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #custom {
  grid-area: btn-six;
}
/* line 102, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button {
  padding: 5px 30px;
  background-color: #00494d;
  border-radius: 5px;
}
/* line 107, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button span {
  color: #FFF;
  font-weight: 700;
}
/* line 111, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button:hover {
  background-color: #c5e4e7;
}
/* line 114, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button:hover span {
  color: #00494d;
  font-weight: 700;
}
@media screen and (max-width: 770px) {
  /* line 111, ../scss/home.scss */
  main .container .wrapper-content .left .wrapper .numbers .button:hover {
    background-color: #26c0ab;
  }
  /* line 121, ../scss/home.scss */
  main .container .wrapper-content .left .wrapper .numbers .button:hover span {
    color: #00494d;
    font-weight: 700;
  }
}
/* line 127, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button.active {
  background-color: #26c0ab;
}
/* line 130, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers .button.active span {
  color: #00494d;
  font-weight: 700;
}
/* line 136, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #custom {
  background-color: #f4fafa;
  max-width: 110px;
}
/* line 140, ../scss/home.scss */
main .container .wrapper-content .left .wrapper .numbers #custom::placeholder {
  color: #5e7a7d;
  font-weight: 700;
}
@media screen and (max-width: 770px) {
  /* line 140, ../scss/home.scss */
  main .container .wrapper-content .left .wrapper .numbers #custom::placeholder {
    padding-right: 15px;
  }
}
/* line 151, ../scss/home.scss */
main .container .wrapper-content .left .wrapper.active input {
  border: 1px solid #ff4242;
}
/* line 155, ../scss/home.scss */
main .container .wrapper-content .left .wrapper.active .bill .error,
main .container .wrapper-content .left .wrapper.active .people .error {
  display: block;
}
/* line 163, ../scss/home.scss */
main .container .wrapper-content .right {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: #00494d;
  width: 100%;
  padding: 30px;
  border-radius: 10px;
}
/* line 170, ../scss/home.scss */
main .container .wrapper-content .right .left-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* line 173, ../scss/home.scss */
main .container .wrapper-content .right .left-wrapper .result-1,
main .container .wrapper-content .right .left-wrapper .result-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* line 178, ../scss/home.scss */
main .container .wrapper-content .right .left-wrapper .result-1 .left-result p,
main .container .wrapper-content .right .left-wrapper .result-2 .left-result p {
  color: #FFF;
  font-weight: 700;
  font-size: 15px;
}
/* line 182, ../scss/home.scss */
main .container .wrapper-content .right .left-wrapper .result-1 .left-result span,
main .container .wrapper-content .right .left-wrapper .result-2 .left-result span {
  color: #5e7a7d;
  font-weight: 700;
  font-size: 15px;
}
/* line 187, ../scss/home.scss */
main .container .wrapper-content .right .left-wrapper .result-1 .result-one,
main .container .wrapper-content .right .left-wrapper .result-1 .result-two,
main .container .wrapper-content .right .left-wrapper .result-2 .result-one,
main .container .wrapper-content .right .left-wrapper .result-2 .result-two {
  color: #26c0ab;
  font-weight: 700;
  font-size: 30px;
}
/* line 194, ../scss/home.scss */
main .container .wrapper-content .right button {
  height: 40px;
  border-radius: 5px;
}
/* line 198, ../scss/home.scss */
main .container .wrapper-content .right button.reset {
  opacity: 0.1;
}
/* line 202, ../scss/home.scss */
main .container .wrapper-content .right button:hover {
  opacity: 1;
  background-color: #c5e4e7;
}
/* line 206, ../scss/home.scss */
main .container .wrapper-content .right button:hover span {
  color: #00494d;
  font-weight: 700;
}
/* line 211, ../scss/home.scss */
main .container .wrapper-content .right button.enabled {
  opacity: 1;
  background-color: #26c0ab;
}
/* line 215, ../scss/home.scss */
main .container .wrapper-content .right button.enabled span {
  color: #00494d;
  font-weight: 700;
}
@media screen and (max-width: 770px) {
  /* line 163, ../scss/home.scss */
  main .container .wrapper-content .right {
    gap: 30px;
  }
}
@media screen and (max-width: 770px) {
  /* line 24, ../scss/home.scss */
  main .container .wrapper-content {
    flex-direction: column;
  }
}