/*
 * React customer portal styles.
 *
 * 1. The dashboard design's styles.css, verbatim — it is loaded before Tailwind in
 *    the design, so it stays ahead of the Tailwind layers here too.
 * 2. Tailwind (stock v3 theme, see ../../tailwind.config.js).
 * 3. The login page design, with every selector scoped under .cn-login.
 *
 * Generated from the design sources; edit with care to keep the two in step.
 */

/* ===================== 1. Dashboard design (styles.css) ===================== */
:root{font-family:'Plus Jakarta Sans',sans-serif}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);color:#0f172a;min-height:100vh}.glass-card{background:rgba(255,255,255,.88);border:1px solid rgba(226,232,240,.95);box-shadow:0 10px 30px rgba(15,23,42,.06);backdrop-filter:blur(12px)}.nav-link.active{box-shadow:0 8px 20px rgba(99,102,241,.08)}.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 45%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}.group:hover>.sheen,.group:hover .sheen{transform:translateX(120%)}.modal-backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(6px)}.spin{animation:spin 1s linear infinite}.table-wrap{overflow-x:auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}.stagger>*{animation:fadeUp .45s both}.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}.font-bn{font-family:'Hind Siliguri',sans-serif}@media(max-width:640px){.table-wrap table{min-width:520px}.table-wrap table th:nth-child(1),.table-wrap table td:nth-child(1){width:120px}.table-wrap table th:nth-child(2),.table-wrap table td:nth-child(2){width:130px}}
/* ---- Expiry alert banner (dashboard top-left) ---- */
@keyframes alertSlideDown {
  0%   { opacity: 0; transform: translateY(-14px) scale(.97); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.35); }
  50%      { box-shadow: 0 0 0 12px rgba(244,63,94,0); }
}
@keyframes alertShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.expiry-alert {
  animation: alertSlideDown .55s cubic-bezier(.22,1,.36,1) both, alertPulse 2s ease-in-out infinite;
}
.expiry-alert__shine {
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.55) 45%,
    transparent 60%);
  background-size: 200% 100%;
  animation: alertShimmer 2.4s linear infinite;
}

/* ============================================================
   BASE STYLES
============================================================ */

:root {
  --font-sans: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.5; }
  80%, 100% { transform: scale(1.3); opacity: 0; }
}

/* ✅ Header Due Notification Pulse Animation */
@keyframes header-due-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.header-due-pulse {
  animation: header-due-pulse 1.8s ease-in-out infinite;
}

/* ============================================================
   UTILITY CLASSES
============================================================ */
.spin {
  animation: spin 0.8s linear infinite;
}

.sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.group:hover .sheen {
  left: 100%;
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
}

.table-wrap {
  overflow-x: auto;
}

.stagger > * {
  animation: fadeUp 0.4s cubic-bezier(.22,1,.36,1) both;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================
   NAV LINK ACTIVE STATE
============================================================ */
.nav-link.active {
  background-color: #eef2ff;
  color: #4338ca;
}

/* ============================================================
   DETAILS SUMMARY MARKER HIDE
============================================================ */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   GLASS CARD
============================================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}
.glass-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ============================================================
   EXPIRY ALERT SHINE
============================================================ */
.expiry-alert__shine {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}

/* ============================================================
   EXTRA SMALL SCREEN (xs) SUPPORT FOR TAILWIND
============================================================ */
@media (min-width: 400px) {
  .xs\:inline { display: inline !important; }
  .xs\:inline-block { display: inline-block !important; }
}

/* ===================== 2. Tailwind ===================== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===================== 3. Login page design ===================== */
/* Tailwind's preflight sets line-height: 1.5 on <html>; the login design renders
   at the browser default. */
.cn-login { line-height: normal; }
/* ============ BASE ============ */
  :where(.cn-login) * { margin: 0; padding: 0; box-sizing: border-box; }
  .cn-login {
    font-family: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, sans-serif;
    background: #ffffff;
    color: #1e293b;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
  }

  /* ============ SUBTLE BACKGROUND ============ */
  .cn-login .bg-decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  /* Soft pastel gradient blobs */
  .cn-login .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
  }
  .cn-login .blob-1 { width: 500px; height: 500px; background: #ddd6fe; top: -180px; left: -140px; }
  .cn-login .blob-2 { width: 420px; height: 420px; background: #fbcfe8; bottom: -160px; right: -120px; }
  .cn-login .blob-3 { width: 380px; height: 380px; background: #a5f3fc; top: 45%; right: -140px; opacity: .30; }
  .cn-login .blob-4 { width: 340px; height: 340px; background: #fed7aa; bottom: 20%; left: -120px; opacity: .30; }

  /* Very subtle dotted pattern */
  .cn-login .bg-decor::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(100,116,139,.08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }

  /* ============ LAYOUT ============ */
  .cn-login .page {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    min-height: 100vh;
  }

  /* ============ GLOSSY CARD ============ */
  .cn-login .card {
    width: 100%;
    max-width: 440px;
    position: relative;
    border-radius: 28px;
    padding: 40px 32px 32px;

    /* Glossy glass base */
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.9) 0%,
        rgba(255,255,255,.75) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    /* Layered borders and shadows for depth */
    box-shadow:
      0 1px 0 0 rgba(255,255,255,.9) inset,
      0 -1px 0 0 rgba(255,255,255,.4) inset,
      0 20px 50px -12px rgba(99,102,241,.20),
      0 8px 24px -8px rgba(15,23,42,.10),
      0 0 0 1px rgba(226,232,240,.9);

    animation: cn-login-cardIn .7s cubic-bezier(.22,1,.36,1) both;
    overflow: hidden;
  }
  @keyframes cn-login-cardIn {
    0%   { opacity: 0; transform: translateY(24px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Top rainbow accent line */
  .cn-login .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #06b6d4, #f59e0b, #8b5cf6);
    background-size: 300% 100%;
    animation: cn-login-shimmerLine 5s linear infinite;
  }
  @keyframes cn-login-shimmerLine {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
  }

  /* Glossy shine sweep (diagonal) */
  .cn-login .card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 80%;
    height: 200%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.55) 50%,
      transparent 100%);
    transform: rotate(22deg);
    animation: cn-login-glossSweep 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes cn-login-glossSweep {
    0%, 100% { transform: translateX(-30%) rotate(22deg); opacity: 0; }
    30%      { opacity: .7; }
    60%      { transform: translateX(280%) rotate(22deg); opacity: 0; }
  }

  /* ============ LOGO ============ */
  .cn-login .logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
  }
  .cn-login .logo-ring {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
  }
  /* Rotating gradient ring behind logo */
  .cn-login .logo-ring::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #8b5cf6, #ec4899, #06b6d4, #f59e0b, #8b5cf6);
    animation: cn-login-spin 7s linear infinite;
    opacity: .8;
    filter: blur(2px);
  }
  @keyframes cn-login-spin { to { transform: rotate(360deg); } }

  .cn-login .logo-img {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #ffffff;
    padding: 6px;
    object-fit: contain;
    display: block;
    box-shadow:
      0 8px 24px -6px rgba(139,92,246,.35),
      0 0 0 3px #ffffff,
      0 0 0 4px rgba(139,92,246,.15);
  }
  .cn-login .logo-fallback {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    display: none;
    place-items: center;
    box-shadow: 0 8px 24px -6px rgba(139,92,246,.5), 0 0 0 3px #fff;
  }
  .cn-login .logo-fallback svg { width: 44px; height: 44px; color: #fff; }

  .cn-login .brand-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    margin-top: 6px;
  }
  .cn-login .brand-sub {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .4em;
    text-transform: uppercase;
    margin-top: 4px;
    text-align: center;
    padding-left: .4em;
  }

  /* ============ WELCOME ============ */
  .cn-login .welcome {
    text-align: center;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
  }
  .cn-login .welcome h1 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
  }
  .cn-login .welcome p {
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
  }

  /* ============ FORM ============ */
  .cn-login .field {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .cn-login .field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    letter-spacing: .02em;
  }
  .cn-login .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .cn-login .input-icon {
    position: absolute;
    left: 16px;
    color: #94a3b8;
    pointer-events: none;
    transition: color .2s;
    display: flex;
    z-index: 2;
  }
  .cn-login .input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: all .25s ease;
    outline: none;
  }
  .cn-login .input-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 400;
  }
  .cn-login .input-wrap input:hover {
    border-color: #c7d2fe;
    background: #ffffff;
  }
  .cn-login .input-wrap input:focus {
    border-color: #8b5cf6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(139,92,246,.12);
  }
  .cn-login .input-wrap:focus-within .input-icon {
    color: #8b5cf6;
  }

  /* Password toggle */
  .cn-login .pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    transition: all .2s;
    z-index: 3;
  }
  .cn-login .pw-toggle:hover { color: #8b5cf6; background: rgba(139,92,246,.08); }
  .cn-login .pw-toggle svg { width: 18px; height: 18px; }

  /* Remember + Forgot */
  .cn-login .row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 20px;
    font-size: 12px;
    position: relative;
    z-index: 1;
  }
  .cn-login .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
  }
  .cn-login .remember input {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all .2s;
  }
  .cn-login .remember input:checked {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-color: transparent;
  }
  .cn-login .remember input:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .cn-login .forgot {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 700;
    transition: color .2s;
  }
  .cn-login .forgot:hover { color: #ec4899; }

  /* ============ LOGIN BUTTON ============ */
  .cn-login .btn-login {
    position: relative;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    box-shadow:
      0 10px 25px -8px rgba(139,92,246,.55),
      0 4px 12px -4px rgba(236,72,153,.35),
      0 1px 0 0 rgba(255,255,255,.35) inset;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  /* Shine sweep inside button */
  .cn-login .btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 30%,
      rgba(255,255,255,.45) 45%,
      transparent 60%);
    transform: translateX(-100%);
    transition: transform .8s ease;
  }
  .cn-login .btn-login:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 35px -8px rgba(236,72,153,.65),
      0 6px 14px -4px rgba(139,92,246,.45),
      0 1px 0 0 rgba(255,255,255,.45) inset;
  }
  .cn-login .btn-login:hover::before { transform: translateX(100%); }
  .cn-login .btn-login:active { transform: translateY(0); }
  .cn-login .btn-login svg { width: 18px; height: 18px; position: relative; z-index: 1; }
  .cn-login .btn-login span { position: relative; z-index: 1; }

  /* ============ DIVIDER ============ */
  .cn-login .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .18em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }
  .cn-login .divider::before,
  .cn-login .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  }

  /* ============ SECONDARY BUTTONS ============ */
  .cn-login .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s ease;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
  }
  .cn-login .btn-secondary:hover {
    background: #fafafa;
    border-color: #c7d2fe;
    transform: translateY(-2px);
    color: #6d28d9;
    box-shadow: 0 8px 20px -8px rgba(139,92,246,.35);
  }
  .cn-login .btn-secondary svg { width: 18px; height: 18px; }

  .cn-login .btn-secondary.quick {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    color: #047857;
  }
  .cn-login .btn-secondary.quick:hover {
    border-color: #86efac;
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    color: #065f46;
    box-shadow: 0 8px 20px -8px rgba(16,185,129,.35);
  }

  /* ============ FOOTER LINKS ============ */
  .cn-login .footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    color: #64748b;
    position: relative;
    z-index: 1;
  }
  .cn-login .footer-links a {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 700;
    transition: color .2s;
  }
  .cn-login .footer-links a:hover { color: #ec4899; }

  /* ============ SITE FOOTER ============ */
  .cn-login .site-footer {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 18px 20px;
    border-top: 1px solid #f1f5f9;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .cn-login .site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
  }
  .cn-login .site-footer__contacts {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .cn-login .site-footer__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
  }
  .cn-login .site-footer__contacts a:hover { color: #8b5cf6; }
  .cn-login .site-footer__contacts svg { width: 14px; height: 14px; }
  .cn-login .site-footer__copy {
    font-weight: 500;
    color: #94a3b8;
  }

  /* ============ TOAST ============ */
  .cn-login .toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #0f172a;
    color: #f1f5f9;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 15px 40px -10px rgba(15,23,42,.4);
    opacity: 0;
    pointer-events: none;
    transition: all .35s cubic-bezier(.22,1,.36,1);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cn-login .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .cn-login .toast svg { width: 16px; height: 16px; color: #34d399; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 480px) {
    .cn-login .card { padding: 32px 22px 24px; border-radius: 24px; }
    .cn-login .logo-ring, .cn-login .logo-img, .cn-login .logo-fallback { width: 82px; height: 82px; }
    .cn-login .brand-name { font-size: 19px; }
    .cn-login .welcome h1 { font-size: 19px; }
    .cn-login .site-footer__inner { justify-content: center; text-align: center; flex-direction: column; }
    .cn-login .blob { filter: blur(70px); }
  }

  .cn-login input::-webkit-outer-spin-button,
  .cn-login input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .cn-login input[type=number] { -moz-appearance: textfield; }