@charset "utf-8";
@font-face{
    font-family: 'Open Sans';
    src: url('OpenSans-Regular.woff') format('woff'),
         url('OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root{
    --header-h: 50px;
    --footer-h: 48px;
    --left-w: 240px;
    --right-w: 300px;
    --blue-1: rgb(7, 105, 185);
    --blue-2: rgb(5, 68, 104);
    /* Theme colors (light) */
    --page-bg: #f5f6fa;
    --text: rgba(0,0,0,0.82);
    --muted: rgba(0,0,0,0.65);
    --panel-bg: #ffffff;
    --panel-border: rgba(0,0,0,0.06);
    --card-bg: #ffffff;
    --card-shadow: 0 6px 18px rgba(0,0,0,0.06);
    --hover: rgba(7,105,185,0.08);
    --footer-bg: #ffffff;
    --footer-border: rgba(0,0,0,0.10);

}


html.theme-dark{
  --page-bg: #0f141a;
  --text: rgba(245,248,255,0.92);
  --muted: rgba(245,248,255,0.70);
  --panel-bg: #141b23;
  --panel-border: rgba(255,255,255,0.10);
  --card-bg: #141b23;
  --card-shadow: 0 10px 24px rgba(0,0,0,0.35);
  --hover: rgba(160,220,255,0.10);
  --footer-bg: #121821;
  --footer-border: rgba(255,255,255,0.10);
}
*{
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

/* only remove bullets where you actually want no bullets */
nav ul, nav ol,
.left_sidebar ul, .right_sidebar ul{
  list-style: none;
  padding: 0;
  margin: 0;
}


body{
    background: var(--page-bg);
    color: var(--text);
    /* Make sure fixed header + footer never hide content */
    padding-top: var(--header-h);
    padding-bottom: var(--footer-h);
}

/* =========================
   Header
   ========================= */
.top_navbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: var(--blue-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 120;
    gap: 12px;
}

    
.top_navbar .brand{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.top_navbar .brand_link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.top_navbar .brand_logo{
    height: clamp(26px, 4.5vw, 34px);
    width: auto;
    max-width: clamp(120px, 40vw, 220px);
    object-fit: contain;
}

/* Header user avatar (shown when logged in) */
.top_navbar .user_nav_avatar{
    height: clamp(28px, 5vw, 36px);
    width: clamp(28px, 5vw, 36px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.top_navbar .left_controls{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 44px;
    }

    .top_navbar .right_controls{
      display: flex;
      align-items: center;
      gap: 18px;
    }

.iconbtn{
    color: #f4fbff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Force transparent icon buttons everywhere (prevents browser default button styles) */
.top_navbar button.iconbtn,
.top_navbar .iconbtn,
button.iconbtn,
.iconbtn{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

    .iconbtn:hover{ color: #a2ecff; }

    /* Mail icon + badge (badge overlaps and icon width stays stable) */
    .mailwrap{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;   /* fixed so it never jumps */
      height: 34px;
    }

    .mailwrap .fa-envelope{
      font-size: 22px;
    }

    .badge{
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: tomato;
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      text-align: center;
      font-weight: 700;
      pointer-events: none;
    }

    /* =========================
       Layout
       ========================= */
    .layout{
      display: flex;
      min-height: calc(100vh - var(--header-h) - var(--footer-h));
    }

    /* Left menu (desktop: static; mobile: off-canvas) */
    .left_sidebar{
      width: var(--left-w);
      background: var(--panel-bg);
      border-right: 1px solid var(--panel-border);
      padding: 14px 0;
    }

    .left_sidebar h4{
      padding: 0 18px 10px;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .left_sidebar a{
      display: block;
      padding: 12px 18px;
      color: var(--text);
      font-size: 14px;
    }

    .left_sidebar a:hover{
      background: var(--hover);
    }

    .content{
      flex: 1;
      padding: 18px;
      max-width: 100%;
    }

    .card{
      background: var(--card-bg);
      border-radius: 12px;
      padding: 18px;
      box-shadow: var(--card-shadow);
    }
    .card ul{
      list-style: disc;
      padding-left: 1.25rem;
      margin: 0;
    }

    /* =========================
       Right user menu
       ========================= */
    .right_sidebar{
      background: var(--blue-2);
      position: fixed;
      z-index: 130; /* must sit above footer */
      top: var(--header-h);
      right: calc(var(--right-w) * -1);
      width: var(--right-w);
      height: calc(100vh - var(--header-h));
      padding: 20px 0;
      transition: right 0.25s ease;
      text-align: left;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .right_sidebar.open{ right: 0; }

    .right_sidebar .profile{
      margin-bottom: 30px;
      text-align: center;
    }

    .right_sidebar .profile img{
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto;
    }

    .right_sidebar .profile h3{
      color: #ffffff;
      margin: 10px 0 5px;
      font-size: 16px;
    }

    .right_sidebar .profile p{
      color: rgb(206, 240, 253);
      font-size: 12px;
    }

    .right_sidebar ul li a{
      display: block;
      padding: 13px 20px;
      border-bottom: 1px solid #10558d;
      color: rgb(241, 237, 237);
      font-size: 14px;
      position: relative;
    }

    .right_sidebar ul li a .icon{
      color: #dee4ec;
      width: 30px;
      display: inline-block;
    }

    .right_sidebar ul li a:hover,
    .right_sidebar ul li a.active{
      color: #0c7db1;
      background: white;
      border-right: 2px solid var(--blue-2);
    }

    .right_sidebar ul li a:hover .icon,
    .right_sidebar ul li a.active .icon{ color: #0c7db1; }

    /* Login UI inside right sidebar */
.login_notice{
  margin: 0 20px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.12);
}

.profile--login .profile_icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 6px auto 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 22px;
}


/* Make login look like the site theme (glassy card on dark sidebar) */
.login_card{
  margin: 0 18px 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 12px;
}

.login_card .field span{
  display:block;
  font-size: 12px;
  color: rgba(230,250,255,0.95);
  margin-bottom: 6px;
}


.input_wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
    --field-bg: rgba(0,0,0,0.20);
  background: var(--field-bg);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 10px;
}

.input_wrap i{
  color: rgba(230,250,255,0.92);
  width: 18px;
  min-width: 18px;
  text-align: center;
  opacity: 0.9;
}

.login_card input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  padding: 2px 0;
}

.login_card input::placeholder{ color: rgba(230,250,255,0.65); }

.input_wrap:focus-within{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.pw_toggle{
  border: 0;
  background: transparent;
  color: rgba(230,250,255,0.85);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
}
.pw_toggle:hover{ background: rgba(255,255,255,0.10); }


.login_row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.remember{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(230,250,255,0.95);
  font-size: 13px;
  user-select: none;
}
/*
  Custom checkbox so the tick is visible on mobile browsers.
  Some mobile UAs render a very faint/white checkmark that can disappear.
*/
.remember input{
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.22);
  display: grid;
  place-content: center;
}
.remember input::before{
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 60ms ease-out;
  will-change: transform;
  background: #fff;
  /* check shape */
  clip-path: polygon(14% 54%, 0 68%, 38% 100%, 100% 22%, 85% 8%, 37% 72%);
}
.remember input:checked::before{ transform: scale(1); }
.remember input:disabled{ opacity: 0.55; cursor: not-allowed; }

/* Auth pages: reuse the sidebar login look, but centered */
.login_card--page{
  max-width: 520px;
  margin: 0 auto 16px;
}

/* Embedded use (e.g., inside profile cards) */
.login_card--embedded{
  margin: 0;
  max-width: none;
}
.profile--login.profile--page{
  max-width: 520px;
  margin: 0 auto 14px;
  text-align: center;
}
.login_notice--page{
  max-width: 520px;
  margin: 0 auto 14px;
}

.login_link{
  color: rgba(230,250,255,0.9);
  font-size: 12px;
  opacity: 0.9;
  text-decoration: underline;
}
.login_link:hover{ opacity: 1; }

.consent_note{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
  color: rgba(230,250,255,0.95);
  font-size: 12px;
  line-height: 1.35;
}
.consent_note a{ color: #fff; text-decoration: underline; }

.btn_primary{
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 800;
  cursor: pointer;
  background: var(--blue-2);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn_primary:hover{ filter: brightness(0.98); }

/* Keep the login panel button as the original white style for contrast */
.login_card .btn_primary{
  border: 0;
  background: #ffffff;
  color: var(--blue-2);
}

/* Make link-style actions on light pages visible */
.action_link{
  color: var(--blue-2);
  font-weight: 700;
  text-decoration: underline;
}

.login_help{
  font-size: 12px;
  color: rgba(230,250,255,0.95);
  line-height: 1.4;
  opacity: 0.95;
}

/* Cookie banner */
.cookie_banner{
  position: fixed;
  left: 0;
  right: 0;
  /* sit above footer so footer links remain clickable */
  bottom: calc(var(--footer-h) + 10px);
  z-index: 200;
  display: none;
  padding: 12px;
}
.cookie_banner.show{ display: block; }

.cookie_banner_inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.86);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cookie_banner_title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.cookie_banner_text a{ color:#fff; text-decoration: underline; }

.cookie_banner_text{
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.95;
}

.cookie_banner_actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn_cookie{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: #fff;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
}
.btn_cookie--accept{
  background: var(--footer-bg);
  color: #111;
  border-color: transparent;
}
.btn_cookie:hover{ filter: brightness(1.03); }

.btn_cookie--primary{
  background: rgba(255,255,255,0.10);
}

/* Cookie buttons: dark mode tweaks (minimal overrides) */
html.theme-dark .btn_cookie{
  border-color: rgba(255,255,255,0.20);
}
html.theme-dark .btn_cookie--primary{
  background: rgba(255,255,255,0.08);
}
html.theme-dark .btn_cookie--accept{
  background: #238636;
  color: #fff;
  border-color: #2ea043;
}


/* =========================
       Overlay (click anywhere to close active menu)
       ========================= */
    #overlay{
      position: fixed;
      display: none;
      inset: 0;
      z-index: 125;
      background: rgba(0, 0, 0, 0.4);
    }

    #overlay.show{ display: block; }

    /* =========================
       Footer
       ========================= */
    .footer{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--footer-h);
      background: var(--footer-bg);
      border-top: 1px solid var(--footer-border);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      z-index: 20;
    }
    /* ===== Footer (Dark mode) ===== */
html.theme-dark .footer {
    background: var(--footer-bg);
    color: #ddd;
}
html.theme-dark .footer a {
    color: #9aa4ff;
}

html.theme-dark .footer a:hover {
    color: #c3c9ff;
}


    /* =========================
       Mobile
       ========================= */
    .hamburger_left{ display: none; }

    @media (max-width: 820px){
      body{ padding-bottom: calc(var(--footer-h) + 6px); }

      .layout{ display: block; }

      /* left menu becomes off-canvas */
      .hamburger_left{ display: inline-block; }

      .left_sidebar{
        position: fixed;
        top: var(--header-h);
        left: calc(var(--left-w) * -1);
        height: calc(100vh - var(--header-h));
        width: var(--left-w);
        z-index: 128;
        transition: left 0.25s ease;
        box-shadow: 8px 0 18px rgba(0,0,0,0.12);
      }
      .left_sidebar.open{ left: 0; }

      .content{ padding: 14px; }

      .right_sidebar{
        width: min(var(--right-w), 90vw);
        right: calc(min(var(--right-w), 90vw) * -1);
      }
    }


/* Page helpers */
.page_head{
  padding: 18px 18px 0;
}
.page_head h1{
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 18px 18px;
}

@media (max-width: 820px){
  .grid2{ grid-template-columns: 1fr; }
}

.footer_text{
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer_text a{
  color: var(--muted);
  text-decoration: underline;
}
.footer_text a:hover{ color: var(--text); }
.footer_sep{ opacity: 0.6; }


/* Cookie preference button on light cards */
.btn_cookie--light{color:#111;border-color:rgba(0,0,0,0.18);background:rgba(0,0,0,0.02);}
.btn_cookie--light:hover{background:rgba(0,0,0,0.05);}

/* Fix "Open cookie preferences" button in dark mode */
html.theme-dark .btn_cookie--light{
  color: rgba(245,248,255,0.92);
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
}
html.theme-dark .btn_cookie--light:hover{
  background: rgba(255,255,255,0.10);
}


/* Ensure menu icons remain clear/transparent */
.right_sidebar ul li a .icon{background:transparent !important;}

/* Animated hamburger (mobile left menu) */
.hamburger_left{width:34px;height:34px;padding:0;}
.hamburger_left .hb{width:18px;height:2px;background:currentColor;display:block;border-radius:99px;transition:transform .22s ease,opacity .18s ease;}
.hamburger_left .hb + .hb{margin-top:4px;}
.hamburger_left.is-open .hb:nth-child(1){transform:translateY(6px) rotate(45deg);} 
.hamburger_left.is-open .hb:nth-child(2){opacity:0;} 
.hamburger_left.is-open .hb:nth-child(3){transform:translateY(-6px) rotate(-45deg);} 

/* Theme toggle */
.theme_switch{
  padding: 0 16px 14px;
}
.theme_btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(230,250,255,0.92);
  cursor: pointer;
}
.theme_btn:hover{ background: rgba(255,255,255,0.14); }
.theme_btn_icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
}
.theme_btn_text{ font-size: 14px; font-weight: 700; }

/* Make the toggle readable on light theme too (right sidebar stays dark, but this helps if you ever change it) */
html:not(.theme-dark) .theme_btn{
  border-color: rgba(255,255,255,0.18);
}


/* =========================
   Auth pages (register / forgot password)
   ========================= */
.card.auth_card{
  max-width: 480px;
  margin: 0 auto;
}
.auth_subtitle{
  margin-top: 6px;
  opacity: .85;
  line-height: 1.4;
}
.auth_notice{
  margin-bottom: 16px;
  border-left: 4px solid var(--blue-4);
}
.auth_notice.error{
  background: rgba(200,0,0,0.06);
  border-left-color: rgba(200,0,0,0.35);
}
.auth_notice.success{
  background: rgba(0,140,60,0.08);
  border-left-color: rgba(0,140,60,0.35);
}
.auth_footer{
  margin-top: 14px;
  font-size: 0.95rem;
  opacity: .9;
}
.auth_footer a{
  font-weight: 600;
}
.auth_links{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.auth_links a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(230,250,255,0.95);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.auth_links a:visited{ color: rgba(230,250,255,0.95); }
.auth_links a:hover{
  background: rgba(255,255,255,0.12);
}
.auth_links i{
  width: 20px;
  text-align: center;
  opacity: .95;
}

/* =====================
   Auth pages: Register / Forgotten password
   ===================== */

.page_head .auth_subtitle{
  margin-top:6px;
  opacity:.85;
  font-size:0.95rem;
}

.auth_card{
  max-width:480px;
  margin:14px auto;
  padding:16px;
}

.auth_notice{
  max-width:480px;
  margin:14px auto;
  padding:12px 14px;
}

.auth_notice.success{
  border-left:4px solid currentColor;
}

.auth_notice.error{
  border-left:4px solid currentColor;
}

.auth_footer{
  margin-top:12px;
  font-size:0.95rem;
  opacity:.85;
}

/* Sidebar account links */
.login_links{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.login_links_btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:14px;
  text-decoration:none;
  color: rgba(230,250,255,0.95);
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);
}

.login_links_btn:visited{ color: rgba(230,250,255,0.95); }

.login_links_btn .icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(0,0,0,0.18);
}

.login_links_btn .text{
  font-weight:600;
  font-size: 0.95rem;
}

.login_links_btn:hover{
  filter:brightness(1.08);
}

.auth_steps{
  max-width:540px;
  margin:10px auto 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.auth_step{
  padding:6px 10px;
  border-radius:999px;
  font-size:0.85rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  opacity:.75;
}

.auth_step.is_active{
  opacity:1;
  font-weight:700;
}

/* =========================
   Autofill fixes (all forms)
   - Removes browser yellow/blue autofill backgrounds
   - Keeps text color consistent (prevents black text on dark inputs)
   ========================= */

/* Baseline input text color site-wide (helps autofill follow currentColor) */
input, textarea, select{
  color: var(--text);
}
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select{
  color: rgba(245,248,255,0.92);
}

/* Login card inputs are intentionally white */
.login_card input{ color:#fff; }

/* Chrome / Edge / Safari (WebKit/Blink)
   IMPORTANT: painting with 'transparent' does NOT cover the autofill highlight.
   We paint over it using an inset shadow. We try to use a per-field background
   via --field-bg (inherited from .input_wrap), with a safe fallback. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: currentColor !important;
  caret-color: currentColor !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, var(--panel-bg)) inset !important;
  box-shadow: 0 0 0 1000px var(--field-bg, var(--panel-bg)) inset !important;
  background-clip: padding-box !important;
  transition: background-color 9999s ease-out 0s;
}

/* Extra safety for the login card (ensures remembered credentials stay white) */
.login_card input:-webkit-autofill,
.login_card input:-webkit-autofill:hover,
.login_card input:-webkit-autofill:focus{
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, rgba(0,0,0,0)) inset !important;
  box-shadow: 0 0 0 1000px var(--field-bg, rgba(0,0,0,0)) inset !important;
}

/* Firefox */
input:autofill,
textarea:autofill,
select:autofill{
  box-shadow: 0 0 0 1000px var(--field-bg, var(--panel-bg)) inset !important;
  filter: none !important;
}
/* =========================================
   STRONG Autofill Override (Login fields)
   ========================================= */

.login_card .input_wrap input:-webkit-autofill,
.login_card .input_wrap input:-webkit-autofill:hover,
.login_card .input_wrap input:-webkit-autofill:focus,
.login_card .input_wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  /* Paint over Chrome's autofill background */
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;

  border-radius: 14px !important;
  transition: background-color 9999s ease-out 0s;
}