/* ============================================================
   Jolmers - Hoofdstijlblad
   /public/style/main.css
   ============================================================ */

/* ─── RESET & BASIS ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f5f6f8; color: #1a2340; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #0a2260; }
a:hover { color: #e8891a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── NAVIGATIE ───────────────────────────────────────────── */
.nav { background: #0a2260; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 58px; }
.nav-logo { text-decoration: none; display: flex; align-items: center; }
.nav-logo img { display: block; height: 33px; width: auto; }

.nav-arrow { color: #e8891a !important; }
.nav-links { display: flex; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a { color: #cdd8f0; font-size: 13px; padding: 0 12px; height: 58px; display: flex; align-items: center; text-decoration: none; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.nav-links > li > a:hover,
.nav-links > li > a[aria-current="page"] { color: #fff; border-bottom-color: #e8891a; }
.nav-highlight { background: rgba(232,137,26,0.15); border-radius: 4px; }
/* Los van .nav-highlight (Cursusdata) gehouden: een tweede naast-elkaar-staande
   gekleurde pil oogde als één samengevloeid blok. Dun randaccent i.p.v. een
   eigen achtergrondkleur onderscheidt de knop zonder visueel te concurreren. */
.nav-login { border: 1px solid rgba(205,216,240,0.35); border-radius: 4px; margin: 0 2px; }
.nav-login:hover, .nav-login[aria-current="page"] { border-color: #e8891a; }
.nav-chevron { font-size: 10px; margin-left: 3px; }

/* Dropdown */
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #e0e4ef; border-radius: 0 0 8px 8px; min-width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); list-style: none; z-index: 200; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a { display: block; padding: 10px 16px; font-size: 13px; color: #1a2340; text-decoration: none; border-bottom: 1px solid #f0f3fb; }
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover { background: #f0f3fb; color: #0a2260; }

/* Mobiel toggle */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; transition: transform 0.2s; }

/* ─── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb-bar { background: #fff; border-bottom: 1px solid #e0e4ef; padding: 9px 1.5rem; }
.breadcrumb { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.breadcrumb li a { color: #0a2260; text-decoration: none; }
.breadcrumb li a:hover { text-decoration: underline; }
.breadcrumb .current { color: #4a5570; }
.breadcrumb .sep { color: #b0bcd8; }

/* ─── HERO ────────────────────────────────────────────────── */
.hero { background: #0a2260 !important; padding: 56px 1.5rem 48px; text-align: center; }
.hero-inner { max-width: 700px; margin: 0 auto; }
.hero-eyebrow { display: inline-block; background: rgba(232,137,26,0.2); color: #f0a84d !important; font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 18px; border: 1px solid rgba(232,137,26,0.35); }
.hero h1, .hero h1 * { color: #ffffff !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.15 !important; margin-bottom: 14px !important; }
.hero h1 .accent { color: #e8891a !important; }
.hero-sub { color: #9eb4d8 !important; font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .btn-secondary { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.3) !important; }

/* ─── USP BALK ────────────────────────────────────────────── */
.usp-bar { background: #fff; border-bottom: 1px solid #e0e4ef; display: flex; justify-content: center; flex-wrap: wrap; }
.usp-item { display: flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 13px; color: #4a5570; border-right: 1px solid #e8ecf5; }
.usp-item:last-child { border-right: none; }
.usp-icon { color: #e8891a; font-weight: 700; font-size: 15px; }
.usp-item strong { color: #0a2260; }

/* ─── SECTIES ─────────────────────────────────────────────── */
.section { padding: 52px 1.5rem; }
.section-alt { background: #fff; }
.section-inner { max-width: 1000px; margin: 0 auto; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #e8891a; margin-bottom: 6px; }
.section h2 { font-size: 24px; font-weight: 800; color: #0a2260; margin-bottom: 6px; }
.section-sub { font-size: 14px; color: #6b7590; margin-bottom: 28px; }

/* ─── OPLEIDINGEN GRID ────────────────────────────────────── */
.opl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.opl-card { background: #fff; border-radius: 10px; border: 1.5px solid #e0e4ef; padding: 20px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: 8px; }
.opl-card:hover { border-color: #e8891a; box-shadow: 0 4px 18px rgba(10,34,96,0.09); }
.opl-icon { width: 36px; height: 36px; background: #eef2ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opl-card h3 { font-size: 14px; font-weight: 700; color: #0a2260; }
.opl-card p { font-size: 12.5px; color: #6b7590; line-height: 1.5; flex: 1; }
.opl-arrow { font-size: 12px; color: #e8891a; font-weight: 600; }

/* ─── KALENDER ────────────────────────────────────────────── */
.cal-wrap { border-radius: 10px; border: 1px solid #e0e4ef; overflow: hidden; }
.cal-table { width: 100%; border-collapse: collapse; background: #fff; }
.cal-table thead th { background: #0a2260; color: #9eb4d8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 11px 14px; text-align: left; }
.cal-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid #f0f3fb; vertical-align: middle; }
.cal-table tr:last-child td { border-bottom: none; }
.cal-table tr:hover td { background: #fafbff; }
.cal-cards { display: none; } /* Kaartweergave alleen op mobiel */
.cal-cursus-naam { font-weight: 600; color: #0a2260; text-decoration: none; }
.cal-cursus-naam:hover { color: #e8891a; text-decoration: underline; }
.cal-datum { color: #4a5570; white-space: nowrap; }
.cal-locatie { color: #8090b8; font-size: 12px; }
.cal-leeg { text-align: center; color: #6b7590; padding: 24px; }
.land-de { font-size: 10px; background: #eef2ff; color: #0a2260; padding: 1px 5px; border-radius: 3px; font-weight: 700; }

/* ─── BADGES ──────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.badge-groen { background: #e6f4ea; color: #1a7a35; }
.badge-oranje { background: #fff3e0; color: #b35a00; }
.badge-rood { background: #fdecea; color: #a32020; }
.badge-code95 { background: #eef2ff; color: #0a2260; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 4px; font-weight: 700; }

/* ─── KNOPPEN ─────────────────────────────────────────────── */
.btn-primary { background: #e8891a; color: #fff; font-size: 14px; font-weight: 700; padding: 11px 26px; border-radius: 6px; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: background 0.15s; }
.btn-primary:hover { background: #d07510; color: #fff; }
.btn-secondary { background: rgba(10,34,96,0.08); color: #0a2260; font-size: 14px; font-weight: 600; padding: 11px 26px; border-radius: 6px; text-decoration: none; display: inline-block; border: 1px solid #c0cadf; transition: background 0.15s; }
.btn-secondary:hover { background: rgba(10,34,96,0.14); }
.btn-aanmeld { background: #0a2260; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 5px; text-decoration: none; white-space: nowrap; display: inline-block; }
.btn-aanmeld:hover { background: #e8891a; color: #fff; }
.btn-contact { background: #f0f3fb; color: #0a2260; }
.btn-footer { background: #e8891a; color: #fff; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 5px; text-decoration: none; display: inline-block; }

/* ─── CONTACT STRIP ───────────────────────────────────────── */
.contact-strip { background: #0a2260; padding: 44px 1.5rem; text-align: center; }
.contact-strip h2 { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.contact-strip p { color: #9eb4d8; font-size: 14px; margin-bottom: 22px; }
.contact-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── FOOTER ──────────────────────────────────────────────── */
.footer { background: #07164a; padding: 44px 1.5rem 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 180px repeat(4, 1fr); gap: 24px; padding-bottom: 36px; }
.footer-logo { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 1px; margin-bottom: 10px; }
.footer-arrow { color: #e8891a; }
.footer-col p { font-size: 13px; color: #6a82b8; line-height: 1.6; }
.footer-col h3 { font-size: 12px; font-weight: 700; color: #9eb4d8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a { font-size: 13px; color: #6a82b8; text-decoration: none; }
.footer-col ul li a:hover { color: #fff; }
.footer-col address { font-style: normal; font-size: 13px; color: #6a82b8; line-height: 1.8; }
.footer-col address a { color: #6a82b8; }
.footer-col address a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1a306a; padding: 14px 0; }
.footer-bottom p { max-width: 1000px; margin: 0 auto; font-size: 11.5px; color: #3a5090; text-align: center; }
.footer-bottom a { color: #3a5090; }
.footer-bottom a:hover { color: #9eb4d8; }

/* ─── AANMELDFORMULIER ────────────────────────────────────── */
.aanmeld-wrap { max-width: 760px; margin: 32px auto; padding: 0 1.5rem 60px; }
.aanmeld-cursusinfo { background: #0a2260; border-radius: 8px; padding: 16px 20px; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.aanmeld-cursusinfo h1 { color: #fff; font-size: 17px; font-weight: 800; }
.aanmeld-cursusinfo p { color: #9eb4d8; font-size: 13px; margin-top: 3px; }
.form-section { background: #fff; border: 1px solid #e0e4ef; border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; }
.section-title { font-size: 13px; font-weight: 700; color: #0a2260; border-bottom: 1px solid #f0f3fb; padding-bottom: 10px; margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row-3 { grid-template-columns: 1fr auto auto; }
.form-row.form-row-1 { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11.5px; font-weight: 600; color: #4a5570; }
.form-group input,
.form-group select,
.form-group textarea { border: 1px solid #d0d6e8; border-radius: 5px; padding: 8px 10px; font-size: 13px; color: #1a2340; font-family: inherit; background: #fff; width: 100%; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: #0a2260; box-shadow: 0 0 0 3px rgba(10,34,96,0.08); }
.form-group textarea { resize: vertical; }
.req { color: #e8891a; }
.form-tip { font-size: 12px; color: #6b7590; margin-bottom: 12px; background: #fffbf0; border: 1px solid #f5d580; border-radius: 5px; padding: 8px 12px; }

/* Type keuze */
.type-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-btn { border: 2px solid #e0e4ef; border-radius: 8px; padding: 14px; cursor: pointer; background: #fff; transition: border-color 0.15s, background 0.15s; }
.type-btn.selected { border-color: #0a2260; background: #eef2ff; }
.type-btn input { display: none; }
.tb-titel { font-size: 13px; font-weight: 700; color: #0a2260; }
.tb-sub { font-size: 11.5px; color: #6b7590; margin-top: 2px; }

/* Deelnemers */
.deelnemer-blok { border: 1px solid #e0e4ef; border-radius: 7px; padding: 14px; margin-bottom: 10px; background: #fafbff; }
.deelnemer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.deelnemer-nr { font-size: 12px; font-weight: 700; color: #0a2260; background: #eef2ff; padding: 3px 10px; border-radius: 10px; }
.btn-verwijder { font-size: 11.5px; color: #a32020; background: #fdecea; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.btn-toevoegen { background: #f0f3fb; color: #0a2260; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 6px; border: 1px solid #c0cadf; cursor: pointer; margin-top: 4px; }
.btn-toevoegen:hover { background: #dde4f8; }

/* Radio opties */
.radio-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid #e0e4ef; border-radius: 6px; margin-bottom: 8px; cursor: pointer; background: #fff; }
.radio-option:hover { border-color: #0a2260; }
.radio-option input { margin-top: 3px; accent-color: #0a2260; flex-shrink: 0; }
.radio-option div strong { display: block; font-size: 13px; color: #0a2260; }
.radio-option div span { font-size: 12px; color: #6b7590; }

/* Submit */
.submit-area { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.avg-note { font-size: 11.5px; color: #8090b8; max-width: 400px; }
.btn-submit { background: #0a2260; color: #fff; font-size: 14px; font-weight: 700; padding: 12px 32px; border-radius: 6px; border: none; cursor: pointer; }
.btn-submit:hover { background: #e8891a; }

/* Succes & fouten */
.succes-box { background: #e6f4ea; border: 1px solid #a8d5b4; border-radius: 8px; padding: 28px; text-align: center; }
.succes-icon { font-size: 40px; color: #1a7a35; margin-bottom: 12px; }
.succes-box h1 { font-size: 20px; color: #1a7a35; margin-bottom: 10px; }
.succes-box p { color: #2a5a35; font-size: 14px; margin-bottom: 6px; }
.fout-box { background: #fdecea; border: 1px solid #f09595; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #a32020; }
.fout-box ul { margin-top: 6px; padding-left: 18px; }

/* ─── VERBORGEN ───────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── RESPONSIEF ──────────────────────────────────────────── */
/* ─── TABLET ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* ─── MOBIEL ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Navigatie */
  .nav-links { display: none; flex-direction: column; position: absolute; top: 58px; left: 0; right: 0; background: #0a2260; padding: 10px 0; z-index: 200; }
  .nav-links.open { display: flex; }
  .nav-links > li > a { height: auto; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); border-left: 3px solid transparent; }
  .dropdown { position: static; box-shadow: none; border-radius: 0; border: none; border-left: 3px solid #e8891a; margin-left: 20px; }
  .nav-toggle { display: block; }

  /* Hero */
  .hero h1 { font-size: 24px; }
  .hero-btns { flex-direction: column; align-items: center; }

  /* Formulieren */
  .form-row, .type-keuze { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }

  /* USP */
  .usp-bar { flex-direction: column; }
  .usp-item { border-right: none; border-bottom: 1px solid #e8ecf5; }

  /* KALENDER — verberg kolommen op mobiel */
  .cal-table th:nth-child(4),
  .cal-table td:nth-child(4),
  .cal-table th:nth-child(5),
  .cal-table td:nth-child(5) { display: none; }

  /* CURSUSDATA pagina — tabel responsive */
  .cal-duur { display: none; }
  .cal-table { font-size: 12px; }
  .cal-table { display: table !important; }
  .cal-cards { display: none !important; }
  .cal-table td, .cal-table th { padding: 8px 8px; }

  /* Contact pagina — sidebar onder formulier */
  .section-inner > div[style*="grid-template-columns:1fr 320px"],
  .section-inner > div[style*="grid-template-columns: 1fr 320px"] {
    display: block !important;
  }
  .section-inner > div[style*="grid-template-columns:1fr 320px"] > div:last-child,
  .section-inner > div[style*="grid-template-columns: 1fr 320px"] > div:last-child {
    margin-top: 24px;
  }

  /* Cursuspagina sidebar */
  .cursus-body { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; }

  /* Aanmeldformulier */
  .aanmeld-wrap { padding: 0 1rem 40px; }
  .submit-area { flex-direction: column; align-items: stretch; }
  .submit-area .btn-submit { width: 100%; text-align: center; }
}

/* ─── KLEIN MOBIEL ───────────────────────────────────────── */
@media (max-width: 600px) {
  .cal-table { display: none !important; }
  .cal-cards { display: block !important; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .cal-table th:nth-child(3),
  .cal-table td:nth-child(3) { display: none; }
  .badge-code95 { display: none; }
  .usp-bar .usp-item:nth-child(n+4) { display: none; }
}

/* ─── PAGE HEADER BLAUW ─────────────────────────────────── */
.page-header-blauw { background: #0a2260 !important; padding: 32px 1.5rem 28px; }
.page-header-blauw .section-inner { max-width: 1000px; margin: 0 auto; }
.page-header-blauw h1 { color: #ffffff !important; font-size: 26px !important; font-weight: 800 !important; margin-bottom: 6px !important; line-height: 1.2 !important; }
.page-header-blauw p { color: #9eb4d8 !important; font-size: 14px; margin: 0; }
.page-header-blauw .section-label { color: #f0a84d !important; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 6px; }

/* ─── CONTACT GRID ───────────────────────────────────────── */
.contact-grid { display: grid !important; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }

/* ─── CURSUSDATA TABEL MOBIEL ────────────────────────────── */
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > div:last-child { margin-top: 0; }
}

/* ─── E-LEARNING LESINHOUD (el_paginas.inhoud_html) ─────── */
.el-tabel { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.el-tabel th { background: #0a2260; color: #fff; text-align: left; padding: 9px 12px; }
.el-tabel td { padding: 9px 12px; border-bottom: 1px solid #e5e8f0; vertical-align: top; }
.el-tabel tr:last-child td { border-bottom: none; }
.el-tabel tr:nth-child(even) td { background: #f7f8fc; }

.el-blok { border-radius: 10px; padding: 14px 18px; margin: 20px 0; border-left: 5px solid; font-size: 14px; line-height: 1.6; }
.el-blok p:first-child { margin-top: 0; }
.el-blok p:last-child { margin-bottom: 0; }
.el-wistjedat { background: #fff8e1; border-color: #f5b400; }
.el-letop { background: #fdecea; border-color: #d93025; }
.el-inspecteur { background: #e8f0fe; border-color: #1a56a0; }
.el-praktijk { background: #e6f4ea; border-color: #1e8e3e; }
.el-opdracht { background: #f2ecfb; border-color: #7c3aed; }

.el-les-inhoud ul, .el-les-inhoud ol { padding-left: 20px; }

/* Nagebouwde officiële documenten (CMR-vrachtbrief e.d.) — herbruikbaar sjabloon
   voor genummerde "vakken" zoals op het echte formulier, zodat interactieve
   hotspots (zie el_hotspot.php) er realistisch in passen. */
.el-vrachtbrief { border: 2px solid #333; border-radius: 4px; background: #fffdf8; margin: 20px 0; font-size: 12px; color: #1a1a1a; overflow: hidden; }
.el-vrachtbrief-kop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; background: #333; color: #fff; padding: 8px 12px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; }
.el-vrachtbrief-grid { display: grid; grid-template-columns: 1fr 1fr; }
.el-vrachtbrief-vak { border: 1px solid #999; padding: 8px 10px; }
.el-vrachtbrief-nrlabel { display: inline-block; font-weight: 800; font-size: 14px; margin-right: 4px; color: #333; }
.el-vrachtbrief-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.3px; }
.el-vrachtbrief-inhoud { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
.el-vrachtbrief-goederen { width: 100%; border-collapse: collapse; font-size: 12px; }
.el-vrachtbrief-goederen th, .el-vrachtbrief-goederen td { border: 1px solid #999; padding: 8px; vertical-align: top; text-align: left; }
.el-vrachtbrief-goederen th { background: #f0f0f0; font-size: 10px; font-weight: 700; color: #333; }

@media (max-width: 700px) {
  .el-tabel { font-size: 12.5px; }
  .el-tabel th, .el-tabel td { padding: 7px 9px; }
  .el-vrachtbrief-grid { grid-template-columns: 1fr; }
  .el-vrachtbrief-goederen { font-size: 11px; }
}