/* ========================================================================== EM MELISSEN — Theme CSS Vast variabelensysteem + Header + Footer + WooCommerce ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&display=swap'); /* --- BRANDING (vast, geen dark mode) --- */ :root { --em-navy: #1C2331; --em-coral: #D9623A; --em-coral-dark: #b84e2a; --em-coral-light: #FAEEE9; --em-sage: #6B9E6F; --em-sage-light: #EBF3EC; --em-gold: #C8921A; --em-gold-light: #FDF8EE; --em-bg: #ffffff; --em-bg-warm: #F7F7F6; --em-card-bg: #ffffff; --em-border: #E2DDD6; --em-grey: #6B7280; --em-font-sans: 'Poppins', sans-serif; --em-font-serif: 'Lora', serif; /* primary = de kleur die overal als "actie/accent" kleur dient */ --em-primary: var(--em-coral); } /* Basis: zorgt voor de juiste standaard achtergrond/tekstkleur op elke pagina, en houdt de footer onderaan bij korte pagina's. !important hier is veilig: dit is het / element zelf, geen losse Elementor- sectie, dus dit overschrijft nooit een bewust ingestelde sectie- achtergrond die je later zelf in Elementor kiest. */ html, body { background: var(--em-bg) !important; color: var(--em-navy) !important; min-height: 100vh; } body { display: flex; flex-direction: column; font-family: var(--em-font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--em-primary); } a:hover { color: var(--em-coral-dark); } img { max-width: 100%; height: auto; } /* ========================================================================== PAGE CONTENT — zorgt dat alle gewone content (ook binnen Elementor) de EM Melissen-typografie volgt, niet alleen de header. Let op: deze selectors zijn met opzet iets "zwaarder" gemaakt (met "body" ervoor) dan losse tags. Elementor's eigen standaard kit-CSS gebruikt namelijk al samengestelde selectors (bv. ".elementor-widget-heading .elementor-heading-title"), die normaal gesproken winnen van een simpele ".elementor-heading-title" regel. Door "body" toe te voegen winnen wij, zonder !important — dus handmatige kleurkeuzes die je later per widget in Elementor instelt (die werken via inline style) blijven gewoon werken. ========================================================================== */ body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title, body .elementor-widget-heading .elementor-heading-title { color: var(--em-navy) !important; font-family: var(--em-font-sans) !important; font-weight: 700; } body h1 { font-size: clamp(2.1rem, 5.5vw, 3.25rem) !important; line-height: 1.2 !important; } body h2 { font-size: clamp(1.5rem, 4vw, 2.25rem) !important; line-height: 1.25 !important; } body h3 { font-size: clamp(1.2rem, 2.75vw, 1.5rem) !important; line-height: 1.35 !important; } /* !important hieronder is nodig: Elementor's eigen Global Colors worden door Elementor zelf óók met !important uitgevoerd (om Kit-wide overal te gelden), dus een normale regel - hoe specifiek ook - verliest altijd. Wil je een individuele paragraaf/link toch een eigen kleur geven, doe dat dan via Elementor's "Custom CSS" veld per element en zet daar zelf ook !important bij - dat wint dan weer van onderstaande regels. */ body p, body li, body span, body .elementor-widget-text-editor, body .elementor-widget-text-editor p, body .elementor-icon-list-text { color: var(--em-grey) !important; font-family: var(--em-font-serif) !important; } body a, body a:visited { color: var(--em-primary) !important; font-family: var(--em-font-sans) !important; } /* Elementor secties/containers die geen eigen achtergrond hebben gekregen (dus "transparant" staan) vallen automatisch terug op de pagina-achtergrond */ body .elementor-section, body .elementor-container, body .e-con, body .elementor-widget-wrap { background-color: transparent; } /* Zorgt dat de page content de lege ruimte opvult → footer blijft onderaan */ body > .elementor, body > #page, body > main, body > .site-content, body > div.elementor { flex: 1; } /* Herbruikbare "warme" sectie-achtergrond — zet "em-section-warm" in het Custom CSS classes veld van een Container/Section in Elementor */ .em-section-warm { background: var(--em-bg-warm) !important; } /* Herbruikbare kaart-stijl — zet "em-card" in het Custom CSS classes veld van een Container/Section in Elementor om 'm mee te laten stijlen */ .em-card { background: var(--em-card-bg); border: 1px solid var(--em-border); border-radius: 8px; padding: 30px; transition: 0.3s; } .em-card:hover { border-color: var(--em-primary); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(28, 35, 49, 0.08); } /* Herbruikbare knop-stijl — zet "em-btn-main" in het Custom CSS classes veld van een Elementor knop-widget */ .em-btn-main { background: var(--em-primary); color: #fff !important; padding: 14px 32px; border: none; border-radius: 25px; font-weight: 700; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 12px rgba(217, 98, 58, .3); } .em-btn-main:hover { background: var(--em-coral-dark); transform: translateY(-1px); } /* ========================================================================== HEADER ========================================================================== */ .em-nav { background: var(--em-navy); border-bottom: 3px solid var(--em-coral); position: sticky; top: 0; z-index: 1000; font-family: var(--em-font-sans); padding-top: 8px; } .em-nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 96px; padding: 0 2.5rem; max-width: 100%; gap: 0; } .em-nav-brand { display: flex; align-items: center; gap: .875rem; text-decoration: none; flex-shrink: 0; } .em-nav-logo-img { width: 80px; height: auto; max-height: 72px; flex-shrink: 0; display: block; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } .em-nav-brand-name { font-weight: 700; font-size: 1rem; color: #fff; display: block; line-height: 1.3; } .em-nav-brand-sub { font-size: .6875rem; color: var(--em-coral); display: block; line-height: 1; } .em-nav-links { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0 1rem; gap: .125rem; } .em-nav-links li { margin: 0; } .em-nav-links li a { color: rgba(255,255,255,.75); font-size: .8125rem; font-weight: 500; padding: .5rem .75rem; border-radius: 4px; text-decoration: none; display: block; transition: color .18s, background .18s; white-space: nowrap; position: relative; } .em-nav-links li a:hover { color: #fff; } .em-nav-links li.em-active a, .em-nav-links li.current-menu-item a { color: var(--em-sage); font-weight: 600; } .em-nav-links li a::after { content: ''; position: absolute; bottom: -2px; left: .75rem; right: .75rem; height: 2px; background: var(--em-sage); transform: scaleX(0); transition: transform .2s ease; transform-origin: left; } .em-nav-links li a:hover::after, .em-nav-links li.em-active a::after { transform: scaleX(1); } .em-nav-cta { display: flex; align-items: center; flex-shrink: 0; } .em-nav-btn { background: var(--em-coral); color: #fff !important; font-family: var(--em-font-sans); font-size: .875rem; font-weight: 700; padding: .6875rem 1.5rem; border-radius: 25px; text-decoration: none !important; white-space: nowrap; transition: background .18s, transform .18s; display: inline-block; letter-spacing: .01em; box-shadow: 0 2px 12px rgba(217,98,58,.3); } .em-nav-btn:hover { background: var(--em-coral-dark); transform: translateY(-1px); color: #fff !important; } .em-hamburger { display: none; background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #fff; cursor: pointer; padding: .4rem .65rem; font-size: 1.125rem; margin-left: .75rem; line-height: 1; flex-shrink: 0; transition: border-color .2s; } .em-hamburger:hover { border-color: rgba(255,255,255,.5); } /* Mobiel CTA-item: alleen zichtbaar in het uitgeklapte mobiele menu */ .em-mobile-cta { display: none; } @media (max-width: 1024px) { .em-nav-inner { grid-template-columns: auto auto; justify-content: space-between; padding: 0 1.5rem; height: 80px; } .em-nav-links { display: none; } .em-nav-cta { display: none; } .em-hamburger { display: flex; align-items: center; justify-content: center; } .em-nav-links.open { display: flex; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: #151b27; padding: 1rem 1.5rem 1.5rem; z-index: 999; border-bottom: 2px solid var(--em-coral); gap: .25rem; box-shadow: 0 8px 32px rgba(0,0,0,.5); } .em-nav-links.open li { width: 100%; } .em-nav-links.open li a { padding: .75rem 1rem; border-radius: 6px; font-size: .9375rem; color: rgba(255,255,255,.85); } .em-nav-links.open li a::after { display: none; } .em-nav-links.open li a:hover { background: rgba(217,98,58,.1); color: #fff; } .em-nav-links.open li.em-active a { background: rgba(107,158,111,.08); color: var(--em-sage); } .em-nav-links.open li.em-mobile-cta { display: block; margin-top: .375rem; } .em-nav-links.open li.em-mobile-cta a { background: var(--em-coral); color: #fff !important; font-weight: 700; border-radius: 25px; text-align: center; } } @media (max-width: 640px) { .em-nav-inner { padding: 0 1rem; height: 68px; } .em-nav-links.open { top: 68px; } .em-nav-logo-img { width: 56px; } } /* ========================================================================== FOOTER ========================================================================== */ .em-footer { font-family: var(--em-font-sans); } .em-footer-top { background: var(--em-navy); border-top: 3px solid var(--em-coral); padding: 56px 0 48px; } .em-footer-grid { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2.5rem; } .em-footer-col { display: flex; flex-direction: column; gap: 12px; } .em-footer-logo-img { width: 100px; height: auto; display: block; background: transparent; border: none; padding: 0; margin: 0; } .em-footer-brand-name { font-weight: 700; font-size: 1.125rem; color: #fff; } .em-footer-kvk { font-size: 12px; color: #4A5568; margin: 0; line-height: 1.6; } .em-footer-heading { font-size: 12px; font-weight: 700; color: var(--em-sage); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; } .em-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .em-footer-links a { color: rgba(255,255,255,.55); text-decoration: none; font-size: 13px; transition: color .18s; } .em-footer-links a:hover { color: var(--em-coral); } .em-footer-bottom { background: #151b27; border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; } .em-footer-bottom-inner { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; display: flex; flex-direction: column; gap: 8px; } .em-footer-bottom-inner p { font-size: 12px; color: rgba(255,255,255,.4) !important; margin: 0; line-height: 1.6; font-family: var(--em-font-sans) !important; } .em-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; } .em-footer-legal a { color: rgba(255,255,255,.4); text-decoration: none; font-size: 12px; transition: color .18s; } .em-footer-legal a:hover { color: var(--em-coral); } @media (max-width: 768px) { .em-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .em-footer-grid { grid-template-columns: 1fr; } .em-footer-bottom-inner { flex-direction: column; gap: 12px; } } /* ── Back to top ── */ #em-btt { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--em-coral); color: #fff; border: none; border-radius: 50%; font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 999; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(217,98,58,.4); } #em-btt.show { opacity: 1; pointer-events: auto; } #em-btt:hover { background: var(--em-coral-dark); transform: translateY(-2px); } /* Fade-in animatie — zet "em-fade" op een Elementor-element/sectie */ .em-fade { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; } .em-fade.visible { opacity: 1; transform: translateY(0); } /* ========================================================================== WOOCOMMERCE — Winkel, product, winkelwagen, afrekenen, account Hergebruikt de bestaande --em-* variabelen voor consistente branding. ========================================================================== */ .woocommerce, .woocommerce-page { color: var(--em-grey); font-family: var(--em-font-serif); } .woocommerce a { color: var(--em-primary); } body.woocommerce-page h1.page-title, body.woocommerce-page h1.entry-title, body.woocommerce-page .product_title { font-family: var(--em-font-sans) !important; color: var(--em-navy) !important; } .woocommerce-breadcrumb { font-family: var(--em-font-sans); opacity: .75; margin-bottom: 30px !important; } .woocommerce-breadcrumb a { color: var(--em-primary); } /* --- Productgrid (shop-archief) --- */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; } .woocommerce ul.products li.product { background: var(--em-card-bg); border: 1px solid var(--em-border); border-radius: 8px; padding: 20px; transition: .3s; display: flex; flex-direction: column; height: 100%; margin: 0 !important; width: auto !important; float: none !important; } .woocommerce ul.products li.product:hover { border-color: var(--em-primary); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(28,35,49,.08); } .woocommerce ul.products li.product > a:first-child { display: flex; flex-direction: column; flex: 1; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-family: var(--em-font-sans) !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--em-navy) !important; margin: 12px 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .woocommerce ul.products li.product img { border-radius: 6px; } .woocommerce ul.products li.product .price { margin-top: auto; padding-top: 8px; } .woocommerce ul.products li.product a.button { margin-top: 14px; } /* --- Prijzen --- */ .woocommerce .price, .woocommerce ul.products li.product .price { color: var(--em-primary); font-weight: 700; } .woocommerce .price del { opacity: .5; color: var(--em-navy); } .woocommerce .price ins { text-decoration: none; } /* --- Sale-badge --- */ .woocommerce span.onsale { background: var(--em-primary); color: #fff; font-family: var(--em-font-sans); font-weight: 800; box-shadow: none; border-radius: 50%; } /* --- Knoppen --- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button { background: var(--em-primary) !important; color: #fff !important; font-family: var(--em-font-sans); font-weight: 700; border: none !important; border-radius: 50px; padding: 12px 28px; transition: .3s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { transform: translateY(-2px); opacity: .9; } .woocommerce a.added_to_cart { color: var(--em-primary) !important; margin-left: 10px; } /* --- Formuliervelden --- */ .woocommerce select, .woocommerce .form-row input.input-text, .woocommerce .form-row textarea, .woocommerce table.shop_table td input.qty { background: var(--em-card-bg); color: var(--em-navy); border: 1px solid var(--em-border); border-radius: 6px; padding: 10px 14px; font-family: var(--em-font-sans); } /* --- Sterren-rating --- */ .woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--em-gold); } /* --- Meldingen --- */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noticegroup-checkout, .woocommerce-noticegroup-updateorder { background: var(--em-card-bg) !important; border-top-color: var(--em-primary) !important; color: var(--em-navy) !important; border-radius: 6px; font-family: var(--em-font-sans); } .woocommerce-message::before, .woocommerce-info::before { color: var(--em-primary) !important; } /* --- Winkelwagen & afrekenen --- */ .woocommerce table.shop_table { border: 1px solid var(--em-border); border-radius: 8px; background: var(--em-card-bg); } .woocommerce table.shop_table th { font-family: var(--em-font-sans); color: var(--em-navy); border-bottom: 1px solid var(--em-border); } .woocommerce table.shop_table td { border-top: 1px solid var(--em-border); color: var(--em-navy); } .woocommerce-cart-form .product-remove a { color: var(--em-primary) !important; } .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-family: var(--em-font-sans); color: var(--em-navy); } #order_review, .woocommerce-checkout-payment { background: var(--em-card-bg); border: 1px solid var(--em-border); border-radius: 8px; padding: 20px; } .woocommerce ul.payment_methods li { border-color: var(--em-border) !important; } /* --- Mijn account --- */ .woocommerce-MyAccount-navigation ul { border: 1px solid var(--em-border); border-radius: 8px; overflow: hidden; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--em-border); } .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 20px; font-family: var(--em-font-sans); font-weight: 700; font-size: .8rem; letter-spacing: .5px; color: var(--em-navy); opacity: .7; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--em-primary); color: #fff; opacity: 1; } .woocommerce-MyAccount-content { background: var(--em-card-bg); border: 1px solid var(--em-border); border-radius: 8px; padding: 30px; margin-top: 20px; } @media (min-width: 768px) { .woocommerce-MyAccount-content { padding: 40px; } } /* --- Productpagina tabs --- */ .woocommerce-tabs ul.tabs li { font-family: var(--em-font-sans); font-weight: 700; font-size: .8rem; } .woocommerce-tabs ul.tabs li.active a { color: var(--em-primary); } .woocommerce-tabs .panel { color: var(--em-navy); } /* --- Paginering --- */ .woocommerce-pagination .page-numbers li a, .woocommerce-pagination .page-numbers li span { font-family: var(--em-font-sans); color: var(--em-navy); } .woocommerce-pagination .page-numbers li .current { background: var(--em-primary); color: #fff; } .woocommerce-ordering select, .woocommerce-result-count { font-family: var(--em-font-sans); } /* ============================================================ EM Melissen – Header & Footer kleur fixes ============================================================ */ .em-nav-btn, .em-nav-btn:hover, .em-nav-btn:focus, .em-nav-btn:visited { color: #ffffff !important; } .em-nav-links .em-nav-item a { color: #ffffff !important; } .em-nav-links .em-nav-item a:hover, .em-nav-links .em-nav-item a:focus { color: #ffffff !important; opacity: 0.75; } .elementor-widget-nav-menu footer a, footer .menu-item a, footer nav a, footer .elementor-nav-menu a, footer .elementor-icon-list-item a, footer a:not(.em-footer-legal a) { color: #ffffff !important; } footer a:hover { color: #ffffff !important; opacity: 0.75; } footer .elementor-heading-widget, footer h3, footer h4, footer h5, footer .elementor-widget-heading .elementor-heading-title { color: #ffffff !important; } footer p, footer .elementor-widget-text-editor { color: rgba(255,255,255,0.6) !important; } /* ============================================================ EM Melissen – #c36 rood/roze volledig verbannen ============================================================ */ :root { --wp-admin-theme-color: #E8622A !important; --wp-admin-theme-color--rgb: 232, 98, 42 !important; --wp-admin-theme-color-darker-10: #d4561f !important; --wp-admin-theme-color-darker-20: #bf4a18 !important; --wp--style--color--link: #E8622A !important; } * { -webkit-tap-highlight-color: rgba(232,98,42,0.2) !important; } :focus { outline: none !important; box-shadow: none !important; } :focus-visible { outline: 2px solid #E8622A !important; outline-offset: 2px !important; box-shadow: none !important; } button:focus, button:active, a:focus, a:active, input:focus, select:focus, textarea:focus, .elementor-button:focus, .elementor-button:active, .e-con button:focus, .e-con button:active { outline: none !important; box-shadow: none !important; } .em-hamburger:focus, .em-hamburger:active, [class*="hamburger"]:focus, [class*="hamburger"]:active, [class*="mobile-menu"]:focus, [class*="mobile-menu"]:active, [class*="menu-toggle"]:focus, [class*="menu-toggle"]:active { outline: none !important; box-shadow: none !important; background-color: transparent !important; border-color: transparent !important; color: inherit !important; } #em-hamburger, #em-hamburger:focus, #em-hamburger:active, #em-hamburger:focus-visible, button#em-hamburger:focus, button#em-hamburger:active { outline: none !important; box-shadow: none !important; border: none !important; border-color: transparent !important; -webkit-tap-highlight-color: transparent !important; } .wchp-btn { font-family: inherit !important; border-radius: 6px !important; transition: opacity 0.2s, transform 0.2s !important; } .wchp-btn-primary { background: #E8622A !important; color: #ffffff !important; border: none !important; outline: none !important; box-shadow: none !important; } .wchp-btn-primary:hover { opacity: 0.85 !important; transform: translateY(-1px) !important; box-shadow: none !important; } .wchp-btn-primary:focus, .wchp-btn-primary:active { outline: none !important; box-shadow: none !important; background: #E8622A !important; color: #ffffff !important; } .wchp-btn-secondary { background: transparent !important; color: #E8622A !important; border: 1px solid #E8622A !important; outline: none !important; box-shadow: none !important; } .wchp-btn-secondary:hover { background: rgba(232,98,42,0.1) !important; } .wchp-btn-secondary:focus, .wchp-btn-secondary:active { outline: none !important; box-shadow: none !important; } /* ============================================================ EM Melissen – Dropdown menu ============================================================ */ /* Dropdown wrapper */ .em-nav-item.em-has-dropdown { position: relative; } /* Chevron */ .em-dropdown-chevron { display: inline-block; margin-left: 4px; font-size: 12px; line-height: 1; transition: transform 0.2s ease; vertical-align: middle; opacity: 0.7; } .em-nav-item.em-has-dropdown.em-open > a .em-dropdown-chevron { transform: rotate(180deg); } /* Dropdown lijst */ .em-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: var(--em-navy); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 0; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } /* Open staat */ .em-nav-item.em-has-dropdown.em-open > .em-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* Dropdown items */ .em-dropdown .em-sub-item { list-style: none; } .em-dropdown .em-sub-item a { display: block; padding: 9px 18px; font-size: 14px; color: rgba(255,255,255,0.82) !important; text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; } .em-dropdown .em-sub-item a:hover { background: rgba(232,98,42,0.12); color: #ffffff !important; opacity: 1 !important; } .em-dropdown .em-sub-item.em-active > a { color: var(--em-coral) !important; font-weight: 600; } /* Separator lijntje tussen items */ .em-dropdown .em-sub-item + .em-sub-item { border-top: 1px solid rgba(255,255,255,0.05); } /* ── Mobile: dropdown als verticale lijst onder parent ── */ @media (max-width: 960px) { .em-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid rgba(232,98,42,0.3); border-radius: 0; background: transparent; padding: 0 0 0 12px; margin: 4px 0 4px 8px; display: none; } .em-nav-item.em-has-dropdown.em-open > .em-dropdown { display: block; } .em-dropdown .em-sub-item a { padding: 7px 10px; font-size: 14px; color: rgba(255,255,255,0.75) !important; } .em-dropdown .em-sub-item + .em-sub-item { border-top: none; } }