@import url("https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/styles/fonts.css");

:root {
  --cta-color: #993324;
  --calendar-cta-color: #993324;
  --subheader-login-cta-color: #993324;
  --checkbox-color: #A8AD00;
  --error: #d30000;
  --create-cta-color: #ca7c30;
  --divider-bg: #cdcfd5;
  --forget-cta-color: #54301a;
  --body-bg: #f3f4ea;
  --body-bg-mobile: #fff;
  --header-bg: #ffffff;
  --form-bg-color: #ffffff;
  --page-level-error-bg: #fccac9;
  --page-level-error-border: #ddafb2;
  --intro-text-color: #303030;
  --continue-with-google-text-color: #606060;
  --input-title-color: #808080;
  --create-account-secondaty-text-color: #808080;
  --font-regular: og_brotherregular;
  --font-light: og_brotherlight;
  --cta-border-radius: 8px;
  --font-medium: og_brothermedium;
  --font-bold: og_brotherextrabold;
  --bg-signup-header: #fff;
  --bg-signup-form: #fff;
  --subheader-heading-color: #2a2c25;
  --form-radius: 8px;
  --eclub_bg: #F8F7F6;
}

body {
  visibility: visible;
}

body,
button {
  font-family: var(--font-regular), sans-serif;
}

body {
  background-image: url(https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/signup_bg.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
}

input {
  font-family: var(--font-light), sans-serif;
}

.header {
  display: flex;
  min-height: 77px;
  flex-direction: row;
  background-color: var(--header-bg);
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #d6d6d6;
  background-image: url(https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/header-bg.png);
}

#root {
  display: flex;
  flex: 1;
  flex-direction: column;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  height: 100vh;
  background-color: var(--body-bg);
}

.buttons:first-child {
  display: none;
}

.intro {
  display: none;
}

#api {
  margin: auto;
  max-width: 800px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
  display: grid;
  place-content: center;
}

.options {
  display: flex;
  flex-direction: column;
}

.claims-provider-list-buttons {
  width: 50%; /* Left half of the screen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 100%; */
  background: url(https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/bg.png) no-repeat bottom;
  background-size: auto;
}

.intro {
  flex: 1;
}

.social .intro {
  display: none;
}

.localAccount .intro {
  display: flex;
}

.intro {
  padding: 72px;
  padding-bottom: 12px;
  text-align: center;
}

.intro h2 {
  font-size: 32px;
  font-weight: 400;
  font-family: var(--font-regular);
}

#attributeVerification {
  flex: 1;
  background-color: var(--bg-signup-form);
  padding: 80px;
  border-radius: var(--form-radius);
  margin: 40px 0px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
  margin-bottom: 24px;
}

.row .attrEntry {
  margin: 14px 10px;
  /* margin-bottom: 28px;
  padding-right: 10px;
  padding-left: 10px; */
  border-bottom: 1px solid var(--divider-bg);
}

.row input {
  font-family: var(--font-light), sans-serif;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  border: none;
  outline: none;
  position: relative;
  font-size: 18px;
  font-family: var(--font-regular);
  background-color: var(--bg-signup-form);
}

.row .TextBox input,
.row #newPassword {
  width: 100%;
}

input::placeholder {
  font-size: 16px;
  color: transparent;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
  padding: 0;
  margin: 0;
}

label {
  top: -15px;
  left: 0px;
  transition: top 0.3s;
  color: #777;
  z-index: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.peer-label {
  position: absolute;
}

.peer:placeholder-shown ~ .peer-label {
  top: 0.5rem;
}

.peer:focus ~ .peer-label {
  top: -0.875rem;
}

li.TextBox,
li.Password {
  flex: 1;
}

li {
  list-style-type: none;
}

button {
  background-color: var(--cta-color);
  box-shadow: none;
  display: flex;
  width: 100%;
  height: 44px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  border-radius: var(--cta-border-radius);
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  /* margin-top: 44px; */
  cursor: pointer;
  font-family: var(--font-medium);
}

a {
  display: none;
}

.peer:placeholder-shown ~ .peer-label {
  top: 0.5rem;
}

.peer:focus ~ .peer-label {
  top: -0.875rem;
}

.attrEntry {
  position: relative;
}

ul > li .attrEntry {
  display: flex;
  margin: 0;
}

.CheckboxMultiSelect .attrEntry {
  display: flex;
  margin: 0;
}

.pageLevel#claimVerificationServerError {
  text-align: center;
  width: 96%;
  place-content: center;
}

@media screen and (max-width: 992px) {
  body {
    background-color: var(--body-bg-mobile);
  }
  #api {
    flex-direction: column;
  }

  #attributeVerification {
    padding: 12px;
    margin: 0px;
  }

  .row {
    flex-direction: column;
    gap: 10px;
  }

  .attrEntry {
    margin: 12px;
  }
  .options {
    flex-direction: row;
  }
  .claims-provider-list-buttons {
    width: 100%;
    height: auto;
    background: none;
    background-color: white;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  #localAccountForm {
    width: 100%;
  }
  .social .intro {
    display: flex;
    padding: 0px 10px;
  }

  #FacebookExchange {
    font-size: 0px;
    width: 40px;
    height: 40px;
    padding: 0px;
    background: url("https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/facebook_mobile.svg") no-repeat;
    margin: 0px 12px;
  }

  #FacebookExchange::after {
    display: none;
  }
  #FacebookExchange::before {
    display: none;
  }

  #GoogleExchange {
    font-size: 0px;
    width: 40px;
    height: 40px;
    padding: 0px;
    background: url("https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/google_mobile.svg") no-repeat;
    margin: 0px 12px;
  }

  #GoogleExchange::after {
    display: none;
  }
  #GoogleExchange::before {
    display: none;
  }

  #AppleExchange {
    font-size: 0px;
    width: 40px;
    height: 40px;
    padding: 0px;
    background: url("https://qab2chtmlcontent.blob.core.windows.net/b2c/OG/assets/images/apple_mobile.svg") no-repeat;
    margin: 0px 12px;
  }

  #AppleExchange::after {
    display: none;
  }

  #AppleExchange::before {
    display: none;
  }

  .localAccount .intro {
    display: none;
  }

  .divider:nth-child(2) {
    width: 40%;
    height: auto;
    position: relative;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    text-align: center;
    margin: 0;
    align-self: center;
    background-color: #ffffff;
    border-radius: 0px;
    border: none;
    justify-self: center;
    font-size: 16px;
    font-weight: 300;
    color: #737373;
    padding: 0px;
  }

  .divider h2 {
    font-weight: 300;
    font-size: 18px;
    text-transform: lowercase;
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  .divider:nth-child(2)::before,
  .divider:nth-child(2)::after {
    display: flex;
    flex: 1;
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 50%;
    background-color: var(--divider-bg);
  }

  .divider:nth-child(2)::before {
    left: -20px; /* Adjust the distance from the text to the left line */
  }

  .divider:nth-child(2)::after {
    right: -20px; /* Adjust the distance from the text to the right line */
  }

  .entry-item {
    width: 80%;
  }

  .buttons {
    width: 100%;
  }

  .pageLevel {
    width: 80%;
    min-height: 30px;
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .create {
    margin-top: 30px;
  }

  .Password .attrEntry .itemLevel {
    font-size: 14px;
    top: 59px !important;
  }
  .eclub-item-img {
    height: 60px !important;
    width: 100px !important;
  }

  .CheckboxMultiSelect:nth-of-type(2) .attrEntry {
    padding-bottom: 10px !important;
  }

  .row .itemLevel {
    margin-top: 0px !important; 
  }
}

.secondarySubscriptions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

#true_option {
  pointer-events: none;
}

ul > li:nth-of-type(1) .attrEntry {
  gap: 0px;
}

.secondarySubscriptionsContainer {
  width: 100%;
  position: relative;
}

.error {
  color: var(--error);
}

#attributeList .error {
  position: absolute;
}

.error p {
  margin-block-start: 0px;
  margin-block-end: 20px;
}

.row > li > .error {
  margin-top: -10px;
}

.row .itemLevel {
  margin-top: 5px;
  position: absolute;
  inset: 0;
  top: 44px;
}

.password-strength {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

button[id="cancel"] {
  display: none;
}

.Password .attrEntry {
  margin-bottom: 0px;
}

.row .attrEntry {
  display: flex;
}

.password-condition {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 12px;
  gap: 5px;
}

.eclub-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.CheckboxMultiSelect:nth-of-type(1) .itemLevel {
  top: 50px;
}

#primarySubscription_OG {
  margin-right: 10px;
}
#primarySubscription_LH {
  margin-right: 10px;
}
#primarySubscription_BB {
  margin-right: 10px;
}
#primarySubscription_YH {
  margin-right: 10px;
}
#primarySubscription_CS {
  margin-right: 10px;
}
#primarySubscription_CB {
  margin-right: 10px;
}
#primarySubscription_CG {
  margin-right: 10px;
}
#primarySubscription_EV {
  margin-right: 10px;
}
#primarySubscription_52 {
  margin-right: 10px;
}

#secondarySubscriptions[type="checkbox"] {
  margin-right: 10px;
}

.CheckboxMultiSelect:nth-of-type(2) input,
#isSecondSubscriptionAvailable_true {
  margin-right: 10px;
}

.CheckboxMultiSelect:nth-of-type(2) .attrEntry {
  padding-top: 20px;
  padding-bottom: 20px;
}

.row:nth-of-type(3) li.TextBox {
  flex: 0.5;
}

.DateTimeDropdown {
  flex: 1;
}
#dateOfBirth_label {
  position: absolute;
  z-index: 1;
}
#custom-dob-Input {
  position: relative;
}

#custom-dob-Input:placeholder-shown ~ #dateOfBirth_label {
  top: 0.5rem;
}

#custom-dob-Input:focus ~ #dateOfBirth_label {
  top: -0.875rem;
}

.DateTimeDropdown .attrEntry .itemLevel,
.Password .attrEntry .itemLevel {
  top: 58px !important;
}

.DateTimeDropdown img {
  cursor: pointer;
}

.dob-submessage {
  color: #808080;
  font-size: 10px;
  font-family: var(--font-regular);
  font-weight: 400;
  word-wrap: break-word;
  position: absolute;
  bottom: -25px;
}

/* DOB styles start */
.flatpickr-calendar {
  border-radius: 8px;
  box-shadow: 0px 4.604812145233154px 8.0963716506958px rgba(0, 0, 0, 0.07);
  width: 324px;
}
.flatpickr-months {
  align-items: center;
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.flatpickr-month {
  position: static !important;
  -webkit-flex: initial !important;
  flex: initial !important;
  margin-left: 10px;
  margin-right: 10px;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  position: static !important;
}
.flatpickr-current-month {
  position: static !important;
  width: auto !important;
}
.flatpickr-prev-month,
.flatpickr-next-month,
.flatpickr-current-month {
  padding: 0px !important;
  height: auto !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #303030 !important;
  font-size: 14px !important;
  font-family: var(--font-regular) !important;
  font-weight: 500 !important;
  line-height: 21.7px !important;
  letter-spacing: 0.34px !important;
  word-wrap: break-word !important;
}

.flatpickr-monthDropdown-months {
  margin: 0px !important;
  border: 1px solid var(--calendar-cta-color) !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--calendar-cta-color) !important;
  font-family: var(--font-regular) !important;
  font-weight: 500 !important;
  text-align: center;
  text-align-last: center; /* safari text align center */
  /* hide down arrow */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.numInputWrapper {
  margin-left: 8px !important;
  border: 1px solid var(--calendar-cta-color) !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
}
.flatpickr-current-month {
  font-size: 14px !important;
  color: var(--calendar-cta-color) !important;
  font-family: var(--font-regular) !important;
  font-weight: 500 !important;
}
.flatpickr-weekdays {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
}
.flatpickr-weekday {
  color: #3c3c43 !important;
  font-size: 12px !important;
  font-family: var(--font-regular) !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  word-wrap: break-word !important;
}
.numInput {
  text-align: center;
  padding: 0px !important;
}
.flatpickr-day {
  color: black !important;
  font-family: var(--font-regular) !important;
}
.flatpickr-day.prevMonthDay {
  color: #c6c6c6 !important;
  font-family: var(--font-regular) !important;
}
.flatpickr-day.nextMonthDay {
  color: #c6c6c6 !important;
  font-family: var(--font-regular) !important;
}
.flatpickr-day.flatpickr-disabled {
  color: #c6c6c6 !important;
  font-family: var(--font-regular) !important;
}
.flatpickr-day.selected {
  background: var(--calendar-cta-color) !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff !important;
  border-color: var(--calendar-cta-color) !important;
}
/* DOB styles end */

[type="checkbox"] {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

[type="checkbox"]:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="checkbox"] {
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
  color: var(--checkbox-color);
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  cursor: pointer;
}

[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type="checkbox"] {
  border-radius: 4px;
  cursor: pointer !important;
}

/* @media screen and (max-width: 992px) {
  #api {
    flex-direction: column;
  }

} */

@media screen and (max-width: 1280px) {
  #attributeVerification {
    padding: 60px;
  }
}
@media screen and (max-width: 1200px) {
  #attributeVerification {
    padding: 40px;
  }

  ul {
    margin: 0px -40px;
    padding: 10px 40px;
    background-color: var(--eclub_bg);
  }
  /*
  .row {
    flex-direction: column;
  } */
}

.signup-subheader {
  width: 100%;
  background-color: var(--bg-signup-header);
  padding: 21px 0px;
  text-align: center;
  border-bottom: 1px solid #d6d6d6;
}

.signup-subheader h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--subheader-heading-color);
  font-size: 20px;
  font-family: var(--font-bold);
  font-weight: 800;
  line-height: 22px;
}

.signup-subheader p {
  margin: 0;
  color: #606060;
  font-family: var(--font-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

#subheader-login-cta {
  margin: 0;
  cursor: pointer;
  color: var(--subheader-login-cta-color);
  font-family: var(--font-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.signup-subheader-mobile {
  display: none;
}

#subheader-login-cta-mobile {
  text-align: center;
  font-family: var(--font-regular);
  cursor: pointer;
  color: var(--subheader-login-cta-color);
}

@media (max-width: 992px) {
  .signup-subheader {
    background-color: var(--bg-signup-header);
    padding: 0px;
    text-align: center;
    border-bottom: none;
  }
  .signup-subheader h3 {
    margin-top: 32px;
    color: var(--subheader-heading-color);
    font-family: var(--font-regular);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
  }
  /* .signup-subheader p {
    display: none;
  } */

  .signup-subheader-mobile {
    display: inherit;
    text-align: center;
  }

  .buttons:nth-last-child(2) {
    width: 100%;
  }

  .Password .attrEntry .itemLevel {
    font-size: 14px;
    top: 59px !important;
  }
}

.secondarySubscriptions {
  overflow: hidden;
  max-height: 100%;
}

.CheckboxMultiSelect .attrEntry {
  align-items: center;
}

.verifying-modal .verifying_blurb,
.verifying-modal #verifying_blurb {
  display: none !important;
}

.simplemodal-wrap .verifying-modal {
  background-color: transparent !important;
}

#simplemodal-container .verifying-modal .verifying_blurb,
#simplemodal-container .verifying-modal #verifying_blurb {
  display: block !important;
}

.policy-text {
  max-width: 380px;
  font-size: 14px;
  text-align: center;
  word-wrap: break-word;
  margin: 20px auto;
  color: var(--continue-with-google-text-color);
}

.policy-link {
  display: initial;
  color: var(--create-cta-color);
  text-decoration: none;
}

.Password .attrEntry .itemLevel {
  /* display: none; */
  top: 64px;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden;
}

#logoHref {
  display: initial;
}

.chevron {
  cursor: pointer;
  padding: 2px 4px;
}

#requiredFieldMissing {
  display: none !important;
}

.arrow {
  position: absolute;
  left: 20px;
}

#dobIcon {
  display: flex !important;
}

.error {
  color: var(--error);
}

.pageLevel {
  width: 100%;
  align-self: center;
  margin-bottom: 30px;
  min-height: 40px;
  background-color: var(--page-level-error-bg);
  border: 1px solid var(--page-level-error-border);
  padding: 12px;
  border-radius: 6px;
  margin-block-end: 0px;
  color: #303030;
  font-size: 14px;
  margin-block-start: 0px;
  margin-block-end: 20px;
  font-weight: bold;
}

.DateTimeDropdown .error {
  font-size: 12px;
}

#continue[disabled] {
  opacity: 0.5;
}

#fieldIncorrect {
  display: none !important;
  min-height: 0px;
  height: 0px;
  max-height: 0px;
  padding: 0px;
  margin: 0px;
  visibility: hidden;
}

.Password .error {
  display: none;
}

.eclub-item-img {
  height: 100px;
  width: 100px;
  cursor: pointer;
}

@media screen and (max-width: 465px){
  .pageLevel#claimVerificationServerError {
    width: 90% !important;
  }
}