/*
© 2026 DayTraders.com. All rights reserved.
ATOM PROFILE THEME - style.css
Namespace: --ap-* (CSS variables)
Class prefix: atom- / traders-
Safe to load alongside index.css, menu.css, compat.css
*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=JetBrains+Mono:wght@500&display=swap");

/* ============================================================
   TOKENS
   ============================================================ */

:root {
    --ap-red: #d63b3b;
    --ap-red-dim: #7a1f1f;
    --ap-green: #4bde81;
    --ap-neutral: #606060;
    --ap-bg0: #0a0a0a;
    --ap-bg1: #111111;
    --ap-bg2: #181818;
    --ap-bg3: #1f1f1f;
    --ap-border: #252525;
    --ap-border2: #2e2e2e;
    --ap-text: #c8c8c8;
    --ap-text-muted: #686868;
    --ap-white: #ffffff;
    --ap-border-hover: #3a3a3a;
    --ap-scrollbar: #2e3235;
    --ap-gold: #b28430;
    --ap-invoice: #c0c0c0;
    --ap-font-body: "DM Sans", sans-serif;
    --ap-font-mono: "JetBrains Mono", monospace;
}

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ap-bg0);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--ap-bg0);
    color: var(--ap-text);
    font-family: var(--ap-font-body);
}

/* Grid texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(var(--ap-border) 1px, transparent 1px), linear-gradient(90deg, var(--ap-border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

/* Scanline overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   SHARED ANIMATION
   ============================================================ */

@keyframes ap-flicker-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ap-pulse-badge {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ============================================================
   LAYOUT - layout.phtml
   ============================================================ */

/* Mobile-first: stack header above content vertically */
.traders-section {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background: var(--ap-bg0);
}

/* ---- Mobile header ---- */

/* Visible by default on mobile, hidden on desktop where sidebar takes over */
.traders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 14px 16px;
    background: var(--ap-bg1);
    border-bottom: 1px solid var(--ap-border2);
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: visible;
}

.traders-header__logo img {
    height: 28px;
}

.traders-header__hamburger {
    background: none;
    border: 1px solid var(--ap-border2);
    cursor: pointer;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.traders-header__hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ap-text);
    transition: all 0.2s;
}

/* ---- Content area ---- */

.traders-content {
    flex: 1;
    min-height: 100vh;
    padding: 20px 16px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Desktop: sidebar is sticky in flow (sidebar.css), content fills the rest */
@media only screen and (min-width: 1300px) {
    .traders-section {
        flex-direction: row;
        align-items: flex-start;
    }

    .traders-header {
        display: none;
    }

    .traders-content {
        margin-left: 0;
        padding: 32px 36px;
        width: 0;
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---- Flash banner ---- */

.traders-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-bottom: 24px;
    border: 1px solid var(--ap-border2);
    background: var(--ap-bg2);
    border-left: 3px solid var(--ap-green);
}

.traders-banner_success {
    border-left-color: var(--ap-green);
}

.traders-banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.traders-banner__image img {
    width: 18px;
    height: 18px;
}

.traders-banner__description {
    font-size: 13px;
    color: var(--ap-text);
}

.traders-banner-actions__close {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.traders-banner-actions__close:hover {
    opacity: 1;
}

.traders-banner-actions__close img {
    width: 14px;
    height: 14px;
}

/* ============================================================
   USER CARD - _traders_user.phtml
   ============================================================ */

.atom-user-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: var(--ap-bg1);
    border: 1px solid var(--ap-border2);
    border-left: 3px solid var(--ap-red);
    padding: 14px 20px;
    margin-bottom: 20px;
    position: relative;
    animation: ap-flicker-in 0.4s ease-out both;
}

/* Corner accent */
.atom-user-card::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ap-red);
    border-bottom: 2px solid var(--ap-red);
}

.atom-user-card__avatar {
    flex-shrink: 0;
}

.atom-user-card__avatar a {
    display: block;
}

.atom-user-card__avatar img {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ap-border2);
    display: block;
    transition: border-color 0.15s;
}

.atom-user-card__avatar a:hover img {
    border-color: var(--ap-red);
}

.atom-user-card__identity {
    flex-shrink: 0;
    min-width: 0;
    padding-right: 16px;
    border-right: 1px solid var(--ap-border);
}

.atom-user-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atom-user-card__email {
    font-size: 10px;
    color: var(--ap-text-muted);
    font-family: var(--ap-font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats row - fills remaining space */
.atom-user-card__stats {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}

.atom-user-card__stat {
    padding: 0 16px;
    border-right: 1px solid var(--ap-border);
    min-width: 80px;
}

.atom-user-card__stat:last-child {
    border-right: none;
}

.atom-user-card__stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ap-text-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}

.atom-user-card__stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-white);
    font-family: var(--ap-font-mono);
    white-space: nowrap;
}

.atom-user-card__stat-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--ap-red);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.atom-user-card__stat-link:hover {
    opacity: 0.75;
}

/* Affiliate block - full width below the row */

/* ============================================================
   PROFILE FORM - profile.phtml
   ============================================================ */

/* ---- Page header bar ---- */

/* ---- Notice banner ---- */

/* ---- Form panel ---- */

/* Corner accent */

/* ---- Form grid ---- */

/* ---- Field ---- */

/* ---- Inputs and selects ---- */

.traders-form__input {
    width: 100%;
    background: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    border-radius: 0 !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-body) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.traders-form__input:focus {
    border-color: var(--ap-red) !important;
    background: var(--ap-bg3) !important;
}

.traders-form__input:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Read-only display value */

/* ---- Email action buttons ---- */

/* ---- Generic button ---- */

/* ---- Password toggle ---- */

/* ---- Submit button ---- */

/* ---- Section divider ---- */

/* ============================================================
   USER LOGIN - login page
   ============================================================ */

/* ---- Outer wrapper ---- */

.page-wraper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.browse-job.login-style3 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
}

.browse-job.login-style3 .row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.browse-job.login-style3 [class*="col-"] {
    max-width: 560px;
    width: 100%;
    float: none !important;
}

/* ---- Scroll container ---- */

.mCustomScrollBox,
#mCSB_1_container {
    background: transparent !important;
}

/* ---- Login card ---- */

.login-form.style-2 {
    background: var(--ap-bg1) !important;
    border: 1px solid var(--ap-border2);
    position: relative;
    overflow: visible;
}

/* Nuclear reset - kill all backgrounds set by amember.css inside the card */
.login-form.style-2 .am-row,
.login-form.style-2 .am-element,
.login-form.style-2 .am-element-title,
.login-form.style-2 label,
.login-form.style-2 fieldset,
.login-form.style-2 .am-form,
.login-form.style-2 .am-login-form,
.login-form.style-2 .am-auth-form,
.login-form.style-2 .am-login-form-wrapper,
.login-form.style-2 .am-row-login-login,
.login-form.style-2 .am-row-login-pass,
.login-form.style-2 .am-row-buttons,
.login-form.style-2 .card-body,
.login-form.style-2 nav,
.login-form.style-2 .nav,
.login-form.style-2 .tab-content,
.login-form.style-2 .tab-pane {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Glowing red neon left trim */
.login-form.style-2::before {
    content: "";
    position: absolute;
    top: 10%;
    left: -2px;
    width: 1px;
    height: 80%;
    background: linear-gradient(180deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
    pointer-events: none;
    z-index: 1;
}

/* Corner accent - bottom right */
.login-form.style-2::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--ap-red);
    border-bottom: 1px solid var(--ap-red);
    pointer-events: none;
    z-index: 2;
}

/* Corner accent - top left */
.login-form.style-2 .card-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-left: 1px solid var(--ap-red);
    border-top: 1px solid var(--ap-red);
    pointer-events: none;
    z-index: 2;
}

/* Ensure form doesn't stretch outside card padding */
.am-login-form-wrapper .am-login-form-form,
.am-sendpass-form-wrapper .am-sendpass-form-form {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.am-login-form-wrapper .am-row,
.am-sendpass-form-wrapper .am-row,
.am-login-form-wrapper .am-element,
.am-sendpass-form-wrapper .am-element,
.am-login-form-wrapper input,
.am-sendpass-form-wrapper input {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.card-body {
    padding: 28px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ---- Logo ---- */

.logo-header.center {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    position: relative;
}

/* Glowing horizontal divider under logo */
.logo-header.center::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
}

/* ---- Tagline ---- */

.form-title.m-t0.center {
    text-align: center;
    margin: 0 0 20px;
}

/* ---- Hide sendpass wrapper by default, JS toggles it ---- */

.am-sendpass-form-wrapper {
    display: none;
}

/* ---- Form fieldset ---- */

.am-login-form-wrapper,
.am-sendpass-form-wrapper,
.am-form.am-auth-form,
.am-login-form,
.am-sendpass-form {
    background: transparent !important;
    border: none !important;
}

.am-login-form-wrapper fieldset,
.am-sendpass-form-wrapper fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.am-sendpass-form-wrapper fieldset legend {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ap-red) !important;
    padding: 0 0 10px 0 !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    position: relative;
}

/* Glowing divider under lost password legend */
.am-sendpass-form-wrapper fieldset legend::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
}

/* ---- Form rows ---- */

.am-login-form-wrapper .am-row,
.am-sendpass-form-wrapper .am-row {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.am-login-form-wrapper .am-element-title,
.am-sendpass-form-wrapper .am-element-title {
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ap-text-muted) !important;
    margin-bottom: 5px !important;
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
}

.am-login-form-wrapper .am-element,
.am-sendpass-form-wrapper .am-element {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.am-login-form-wrapper .am-row-login-login,
.am-login-form-wrapper .am-row-login-pass,
.am-login-form-wrapper .am-row-buttons,
.am-sendpass-form-wrapper .am-row {
    background: transparent !important;
    border-radius: 0 !important;
}

/* ---- Inputs ---- */

.am-login-form-wrapper input[type="text"],
.am-login-form-wrapper input[type="password"],
.am-login-form-wrapper input.form-control,
.am-sendpass-form-wrapper input[type="text"],
.am-sendpass-form-wrapper input.form-control {
    background-color: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    border-radius: 0 !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-body) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    height: auto !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}

.am-login-form-wrapper input[type="text"]:focus,
.am-login-form-wrapper input[type="password"]:focus,
.am-login-form-wrapper input.form-control:focus,
.am-sendpass-form-wrapper input[type="text"]:focus,
.am-sendpass-form-wrapper input.form-control:focus {
    border-color: var(--ap-red) !important;
    background-color: var(--ap-bg3) !important;
    box-shadow: none !important;
}

/* ---- Login button ---- */

#btn_login {
    background-color: var(--ap-red) !important;
    color: var(--ap-white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 28px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    font-family: var(--ap-font-body) !important;
    transition: opacity 0.15s !important;
}

#btn_login:hover {
    opacity: 0.85 !important;
}

/* ---- Forgot password / switch links ---- */

.am-form-login-switch-wrapper {
    margin-left: 12px;
}

.am-form-login-switch {
    font-size: 11px !important;
    color: var(--ap-text-muted) !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.am-form-login-switch:hover {
    color: var(--ap-red) !important;
}

/* ---- Not registered link ---- */

.am-signup-link {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    position: relative;
}

/* Glowing horizontal divider above signup link */
.am-signup-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
}

.am-signup-link span,
.am-signup-link a {
    font-size: 12px !important;
    color: var(--ap-text-muted) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.am-signup-link a:hover {
    color: var(--ap-red) !important;
}

/* ---- Lost password notice text ---- */

.am-row-sendpass-notice .am-element {
    font-size: 12px;
    color: var(--ap-text-muted);
    line-height: 1.5;
    margin-bottom: 8px !important;
}

/* ---- Reset password button ---- */

.am-row-buttons .btn.btn-primary {
    background-color: var(--ap-red) !important;
    color: var(--ap-white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 28px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    font-family: var(--ap-font-body) !important;
    transition: opacity 0.15s !important;
    box-shadow: none !important;
}

.am-row-buttons .btn.btn-primary:hover {
    opacity: 0.85 !important;
    box-shadow: none !important;
}

/* ---- Footer ---- */

.card-footer.dt_footer {
    background: transparent !important;
    border-top: none !important;
    padding: 12px 28px 20px;
    position: relative;
}

/* Glowing horizontal divider above footer */
.card-footer.dt_footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
}

.footer-credits.copyright {
    font-size: 10px;
    color: var(--ap-text-muted);
    text-align: center;
}

/* ---- Direct overrides for amember.css am-row backgrounds ---- */

.login-form .am-row,
.login-form .am-row *,
.login-form .am-element-title,
.login-form .am-element,
.login-form .am-element *:not(input):not(a) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ---- Override amember.css .am-form form background ---- */

.login-form .am-form form,
.am-login-form-wrapper .am-form form,
.am-sendpass-form-wrapper .am-form form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ---- Center login button row ---- */

.am-row.am-row-buttons .am-element {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* ---- Login form inner padding ---- */

.am-login-form-wrapper fieldset,
.am-sendpass-form-wrapper fieldset {
    padding: 20px 24px !important;
}

/* ---- Kill amember float layout on login inputs ---- */

.login-form .am-element-title,
.login-form .am-element-title label {
    float: none !important;
    width: 100% !important;
    display: block !important;
}

.login-form .am-element {
    float: none !important;
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.login-form .am-row {
    overflow: hidden !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input.form-control {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ============================================================
   DASHBOARD - member/dashboard
   Classes: traders-content__heading, traders-tile,
   traders-details, traders-card, traders-card-list,
   cancel popup buttons
============================================================ */

/* ---- Page heading ---- */

.traders-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    animation: ap-flicker-in 0.4s ease-out both;
}

/* ---- Stat tiles row ---- */

/* Scan line animation across tile tops */
@keyframes ap-tile-scan {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

/* Ambient glow pulse on the tile grid */
@keyframes ap-tile-ambient {

    0%,
    100% {
        box-shadow:
            0 0 0 1px var(--ap-border2),
            0 0 20px rgba(214, 59, 59, 0.04);
    }

    50% {
        box-shadow:
            0 0 0 1px var(--ap-border2),
            0 0 30px rgba(214, 59, 59, 0.08);
    }
}

/* R3 ombre top line across entire tile grid */

/* R3 ombre bottom line */

/* Ombre top accent per tile - starts dim, glows on hover */

/* Scanning light sweep on hover */

/* Platform login card tile variant */

/* Platform login sub-elements */

/* ---- Customer Products section ---- */

/* Shimmer sweep animation for card title bars */
@keyframes ap-shimmer-sweep {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Soft pulse for key metric values */
@keyframes ap-value-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Glow pulse for ombre lines */
@keyframes ap-glow-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.traders-details__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ap-text-muted);
    margin: 0 0 22px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ap-border);
    position: relative;
}

/* R3 wide solid, short fade + glow under section title */
.traders-details__title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d63b3b 15%, #d63b3b 85%, transparent 100%);
    filter: blur(0.3px);
    box-shadow: 0 0 4px rgba(214, 59, 59, 0.3);
    animation: ap-glow-pulse 3s ease-in-out infinite;
}

/* Section label span */

/* Cards grid */

/* ---- Account card ---- */

.traders-card {
    background: var(--ap-bg1);
    border: 1px solid var(--ap-border2);
    margin-bottom: 12px;
    position: relative;
    transition:
        border-color 0.25s,
        box-shadow 0.3s,
        transform 0.2s;
    overflow: hidden;
}

.traders-card:hover {
    border-color: rgba(214, 59, 59, 0.3);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(214, 59, 59, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transform: translateY(-1px);
}

/* VR1 red center fade, left accent bar - always visible, intensifies on hover */
.traders-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(180deg, transparent, #d63b3b, transparent);
    box-shadow: 0 0 6px rgba(214, 59, 59, 0.4);
    opacity: 0.35;
    transition:
        opacity 0.3s,
        width 0.3s,
        box-shadow 0.3s;
    z-index: 2;
}

.traders-card:hover::before {
    opacity: 1;
    width: 2px;
    box-shadow:
        0 0 10px rgba(214, 59, 59, 0.5),
        0 0 20px rgba(214, 59, 59, 0.15);
}

/* Corner accent - bottom right + top left */
.traders-card::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--ap-red);
    border-bottom: 1px solid var(--ap-red);
    opacity: 0.3;
    transition:
        opacity 0.25s,
        width 0.25s,
        height 0.25s;
}

.traders-card:hover::after {
    opacity: 0.7;
    width: 16px;
    height: 16px;
}

/* ---- Card title bar ---- */

.traders-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--ap-bg2);
    border-bottom: none;
    gap: 12px;
    position: relative;
}

/* Shimmer sweep overlay on title bar */
.traders-card:hover .traders-card__title {
    background: linear-gradient(90deg, transparent 0%, rgba(214, 59, 59, 0.04) 25%, rgba(214, 59, 59, 0.08) 50%, rgba(214, 59, 59, 0.04) 75%, transparent 100%), var(--ap-bg2);
    background-size:
        200% 100%,
        100% 100%;
    animation: ap-shimmer-sweep 2s ease-in-out;
}

/* R8 near full-width neon divider under title bar - always visible */
.traders-card__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d63b3b 10%, #d63b3b 90%, transparent 100%);
    filter: blur(0.3px);
    box-shadow: 0 0 8px rgba(214, 59, 59, 0.35);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.traders-card:hover .traders-card__title::after {
    opacity: 1;
    box-shadow:
        0 0 12px rgba(214, 59, 59, 0.5),
        0 0 24px rgba(214, 59, 59, 0.15);
}

/* Product title span inside card header */

.traders-card__title span {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ap-green);
    text-shadow: 0 0 8px rgba(75, 222, 129, 0.2);
    transition:
        text-shadow 0.2s,
        color 0.2s;
    position: relative;
    padding-left: 12px;
}

/* Green left tick before product title */

.traders-card__title span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--ap-green);
    box-shadow: 0 0 6px rgba(75, 222, 129, 0.4);
    transition:
        height 0.2s,
        box-shadow 0.2s;
}

.traders-card:hover .traders-card__title span {
    text-shadow:
        0 0 14px rgba(75, 222, 129, 0.35),
        0 0 28px rgba(75, 222, 129, 0.1);
}

.traders-card:hover .traders-card__title span::before {
    height: 20px;
    box-shadow:
        0 0 10px rgba(75, 222, 129, 0.6),
        0 0 20px rgba(75, 222, 129, 0.15);
}

/* Remove Account / action link */

/* Underline sweep on hover */

/* ---- Card data list ---- */

.traders-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.traders-card-list__item {
    padding: 14px 18px;
    border-right: 1px solid var(--ap-border);
    border-bottom: 1px solid var(--ap-border);
    transition:
        background 0.2s,
        border-color 0.2s;
    position: relative;
}

.traders-card-list__item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.traders-card-list__item:nth-child(4n) {
    border-right: none;
}

.traders-card-list__item:nth-last-child(-n + 4) {
    border-bottom: none;
}

.traders-card-list__title {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ap-text-muted);
    margin-bottom: 6px;
    transition: color 0.2s;
}

.traders-card-list__item:hover .traders-card-list__title {
    color: var(--ap-text);
}

.traders-card-list__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ap-white);
    font-family: var(--ap-font-mono);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Atom value spans - semantic styling with glow ---- */

/* Invoice - muted mono with subtle brightening on hover */

/* Invoice ID */

/* Starting balance - standard mono */

/* Current balance - the hero metric, green glow for positive */

/* Negative balance override - apply via JS or class, red glow */

/* Trading days - mono accent */

/* Started date */

/* Renewal date - subtle warning pulse hint */

/* Amount - money highlight */

/* Account ID - plain mono text */

/* Profit goal - green accent with glow */

/* Drawdown - red accent with glow */

/* Max contracts */

/* ---- Atom title spans (labels) - unified treatment ---- */

/* Legacy .atom-account selector (backwards compat) */

/* G7 ghost green divider between profit-row items */

/* .am-cta-cancel -> consolidated in CANCEL POPUP section below */

.am-cta-remove {
    background: rgba(214, 59, 59, 0.12) !important;
    color: var(--ap-red) !important;
    border: 1px solid rgba(214, 59, 59, 0.3) !important;
    padding: 9px 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    font-family: var(--ap-font-body) !important;
    transition: all 0.2s !important;
    border-radius: 0 !important;
}

.am-cta-remove:hover {
    background: var(--ap-red) !important;
    color: var(--ap-white) !important;
    box-shadow: 0 0 16px rgba(214, 59, 59, 0.3) !important;
}

/* Cancel popup warning text */
.cancel-subscription-popup-text {
    display: block;
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
}

/* Cancel yes button (atom class) */
.atom-acc-cancel-yes {
    border-radius: 0 !important;
}

/* .cancel-subscription-buttons -> consolidated in CANCEL POPUP section below */

/* ---- traders-content auto height variant ---- */

.traders-content_auto-height {
    min-height: unset;
}

/* ============================================================
   DASHBOARD RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .traders-card-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .traders-card-list__item:nth-child(4n) {
        border-right: 1px solid var(--ap-border);
    }

    .traders-card-list__item:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 640px) {

    .traders-card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .traders-card-list__item:nth-child(3n) {
        border-right: 1px solid var(--ap-border);
    }

    .traders-card-list__item:nth-child(2n) {
        border-right: none;
    }

    .traders-card__title {
        flex-wrap: wrap;
    }

    .traders-card-list__item {
        padding: 12px 14px;
    }

    /* Reduce glow intensity on mobile for perf */
    .traders-card:hover {
        transform: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .traders-card:hover .traders-card__title {
        animation: none;
    }
}

/* ============================================================
   PAYMENT HISTORY - member/dashboard/payment-history
   Classes: traders-main, traders-tab, traders-table
============================================================ */

/* ---- Page wrapper ---- */

.traders-main {
    animation: ap-flicker-in 0.4s ease-out both;
}

/* ---- Tab content wrapper ---- */

.traders-tab__content {
    display: none;
}

.traders-tab__content_active {
    display: block;
}

/* ---- Table container ---- */

.traders-table {
    border: 1px solid var(--ap-border2);
    background: var(--ap-bg1);
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ap-scrollbar) transparent;
}

.traders-table::-webkit-scrollbar {
    height: 4px;
}

.traders-table::-webkit-scrollbar-track {
    background: transparent;
}

.traders-table::-webkit-scrollbar-thumb {
    background: var(--ap-scrollbar);
    border-radius: 2px;
}

.traders-table::-webkit-scrollbar-thumb:hover {
    background: var(--ap-red);
}

/* Wider variant used on history page */
.traders-table_longer {
    min-width: 600px;
}

/* ---- Header row ---- */

.traders-table__row.traders-table__cell_parent {
    background: var(--ap-bg2);
    border-bottom: 2px solid var(--ap-red);
    position: sticky;
    top: 0;
    z-index: 2;
}

.traders-table__row.traders-table__cell_parent .traders-table__cell {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ap-text-muted);
    padding: 11px 14px;
    background: var(--ap-bg2);
    border-right: 1px solid var(--ap-border);
    border-bottom: none;
    white-space: nowrap;
}

.traders-table__row.traders-table__cell_parent .traders-table__cell:last-child {
    border-right: none;
}

/* ---- Data rows ---- */

.traders-table__row {
    display: grid;
    grid-template-columns: 120px 130px 1fr 160px 100px;
    align-items: center;
    border-bottom: 1px solid var(--ap-border);
    transition: background 0.12s;
}

.traders-table__row:last-child {
    border-bottom: none;
}

.traders-table__row:not(.traders-table__cell_parent):nth-child(even) {
    background: var(--ap-bg0);
}

.traders-table__row:not(.traders-table__cell_parent):nth-child(odd) {
    background: var(--ap-bg1);
}

.traders-table__row:not(.traders-table__cell_parent):hover {
    background: var(--ap-bg2);
}

/* ---- Cells ---- */

.traders-table__cell {
    padding: 11px 14px;
    font-size: 12px;
    color: var(--ap-text);
    border-right: 1px solid var(--ap-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--ap-font-body);
}

.traders-table__cell:last-child {
    border-right: none;
}

/* Date column - muted mono */
.traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:first-child {
    color: var(--ap-text-muted);
    font-family: var(--ap-font-mono);
    font-size: 11px;
}

/* Invoice column - mono red tint */
.traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(2) {
    font-family: var(--ap-font-mono);
    font-size: 11px;
    color: var(--ap-invoice);
    letter-spacing: 0.04em;
}

/* Product column - allow wrapping on longer names */
.traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(3) {
    white-space: normal;
    color: var(--ap-white);
    font-weight: 500;
}

/* Payment method column */
.traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(4) {
    font-size: 11px;
    color: var(--ap-text-muted);
}

/* Amount column - mono, bright */
.traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(5) {
    font-family: var(--ap-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-white);
    text-align: right;
}

/* ============================================================
   PAYMENT HISTORY RESPONSIVE
============================================================ */

@media (max-width: 900px) {
    .traders-table__row {
        grid-template-columns: 100px 110px 1fr 120px 90px;
    }
}

@media (max-width: 640px) {
    .traders-table__row {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ap-border2);
    }

    .traders-table__row.traders-table__cell_parent {
        display: none;
    }

    .traders-table__cell {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: normal;
        overflow: visible;
    }

    .traders-table__cell:last-child {
        border-bottom: none;
    }

    /* Show label via data-label on mobile */
    .traders-table__cell::before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ap-text-muted);
        flex-shrink: 0;
        margin-right: 12px;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(5) {
        text-align: left;
    }
}

/* ============================================================
   AFFILIATES - member/aff/aff
   Classes: traders-info, traders-card_flex-row, traders-card__content,
   traders-card-image-list, traders-form__item, traders-form__input-container,
   traders-form__input-content, traders-input__label, traders-form__input_readonly,
   traders-form__input_textarea, traders-form__copy, traders-form__clear,
   traders-tab_container, am-input-filter-wrapper
============================================================ */

/* ---- Affiliate info / rules block ---- */

/* ---- Tab container ---- */

.traders-tab_container {
    margin-bottom: 24px;
}

/* ---- Form items (coupon code / affiliate link inputs) ---- */

.traders-form__item {
    margin-bottom: 20px;
}

.traders-form__item:last-child {
    margin-bottom: 0;
}

.traders-form__input-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.traders-form__input-container_full-width {
    width: 100%;
    margin-bottom: 20px;
}

.traders-input__label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ap-text-muted);
}

.traders-form__input-content {
    position: relative;
    display: flex;
    align-items: center;
}

/* Read-only copy fields */
.traders-form__input_readonly {
    background: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    border-bottom: 2px solid var(--ap-border-hover) !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-mono) !important;
    font-size: 12px !important;
    padding: 9px 40px 9px 12px !important;
    cursor: default !important;
    box-sizing: border-box !important;
    min-width: 0;
    flex: 1;
}

/* Textarea for source code */
.traders-form__input_textarea {
    background: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-mono) !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
    border-radius: 0 !important;
}

/* Copy button */
.traders-form__copy {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.traders-form__copy:hover {
    opacity: 1;
}

.traders-form__copy img {
    width: 14px;
    height: 14px;
    display: block;
}

/* Clear / X button on search input */
.traders-form__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.traders-form__clear:hover {
    opacity: 1;
}

.traders-form__clear img {
    width: 12px;
    height: 12px;
    display: block;
}

/* .am-input-filter -> consolidated in HARDENED OVERRIDE section below */

/* ---- Banner card - flex row layout ---- */

.traders-card_flex-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--ap-border2);
    background: var(--ap-bg1);
    margin-bottom: 12px;
    transition: border-color 0.15s;
    position: relative;
}

.traders-card_flex-row:hover {
    border-color: var(--ap-border-hover);
}

/* Left red accent on hover */
.traders-card_flex-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--ap-red), transparent);
    filter: blur(0.5px);
    box-shadow:
        0 0 6px var(--ap-red),
        0 0 12px rgba(214, 59, 59, 0.25);
    opacity: 0;
    transition: opacity 0.2s;
}

.traders-card_flex-row:hover::before {
    opacity: 1;
}

/* Left column - metadata list */
.traders-card_flex-row>div:first-child {
    flex: 0 0 280px;
    min-width: 0;
}

/* Right column - banner image preview */
.traders-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.traders-card__content img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--ap-border2);
    transition: border-color 0.15s;
}

.traders-card__content img:hover {
    border-color: var(--ap-red);
}

/* ---- Banner metadata rows ---- */

.traders-card-image-list {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ap-border);
}

.traders-card-image-list:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.traders-card-image-list__title {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ap-text-muted);
    margin: 0 0 3px 0;
}

.traders-card-image-list__value {
    font-size: 12px;
    color: var(--ap-text);
    font-family: var(--ap-font-mono);
    word-break: break-all;
    display: block;
}

/* Link variant */
.traders-card-image-list__value_link {
    color: var(--ap-red);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--ap-font-mono);
    font-size: 12px;
    text-align: left;
    transition: opacity 0.15s;
}

.traders-card-image-list__value_link:hover {
    opacity: 0.75;
}

/* ============================================================
   AFFILIATES RESPONSIVE
============================================================ */

@media (max-width: 900px) {
    .traders-card_flex-row {
        flex-direction: column;
    }

    .traders-card_flex-row>div:first-child {
        flex: none;
        width: 100%;
    }

    .traders-card__content {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {

    .traders-form__input_readonly {
        font-size: 11px !important;
    }
}

/* ============================================================
   AFFILIATE STATS - member/aff/member/stats
   Classes: traders-tabs, traders-table__cell_bold,
   traders-pagination, aff-detail link
============================================================ */

/* ---- Tab buttons bar ---- */

.traders-tabs {
    display: flex;
    gap: 1px;
    background: var(--ap-border);
    border: 1px solid var(--ap-border2);
    border-bottom: none;
    margin-bottom: 0;
}

.traders-tabs__item {
    background: var(--ap-bg1);
    color: var(--ap-text-muted);
    border: none;
    padding: 10px 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-family: var(--ap-font-body);
    transition:
        background 0.12s,
        color 0.12s;
    position: relative;
}

.traders-tabs__item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.15s;
}

.traders-tabs__item:hover {
    background: var(--ap-bg2);
    color: var(--ap-white);
}

.traders-tabs__item_active {
    background: var(--ap-bg2);
    color: var(--ap-white);
}

.traders-tabs__item_active::after {
    background: var(--ap-red);
}

/* ---- Bold total row ---- */

/* ---- Inline links inside table cells ---- */

.traders-table__cell a {
    color: var(--ap-text);
    text-decoration: none;
    transition: color 0.12s;
}

.traders-table__cell a:hover {
    color: var(--ap-red);
}

/* Clicks detail link */
a.aff-detail {
    display: inline-block;
    font-family: var(--ap-font-mono);
    font-size: 11px;
    color: var(--ap-red);
    text-decoration: none;
    padding: 2px 6px;
    border: 1px solid rgba(214, 59, 59, 0.25);
    background: rgba(214, 59, 59, 0.06);
    transition: all 0.15s;
    letter-spacing: 0.04em;
}

a.aff-detail:hover {
    background: rgba(214, 59, 59, 0.14);
    border-color: rgba(214, 59, 59, 0.5);
}

/* ---- Pagination / download row ---- */

/* ============================================================
   AFFILIATE KEYWORDS - member/aff/member/keywords
   Classes: traders-main_keyword, am-info, traders-info sub-elements,
   am-grid-wrap, am-grid-title, am-filter-wrap, am-grid table
============================================================ */

/* ---- Keyword page main variant ---- */

/* ---- Inline notice banner ---- */

.am-info {
    background: rgba(214, 59, 59, 0.06) !important;
    border: 1px solid rgba(214, 59, 59, 0.2) !important;
    border-left: 3px solid var(--ap-red) !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    color: var(--ap-text) !important;
    margin-bottom: 20px !important;
    font-family: var(--ap-font-body) !important;
    background-color: rgba(214, 59, 59, 0.06) !important;
}

.am-info a {
    color: var(--ap-red) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.am-info a:hover {
    opacity: 0.75 !important;
}

/* ---- traders-info sub-elements ---- */

/* ---- am-grid wrapper ---- */

/* ---- Grid title ---- */

/* ---- Filter bar ---- */

/* .am-filter-wrap .filter -> consolidated in HARDENED OVERRIDE section below */

/* ---- am-grid table - nuclear override of amember.css defaults ---- */

/* Header */

/* Kill all amember.css row backgrounds then re-apply */

/* Cells */

/* ============================================================
   KEYWORDS RESPONSIVE
============================================================ */

/* ============================================================
   AFFILIATE PAYOUTS - member/aff/member/payout
============================================================ */

/* ============================================================
   AFFILIATE CLICKS DETAIL POPUP - aff-detail modal
   Classes: am-popup-header, am-popup-title, am-popup-content,
   am-grid-row (no even/odd), td links inside am-grid
============================================================ */

/* .am-popup-header/title -> consolidated in CANCEL POPUP MOBILE section below */

/* ---- Popup content scroll area ---- */

/* ---- am-grid-row without even/odd (clicks detail modal) ---- */
/* Uses nth-child since no even/odd classes are present */

/* ---- Links inside am-grid td (referer URLs) ---- */

/* ---- am-grid th used as header row (no thead in this modal) ---- */

/* ============================================================
   CANCEL SUBSCRIPTION POPUP CONTENT
   Classes: cancel-subscription-popup wrapper,
   warning text, am-popup-close button
============================================================ */

/* .cancel-subscription-popup -> consolidated in CANCEL POPUP MOBILE section below */

/* cancel-subscription-popup-text -> consolidated in CANCEL POPUP MOBILE section below */

/* .am-popup-close -> consolidated in CANCEL POPUP MOBILE section below */

/* ============================================================
   CANCELLATION FEEDBACK FORM - misc/cancel-feedback
   Classes: .am-form (standalone), .am-row, .am-element-title,
   .am-element, label.radio, .am-el-wide textarea,
   submit button, keep-subscribed link
============================================================ */

/* ---- Form wrapper ---- */

.am-form {
    background: var(--ap-bg1) !important;
    background-color: var(--ap-bg1) !important;
    border: 1px solid var(--ap-border2) !important;
    padding: 24px !important;
    font-family: var(--ap-font-body) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.am-form>form,
.am-form form {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Form rows ---- */

.am-form .am-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
}

.am-form .am-row:last-child {
    margin-bottom: 0 !important;
}

/* ---- Labels / titles ---- */

.am-form .am-element-title {
    margin-bottom: 10px !important;
    background: transparent !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}

.am-form .am-element-title label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ap-text-muted) !important;
    font-family: var(--ap-font-body) !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    text-align: left !important;
}

.am-form .am-element-title .required {
    color: var(--ap-red) !important;
}

/* ---- Element wrapper ---- */

.am-form .am-element {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
}

/* ---- Radio options ---- */

/* ---- Textarea ---- */

/* ---- Submit button row ---- */

.am-form input[type="submit"] {
    background: var(--ap-red) !important;
    background-color: var(--ap-red) !important;
    color: var(--ap-white) !important;
    border: none !important;
    padding: 11px 28px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    font-family: var(--ap-font-body) !important;
    transition: opacity 0.15s !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

.am-form input[type="submit"]:hover {
    opacity: 0.85 !important;
}

/* Keep subscribed link */

/* ---- Validation error ---- */

/* ============================================================
   AM-FILTER-WRAP HARDENED OVERRIDE
   Beats amember.css background/sizing defaults
============================================================ */

/* ============================================================
   AM-INPUT-FILTER HARDENED OVERRIDE
   Beats amember.css sizing/color defaults
============================================================ */

.am-input-filter-wrapper,
div.am-input-filter-wrapper,
.traders-form__input-container.am-input-filter-wrapper {
    position: relative !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    box-shadow: none !important;
}

.am-input-filter,
input.am-input-filter,
.am-input-filter-wrapper input.am-input-filter,
.am-input-filter-wrapper .traders-form__input-content input {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--ap-bg2) !important;
    background-color: var(--ap-bg2) !important;
    background-image: none !important;
    border: 1px solid var(--ap-border2) !important;
    border-bottom: 2px solid var(--ap-border-hover) !important;
    border-radius: 0 !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    padding: 10px 40px 10px 14px !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s !important;
    height: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.am-input-filter:focus,
input.am-input-filter:focus {
    border-color: var(--ap-red) !important;
    border-bottom-color: var(--ap-red) !important;
    background: var(--ap-bg3) !important;
    background-color: var(--ap-bg3) !important;
    box-shadow: 0 0 8px rgba(214, 59, 59, 0.12) !important;
    outline: none !important;
}

.am-input-filter::placeholder,
input.am-input-filter::placeholder {
    color: var(--ap-text-muted) !important;
    opacity: 1 !important;
    font-size: 13px !important;
}

.am-input-filter-wrapper .traders-form__clear,
.am-input-filter-wrapper button.traders-form__clear_js {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    opacity: 0.4 !important;
    transition: opacity 0.15s !important;
    z-index: 2 !important;
}

.am-input-filter-wrapper .traders-form__clear:hover {
    opacity: 1 !important;
}

.am-input-filter-wrapper .traders-form__clear img,
.am-input-filter-empty {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

/* ============================================================
   CANCEL POPUP - MOBILE IMPROVEMENTS
   Fix: X button right side, gold warning color,
   readable body text, full-width buttons on mobile
============================================================ */

/* ---- Header - ensure title + close sit correctly ---- */

/* ---- Cancel popup wrapper - comfortable padding ---- */

/* ---- Gold READ ME FIRST divs - restore color amember kills ---- */

/* ---- Body text ---- */

.cancel-subscription-popup-text div[style*="text-align: left"],
.cancel-subscription-popup-text div[style*="text-align:left"] {
    font-size: 13px !important;
    color: var(--ap-text) !important;
    line-height: 1.75 !important;
    margin-bottom: 12px !important;
}

/* ---- Account ID badge ---- */

.cancel-subscription-popup-text strong {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    font-family: var(--ap-font-mono) !important;
    font-size: 13px !important;
    color: var(--ap-white) !important;
    background: rgba(214, 59, 59, 0.08) !important;
    border: 1px solid rgba(214, 59, 59, 0.25) !important;
    padding: 8px 12px !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
}

/* ---- Buttons row ---- */

.remove-rithmic-acc-link-buttons {
    display: flex !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--ap-border2) !important;
    flex-wrap: wrap !important;
}

.remove-rithmic-acc-link-buttons input,
.remove-rithmic-acc-link-buttons button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    padding: 11px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    font-family: var(--ap-font-body) !important;
    border-radius: 0 !important;
    transition: opacity 0.15s !important;
    border: none !important;
    white-space: nowrap !important;
}

.am-popup-close,
input.am-popup-close {
    background: var(--ap-bg2) !important;
    background-color: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    color: var(--ap-text-muted) !important;
    padding: 11px 16px !important;
}

.am-popup-close:hover {
    color: var(--ap-white) !important;
    background: var(--ap-bg3) !important;
    background-color: var(--ap-bg3) !important;
}

/* ---- Mobile ---- */

@media (max-width: 640px) {

    .remove-rithmic-acc-link-buttons {
        flex-direction: column !important;
    }

    .remove-rithmic-acc-link-buttons input,
    .remove-rithmic-acc-link-buttons button,
    .am-popup-close {
        width: 100% !important;
        text-align: center !important;
    }

    .cancel-subscription-popup-text div[style*="text-align: left"],
    .cancel-subscription-popup-text div[style*="text-align:left"] {
        font-size: 12px !important;
    }
}

/* Mobile table overflow -> consolidated in AFFILIATE STATS TABLE section below */

/* ============================================================
   AFFILIATE STATS TABLE - MOBILE FIX
   Label each cell using hardcoded ::before content
   since column order is fixed and no data-label attrs exist
============================================================ */

@media (max-width: 640px) {

    .traders-table,
    .traders-table_longer {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Each row = a card */
    .traders-table__row {
        display: block !important;
        padding: 14px 16px !important;
        margin-bottom: 8px !important;
        border: 1px solid var(--ap-border2) !important;
        border-left: 3px solid var(--ap-border2) !important;
        background: var(--ap-bg1) !important;
    }

    .traders-table__row:hover {
        border-left-color: var(--ap-red) !important;
    }

    .traders-table__row.traders-table__cell_parent {
        display: none !important;
    }

    /* Each cell = full row with label on left, value on right */
    .traders-table__cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-align: right !important;
        font-size: 13px !important;
    }

    .traders-table__cell:last-child {
        border-bottom: none !important;
    }

    /* Label on the left via ::before */
    .traders-table__cell::before {
        display: block !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: var(--ap-text-muted) !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
        text-align: left !important;
    }

    /* Affiliate stats column labels */
    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(1)::before {
        content: "Date" !important;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(2)::before {
        content: "Transactions" !important;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(3)::before {
        content: "Referrals" !important;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(4)::before {
        content: "Commission" !important;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(5)::before {
        content: "Clicks" !important;
    }

    /* Date cell - link style */
    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(1) {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--ap-white) !important;
        font-family: var(--ap-font-mono) !important;
        padding-bottom: 10px !important;
        margin-bottom: 2px !important;
        border-bottom: 1px solid var(--ap-border2) !important;
    }

    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(1) a {
        color: var(--ap-white) !important;
        text-decoration: none !important;
    }

    /* Commission - highlight */
    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(4) {
        font-family: var(--ap-font-mono) !important;
        font-weight: 600 !important;
        color: var(--ap-white) !important;
    }

    /* Clicks - aff-detail link */
    .traders-table__row:not(.traders-table__cell_parent) .traders-table__cell:nth-child(5) {
        font-family: var(--ap-font-mono) !important;
    }

    /* Total row */
}

/* ============================================================
   AMEMBER GLOBAL NORMALIZATIONS
   Catch-all rules to force consistent fonts, colors, and
   form elements across every aMember-generated page
============================================================ */

/* ---- Global font enforcement ---- */

.am-form,
.am-form * {
    font-family: var(--ap-font-body) !important;
}

/* ---- Select dropdowns ---- */

.am-form select,
.traders-content select {
    width: 100% !important;
    background: var(--ap-bg2) !important;
    background-color: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    border-radius: 0 !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-body) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23686868' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    transition: border-color 0.15s !important;
}

.am-form select:focus,
.traders-content select:focus {
    border-color: var(--ap-red) !important;
    background-color: var(--ap-bg3) !important;
}

/* ---- Checkbox normalization ---- */

.am-form input[type="checkbox"] {
    accent-color: var(--ap-red) !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
}

/* ---- Generic aMember link color ---- */

.traders-content a:not([class]),
.am-form a:not([class]) {
    color: var(--ap-red) !important;
    text-decoration: none !important;
    transition: opacity 0.15s !important;
}

.traders-content a:not([class]):hover,
.am-form a:not([class]):hover {
    opacity: 0.75 !important;
}

/* ---- Kill amember.css residual backgrounds on any am- element ---- */

.am-form .am-row,
.am-form .am-element,
.am-form .am-element-title,
.am-form fieldset {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ---- Error list normalization ---- */

ul.errors {
    background: rgba(214, 59, 59, 0.06) !important;
    border: 1px solid rgba(214, 59, 59, 0.25) !important;
    border-left: 3px solid var(--ap-red) !important;
    padding: 10px 14px 10px 28px !important;
    margin-bottom: 16px !important;
    font-size: 12px !important;
    color: var(--ap-red) !important;
    font-family: var(--ap-font-body) !important;
    list-style: disc !important;
}

ul.errors li {
    margin-bottom: 4px !important;
    color: var(--ap-red) !important;
}

/* ============================================================
   AFFILIATES PAGE - MOBILE HORIZONTAL SCROLL FIX
   Kills hardcoded inline width/right values on form inputs
   and banner card images that overflow on small screens
============================================================ */

@media (max-width: 768px) {

    /* Kill hardcoded inline widths on readonly copy inputs */
    .traders-form__input-content .traders-form__input,
    .traders-form__input-content .traders-form__input_readonly {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Kill hardcoded right:-90px on copy buttons */
    .traders-form__input-content .traders-form__copy,
    .traders-form__copy_js {
        right: 8px !important;
        position: absolute !important;
    }

    /* Ensure input-content is relative so copy button anchors correctly */
    .traders-form__input-content {
        position: relative !important;
        display: flex !important;
        width: 100% !important;
    }

    /* Banner cards - stack vertically, images full width */
    .traders-card_flex-row {
        flex-direction: column !important;
    }

    .traders-card_flex-row>div:first-child {
        flex: none !important;
        width: 100% !important;
    }

    .traders-card__content {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .traders-card__content img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Prevent any fixed-width child from causing overflow */
    .traders-content,
    .traders-main,
    .traders-form,
    .traders-form__item,
    .traders-form__input-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   USER CARD - MOBILE FIX
   Stack avatar/identity on top, stats as 2-col grid below
============================================================ */

@media (max-width: 768px) {
    .atom-user-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }

    /* Avatar + identity in a row */
    .atom-user-card__avatar {
        display: inline-flex !important;
    }

    .atom-user-card__identity {
        border-right: none !important;
        border-bottom: 1px solid var(--ap-border) !important;
        padding-right: 0 !important;
        padding-bottom: 10px !important;
        width: 100% !important;
    }

    .atom-user-card__name {
        white-space: normal !important;
        font-size: 14px !important;
    }

    .atom-user-card__email {
        white-space: normal !important;
        word-break: break-all !important;
    }

    /* Stats as 2-column grid */
    .atom-user-card__stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important;
        background: var(--ap-border) !important;
        width: 100% !important;
        flex: none !important;
        border: 1px solid var(--ap-border) !important;
    }

    .atom-user-card__stat {
        background: var(--ap-bg1) !important;
        padding: 10px 12px !important;
        border-right: none !important;
        min-width: 0 !important;
    }

    .atom-user-card__stat-label {
        white-space: normal !important;
        font-size: 8px !important;
    }

    .atom-user-card__stat-value {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 12px !important;
    }

    .atom-user-card__stat-link {
        white-space: normal !important;
        font-size: 10px !important;
    }
}

.am-thanks-status-success {
    background: rgba(75, 222, 129, 0.06);
    border: 1px solid rgba(75, 222, 129, 0.2);
    border-left: 3px solid var(--ap-green);
    padding: 14px 18px;
    font-family: var(--ap-font-body);
    font-size: 13px;
    color: var(--ap-text);
    margin-bottom: 20px;
}

.am-thanks-status-success b,
.am-thanks-status-success strong {
    color: var(--ap-green);
    font-weight: 600;
}

/* ============================================================
   COPY BUTTON - KILL HARDCODED INLINE right VALUES
   Targets style="right: -90px" and style="right: 310px"
   which are set by amember PHP and can't be removed from HTML
============================================================ */

button.traders-form__copy[style*="right"],
.traders-form__copy_js[style*="right"] {
    right: 8px !important;
    left: auto !important;
    position: absolute !important;
}

/* Ensure the input-content wrapper clips correctly */
.traders-form__input-content {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Input must fill the container and leave room for button */
.traders-form__input-content .traders-form__input_readonly {
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
}

input#cancel-subscription-yes,
input#cancel-subscription-yes:not(:hover) {
    background: rgba(214, 59, 59, 0.12) !important;
    background-color: rgba(214, 59, 59, 0.12) !important;
    color: #d63b3b !important;
    border: 1px solid rgba(214, 59, 59, 0.3) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    padding: 7px 15px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

input#cancel-subscription-yes:hover {
    background: rgba(214, 59, 59, 0.22) !important;
    background-color: rgba(214, 59, 59, 0.22) !important;
    color: #ff6b6b !important;
    border-color: rgba(214, 59, 59, 0.5) !important;
    box-shadow: 0 0 12px rgba(214, 59, 59, 0.15) !important;
}

input#cancel-subscription-no,
input#cancel-subscription-no:not(:hover) {
    background: rgba(75, 222, 129, 0.06) !important;
    background-color: rgba(75, 222, 129, 0.06) !important;
    color: #4bde81 !important;
    border: 1px solid rgba(75, 222, 129, 0.25) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    padding: 7px 15px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

input#cancel-subscription-no:hover {
    background: rgba(75, 222, 129, 0.12) !important;
    background-color: rgba(75, 222, 129, 0.12) !important;
    color: #4bde81 !important;
    border-color: rgba(75, 222, 129, 0.45) !important;
    box-shadow: 0 0 12px rgba(75, 222, 129, 0.12) !important;
}

/* ── jQuery UI Dialog - Unified Theme ── */

.atom-popup-dialog .ui-dialog-content {
    background: #111111 !important;
    color: #c8c8c8 !important;
    padding: 20px 24px !important;
    overflow: auto !important;
}

/* ============================================================
   LOGIN PAGE - MOBILE FIX
============================================================ */

@media (max-width: 768px) {

    /* Kill vh-100 that locks viewport height */
    body.vh-100,
    .browse-job.login-style3 .col-xl-4.vh-100 {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Remove top padding, let card sit near top */
    .browse-job.login-style3 {
        padding-top: 20px !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }

    /* Override the inline max-height: 653px on mCustomScrollBox */
    .mCustomScrollBox,
    #mCSB_1 {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    #mCSB_1_container {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Card column full width with breathing room */
    .browse-job.login-style3 [class*="col-"] {
        max-width: 100% !important;
        padding: 0 16px !important;
    }

    /* Shrink the inline 300px logo */
    .logo-header.center .logo img {
        width: 220px !important;
        max-width: 70% !important;
        height: auto !important;
    }

    /* Tighter card padding */
    .card-body {
        padding: 20px 18px !important;
    }

    /* Button row - wrap login + forgot password */
    .am-row.am-row-buttons .am-element {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #btn_login {
        width: 100% !important;
        text-align: center !important;
    }

    .am-form-login-switch-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Footer tighter */
    .card-footer.dt_footer {
        padding: 12px 18px 16px !important;
    }

    /* Tagline text smaller */
    .form-title.m-t0.center span {
        font-size: 14px !important;
    }

    /* Signup link */
    .am-signup-link span,
    .am-signup-link a {
        font-size: 11px !important;
    }
}


/* cancel invoice */

.am-el-wide,
.am-form textarea.am-el-wide {
    width: 100% !important;
    background: var(--ap-bg2) !important;
    background-color: var(--ap-bg2) !important;
    border: 1px solid var(--ap-border2) !important;
    border-bottom: 2px solid var(--ap-border-hover) !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font-body) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
    border-radius: 0 !important;
    transition: border-color 0.15s !important;
    min-height: 90px !important;
}