@charset "utf-8";
/* CSS Document */
    
    /* Import Montserrat font - must be first */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;0,900;1,900&display=swap');

    /* ============================================
      PASSWORD RESET SUCCESS PAGE STYLES
      Automated Password Reset Request
      ============================================ */

    /* CSS Variables */
    :root {
      /* Brand Colors */
    /*  --brand-primary: var(--brand-primary) ; 
      --brand-primary-hover: var(--brand-primary-hover); 
      --brand-secondary: var(--brand-secondary); 
      --brand-secondary-hover: var(--brand-secondary-hover); 

       /* Neutral Colors */
    /*--color-text-primary: #09090b;
      --color-text-secondary: #71717a;
      --color-text-tertiary: #a1a1aa;
      --color-gray-dark: #231F20;
      --color-gray-lighter: #f7f7f7;
      --color-background: #fafafa;
      --color-background-primary: #ffffff;
      --color-hover-light: #f3f4f6;
      --color-border: #e4e4e7;
      --color-success-bg: #dcfce7; 
      --color-success-text: #15803d;
	*/
      /* Typography */
     /* --font-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-size-xs: 12px;
      --font-size-sm: 14px;
      --font-size-base: 16px;
      --font-size-lg: 18px;
      --font-size-xl: 20px;
      --font-size-2xl: 24px;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-black: 900;
      --line-height-tight: 1.2;
      --line-height-normal: 1.5;
      --letter-spacing-tight: -0.6px;
	*/
      /* Spacing */
    /*  --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 12px;
      --spacing-lg: 16px;
      --spacing-xl: 24px;
      --spacing-2xl: 32px;
      --spacing-3xl: 48px;
 */
      /* Border Radius */
 /*     --radius-sm: 4px;
      --radius-md: 6px;
      --radius-lg: 8px;
      --radius-xl: 12px;
      --radius-2xl: 16px;
      --radius-full: 9999px;
*/
      /* Shadows */
  /*    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    }             
*/
    /* Reset */
   /* * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }*/
    /* Page Container */

    .outer_page_background {
        background-color: var(--color-background-light-gray);
        margin-top: 0px !important; 
        padding-top: 0px!important;
        padding-bottom: 0px !important;
    }

    .password-reset-page {
      font-family: var(--font-family-primary);
      background-color: var(--color-background);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    /* Header */
    .password-reset-header {
      background-color: var(--color-background-primary);
      padding: var(--spacing-xl);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-md);
      border-bottom: 1px solid var(--color-border);
    }
    /*.header-logo-nav {
      display: flex;
      gap: var(--spacing-xl);
      align-items: center;
    }
    .header-logo {
      height: 50px;
      width: 171px;
      object-fit: contain;
    }
    .navbar-section {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }
    .navbar-item {
      padding: var(--spacing-sm);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      text-decoration: none;
      border-radius: var(--radius-lg);
      transition: background-color 0.2s ease;
      cursor: pointer;
    }
    .navbar-item:hover {
      background-color: var(--color-hover-light);
    }
    .utility-nav {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }
    .icon-button {
      padding: var(--spacing-xs);
      border-radius: var(--radius-md);
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      transition: background-color 0.2s ease;
    }
    .icon-button:hover {
      background-color: var(--color-hover-light);
    }
    .icon-button img,
    .icon-button svg {
      width: 24px;
      height: 24px;
    }
    .navbar-divider {
      width: 1px;
      height: 32px;
      background-color: var(--color-border);
      margin: 0 var(--spacing-xs);
    }
    .points-display {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
    }
    .points-display strong {
      font-weight: var(--font-weight-bold);
    }
    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-border);
      object-fit: cover;
    }
      */
    /* Main Content */
    .password-reset-body {
      flex: 1;
      padding: var(--spacing-2xl);
      display: flex;
      justify-content: center;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-lg);
    }
    .content-wrapper {
      background-color: var(--background-primary);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-lg);
      width: 100%;
      max-width: 1440px;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3xl);
    }
    .page-header {
      border-bottom: 2px solid var(--brand-primary);
      padding-bottom: var(--spacing-xl);
    }
    .page-title {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
      letter-spacing: -0.6px;
      line-height: var(--line-height-normal);
      margin: 0;
      padding-bottom: var(--spacing-lg)
    }
    .edit-account-header-section {
      padding-bottom: 0px !important;
    }
    .edit-account-container {
      padding-top: var(--spacing-2xl) !important;
    }
    /* Form Container */
    .form-container {
      background-color: var(--color-background-primary);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--spacing-3xl);
      box-shadow: var(--shadow-lg);
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xl);
    }
    .form-section {
      display: flex;
      flex-direction: column;
      /*gap: var(--spacing-2xl);*/
    }
    .form-header {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xl);
    }
    .form-heading {
      border-bottom: 1px solid var(--color-border);
      padding-bottom: var(--spacing-md);
    }
    .form-heading h2 {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      line-height: var(--line-height-normal);
      margin: 0;
    }
    .form-heading h3 {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      line-height: var(--line-height-normal);
      margin: 0;
    }
    .form-description {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-normal);
      color: var(--color-text-primary);
      line-height: var(--line-height-normal);
    }
    /* Form Fields */
    .form-fields {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      /* added for this form only */
      padding-top: 0px !important;
    }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      padding-top: var(--spacing-xl) !important; /* added for this form only */
    }
    .form-label {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-normal);
      color: var(--color-text-primary);
      line-height: var(--line-height-normal);
    }
    .form-label-required::after {
      content: ' *';
      color: #b91c1c;
    }
    .form-input {
      background-color: var(--color-background-primary);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 6px 12px;
      font-size: var(--font-size-base);
      font-family: var(--font-family-primary);
      color: var(--color-text-primary);
      box-shadow: var(--shadow-sm);
      min-height: 36px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(147, 163, 201, 0.1);
    }
    .form-link {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-bold);
      color: var(--brand-secondary);
      text-decoration: underline;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .form-link:hover {
      color: var(--brand-secondary-hover);
    }
    .form-hint {
      font-size: var(--font-size-sm);
      color: var(--color-text-tertiary);
      line-height: var(--line-height-normal);
    }
    /* CAPTCHA Section */
    .captcha-instructions ol {
      margin-left: 24px;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
      line-height: var(--line-height-normal);
    }
    .captcha-instructions li {
      margin-bottom: var(--spacing-md);
    }
    .captcha-instructions strong {
      font-weight: var(--font-weight-bold);
    }
    .captcha-container {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      width: 100%;
    }

    .captcha-section {    
        display: flex;    
        flex-direction: column;    
        gap: var(--captcha-card-gap);    
        padding-bottom: var(--spacing-2xl);
    }

    /*.captcha-image-wrapper {
      flex: 1;
      min-width: 0;
      border: 1.5px solid var(--color-border);
      border-radius: var(--radius-2xl);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      min-height: 80px;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }*/
    .captcha-image-wrapper {    
      flex: 1;    
      min-width: 0;    
      border: 1.5px solid var(--color-border);    
      border-radius: var(--radius-sm);    
      box-shadow: var(--shadow-md);    
      overflow: hidden;
      /* min-height: 80px; */    
      background-color: #f0f0f0;   
      display: flex;    
      align-items: center;    
      justify-content: center;    
      width: fit-content !important;
    }
    .captcha-images {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      margin: 0 auto;
    }
    .captcha-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .captcha-controls {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }
    .captcha-button {
      width: 36px;
      height: 36px;
      border: 1.5px solid var(--color-border);
      border-radius: var(--radius-xl);
      background-color: var(--color-background-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-md);
      transition: background-color 0.2s ease, transform 0.2s ease;
      padding: 0;
    }
    .captcha-button:hover {
      background-color: var(--color-hover-light);
      transform: scale(1.05);
    }
    .captcha-button:active {
      transform: scale(0.95);
    }
    .captcha-button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-xl);
    }
    /* Success Message */
    .success-message-resetpw {
      background-color: var(--color-success-bg);
      border-radius: var(--radius-lg);
      padding: var(--spacing-md) var(--spacing-xl);
      box-shadow: var(--shadow-md);

      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }
    .success-message {
      display: flex;
      flex-direction:row;
      /*columns: 2;*/
      align-content: center;
      align-items: center;
      flex-wrap: nowrap;
      background-color: var(--color-success-bg);
      padding: var(--spacing-lg);
      border-radius: var(--radius-lg);
      max-width: 640px;
      margin-bottom: 0px;
    }
    .success-pnl-div{
      max-width: 640px !important; 
      margin: 0 auto; 
      border: solid 1px var(--color-border); 
      padding: var(--spacing-2xl); 
      border-radius: var(--radius-lg);    
    }

    .success-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      margin-right: var(--spacing-sm);
    }
    .success-text {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      color: var(--color-success-text);
      line-height: 20px;
      flex: 1;
      padding-top: var(--spacing-xs);
      margin-left: var(--spacing-xs);
    }
    /* Form Actions */
  /*  .form-actions {
      display: flex;
      gap: var(--spacing-xl);
      width: 100%;
    }
      */
    .form-actions {    
      display: flex;    
      /*  gap: var(--spacing-xl); */    
      width: 100%;    
      flex-direction: row;    
      padding-top: var(--spacing-2xl);
    }
    .form-actions-success {    
      display: flex;    
      /*  gap: var(--spacing-xl); */    
      width: 100%;    
      flex-direction: row;    
      padding-top: var(--spacing-2xl);
      justify-content: center;
    }

    .a {
        display: flex;
        /* gap: var(--spacing-xl); */
        width: 100%;
        padding-top: var(--spacing-2xl);
        flex: 1 1;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
    }    

    .form-button-resetpw {
      flex: 1;
      background-color: var(--brand-primary);
      color: white;
      border: none;
      border-radius: var(--radius-md);
      padding: var(--spacing-md) var(--spacing-xl);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      font-family: var(--font-family-primary);
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition: background-color 0.2s ease, transform 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-md);
      line-height: 20px;
    }
    .form-button-resetpw:hover {
      background-color: var(--brand-primary-hover);
      transform: translateY(-1px);
    }
    .form-button:active {
      transform: translateY(0);
    }
    .button-icon {
      width: 20px;
      height: 20px;
    }
    /* Footer Links */
    /*.footer-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-xl);
    }*/
/*    .footer-links {    
        display: flex;    
        flex-direction: column;    
        align-items: center;    
        padding: var(--spacing-2xl) 0 0 0;
    }

    .footer-link {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-bold);
      color: var(--brand-secondary);
      text-decoration: underline;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .footer-link:hover {
      color: var(--brand-secondary-hover);
    }
*/
    /* Footer */
  /*  .password-reset-footer {
      background-color: var(--color-gray-dark);
      border-top: 6px solid var(--brand-secondary);
      padding: var(--spacing-xl);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-md);
    }
    .footer-copyright,
    .footer-nav {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }
    .footer-text {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: white;
      padding: var(--spacing-sm);
    }
    .footer-nav .navbar-divider {
      background-color: rgba(255, 255, 255, 0.3);
    }*/
    /* Responsive Design */
    @media (max-width: 768px) {
      /*.password-reset-header {
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
      }
      .header-logo-nav {
        flex-direction: column;
        width: 100%;
      }
      .navbar-section {
        flex-wrap: wrap;
        justify-content: center;
      }
      .utility-nav {
        width: 100%;
        justify-content: space-between;
      }*/
      .password-reset-body {
        padding: var(--spacing-lg);
      }
      .content-wrapper {
        padding: var(--spacing-xl);
      }
      .form-container {
        padding: var(--spacing-xl);
      }
      .page-title {
        font-size: var(--font-size-xl);
      }
      .form-heading h2 {
        font-size: var(--font-size-xl);
      }
      .form-description {
        font-size: var(--font-size-base);
      }
      .form-actions {
        flex-direction: column;
      }
      .form-actions-success {        
        display: flex;       
          /*  gap: var 24px (--spacing-xl); */        
          width: 100%;        
          flex-direction: row;        /* 
          padding-top: var(--spacing-2xl); */        
          justify-content: center;
          /* margin: 0 auto; */
      }      
      /*.password-reset-footer {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
      }
      .footer-copyright,
      .footer-nav {
        flex-direction: column;
      }
      .navbar-divider {
        display: none;
      }*/
    }
    @media (max-width: 480px) {
      /*.header-logo {
        height: 40px;
        width: 137px;
      }
      .navbar-item {
        font-size: var(--font-size-xs);
        padding: 6px;
      }
      .points-display {
        font-size: var(--font-size-xs);
      }
      .page-title {
        font-size: var(--font-size-lg);
      }*/
      .success-pnl-div {
        padding: var(--spacing-lg);
      }
      .form-heading h2 {
        font-size: var(--font-size-lg);
      }
      .form-heading h3 {
        font-size: var(--font-size-base);
      }
      .form-description {
        font-size: var(--font-size-sm);
      }
      .captcha-container {
        flex-direction: column;
      }
      .captcha-image-wrapper {
        width: 100%;
      }
      .captcha-controls {
        flex-direction: row;
        justify-content: center;
      }
      .success-message {
        margin-bottom: var(--spacing-xl);
      }

      .form-actions-success {        
        display: flex;       
          /*  gap: var 24px (--spacing-xl); */        
          width: 100%;        
          flex-direction: row;        /* 
          padding-top: var(--spacing-2xl); */        
          justify-content: center;
          /* margin: 0 auto; */
      }

    }
    .ListControl {
        padding-left: 20px; 
        padding-top:15px; 
        background-color:white;
    }
    .left2 {
        float: left;
        width: 100%;
        padding-left: 10px; 
        padding-right: 10px;
    }
    .ButtonSpace label {  
      margin-right:30px; 
    }
    .ControlWidth {
        display:inline-block; 
        width:98%; 
        padding-right:0;
    }
    select {
      height:32px;
      padding:3px;
      margin: 0;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      border-radius:2px;
      -webkit-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
      -moz-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
      box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
      /*background: white;*/
      /*color:#888;*/
      border:none;
      outline:auto;
      display: inline-block;
      /*-webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;*/
      cursor:pointer;
    }
    .botdetect_div {
      padding-left:20%;
      max-width: 90%;
    }
    .Login_InnerBox_RestPages {
      background-color:#fff;
      border-color:#b3b3b3;
      border-radius:15px;
      border:1px solid;
      color:#828282;
      opacity:1;
      width:250px;
      margin:0 auto
    }
    @media (max-width: 400px) {
      .botdetect_div {
          padding-left:0;
      }
      .Login_InnerBox_RestPages {
          border: none;
      }
    }