/* ---------- CSS Variables ---------- */
:root{
  --primary:#2563eb; --primary-dark:#1e40af; --primary-light:#60a5fa;
  --secondary:#475569; --success:#10b981; --danger:#ef4444;
  --warning:#f59e0b;  --info:#06b6d4;
  --light:#f8fafc;    --dark:#0f172a;

  --gray-50:#f9fafb;  --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280;
  --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;

  --radius:.25rem;           --radius-md:.375rem;      --radius-lg:.5rem;
  --radius-full:50rem;

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
}

/* ---------- Dark Mode Overrides ---------- */
[data-theme="dark"]{
  --primary:#3b82f6; --primary-dark:#60a5fa; --primary-light:#2563eb;
  --secondary:#94a3b8; --success:#34d399; --danger:#f87171;
  --warning:#fbbf24; --info:#22d3ee;
  --light:#1e1e3a; --dark:#f0f0ff;

  --gray-50:#1a1a2e;  --gray-100:#16213e; --gray-200:#2a2a4a;
  --gray-300:#3a3a5a; --gray-400:#8888a0; --gray-500:#9999b0;
  --gray-600:#b0b0c8; --gray-700:#d0d0e0; --gray-800:#e0e0f0; --gray-900:#f0f0ff;

  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -1px rgba(0,0,0,.2);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2);
}
[data-theme="dark"] .card{background:var(--gray-100);border:1px solid var(--gray-300)}
[data-theme="dark"] .table{--bs-table-bg:var(--gray-100);--bs-table-color:var(--gray-800);--bs-table-border-color:var(--gray-300)}
[data-theme="dark"] .table-light{--bs-table-bg:var(--gray-200);--bs-table-color:var(--gray-800)}
[data-theme="dark"] .table-hover>tbody>tr:hover{--bs-table-hover-bg:var(--gray-200)}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{background-color:var(--gray-200);border-color:var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{background-color:var(--gray-100);color:var(--gray-800);border-color:var(--primary)}
[data-theme="dark"] .form-control::placeholder{color:var(--gray-500)}
[data-theme="dark"] .modal-content{background:var(--gray-100);border:1px solid var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .modal-header{border-bottom-color:var(--gray-300)}
[data-theme="dark"] .modal-footer{border-top-color:var(--gray-300)}
[data-theme="dark"] .dropdown-menu{background:var(--gray-100);border-color:var(--gray-300)}
[data-theme="dark"] .dropdown-item{color:var(--gray-800)}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{background:var(--gray-200);color:var(--gray-900)}
[data-theme="dark"] .dropdown-divider{border-top-color:var(--gray-300)}
[data-theme="dark"] .dropdown-header{color:var(--gray-500)}
[data-theme="dark"] .list-group-item{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .list-group-item-action:hover{background:var(--gray-200)}
[data-theme="dark"] .badge.bg-light{background:var(--gray-200)!important;color:var(--gray-800)!important}
[data-theme="dark"] .breadcrumb-item a{color:var(--primary-dark)}
[data-theme="dark"] .breadcrumb-item.active{color:var(--gray-500)}
[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before{color:var(--gray-500)}
/* Body / text */
[data-theme="dark"] body{color:var(--gray-800)}
[data-theme="dark"] .text-muted{color:var(--gray-700)!important}
[data-theme="dark"] .text-body{color:var(--gray-800)!important}
[data-theme="dark"] .text-dark{color:var(--gray-800)!important}
[data-theme="dark"] .text-body-secondary{color:var(--gray-600)!important}
[data-theme="dark"] .bg-light{background-color:var(--gray-200)!important}
[data-theme="dark"] .bg-white{background-color:var(--gray-100)!important}
/* Borders */
[data-theme="dark"] .border{border-color:var(--gray-300)!important}
[data-theme="dark"] .border-top{border-top-color:var(--gray-300)!important}
[data-theme="dark"] .border-bottom{border-bottom-color:var(--gray-300)!important}
[data-theme="dark"] .border-start{border-left-color:var(--gray-300)!important}
[data-theme="dark"] .border-end{border-right-color:var(--gray-300)!important}
[data-theme="dark"] .border-secondary{border-color:var(--gray-400)!important}
[data-theme="dark"] .border-dark{border-color:var(--gray-400)!important}
/* Button outline variants */
[data-theme="dark"] .btn-outline-secondary{color:var(--gray-700);border-color:var(--gray-400)}
[data-theme="dark"] .btn-outline-secondary:hover{background:var(--gray-300);color:var(--gray-900);border-color:var(--gray-400)}
[data-theme="dark"] .btn-outline-danger{color:var(--danger);border-color:var(--danger)}
[data-theme="dark"] .btn-outline-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
[data-theme="dark"] .btn-outline-success{color:var(--success);border-color:var(--success)}
[data-theme="dark"] .btn-outline-success:hover{background:var(--success);color:#fff;border-color:var(--success)}
[data-theme="dark"] .btn-outline-warning{color:var(--warning);border-color:var(--warning)}
[data-theme="dark"] .btn-outline-warning:hover{background:var(--warning);color:#1f2937;border-color:var(--warning)}
[data-theme="dark"] .btn-outline-info{color:var(--info);border-color:var(--info)}
[data-theme="dark"] .btn-outline-info:hover{background:var(--info);color:#1f2937;border-color:var(--info)}
[data-theme="dark"] .btn-outline-dark{color:var(--gray-800);border-color:var(--gray-400)}
[data-theme="dark"] .btn-outline-dark:hover{background:var(--gray-300);color:var(--gray-900);border-color:var(--gray-400)}
[data-theme="dark"] .btn-outline-light{color:var(--gray-800);border-color:var(--gray-300)}
[data-theme="dark"] .btn-outline-light:hover{background:var(--gray-200);color:var(--gray-900);border-color:var(--gray-300)}
/* Solid button variants */
[data-theme="dark"] .btn-light{background:var(--gray-200);color:var(--gray-800);border-color:var(--gray-300)}
[data-theme="dark"] .btn-light:hover{background:var(--gray-300);color:var(--gray-900)}
[data-theme="dark"] .btn-dark{background:var(--gray-700);color:var(--gray-50);border-color:var(--gray-600)}
[data-theme="dark"] .btn-dark:hover{background:var(--gray-800);color:var(--gray-50)}
/* Alert */
[data-theme="dark"] .alert{background:var(--gray-200);color:var(--gray-800)}
[data-theme="dark"] .alert-info{background:#0c4a6e;color:#e0f2fe;border-color:#155e75}
[data-theme="dark"] .alert-success{background:#064e3b;color:#d1fae5;border-color:#065f46}
[data-theme="dark"] .alert-warning{background:#78350f;color:#fef3c7;border-color:#92400e}
[data-theme="dark"] .alert-danger{background:#7f1d1d;color:#fee2e2;border-color:#991b1b}
/* Nav tabs */
[data-theme="dark"] .nav-tabs{border-bottom-color:var(--gray-300)}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--gray-600)}
[data-theme="dark"] .nav-tabs .nav-link:hover{border-color:var(--gray-300) var(--gray-300) transparent;color:var(--gray-800)}
[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--gray-100);color:var(--gray-900);border-color:var(--gray-300) var(--gray-300) var(--gray-100)}
[data-theme="dark"] hr{border-color:var(--gray-300)}
/* Pagination */
[data-theme="dark"] .page-link{background:var(--gray-200);border-color:var(--gray-300);color:var(--primary)}
[data-theme="dark"] .page-link:hover{background:var(--gray-300);color:var(--primary-dark)}
[data-theme="dark"] .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme="dark"] .page-item.disabled .page-link{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-400)}
/* Input group */
[data-theme="dark"] .input-group-text{background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-800)}
/* Card header/footer */
[data-theme="dark"] .card-header{background:var(--gray-200);border-bottom-color:var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .card-footer{background:var(--gray-200);border-top-color:var(--gray-300);color:var(--gray-800)}
/* Nav pills */
[data-theme="dark"] .nav-pills .nav-link{color:var(--gray-600)}
[data-theme="dark"] .nav-pills .nav-link:hover{background:var(--gray-200);color:var(--gray-800)}
[data-theme="dark"] .nav-pills .nav-link.active{background:var(--primary);color:#fff}
/* Form elements */
[data-theme="dark"] .form-check-label{color:var(--gray-800)}
[data-theme="dark"] .form-check-input{background-color:var(--gray-300);border-color:var(--gray-400)}
[data-theme="dark"] .form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
[data-theme="dark"] .form-label{color:var(--gray-800)}
[data-theme="dark"] .form-text{color:var(--gray-600)}
/* Close button */
[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
/* Links */
[data-theme="dark"] a{color:var(--primary-dark)}
[data-theme="dark"] a:hover{color:#93c5fd}
[data-theme="dark"] .navbar-custom .nav-link{color:rgba(255,255,255,.9)!important}
[data-theme="dark"] .navbar-custom .dropdown-menu{color:var(--gray-800)}
[data-theme="dark"] .navbar-custom .dropdown-item{color:var(--gray-800)!important}
[data-theme="dark"] .navbar-custom .dropdown-item:hover,
[data-theme="dark"] .navbar-custom .dropdown-item:focus{background:var(--gray-200);color:var(--gray-900)!important}
[data-theme="dark"] .navbar-custom .dropdown-item i{color:inherit}
[data-theme="dark"] .navbar-custom .dropdown-divider{border-top-color:var(--gray-300)}
[data-theme="dark"] .navbar-custom .dropdown-header{color:var(--gray-500)!important}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover{color:#fff}
[data-theme="dark"] .btn-outline-primary{color:var(--primary-dark);border-color:var(--primary)}
[data-theme="dark"] .btn-outline-primary:hover{background:var(--primary);color:#fff}
[data-theme="dark"] .btn-link{color:var(--primary-dark)}
/* Table variants */
[data-theme="dark"] .table-secondary{--bs-table-bg:var(--gray-200);--bs-table-color:var(--gray-800)}
[data-theme="dark"] .table-success{--bs-table-bg:#064e3b;--bs-table-color:#a7f3d0}
[data-theme="dark"] .table-danger{--bs-table-bg:#7f1d1d;--bs-table-color:#fecaca}
[data-theme="dark"] .table-warning{--bs-table-bg:#78350f;--bs-table-color:#fde68a}
[data-theme="dark"] .table-info{--bs-table-bg:#0c4a6e;--bs-table-color:#e0f2fe}
/* Contextual backgrounds */
[data-theme="dark"] .bg-warning{background-color:#78350f!important}
[data-theme="dark"] .bg-warning.bg-opacity-25{background-color:rgba(251,191,36,.1)!important}
[data-theme="dark"] .bg-success{background-color:#064e3b!important}
[data-theme="dark"] .bg-danger{background-color:#7f1d1d!important}
[data-theme="dark"] .bg-info{background-color:#0c4a6e!important}
[data-theme="dark"] .border-warning{border-color:#92400e!important}
[data-theme="dark"] .border-info{border-color:#155e75!important}
[data-theme="dark"] .border-success{border-color:#065f46!important}
[data-theme="dark"] .border-danger{border-color:#991b1b!important}
/* Badge text fixes */
[data-theme="dark"] .badge.bg-warning{color:#fde68a!important}
[data-theme="dark"] .badge.bg-danger{color:#fecaca!important}
[data-theme="dark"] .badge.bg-success{color:#a7f3d0!important}
[data-theme="dark"] .badge.bg-info{color:#cffafe!important}
[data-theme="dark"] .badge.bg-secondary{background-color:var(--gray-300)!important;color:var(--gray-800)!important}
[data-theme="dark"] .badge.bg-dark{background-color:var(--gray-300)!important;color:var(--gray-800)!important}
/* Accordion */
[data-theme="dark"] .accordion-item{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .accordion-button{background:var(--gray-200);color:var(--gray-800)}
[data-theme="dark"] .accordion-button:not(.collapsed){background:var(--gray-200);color:var(--primary-dark);box-shadow:inset 0 -1px 0 var(--gray-300)}
[data-theme="dark"] .accordion-button::after{filter:invert(1) grayscale(100%) brightness(200%)}
[data-theme="dark"] .accordion-body{background:var(--gray-100);color:var(--gray-800)}
/* Offcanvas */
[data-theme="dark"] .offcanvas{background:var(--gray-100);color:var(--gray-800);border-color:var(--gray-300)}
/* Toast (Bootstrap) */
[data-theme="dark"] .toast{background:var(--gray-100);color:var(--gray-800);border-color:var(--gray-300)}
[data-theme="dark"] .toast-header{background:var(--gray-200);color:var(--gray-800);border-bottom-color:var(--gray-300)}
/* Popover / Tooltip */
[data-theme="dark"] .popover{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-800)}
[data-theme="dark"] .popover-header{background:var(--gray-200);color:var(--gray-800);border-bottom-color:var(--gray-300)}
[data-theme="dark"] .popover-body{color:var(--gray-800)}
[data-theme="dark"] .tooltip-inner{background:var(--gray-200);color:var(--gray-800)}
[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before{border-top-color:var(--gray-200)}
[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color:var(--gray-200)}
/* Progress bars */
[data-theme="dark"] .progress{background-color:var(--gray-300)}

/* ---------- Base ---------- */
body{
  background:var(--gray-50);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--gray-800);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:600;color:var(--gray-900)}

/* ---------- Navbar ---------- */
.navbar-custom{
  background:linear-gradient(90deg,#525665 0%,#3b82f6 100%);
  padding:.75rem 0;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:1050;
}
.navbar-brand-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.brand-skewed{
  font-size:1.55rem;font-family:'Poppins',sans-serif;font-weight:700;
  text-transform:uppercase;
  background:linear-gradient(135deg,#ffffff 20%,#e0e7ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
  user-select:none;
  letter-spacing:.5px;
}
.navbar-custom .nav-link{
  color:rgba(255,255,255,.9)!important;font-weight:500;
  padding:.5rem .9rem;border-radius:var(--radius);
  transition:.2s all;
  position:relative;
}
.navbar-custom .nav-link::after{
  content:'';position:absolute;left:50%;bottom:.2rem;
  width:70%;height:2px;background:#fff;border-radius:1px;
  transform:translateX(-50%) scaleX(0);transition:transform .2s;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus{color:#fff!important;background:rgba(255,255,255,.12)}
.navbar-custom .nav-link:hover::after{transform:translateX(-50%) scaleX(1)}
.navbar-toggler{border-color:rgba(255,255,255,.3)}
.navbar-toggler-icon{filter:invert(1)}

/* Emphasized nav link (My Projects for employers) */
.nav-link-emphasis{
  background:rgba(255,255,255,.15)!important;
  border:1.5px solid rgba(255,255,255,.45)!important;
  border-radius:var(--radius-full,999px)!important;
  padding:.4rem 1rem!important;
  font-weight:600!important;
  letter-spacing:.01em;
  color:#fff!important;
}
.nav-link-emphasis:hover,
.nav-link-emphasis:focus{
  background:rgba(255,255,255,.25)!important;
  border-color:#fff!important;
}
@media(max-width:991.98px){
  .nav-link-emphasis{border:none!important;border-radius:0!important;padding:.5rem 1rem!important;background:none!important}
}

/* CTA dropdown — ghost/outline style */
.nav-cta-dropdown .dropdown-toggle{
  background:transparent;color:#fff!important;
  border:2px solid rgba(255,255,255,.7);
  border-radius:var(--radius-md);padding:.4rem 1rem;font-weight:600;
  transition:.2s;
}
.nav-cta-dropdown .dropdown-toggle:hover,
.nav-cta-dropdown .dropdown-toggle.show{
  background:rgba(255,255,255,.18);color:#fff!important;
  border-color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.12);transform:translateY(-1px);
}
.nav-cta-dropdown .dropdown-toggle::after{margin-left:.5rem}
.nav-cta-dropdown .dropdown-menu{min-width:260px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.nav-cta-dropdown .dropdown-header{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gray-500);font-weight:700;padding:.5rem 1rem .25rem;
}

/* ---------- Components ---------- */
.alert{border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}

/* ---------- Snackbar toast ---------- */
.hw-toast-wrap{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  pointer-events:none;
}
.hw-toast{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.25rem;
  border-radius:var(--radius-full);
  font-size:.88rem;font-weight:500;
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;transform:translateY(12px);
  animation:hwToastIn .3s ease forwards;
  white-space:nowrap;max-width:92vw;
}
.hw-toast--success{background:#10b981}
.hw-toast--danger{background:#ef4444}
.hw-toast--warning{background:#f59e0b;color:#1f2937}
.hw-toast--info{background:#2563eb}
.hw-toast--out{animation:hwToastOut .3s ease forwards}
@keyframes hwToastIn{to{opacity:1;transform:translateY(0)}}
@keyframes hwToastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}
.card{border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.btn{border-radius:var(--radius)}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);
                   box-shadow:var(--shadow-md);transform:translateY(-1px)}
/* fade-in for main */
main{animation:fadeIn .4s ease-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Landing-page navbar (sticky, translucent white) ---------- */
.landing-page .navbar-custom{
  position:sticky;
  top:0;
  z-index:1050;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(15,23,42,.06);
  box-shadow:none;
  padding:.5rem 0;
}
/* Brand: left-aligned logo + wordmark, no center-float */
.landing-page .navbar-brand-center{position:static;transform:none}
.landing-page .navbar-custom .nav-logo-img{
  display:inline-block!important;
  /* Swap white-variant placeholder for the colored Code2College logo so it reads on a white nav */
  content:url("/static/images/code2college-logo.png");
  height:44px!important;
  width:auto;
  margin-right:22px;
  vertical-align:middle;
}
.landing-page .navbar-custom .brand-skewed{
  display:inline-block!important;
  background:none;
  -webkit-text-fill-color:#0E3B57;
  color:#0E3B57;
  filter:none;
  text-shadow:none;
  font-size:1.25rem;
  letter-spacing:.2px;
  vertical-align:middle;
}
/* Nav links (when middle links exist in some variants) */
.landing-page .navbar-custom .nav-link{
  color:#1f2937!important;
  font-weight:500;
  font-size:.95rem;
  padding:.5rem .9rem;
  border-radius:var(--radius);
  background:transparent;
}
.landing-page .navbar-custom .nav-link::after{display:none}
.landing-page .navbar-custom .nav-link:hover,
.landing-page .navbar-custom .nav-link:focus{
  color:#0E3B57!important;
  background:rgba(14,59,87,.04);
}
/* Login link: ghost text */
.landing-page .navbar-custom .nav-item .nav-link[href*="/login"],
.landing-page .navbar-custom .nav-item .nav-link[href$="login"]{
  color:#0E3B57!important;
  font-weight:500;
}
/* Register: orange pill */
.landing-page .navbar-custom .nav-register-btn{
  background:#F57531!important;
  color:#fff!important;
  font-weight:600!important;
  font-size:.9rem!important;
  padding:.55rem 1.2rem!important;
  border-radius:999px!important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;
  line-height:1.1;
}
.landing-page .navbar-custom .nav-register-btn:hover{
  background:#e06428!important;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(245,117,49,.35);
}
/* Mobile: dark hamburger on white nav */
.landing-page .navbar-custom .navbar-toggler{
  border-color:rgba(15,23,42,.2);
}
.landing-page .navbar-custom .navbar-toggler-icon{
  filter:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230E3B57' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---------- Skip Navigation ---------- */
.skip-nav{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip-nav:focus{
  position:fixed;
  top:0;
  left:0;
  width:auto;
  height:auto;
  padding:.75rem 1.5rem;
  background:var(--primary);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  z-index:10000;
  outline:2px solid #fff;
}