/* Hide account navigation */
.nav-account {
  display: none;
}

/* Portal form styling */
.portal-form {
  border: 1px solid #98A2B3;
  border-radius: 5px;
  padding: 24px 24px 5%;
  margin: 5% 0 10%;
}

/* Row styling */
.row.mb-3 {
  flex-direction: column;
  align-items: flex-start;
  padding: 0 7%;
}

.form-control {
  margin-bottom: 0;
}

/* Heading */
#ContentContainer_MainContent_MainContent_RegisterLocalFormHeading .xrm-attribute-value {
  font-weight: 400;
  font-size: 40px;
  font-family: 'Montserrat', sans-serif;
}

/* Registration details message */
#RegistrationDetailsMessage {
  display: block;
  margin: 1% 0 2%;
  font-size: 16px;
  font-weight: 300;
}

/* Captcha and submit button alignment */
.col-md-8:has(#ContentContainer_MainContent_MainContent_CaptchaControlContainer) {
  justify-content: flex-start;
}

.col-md-8:has(#customSubmitButton) {
  display: flex;
  justify-content: flex-end;
}

#customSubmitButton {
  font-size: 16px;
  font-weight: 400;
}

  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear,
  input[type="password"]::-webkit-textfield-decoration-container,
  input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}


/* Responsive adjustments */
@media (min-width: 768px) {
  .col-form-label {
    text-align: start;
    width: 50%;
  }
  .col-md-8 {
    width: 100%;
    padding-right: 0;
  }
  .offset-md-4 {
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .col-lg-6 {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .row.mb-3 {
    padding: 0 !important;
  }
  #ctl00_ctl00_ContentContainer_MainContent_MainContent_captcha_SpamProtectorPanel p {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .col-md-8:has(#customSubmitButton) {
    justify-content: flex-start;
  }
  #customSubmitButton {
    margin-left: 0;
    width: 100%;
  }
}

/* Captcha panel default */
#ctl00_ctl00_ContentContainer_MainContent_MainContent_captcha_SpamProtectorPanel p {
  display: flex;
  flex-direction: column;
  width: 33%;
}

/* Login heading */
.login-heading-section {
  margin-top: 5%;
}

/* 1. Target the input inside your custom datepicker only */
.custom-datepicker-group .form-control {
    /* KILL the global fixed width */
    width: 100% !important; 
    max-width: none !important; 
    min-width: 0 !important;

    /* FORCE it to grow and fill the row */
    flex: 1 1 auto !important;

    /* MATCH the global height */
    height: 48px !important;
    
    /* Ensure borders align */
    border-radius: 4px 0 0 4px !important;
}

/* 2. Target the icon box to match the height exactly */
.custom-datepicker-group .input-group-addon {
    height: 48px !important;
    width: 45px !important;
    flex: 0 0 45px !important; /* Don't let the icon box shrink or grow */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-left: none !important;
}

/* 3. Ensure the container fills the parent column */
.custom-datepicker-group.input-group {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}