:root {
  --perwidth: 1dvw;
}
@media (max-aspect-ratio: 1/1.7) {
  :root {
    --perwidth: 1dvw;
  }
}
@media (min-aspect-ratio: 1/1.7) {
  :root {
    --perwidth: calc((100svh * 1 / 1.7) / 100);
  }
}

.prompt-thin {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.prompt-extralight {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.prompt-light, .coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team, .coach-modal .coach-container .coach-modal-tag-header, .coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-divider, .coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-name, .location-container .location-body, .package-section .footer .footer-bar span, .package-section .footer .footer-text .footer-text-2, .package-section .footer .footer-text .footer-text-1 span, .package-section .package-padding .proclass-list .proclass-card, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-btn, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-discount-price #bath, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-full-price, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-title .propack-card-detail-header-title-name, .package-section .package-padding .propack-list .propack-card, .package-section .package-padding .pro-package-header, .booking-section .booking-history-list .booking-history-group .booking-history-group-header, .booking-section .booking-history-header span, .coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-fullname, .coach-section .select-team .coach-team, .coach-section .coach-select-header, .header .booking-court.coach .coach-btn, .header .booking-court .user-booking-text, .header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-header .wallet-total-bottom, .header .dashboard .booking-row .booking .booking-count .booking-text, .header .dashboard .booking-row .courses .review,
.header .dashboard .booking-row .coachs .review,
.header .dashboard .booking-row .courts .review, .header .dashboard .booking-row .courses .header,
.header .dashboard .booking-row .coachs .header,
.header .dashboard .booking-row .courts .header, .header .dashboard .dashboard-header, .book-card-2-row, .error-text {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.prompt-regular, .coach-modal .coach-container .coach-modal-profile .coach-modal-profile-amount, .package-section .package-padding .proclass-list .proclass-card .proclass-card-btn, .package-section .package-padding .proclass-list .proclass-card .proclass-card-amount span, .package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-detail, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-hour #unit, .booking-section .booking-history-btn-row .booking-history-btn, .header .dashboard .wallet-row .wallet-total .wallet-total-btn .wallet-total-btn-text, .header .dashboard .wallet-row .wallet-your .wallet-your-text .wallet-your-text-1, .book-card-single-row .book-card-single-row-left .book-card-single-row-divider, .book-card-single-row .book-card-single-row-left .book-card-single-row-text span, .book-card-single-row, .book-card-2-row .book-card-2-row-row.location {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.prompt-medium, .header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-header .wallet-total-top, .book-card-single-row .medium, .book-card-single-row.multi::after, .book-card-2-row .book-card-2-row-row .book-card-2-row-amount, .book-card-2-row .book-card-2-row-row.header .coach, .book-card-2-row .book-card-2-row-row.header .court, .book-card-2-row.disable .book-card-2-row-row .book-card-2-row-amount {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.prompt-semibold, .coach-modal .coach-container .coach-modal-btn, .coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail, .coach-modal .coach-container, .location-container, .package-section .footer .footer-bar, .package-section .footer .footer-text .footer-text-2 span, .package-section .footer .footer-text .footer-text-1, .package-section .package-padding .proclass-list .proclass-card .proclass-card-amount, .package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-class, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-discount-price, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-hour, .package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-title, .package-section .package-padding .pro-package-header span, .booking-section .booking-history-header, .coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-nickname, .coach-section .coach-select-header span, .header .booking-court.coach .coach-btn .coach-btn-text-2, .header .booking-court .user-booking-text .user-booking-text-2, .header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-num, .header .dashboard .wallet-row .wallet-your .wallet-your-text .wallet-your-text-2, .header .dashboard .booking-row .booking .booking-header, .header .dashboard .dashboard-header span, .containerBG .appbar .appbar-title {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.prompt-bold, .coach-modal .coach-container .coach-modal-profile .coach-modal-profile-team, .location-container .location-body .location-box .location-name, .package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-team, .coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-profile-team, .header .dashboard .booking-row .booking .booking-count, .header .dashboard .booking-row .courses .count,
.header .dashboard .booking-row .coachs .count,
.header .dashboard .booking-row .courts .count, .book-card-single-row .book-card-single-row-left, .book-card-2-row .book-card-2-row-row.header {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.prompt-extrabold {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.prompt-black {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.prompt-thin-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.prompt-extralight-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.prompt-light-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.prompt-regular-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.prompt-medium-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.prompt-semibold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.prompt-bold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.prompt-extrabold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.prompt-black-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100dvh;
  width: 100dvw;
  background-color: #10183f;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #c7c7c7;
  box-shadow: 0px 11px 23px 0px rgba(0, 0, 0, 0.1019607843), 0px 42px 42px 0px rgba(0, 0, 0, 0.0901960784), 0px 95px 57px 0px rgba(0, 0, 0, 0.0509803922), 0px 168px 67px 0px rgba(0, 0, 0, 0.0117647059), 0px 263px 74px 0px rgba(0, 0, 0, 0);
  min-height: 100%;
}
@media (max-aspect-ratio: 1/1.7) {
  body {
    width: 100dvw;
    margin: 0;
  }
}
@media (min-aspect-ratio: 1/1.7) {
  body {
    width: 58.8235294118dvh;
    margin: 0 auto;
  }
}

.error-text {
  font-size: calc(2.5 * var(--perwidth));
  color: #ef1414;
  text-align: center;
  line-height: normal;
  padding: calc(1 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}

.containerBG {
  height: 100%;
  background-color: #10183f;
}
.containerBG .appbar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  height: calc(6 * var(--perwidth) + 0px);
  padding: calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.containerBG .appbar .appbar-back {
  padding: calc(1 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(5 * var(--perwidth));
  right: auto;
  bottom: calc(5 * var(--perwidth));
  left: calc(6 * var(--perwidth));
  height: calc(4 * var(--perwidth) + 0px);
  aspect-ratio: 1;
  background-image: url("/assets/images/back.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.containerBG .appbar .appbar-title {
  font-size: calc(4 * var(--perwidth));
  color: #f3f3f3;
  text-align: center;
  line-height: normal;
}
.containerBG .appbar .appbar-action {
  padding: calc(1 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(5 * var(--perwidth));
  right: calc(6 * var(--perwidth));
  bottom: calc(5 * var(--perwidth));
  left: auto;
  height: calc(5 * var(--perwidth) + 0%);
}
.containerBG .container {
  background-color: #fff;
  padding: calc(0 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  width: calc(88 * var(--perwidth) + 0px);
  border-radius: calc(6 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  height: calc(100dvh - 16 * var(--perwidth));
  overflow: hidden;
  position: relative;
}
.containerBG .container .BG-img {
  z-index: 0;
  position: absolute;
  top: auto;
  right: calc(0 * var(--perwidth));
  bottom: calc(-48 * var(--perwidth));
  left: calc(0 * var(--perwidth));
  width: calc(100 * var(--perwidth) + 0%);
  aspect-ratio: 3/4;
  background-color: #fff;
}
.containerBG .container .BG-img .BG-img-1 {
  z-index: 0;
  position: absolute;
  top: calc(-28 * var(--perwidth));
  right: calc(0 * var(--perwidth));
  bottom: auto;
  left: auto;
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(20 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%);
  width: calc(65 * var(--perwidth) + 0%);
  aspect-ratio: 0.75;
  background-image: url("/assets/images/bg-1.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: luminosity;
}
.containerBG .container .BG-img .BG-img-2 {
  z-index: 0;
  position: absolute;
  top: calc(0 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(0 * var(--perwidth));
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(16 * var(--perwidth) + 0%);
  width: calc(80 * var(--perwidth) + 8 * var(--perwidth));
  aspect-ratio: 0.75;
  background-image: url("/assets/images/bg-2.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: luminosity;
  opacity: 0.5;
  transform: rotate(180deg) scaleX(-1);
}
.containerBG .container .BG-img .BG-img-3 {
  z-index: 0;
  position: absolute;
  top: calc(-8 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(-6 * var(--perwidth));
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(20 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  width: calc(35 * var(--perwidth) + 0%);
  aspect-ratio: 0.75;
  background-image: url("/assets/images/bg-3.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.back-btn {
  aspect-ratio: 1;
  background-image: url("/assets/images/arrowleft.svg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(13%) sepia(8%) saturate(8%) hue-rotate(320deg) brightness(101%) contrast(81%);
  width: calc(4 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(12 * var(--perwidth));
  right: calc(0 * var(--perwidth));
  bottom: calc(0 * var(--perwidth));
  left: calc(6 * var(--perwidth));
}

.book-card-2-row {
  overflow: hidden;
  position: relative;
  border-radius: calc(4 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1.5;
  width: calc(-9 * var(--perwidth) + 100%);
  padding: calc(3 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(4.125 * var(--perwidth) + 0%);
  background-color: #fff;
  border: calc(0.25 * var(--perwidth)) solid #dddddd;
  border-radius: calc(4 * var(--perwidth) + 0%);
}
.book-card-2-row.disable {
  background-color: #f3f3f3;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.0509803922);
  opacity: 0.75;
}
.book-card-2-row.disable .book-card-2-row-row .book-card-2-row-amount {
  color: #ef1414;
  text-transform: uppercase;
}
.book-card-2-row.select {
  background-color: #f3f3f3;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.0509803922);
}
.book-card-2-row.select .book-card-2-row-close {
  width: calc(0 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(2.5 * var(--perwidth));
  right: calc(2.5 * var(--perwidth));
  bottom: auto;
  left: auto;
  aspect-ratio: 1;
  background-image: url("/assets/images/close.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.book-card-2-row .book-card-2-row-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.book-card-2-row .book-card-2-row-row.location {
  font-size: calc(2.5 * var(--perwidth));
  color: #b5b5b5;
  text-align: left;
  line-height: 1.5;
}
.book-card-2-row .book-card-2-row-row.header {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  gap: calc(2 * var(--perwidth));
  white-space: nowrap;
}
.book-card-2-row .book-card-2-row-row.header .court {
  white-space: pre-line;
}
.book-card-2-row .book-card-2-row-row.header .coach {
  white-space: pre-line;
}
.book-card-2-row .book-card-2-row-row.header .team {
  background-color: #dadada;
  padding: calc(1 * var(--perwidth) + 0%) calc(2.75 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  height: calc(2.5 * var(--perwidth) + 0.01px);
}
.book-card-2-row .book-card-2-row-row.header .team .team-icon {
  width: calc(2.5 * var(--perwidth) + 0%);
  height: calc(2.5 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(-0.75 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/person.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  filter: invert(50%) sepia(11%) saturate(11%) hue-rotate(20deg) brightness(92%) contrast(85%);
}
.book-card-2-row .book-card-2-row-row.header .team .team-icon.knocker::before {
  content: "";
  background-color: #333333;
  filter: invert(50%) sepia(11%) saturate(11%) hue-rotate(20deg) brightness(92%) contrast(85%);
  width: calc(1.5 * var(--perwidth) + 0%);
  height: calc(1.5 * var(--perwidth) + 0%);
  position: absolute;
  top: auto;
  right: calc(-1 * var(--perwidth));
  bottom: calc(0 * var(--perwidth));
  left: auto;
  border-radius: calc(4 * var(--perwidth) + 0%);
}
.book-card-2-row .book-card-2-row-row .book-card-2-row-date-time {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(2 * var(--perwidth));
}
.book-card-2-row .book-card-2-row-row .book-card-2-row-date-time .book-card-2-row-divider {
  font-size: calc(4 * var(--perwidth));
  color: #b5b5b5;
  text-align: left;
  line-height: 1.5;
}
.book-card-2-row .book-card-2-row-close {
  margin: calc(2.5 * var(--perwidth) + 0%);
  width: calc(2.5 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(0 * var(--perwidth));
  right: calc(0 * var(--perwidth));
  bottom: auto;
  left: auto;
  aspect-ratio: 1;
  background-image: url("/assets/images/close.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.book-card-2-row.select {
  background-color: #f3f3f3;
}
.book-card-2-row.select .book-card-2-row-close {
  margin: calc(2.5 * var(--perwidth) + 0%);
  width: calc(2.5 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(0 * var(--perwidth));
  right: calc(0 * var(--perwidth));
  bottom: auto;
  left: auto;
  aspect-ratio: 1;
  background-image: url("/assets/images/close.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.book-card-single-row {
  position: relative;
  font-size: calc(3.5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
  padding: calc(4 * var(--perwidth) + 0%) calc(2.5 * var(--perwidth) + 0%);
  border: calc(0.3 * var(--perwidth)) solid #dddddd;
  border-radius: calc(4 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  background-color: #fff;
}
.book-card-single-row.multi {
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  padding: calc(6 * var(--perwidth) + 0%) calc(2.5 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(2.5 * var(--perwidth) + 0%);
}
.book-card-single-row.multi::before {
  content: "";
  position: absolute;
  top: calc(2 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(-0.25 * var(--perwidth));
  background-color: #fff;
  width: calc(-5 * var(--perwidth) + 100%);
  padding: calc(6 * var(--perwidth) + 0%) calc(2.5 * var(--perwidth) + 0%);
  border: calc(0.3 * var(--perwidth)) solid #dddddd;
  border-radius: calc(4 * var(--perwidth) + 0%);
  z-index: 0;
}
.book-card-single-row.multi::after {
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
  content: attr(data-count-select);
  position: absolute;
  top: calc(-1 * var(--perwidth));
  right: calc(3 * var(--perwidth));
  bottom: auto;
  left: auto;
  background-color: #9af221;
  padding: calc(1.25 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  height: calc(3.5 * var(--perwidth) + 0%);
  width: calc(6 * var(--perwidth) + 0%);
  z-index: 0;
}
.book-card-single-row.select {
  background-color: #dadada;
}
.book-card-single-row .book-card-single-row-left {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(2 * var(--perwidth));
}
.book-card-single-row .book-card-single-row-left .book-card-single-row-text span {
  font-size: calc(2 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: 1;
}
.book-card-single-row .book-card-single-row-left .book-card-single-row-divider {
  font-size: calc(4 * var(--perwidth));
  color: #b5b5b5;
  text-align: left;
  line-height: 1;
}
.book-card-single-row .medium {
  font-size: calc(3.5 * var(--perwidth));
  color: #587ebf;
  text-align: center;
  line-height: 1;
  position: relative;
}

.header {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  display: block;
  position: relative;
  width: calc(100 * var(--perwidth) + 0%);
}
.header .background-header {
  width: calc(-10 * var(--perwidth) + 100%);
  aspect-ratio: 2;
  background-image: url("/assets/images/home-bg.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(0 * var(--perwidth));
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(71 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  padding: calc(5 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%);
}
.header .background-header .header-icon {
  height: calc(9 * var(--perwidth) + 0%);
  aspect-ratio: 2.4;
  background-image: url("/assets/images/appicon.svg");
  background-position: 0% calc(1 * var(--perwidth));
  background-repeat: no-repeat;
  background-size: contain;
}
.header .background-header .header-action {
  height: calc(9 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(5 * var(--perwidth));
}
.header .background-header .header-action .header-profile {
  height: calc(6 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/profile.svg");
  background-position: 0% -50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .background-header .header-action .header-noti {
  height: calc(6 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/notification.svg");
  background-position: 0% -50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard {
  position: absolute;
  top: calc(19 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: auto;
  width: calc(-12 * var(--perwidth) + 100%);
  padding: calc(3 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  border-radius: calc(6 * var(--perwidth) + 0%);
  background-color: #fff;
  box-shadow: 0px 4px 12.5px 0px rgba(0, 0, 0, 0.1490196078);
}
.header .dashboard .dashboard-header {
  font-size: calc(4 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: normal;
}
.header .dashboard .dashboard-header div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1 * var(--perwidth));
}
.header .dashboard .dashboard-header div .location-icon {
  display: inline-block;
  height: calc(6 * var(--perwidth) + 0%);
  width: calc(6 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/location.svg");
  background-position: 0% -50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .booking-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(0 * var(--perwidth));
  padding: calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .divider-vertical {
  width: calc(0.25 * var(--perwidth));
  height: calc(28 * var(--perwidth));
  background-image: linear-gradient(#c1c1c1 50%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: calc(0.25 * var(--perwidth)) 5px;
  background-repeat: repeat-y;
}
.header .dashboard .booking-row .courses,
.header .dashboard .booking-row .coachs,
.header .dashboard .booking-row .courts {
  position: relative;
  width: calc(20 * var(--perwidth) + -9.5 * var(--perwidth));
  padding: calc(4 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .courses .icon,
.header .dashboard .booking-row .coachs .icon,
.header .dashboard .booking-row .courts .icon {
  margin-left: auto;
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  width: calc(7 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .courses .count,
.header .dashboard .booking-row .coachs .count,
.header .dashboard .booking-row .courts .count {
  font-size: calc(8 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: 1;
}
.header .dashboard .booking-row .courses .header,
.header .dashboard .booking-row .coachs .header,
.header .dashboard .booking-row .courts .header {
  width: calc(20 * var(--perwidth) + -9.5 * var(--perwidth));
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: 1;
}
.header .dashboard .booking-row .courses .gap,
.header .dashboard .booking-row .courses .review,
.header .dashboard .booking-row .coachs .gap,
.header .dashboard .booking-row .coachs .review,
.header .dashboard .booking-row .courts .gap,
.header .dashboard .booking-row .courts .review {
  height: calc(4 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .courses .review,
.header .dashboard .booking-row .coachs .review,
.header .dashboard .booking-row .courts .review {
  padding: calc(0 * var(--perwidth) + 0%) calc(8 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(-2.75 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.5 * var(--perwidth));
  background-color: #10183f;
  font-size: calc(2.5 * var(--perwidth));
  color: #f3f3f3;
  text-align: center;
  line-height: 0.9;
}
.header .dashboard .booking-row .courses .review::before,
.header .dashboard .booking-row .coachs .review::before,
.header .dashboard .booking-row .courts .review::before {
  content: "";
  padding: calc(2 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  display: block;
  aspect-ratio: 1;
  background-image: url("/assets/images/star.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: contain;
  height: calc(4 * var(--perwidth) + 0%);
  width: calc(4 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .courses .icon {
  aspect-ratio: 1;
  background-image: url("/assets/images/courses.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .booking-row .coachs .icon {
  aspect-ratio: 1;
  background-image: url("/assets/images/coachs.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .booking-row .courts .icon {
  aspect-ratio: 1;
  background-image: url("/assets/images/courts.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .booking-row .booking {
  width: calc(40 * var(--perwidth) + -9.5 * var(--perwidth));
  padding: calc(4 * var(--perwidth) + 0%);
}
.header .dashboard .booking-row .booking .booking-icon {
  position: relative;
  width: calc(7 * var(--perwidth) + 0%);
  aspect-ratio: 1/1;
}
.header .dashboard .booking-row .booking .booking-icon::before {
  z-index: 0;
  content: "";
  width: calc(6 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(-2.5 * var(--perwidth));
  right: calc(-2.5 * var(--perwidth));
  bottom: auto;
  left: auto;
  border-radius: calc(7 * var(--perwidth) + 0%);
  aspect-ratio: 1/1;
  background-color: #d0d80b;
}
.header .dashboard .booking-row .booking .booking-icon::after {
  position: absolute;
  z-index: 0;
  content: "";
  width: calc(7 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/booking.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .booking-row .booking .booking-count {
  font-size: calc(10 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
}
.header .dashboard .booking-row .booking .booking-count .booking-text {
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
}
.header .dashboard .booking-row .booking .booking-header {
  font-size: calc(3 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1.5;
}
.header .dashboard .divider-horizontal {
  height: calc(0.25 * var(--perwidth) + 0%);
  width: 100%;
  background-color: #c1c1c1;
}
.header .dashboard .wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  padding: calc(8 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(19 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
}
.header .dashboard .wallet-row .wallet-your .wallet-your-icon {
  position: relative;
  width: calc(9 * var(--perwidth) + 0%);
  aspect-ratio: 1/1;
}
.header .dashboard .wallet-row .wallet-your .wallet-your-icon::before {
  z-index: 0;
  content: "";
  position: absolute;
  top: calc(-4 * var(--perwidth));
  right: calc(-4 * var(--perwidth));
  bottom: auto;
  left: auto;
  width: calc(9 * var(--perwidth) + 0%);
  border-radius: calc(7 * var(--perwidth) + 0%);
  aspect-ratio: 1/1;
  background-color: #d0d80b;
}
.header .dashboard .wallet-row .wallet-your .wallet-your-icon::after {
  position: absolute;
  z-index: 0;
  content: "";
  width: calc(9 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/wallet.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .wallet-row .wallet-your .wallet-your-text {
  font-size: calc(4.5 * var(--perwidth));
  color: #10183f;
  text-align: left;
  line-height: 1;
}
.header .dashboard .wallet-row .wallet-total .wallet-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(7 * var(--perwidth));
}
.header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-header .wallet-total-top {
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: 1;
}
.header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-header .wallet-total-bottom {
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: 1;
}
.header .dashboard .wallet-row .wallet-total .wallet-total-row .wallet-total-num {
  font-size: calc(7 * var(--perwidth));
  color: #10183f;
  text-align: right;
  line-height: 1;
}
.header .dashboard .wallet-row .wallet-total .wallet-total-btn {
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  margin-top: calc(4 * var(--perwidth));
  margin-left: auto;
  width: -moz-min-content;
  width: min-content;
  padding: calc(2 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
}
.header .dashboard .wallet-row .wallet-total .wallet-total-btn .wallet-total-btn-icon {
  width: calc(4 * var(--perwidth) + 0px);
  aspect-ratio: 1;
  background-image: url("/assets/images/topup.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .dashboard .wallet-row .wallet-total .wallet-total-btn .wallet-total-btn-text {
  font-size: calc(4 * var(--perwidth));
  color: #f3f3f3;
  text-align: left;
  line-height: normal;
}
.header .booking-court {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(-73 * var(--perwidth));
  left: auto;
  width: calc(-30 * var(--perwidth) + 100%);
  border-radius: calc(6 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  padding: calc(3 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.header .booking-court .user-booking-text {
  font-size: calc(6 * var(--perwidth));
  color: #f3f3f3;
  text-align: left;
  line-height: 0.9;
}
.header .booking-court .user-booking-text .user-booking-text-3 {
  font-size: calc(4.5 * var(--perwidth));
  color: #f3f3f3;
  text-align: left;
  line-height: 1.2;
}
.header .booking-court .user-booking-img {
  height: calc(16.5 * var(--perwidth) + 0px);
  aspect-ratio: 2;
  background-image: url("/assets/images/find-your-court.png");
  background-position: 50% calc(2 * var(--perwidth));
  background-repeat: no-repeat;
  background-size: contain;
}
.header .booking-court.coach {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.header .booking-court.coach .coach-btn {
  width: calc(0 * var(--perwidth) + 35%);
  border-left: calc(0.25 * var(--perwidth)) dashed #f3f3f3;
  font-size: calc(4 * var(--perwidth));
  color: #f3f3f3;
  text-align: center;
  line-height: 1;
}
.header .booking-court.coach .coach-btn .coach-btn-icon {
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.header .booking-court.coach .coach-btn.find-court {
  border-left: none;
}
.header .booking-court.coach .coach-btn.find-court .coach-btn-icon {
  height: calc(8 * var(--perwidth) + 0%);
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(319deg) brightness(102%) contrast(101%);
  aspect-ratio: 2.2;
  background-image: url("/assets/images/courts.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .booking-court.coach .coach-btn.coach-booking .coach-btn-icon {
  height: calc(8 * var(--perwidth) + 0%);
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(319deg) brightness(102%) contrast(101%);
  aspect-ratio: 2.2;
  background-image: url("/assets/images/courses.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.header .booking-court.coach .coach-btn.coach-checkin .coach-btn-icon {
  height: calc(8 * var(--perwidth) + 0%);
  filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(319deg) brightness(102%) contrast(101%);
  aspect-ratio: 2.2;
  background-image: url("/assets/images/checkin.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.coach-section {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  background-color: #fff;
  width: calc(-12 * var(--perwidth) + 100%);
  padding: calc(8 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  border-radius: calc(6 * var(--perwidth) + 0%);
  box-shadow: 0px 4px 12.5px 0px rgba(0, 0, 0, 0.1490196078);
  margin: calc(81 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.coach-section .coach-select-header {
  font-size: calc(5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: normal;
}
.coach-section .select-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  border: calc(0.3 * var(--perwidth)) solid #dddddd;
  border-radius: calc(100 * var(--perwidth) + 0%);
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  margin: calc(8 * var(--perwidth)) auto;
}
.coach-section .select-team .coach-team {
  font-size: calc(4 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: normal;
  border-left: 1px solid #dddddd;
  padding: calc(2.5 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%);
}
.coach-section .select-team .coach-team.active {
  color: #f3f3f3;
  background-color: #10183f;
}
.coach-section .home-select-coach-list {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  position: relative;
  overflow: hidden;
}
.coach-section .home-select-coach-list .coach-page {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.coach-section .home-select-coach-list .home-select-coach-card {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  width: calc(26 * var(--perwidth) + 0%);
  overflow: hidden;
  margin: calc(0 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  background-color: #dadada;
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-profile {
  background-color: #fff;
  overflow: hidden;
  border-radius: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
  position: relative;
  width: calc(26 * var(--perwidth) + 0%);
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-profile-bg {
  overflow: hidden;
  border-radius: calc(4 * var(--perwidth) + 0%);
  filter: grayscale(100%) opacity(0.4);
  height: calc(0 * var(--perwidth) + 100%);
  aspect-ratio: 0.7;
  background-image: url("/assets/images/bg-2.png");
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-size: 270%;
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-profile-team {
  position: absolute;
  top: calc(2 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(1 * var(--perwidth));
  font-size: calc(12 * var(--perwidth));
  color: #dddddd;
  text-align: left;
  line-height: 1.5;
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-profile-img {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(0 * var(--perwidth));
  left: calc(1 * var(--perwidth));
  height: calc(0 * var(--perwidth) + 100%);
  aspect-ratio: 0.7;
  background-image: url("/assets/images/tammy.png");
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: 200%;
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-fullname {
  padding: calc(2 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  font-size: calc(3 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
}
.coach-section .home-select-coach-list .home-select-coach-card .home-select-coach-nickname {
  padding: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
}
.coach-section .home-select-coach-list .home-select-coach-card.select {
  color: #f3f3f3;
  background-color: #10183f;
}
.coach-section .home-select-coach-list .home-select-coach-card.select .home-select-coach-profile .home-select-coach-profile-team {
  font-size: calc(12 * var(--perwidth));
  color: #10183f;
  text-align: left;
  line-height: 1.5;
}
.coach-section .home-select-coach-list .home-select-coach-card.select .home-select-coach-fullname {
  font-size: calc(3 * var(--perwidth));
  color: #fff;
  text-align: left;
  line-height: 1;
}
.coach-section .home-select-coach-list .home-select-coach-card.select .home-select-coach-nickname {
  font-size: calc(2.5 * var(--perwidth));
  color: #fff;
  text-align: left;
  line-height: 1;
}

.booking-section {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  background-color: #fff;
  width: calc(-12 * var(--perwidth) + 100%);
  padding: calc(8 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(14 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  border-radius: calc(6 * var(--perwidth) + 0%);
  box-shadow: 0px 4px 12.5px 0px rgba(0, 0, 0, 0.1490196078);
  margin: calc(8 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.booking-section .booking-history-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2 * var(--perwidth));
  font-size: calc(5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: normal;
}
.booking-section .booking-history-header::before {
  z-index: 0;
  content: "";
  padding: calc(3.5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  width: calc(7 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/booking.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.booking-section .booking-history-list {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.booking-section .booking-history-list .booking-history-group {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.booking-section .booking-history-list .booking-history-group .booking-history-group-header {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  font-size: calc(4 * var(--perwidth));
  color: #c1c1c1;
  text-align: left;
  line-height: 1;
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.booking-section .booking-history-list .booking-history-group .booking-history-group-header::before {
  content: "";
  display: inline-block;
  height: calc(6 * var(--perwidth) + 0%);
  width: calc(6 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/location.svg");
  background-position: 0% -50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.booking-section .booking-history-list .booking-history-group .booking-history-group-list .book-card-2-row {
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.booking-section .booking-history-btn-row {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: calc(2 * var(--perwidth));
}
.booking-section .booking-history-btn-row .booking-history-btn {
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  width: -moz-min-content;
  width: min-content;
  padding: calc(2 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  white-space: nowrap;
  font-size: calc(3 * var(--perwidth));
  color: #fff;
  text-align: center;
  line-height: normal;
}
.booking-section .booking-history-btn-row .booking-history-btn.light {
  background-color: #587ebf;
}

.package-section {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  background-color: #fff;
  width: 100%;
  border-radius: calc(6 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  margin: calc(8 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  position: relative;
}
.package-section .package-padding {
  position: relative;
  padding: calc(8 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
}
.package-section .package-padding .pro-package-header {
  position: relative;
  font-size: calc(5 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: normal;
}
.package-section .package-padding .propack-list {
  padding: calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.package-section .package-padding .propack-list .propack-card {
  overflow: hidden;
  width: calc(-0.5 * var(--perwidth) + 100%);
  position: relative;
  border-radius: calc(4 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1.5;
  background-color: #fff;
  border: calc(0.25 * var(--perwidth)) solid #dddddd;
  border-radius: calc(4 * var(--perwidth) + 0%);
  box-shadow: 0px 8px 4px 0px rgba(0, 0, 0, 0.0509803922);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.package-section .package-padding .propack-list .propack-card .propack-card-head {
  position: relative;
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(3 * var(--perwidth) + 0%);
  width: calc(25 * var(--perwidth) + 0%);
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-bg {
  filter: grayscale(100%) opacity(0.4);
  height: calc(0 * var(--perwidth) + 100%);
  aspect-ratio: 0.7;
  background-image: url("/assets/images/bg-2.png");
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-size: 270%;
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-team {
  position: absolute;
  top: calc(2 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: auto;
  font-size: calc(12 * var(--perwidth));
  color: #dddddd;
  text-align: left;
  line-height: 1.5;
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-img {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(0 * var(--perwidth));
  left: auto;
  height: calc(0 * var(--perwidth) + 100%);
  aspect-ratio: 0.7;
  background-image: url("/assets/images/tammy.png");
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: 200%;
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-review {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(3 * var(--perwidth));
  left: auto;
  position: relative;
  height: calc(4 * var(--perwidth) + 0%);
  padding: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  border-radius: calc(100 * var(--perwidth) + 0%);
  background-color: #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-review .propack-card-head-profile-review-star {
  height: calc(4 * var(--perwidth) + 0%);
  width: calc(4 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/star.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: contain;
}
.package-section .package-padding .propack-list .propack-card .propack-card-head .propack-card-head-profile-review .propack-card-head-profile-review-star.half {
  height: calc(4 * var(--perwidth) + 0%);
  width: calc(2 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  aspect-ratio: 0.5;
  background-image: url("/assets/images/star.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: cover;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail {
  width: calc(-25 * var(--perwidth) + 100%);
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-divider {
  border-bottom: calc(0.25 * var(--perwidth)) dashed #dddddd;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-title {
  font-size: calc(5 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-title .propack-card-detail-header-title-name {
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-divider {
  display: block;
  position: relative;
  height: calc(13 * var(--perwidth) + 0.00001px);
  width: calc(0.25 * var(--perwidth) + 0%);
  border-right: calc(0.25 * var(--perwidth)) dashed #dddddd;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-hour {
  padding: calc(0 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(9 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1;
  justify-self: start;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-header .propack-card-detail-header-hour #unit {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  font-size: calc(3.5 * var(--perwidth));
  color: #c1c1c1;
  text-align: left;
  line-height: 1;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content {
  padding: calc(0 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-full-price {
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(2.5 * var(--perwidth));
  color: #c1c1c1;
  text-align: right;
  line-height: 1.5;
  text-decoration: line-through;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-discount-price {
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(5.5 * var(--perwidth));
  color: #333333;
  text-align: right;
  line-height: 1;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-discount-price #bath {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  font-size: calc(2.5 * var(--perwidth));
  color: #c1c1c1;
  text-align: left;
  line-height: 1;
}
.package-section .package-padding .propack-list .propack-card .propack-card-detail .propack-card-detail-content .propack-card-detail-content-btn {
  margin: calc(3 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  font-size: calc(3 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
  margin-left: auto;
  width: -moz-min-content;
  width: min-content;
  word-wrap: normal;
  white-space: nowrap;
  padding: calc(2 * var(--perwidth) + 0%) calc(4.5 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  color: #fff;
}
.package-section .package-padding .proclass-list {
  z-index: 1;
  position: relative;
  padding: calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(3 * var(--perwidth));
}
.package-section .package-padding .proclass-list .proclass-card {
  overflow: hidden;
  width: calc(42 * var(--perwidth) + 0%);
  position: relative;
  border-radius: calc(4 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1.5;
  background-color: #fff;
  border: calc(0.25 * var(--perwidth)) solid #dddddd;
  border-radius: calc(4 * var(--perwidth) + 0%);
  box-shadow: 0px 8px 4px 0px rgba(0, 0, 0, 0.0509803922);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-divider {
  border-bottom: calc(0.25 * var(--perwidth)) dashed #dddddd;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-head .proclass-card-head-profile-flag {
  border-radius: calc(4 * var(--perwidth) + 0%);
  aspect-ratio: 3;
  background-image: url("/assets/images/home-bg.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-head .proclass-card-head-profile-img {
  aspect-ratio: 1;
  background-image: url("/assets/images/default-profile.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: calc(100 * var(--perwidth) + 0%);
  width: calc(15 * var(--perwidth) + 0%);
  margin: calc(-7.5 * var(--perwidth)) auto 0 auto;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843), 0px 7px 7px 0px rgba(0, 0, 0, 0.0901960784), 0px 15px 9px 0px rgba(0, 0, 0, 0.0509803922), 0px 26px 10px 0px rgba(0, 0, 0, 0.0117647059), 0px 41px 11px 0px rgba(0, 0, 0, 0);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-text {
  padding: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  font-size: calc(2.5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1.5;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-header {
  padding: calc(2 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-class {
  font-size: calc(4.5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-team {
  padding: calc(1 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-text .proclass-card-text-detail {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(2.25 * var(--perwidth));
  color: #c1c1c1;
  text-align: left;
  line-height: 1;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-time-table {
  font-size: calc(3 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(2 * var(--perwidth));
  position: relative;
  height: calc(15.5 * var(--perwidth) + 0%);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-time-table .proclass-card-time-table-icon {
  width: calc(5 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/booking.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-time-table .proclass-card-time-table-divider {
  display: block;
  position: relative;
  height: calc(13 * var(--perwidth) + 0.00001px);
  width: calc(0.25 * var(--perwidth) + 0%);
  border-right: calc(0.25 * var(--perwidth)) dashed #dddddd;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-time-table .proclass-card-time-table-date-list {
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-amount {
  font-size: calc(4.5 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 2;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-amount span {
  font-size: calc(3 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: 1.5;
}
.package-section .package-padding .proclass-list .proclass-card .proclass-card-btn {
  position: relative;
  margin: calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  font-size: calc(3 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  width: -moz-min-content;
  width: min-content;
  word-wrap: normal;
  white-space: nowrap;
  padding: calc(2 * var(--perwidth) + 0%) calc(4.5 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  color: #fff;
}
.package-section .footer {
  position: relative;
  margin: calc(-20 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.package-section .footer .footer-img {
  position: relative;
  width: calc(100 * var(--perwidth) + 0%);
  aspect-ratio: 3/4;
}
.package-section .footer .footer-img .footer-img-1 {
  position: absolute;
  top: calc(-14 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: auto;
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%);
  width: calc(90 * var(--perwidth) + 0%);
  aspect-ratio: 0.75;
  background-image: url("/assets/images/bg-1.png");
  background-position: 44% 50%;
  background-repeat: no-repeat;
  background-size: 150%;
  mix-blend-mode: luminosity;
}
.package-section .footer .footer-img .footer-img-2 {
  position: absolute;
  top: calc(8 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(0 * var(--perwidth));
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%);
  width: calc(90 * var(--perwidth) + 0%);
  aspect-ratio: 0.75;
  background-image: url("/assets/images/bg-2.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 140%;
  mix-blend-mode: luminosity;
  opacity: 0.5;
  transform: rotate(180deg) scaleX(-1);
}
.package-section .footer .footer-text {
  position: absolute;
  top: calc(20 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: auto;
  width: calc(50 * var(--perwidth) + 0%);
  padding: calc(10 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
}
.package-section .footer .footer-text .footer-text-1 {
  font-size: calc(5 * var(--perwidth));
  color: #c1c1c1;
  text-align: left;
  line-height: 1;
}
.package-section .footer .footer-text .footer-text-2 {
  font-size: calc(5 * var(--perwidth));
  color: #c1c1c1;
  text-align: right;
  line-height: 1;
}
.package-section .footer .footer-bar {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(0 * var(--perwidth));
  left: auto;
  width: calc(88 * var(--perwidth) + 0%);
  font-size: calc(4.5 * var(--perwidth));
  color: #f3f3f3;
  text-align: center;
  line-height: normal;
  border-radius: calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  padding: calc(10 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  background: linear-gradient(0deg, #587ebf 0%, #10183f 72.4%);
}
.dot-container {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  height: calc(1.5 * var(--perwidth) + 0%);
  width: calc(0 * var(--perwidth) + 100%);
}
.dot-container .dot {
  width: calc(1.5 * var(--perwidth) + 0.01px);
  height: calc(1.5 * var(--perwidth) + 0.01px);
  border-radius: calc(200 * var(--perwidth) + 0%);
  background-color: #dddddd;
  margin: calc(0 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%);
}
.dot-container .dot.active {
  background-color: #10183f;
}

.location-container {
  z-index: 999;
  position: fixed;
  margin: auto;
  background: #fff;
  border-radius: calc(10 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  filter: drop-shadow(0px -4px 8px rgba(0, 0, 0, 0.15));
  -webkit-backdrop-filter: blur(20.5px);
          backdrop-filter: blur(20.5px);
  bottom: calc(-180 * var(--perwidth));
  transition: bottom 0.3s ease;
  padding: calc(10 * var(--perwidth) + 0%) calc(8 * var(--perwidth) + 0%) calc(8 * var(--perwidth) + 0%) calc(8 * var(--perwidth) + 0%);
  width: calc(84 * var(--perwidth) + 0%);
}
.location-container.show {
  bottom: 0;
}
.location-container .location-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  font-size: calc(4.5 * var(--perwidth));
  color: #10183f;
  text-align: center;
  line-height: 1;
  height: calc(10 * var(--perwidth) + 0%);
  padding: calc(2.75 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.location-container .location-header button {
  background: none;
  aspect-ratio: 1;
  background-image: url("/assets/images/arrowleft.svg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(13%) sepia(8%) saturate(8%) hue-rotate(320deg) brightness(101%) contrast(81%);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  height: calc(6 * var(--perwidth) + 0%);
  width: calc(6 * var(--perwidth) + 0%);
}
.location-container .location-header button#nextMonth {
  transform: rotate(180deg);
}
.location-container .location-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.location-container .location-header {
  position: relative;
}
.location-container .location-header::before, .location-container .location-header::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}
.location-container .location-header::before {
  width: calc(24 * var(--perwidth) + 0%);
  aspect-ratio: 2;
  background-image: url("/assets/images/tennis-court-vec.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -25%);
}
.location-container .location-header::after {
  width: calc(9 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/tennis-ball.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -75%);
}
.location-container .location-body {
  font-size: calc(3.5 * var(--perwidth));
  color: #10183f;
  text-align: left;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--perwidth));
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.location-container .location-body .location-text {
  padding: calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.location-container .location-body .location-divider {
  width: calc(84 * var(--perwidth) + 0%);
  height: calc(0.25 * var(--perwidth) + 0%);
  padding: calc(0.25 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  background-color: #dddddd;
  margin: calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.location-container .location-body .location-box {
  width: calc(38 * var(--perwidth) + 0%);
  padding: calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  position: relative;
}
.location-container .location-body .location-box .location-img img {
  aspect-ratio: 4/3;
  width: calc(0 * var(--perwidth) + 100%);
}
.location-container .location-body .location-box .location-icon {
  width: calc(0 * var(--perwidth) + 33.33%);
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
}
.location-container .location-body .location-box .location-icon img {
  border-radius: calc(4 * var(--perwidth) + 0%);
  width: calc(0 * var(--perwidth) + 100%);
  -o-object-position: 50%;
     object-position: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.location-container .location-body .location-box .location-text {
  padding: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(4 * var(--perwidth));
  color: #333333;
  text-align: center;
  line-height: 1;
  height: calc(4 * var(--perwidth) + 0.01px);
}
.location-container .location-body .location-box .location-name {
  padding: calc(4 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.location-container .location-body .location-slider-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  width: calc(0 * var(--perwidth) + 400%);
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  transform: translateX(0%);
}
.location-container .location-body .location-page {
  flex-shrink: 0;
  width: calc(76 * var(--perwidth) + 0%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  flex: 0 0 100%;
  flex-wrap: wrap;
  position: relative;
}
.location-container .location-body .location-dot-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  padding: calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  height: calc(1.5 * var(--perwidth) + 0%);
  width: calc(0 * var(--perwidth) + 100%);
}
.location-container .location-body .location-dot-container .dot {
  width: calc(1.5 * var(--perwidth) + 0.01px);
  height: calc(1.5 * var(--perwidth) + 0.01px);
  border-radius: calc(200 * var(--perwidth) + 0%);
  background-color: #dddddd;
  margin: calc(0 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%);
}
.location-container .location-body .location-dot-container .dot.active {
  background-color: #10183f;
}

.coach-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.coach-modal.show {
  display: block;
}
.coach-modal.show .coach-container {
  bottom: 0;
}
.coach-modal .coach-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
}
.coach-modal .coach-container {
  position: fixed;
  width: calc(88 * var(--perwidth) + 0%);
  margin: auto;
  background: #fff;
  padding: calc(10 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(20 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%);
  border-radius: calc(10 * var(--perwidth) + 0%) calc(10 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  filter: drop-shadow(0px -4px 8px rgba(0, 0, 0, 0.15));
  -webkit-backdrop-filter: blur(20.5px);
          backdrop-filter: blur(20.5px);
  bottom: calc(-180 * var(--perwidth));
  transition: bottom 0.3s ease;
  left: 50%;
  transform: translateX(-50%);
}
.coach-modal .coach-container .coach-modal-profile {
  background-color: #fff;
  overflow: hidden;
  border-radius: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
  position: relative;
  height: calc(40 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-bg {
  height: calc(40 * var(--perwidth) + 0%);
  width: calc(48 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  filter: grayscale(100%) opacity(0.4);
  aspect-ratio: 1.2;
  background-image: url("/assets/images/bg-2.png");
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-size: 120%;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-team {
  height: calc(40 * var(--perwidth) + 0%);
  width: calc(32 * var(--perwidth) + 0%);
  position: absolute;
  top: calc(2 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(20 * var(--perwidth));
  font-size: calc(9 * var(--perwidth));
  color: #10183f;
  text-align: right;
  line-height: 1;
  white-space: break-spaces;
  word-wrap: normal;
  overflow-wrap: anywhere;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-team#TTA {
  position: absolute;
  top: calc(2 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(13 * var(--perwidth));
  font-size: calc(15 * var(--perwidth));
  color: #10183f;
  text-align: right;
  line-height: 1;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-team#CRYSTAL {
  position: absolute;
  top: calc(8 * var(--perwidth));
  right: auto;
  bottom: auto;
  left: calc(20 * var(--perwidth));
  font-size: calc(7 * var(--perwidth));
  color: #10183f;
  text-align: right;
  line-height: 1;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-img {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(0 * var(--perwidth));
  left: calc(1 * var(--perwidth));
  height: calc(40 * var(--perwidth) + 0%);
  aspect-ratio: 0.7;
  background-image: url("/assets/images/tammy.png");
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-size: 200%;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data {
  position: absolute;
  top: auto;
  right: calc(0 * var(--perwidth));
  bottom: calc(0 * var(--perwidth));
  left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(5 * var(--perwidth));
  width: calc(60 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail {
  position: relative;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-name {
  font-size: calc(4.5 * var(--perwidth));
  color: #333333;
  text-align: left;
  line-height: 1.15;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-booking-book-user-gap {
  height: calc(4 * var(--perwidth) + 0%);
  padding: calc(2.5 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-review {
  position: relative;
  height: calc(4 * var(--perwidth) + 0%);
  padding: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  margin: calc(1 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(100 * var(--perwidth) + 0%);
  background-color: #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-review .coach-modal-profile-data-review-star {
  height: calc(4 * var(--perwidth) + 0%);
  width: calc(4 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/star.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: contain;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-review .coach-modal-profile-data-review-star.half {
  height: calc(4 * var(--perwidth) + 0%);
  width: calc(2 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  aspect-ratio: 0.5;
  background-image: url("/assets/images/star.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: cover;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-detail .coach-modal-profile-data-position {
  width: calc(6.75 * var(--perwidth) + 0%);
  border-radius: calc(100 * var(--perwidth) + 0%);
  background-color: #10183f;
  font-size: calc(4.5 * var(--perwidth));
  color: #fff;
  text-align: center;
  line-height: 1.5;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-data .coach-modal-profile-data-divider {
  font-size: calc(0.5 * var(--perwidth));
  color: #b5b5b5;
  text-align: center;
  line-height: 22;
  width: calc(0.5 * var(--perwidth) + 0%);
  height: calc(9 * var(--perwidth) + 0%);
  background-color: #b5b5b5;
}
.coach-modal .coach-container .coach-modal-profile .coach-modal-profile-amount {
  position: absolute;
  top: calc(6 * var(--perwidth));
  right: calc(0 * var(--perwidth));
  bottom: auto;
  left: auto;
  margin: calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  font-size: calc(3.5 * var(--perwidth));
  color: #10183f;
  text-align: center;
  line-height: 1;
  margin-top: calc(4 * var(--perwidth));
  margin-left: auto;
  margin-right: auto;
  width: -moz-min-content;
  width: min-content;
  word-wrap: normal;
  white-space: nowrap;
  padding: calc(2.5 * var(--perwidth) + 0%) calc(4 * var(--perwidth) + 0%);
  background-color: #b5b5b5;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  color: #fff;
}
.coach-modal .coach-container .coach-modal-tag-header {
  margin: calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  font-size: calc(3.5 * var(--perwidth));
  color: #b5b5b5;
  text-align: left;
  line-height: 1;
}
.coach-modal .coach-container .coach-modal-tag {
  height: calc(11 * var(--perwidth) + 0%);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  border: calc(0.3 * var(--perwidth)) solid #dddddd;
  border-radius: calc(3 * var(--perwidth) + 0%);
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  margin: calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(6 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team {
  font-size: calc(4 * var(--perwidth));
  color: #c1c1c1;
  text-align: center;
  line-height: normal;
  border-left: 1px solid #dddddd;
  padding: calc(2.5 * var(--perwidth) + 0%) calc(2.5 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team .coach-modal-team {
  padding: calc(1 * var(--perwidth) + 0%) calc(2.75 * var(--perwidth) + 0%) calc(1 * var(--perwidth) + 0%) calc(2 * var(--perwidth) + 0%);
  border-radius: calc(4 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0 * var(--perwidth));
  height: calc(3 * var(--perwidth) + 0.01px);
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team .coach-modal-team .coach-modal-team-icon {
  width: calc(3 * var(--perwidth) + 0%);
  height: calc(3 * var(--perwidth) + 0%);
  margin: calc(0 * var(--perwidth) + 0%) calc(-0.75 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  aspect-ratio: 1;
  background-image: url("/assets/images/person.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  filter: invert(50%) sepia(11%) saturate(11%) hue-rotate(20deg) brightness(92%) contrast(85%);
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team .coach-modal-team .coach-modal-team-icon.knocker::before {
  content: "";
  background-color: #333333;
  filter: invert(50%) sepia(11%) saturate(11%) hue-rotate(20deg) brightness(92%) contrast(85%);
  width: calc(1.5 * var(--perwidth) + 0%);
  height: calc(1.5 * var(--perwidth) + 0%);
  position: absolute;
  top: auto;
  right: calc(-1 * var(--perwidth));
  bottom: calc(0 * var(--perwidth));
  left: auto;
  border-radius: calc(4 * var(--perwidth) + 0%);
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team.active {
  color: #f3f3f3;
  background-color: #10183f;
}
.coach-modal .coach-container .coach-modal-tag .coach-modal-tag-team.active .coach-modal-team-icon {
  filter: invert(8%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1000%) contrast(1800%);
}
.coach-modal .coach-container .coach-modal-btn {
  margin: calc(5 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%) calc(0 * var(--perwidth) + 0%);
  border-radius: calc(10 * var(--perwidth) + 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.5 * var(--perwidth));
  font-size: calc(4.5 * var(--perwidth));
  color: #10183f;
  text-align: center;
  line-height: 1;
  margin-top: calc(4 * var(--perwidth));
  margin-left: auto;
  margin-right: auto;
  width: -moz-min-content;
  width: min-content;
  word-wrap: normal;
  white-space: nowrap;
  padding: calc(3.5 * var(--perwidth) + 0%) calc(16 * var(--perwidth) + 0%);
  background-color: #10183f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1490196078);
  color: #fff;
}/*# sourceMappingURL=styles.css.map */