/* ================== Pixels App Main Stylesheet ================== */
:root {
  /* Typography */
  --font-family: "Albert Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-size: 12px;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 800;

  /* Palette */
  --text-color: #252B2A;
  --dark-color: #1C1B1F;
  --dark-color-secondary: #333333;
  --light-color: #EAEAEA;
  --white-color: #ffffff;

  /* Cells */
  --cell-color-green: #BEE97E4D;
  --cell-color-blue:  #7EB8E94D;
  --cell-color-red:   #FF7BAC4D;
  --cell-border-color: #EAEAEA;

  /* Buttons */
  --button-default-hover: #252525;
  --button-default-disabled: #9E9E9E;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size);
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  height: 100vh;
  overflow: visible;
  margin: 0;
  padding: 0;
  background: var(--white-color);
}

/* ----------------------------- Login Forms ----------------------------- */
.login-container {
      background: white;
      padding:10px 80px 50px 80px;
      margin: 30px 0;
      border-radius: 20px;
      border:1px solid var(--cell-border-color);
  }
  .form-inner{
    width: 80%;
  }
.logo-login-page{
  position: relative;
  top:-34px;
}
  .tab-container {
      display: flex;
      margin:0 0 40px 0;
      position: relative;
  }
  
  .tab-item {
      flex: 1;
      text-align: center;
      padding-bottom: 15px;
      font-size: 28px;
      font-weight: 600;
      color: var(--button-default-disabled);
      cursor: pointer;
      background: none;
      border: none;
      position: relative;
  }
  
  .tab-item.active {
      color: var(--dark-color);
      border-bottom: 3px solid transparent;
      border-image: linear-gradient(90deg, rgba(255, 147, 30, 0.3) 0%, rgba(255, 123, 172, 0.3) 50.48%, rgba(101, 186, 247, 0.3) 100%);
      border-image-slice: 1;
  }
  
  
  .btn-social {
      width: 100%;
      padding: 14px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 500;
      border: 1px solid #dee2e6;
      background: white;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.2s;
  }
  
  .btn-social:hover {
      background-color: #f8f9fa;
  }
  
  .btn-google {
      color: #333;
  }
  
  .btn-facebook {
      background-color: #4285F4;
      color: white;
      border-color: #4267B2;
  }
  
  .btn-facebook:hover {
      background-color: #365899;
  }
  
  .google-icon {
      width: 20px;
      height: 20px;
  }
  
  .divider {
      text-align: center;
      margin: 30px 0;
      position: relative;
  }
  
  .divider::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
      background-color: #e9ecef;
  }
  
  .divider span {
      background: white;
      padding: 0 15px;
      position: relative;
      font-size: 14px;
      color:var(--button-default-disabled);
  }
  .fields-group{
    border:1px solid var(--cell-border-color);
    padding:5px 8px;
    border-radius: 8px;
  }
  .form-label {
      font-size: 14px;
      color:var(--button-default-disabled);
      margin:0;
      font-weight: 400;
  }
  
  .form-control {
      padding: 0;
      font-size: 15px;
      border: none;
      border-radius: 0;
      background: transparent;
  }
  
  .form-control:focus {
      box-shadow: none;
      border-bottom-color: #ff9466;
      background: transparent;
  }
  
  .password-wrapper {
      position: relative;
  }
  
  .password-toggle {
      position: absolute;
      right: 5px;
      top: 8%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #6c757d;
      cursor: pointer;
      padding: 5px;
  }
  
  .trouble-link {
      text-align: center;
      margin: 20px 0 30px;
  }
  
  .trouble-link a {
      color: var(--button-default-disabled);
      font-size: 14px;
      text-decoration: none;
  }
  
  .trouble-link a:hover {
      color: #212529;
  }
  
  .btn-login {
      width: 100%;
      padding: 14px;
      background-color: #2d3436;
      color: white;
      border: none;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 20px;
      transition: all 0.2s;
  }
  
  .btn-login:hover {
      background-color: #1a1d1e;
  }
  
  .field-instructions span,
  .nonprofit-text {
      text-align: center;
      font-size: 14px;
      color: var(--dark-color);
  }
  .field-instructions span{
    display: block;
    padding: 5px 0 5px 35px;
    text-align: left;
    background: url('../img/error-icon.svg') center left no-repeat;
  }
  .nonprofit-text a {
      color: var(--dark-color);
      text-decoration: none;
      font-weight: var(--font-weight-normal);
  }
  
  .nonprofit-text a:hover {
      text-decoration: underline;
  }
  
  .tab-content {
      display: none;
  }
  
  .tab-content.active {
      display: block;
  }