/* @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  font-family: "Poppins", sans-serif;
  color: #333;
} */

body {
  margin: 0;
  padding: 0;
}

/* [062424TIN] override my-account page */

/* id of my account page */
body.page-id-298 #main-content:has(.tgwc-user-avatar-image-wrap) {
  background-color: #F9F0ED;
}

/* [071524TIN] Change max width and padding */
body.page-id-298 #main-content .container,
body.page-id-298:not(.et-tb) #main-content .container {
  padding: 112px 20px 70px;
  max-width: 1240px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 479px) {

  body.page-id-298 #main-content .container,
  body.page-id-298:not(.et-tb) #main-content .container {
    width: 100%;
    margin: 0;
    padding: 0 7px 19px;
  }
}

@media (min-width: 480px) and (max-width: 785px) {

  body.page-id-298 #main-content .container,
  body.page-id-298:not(.et-tb) #main-content .container {
    width: 100%;
    margin: 0;
    padding: 0 7px 19px;
  }
}

/* [070524TIN] Update css */
body.page-id-298 #main-content .container #tgwc-woocommerce {
  display: flex;
  gap: 30px;
}

/* [070524TIN] Update css - remove after, before */
body.page-id-298 #main-content .container #tgwc-woocommerce::before,
body.page-id-298 #main-content .container #tgwc-woocommerce::after {
  display: none;
}

/* [070524TIN] Update css */
body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation.tgwc-navbar-sidebar {
  padding: 0;
  flex: 1;
  flex-basis: 327px;
}

/* [070524TIN] Update css */
body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation.tgwc-navbar-sidebar~.woocommerce-MyAccount-content {
  padding: 0;
  flex: 1;
}

/* [070524TIN] Update css - hide default user name, logout button*/
body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-user-info {
  display: none;
}

/* [070524TIN] Update css - style for upload avatar button */
body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-user-avatar-upload-icon {
  /* hide default upload button and use dz-default.dz-message us upload button */
  display: none;
}

/* [070524TIN] Update css - hide default camera icon in upload avatar button */
body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-user-avatar-upload-icon svg {
  display: none;
}

/* adjust postion of upload button  */
body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation.tgwc-navbar-sidebar .tgwc-user-avatar .tgwc-user-avatar-image-wrap {
  margin: 0;
}

/* [071524TIN] Hide default navigation on mobile */
@media (max-width: 479px) {
  body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation.tgwc-navbar-sidebar {
    display: none;
  }
}

@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content .container #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation.tgwc-navbar-sidebar {
    display: none;
  }
}

/* [071524TIN] Hide default navigation on mobile - end */

.tgwc-user-avatar .dropzone {
  position: relative;
  width: fit-content;
}

.tgwc-user-avatar .dropzone#tgwc-file-drop-zone .dz-default.dz-message {
  position: absolute;
  margin: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  border: 1px solid #FFF;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjgwNiA0LjI4M2MtLjc4NC4xMDItMS40NTQuNTU1LTEuODY5IDEuMjY0YTEuNTEzIDEuNTEzIDAgMCAxLS4yNDguMzM0Yy0uMTAzLjA4Mi0uMTM0LjA4OC0uNzM1LjE1NS0xLjQyNy4xNTgtMi43NDQgMS4xMzUtMy4zMjUgMi40NjYtLjE5OS40NTctLjMuODUxLS4zNDggMS4zNTgtLjA1NS41OTItLjA1MyA0LjQ4NS4wMDMgNS4wNDIuMjA4IDIuMDY3IDEuNzcyIDMuNjIxIDMuODQxIDMuODE1LjYyNS4wNTkgNy4xOTQuMDU4IDcuNzc3LS4wMDEgMS43NTgtLjE3NyAzLjE4NS0xLjM1OCAzLjY3My0zLjA0MS4xNTYtLjU0MS4xODUtMS4wNTEuMTg1LTMuMjkyIDAtMi4xOTEtLjAzLTIuNzczLS4xNjYtMy4yNjEtLjQ2NC0xLjY2NS0xLjg4NS0yLjkwMS0zLjU0OC0zLjA4Ni0uNjAxLS4wNjctLjYzMi0uMDczLS43MzUtLjE1NWExLjUxMyAxLjUxMyAwIDAgMS0uMjQ4LS4zMzQgMi41MTMgMi41MTMgMCAwIDAtLjgwMS0uODYxIDIuNDQ2IDIuNDQ2IDAgMCAwLTEuMTAyLS40MDVjLS4zNTctLjA0Ni0xLjk5My0uMDQ1LTIuMzU0LjAwMm0yLjQ0OCAxLjUzMmMuMjEuMDg4LjQxNi4yOTQuNTg4LjU4OS4zOTguNjgxLjkzNiAxIDEuODE2IDEuMDc5Ljc3NS4wNjkgMS4zMDQuMzEyIDEuODIyLjgzNy4yOTUuMjk5LjUyMS42Ni42NTEgMS4wNC4wODguMjU3LjA4OS4yOTQuMSAyLjg4LjAxNCAyLjk2LjAxNSAyLjk0Ni0uMjg0IDMuNTM0LS4xMjYuMjQ5LS4yNDYuNDA3LS41MDYuNjY2LS4zOTMuMzkyLS43NDIuNTk4LTEuMjIzLjcyMS0uMy4wNzYtLjQ1MS4wNzktNC4yMTguMDc5cy0zLjkxOC0uMDAzLTQuMjE4LS4wNzljLS40ODEtLjEyMy0uODMtLjMyOS0xLjIyMy0uNzIxLS4yNi0uMjU5LS4zOC0uNDE3LS41MDYtLjY2Ni0uMjk5LS41ODgtLjI5OC0uNTc0LS4yODQtMy41MzQuMDExLTIuNTg2LjAxMi0yLjYyMy4xLTIuODguMTMtLjM4LjM1Ni0uNzQxLjY1MS0xLjA0LjUxOS0uNTI2IDEuMDQ4LS43NjkgMS44MjQtLjgzNy44NzItLjA3NiAxLjQxOC0uNDAxIDEuODE1LTEuMDgxLjE2OC0uMjg3LjM3NS0uNDk3LjU3OC0uNTg1LjE4LS4wNzkgMi4zMy0uMDggMi41MTctLjAwMm0tMi4wMjggMi4wMDZjLTEuMzgyLjI2Mi0yLjQ4MyAxLjExOS0yLjk4NyAyLjMyNy0uMjE0LjUxMy0uMjExLjgyNS4wMTIgMS4wNzlhLjY5NC42OTQgMCAwIDAgLjU2OS4yNTNjLjM2NSAwIC42MTQtLjIxOS43NTgtLjY2Ny4wMzctLjExNS4xMzUtLjMxMy4yMTktLjQ0LjY5LTEuMDUxIDIuMTM3LTEuNDI2IDMuMzAzLS44NTcuMzI2LjE1OS43NjYuNDguODA3LjU4OS4wMTQuMDM0LS4wMjEuMTA2LS4wNzkuMTY3LS4xOTUuMjA1LS4yMzkuNDc4LS4xMjQuNzY2LjA3Ni4xOS45ODEgMS4wNTUgMS4xOTggMS4xNDUuMTguMDc2LjQwNC4wNy41ODgtLjAxNC4xODUtLjA4NSAxLjA4OC0uOTI5IDEuMTc2LTEuMTAxYS43NzQuNzc0IDAgMCAwLS4wNTMtLjcyNGMtLjIwMi0uMjktLjU5Mi0uNDE0LS45MDEtLjI4NS0uMDUzLjAyMi0uMDktLjAxOS0uMTc0LS4xODYtLjQ3Ni0uOTQ2LTEuNDgyLTEuNzItMi41OTgtMS45OTktLjQzMi0uMTA3LTEuMjg2LS4xMzQtMS43MTQtLjA1M20tMi43MTYgNC4wMWMtLjE4NS4wODUtMS4wODguOTI5LTEuMTc2IDEuMTAxYS43NzQuNzc0IDAgMCAwIC4wNTMuNzI0Yy4yMDIuMjkuNTkyLjQxNC45MDEuMjg1LjA1My0uMDIyLjA5LjAxOS4xNzQuMTg2LjM3My43NDIgMS4xMzUgMS40MzcgMS45NTYgMS43ODMuNTguMjQ1LjkxOS4zMDggMS42NDIuMzA2LjU1OC0uMDAyLjY5LS4wMTYgMS4wMjgtLjEwNyAxLjI0MS0uMzMyIDIuMjExLTEuMTUxIDIuNjczLTIuMjU3LjIxNC0uNTEzLjIxMS0uODI1LS4wMTItMS4wNzlhLjY5NC42OTQgMCAwIDAtLjU2OS0uMjUzYy0uMzY1IDAtLjYxNC4yMTktLjc1OC42NjdhMi4xOTQgMi4xOTQgMCAwIDEtLjIxOS40NGMtLjY5IDEuMDUxLTIuMTM3IDEuNDI2LTMuMzAzLjg1Ny0uMzI2LS4xNTktLjc2Ni0uNDgtLjgwNy0uNTg5LS4wMTQtLjAzNC4wMjEtLjEwNi4wNzktLjE2Ny4xOTUtLjIwNS4yMzktLjQ3OC4xMjQtLjc2Ni0uMDc0LS4xODYtLjk5LTEuMDU4LTEuMjA0LTEuMTQ4YS43NTUuNzU1IDAgMCAwLS41ODIuMDE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
  background-position: center;
  background-repeat: no-repeat;
}

.tgwc-user-avatar .dropzone#tgwc-file-drop-zone .dz-default.dz-message .dz-button {
  height: 100%;
  width: 100%;
  /* hide button but keep clickable */
  overflow: hidden;
  color: transparent;
  background-color: transparent;
}

body.page-id-298 #main-content .container::before {
  display: none;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .container {
    width: 100%;
    margin: 0;
  }
}

body.page-id-298 #main-content #left-area {
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  font-family: "Segoe UI", system-ui, sans-serif;
}


/* // hide default title */
body.page-id-298 #main-content .entry-title.main_title {
  display: none;
}

body.page-id-298 #main-content .tgwc-user-avatar .dropzone .tgwc-user-avatar-image-wrap .avatar {
  border-radius: 50%;
}

body.page-id-298 #main-content .container a {
  color: #9C6E5E;
  text-decoration: underline;
}

body.page-id-298 #main-content .tgwc-user-avatar a.button {
  border-radius: 40px;
  border: 1px solid #9C6E5E;
  box-sizing: border-box;
  padding: 12px 20px;
  color: #9C6E5E;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

body.page-id-298 #main-content .tgwc-user-avatar {
  margin-bottom: 45px;
}

body.page-id-298 #main-content .tgwc-user-avatar a.button:hover {
  display: flex;
  width: fit-content;
  gap: 10px;
  align-items: center;
  margin: 0;
}

body.page-id-298 #main-content .tgwc-user-avatar a.button::after {
  display: none;
  position: relative;
}


body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 29px;
  padding: 0;
}

body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
  color: #3D3D3D;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  padding: 0;
  /* [070424TIN] change sidebar style on mobile to grid */
  background-color: transparent;
}

body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:hover,
body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active {
  text-decoration: underline;
}

body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  color: inherit;
  padding: 0;
  border: none;
}

/* [062424TIN] override my-account page - end*/

/* [062524TIN] Makeup main content */

body.page-id-298 #main-content .tab-heading {
  margin: 0 0 13px;
  padding: 0;
  color: #3D3D3D;
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
}

/* [072624TIN] Add style for sub heading */
body.page-id-298 #main-content .sub-heading {
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

/* [070824TIN] Add style for tab subtitle */
body.page-id-298 #main-content .tab-subtitle {
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .woocommerce form .form-row {
  padding: 0;
  margin-bottom: 20px;
}

body.page-id-298 #main-content .woocommerce form .form-row em {
  font-size: 13px;
}

body.page-id-298 #main-content .woocommerce form legend,
body.page-id-298.woocommerce-account #main-content .addresses .title h3 {
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  padding: 0;
  margin-bottom: 8px;
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account label {
  color: #3D3D3D;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 10px;
}

body.page-id-298 #main-content .woocommerce form .form-row input.input-text,
body.page-id-298 #main-content .woocommerce form .form-row textarea {
  padding: 11px 14px 11px 14px;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: #FFF;
  color: #7D7D7D;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  resize: none;
}

body.page-id-298 #main-content .woocommerce button.woocommerce-button.button,
body.page-id-298 #main-content .woocommerce button.button,
body.page-id-298 #main-content .woocommerce button.woocommerce-button.button:hover,
body.page-id-298 #main-content .woocommerce button.button:hover,
body.page-id-298 #main-content #renew-membership,
.dashboard__button {
  border-radius: 40px;
  background: #9C6E5E;
  box-sizing: border-box;
  padding: 12px 20px;
  color: #FFF !important;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  border: none;
}

body.page-id-298 #main-content .woocommerce button.woocommerce-button.button:hover::after,
body.page-id-298 #main-content .woocommerce button.button:hover::after {
  display: none;
}

body.page-id-298 #main-content .col2-set.addresses {
  margin-top: 10px;
}

body.page-id-298.woocommerce-account .addresses .title .edit {
  color: #9C6E5E;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298.woocommerce-account .addresses address p {
  margin-bottom: .5rem;
  padding: 0;
}

body.page-id-298 #main-content .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.page-id-298 #main-content .data-table th {
  text-align: left;
  color: #3D3D3D;
  font-size: 13px;
  /* prevent override css of divi for th tag */
  font-weight: 400 !important;
  line-height: 120%;
  padding: 6px 6px 12px !important;
  box-sizing: border-box;
}

body.page-id-298 #main-content .data-table__row td {
  border-color: #9C6E5E;
  border-style: solid;
  border-width: 1px 0;
  background-color: white;
  padding: 12px 12px !important;
  color: #3D3D3D;
}

body.page-id-298 #main-content .data-table__row td:first-child {
  border-radius: 8px 0 0 8px;
  border-width: 1px 0 1px 1px;
}

body.page-id-298 #main-content .data-table__row td:last-child {
  border-radius: 0 8px 8px 0;
  border-width: 1px 1px 1px 0;
}

body.page-id-298 #main-content .data-table__row-gap {
  height: 23px;
  background-color: transparent;
  border: none;
}

/* [010724TIN] Add style for table skeleton */
body.page-id-298 #main-content .data-table__cell-loading {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.12);
  mask-image: radial-gradient(#fff, #000);
  min-height: 24px;
  border-radius: 8px;
  margin: 10px;
}

body.page-id-298 #main-content .data-table__cell-loading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
  animation: skeleton-loading 1.75s linear infinite;
}

/* [010724TIN] Add style for table skeleton - end */

/* [080724TIN] Update style for coupon code */

/* [082024TIN] Update style for coupon card */
.user-coupons {
  width: fit-content;
}

body.page-id-298 #main-content .coupon-item {
  margin: 0 auto;
}

@media screen and (max-width: 479px) {

  /* full width for mobile */
  .user-coupons {
    width: 100%;
  }
}

/* [082024TIN] Update style for coupon card - end */

body.page-id-298 #main-content .coupon-item {
  border-radius: 18px;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  padding: 29px 38px 42px;
  max-width: 392px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

body.page-id-298 #main-content .coupon-item__exp {
  color: #878787;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .coupon-item__code {
  color: #3D3D3D;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .coupon-item__name {
  color: #3D3D3D;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

/* [071624TIN] Update coupon thumb */
body.page-id-298 #main-content .coupon-item__thumb {
  display: block;
  margin: 0 auto 3px;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
}

body.page-id-298 #main-content .coupon-item__thumb-illustration {
  width: 176px;
  height: 176px;
  object-fit: cover;
  border-radius: 50%;
}

body.page-id-298 #main-content .coupon-item__thumb-illustration--gray {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

body.page-id-298 #main-content .coupon-item__thumb-deco {
  position: absolute;
  top: -2px;
  left: calc((100% - 48px) / 2);
}

body.page-id-298 #main-content .coupon-item__cta,
body.page-id-298 #main-content a.coupon-item__cta {
  display: flex;
  gap: 13px;
  box-sizing: border-box;
  padding: 10px 18px;
  min-width: 207px;
  border-radius: 40px;
  border: 1px solid #9C6E5E;
  outline: none;
  background-color: white;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  position: relative;
}

body.page-id-298 #main-content a.coupon-item__cta {
  font-weight: 600;
}

body.page-id-298 #main-content .coupon-item__cta:active {
  opacity: 0.7;
}

/* [081624TIN] Add message for copy coupon cta */
body.page-id-298 #main-content .coupon-item__cta::after {
  content: "Copied!";
  position: absolute;
  top: calc(50%);
  transform: translate(calc(100% + 5px), -50%);
  right: 0;
  box-shadow: 1px 1px 14px 1px #0001;
  z-index: 999;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
  background-color: #f9f0ed;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 9px;
  display: none;
}

body.page-id-298 #main-content .coupon-item__cta:focus::after {
  display: block;
}

/* [081624TIN] Add message for copy coupon cta - end */
body.page-id-298 #main-content .coupon-item .coupon-actions {
  display: flex;
  gap: 14px;
  width: 100%;
  margin-top: 40px;
  flex-direction: row;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .coupon-item .coupon-actions {
    flex-direction: column;
  }
}

body.page-id-298 #main-content .coupon-item .coupon-actions button {
  flex: 1;
  border-radius: 40px;
  border: 1px solid #9C6E5E;
  box-sizing: border-box;
  padding: 12px 18px;
  color: #9C6E5E;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
}

body.page-id-298 #main-content .coupon-item .coupon-actions button:active {
  opacity: 0.7;
}

/* [080724TIN] Update style for coupon code - end*/

/* [062624TIN] Override select2 style in my-account page */
body.page-id-298 #main-content .select2-container--default .select2-selection--single {
  /* [080725TIN] Update style for select */
  padding: 4px 0;
  box-sizing: border-box;
  border-radius: 8px;
  height: auto;
  border: 1px solid #aaa;
}

body.page-id-298 #main-content .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 20px;
  padding-right: 20px;
  /* [080624TIN] Update style for select*/
  font-size: 16px;
  color: #7D7D7D;
}

body.page-id-298 #main-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  /* [080725TIN] Update style for select */
  /* top: 10px; */
  right: 12px;
}

body.page-id-298 .select2-container--default .select2-results__option--highlighted[aria-selected],
body.page-id-298 .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #9C6E5E;
}

body.page-id-298 #main-content .tgwc-user-avatar a.button:hover {
  margin: 0;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .tgwc-user-avatar .dropzone {
    margin: 0 auto;
  }

  body.page-id-298 #main-content .tgwc-user-info {
    text-align: center;
  }

  body.page-id-298 #main-content .tgwc-user-avatar a.button:hover {
    margin: 0 auto;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    width: fit-content;
    /* overflow-x: auto;
    overflow-y: hidden; */
    width: 100%;
    min-width: fit-content;
    margin: 30px 0 45px;
    min-height: 30px;
    flex-wrap: wrap;
    gap: 16px 10px;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active {
    background-color: white;
    text-decoration: none;
  }
}

/* [071824TIN] Update style for tablet */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content .tgwc-user-avatar .dropzone {
    margin: 0 auto;
  }

  body.page-id-298 #main-content .tgwc-user-info {
    text-align: center;
  }

  body.page-id-298 #main-content .tgwc-user-avatar a.button:hover {
    margin: 0 auto;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    width: fit-content;
    /* overflow-x: auto;
    overflow-y: hidden; */
    width: 100%;
    min-width: fit-content;
    margin: 30px 0 45px;
    min-height: 30px;
    flex-wrap: wrap;
    gap: 16px 10px;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
  }

  /* [070424TIN] change sidebar style on mobile to grid */
  body.page-id-298 #main-content #tgwc-woocommerce .tgwc-woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active {
    background-color: white;
    text-decoration: none;
  }
}

.qr-membership-dialog .modal-content {
  width: 100%;
  min-width: 300px;
  border-radius: 18px;
  padding: 16px 16px 10px;
  box-sizing: border-box;
}

.qr-membership-dialog .modal-body {
  aspect-ratio: 1;
}

.qr-membership-dialog .modal-body img {
  max-width: 100%;
  width: 100%;
  display: block;
}

.qr-membership-dialog .modal-footer {
  justify-content: center;
}

.qr-membership-dialog .modal-footer .btn.btn-secondary {
  cursor: pointer;
  border-radius: 40px;
  border: 1px solid #9C6E5E;
  box-sizing: border-box;
  padding: 12px 18px;
  color: #9C6E5E;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  background-color: white;
}

.qr-membership-dialog .modal-footer .btn.btn-secondary:hover {
  border-color: #9C6E5E;
  background-color: #9C6E5E;
  color: white;
}

/* [062524TIN] Makeup main content - end*/

.dashboard {
  display: flex;
  gap: 1rem;
  min-height: 100dvh;
  background-color: white;
  padding: 1rem;
  box-sizing: border-box;
  flex-direction: row;
}

@media (max-width: 479px) {
  .dashboard {
    flex-direction: column;
  }
}

@media (min-width: 740px) and (max-width: 1023px) {
  .dashboard {
    flex-direction: column;
  }
}

.dashboard__sidebar {
  flex-basis: 200px;
  display: flex;
  flex-direction: column;
  background-color: #f4e6d1;
  padding: 0;
  border-radius: 0.4rem;
}

@media (max-width: 479px) {
  .dashboard__sidebar {
    display: none;
  }
}

@media (min-width: 740px) and (max-width: 1023px) {
  .dashboard__sidebar {
    display: none;
  }
}

.dashboard__sidebar-item {
  display: flex;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  padding: 1rem;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  align-items: center;
}

.dashboard__sidebar-item--active {
  background-color: #d7b379;
  color: white;
}

.dashboard__sidebar-item:hover {
  background-color: #d7b379;
  color: white;
}

.dashboard__sidebar-item span.material-symbols-outlined {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.dashboard__sidebar .profile {
  padding: 1rem;
}

.dashboard__sidebar .profile__name {
  font-size: 18px;
  font-weight: 600;
}

.dashboard__sidebar .profile__level {
  font-size: 14px;
  font-weight: 500;
  color: #d7b379;
}

.dashboard__profile {
  padding: 0;
  display: none;
}

@media (max-width: 479px) {
  .dashboard__profile {
    display: block;
  }
}

@media (min-width: 740px) and (max-width: 1023px) {
  .dashboard__profile {
    display: block;
  }
}

.dashboard__profile .profile-name {
  font-size: 18px;
  font-weight: 600;
}

.dashboard__profile .profile-level {
  font-size: 14px;
  font-weight: 500;
  color: #d7b379;
}

.dashboard__mobile-sidebar {
  display: none;
  position: sticky;
  top: 0;
  background-color: white;
  overflow-x: auto;
  scrollbar-width: none;
}

.dashboard__mobile-sidebar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 479px) {
  .dashboard__mobile-sidebar {
    display: flex;
  }
}

@media (min-width: 740px) and (max-width: 1023px) {
  .dashboard__mobile-sidebar {
    display: flex;
  }
}

.dashboard__mobile-sidebar-item {
  flex: 1 0 auto;
  color: inherit;
  text-decoration: none;
  padding: 1rem;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.dashboard__mobile-sidebar-item--active {
  border-bottom-color: #d7b379;
}

.dashboard__mobile-sidebar-item:hover {
  border-bottom-color: #d7b379;
}

.dashboard__content {
  flex: 1;
  display: flex;
  padding: 1rem;
  box-sizing: border-box;
  flex-direction: column;
  height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.dashboard .personal-field,
.dashboard .billing-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.dashboard .personal-field__name,
.dashboard .billing-field__name {
  font-size: 16px;
  font-weight: 500;
}

.dashboard .personal-field__input,
.dashboard .billing-field__input {
  font-size: 14px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
  outline: none;
  transition: all 0.2s;
  background-color: transparent;
}

.dashboard .personal-field__input:focus,
.dashboard .billing-field__input:focus {
  box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.0666666667);
  border-color: #ffe082;
}

.dashboard .personal-field__input:disabled,
.dashboard .billing-field__input:disabled {
  padding: 0;
  border: none;
  box-shadow: none;
}

.dashboard .personal-field__error,
.dashboard .billing-field__error {
  font-size: 12px;
  font-weight: 400;
}

.order-history-card {
  /*   padding: 1rem 0; */
  box-sizing: border-box;
  /*   border-bottom: 1px solid #d7b379; */
}

.order-history-card__name {
  /*   font-size: 18px; */
  font-size: 16px;
  font-weight: 500;
  /*   font-weight: 600; */
}

.order-history-card__price {
  font-size: 16px;
  /*   font-weight: 600; */
  font-weight: 500;
}

.summary-class-card {
  padding: 1rem 0;
  box-sizing: border-box;
  /* [061724TIN] change border color */
  border-bottom: 1px solid #fe9f3a;
}

.summary-class-card__name {
  font-size: 18px;
  font-weight: 600;
}

.summary-class-card__visted,
.summary-class-card__missed {
  font-size: 16px;
  font-weight: 500;
}

.summary-attendance-card {
  margin-top: 1rem;
  padding: 1rem 0;
  box-sizing: border-box;
  /* [061724TIN] change border color */
  border-bottom: 1px solid #fe9f3a;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-attendance-card__name {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

.summary-attendance-card__date,
.summary-attendance-card__status {
  font-size: 16px;
  font-weight: 500;
}

.summary-attendance-card__status--attended {
  color: #1976d2;
}

.summary-attendance-card__status--missed {
  color: #f4511e;
}

.summary-attendance-card__group {
  flex: 1 0 300px;
}

.earned-point-card {
  padding: 1rem 0;
  box-sizing: border-box;
  /* [061724TIN] change border color */
  border-bottom: 1px solid #fe9f3a;
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
  align-items: start;
}

.earned-point-card__class {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

.earned-point-card__point {
  font-size: 16px;
  font-weight: 500;
}

.woocommerce-page .dashboard button.button {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  border-radius: 0.4rem;
  outline: none;
  transition: all 0.2s;
  border: none;
  font-size: 14px;
  font-weight: 600;
  background-color: #d7b379;
  color: white;
  cursor: pointer;
}

.woocommerce-page .dashboard button.button:hover {
  border-radius: .4rem;
}

.woocommerce-page .dashboard button.button::after {
  display: none;
}

.dashboard .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dashboard fieldset {
  display: contents;
}

.class-history-item {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  padding: 1rem 0;
  border-bottom: 1px solid #d7b379;
  justify-content: space-between;
}

.class-history-item__right {
  flex-shrink: 0;
}

.class-history-item__name {
  font-size: 18px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s;
}

.class-history-item__name:hover {
  text-decoration: underline;
  cursor: pointer;
}

.student-item {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  padding: 1rem 0;
  border-bottom: 1px solid #d7b379;
  flex-direction: column;
  gap: 0.4rem;
}

.student-item__name {
  font-size: 18px;
  font-weight: 600;
}

.student-item__note,
.summary-attendance-card__note {
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: #edd6b0;
  font-size: 14px;
}

.dashboard h2 {
  margin: 2rem 0 .5rem;
}

body.page-id-298 #main-content .woocommerce button.woocommerce-button.button,
body.page-id-298 #main-content .woocommerce button.button,
body.page-id-298 #main-content .woocommerce button.woocommerce-button.button:hover,
body.page-id-298 #main-content .woocommerce button.button:hover,
body.page-id-298 #main-content #renew-membership,
.dashboard__button {
  border-radius: 40px;
  background: #9C6E5E;
  box-sizing: border-box;
  padding: 12px 20px;
  color: #FFF !important;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  border: none;
}

/* [052424TIN] update style for disabled status */
.dashboard__button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.instructor-summary__wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 1.5rem;
  background-color: #faf0e0;
  font-size: 14px;
  font-weight: 500;
}

.instructor-summary__field {
  display: flex;
  gap: 10px;
}

.instructor-summary__field-name {
  flex: 1;
}

/* [071624TIN] Update redeem section style */
/* [220524TIN] add style for redeem section */
body.page-id-298 #main-content .redeem-section {
  display: flex;
  gap: 35px;
  justify-content: space-between;
  flex-direction: column;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .redeem-section {
    gap: 27px;
  }
}

.redeem-section__point-count {
  color: #3D3D3D;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}

/* [071024TIN] Update style for redeem section */
.redeem-section__redeem {
  display: flex;
  /* gap: 60px; */
  gap: 16px;
  justify-content: space-between;
}

body.page-id-298 #main-content .redeem-section__button {
  background: #9C6E5E;
  box-sizing: border-box;
  padding: 12px;
  color: white;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  border: none;
  width: 118px;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
}

/* [052424TIN] add style for class-attendance-item */
.class-attendance-item {
  display: flex;
  gap: 10px;
  gap: 10px;
  box-sizing: border-box;
  padding: 2rem 0 1.5rem;
  /* [061724TIN] change border color */
  border-bottom: 1px solid #fe9f3a;
  flex-wrap: wrap;
}

.class-attendance-item .class-attendance-item__info {
  flex: 1;
  /* set flex-basis: 250px to line break on mobile */
  flex-basis: 250px;
}

.class-attendance-item .class-attendance-item__class {
  font-size: 24px;
}

.class-attendance-item button {
  border: none;
  background-color: #d7b379;
  color: white;
  box-sizing: border-box;
  padding: .5rem 1rem;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


.class-attendance-item .class-attendance-item__qr {
  display: none;
  box-sizing: border-box;
  padding: .5rem;
  box-shadow: 0 0 10px 1px #0003;
  border-radius: 10px;
}

.class-attendance-item .class-attendance-item__qr:has(canvas) {
  display: block;
}

/* [052424TIN] add style for class-attendance-item - end*/

/* [220524TIN] add style for redeem section - end*/

/* [061224TIN] Add more css for my account */
.order-history__id {
  font-size: 18px;
  font-weight: 600;
}

.order-history__items {
  padding: 8px;
  border: 1px solid #FF9800;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

#orders-tab {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

div[data-summary-class] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

div[data-attendance],
div[data-listpoint],
div[data-attendance-class] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* [071024TIN] Update css for date picker */
.custom-date-picker {
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  --adp-font-family: "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
  --adp-background-color-selected-other-month-focused: #9C6E5E40;
  --adp-background-color-selected-other-month: #9C6E5E30;
  --adp-accent-color: #9C6E5E;
  --adp-day-name-color: #ff9a19;
  --adp-day-name-color-hover: #9C6E5E30;
  --adp-cell-background-color-selected: #9C6E5E;
  --adp-cell-background-color-selected-hover: #9C6E5E50;
  --adp-cell-background-color-in-range: #9C6E5E30;
  --adp-cell-background-color-in-range-hover: #9C6E5E40;
  --adp-background-color-in-range: #9C6E5E30;
  --adp-background-color-in-range-focused: #9C6E5E40;
}

.custom-date-picker .air-datepicker-body--day-name {
  font-weight: 700;
}

.custom-date-picker .air-datepicker-cell.-current- {
  font-weight: 600;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .woocommerce-MyAccount-content input#date-range-picker {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  outline: none;
  flex-basis: 173px;
}

.date-picker-wrap {
  border-radius: 8px;
  border: 1px solid #AAA;
  background: #FFF;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  gap: 3px;
  align-items: center;
  min-width: 173px;
}

.date-picker-wrap__input {
  padding: 0;
}

.date-picker-wrap :focus-within {
  border: 1px solid #9C6E5E;
}

.checkin-history-filter {
  margin: 0 auto 26px;
  display: flex;
  gap: 11px;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #9C6E5E;
  flex-direction: row;
}

.checkin-history-filter__label {
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  flex: 1;
}

.checkin-history-filter__filter {
  display: flex;
  gap: 11px;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.checkin-history-filter .date-picker-wrap {
  border-radius: 8px;
  border: 1px solid #AAA;
  background: #FFF;
  padding: 8px;
  box-sizing: border-box;
}

.checkin-history-filter .cta {
  border-radius: 8px;
  background: var(--Color-2, #9C6E5E);
  border: none;
  padding: 6px 8px;
  box-sizing: border-box;
  min-width: 151px;
  color: var(--Color-5, #FAFAFA);
  font-family: "Segoe UI";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  display: flex;
  gap: 3px;
  justify-content: flex-start;
  align-items: center;
  flex-basis: 150px;
}

@media (max-width: 479px) {
  .checkin-history-filter {
    flex-direction: column;
    gap: 17px;
    align-items: flex-start;
  }

  .checkin-history-filter__label,
  .checkin-history-filter .date-picker-wrap,
  .checkin-history-filter #date-range-picker {
    width: 100%;
    max-width: 150px;
  }

  .checkin-history-filter .cta {
    width: 100%;
  }
}


/* [071024TIN] Update css for date picker - end*/

/* style for cta */
.cta {
  width: fit-content;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  box-sizing: border-box;
  padding: 8px 18px;
  background-color: transparent;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: #4e4e4e;
  cursor: pointer;
  transition: all 0.2s;
  background-color: white;
}

.cta:active {
  opacity: 0.7;
}

.cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .paginator>button,
.paginator>button {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  color: #7D7D7D;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .paginator>button.selected {
  color: #3D3D3D;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .paginator>button:hover {
  background-color: #ECD9D2;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .paginator>button:disabled {
  cursor: not-allowed;
  background-color: transparent;
}

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .paginator>button.paginator__dotted {
  background-color: transparent;
  cursor: default;
}

/* [070524TIN] Update sytle for wc form */
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .divider {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #3D3D3D;
  margin: 27px 0 35px;
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account label {
  display: flex;
  gap: 0;
  line-height: normal;
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account label .woocommerce-form-row__icon {
  width: 20px;
  height: auto;
  display: block;
}

/* [080725TIN] Hide default password icon of WooCommerce */
body.page-id-298 .woocommerce form.woocommerce-EditAccountForm.edit-account .show-password-input::before,
body.page-id-298 .woocommerce-page form.woocommerce-EditAccountForm.edit-account .show-password-input::before {
  display: none;
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .show-password-input::after {
  color: transparent;
  width: 20px;
  height: 14px;
  background-color: transparent;
  background-image: none;
  background-image: var(--visibility-icon);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  content: "";
  margin: 6px 8px 6px 0;
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .show-password-input.display-password::after {
  background-image: var(--visibility-off-icon);
}

body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .cancel-edit-btn {
  border-radius: 40px;
  background-color: transparent;
  box-sizing: border-box;
  padding: 12px 20px;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  border: 1px solid #9C6E5E;
  color: #9C6E5E;
  line-height: normal;
  cursor: pointer;
}

/* [070524TIN] Update sytle for wc form - end*/

/* [070824TIN] add style for gretting section in profile */
body.page-id-298 #main-content .profile-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
}

/* [071024TIN] Update style for profile summary */
@media (max-width: 479px) {
  body.page-id-298 #main-content .profile-summary {
    gap: 9px 12px;
  }
}

body.page-id-298 #main-content .profile-summary--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

body.page-id-298 #main-content .profile-summary--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

body.page-id-298 #main-content .profile-summary__item {
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

body.page-id-298 #main-content .profile-summary .tab-heading {
  margin: 0;
}

body.page-id-298 #main-content .profile-summary__card {
  border-radius: 8px;
  background: #F0D7CE;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 6px;
}

/* [071024TIN] Update style for profile summary */
@media (max-width: 479px) {
  body.page-id-298 #main-content .profile-summary__card {
    padding: 10px;
  }
}

body.page-id-298 #main-content .profile-summary__field-value {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
}

/* [071024TIN] Update style for profile summary */
@media (max-width: 479px) {
  body.page-id-298 #main-content .profile-summary__field-value {
    font-size: 24px;
  }
}

body.page-id-298 #main-content .profile-summary__field-name {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

/* [071024TIN] Update style for profile summary */
@media (max-width: 479px) {
  body.page-id-298 #main-content .profile-summary__field-name {
    font-size: 11px;
  }
}

/* [070824TIN] add style for gretting section in profile - end*/

/* [062824TIN] add breakpoint for mobile, prevent overflow when gap so big */
/* @media (max-width: 479px) {
  .redeem-section__redeem {
    gap: 16px;
    justify-content: space-between;
  }
} */

.logged-in.woocommerce-account.tgwc-woocommerce-customize-my-account #tgwc-woocommerce.woocommerce .woocommerce-MyAccount-content .redeem-section__redeem input[name="coupon"] {
  padding: 11px 14px 11px 14px;
  border-radius: 8px;
  /* border: 1px solid #B2B2B2; */
  border: none;
  background: #FFF;
  color: #7D7D7D;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  flex: 1;
  /* [062824TIN] set min width to prevent overflow */
  min-width: 150px;
  color: #1A1A1A;

  /* [071024TIN] Update style for redeem section */
  border: 1px solid #B2B2B2;
}

/* [220524TIN] add style for redeem section - end*/

/* [070824TIN]add style for payment tab */
body.page-id-298 #main-content .payment-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-id-298 #main-content .payment-filter__label {
  display: flex;
  align-items: center;
  color: #3D3D3D;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

body.page-id-298 #main-content .payment-filter .search-box {
  display: flex;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: #FFF;
  width: calc((100% - 47px) / 2);
}

body.page-id-298 #main-content .payment-filter .search-box__icon {
  width: 24px;
  height: 24px;
  margin: 11px;
  margin-left: 16px;
}

body.page-id-298 #main-content .payment-filter .search-box__input,
body.page-id-298 #main-content #tgwc-woocommerce.woocommerce .woocommerce-MyAccount-content .payment-filter .search-box__input {
  width: 100%;
  border: none;
  background-color: transparent;
  outline: none;
  box-sizing: border-box;
  padding: 11px 0;
  padding-right: 16px;
  font-size: 16px;
  color: #3D3D3D;
  border-style: none;
}

/* [070824TIN]add style for payment tab - end*/

/* [070924TIN] add mobile container for my-account */
.mobile-container {
  padding: 0;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
}

@media (max-width: 479px) {
  .mobile-container {
    border-radius: 8px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.5);
    padding: 35px 7px;
  }
}

/* [071824TIN] Add tablet style for mobile-container */
@media (min-width: 480px) and (max-width: 785px) {
  .mobile-container {
    border-radius: 8px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.5);
    padding: 35px 16px;
  }
}

/* [070924TIN] add mobile container for my-account - end */

/* change padding of page-row in my-account */
body.page-id-298 #main-content .page-row {
  padding: 0 7px;
}

/* hidden element by screen resolution */
@media (max-width: 479px) {
  .hide-on-mobile {
    display: none;
  }
}

@media (min-width: 786px) and (max-width: 1023px) {
  .hide-on-desktop {
    display: none;
  }
}

@media (min-width: 480px) and (max-width: 785px) {
  .hide-on-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-on-hug-desktop {
    display: none;
  }
}

/* style for qr card in instructor checkin/out */
body.page-id-298 #main-content .qr-card {
  border-radius: 18px;
  background: white;
  box-sizing: border-box;
  padding: 29px 29px 51px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 392px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .qr-card {
    margin: 0 auto;
  }
}

body.page-id-298 #main-content .qr-card__top-title {
  color: #878787;
  text-align: center;
  font-family: "Segoe UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .qr-card__bottom-title {
  color: #3D3D3D;
  text-align: center;
  font-family: "Segoe UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

body.page-id-298 #main-content .qr-card__qr-frame {
  border-radius: 18px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 20px;
  width: 216px;
  height: 216px;
}

body.page-id-298 #main-content .qr-card__image {
  width: 100%;
  height: auto;
}

/* spacing for sections in my-account content panel */
body.page-id-298 #main-content .section-divider {
  background-color: transparent;
  height: 54px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .section-divider {
    height: 17px;
  }
}

/* [071024TIN] overide css for avatar uploader thumb */
body.page-id-298 .dropzone .dz-preview.dz-image-preview {
  background-color: transparent;
}

body.page-id-298 .dropzone .dz-preview {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.page-id-298 .dropzone .dz-preview .dz-image {
  height: 96px;
  width: 96px;
  border-radius: 50%;
}

/* [071024TIN] overide css for avatar uploader thumb - end*/

/* [071024TIN] overide css for remove avatar button */
body.page-id-298 .tgwc-user-avatar .dropzone .tgwc-user-avatar-image-wrap .tgwc-remove-image {
  color: #3D3D3D;
  right: 0;
  top: 0;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  border: 1px solid #FFF;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background-position: center;
  background-repeat: no-repeat;
}

body.page-id-298 .tgwc-user-avatar .dropzone .tgwc-user-avatar-image-wrap .tgwc-remove-image.tgwc-display-none {
  display: none;
}

body.page-id-298 .tgwc-user-avatar .dropzone .tgwc-user-avatar-image-wrap .tgwc-remove-image .svg-inline--fa.fa-w-16 {
  width: 20px;
  height: auto;
}

/* [071024TIN] overide css for remove avatar button - end */

/* [071224TIN] Add style for myaccount popup */
.myaccount-popup {
  position: fixed;
  /* [080624TIN] Update z-index */
  z-index: 999999;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myaccount-popup__content {
  max-width: 100%;
  max-height: 90dvh;
  position: relative;
}

.myaccount-popup__close {
  position: absolute;
  top: -12px;
  right: -12px;
  height: 32px;
  width: 32px;
  box-sizing: border-box;
  border: 1.5px solid white;
  background-color: #9C6E5E;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* [071224TIN] Add style for myaccount popup - end */

/* [071224TIN] Add style for myaccount dropdown  */
body.page-id-298 #main-content .myaccount-dropdown {
  display: block;
  width: 100%;
  position: relative;
}

body.page-id-298 #main-content .myaccount-dropdown__label {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #AAA;
  background: white;
  display: flex;
  padding: 9px 10.037px 9px 11px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .myaccount-dropdown__label {
    padding: 9px 5px;
  }
}

body.page-id-298 #main-content .myaccount-dropdown__label-text {
  flex: 1;
  color: #AAA;
  font-family: "Segoe UI";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

body.page-id-298 #main-content .myaccount-dropdown__label-spin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  padding: 0 2px;
}

body.page-id-298 #main-content .myaccount-dropdown__menu {
  display: none;
  position: absolute;
  width: 100%;
  height: auto;
  top: calc(100% + 2px);
  left: 0;
  border-radius: 8px;
  border: 1px solid #AAA;
  background: white;
  padding: 5px 10.037px 15px 11px;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  transition: all 0.2s;
  z-index: 1;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .myaccount-dropdown__menu {
    padding: 10px 7px;
  }
}

body.page-id-298 #main-content .myaccount-dropdown__menu-item {
  cursor: pointer;
  user-select: none;
  padding: 5px 9px;
  box-sizing: border-box;
  color: #747474;
  font-family: "Segoe UI";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  border-radius: 2px;
  transition: all 0.2s;
}

body.page-id-298 #main-content .myaccount-dropdown__menu-item:hover,
body.page-id-298 #main-content .myaccount-dropdown__menu-item--selected {
  background-color: #F7E9E4;
}

body.page-id-298 #main-content .myaccount-dropdown:focus .myaccount-dropdown__menu {
  display: flex;
}

/* [071224TIN] Add style for myaccount dropdown - end */

/* [080224TIN] Add style for blog tab filter */
/* [071224TIN] Add style for class attendance filter, class dashboard filter */
body.page-id-298 #main-content .class-attendance-filter,
body.page-id-298 #main-content .class-dashboard-filter,
body.page-id-298 #main-content .blog-filter {
  display: flex;
  border-bottom: 1px solid #AAA;
  gap: 16px;
  align-items: center;
}

/* [080224TIN] Add style for blog tab filter */
body.page-id-298 #main-content .class-attendance-filter__tabs,
body.page-id-298 #main-content .class-dashboard-filter__tabs,
body.page-id-298 #main-content .blog-filter__tabs {
  flex: 1;
}

/* [080224TIN] Add style for blog tab filter */
body.page-id-298 #main-content .class-attendance-filter__sort,
body.page-id-298 #main-content .class-dashboard-filter__sort,
body.page-id-298 #main-content .blog-filter__sort {
  flex-basis: 205px;
}

@media (max-width: 479px) {

  /* [080224TIN] Add style for blog tab filter */
  body.page-id-298 #main-content .class-attendance-filter__sort,
  body.page-id-298 #main-content .class-dashboard-filter__sort,
  body.page-id-298 #main-content .blog-filter__sort {
    flex-basis: 110px;
  }
}

body.page-id-298 #main-content .filter_tabs {
  color: #878787;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  display: flex;
  gap: 50px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .filter_tabs {
    gap: 25px;
  }
}

body.page-id-298 #main-content .filter_tabs__item {
  padding: 15px 0;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}

body.page-id-298 #main-content .filter_tabs__item:has(input:checked) {
  color: #3D3D3D;
  border-bottom-color: #3D3D3D;
}

/* [071224TIN] Add style for class attendance filter, class dashboard filter - end */

/* [071224TIN] Add style for class attendance tab */
body.page-id-298 #main-content #class-attendance #attendance-data-list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-attendance #attendance-data-list {
    margin-top: 17px;
    gap: 17px;
  }
}

body.page-id-298 #main-content #class-attendance .paginator {
  margin: 10px 0 38px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-attendance .paginator {
    margin: 17px 0 22px;
  }
}

/* [071224TIN] Add style for class attendance tab - end */

/* [071224TIN] Add style for class attendance card */
.class-attendance-card {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 11px 30px;
  display: flex;
  gap: 21px;
}

@media (max-width: 479px) {
  .class-attendance-card {
    padding: 21px 14px;
  }
}

.class-attendance-card__thumb {
  flex-basis: 150px;
  width: 150px;
  display: block;
  border-radius: 18px;
  border: 1px solid #9C6E5E;
  height: 150px;
  object-fit: cover;
}

@media (max-width: 479px) {
  .class-attendance-card__thumb {
    display: none;
  }
}

.class-attendance-card__info {
  display: grid;
  grid-template-areas: "name id" "date date" "lesson lesson" "progress qr-cta";
  row-gap: 4px;
  column-gap: 16px;
  justify-content: space-between;
  flex: 1;
  max-width: 100%;
}

@media (max-width: 479px) {
  .class-attendance-card__info {
    grid-template-areas: "name name name" "date date date" "lesson id qr-cta" "progress progress qr-cta";
    row-gap: 6px;
    column-gap: 6px;
    grid-template-columns: max-content max-content 1fr;
  }
}

.class-attendance-card__name {
  grid-area: name;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 26px;
}

@media (max-width: 479px) {
  .class-attendance-card__name {
    font-size: 12px;
    height: 16px;
  }
}

.class-attendance-card__date {
  grid-area: date;
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

@media (max-width: 479px) {
  .class-attendance-card__date {
    gap: 0px;
  }
}

.class-attendance-card__date-item {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 479px) {
  .class-attendance-card__date-item {
    font-size: 12px;
    flex: auto;
  }
}

.class-attendance-card__date-item svg {
  width: 24px;
  height: auto;
}

@media (max-width: 479px) {
  .class-attendance-card__date-item svg {
    width: 16px;
  }
}

.class-attendance-card__lesson-count {
  grid-area: lesson;
  display: flex;
  border-radius: 5px;
  border: 1px solid #AAA;
  box-sizing: border-box;
  padding: 4px 6px;
  width: fit-content;
  align-items: center;
  gap: 3px;
  color: #AAA;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 479px) {
  .class-attendance-card__lesson-count {
    padding: 2px 4px;
    margin: 0;
  }
}

.class-attendance-card__lesson-count strong {
  color: #3D3D3D;
  font-weight: 600;
}

.class-attendance-card__progress-bar {
  grid-area: progress;
  position: relative;
  width: 300px;
  border-radius: 4px;
  background: #D9D9D9;
  height: 25px;
  align-self: center;
}

@media (max-width: 479px) {
  .class-attendance-card__progress-bar {
    margin-top: 6px;
    width: 100%;
    max-width: 227px;
  }
}

.class-attendance-card__progress-bar__completed {
  position: absolute;
  height: 100%;
  border-radius: 4px;
  background: #0CBC8B;
  top: 0;
  left: 0;
  z-index: 1;
}

.class-attendance-card__progress-bar__text {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  padding: 9px 8px;
}

.class-attendance-card__id {
  grid-area: id;
  border-radius: 5px;
  border: 1px solid #AAA;
  box-sizing: border-box;
  padding: 11px 15px;
  color: #AAA;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 0.8;
  width: 125px;
  justify-self: end;
}

@media (max-width: 479px) {
  .class-attendance-card__id {
    padding: 11px 6px;
    width: 100%;
    max-width: 106px;
  }
}

.class-attendance-card__qr-cta {
  grid-area: qr-cta;
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 15px;
  min-width: 156px;
  text-align: center;
  color: #9C6E5E;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  align-self: center;
  cursor: pointer;
  transition: all 0.2s;
  width: 156px;
  justify-self: end;
}

@media (max-width: 479px) {
  .class-attendance-card__qr-cta {
    height: 100%;
    margin-left: 6px;
    padding: 8px;
    min-width: auto;
    width: 100%;
    max-width: 125px;
  }
}

.class-attendance-card__qr-cta:active {
  opacity: 0.7;
}

.class-attendance-card__status {
  margin-top: 8px;
  grid-area: progress;
  padding: 6px 19px;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  width: fit-content;
  min-width: 156px;
}

.class-attendance-card__status--pass {
  background: #DDFFF3;
  color: #0CBC8B;
}

.class-attendance-card__status--absent {
  background-color: #fdd;
  color: #F12222;
}

/* [071224TIN] Add style for class attendance card - end */

/* [071524TIN] Add dashboard summary style */
body.page-id-298 #main-content .dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  box-sizing: border-box;
  padding: 0;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .dashboard-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 17px;
  }
}

body.page-id-298 #main-content .dashboard-summary__card {
  border-radius: 8px;
  background: #F0D7CE;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 6px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .dashboard-summary__card {
    padding: 10px;
  }
}

body.page-id-298 #main-content .dashboard-summary__field-value {
  color: #1D2026;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 24px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .dashboard-summary__field-value {
    font-size: 24px;
  }
}

body.page-id-298 #main-content .dashboard-summary__field-name {
  color: #4E5566;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  font-style: normal;
  line-height: 140%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .dashboard-summary__field-name {
    font-size: 11px;
  }
}

/* [071524TIN] Add dashboard summary style - end */

/* [071524TIN] Add style for class dashboard tab */
body.page-id-298 #main-content #class-dashboard h3.tab-heading {
  margin-bottom: 30px;
  margin-left: 27px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard h3.tab-heading {
    margin: 0;
    margin-bottom: 19px;
  }
}

body.page-id-298 #main-content #class-dashboard .dashboard-summary {
  margin-bottom: 30px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard .dashboard-summary {
    margin-bottom: 17px;
  }
}

body.page-id-298 #main-content #class-dashboard .class-dashboard-filter {
  box-sizing: border-box;
  margin: 0 27px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard .class-dashboard-filter {
    margin: 0;
    margin-bottom: 17px;
  }
}

body.page-id-298 #main-content #class-dashboard .class-dashboard-filter .class-dashboard-filter__sort {
  flex-basis: 205px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard .class-dashboard-filter .class-dashboard-filter__sort {
    flex-basis: 104px;
  }
}

body.page-id-298 #main-content #class-dashboard .desktop-table-heading {
  display: flex;
  margin: 19px auto 12px;
  gap: 16px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard .desktop-table-heading {
    display: none;
  }
}

body.page-id-298 #main-content #class-dashboard .desktop-table-heading>* {
  flex: 1;
  box-sizing: border-box;
}

body.page-id-298 #main-content #class-dashboard #class-history-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #class-dashboard #class-history-list {
    gap: 17px;
  }
}

body.page-id-298 #main-content #class-dashboard .paginator {
  margin: 17px 0 22px;
}

/* [071524TIN] Add style for class dashboard tab - end */
/* [071524TIN] Add style for class history card */
body.page-id-298 #main-content .class-history-card {
  box-sizing: border-box;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  display: grid;
  gap: 0 25px;
  grid-template-columns: minmax(auto, 535px) auto auto;
  grid-template-areas: "info join-count cta" "join-list join-list join-list";
  align-items: center;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card {
    gap: 0;
    grid-template-areas: "info info" "join-count cta" "join-list join-list";
    grid-template-columns: auto 1fr;
    place-items: start;
  }
}

body.page-id-298 #main-content .class-history-card__info {
  grid-area: info;
  box-sizing: border-box;
  padding: 16px 16px 16px 45px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__info {
    padding: 18px 14px 14px;
    gap: 13px;
  }
}

body.page-id-298 #main-content .class-history-card__attendance {
  grid-area: join-count;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 9px;
  background: #F7E9E4;
  width: 213px;
  padding: 8px 33px;
  display: flex;
  gap: 29px;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__attendance {
    padding: 12px;
    gap: 10px;
    width: fit-content;
    align-items: flex-end;
    margin: 0 10px 14px 18px;
  }
}

body.page-id-298 #main-content .class-history-card__attendance__count {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: flex-end;
  align-items: center;
  color: #3D3D3D;
  text-align: center;
  font-family: "Segoe UI";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__attendance__count {
    flex-direction: row;
    font-size: 12px;
    align-items: flex-end;
  }
}

body.page-id-298 #main-content .class-history-card__attendance__count strong {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 600;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__attendance__count strong {
    font-size: 16px;
  }
}

body.page-id-298 #main-content .class-history-card__attendance svg {
  margin: 5px 7px;
  width: 10px;
  height: auto;
  color: black;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__attendance svg {
    margin: 0;
    width: 16px;
    color: #878787;
  }
}

body.page-id-298 #main-content .class-history-card__dropdown-btn {
  grid-area: cta;
  margin-right: 25px;
  width: 38px;
  height: 38px;
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.page-id-298 #main-content .class-history-card__dropdown-btn svg {
  transition: transform 0.4s;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__dropdown-btn {
    border-radius: 8px;
    border: 1px solid #3D3D3D;
    height: 46px;
    width: 46px;
  }
}

body.page-id-298 #main-content .class-history-card__dropdown-btn--up svg {
  transform: rotate(180deg);
}

body.page-id-298 #main-content .class-history-card__dropdown-btn--down svg {
  transform: rotate(0);
}

body.page-id-298 #main-content .class-history-card__join-history {
  grid-area: join-list;
  box-sizing: border-box;
  padding: 22px 45px 27px;
  border-top: 1px solid #9C6E5E;
  width: 100%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__join-history {
    padding: 18px 14px;
  }
}

body.page-id-298 #main-content .class-history-card__name {
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__name {
    font-size: 12px;
  }
}

body.page-id-298 #main-content .class-history-card__date {
  display: flex;
  gap: 35px;
  justify-content: flex-start;
  align-items: center;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__date {
    font-size: 12px;
    gap: 21px;
  }
}

body.page-id-298 #main-content .class-history-card__date-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__date-item {
    gap: 5px;
  }
}

body.page-id-298 #main-content .class-history-card__date-item svg {
  width: 24px;
  height: auto;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card__date-item svg {
    width: 16px;
  }
}

body.page-id-298 #main-content .class-history-card .join-history {
  width: fit-content;
  display: flex;
  gap: 13px;
  flex-direction: column;
  box-sizing: border-box;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card .join-history {
    padding: 0;
    padding-right: 13px;
    width: 100%;
  }
}

body.page-id-298 #main-content .class-history-card .join-history-item {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card .join-history-item {
    gap: 16px;
    justify-content: space-between;
  }
}

body.page-id-298 #main-content .class-history-card .join-history-item__user {
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .class-history-card .join-history-item__user strong {
  font-weight: 700;
}

body.page-id-298 #main-content .class-history-card .join-history-item__date {
  border-radius: 5px;
  background: #F7E9E4;
  box-sizing: border-box;
  display: flex;
  gap: 4px;
  padding: 4px 24px;
  justify-content: flex-start;
  align-items: center;
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .class-history-card .join-history-item__date {
    padding: 4px 6px 4px 10px;
    gap: 9px;
  }
}

body.page-id-298 #main-content .class-history-card .join-history-item__date svg {
  width: 14px;
  height: auto;
}

/* [071524TIN] Add style for class history card - end */

/* [071524TIN] Add style for mobile navigation */
body.page-id-298 #main-content .mobile-navigation {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 19px 6px 30px;
  justify-content: center;
}

body.page-id-298 #main-content .mobile-navigation__selected-tab {
  display: flex;
  max-width: 312px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px;
  padding-right: 23px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-transform: capitalize;
  color: #878787;
  font-family: "Segoe UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  border-radius: 8px;
  border: 1px solid #F7E9E4;
  background: white;
  margin: 0 auto;
  z-index: 4;
}

body.page-id-298 #main-content .mobile-navigation__menu-backdrop {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  left: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
  display: none;
}

body.page-id-298 #main-content .mobile-navigation__selected-tab:focus+.mobile-navigation__menu-backdrop,
body.page-id-298 #main-content .mobile-navigation__menu-backdrop:has(.bottom-menu:hover) {
  display: block;
}

body.page-id-298 #main-content .mobile-navigation__bottom-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 6px;
}

body.page-id-298 #main-content .mobile-navigation__bottom-menu .bottom-menu {
  border-radius: 14px 14px 0px 0px;
  background: rgb(113, 82, 71);
  box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 12px 28px 27px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #FAFAFA;
  font-family: "Segoe UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

body.page-id-298 #main-content .mobile-navigation__bottom-menu .bottom-menu__handle {
  height: 4px;
  width: 72px;
  margin: 0 auto 13px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.5);
}

body.page-id-298 #main-content .mobile-navigation__bottom-menu .bottom-menu__link {
  text-decoration: none;
  color: inherit;
  text-transform: none;
  box-sizing: border-box;
  padding: 7px 11px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

body.page-id-298 #main-content .mobile-navigation__bottom-menu .bottom-menu__link svg {
  width: 24px;
  height: auto;
}

body.page-id-298 #main-content .mobile-navigation .breadcrumb__fragment {
  color: #3D3D3D;
  text-decoration: none;
}

/* [071524TIN] Add style for mobile navigation - end */

/* [071624TIN] Add style for profile type list */

body.page-id-298 #main-content .profile-type-list,
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .profile-type-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-id-298 #main-content .profile-type-list .profile-type,
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .profile-type-list .profile-type {
  display: flex;
  gap: 15px;
  box-sizing: border-box;
  padding: 11px 15px;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: white;
  user-select: none;
  cursor: pointer;
  margin: 0;
}

body.page-id-298 #main-content .profile-type-list .profile-type__icon,
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .profile-type-list .profile-type__icon {
  width: 24px;
  height: auto;
  fill: white;
  stroke: #28303F;
  transition: all 0.2s;
}

body.page-id-298 #main-content .profile-type-list .profile-type:has(input:checked) .profile-type__icon,
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .profile-type-list .profile-type:has(input:checked) .profile-type__icon {
  fill: #25C548;
  stroke: white;
}

body.page-id-298 #main-content .profile-type-list .profile-type__label,
body.page-id-298 #main-content .woocommerce-EditAccountForm.edit-account .profile-type-list .profile-type__label {
  color: #1A1A1A;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

/* [071624TIN] Add style for profile type list - end */

/* [071624TIN] Update payment history style */
body.page-id-298 #main-content #payment-history .payment-filter {
  margin: 27px 0;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #payment-history .payment-filter {
    margin: 9px 0 17px;
  }
}

/* [071824TIN] Update tablet style */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #payment-history .payment-filter {
    margin: 9px 0 17px;
  }
}

body.page-id-298 #main-content #payment-history .heading {
  margin: 0;
  color: #3D3D3D;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #payment-history .heading {
    margin-bottom: 17px;
  }
}

/* [071824TIN] Update tablet style */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #payment-history .heading {
    margin-bottom: 17px;
  }
}

body.page-id-298 #main-content #payment-history .order-history-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

body.page-id-298 #main-content #payment-history .paginator {
  margin: 25px 0;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #payment-history .paginator {
    margin: 17px auto 27px;
  }
}

/* [071824TIN] Update tablet style */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #payment-history .paginator {
    margin: 17px auto 27px;
  }
}

body.page-id-298 #main-content .order-history-card {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: #3D3D3D;
}

body.page-id-298 #main-content .order-history-card__date {
  font-family: "Segoe UI";
  font-size: 12px;
  font-weight: 600;
  line-height: 140%;
}

body.page-id-298 #main-content .order-history-card__title {
  font-family: "Segoe UI";
  font-size: 12px;
  font-weight: 600;
  line-height: 140%;
}

body.page-id-298 #main-content .order-history-card__price {
  font-family: "Segoe UI";
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .order-history-card__action {
  display: flex;
  gap: 23px;
}

body.page-id-298 #main-content .order-history-card__button {
  height: 28px;
  width: 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5px solid #3D3D3D;
  background-color: transparent;
  border-radius: 3px;
  padding: 0;
}

body.page-id-298 #main-content .order-history-card__button svg {
  width: 100%;
  height: auto;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content .payment-filter .search-box {
    width: 100%;
  }
}

@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content .payment-filter .search-box {
    width: 100%;
  }
}

/* [071624TIN] Update payment history style - end */

/* [071624TIN] Update redeem history style */
body.page-id-298 #main-content #redeem-history .sub-heading {
  margin: 23px 0 17px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #redeem-history .sub-heading {
    margin: 17px 0;
  }
}

body.page-id-298 #main-content #redeem-history .redeem-expired,
body.page-id-298 #main-content #redeem-history .redeem-code-button {
  border-radius: 6px;
  border: 1px solid #3D3D3D;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 12px;
  font-weight: 700;
  line-height: 140%;
  display: flex;
  padding: 11px 14px;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: fit-content;
  min-width: 137px;
  background-color: white;
  box-sizing: border-box;
}

@media (max-width: 479px) {

  body.page-id-298 #main-content #redeem-history .redeem-expired,
  body.page-id-298 #main-content #redeem-history .redeem-code-button {
    font-weight: 700;
    font-size: 14px;
  }
}

body.page-id-298 #main-content #redeem-history .redeem-code-button {
  color: #9C6E5E;
  border-color: #9C6E5E;
  transition: all .2s;
  cursor: pointer;
  /* [090524TIN] Add tooltip for copy */
  position: relative;
}

/* [090524TIN] Add animation for click */
body.page-id-298 #main-content #redeem-history .redeem-code-button:active {
  opacity: .8;
}

/* [090524TIN] Add tooltip for copy */
body.page-id-298 #main-content #redeem-history .redeem-code-button::after {
  content: "Copied!";
  position: absolute;
  top: calc(50%);
  transform: translate(calc(100% + 5px), -50%);
  right: 0;
  box-shadow: 1px 1px 14px 1px #0001;
  z-index: 999;
  background-color: #9C6E5E;
  color: white;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 16px;
  display: none;
}

/* [090524TIN] Add tooltip for copy */
body.page-id-298 #main-content #redeem-history .redeem-code-button:focus::after {
  display: block;
}


body.page-id-298 #main-content .redeem-history-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

body.page-id-298 #main-content .redeem-history-card {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  display: flex;
  padding: 18px 14px;
  flex-direction: column;
  align-items: flex-start;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

/* [071624TIN] Update redeem history style - end */

/* Fix .breadcrumb be override by bootstrap */
body.page-id-298 #main-content .breadcrumb {
  background-color: transparent;
  margin: 0;
  padding: 0;
  display: inline;
}

/* [071624TIN] Add style for membership card */
body.page-id-298 #main-content .membership-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-id-298 #main-content .membership-history-card {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  display: flex;
  padding: 18px 14px;
  flex-direction: column;
  align-items: flex-start;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content .membership-history-card .active {
  color: #0CBC8B;
}

/* [071624TIN] Add style for membership card - end*/

/* [071824TIN] Add style for notice in myaccount */
.myaccount-notices-wrap {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.myaccount-notices-wrap .myaccount-notice {
  background-color: #FAFAFA;
  display: flex;
  gap: 16px;
  box-sizing: border-box;
  padding: 6px 13px 6px 16px;
  justify-content: flex-start;
  align-items: start;
}

.myaccount-notices-wrap .myaccount-notice__icon,
.myaccount-notices-wrap .myaccount-notice__close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  flex-shrink: 0;
}

.myaccount-notices-wrap .myaccount-notice__message {
  color: #000;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  flex: 1;
  align-self: center;
}

.myaccount-notices-wrap .myaccount-notice__sub-messages {
  font-size: 12px;
  padding-top: 8px;
  display: flex;
  gap: 4px 10px;
  flex-wrap: wrap;
}

.myaccount-notices-wrap .myaccount-notice:has(input:checked) {
  display: none;
}

/* [071824TIN] Add style for notice in myaccount - end  */

/* Hide deafult notices wrap of WC */
/* 092410LH #1196 [website][login] No message for invalid input when login to myaccount */
body.page-id-298.logged-in #main-content #left-area .woocommerce-notices-wrapper {
  display: none;
}

/* [073024TIN] Add style for book appointment form */
.book-appointment-form {
  /* display: flex;
  padding: 20px;
  box-sizing: border-box;
  width: 90vw;
  max-width: 800px;
  background-color: white;
  border-radius: 18px;
  max-height: 90vh;
  overflow-y: auto; */
  /* [073124TIN] Update style for book appointment form */
  display: flex;
  /* padding: 20px 0; */
  /* [081224TIN] Change book appointment wrap to old popup */
  box-sizing: border-box;
  padding: 20px;
  box-sizing: border-box;
  width: 90vw;
  max-width: 800px;
  background-color: white;
  border-radius: 18px;
  /* [082224TIN] Fix overflow on mobile */
  max-height: 90vh;
  overflow-y: auto;
}

.book-appointment-form form {
  width: 100%;
}

.book-appointment-form fieldset {
  width: 100%;
  display: contents;
}

.book-appointment-form__wrap {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.book-appointment-form__field-group {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

@media (min-width: 480px) and (max-width: 785px) {
  .book-appointment-form__field-group {
    flex-direction: column;
  }
}

@media (max-width: 479px) {
  .book-appointment-form__field-group {
    flex-direction: column;
  }
}

.book-appointment-form__field-group>* {
  flex: 1;
}

.book-appointment-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* [073124TIN] Update style for book appointment form */
.book-appointment-form__text-field,
input[type="text"].book-appointment-form__text-field,
input[type="email"].book-appointment-form__text-field {
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  padding: 10px 15px;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.book-appointment-form__label {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.book-appointment-form__sub-label {
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 3px;
}

/* [073124TIN] Update style for book appointment form */
.book-appointment-form__label--required {
  font-size: 14px;
  color: #747474;
}

.book-appointment-form__radio {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.book-appointment-form__textarea {
  resize: none;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  height: 130px;
  padding: 10px 15px;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.book-appointment-form__textarea:focus {
  outline-color: #3D3D3D;
  outline-width: 1px;
}

/* [073124TIN] Update style for book appointment form */
.book-appointment-form__submit {
  /* border-radius: 8px; */
  border-radius: 28px;
  border: none;
  /* border: 1px solid #B2B2B2; */
  background: #9C6E5E;
  color: white;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  padding: 10px 25px;
  box-sizing: border-box;
  width: fit-content;
  /* margin: 0 auto; */
}

.book-appointment-form .loading {
  border-radius: 18px;
  /* [073124TIN] Update style for book appointment form */
  position: fixed;
}

/* [073024TIN] Add style for book appointment form - end */

/* [073024TIN] Update style for mobile event calendar */
.mobile-calendar .mobile-calendar-event__button {
  border-radius: 8px;
  background: transparent;
  color: #9C6E5E;
  border: 1px solid #9C6E5E;
  font-family: "Segoe UI";
  font-size: 12px;
  font-weight: 600;
  line-height: 140%;
  padding: 5px 10px;
}

/* [073024TIN] Update style for mobile event calendar - end */

/* [073024TIN] Add style file input in book appointment */
.book-appointment-form__file-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  border-radius: 18px;
  border: 2px dashed #B2B2B2;
}

.book-appointment-form .file-placeholder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  cursor: pointer;
}

.book-appointment-form .file-placeholder__button {
  width: 40px;
  height: 40px;
  background-color: white;
  color: #3D3D3D;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

/* [073024TIN] Add style file input in book appointment - end */

/* [080224TIN] Add style for myaccount blog */
body.page-id-298 #main-content #blog-tab {
  max-width: 562px;
}

body.page-id-298 #main-content #blog-tab .blog-filter__sort {
  flex-basis: 144px;
}

body.page-id-298 #main-content #blog-tab #newsfeed {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 19px;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card {
  border-radius: 8px;
  background: white;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__header {
  padding: 17px 20px 12px;
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

/* [050824TIN] Update style for myaccount blog */
@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__header {
    padding: 10px 13px 8px;
  }
}

/* [050824TIN] Update style for myaccount blog */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__header {
    padding: 10px 13px 8px;
  }
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__title {
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 25px;
  font-weight: 600;
  line-height: 140%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__view {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__content {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [050824TIN] Update style for myaccount blog */
@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__content {
    margin-bottom: 12px;
    padding: 0 13px;
  }
}

/* [050824TIN] Update style for myaccount blog */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__content {
    margin-bottom: 12px;
    padding: 0 13px;
  }
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__image {
  width: 100%;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px;
  box-sizing: border-box;
  gap: 11px;
}

/* [050824TIN] Update style for myaccount blog */
@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__footer {
    padding: 12px 13px 9px;
  }
}

/* [050824TIN] Update style for myaccount blog */
@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #blog-tab .newsfeed-card__footer {
    padding: 12px 13px 9px;
  }
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__footer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__author-avatar {
  width: 40px;
  height: 40px;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__author-name {
  color: #050505;
  font-family: "Segoe UI";
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

body.page-id-298 #main-content #blog-tab .newsfeed-card__cta {
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #9C6E5E;
  color: white;
  font-family: "Segoe UI";
  font-size: 13px;
  font-weight: 600;
  line-height: 140%;
  padding: 10px 18px;
  box-sizing: border-box;
  border-radius: 8px;
  text-decoration: none;
}

/* [080224TIN] Add style for myaccount blog - end */

/* [050824TIN] Add style for share blog section in myaccount blog */
body.page-id-298 #main-content #blog-share .title {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
  margin: 23px 0 17px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-share .title {
    margin: 17px 0 11px;
  }
}

@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #blog-share .title {
    margin: 17px 0 17px;
  }
}

body.page-id-298 #main-content #blog-share .post-info {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 15px 0 28px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-share .post-info {
    margin: 6px 0 6px;
  }
}

body.page-id-298 #main-content #blog-share .post-info .post-count {
  color: #FF6B00;
  font-size: 32px;
  font-weight: 700;
  line-height: 140%;
}

body.page-id-298 #main-content #blog-share .add-social-link-form {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

body.page-id-298 #main-content #blog-share .add-social-link-form fieldset {
  display: contents;
}

body.page-id-298 #main-content #blog-share .add-social-link-form label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

body.page-id-298 #main-content #blog-share .add-social-link-form label svg,
body.page-id-298 #main-content #blog-share .add-social-link-form label img {
  width: 24px;
  height: auto;
  object-fit: contain;
}

body.page-id-298 #main-content #blog-share .add-social-link-form .inline-input {
  display: flex;
  gap: 10px;
}

body.page-id-298 #main-content #blog-share .add-social-link-form .input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: #FFF;
  box-sizing: border-box;
  padding: 11px 15px;
  transition: all 0.2s;
}

body.page-id-298 #main-content #blog-share .add-social-link-form .input:focus {
  outline: none;
  border: 1px solid #9C6E5E;
}

body.page-id-298 #main-content #blog-share .add-social-link-form .submit {
  flex-basis: 118px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: #9C6E5E;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  padding: 11px 32px;
}

body.page-id-298 #main-content #blog-share .social-link-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

body.page-id-298 #main-content #blog-share .social-link-card {
  display: flex;
  box-sizing: border-box;
  padding: 18px 14px;
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background-color: white;
  flex-direction: column;
  gap: 14px;
}

body.page-id-298 #main-content #blog-share .social-link-card__date {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 140%;
}

body.page-id-298 #main-content #blog-share .social-link-card__link {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

body.page-id-298 #main-content #blog-share .social-link-card__link a {
  text-decoration: none;
  color: inherit;
}

body.page-id-298 #main-content #blog-share .social-link-card__icon {
  width: 20px;
  height: auto;
  object-fit: contain;
  display: block;
}

body.page-id-298 #main-content #blog-share .paginator {
  margin-top: 23px;
}

@media (max-width: 479px) {
  body.page-id-298 #main-content #blog-share .paginator {
    margin: 25px auto 30px;
  }
}

@media (min-width: 480px) and (max-width: 785px) {
  body.page-id-298 #main-content #blog-share .paginator {
    margin: 25px auto 30px;
  }
}

/* [050824TIN] Add style for share blog section in myaccount blog - end */
/* [080624TIN] Override css for input in myaccount */
/* override calendar icon of date input */
body.page-id-298 #main-content .woocommerce form .form-row input.woocommerce-Input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: transparent;
  background: none;
  z-index: 1;
}

body.page-id-298 #main-content .woocommerce form .form-row input.woocommerce-Input[type="date"] {
  position: relative;
}

body.page-id-298 #main-content .woocommerce form .form-row input.woocommerce-Input[type="date"]::after {
  content: '';
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 11px;
  right: 9px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlhuaXgvTGluZS9DYWxlbmRhcl9DaGVjayI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBpZD0iVmVjdG9yLTUiIGQ9Ik03LjQ5ODcgNS40OTk2N0M3Ljc3NDg0IDUuNDk5NjcgNy45OTg3IDUuMjc1ODIgNy45OTg3IDQuOTk5NjdDNy45OTg3IDQuNzIzNTMgNy43NzQ4NCA0LjQ5OTY3IDcuNDk4NyA0LjQ5OTY3VjUuNDk5NjdaTTEyLjQ5ODcgNC40OTk2N0MxMi4yMjI2IDQuNDk5NjcgMTEuOTk4NyA0LjcyMzUzIDExLjk5ODcgNC45OTk2N0MxMS45OTg3IDUuMjc1ODIgMTIuMjIyNiA1LjQ5OTY3IDEyLjQ5ODcgNS40OTk2N1Y0LjQ5OTY3Wk03LjQ5ODcgNC40OTk2N0M3LjIyMjU2IDQuNDk5NjcgNi45OTg3IDQuNzIzNTMgNi45OTg3IDQuOTk5NjdDNi45OTg3IDUuMjc1ODIgNy4yMjI1NiA1LjQ5OTY3IDcuNDk4NyA1LjQ5OTY3VjQuNDk5NjdaTTEyLjQ5ODcgNS40OTk2N0MxMi43NzQ4IDUuNDk5NjcgMTIuOTk4NyA1LjI3NTgyIDEyLjk5ODcgNC45OTk2N0MxMi45OTg3IDQuNzIzNTMgMTIuNzc0OCA0LjQ5OTY3IDEyLjQ5ODcgNC40OTk2N1Y1LjQ5OTY3Wk03Ljk5ODcgNC45OTk2N0M3Ljk5ODcgNC43MjM1MyA3Ljc3NDg0IDQuNDk5NjcgNy40OTg3IDQuNDk5NjdDNy4yMjI1NiA0LjQ5OTY3IDYuOTk4NyA0LjcyMzUzIDYuOTk4NyA0Ljk5OTY3SDcuOTk4N1pNNi45OTg3IDUuODMzMDFDNi45OTg3IDYuMTA5MTUgNy4yMjI1NiA2LjMzMzAxIDcuNDk4NyA2LjMzMzAxQzcuNzc0ODQgNi4zMzMwMSA3Ljk5ODcgNi4xMDkxNSA3Ljk5ODcgNS44MzMwMUg2Ljk5ODdaTTYuOTk4NyA0Ljk5OTY3QzYuOTk4NyA1LjI3NTgyIDcuMjIyNTYgNS40OTk2NyA3LjQ5ODcgNS40OTk2N0M3Ljc3NDg0IDUuNDk5NjcgNy45OTg3IDUuMjc1ODIgNy45OTg3IDQuOTk5NjdINi45OTg3Wk03Ljk5ODcgMy4zMzMwMUM3Ljk5ODcgMy4wNTY4NyA3Ljc3NDg0IDIuODMzMDEgNy40OTg3IDIuODMzMDFDNy4yMjI1NiAyLjgzMzAxIDYuOTk4NyAzLjA1Njg3IDYuOTk4NyAzLjMzMzAxSDcuOTk4N1pNMTIuOTk4NyA0Ljk5OTY3QzEyLjk5ODcgNC43MjM1MyAxMi43NzQ4IDQuNDk5NjcgMTIuNDk4NyA0LjQ5OTY3QzEyLjIyMjYgNC40OTk2NyAxMS45OTg3IDQuNzIzNTMgMTEuOTk4NyA0Ljk5OTY3SDEyLjk5ODdaTTExLjk5ODcgNS44MzMwMUMxMS45OTg3IDYuMTA5MTUgMTIuMjIyNiA2LjMzMzAxIDEyLjQ5ODcgNi4zMzMwMUMxMi43NzQ4IDYuMzMzMDEgMTIuOTk4NyA2LjEwOTE1IDEyLjk5ODcgNS44MzMwMUgxMS45OTg3Wk0xMS45OTg3IDQuOTk5NjdDMTEuOTk4NyA1LjI3NTgyIDEyLjIyMjYgNS40OTk2NyAxMi40OTg3IDUuNDk5NjdDMTIuNzc0OCA1LjQ5OTY3IDEyLjk5ODcgNS4yNzU4MiAxMi45OTg3IDQuOTk5NjdIMTEuOTk4N1pNMTIuOTk4NyAzLjMzMzAxQzEyLjk5ODcgMy4wNTY4NyAxMi43NzQ4IDIuODMzMDEgMTIuNDk4NyAyLjgzMzAxQzEyLjIyMjYgMi44MzMwMSAxMS45OTg3IDMuMDU2ODcgMTEuOTk4NyAzLjMzMzAxTDEyLjk5ODcgMy4zMzMwMVpNNy40OTg3IDQuNDk5NjdDNS4zODE2MSA0LjQ5OTY3IDMuNjY1MzYgNi4yMTU5MiAzLjY2NTM2IDguMzMzMDFINC42NjUzNkM0LjY2NTM2IDYuNzY4MiA1LjkzMzg5IDUuNDk5NjcgNy40OTg3IDUuNDk5NjdWNC40OTk2N1pNMy42NjUzNiA4LjMzMzAxVjEzLjMzM0g0LjY2NTM2VjguMzMzMDFIMy42NjUzNlpNMy42NjUzNiAxMy4zMzNDMy42NjUzNiAxNS40NTAxIDUuMzgxNjEgMTcuMTY2MyA3LjQ5ODcgMTcuMTY2M1YxNi4xNjYzQzUuOTMzODkgMTYuMTY2MyA0LjY2NTM2IDE0Ljg5NzggNC42NjUzNiAxMy4zMzNIMy42NjUzNlpNNy40OTg3IDE3LjE2NjNIMTIuNDk4N1YxNi4xNjYzSDcuNDk4N1YxNy4xNjYzWk0xMi40OTg3IDE3LjE2NjNDMTQuNjE1OCAxNy4xNjYzIDE2LjMzMiAxNS40NTAxIDE2LjMzMiAxMy4zMzNIMTUuMzMyQzE1LjMzMiAxNC44OTc4IDE0LjA2MzUgMTYuMTY2MyAxMi40OTg3IDE2LjE2NjNWMTcuMTY2M1pNMTYuMzMyIDEzLjMzM1Y4LjMzMzAxSDE1LjMzMlYxMy4zMzNIMTYuMzMyWk0xNi4zMzIgOC4zMzMwMUMxNi4zMzIgNi4yMTU5MiAxNC42MTU4IDQuNDk5NjcgMTIuNDk4NyA0LjQ5OTY3VjUuNDk5NjdDMTQuMDYzNSA1LjQ5OTY3IDE1LjMzMiA2Ljc2ODIgMTUuMzMyIDguMzMzMDFIMTYuMzMyWk03LjQ5ODcgNS40OTk2N0gxMi40OTg3VjQuNDk5NjdINy40OTg3VjUuNDk5NjdaTTYuOTk4NyA0Ljk5OTY3VjUuODMzMDFINy45OTg3VjQuOTk5NjdINi45OTg3Wk03Ljk5ODcgNC45OTk2N1YzLjMzMzAxSDYuOTk4N1Y0Ljk5OTY3SDcuOTk4N1pNMTEuOTk4NyA0Ljk5OTY3VjUuODMzMDFIMTIuOTk4N1Y0Ljk5OTY3SDExLjk5ODdaTTEyLjk5ODcgNC45OTk2N1YzLjMzMzAxTDExLjk5ODcgMy4zMzMwMVY0Ljk5OTY3SDEyLjk5ODdaIiBmaWxsPSIjN0Q3RDdEIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgODkwNCIgeD0iNyIgeT0iOCIgd2lkdGg9IjYiIGhlaWdodD0iMSIgcng9IjAuNSIgZmlsbD0iIzdEN0Q3RCIvPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIDg5MDUiIHg9IjciIHk9IjEwIiB3aWR0aD0iNiIgaGVpZ2h0PSIxIiByeD0iMC41IiBmaWxsPSIjN0Q3RDdEIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgODkwNiIgeD0iNyIgeT0iMTIiIHdpZHRoPSI2IiBoZWlnaHQ9IjEiIHJ4PSIwLjUiIGZpbGw9IiM3RDdEN0QiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* [080624TIN] Override css for input in myaccount - end */
/* [080624TIN] Update css for profile tab */
.myaccount-profile-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* [080724TIN] Update css for profile tab */
  margin: 20px 0;
  box-sizing: border-box;
}

.myaccount-profile-group__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.myaccount-profile-group__title img,
.myaccount-profile-group__title svg {
  display: block;
  height: 24px;
  width: 24px;
  object-fit: contain;
}

.myaccount-profile-group__subtitle {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.myaccount-profile-group__action {
  height: 24px;
  width: 24px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  background-color: transparent;
  border-radius: 4px;
  border: none;
  outline: none;
  transition: all 0.2s;
}

.myaccount-profile-group__action:hover,
.myaccount-profile-group__action:active {
  background-color: rgba(156, 110, 94, 0.1254901961);
}

.myaccount-profile-group__action img,
.myaccount-profile-group__action svg {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.myaccount-profile-group__header,
.myaccount-profile-group__item-header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.myaccount-profile-group__header {
  padding-bottom: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

.myaccount-profile-group__text {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}

.myaccount-profile-group__item {
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-sizing: border-box;
  /* [080724TIN] Update css for profile tab */
  padding: 0 0 16px;
  border-bottom: 1px solid #aaa;
  margin-bottom: 17px;
}

.myaccount-popup-form {
  background-color: white;
  box-sizing: border-box;
  padding: 26px 13px;
  border-radius: 8px;
  display: flex;
  width: 100%;
}

.myaccount-popup-form fieldset {
  display: contents;
  width: 100%;
}

.myaccount-popup-form__wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myaccount-popup-form__title {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
}

.myaccount-popup-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  margin-top: 9px;
}

.myaccount-popup-form__field input,
.myaccount-popup-form__field textarea,
.myaccount-popup-form__field input[type=text] {
  border: 1px solid #7D7D7D;
  border-radius: 8px;
  padding: 11px 15px;
  box-sizing: border-box;
  width: 100%;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  min-width: min(35vw, 400px);
  max-width: 100%;
  flex: 1;
  outline: none;
  transition: all 0.2s;
}

.myaccount-popup-form__field input:hover,
.myaccount-popup-form__field input:focus,
.myaccount-popup-form__field textarea:hover,
.myaccount-popup-form__field textarea:focus {
  border-color: #3D3D3D;
}

.myaccount-popup-form__field input::placeholder,
.myaccount-popup-form__field textarea::placeholder {
  color: #7D7D7D;
}

.myaccount-popup-form__field input:disabled,
.myaccount-popup-form__field textarea:disabled {
  border-color: #aaa;
}

.myaccount-popup-form__field textarea {
  min-height: 130px;
  resize: none;
}

.myaccount-popup-form__field label {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.myaccount-popup-form__field label svg,
.myaccount-popup-form__field label img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  box-sizing: border-box;
}

.myaccount-popup-form__field label:has(input[type=checkbox]) {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
}

.myaccount-popup-form__field label:has(input[type=checkbox]) input {
  width: fit-content;
  min-width: fit-content;
  flex: 0;
  height: 22px;
  width: 22px;
  display: flex;
}

.myaccount-popup-form__field input[type=date]::-webkit-calendar-picker-indicator {
  display: none;
}

.myaccount-popup-form__field input[type=date] {
  position: relative;
}

.myaccount-popup-form__field input[type=date]::after {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 11px;
  right: 9px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlhuaXgvTGluZS9DYWxlbmRhcl9DaGVjayI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBpZD0iVmVjdG9yLTUiIGQ9Ik03LjQ5ODcgNS40OTk2N0M3Ljc3NDg0IDUuNDk5NjcgNy45OTg3IDUuMjc1ODIgNy45OTg3IDQuOTk5NjdDNy45OTg3IDQuNzIzNTMgNy43NzQ4NCA0LjQ5OTY3IDcuNDk4NyA0LjQ5OTY3VjUuNDk5NjdaTTEyLjQ5ODcgNC40OTk2N0MxMi4yMjI2IDQuNDk5NjcgMTEuOTk4NyA0LjcyMzUzIDExLjk5ODcgNC45OTk2N0MxMS45OTg3IDUuMjc1ODIgMTIuMjIyNiA1LjQ5OTY3IDEyLjQ5ODcgNS40OTk2N1Y0LjQ5OTY3Wk03LjQ5ODcgNC40OTk2N0M3LjIyMjU2IDQuNDk5NjcgNi45OTg3IDQuNzIzNTMgNi45OTg3IDQuOTk5NjdDNi45OTg3IDUuMjc1ODIgNy4yMjI1NiA1LjQ5OTY3IDcuNDk4NyA1LjQ5OTY3VjQuNDk5NjdaTTEyLjQ5ODcgNS40OTk2N0MxMi43NzQ4IDUuNDk5NjcgMTIuOTk4NyA1LjI3NTgyIDEyLjk5ODcgNC45OTk2N0MxMi45OTg3IDQuNzIzNTMgMTIuNzc0OCA0LjQ5OTY3IDEyLjQ5ODcgNC40OTk2N1Y1LjQ5OTY3Wk03Ljk5ODcgNC45OTk2N0M3Ljk5ODcgNC43MjM1MyA3Ljc3NDg0IDQuNDk5NjcgNy40OTg3IDQuNDk5NjdDNy4yMjI1NiA0LjQ5OTY3IDYuOTk4NyA0LjcyMzUzIDYuOTk4NyA0Ljk5OTY3SDcuOTk4N1pNNi45OTg3IDUuODMzMDFDNi45OTg3IDYuMTA5MTUgNy4yMjI1NiA2LjMzMzAxIDcuNDk4NyA2LjMzMzAxQzcuNzc0ODQgNi4zMzMwMSA3Ljk5ODcgNi4xMDkxNSA3Ljk5ODcgNS44MzMwMUg2Ljk5ODdaTTYuOTk4NyA0Ljk5OTY3QzYuOTk4NyA1LjI3NTgyIDcuMjIyNTYgNS40OTk2NyA3LjQ5ODcgNS40OTk2N0M3Ljc3NDg0IDUuNDk5NjcgNy45OTg3IDUuMjc1ODIgNy45OTg3IDQuOTk5NjdINi45OTg3Wk03Ljk5ODcgMy4zMzMwMUM3Ljk5ODcgMy4wNTY4NyA3Ljc3NDg0IDIuODMzMDEgNy40OTg3IDIuODMzMDFDNy4yMjI1NiAyLjgzMzAxIDYuOTk4NyAzLjA1Njg3IDYuOTk4NyAzLjMzMzAxSDcuOTk4N1pNMTIuOTk4NyA0Ljk5OTY3QzEyLjk5ODcgNC43MjM1MyAxMi43NzQ4IDQuNDk5NjcgMTIuNDk4NyA0LjQ5OTY3QzEyLjIyMjYgNC40OTk2NyAxMS45OTg3IDQuNzIzNTMgMTEuOTk4NyA0Ljk5OTY3SDEyLjk5ODdaTTExLjk5ODcgNS44MzMwMUMxMS45OTg3IDYuMTA5MTUgMTIuMjIyNiA2LjMzMzAxIDEyLjQ5ODcgNi4zMzMwMUMxMi43NzQ4IDYuMzMzMDEgMTIuOTk4NyA2LjEwOTE1IDEyLjk5ODcgNS44MzMwMUgxMS45OTg3Wk0xMS45OTg3IDQuOTk5NjdDMTEuOTk4NyA1LjI3NTgyIDEyLjIyMjYgNS40OTk2NyAxMi40OTg3IDUuNDk5NjdDMTIuNzc0OCA1LjQ5OTY3IDEyLjk5ODcgNS4yNzU4MiAxMi45OTg3IDQuOTk5NjdIMTEuOTk4N1pNMTIuOTk4NyAzLjMzMzAxQzEyLjk5ODcgMy4wNTY4NyAxMi43NzQ4IDIuODMzMDEgMTIuNDk4NyAyLjgzMzAxQzEyLjIyMjYgMi44MzMwMSAxMS45OTg3IDMuMDU2ODcgMTEuOTk4NyAzLjMzMzAxTDEyLjk5ODcgMy4zMzMwMVpNNy40OTg3IDQuNDk5NjdDNS4zODE2MSA0LjQ5OTY3IDMuNjY1MzYgNi4yMTU5MiAzLjY2NTM2IDguMzMzMDFINC42NjUzNkM0LjY2NTM2IDYuNzY4MiA1LjkzMzg5IDUuNDk5NjcgNy40OTg3IDUuNDk5NjdWNC40OTk2N1pNMy42NjUzNiA4LjMzMzAxVjEzLjMzM0g0LjY2NTM2VjguMzMzMDFIMy42NjUzNlpNMy42NjUzNiAxMy4zMzNDMy42NjUzNiAxNS40NTAxIDUuMzgxNjEgMTcuMTY2MyA3LjQ5ODcgMTcuMTY2M1YxNi4xNjYzQzUuOTMzODkgMTYuMTY2MyA0LjY2NTM2IDE0Ljg5NzggNC42NjUzNiAxMy4zMzNIMy42NjUzNlpNNy40OTg3IDE3LjE2NjNIMTIuNDk4N1YxNi4xNjYzSDcuNDk4N1YxNy4xNjYzWk0xMi40OTg3IDE3LjE2NjNDMTQuNjE1OCAxNy4xNjYzIDE2LjMzMiAxNS40NTAxIDE2LjMzMiAxMy4zMzNIMTUuMzMyQzE1LjMzMiAxNC44OTc4IDE0LjA2MzUgMTYuMTY2MyAxMi40OTg3IDE2LjE2NjNWMTcuMTY2M1pNMTYuMzMyIDEzLjMzM1Y4LjMzMzAxSDE1LjMzMlYxMy4zMzNIMTYuMzMyWk0xNi4zMzIgOC4zMzMwMUMxNi4zMzIgNi4yMTU5MiAxNC42MTU4IDQuNDk5NjcgMTIuNDk4NyA0LjQ5OTY3VjUuNDk5NjdDMTQuMDYzNSA1LjQ5OTY3IDE1LjMzMiA2Ljc2ODIgMTUuMzMyIDguMzMzMDFIMTYuMzMyWk03LjQ5ODcgNS40OTk2N0gxMi40OTg3VjQuNDk5NjdINy40OTg3VjUuNDk5NjdaTTYuOTk4NyA0Ljk5OTY3VjUuODMzMDFINy45OTg3VjQuOTk5NjdINi45OTg3Wk03Ljk5ODcgNC45OTk2N1YzLjMzMzAxSDYuOTk4N1Y0Ljk5OTY3SDcuOTk4N1pNMTEuOTk4NyA0Ljk5OTY3VjUuODMzMDFIMTIuOTk4N1Y0Ljk5OTY3SDExLjk5ODdaTTEyLjk5ODcgNC45OTk2N1YzLjMzMzAxTDExLjk5ODcgMy4zMzMwMVY0Ljk5OTY3SDEyLjk5ODdaIiBmaWxsPSIjN0Q3RDdEIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgODkwNCIgeD0iNyIgeT0iOCIgd2lkdGg9IjYiIGhlaWdodD0iMSIgcng9IjAuNSIgZmlsbD0iIzdEN0Q3RCIvPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIDg5MDUiIHg9IjciIHk9IjEwIiB3aWR0aD0iNiIgaGVpZ2h0PSIxIiByeD0iMC41IiBmaWxsPSIjN0Q3RDdEIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgODkwNiIgeD0iNyIgeT0iMTIiIHdpZHRoPSI2IiBoZWlnaHQ9IjEiIHJ4PSIwLjUiIGZpbGw9IiM3RDdEN0QiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.myaccount-popup-form__field-group {
  display: flex;
  flex-direction: row;
  gap: 8px 47px;
  align-items: flex-start;
}

@media (max-width: 479px) {
  .myaccount-popup-form__field-group {
    flex-direction: column;
  }
}

.myaccount-popup-form__footer {
  box-sizing: border-box;
  padding: 9px 0 27px;
  border-bottom: 1px solid #3D3D3D;
  display: flex;
  gap: 33px;
}

.myaccount-popup-form__button {
  background-color: transparent;
  border: 1px solid #9C6E5E;
  outline: 1px solid transparent;
  cursor: pointer;
  color: #9C6E5E;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  transition: all 0.2s;
  border-radius: 40px;
  padding: 10px 18px;
  box-sizing: border-box;
  transition: all 0.2s;
}

.myaccount-popup-form__button--primary {
  background-color: #9C6E5E;
  color: white;
}

.myaccount-popup-form__button:focus {
  outline-color: #9C6E5E;
}

.myaccount-popup-form__field .myaccount-popup-form__search {
  padding-right: 38px;
}

.myaccount-popup-form__search-wrap {
  position: relative;
}

.myaccount-popup-form__search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  object-fit: contain;
}

.myaccount-popup-form__search-result {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.myaccount-popup-form__search-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 15px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #878787;
}

body.page-id-298 #main-content #social-connection {
  box-sizing: border-box;
  padding: 17px 0 27px;
  display: flex;
  gap: 32px;
  flex-direction: column;
}

body.page-id-298 #main-content #social-connection .title {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
}

body.page-id-298 #main-content #social-connection .social-connection-list {
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 504px;
}

body.page-id-298 #main-content #social-connection .social-connection-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #1A1A1A;
}

body.page-id-298 #main-content #social-connection .social-connection-item--disconnect {
  color: #878787;
}

body.page-id-298 #main-content #social-connection .social-connection-item__social {
  width: 100%;
  flex-basis: 317px;
  box-sizing: border-box;
  padding: 11px 16px;
  background-color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #B2B2B2;
}

body.page-id-298 #main-content #social-connection .social-connection-item__text {
  flex: 1;
  color: inherit;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
}

body.page-id-298 #main-content #social-connection .social-connection-item__action {
  border-radius: 40px;
  border: 1px solid #9C6E5E;
  background-color: transparent;
  flex-basis: 115px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  color: #9C6E5E;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  cursor: pointer;
}

/* [080624TIN] Update css for profile tab - end */

/* [082324TIN] Add css for notification popup */

.notification-popup {
  background-color: white;
  padding: 40px 30px;
  box-sizing: border-box;
  border-radius: 16px;
  text-align: center;
  font-size: 16px;
  color: #3d3d3d;
}

.notification-popup__title {
  font-weight: 700;
  margin-bottom: 10px;
}

.notification-popup__subtitle {
  margin-bottom: 20px;
}

.notification-popup__cta-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 6px 20px;
  background-color: transparent;
  color: #9C6E5E;
  font-size: 16px;
  border: 1px solid;
  border-radius: 16px;
  min-width: 100px;
  cursor: pointer;
}

/* [082324TIN] Add css for notification popup - end */

/* [082624TIN] Add css for myaccount notifications */
body.page-id-298 #main-content #notifications .tab-heading {
  margin-bottom: 22px;
}

body.page-id-298 #main-content #notifications #notification-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body.page-id-298 #main-content #notifications .empty-notification {
  color: #3D3D3D;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}

.myaccount-notification {
  display: flex;
  gap: 12px;
}

.myaccount-notification__avatar {
  width: 48px;
  height: 48px;
  position: relative;
}

.woocommerce .myaccount-notification__avatar img,
.woocommerce-page .myaccount-notification__avatar img,
.myaccount-notification__avatar img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  height: 100%;
  width: 100%;
}

.myaccount-notification__type {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.woocommerce .myaccount-notification__type img,
.woocommerce-page .myaccount-notification__type img,
.myaccount-notification__type img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.myaccount-notification__content {
  display: flex;
  flex-direction: row;
  color: #3d3d3d;
  width: 100%;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.myaccount-notification__content:hover .myaccount-notification__message {
  text-decoration: underline;
}

.myaccount-notification__message {
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  flex: 1;
  text-align: left;
  text-decoration: inherit;
}

.myaccount-notification__message b {
  font-weight: 600;
}

.myaccount-notification__date {
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  color: #878787;
  justify-self: end;
}

.myaccount-notification__seen {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF6B00;
  display: block;
  position: absolute;
  right: 10px;
  bottom: 6px;
}

/* [082624TIN] Add css for myaccount notifications - end */
/* [090424TIN] Update css for book appointment */
body.page-id-298 #main-content #booking-rental-data-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* [100124TIN] Limit height and scroll on overflow */
  /* max-height: 400px;
  overflow-y: auto; */
}

/* [100124TIN] Add css for scrollbar of bookappointment section */
body.page-id-298 #main-content #booking-rental-data-list::-webkit-scrollbar,
.calendar-event-custom *::-webkit-scrollbar {
  width: 16px;
}

body.page-id-298 #main-content #booking-rental-data-list::-webkit-scrollbar-thumb,
.calendar-event-custom *::-webkit-scrollbar-thumb {
  background-color: #AAA;
  border-radius: 8px;
  border: 4px solid #F9F0ED;
}

.calendar-event-custom *::-webkit-scrollbar-thumb {
  border-color: white;
}

body.page-id-298 #main-content #booking-rental-data-list::-webkit-scrollbar-track,
.calendar-event-custom *::-webkit-scrollbar-track {
  background-color: transparent;
}

/* [100124TIN] Add css for scrollbar of bookappointment section - end*/

.booking-rental-card {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 11px 30px;
  display: flex;
  flex-direction: row;
}

@media (min-width: 480px) and (max-width: 785px) {
  .booking-rental-card {
    flex-direction: column;
    justify-content: center;
    padding: 11px;
  }
}

@media (max-width: 479px) {
  .booking-rental-card {
    flex-direction: column;
    justify-content: center;
    padding: 11px;
  }
}

.booking-rental-card__info {
  flex: 1;
}

.booking-rental-card__qr-cta {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 15px;
  min-width: 156px;
  text-align: center;
  color: #9C6E5E;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  align-self: center;
  cursor: pointer;
  transition: all 0.2s;
  width: 156px;
  justify-self: end;
}

@media (max-width: 479px) {
  .booking-rental-card__qr-cta {
    height: 100%;
    margin-left: 6px;
    padding: 8px;
    min-width: auto;
    width: 100%;
    max-width: 125px;
  }
}

.booking-rental-card__qr-cta:active {
  opacity: 0.7;
}

.booking-rental-card__date {
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 8px;
}

@media (max-width: 479px) {
  .booking-rental-card__date {
    gap: 0px;
  }
}

.booking-rental-card__date-item {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  color: #3D3D3D;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 479px) {
  .booking-rental-card__date-item {
    font-size: 12px;
    flex: 1;
  }
}

.booking-rental-card__date-item svg {
  width: 24px;
  height: auto;
}

@media (max-width: 479px) {
  .booking-rental-card__date-item svg {
    width: 16px;
  }
}

.booking-rental-card__title {
  color: #3D3D3D;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
}

.booking-rental-card__status {
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 2px 8px 4px;
  margin-top: 4px;
  width: fit-content;
  line-height: normal;
}

.booking-rental-card__status--booked {
  background-color: rgba(33, 150, 243, 0.1294117647);
  color: #2196F3;
}

.booking-rental-card__status--checked-in {
  background-color: #DDFFF3;
  color: #0CBC8B;
}

.booking-rental-card__status--cancelled {
  background-color: #FFDDDD;
  color: #F12222;
}

.booking-rental-card__status--available {
  background: #fe9f3a;
  color: #fff;
}

.booking-rental-card__book-rental {
  border-radius: 8px;
  border: 1px solid #9C6E5E;
  background: white;
  box-sizing: border-box;
  padding: 15px;
  min-width: 156px;
  text-align: center;
  color: #9C6E5E;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  align-self: center;
  cursor: pointer;
  transition: all 0.2s;
  width: 156px;
  justify-self: end;
}

/* [090424TIN] Update css for book appointment - end */

/* [092424TIN] Add css for new coupon card layout in myaccount */
.myaccount-coupon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  font-family: "Segoe UI", sans-serif;
}

@media (min-width: 480px) and (max-width: 785px) {
  .myaccount-coupon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .myaccount-coupon-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.myaccount-coupon-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: white;
  border-radius: 16px;
}

.myaccount-coupon-card--grey-out .myaccount-coupon-card__info,
.myaccount-coupon-card--grey-out .myaccount-coupon-card__code,
.myaccount-coupon-card--grey-out .myaccount-coupon-card__copy {
  filter: grayscale(0.8);
}

.myaccount-coupon-card__info {
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
  border-bottom: 2px dashed #9C6E5E;
}

.myaccount-coupon-card__discount {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 38px;
  font-weight: 700;
  color: #9C6E5E;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  text-align: center;
}

.myaccount-coupon-card__exp {
  font-size: 16px;
  font-weight: 400;
  color: #4d4d4d;
}

.myaccount-coupon-card__description {
  font-size: 20px;
  font-weight: 500;
  color: #3D3D3D;
  /*   margin-top: 6px; */
  /* [111924TIN] Adjust line height and margin */
  line-height: 1.4;
  margin: 12px 0;
}

.myaccount-coupon-card__description a {
  color: #9C6E5E;
  text-decoration: underline;
}

.myaccount-coupon-card__footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.myaccount-coupon-card__footer::after,
.myaccount-coupon-card__footer::before {
  content: "";
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 16px;
  background-color: #F9F0ED;
  top: calc(16px / 2 * -1);
}

@media (min-width: 480px) and (max-width: 785px) {

  .myaccount-coupon-card__footer::after,
  .myaccount-coupon-card__footer::before {
    display: none;
  }
}

@media (max-width: 479px) {

  .myaccount-coupon-card__footer::after,
  .myaccount-coupon-card__footer::before {
    display: none;
  }
}

.myaccount-coupon-card__footer::before {
  left: calc(-1 * 16px / 2);
}

.myaccount-coupon-card__footer::after {
  right: calc(-1 * 16px / 2);
}

.myaccount-coupon-card__code {
  color: #9C6E5E;
  font-size: 16px;
  font-weight: 400;
}

.myaccount-coupon-card__copy {
  background-color: transparent;
  color: #9C6E5E;
  height: 32px;
  width: 32px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myaccount-coupon-card__copy:hover {
  background-color: rgba(156, 110, 94, 0.1254901961);
}

.myaccount-coupon-card__copy--copied {
  position: relative;
}

.myaccount-coupon-card__copy--copied:focus:after {
  content: "Copied!";
  display: block;
  position: absolute;
  color: white;
  padding: 4px 8px;
  box-sizing: border-box;
  background-color: #9C6E5E;
  border-radius: 16px;
  left: calc(100% + 4px);
  font-size: 14px;
  font-weight: 500;
}

.myaccount-coupon-card__used-count {
  font-size: 16px;
  font-weight: 400;
  color: #3d3d3d;
  margin-top: 6px;
}

.myaccount-coupon-card__used-progress {
  height: 6px;
  background-color: #F9F0ED;
  border-radius: 8px;
  position: relative;
}

.myaccount-coupon-card__used-progress::after {
  background-color: #9C6E5E;
  position: absolute;
  content: "";
  height: 100%;
  width: var(--progress-precent, 0);
  border-radius: 4px;
  left: 0;
  top: 0;
}

/* [092424TIN] Add css for new coupon card layout in myaccount - end*/

/* [100124TIN] Add css to update book appointment tab */
.myaccount-heading-accordion {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: none;
  padding: 0;
  background-color: transparent;
  outline: none;
  width: 100%;
}

.myaccount-heading-accordion__icon {
  height: 24px;
  width: auto;
  transition: all 0.2s;
}

.myaccount-heading-accordion--open .myaccount-heading-accordion__icon {
  transform: rotate(180deg);
}

/* [100124TIN] Add css for event status cell */
.event-content__status {
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  padding: 4px;
  background-color: #0001;
  border-radius: 4px;
  line-height: normal;
  width: fit-content;
}

/* [020625TIN] Add css for breadcrumb in myaccount */
.breadcrumb {
  display: inline;
  gap: 20px;
  color: #3D3D3D;
  /* [091024TIN] Change font family */
  font-family: 'Segoe UI', system-ui, sans-serif;
  /* font-family: "Plus Jakarta Sans"; */
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}

.breadcrumb__fragment {
  display: inline;
  position: relative;
  padding-left: 40px;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}

.breadcrumb__fragment:first-child {
  padding: 0;
}

.breadcrumb__fragment:first-child::after {
  display: none;
}

.breadcrumb__fragment::after {
  display: block;
  position: absolute;
  content: "";
  height: 4px;
  width: 4px;
  background-color: #3D3D3D;
  border-radius: 50%;
  left: 20px;
  top: 8px;
}

/* [020625TIN] Add css for breadcrumb in myaccount = end */

/* Booking Rental Dashboard (Studio Pass v2) */
.booking-rental-dashboard {
  max-width: 600px;
}

.booking-rental-dashboard__title {
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #3D3D3D;
}

.booking-rental-card--pass {
  padding: 20px;
  margin-bottom: 24px;
}

.booking-rental-card--pass .booking-rental-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-rental-card--pass .booking-rental-card__product-name {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #3D3D3D;
}

.booking-rental-card--pass .booking-rental-card__expiry {
  font-size: 14px;
  color: #666;
}

.booking-rental-card--pass .booking-rental-card__label {
  margin-right: 4px;
}

.booking-rental-card--pass .booking-rental-card__value--urgent {
  color: #c0392b;
  font-weight: 600;
}

.booking-rental-card--pass .booking-rental-card__days {
  margin-left: 4px;
  font-size: 13px;
  color: #888;
}

.booking-rental-section {
  margin-bottom: 24px;
}

.booking-rental-section__title {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #3D3D3D;
}

.booking-rental-slots-summary {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0;
  font-size: 14px;
  color: #555;
}

.booking-rental-slots-summary strong {
  color: #3D3D3D;
}

.booking-rental-slot-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-rental-slot-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.booking-rental-slot-tile--used {
  background: #f0f9f4;
  border-color: #c8e6c9;
}

.booking-rental-slot-tile--upcoming {
  background: #e3f2fd;
  border-color: #90caf9;
}

.booking-rental-slot-tile--empty {
  background: #fafafa;
  border-color: #e0e0e0;
}

.booking-rental-slot-tile__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.booking-rental-slot-tile__check {
  color: #2e7d32;
}

.booking-rental-slot-tile__empty {
  color: #999;
}

.booking-rental-slot-tile__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
}

.booking-rental-slot-tile__label {
  font-weight: 600;
  color: #3D3D3D;
  margin-right: 4px;
}

.booking-rental-slot-tile__status {
  margin-right: 4px;
}

.booking-rental-slot-tile__qr-link,
.booking-rental-slot-tile__book-link {
  font-size: 13px;
  color: #9C6E5E;
  text-decoration: underline;
}

.booking-rental-slot-tile__qr-link:hover,
.booking-rental-slot-tile__book-link:hover {
  color: #7a5648;
}

.booking-rental-visit-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.booking-rental-visit-item {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #555;
}

.booking-rental-visit-item:last-child {
  border-bottom: none;
}

.booking-rental-visit-item__date {
  margin-right: 12px;
  font-weight: 500;
  color: #3D3D3D;
}

.booking-rental-visit-item__booking {
  margin-right: 8px;
}

.booking-rental-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.booking-rental-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #9C6E5E;
  background: white;
  color: #9C6E5E;
  font-size: 14px;
}

.booking-rental-btn:hover {
  background: #9C6E5E;
  color: white;
}

.booking-rental-btn--renew {
  background: #9C6E5E;
  color: white;
}

.booking-rental-btn--renew:hover {
  background: #7a5648;
  border-color: #7a5648;
  color: white;
}

.booking-rental-no-pass {
  padding: 24px;
  text-align: center;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.booking-rental-no-pass p {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #555;
}

.booking-rental-notice {
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
}

/* =====================================================================
   Studio Pass v2 — Rental Pass cards (booking-rental-dashboard)
   ===================================================================== */

/* Grid of cards */
.booking-rental-dashboard {
  font-family: "Segoe UI", sans-serif;
  color: #3D3D3D;
}

.booking-rental-dashboard__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #3D3D3D;
}

/* ---- Pass card wrapper ---- */
.booking-rental-pass-card {
  background: #fff;
  border: 1px solid #D6BDB4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(156, 110, 94, 0.08);
}

/* ---- Pass header row ---- */
.booking-rental-card--pass {
  background: #F9F0ED;
  padding: 16px 20px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #D6BDB4;
  display: block;
  flex-direction: unset;
}

.booking-rental-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.booking-rental-card__product-name {
  font-size: 17px;
  font-weight: 700;
  color: #7A3F2E;
  margin: 0;
  flex: 1 1 auto;
}

.booking-rental-card__expiry {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
}

.booking-rental-card__label {
  font-weight: 600;
  color: #5A2B1C;
}

.booking-rental-card__value {
  color: #3D3D3D;
}

.booking-rental-card__value--urgent {
  color: #E53935;
  font-weight: 700;
}

.booking-rental-card__days {
  color: #888;
  font-size: 13px;
}

/* ---- Sections inside the card ---- */
.booking-rental-section {
  padding: 14px 20px;
  border-bottom: 1px solid #EEE4E0;
}

.booking-rental-section:last-child {
  border-bottom: none;
}

.booking-rental-section__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9C6E5E;
  margin: 0 0 10px;
}

/* ---- Slots summary row ---- */
.booking-rental-slots-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #3D3D3D;
}

.booking-rental-slots-summary span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.booking-rental-slots-summary strong {
  font-size: 16px;
  font-weight: 700;
  color: #7A3F2E;
}

/* ---- Per-slot tile list ---- */
.booking-rental-slot-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-rental-slot-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #EEE4E0;
  font-size: 14px;
  transition: background 0.15s;
}

.booking-rental-slot-tile--used {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.booking-rental-slot-tile--upcoming {
  background: #FFF8F0;
  border-color: #FDE3C4;
}

.booking-rental-slot-tile--empty {
  background: #f5f5f5;
  border-color: #E0E0E0;
  opacity: 0.75;
}

.booking-rental-slot-tile__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.booking-rental-slot-tile__content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.booking-rental-slot-tile__label {
  font-weight: 700;
  color: #3D3D3D;
  min-width: 52px;
}

.booking-rental-slot-tile__status {
  color: #555;
}

.booking-rental-slot-tile--used .booking-rental-slot-tile__status {
  color: #166534;
  font-weight: 600;
}

.booking-rental-slot-tile--upcoming .booking-rental-slot-tile__status {
  color: #92400E;
  font-weight: 600;
}

.booking-rental-slot-tile__date,
.booking-rental-slot-tile__time {
  font-size: 13px;
  color: #666;
}

.booking-rental-slot-tile__checkin {
  font-size: 12px;
  color: #0CBC8B;
  background: #DDFFF3;
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---- Renew Pass button section ---- */
.booking-rental-actions {
  padding: 14px 20px;
  justify-content: space-between;
}

.booking-rental-btn--renew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #9C6E5E;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  font-family: "Segoe UI", sans-serif;
  text-decoration: none;
}

.booking-rental-btn--renew:hover {
  background: #7A3F2E;
  color: #fff !important;
}

.booking-rental-btn--renew:active {
  opacity: 0.8;
}

#main-content .button.booking-rental-btn {
  background: #9C6E5E;
  line-height: 1.2 !important;
}

/* ---- Visit History ---- */
.booking-rental-visit-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-rental-visit-item {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #555;
  padding: 6px 0;
  border-bottom: 1px solid #F5EDE9;
}

.booking-rental-visit-item:last-child {
  border-bottom: none;
}

.booking-rental-visit-item__num {
  font-weight: 700;
  color: #9C6E5E;
}

/* ---- "No pass" notice ---- */
.booking-rental-notice {
  color: #777;
  font-size: 14px;
  padding: 20px 0;
}

/* ---- Responsive ---- */
@media (max-width: 479px) {
  .booking-rental-card__header {
    flex-direction: column;
    gap: 4px;
  }

  .booking-rental-slots-summary {
    gap: 12px;
  }

  .booking-rental-slot-tile__content {
    gap: 4px;
  }

  .booking-rental-section {
    padding: 12px 14px;
  }

  .booking-rental-card--pass {
    padding: 12px 14px;
  }

  .booking-rental-actions {
    padding: 12px 14px;
  }

  /* Single-column slot tiles on mobile */
  .booking-rental-slot-tiles {
    grid-template-columns: 1fr;
  }
}

/* ---- Slot tiles: 2-column grid on ≥480px ---- */
@media (min-width: 480px) {
  .booking-rental-slot-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ---- checked_in status (DB value) = alias for Used ---- */
.booking-rental-slot-tile--checked_in {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.booking-rental-slot-tile--checked_in .booking-rental-slot-tile__status {
  color: #166534;
  font-weight: 600;
}

/* ---- Visit history sub-elements ---- */
.booking-rental-visit-item__date {
  font-weight: 600;
  color: #7A3F2E;
  flex-shrink: 0;
}

.booking-rental-visit-item__booking {
  color: #555;
  flex-shrink: 0;
}

/* ---- No-pass CTA card (v2 variant) ---- */
.booking-rental-no-pass {
  text-align: center;
  padding: 32px 20px;
  background: #FBF5F3;
  border: 1px dashed #D6BDB4;
  border-radius: 12px;
  margin-top: 8px;
}

.booking-rental-no-pass p {
  margin: 0 0 16px;
  font-size: 15px;
  color: #555;
}