body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

body {
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.app-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: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 550px;
  color: white;
}

.header-section {
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 9px;
  height: 190px;
  width: 100%;
  background-color: #3A69D2;
  text-align: center h1;
  text-align-line-height: 40px;
  text-align-font-size: 40px;
  text-align-font-weight: 800;
}

.header-section p {
  line-height: 28px;
  font-size: 16px;
  font-weight: 400;
  opacity: .8;
}

.content-section {
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 40px;
  background-color: #1F2937;
}

.service-button-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;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  gap: 22px;
  width: 100%;
}

.service-button-row .button {
  background-color: #D1D4F4;
  width: 143px;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.service-button-row .button.service-is-selected {
  color: white;
  background-color: #3A69D2;
}

.button {
  cursor: pointer;
  border-radius: .5rem;
  border: none;
  height: 45px;
}

.selected-services-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: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.selected-services-header {
  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;
  margin-top: 43px;
  margin-bottom: 16px;
  width: 100%;
}

.selected-services-header p {
  line-height: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #D1D4F4;
}

.white-line {
  height: 1px;
  width: 100%;
  background-color: #D1D4F4;
}

.selected-services-list {
  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: space-between;
      -ms-flex-align: space-between;
          align-items: space-between;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 110px;
  width: 100%;
}

.invoice-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: space-between;
      -ms-flex-align: space-between;
          align-items: space-between;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: 75px;
  gap: 10px;
  width: 100%;
}

.invoice-container .invoice-container-header {
  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%;
}

.invoice-container .invoice-container-header p {
  line-height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #D1D4F4;
}

.invoice-bill-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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.invoice-bill-row p:first-of-type {
  line-height: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #D1D4F4;
}

.invoice-bill-row p:last-of-type {
  line-height: 32px;
  font-size: 36px;
  font-weight: 600;
}

#invoice-button {
  margin-top: 50px;
  width: 100%;
  background-color: #3A69D2;
  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: 14px;
}

#invoice-button img {
  height: 12px;
  width: 16px;
}

#invoice-button span {
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: right;
}

.selected-services-list {
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 24px;
  height: 160px;
  width: 100%;
}

.selected-services-list .selected-services-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;
}

.selected-services-list .service-name-container {
  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;
  gap: 15px;
}

.selected-services-list .service-name-container h3 {
  font-size: 20px;
  font-weight: 700;
}

.selected-services-list .service-name-container .remove-button {
  font-size: 8px;
  font-weight: 400;
  color: #D1D4F4;
  cursor: pointer;
}

.service-cost {
  font-size: 24px;
  font-weight: 500;
}

.service-cost span {
  font-weight: 300;
  color: #D1D4F4;
}
/*# sourceMappingURL=home.css.map */