body {
  background-color: #f7f8fa;
}

/*------------------------------------------------ Accoun info page ------------------------------------------- */

.acntMobHeader {
  display: none;
}

.acntBanner-wrap {
  padding: 24px var(--page-padding-8) 105px var(--page-padding-8);
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--color-primary);
  gap: 32px;
}
.acntNav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: var(--color-white);
}
.acntNav a {
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.acntNav .chevron {
  font-size: 18px;
}

.acntProfile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.acntNoPhoto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-white);
  border-radius: 50%;
}
.acntNoPhoto span {
  font-weight: 700;
  font-size: 17.5px;
  line-height: 25px;
}
.acntName {
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  color: var(--color-white);
}

.acntlevel-wrap {
  padding: 0px var(--page-padding-8) 128px var(--page-padding-8);
  position: relative;
}
.acntlevel-container {
  padding: 20px var(--page-padding-8) 0px var(--page-padding-8);
  position: absolute;
  width: 100%;
  left: 0px;
  top: -100px;
}
.acntlevel {
  display: flex;
  flex-direction: column;
  border: solid 1px #d6dde6;
  border-radius: 16px;
  padding: 20px 0px;
  box-shadow: var(--box-shadow-1c2b3d1f);
  background-color: var(--color-white);
  gap: 24px;
}

.currentPointContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0px 20px;
}
.currentPointContainer .logo {
  width: 36px;
  height: 36px;
  background-image: linear-gradient(#1c2b3d, #4b73a3);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.currentPointContainer .logo img {
  width: 20px;
}
.currentPointContainer .currentPointBox {
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 8px;
}
.currentPointContainer .currentPoint {
  font-weight: 700;
  font-size: 32px;
  line-height: 30px;
}
.currentPointContainer .elci {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #67778a;
}

.acntlevel-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 0px 20px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.acntlevel-bars::-webkit-scrollbar {
  display: none;
}
.acntlevel-box {
  display: flex;
  flex-direction: row;
  border: dotted 1px #b0bac8;
  border-radius: 100px;
  padding: 8px 44px 8px 16px;
  align-items: center;
  gap: 10px;
}
.acntlevel-box img {
  width: 60px;
  height: 60px;
}
.acntlevel-box .levelPointBox {
  display: flex;
  flex-direction: column;
  width: 129px;
}
.acntlevel-box .levelName {
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
}
.acntlevel-box .levelPoint {
  color: #67778a;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.acntlevel-box-active {
  border: solid 1px var(--color-primary);
  background: #e3f0ff66;
}
.acntlevel-box-active .levelName {
  color: #004799;
}
.acntlevel-box-active .levelPoint {
  color: var(--color-primary);
}

.acntlevel-bar .acntSeprator {
  min-width: 12%;
  border-top: solid 2px #b0bac8;
}
.acntlevel-bar .acntSeprator-active {
  border-top-color: var(--color-primary);
}

/* account content */
.acnt-content {
  padding: 0px var(--page-padding-8) 100px var(--page-padding-8);
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 28px;
}

.acnt-leftMenu {
  display: flex;
  flex-direction: column;
  border: solid 1px #d6dde6;
  border-radius: 16px;
  box-shadow: var(--box-shadow-1c2b3d1f);
  background-color: var(--color-white);
  gap: 24px;
  width: 278px;
}

/*  account logged menu */
.acnt-Menu {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.acnt-Menu .section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.acnt-Menu .section.footerSec {
  border-top: 1px solid #d6dde6;
}
.acnt-Menu .item {
  border: 1px solid #e7ebf0;
  padding: 12px 16px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}
.acnt-Menu .item-active {
  background: #e3f0ff;
  color: var(--color-primary);
  border: 1px solid #e3f0ff;
}

.acnt-details {
  display: flex;
  flex-direction: column;
  border: solid 1px #d6dde6;
  border-radius: 16px;
  flex: 1;
  box-shadow: var(--box-shadow-1c2b3d1f);
  background-color: var(--color-white);
  width: 100%;
}
.acntDet-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #d6dde6;
  box-shadow: var(--box-shadow-1c2b3d1f);
}
.acntDet-head .acntTitle {
  font-weight: 700;
  font-size: 24px;
  line-height: 29.05px;
  letter-spacing: 0%;
}

.acntDet-main {
  display: flex;
  flex: 1;
}
.hbMain {
  display: flex;
  flex-direction: row;
  gap: 36px;
  padding: 24px;
  flex-wrap: wrap;
}
.hbForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
}

.radioBtnsRows {
  display: flex;
  flex-direction: row;
  gap: 32px;
}
.radioBox {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 28px;
  width: 110px;
}
.radioBox .label {
  padding-top: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.acnt-input span {
  font-weight: 500px;
  font-size: 14px;
  line-height: 17px;
}

.hbDescription {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 240px;
}
.hbDescription span {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}

.acntDet-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px;
  gap: 24px;
  border-top: 1px solid #d6dde6;
  box-shadow: var(--box-shadow-1c2b3d1f);
}

/*-------------------------------------------- End of Accoun info page ------------------------------------------ */

/*---------------------------------------------- myreservation page --------------------------------------------- */
.myrsrv-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/*  */

.cuscmnt-content .cuscmntTabs .cuscmntTab {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 12px 16px;
  border-bottom: solid 2px #d6dde6;
  cursor: pointer;
}

.myrsrv-tabs {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.myrsrv-tabs::-webkit-scrollbar {
  display: none;
}
.myrsrv-tabs .myrsrvTab {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 12px 16px;
  border-bottom: solid 2px #d6dde6;
  cursor: pointer;
}
.myrsrv-tabs .myrsrvTab .cuscmntTab:hover {
  border-bottom: solid 2px #67778a;
}
.myrsrv-tabs .myrsrvTab:active {
  border-bottom: solid 2px var(--color-primary);
  color: var(--color-primary);
}
.myrsrv-tabs .myrsrvTab-active {
  border-bottom: solid 2px var(--color-primary);
  color: var(--color-primary);
}
.myrsrv-tabs .myrsrvTab12 {
  border-bottom: solid 2px #d6dde6;
  width: 12px;
}
.myrsrv-tabs .myrsrvTab16 {
  border-bottom: solid 2px #d6dde6;
  width: 16px;
}

.myrsrv-tabs .myrsrvTabRest {
  border-bottom: solid 2px #d6dde6;
  flex: 1;
}

/*  */

.myrsrv-main .cards {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
}

.myrsrv-main .card {
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  border: 1px solid #d6dde6;
  border-radius: 12px;
}
.myrsrv-main .card .myrsrvHead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
  gap: 16px;
  cursor: pointer;
  flex-wrap: wrap;
}
.myrsrv-main .card .myrsrvHead .cardInfoBox {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.myrsrv-main .card .myrsrvHead .imageBox {
  width: 164px;
  max-height: 148px;
  border-radius: 12px;
}
.myrsrv-main .card .myrsrvHead .imageBox img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.myrsrv-main .card .myrsrvHead .cardInfo {
  display: flex;
  flex-direction: column;
  /* align-items: start; */
  gap: 6px;
}
.myrsrv-main .card .myrsrvHead .cardInfo .tripType {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.myrsrv-main .card .myrsrvHead .cardInfo .programType {
  border-radius: 6px;
  padding: 2px 8px;
  background-color: #bce2ff;
  font-weight: 700;
  font-size: 14px;
  line-height: 21.98px;
  color: #0172cb;
  align-self: self-start;
}
.otelNameBox {
  display: flex;
  flex-direction: column;
}
.otelNameBox .otelName {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.otelNameBox .otelLocation {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.myrsrvInoutBox {
  display: flex;
  flex-direction: row;
  gap: 44px;
  flex-wrap: wrap;
}
.myrsrvInoutBox .inout {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.myrsrvInoutBox .inout .label {
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}
.myrsrvInoutBox .inout .date {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  white-space: nowrap;
}
.inout-trip {
  flex: 1;
}

.myrsrv-main .card .myrsrvHead .expand {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
}

/*  */
.myrsrvContent {
  display: flex;
  flex-direction: column;
  padding: 0px 16px 16px 16px;
  gap: 20px;
}

.myrsrvContent .trips {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.myrsrvContent .trips .trip {
  display: flex;
  flex-direction: column;
  border: 1px solid #d6dde6;
  background-color: var(--color-white);
  padding: auto;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 8px;
}
.myrsrvContent .trips .trip .tripTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 21.78px;
  color: var(--color-primary);
}

.myrsrvContent .info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.myrsrvContent .info .infoDet {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.myrsrvContent .info .infoDet .props {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.myrsrvContent .info .infoDet .infoPrice {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.myrsrvContent .info .line {
  border: 2px dashed #bac7d5;
}
.myrsrvContent .info .billBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.myrsrvContent .info .billBox .billDes {
  display: flex;
  flex-direction: column;
}
.myrsrvContent .info .billBox .billDes .tax {
  font-weight: 400px;
  font-size: 14px;
  line-height: 16.94px;
  letter-spacing: 0px;
  text-align: right;
}
.myrsrvContent .info .billBox .billDes .rooms {
  font-weight: 700;
  font-size: 20px;
  line-height: 24.2px;
}
.myrsrvContent .info .billBox .totalPrice {
  font-weight: 700;
  font-size: 20px;
  line-height: 24.2px;
}

.myrsrvContent .foot {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
  flex-wrap: wrap;
}
/*-------------------------------------------- End of myreservation page ---------------------------------------- */

/*-------------------------------------------- registered persons page ------------------------------------------ */
.profileCard {
  background-color: #eef1f4;
  border: solid 1px #d6dde6;
  border-radius: 12px;
}
.profileCard .pHead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}
.profileCard.pHead .pNumber,
.profileCard.pHead .pTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.profileCard.pHead .pRequired {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #67778a;
}
.profileCard.pHead .expand {
  font-size: 30px;
}

.profileCard .profileContent {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0px 16px 16px 16px;
}
.profileCard .profileRow {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
}
.profileCard .profileRow.radioBtnsRows {
  display: flex;
  flex-direction: row;
  gap: 62px;
}
.profileCard .profileRow .radioBox {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 28px;
}
.profileCard .profileRow .radioBox .label {
  padding-top: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.profileCard .profileRowFooter {
  flex-direction: row-reverse;
}

.profileCard .profileRow .modal-input-wrap span {
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
}
/*------------------------------------------ End of registered persons page ------------------------------------- */

/*----------------------------------------------- New password page -------------=------------------------------- */
.newpassBanner-wrap {
  padding: 24px var(--page-padding-8) 105px var(--page-padding-8);
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--color-primary);
  gap: 32px;
  padding-bottom: 190px;
}
.newpass-wrap {
  padding: 0px var(--page-padding-8) 128px var(--page-padding-8);
  position: relative;
  min-height: 440px;
}
.newpass-container {
  padding: 20px var(--page-padding-8) 0px var(--page-padding-8);
  position: absolute;
  width: 100%;
  left: 0px;
  top: -164px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.newpasslevel {
  display: flex;
  flex-direction: column;
  border: solid 1px #d6dde6;
  border-radius: 16px;
  box-shadow: var(--box-shadow-1c2b3d1f);
  background-color: var(--color-white);
  /* gap: 24px;s */
  width: 344px;
}
.newpassTitle {
  padding: 24px;
  border-bottom: solid 1px #d6dde6;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.newpassContent {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 36px;
}
.newpassFooter {
  display: flex;
  flex-direction: row-reverse;
}

/*--------------------------------------------- End of New password page ---------------------------------------- */

@media screen and (max-width: 600px) {
  /*---------------------------------------------- Accoun info page --------------------------------------------- */
  .nav-center-account {
    display: none;
  }
  .acntMobHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 56px;
    width: 100%;
    background-color: var(--color-white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px 0px 16px;
    z-index: 1;
  }
  .acntMobHeader .acntMobTitle {
    font-weight: 700;
    font-size: 20px;
    line-height: 26.68px;
  }

  .acntBanner-wrap {
    padding: 16px 16px 150px 16px;
  }
  .acntNav {
    display: none;
  }

  .acntlevel-wrap {
    padding: 0px 16px 62px 16px;
  }
  .acntlevel-container {
    padding: 16px 16px 0px 16px;
    top: -150px;
  }
  .acnt-content {
    padding: 0px 16px 24px 16px;
  }

  .acnt-leftMenu {
    display: none;
  }
  /*-------------------------------------------- End of Accoun info page ---------------------------------------- */

  /*---------------------------------------------- myreservation page ------------------------------------------- */

  .myrsrv-main .cards {
    padding: 12px;
    gap: 16px;
  }
  .myrsrv-main .card .myrsrvHead {
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    gap: 12px;
  }
  .myrsrv-main .card .myrsrvHead .cardInfoBox {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .myrsrv-main .card .myrsrvHead .imageBox {
    width: 100%;
    height: 120px;
  }
  .myrsrv-main .card .myrsrvHead .expand {
    justify-content: start;
  }
  .myrsrvInoutBox {
    flex-wrap: wrap;
    gap: 16px;
  }
  .myrsrvInoutBox .inout {
    flex: 1;
  }
  .myrsrvContent .info .billBox {
    flex-wrap: wrap;
  }
  .myrsrvContent .info .infoDet {
    flex-wrap: wrap;
  }
  .myrsrvContent .foot {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }

  /*-------------------------------------------- End of myreservation page -------------------------------------- */

  /*------------------------------------------------  my favorite page ------------------------------------------ */
  .myFavCard {
    border-radius: 16px;
  }
  /*--------------------------------------------- End of myfavorite page ---------------------------------------- */

  /*------------------------------------------------  my favorite page ------------------------------------------ */

  .profileCard .profileRow {
    flex-direction: column;
  }
  .profileCard .profileRow.radioBtnsRows {
    flex-direction: row;
  }

  /*--------------------------------------------- End of myfavorite page ---------------------------------------- */
}

.hide {
  display: none;
}