@import url('../../elastic/styles/styles.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ═══════════════════════════════════════════════
   PATRINS MAIL — Modern Dark Theme
   ═══════════════════════════════════════════════ */

:root {
  --p-bg:            #09090f;
  --p-surface:       #101017;
  --p-surface-2:     #16161f;
  --p-surface-3:     #1c1c27;
  --p-surface-hover: #1f1f2d;
  --p-border:        rgba(255,255,255,0.055);
  --p-border-strong: rgba(255,255,255,0.10);
  --p-text:          #e8e8f2;
  --p-text-2:        #7e7e9a;
  --p-text-3:        #42425a;
  --p-accent:        #6e55e8;
  --p-accent-2:      #8b73ff;
  --p-accent-bg:     rgba(110,85,232,0.10);
  --p-accent-bg-2:   rgba(110,85,232,0.18);
  --p-success:       #2dd38a;
  --p-warning:       #f0a830;
  --p-error:         #f55270;
  --p-radius:        7px;
  --p-radius-lg:     12px;
  --p-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --p-ease:          cubic-bezier(0.4,0,0.2,1);
  --p-t:             150ms;
}

/* ── Base ─────────────────────────────────────── */

html, body {
  background: var(--p-bg) !important;
  color: var(--p-text) !important;
  font-family: var(--p-font) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

a { color: var(--p-accent-2) !important; text-decoration: none !important; }
a:hover { color: var(--p-accent) !important; }

/* ── Layout shell ─────────────────────────────── */

#layout, .layout {
  background: var(--p-bg) !important;
  min-height: 100vh !important;
}

#layout > div { border-right: 1px solid var(--p-border) !important; }
#layout > div:last-child { border-right: none !important; }

/* ── Task menu (far-left icon rail) ───────────── */

#taskmenu {
  background: var(--p-bg) !important;
  border-right: 1px solid var(--p-border) !important;
  width: 56px !important;
  min-width: 56px !important;
  padding: 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

#taskmenu a {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--p-radius) !important;
  color: var(--p-text-3) !important;
  transition: background var(--p-t) var(--p-ease), color var(--p-t) var(--p-ease) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0 !important;
}

#taskmenu a:before { font-size: 15px !important; }

#taskmenu a:hover {
  background: var(--p-surface-hover) !important;
  color: var(--p-text-2) !important;
}

#taskmenu a.selected, #taskmenu a.active {
  background: var(--p-accent-bg) !important;
  color: var(--p-accent-2) !important;
}

#taskmenu a.logout { color: rgba(245,82,112,0.45) !important; margin-top: auto !important; }
#taskmenu a.logout:hover { color: var(--p-error) !important; background: rgba(245,82,112,0.08) !important; }
#taskmenu a span.inner { display: none !important; }

#taskmenu a span.badge {
  background: var(--p-accent) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 1px 4px !important;
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  line-height: 1.3 !important;
}

/* ── Sidebar (mailbox/folder list) ───────────── */

#layout-sidebar, #layout .sidebar {
  background: var(--p-surface) !important;
  border-right: 1px solid var(--p-border) !important;
  min-width: 200px !important;
  width: 200px !important;
}

#layout-sidebar .header {
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border) !important;
  color: var(--p-text-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
}

#mailboxlist, .folderlist { padding: 6px 0 !important; }
#mailboxlist li, .folderlist li { list-style: none !important; border: none !important; padding: 0 !important; }

#mailboxlist li a, .folderlist li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  margin: 1px 6px !important;
  border-radius: var(--p-radius) !important;
  color: var(--p-text-2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: background var(--p-t), color var(--p-t) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#mailboxlist li a:hover, .folderlist li a:hover {
  background: var(--p-surface-hover) !important;
  color: var(--p-text) !important;
}

#mailboxlist li.selected > a, #mailboxlist li.active > a,
.folderlist li.selected > a, .folderlist li.active > a {
  background: var(--p-accent-bg) !important;
  color: var(--p-accent-2) !important;
  font-weight: 500 !important;
}

#mailboxlist li a .unreadcount, .folderlist li a .unreadcount {
  margin-left: auto !important;
  background: var(--p-accent) !important;
  color: #fff !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  line-height: 1.5 !important;
  min-width: 18px !important;
  text-align: center !important;
}

/* ── List pane (email list) ───────────────────── */

#layout-list {
  background: var(--p-surface) !important;
  border-right: 1px solid var(--p-border) !important;
}

#layout-list .header {
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border) !important;
  height: 46px !important;
  color: var(--p-text-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0 12px !important;
}

/* ── Toolbar ──────────────────────────────────── */

.toolbar {
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-border) !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
}

.toolbar a, .toolbar .button {
  color: var(--p-text-2) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--p-radius) !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: background var(--p-t), color var(--p-t) !important;
  text-decoration: none !important;
}

.toolbar a:hover, .toolbar .button:hover {
  background: var(--p-surface-hover) !important;
  color: var(--p-text) !important;
}

.toolbar a.disabled, .toolbar .button.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.toolbar .separator { display: none !important; }

/* ── Search bar ───────────────────────────────── */

.searchbar {
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border) !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.searchbar input[type="text"], .searchbar input[type="search"] {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-text) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-family: var(--p-font) !important;
  width: 100% !important;
  transition: border-color var(--p-t), box-shadow var(--p-t) !important;
  height: 30px !important;
}

.searchbar input:focus {
  border-color: var(--p-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--p-accent-bg) !important;
}

.searchbar input::placeholder { color: var(--p-text-3) !important; }

/* ── Message list table ───────────────────────── */

#messagelist {
  background: var(--p-surface) !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#messagelist thead { display: none !important; }

#messagelist tbody tr {
  border-bottom: 1px solid var(--p-border) !important;
  transition: background var(--p-t) !important;
  cursor: pointer !important;
}

#messagelist tbody tr:hover { background: var(--p-surface-hover) !important; }
#messagelist tbody tr.selected { background: var(--p-accent-bg) !important; }
#messagelist tbody tr.unread { background: rgba(110,85,232,0.04) !important; }
#messagelist tbody tr.unread:hover { background: var(--p-surface-hover) !important; }

#messagelist tbody tr td {
  padding: 9px 12px !important;
  border: none !important;
  vertical-align: middle !important;
  color: var(--p-text-2) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
}

#messagelist tbody tr td.flags, #messagelist tbody tr td.status {
  width: 36px !important;
  max-width: 36px !important;
  padding: 0 4px !important;
  color: var(--p-text-3) !important;
}

#messagelist tbody tr td.sender, #messagelist tbody tr td.from {
  width: 160px !important;
  max-width: 160px !important;
  color: var(--p-text) !important;
  font-weight: 500 !important;
}

#messagelist tbody tr.unread td.sender,
#messagelist tbody tr.unread td.from {
  color: #fff !important;
  font-weight: 600 !important;
}

#messagelist tbody tr td.subject {
  color: var(--p-text) !important;
  width: auto !important;
}

#messagelist tbody tr td.subject span.subject { font-weight: 400 !important; color: var(--p-text) !important; }
#messagelist tbody tr.unread td.subject span.subject { font-weight: 600 !important; color: #fff !important; }
#messagelist tbody tr td.subject span.preview { color: var(--p-text-2) !important; font-weight: 400 !important; opacity: 0.7 !important; }

#messagelist tbody tr td.date {
  width: 90px !important;
  max-width: 90px !important;
  color: var(--p-text-3) !important;
  font-size: 11px !important;
  text-align: right !important;
}

/* ── Content pane ─────────────────────────────── */

#layout-content { background: var(--p-bg) !important; flex: 1 !important; }

#layout-content .header {
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-border) !important;
  height: 46px !important;
}

/* ── Message view ─────────────────────────────── */

.message-header {
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-border) !important;
  padding: 18px 24px !important;
}

.message-header .subject, h2.subject {
  color: var(--p-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.message-header table { border-collapse: collapse !important; }

.message-header table td {
  color: var(--p-text-2) !important;
  font-size: 12px !important;
  padding: 2px 0 !important;
  border: none !important;
  background: transparent !important;
}

.message-header table td.title {
  color: var(--p-text-3) !important;
  font-weight: 600 !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
  min-width: 56px !important;
}

#messagecontent, #messageframe { background: var(--p-bg) !important; }

.message-content, #message-content {
  padding: 24px !important;
  color: var(--p-text) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  max-width: 760px !important;
}

/* ── Compose ──────────────────────────────────── */

#compose-header, .composeheader {
  background: var(--p-surface-2) !important;
  border-bottom: 1px solid var(--p-border) !important;
}

#compose-header td, .composeheader td {
  border-bottom: 1px solid var(--p-border) !important;
  padding: 0 !important;
  background: transparent !important;
}

.compose-title, .header-title {
  color: var(--p-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}

#compose-header input, .composeheader input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--p-text) !important;
  font-family: var(--p-font) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  width: 100% !important;
}

#compose-header input:focus, .composeheader input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#composebody, .message-body {
  background: var(--p-bg) !important;
  color: var(--p-text) !important;
  font-family: var(--p-font) !important;
  font-size: 14px !important;
  padding: 20px 24px !important;
  line-height: 1.65 !important;
}

/* ── Inputs ───────────────────────────────────── */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-text) !important;
  border-radius: var(--p-radius) !important;
  font-family: var(--p-font) !important;
  font-size: 13px !important;
  padding: 7px 11px !important;
  transition: border-color var(--p-t), box-shadow var(--p-t) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--p-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--p-accent-bg) !important;
}

input::placeholder, textarea::placeholder { color: var(--p-text-3) !important; }
select option { background: var(--p-surface-3) !important; color: var(--p-text) !important; }
input[type="checkbox"] { accent-color: var(--p-accent) !important; }

/* ── Buttons ──────────────────────────────────── */

.btn, button {
  font-family: var(--p-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--p-radius) !important;
  transition: background var(--p-t), color var(--p-t), box-shadow var(--p-t) !important;
  cursor: pointer !important;
}

.btn-primary, a.button.primary, input[type="submit"] {
  background: var(--p-accent) !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover, a.button.primary:hover, input[type="submit"]:hover {
  background: var(--p-accent-2) !important;
  box-shadow: 0 4px 16px rgba(110,85,232,0.35) !important;
}

.btn-secondary, a.button.secondary {
  background: var(--p-surface-3) !important;
  color: var(--p-text) !important;
  border: 1px solid var(--p-border-strong) !important;
}

.btn-secondary:hover, a.button.secondary:hover { background: var(--p-surface-hover) !important; }

.btn-danger, a.button.danger {
  background: rgba(245,82,112,0.12) !important;
  color: var(--p-error) !important;
  border: none !important;
}

.btn-danger:hover, a.button.danger:hover { background: var(--p-error) !important; color: #fff !important; }

/* ── Login page ───────────────────────────────── */

body.login {
  background: var(--p-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

#login-form .content, .loginbox {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius-lg) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) !important;
  padding: 36px 40px !important;
}

.loginform label, .loginbox label {
  color: var(--p-text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 5px !important;
}

#login-form input[type="submit"], .loginbox input[type="submit"],
.loginform input[type="submit"], .loginbox button[type="submit"] {
  width: 100% !important;
  background: var(--p-accent) !important;
  color: #fff !important;
  border: none !important;
  height: 38px !important;
  border-radius: var(--p-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  cursor: pointer !important;
  transition: background var(--p-t), box-shadow var(--p-t) !important;
}

#login-form input[type="submit"]:hover, .loginbox input[type="submit"]:hover {
  background: var(--p-accent-2) !important;
  box-shadow: 0 4px 20px rgba(110,85,232,0.4) !important;
}

/* ── Dialogs ──────────────────────────────────── */

.ui-dialog {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius-lg) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65) !important;
  color: var(--p-text) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--p-surface-3) !important;
  border-bottom: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius-lg) var(--p-radius-lg) 0 0 !important;
  color: var(--p-text) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.ui-dialog .ui-dialog-content { background: var(--p-surface-2) !important; color: var(--p-text) !important; padding: 20px !important; }
.ui-dialog .ui-dialog-buttonpane { background: var(--p-surface-3) !important; border-top: 1px solid var(--p-border) !important; padding: 12px 16px !important; }
.ui-dialog .ui-dialog-titlebar-close { color: var(--p-text-2) !important; background: transparent !important; border: none !important; border-radius: var(--p-radius) !important; }
.ui-dialog .ui-dialog-titlebar-close:hover { color: var(--p-text) !important; }

/* ── Dropdown menus ───────────────────────────── */

.popupmenu, .dropdownmenu, ul.toolbarmenu {
  background: var(--p-surface-3) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius-lg) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) !important;
  padding: 4px !important;
  min-width: 150px !important;
}

.popupmenu li a, .dropdownmenu li a, ul.toolbarmenu li a {
  color: var(--p-text-2) !important;
  padding: 7px 12px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background var(--p-t), color var(--p-t) !important;
}

.popupmenu li a:hover, .dropdownmenu li a:hover, ul.toolbarmenu li a:hover {
  background: var(--p-accent-bg) !important;
  color: var(--p-accent-2) !important;
}

.popupmenu li.separator, ul.toolbarmenu li.separator {
  border-top: 1px solid var(--p-border) !important;
  margin: 4px 0 !important;
}

/* ── Notifications ────────────────────────────── */

#messagestack div {
  border-radius: var(--p-radius) !important;
  font-family: var(--p-font) !important;
  font-size: 13px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

.ui-widget-content.notice { background: var(--p-surface-3) !important; border-left: 3px solid var(--p-accent) !important; color: var(--p-text) !important; }
.ui-widget-content.error { background: rgba(245,82,112,0.1) !important; border-left: 3px solid var(--p-error) !important; color: var(--p-text) !important; }
.ui-widget-content.confirmation { background: rgba(45,211,138,0.1) !important; border-left: 3px solid var(--p-success) !important; color: var(--p-text) !important; }

/* ── Autocomplete ─────────────────────────────── */

.ui-autocomplete {
  background: var(--p-surface-3) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  padding: 4px !important;
}

.ui-autocomplete .ui-menu-item > div {
  color: var(--p-text-2) !important;
  padding: 7px 12px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.ui-autocomplete .ui-menu-item > div.ui-state-active,
.ui-autocomplete .ui-menu-item > div:hover {
  background: var(--p-accent-bg) !important;
  color: var(--p-accent-2) !important;
  border: none !important;
  margin: 0 !important;
}

/* ── Attachments ──────────────────────────────── */

.attachmentlist li {
  background: var(--p-surface-2) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius) !important;
  color: var(--p-text) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

.attachmentlist li a { color: var(--p-text-2) !important; }
.attachmentlist li a:hover { color: var(--p-accent-2) !important; }

/* ── Footer / status ──────────────────────────── */

.statusbar, #statusbar, .footer {
  background: var(--p-surface) !important;
  border-top: 1px solid var(--p-border) !important;
  color: var(--p-text-3) !important;
  font-size: 11px !important;
}

/* ── Page navigation ──────────────────────────── */

.pagenav { background: var(--p-surface) !important; border-top: 1px solid var(--p-border) !important; color: var(--p-text-2) !important; }
.pagenav a { color: var(--p-text-2) !important; border-radius: var(--p-radius) !important; }
.pagenav a:hover { background: var(--p-surface-hover) !important; color: var(--p-text) !important; }

/* ── Drag-drop overlay ────────────────────────── */

#drag-n-drop-layer {
  background: var(--p-accent-bg-2) !important;
  border: 2px dashed var(--p-accent) !important;
  color: var(--p-accent-2) !important;
  border-radius: var(--p-radius-lg) !important;
}

/* ── Blockquotes ──────────────────────────────── */

blockquote { border-left: 2px solid var(--p-accent) !important; padding-left: 12px !important; color: var(--p-text-2) !important; margin: 8px 0 !important; }
blockquote blockquote { border-color: var(--p-success) !important; }
blockquote blockquote blockquote { border-color: var(--p-warning) !important; }

/* ── Quota bar ────────────────────────────────── */

.quotadisplay { background: var(--p-surface-3) !important; border-radius: 99px !important; overflow: hidden !important; }
.quotadisplay .bar { background: linear-gradient(90deg, var(--p-accent), var(--p-accent-2)) !important; }

/* ── Spinner ──────────────────────────────────── */

.spinner:before { border-color: var(--p-border-strong) !important; }
.spinner:after { border-top-color: var(--p-accent) !important; }

/* ── jQuery UI ────────────────────────────────── */

.ui-widget { font-family: var(--p-font) !important; }
.ui-widget-content { background: var(--p-surface-2) !important; color: var(--p-text) !important; border-color: var(--p-border-strong) !important; }
.ui-widget-header { background: var(--p-surface-3) !important; color: var(--p-text) !important; border-color: var(--p-border) !important; }
.ui-state-default { background: var(--p-surface-3) !important; color: var(--p-text-2) !important; border-color: var(--p-border-strong) !important; }
.ui-state-hover { background: var(--p-surface-hover) !important; color: var(--p-text) !important; }
.ui-state-active { background: var(--p-accent-bg) !important; color: var(--p-accent-2) !important; border-color: transparent !important; }

/* ── Tables ───────────────────────────────────── */

table.records-table { border-collapse: collapse !important; }

table.records-table th {
  background: var(--p-surface-3) !important;
  color: var(--p-text-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--p-border) !important;
  padding: 8px 12px !important;
}

table.records-table td { color: var(--p-text) !important; border-bottom: 1px solid var(--p-border) !important; padding: 10px 12px !important; }
table.records-table tr:hover td { background: var(--p-surface-hover) !important; }
table.records-table tr.selected td { background: var(--p-accent-bg) !important; }

/* ── Misc ─────────────────────────────────────── */

hr { border-color: var(--p-border) !important; }
pre, code { background: var(--p-surface-3) !important; border-radius: 4px !important; color: var(--p-accent-2) !important; font-size: 12px !important; padding: 2px 5px !important; }