:root {
      --primary-color: #FF126C;
      --page-background: #1F1F1F;
      --main-content-background: #777777;
      --header-background: #414141;
      --border-radius: 0px;
      --bg-color: #777777;
      --card-bg-color: #f8f8f8;
      --text-color: #333;
      --placeholder-color: #999;
      --input-bg: #e0e0e0;
      --tg4-red: #ff126c;
      --link-color: #555555;
      --white: #ffffff;
      --black: #000000;
    }
    body {
      color: white;
      font-size: 20px;
      --font-family: "tg4regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    body.app {
      font-family: 'Roboto', sans-serif;
      background-color: #1F1F1F;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0px auto;
    }
      form {
        padding: 12px 6px;
      }
    .app {
      max-width: 1300px;
    }
    h1, h2, h3, h4, h5 {
      font-family: "proxima-nova-condensed", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    @font-face {
      font-family: tg4regular;
      font-style: normal;
      font-weight: normal;
      src: url("../fonts/tg4-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/tg4-regular-webfont.woff2") format("woff2"), url("../fonts/tg4-regular-webfont.woff") format("woff"), url("../fonts/tg4-regular-webfont.ttf") format("truetype"), url("../fonts/tg4-regular-webfont.svg#tg4regular") format("svg")
    }
    @font-face {
      font-family: proxima-nova-condensed;
      font-style: normal;
      font-weight: 400;
      src: url("../fonts/ProximaNovaCond-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNovaCond-Bold-webfont.woff2") format("woff2"), url("../fonts/ProximaNovaCond-Bold-webfont.woff") format("woff"), url("../fonts/ProximaNovaCond-Bold-webfont.ttf") format("truetype"), url("../fonts/ProximaNovaCond-Bold-webfont.svg#proxima-nova-condensed") format("svg")
    }
    .header {
        width: 100%;
        background-color: var(--header-background);
        height: 60px;
        position: relative;
        top: 0;
        margin-top: 0px;
    }
    .app .logo {
        height: 40px;
        margin: 10px 20px;
    }
    .login-container {
        background-color: var(--white);
        padding: 20px;
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    .login-box h2 {
        color: var(--text-color);
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 30px;
        margin-top: -4px;
        font-family: 'tg4regular', sans-serif;
    }
    .input-group {
        position: relative;
        text-align: left;
        margin-bottom: 20px;
    }
    .input-group label {
        display: block;
        margin-bottom: 5px;
        color: var(--text-color);
        font-size: 14px
    }
    .input-group input {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--bg-color);
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 16px;
        background-color: var());
    }
    .input-group select {
      width: 100%;
      padding: 10px;
      background-color: white; 
      border: 1px solid #ccc;
      color: #333;
      font-size: 1rem;
      border-radius: 4px;
      margin-left: 0; /* Remove margin from standard input-group styles */
      box-sizing: border-box;
      /* Reset default appearance for cleaner look */
      -webkit-appearance: none; 
      -moz-appearance: none;
      appearance: none;
    }

    /* Specific styling for select dropdowns */
    .input-group select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.7em top 50%;
        background-size: 0.65em auto;
        padding-right: 2em;
    }
    /* --- TOGGLE SWITCH STYLING --- */
    .toggle-group {
        justify-content: space-between; /* Reset alignment for the toggle */
    }

    .toggle-control {
        flex-basis: auto;
        display: flex;
        align-items: center;
        margin-left: 0;
    }

    .toggle-text {
        margin-left: 15px;
        color: #555;
        font-size: 1rem;
    }

    /* Checkbox/Toggle styling */
    .toggle-control input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

    .toggle-control .toggle-label {
        display: block;
        width: 40px;
        height: 20px;
        background-color: #ccc; 
        border-radius: 10px;
        cursor: pointer;
        position: relative;
        transition: background-color 0.2s;
    }

    .toggle-control .toggle-label::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
        transition: transform 0.2s;
    }

    /* Checked state: accent color */
    .toggle-control input[type="checkbox"]:checked + .toggle-label {
        background-color: var(--primary-color); 
    }

    .toggle-control input[type="checkbox"]:checked + .toggle-label::after {
        transform: translateX(20px);
    }

    .options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .remember-me {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--link-color);
    }
    .remember-me input {
        margin-right: 5px;
    }
    .forgot-password {
        font-size: 14px;
        color: var(--link-color);
        text-decoration: none;
        font-weight: bold;
        text-align: right;
        display: block;
        width: 100%;
    }
    .sign-in-btn {
        width: 100%;
        padding: 15px;
        background-color: var(--black);
        color: white;
        font-size: 16px;
        font-weight: 700;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-transform: uppercase;
        transition: background-color 0.3s ease;
    }
    .sign-in-btn:hover {
        background-color: #a7d048ff;
    }
    .app footer {
      background: #eeeeee;
      margin: 20px -26px -20px;
      padding: 20px 0px;
      font-size: 14px;
      color: #666666;
      text-align: left;
      line-height: 1.3rem;
      margin-bottom: -40px;
    }
    .register-link {
        font-size: 14px;
        color: var(--link-color);
        text-align: center;
    }
    .register .register-link {
        margin-top: 15px;
        text-align: left;
        margin-left: 4px;
    }
    .register-link a {
        color: var(--link-color);
        text-decoration: none;
        font-weight: bold;
    }
    .error-message {
        border-top: 2px solid #c80000;
        border-radius: 4px;
        background-color: #fce6e6;
        padding: 15px;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: Arial, sans-serif;
        color: #c80000;
        display: none;
    }
    .error-message p {
        font-size: 16px;
        font-weight: 500;
        margin: 10px 0;
        text-align: center;
    }
    .error-message .exclamation-icon {
        font-size: 20px;
        margin-right: 10px;
        vertical-align: middle;
    }
    h2.section-title {
            font-size: 22px;
            margin-bottom: 0.2em;
    }