/* Buyer-panel UI polish — loaded AFTER buyerPanel.css; everything scoped to .buyer-container so it
   only affects the panel. Adds a sidebar card backdrop (tabs + logo), an avatar halo, and visible
   outlined form inputs (My Details / Change Password). */

/* --- Sidebar card: a backdrop behind the avatar + nav tabs (legacy MasterBuyerPanel look) --- */
.buyer-container .buyer-nav.white {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.07);
}

/* Soft halo behind the user-circle logo. */
.buyer-container .buyer-nav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-color, #e3fdee);
}

/* Nav tabs: pill hover/active backdrop. */
.buyer-container .buyer-nav .nav.nav-sidebar .nav-item a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  color: #434343;
  transition: background 0.15s ease, color 0.15s ease;
}
.buyer-container .buyer-nav .nav.nav-sidebar .nav-item a:hover {
  background: var(--bg-color, #e3fdee);
  color: #434343; /* keep the tab text grey on hover (not the theme colour) */
}
.buyer-container .buyer-nav .nav.nav-sidebar .nav-item.active a {
  background: var(--bg-color, #e3fdee);
  color: #434343; /* keep the selected tab text grey; bold + bg highlight indicate selection */
  font-weight: 700;
}

/* --- Form fields: visible, outlined inputs --- */
.buyer-container .form-control {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-top: 6px;
  border: 1px solid #cfd4dc;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
  color: #434343;
  box-shadow: none;
  height: auto;
}
.buyer-container .form-control:focus {
  outline: none;
  border-color: var(--bgcolor-theme);
  box-shadow: 0 0 0 3px rgba(131, 255, 193, 0.45);
}
.buyer-container .control-label {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 2px;
}
.buyer-container .form-group {
  margin-bottom: 20px;
}

/* --- My Emails rows: left-aligned cards (don't inherit .request-item's space-between) --- */
.buyer-container .buyer-email-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
}
.buyer-container .buyer-email-row input[type='checkbox'] {
  margin-top: 4px;
  flex: 0 0 auto;
}

/* Breathing room below the panel content so the Save button isn't flush against the footer
   (and stays clear once the success alert pushes it down). */
.buyer-container .buyer-content {
  padding-bottom: 32px;
}

/* Mobile / tablet (< 992px): the sidebar column is hidden (hidden-xs/hidden-sm, IS parity), so the
   pill-bar treatment that used to live here is gone with it — the header account menu is the panel's
   mobile navigation, exactly as IndustrySearch does it. */

/* ===== My Emails (redesigned) — toggle-based email preferences ===== */
.me-emails { max-width: 660px; }
.me-emails .me-sub { font-size: 13px; color: #6b7280; margin: 8px 0 18px; }

.me-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.05);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.me-card > h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; color: #434343; }
.me-card .me-lead { font-size: 12.5px; color: #6b7280; margin: 0 0 12px; }

.me-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f3f5; }
.me-row.me-row--first { border-top: 0; }
.me-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-color, #e3fdee); color: #0f6e56;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.me-txt { flex: 1; min-width: 0; }
.me-txt b { font-size: 14px; font-weight: 600; display: block; }
.me-txt small { font-size: 12px; color: #6b7280; }
.me-cad { font-size: 11px; color: #0f6e56; background: var(--bg-color, #e3fdee); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }

/* Toggle switch — EA green when on. */
.me-sw {
  flex: 0 0 auto; width: 42px; height: 24px; border-radius: 20px;
  background: #cfd4dc; position: relative; cursor: pointer;
  transition: background 0.15s; border: none; padding: 0;
}
.me-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.me-sw[aria-checked="true"] { background: #34d17e; }
.me-sw[aria-checked="true"]::after { transform: translateX(18px); }
.me-sw:focus-visible { outline: 2px solid #0f6e56; outline-offset: 2px; }
.me-sw:disabled { opacity: 0.5; cursor: not-allowed; }
.me-sw--danger[aria-checked="true"] { background: #e2696e; }

.me-savebtn {
  background: var(--bgcolor-theme, #83FFC1); color: var(--textcolorcontrast-theme, #0f6e56);
  border: none; border-radius: 22px; font-weight: 600; font-size: 14px; padding: 9px 22px;
  cursor: pointer; margin-top: 14px;
}
.me-savebtn:hover { filter: brightness(0.96); }
.me-savebtn:disabled { opacity: 0.6; cursor: default; }
.me-saved { font-size: 13px; color: #0f6e56; margin-left: 12px; }
.me-saved--err { color: #b91c1c; }

.me-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.me-search { flex: 1; min-width: 160px; border: 1px solid #cfd4dc; border-radius: 20px; padding: 8px 14px; font-size: 13px; outline: none; }
.me-search:focus { border-color: var(--bgcolor-theme, #83FFC1); box-shadow: 0 0 0 3px rgba(131, 255, 193, 0.4); }
.me-link { font-size: 12.5px; color: #0f6e56; font-weight: 600; cursor: pointer; white-space: nowrap; background: none; border: none; padding: 0; }
.me-link:hover { text-decoration: underline; }
.me-link:disabled { color: #9ca3af; cursor: default; text-decoration: none; }

.me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.me-grid.me-grid--disabled { opacity: 0.45; pointer-events: none; }
.me-dir { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 9px; }
.me-dir > span { flex: 1; font-size: 13px; }
.me-tag { font-size: 10px; color: #0f6e56; background: var(--bg-color, #e3fdee); border-radius: 10px; padding: 1px 7px; margin-left: 6px; }
.me-empty { font-size: 13px; color: #6b7280; padding: 8px 0; }

.me-unsub { background: #fff; border: 1px solid #f0dcdc; border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.me-unsub .me-ico { background: #fdecec; color: #a4353a; }
.me-unsub .me-txt b { color: #a4353a; }

@media (max-width: 640px) { .me-grid { grid-template-columns: 1fr; } }

/* ===== Select consistency across browsers =====
   Native selects (State/Country on My Details) render differently: Safari collapses to
   content-width, Chrome/Edge reserve no padding for their native arrow so text bleeds to
   the right edge. Strip the native chrome, draw our own caret via SVG background, and
   reserve right-side padding so text never overlaps the arrow. Applies everywhere in
   .buyer-container so future selects inherit the same behaviour. */
.buyer-container select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23434343' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  min-width: 100%; /* Safari otherwise sizes to intrinsic content width and looks narrow */
}
/* IE10+ hides the native arrow via ::-ms-expand */
.buyer-container select.form-control::-ms-expand { display: none; }

/* ===== My Quote Requests — portal filter tabs =====
   Solid EA green must be reserved for the CURRENTLY SELECTED filter (the tab without
   .i-button--outline--color). Non-selected tabs get the outline treatment: green border
   over a soft grey background. Without these overrides the shared .i-button--round base
   still bleeds theme colour through unselected tabs and makes the active one hard to
   spot. */
.buyer-container .buyer-quote-filters .i-button.i-button--outline--color {
  background: #f6f8fa;
  border: 1.5px solid var(--bgcolor-theme, #83FFC1);
  color: #434343;
  box-shadow: none;
}
.buyer-container .buyer-quote-filters .i-button.i-button--outline--color:hover {
  background: var(--bg-color, #e3fdee);
  color: #434343;
  /* Cancel the generic .i-button:not(:disabled):hover { opacity: 0.8 } from site.min.css.
     The filter tabs' visual feedback is the bg swap (grey → mint) — no opacity fade needed
     on top; the text should stay a crisp #434343, not dim. */
  opacity: 1;
}
.buyer-container .buyer-quote-filters .i-button.i-button--outline--color:focus-visible {
  outline: 2px solid var(--bgcolor-theme, #83FFC1);
  outline-offset: 2px;
}

/* ===== Quote tables (Invited / Quotes / Selected) — column widths + mobile ===== */
/* These widths used to be inline on the <th>s. Inline styles beat media queries, so 90 + 120 + 280
   forced a 490px-wide table onto a 375px screen: the supplier-name column collapsed and names broke
   one word per line ("Farm Plus / Services / Group / Australia / Pty / Ltd"). Same values, now in CSS
   so the mobile block below can actually override them. */
.tbl-supplier-quote .col-supplier { width: 90px; }
.tbl-supplier-quote .col-price { width: 120px; padding-left: 20px; }
.tbl-supplier-quote .col-action { width: 280px; }

@media (max-width: 767px) {
  /* Let the table size to the screen and give the name column whatever is left. IS drops the whole
     Quotes column here (buyerPanel.scss:1698) — EA already carries .col-quotes, so that rule applies. */
  .tbl-supplier-quote { table-layout: auto; width: 100%; }
  /* Bound the supplier column instead of letting it take everything left over — unbounded it grew to
     ~224px and pushed Price and Action into the last third of the row. IS keeps this column narrow and
     lets a long trading name stack under the logo rather than widening the column to fit it. */
  .tbl-supplier-quote .col-supplier { width: 30%; min-width: 0; }
  .tbl-supplier-quote .col-price { width: auto; padding-left: 8px; white-space: nowrap; }
  .tbl-supplier-quote .col-action { width: 1%; white-space: nowrap; text-align: right; }

  /* Supplier name: wrap on spaces like normal prose instead of one word per line, centred under the
     logo, and a touch smaller so a long trading name costs two lines rather than three. */
  .tbl-supplier-quote .col-supplier,
  .tbl-supplier-quote td.vertical-align-top { word-break: normal; overflow-wrap: anywhere; }
  /* The logo + name stay centred in their column; the fix is that the column header was left-aligned
     while its content was centred, so the block read as drifting off to one side. Centre the header too
     and the whole supplier block sits directly beneath it. */
  .tbl-supplier-quote th.col-supplier { text-align: center; }
  .tbl-supplier-quote td.vertical-align-top { padding-right: 8px; }
  .tbl-supplier-quote td.vertical-align-top a { display: block; max-width: 100%; }
  .tbl-supplier-quote td.vertical-align-top div { font-size: 14px; line-height: 1.45; }
  .tbl-supplier-quote .supplier-logo-2 { margin-bottom: 4px; }

  /* IS collapses the row actions to icon-only pills (buyerPanel.scss:1698-1781). Its rules are scoped
     to .i-button-select-supplier-quote / .i-button-decline-supplier-quote, which EA does not use — EA
     renders .ea-quote-btn — so the labels stayed and the 280px column stayed wide. Same treatment,
     EA's selectors. The modal keeps its full labels (variant="modal" sits outside this table). */
  /* Geometry copied verbatim from Portals buyerPanel.scss:1698-1775 (@media max-width:767px), so the
     pill shape matches IS pixel for pixel. IS is 47x38 with border-radius:50px — a rounded PILL, wider
     than it is tall — not a circle, which is what these were. Icons 18px, container gap 3px. Only the
     selectors differ: IS scopes these to .i-button-select-supplier-quote /
     .i-button-decline-supplier-quote, EA renders .ea-quote-btn. Colours stay EA's. */
  /* .col-action scoping needed: buyerPanel.css already has
     `.tbl-supplier-quote .col-action .action-buttons-container{gap:5px}` at 0,3,0, which outranked a
     plain 0,2,0 selector here and kept the gap at 5px instead of IS's 3px. */
  .tbl-supplier-quote .col-action .action-buttons-container { display: flex; align-items: center;
    justify-content: flex-end; gap: 3px; }
  .tbl-supplier-quote .ea-quote-btn { display: inline-flex; align-items: center; justify-content: center;
    min-width: 47px; max-width: 47px; width: 47px; height: 38px; padding: 0; border-radius: 50px; }
  .tbl-supplier-quote .ea-quote-btn .button-text { display: none; }
  .tbl-supplier-quote .ea-quote-btn i { margin: 0; font-size: 18px; line-height: 1; }
  /* IS: .tbl-supplier-quote .btn-more-options{padding:5px} + i{font-size:18px} (buyerPanel.scss:1685-95). */
  .tbl-supplier-quote .btn-more-options { padding: 5px; }
  .tbl-supplier-quote .btn-more-options i { font-size: 18px; }
  /* IS centres the Action header (buyerPanel.scss:1774). */
  .tbl-supplier-quote th.col-action { text-align: center; }
}

@media (max-width: 767px) {
  /* Keep the whole action cluster on ONE line. The two pills and the kebab live in separate wrappers
     (QuoteRowActions' inline-flex > .action-buttons-container + .btn-more-options), so a narrow action
     column could break the Decline pill onto its own row under the Select pill. Pin every level to
     nowrap and let the column take exactly the width the cluster needs. */
  .tbl-supplier-quote .col-action .decline-holder,
  .tbl-supplier-quote .col-action .decline-holder > div,
  .tbl-supplier-quote .action-buttons-container { flex-wrap: nowrap; white-space: nowrap; }
  .tbl-supplier-quote .col-action .decline-holder > div { display: inline-flex; align-items: center; }
  .tbl-supplier-quote .btn-more-options { flex: 0 0 auto; }
}

/* Step tabs (Request / Invited / Quotes / Selected). Each <li> is a fixed 25%, and each <a> reserves
   23px of margin plus a 25px-wide chevron pseudo-element for the arrow. At 375px that leaves ~57px of
   text room per tab, so the active tab's label was squeezed to a sliver inside its chevron. Shrink the
   arrow and its reserved margin at phone widths — the labels are already the short .lbl-mobile ones. */
@media screen and (max-width: 576px) {
  .be-breadcrumb li a { padding: 0 3px; margin-right: 13px; height: 40px; line-height: 40px; }
  .be-breadcrumb li a:before,
  .be-breadcrumb li a:after { border-width: 20px 4px 20px 11px; }
  .be-breadcrumb li a:before { left: -15px; }
  .be-breadcrumb li:first-child a { padding-left: 8px; }
  .be-breadcrumb li:last-child a { padding-right: 8px; }
}

@media (max-width: 767px) {
  /* Force the Action cell to a single horizontal row, at every level of its nesting.
     The cluster is three nested wrappers (td.col-action > .decline-holder > inline-flex >
     .action-buttons-container + .btn-more-options) and it was still stacking the Select and Decline
     pills into a column with the kebab centred beside them. The earlier nowrap rules did not settle it,
     and the compiled legacy buyerPanel.css is large enough that I could not prove which rule wins — so
     this asserts the RESULT rather than guessing the cause. !important is deliberate for that reason.
     min-width guarantees the column can actually hold 2x40px pills + the kebab, so the table can never
     squeeze the cluster narrow enough to break in the first place. */
  /* 47 + 3 + 47 pills, then the outer 4px gap and the ~28px kebab. IS sets .col-action{width:14%} and
     lets the table expand past it; being explicit is the same outcome without relying on that. */
  .tbl-supplier-quote td.col-action { min-width: 130px; }
  .tbl-supplier-quote td.col-action .decline-holder,
  .tbl-supplier-quote td.col-action .decline-holder > div,
  .tbl-supplier-quote td.col-action .action-buttons-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
  }
  .tbl-supplier-quote td.col-action .ea-quote-btn,
  .tbl-supplier-quote td.col-action .btn-more-options { flex: 0 0 auto; float: none; }
}

/* Price doubles as the quote-open affordance (QuoteRowShell). Strip the <button> chrome so it reads as
   the price it replaced; it only needs to LOOK like a link, the semantics come from the element. */
.tbl-supplier-quote .quote-price-open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.tbl-supplier-quote .quote-price-open:hover .text__price,
.tbl-supplier-quote .quote-price-open:focus-visible .text__price { text-decoration: underline; }
.tbl-supplier-quote .quote-price-open:focus-visible { outline: 2px solid var(--bgcolor-theme); outline-offset: 2px; }

/* ===== Quote-detail modal (QuoteDetailModal) =====
   These blocks used to be inline styles. Inline beats media queries, so on a phone the header title
   competed with the action pills for a 375px row and collapsed to one word per line, and both
   flexWrap:'wrap' rows broke — the Sent box dropped under the Quote heading, and SUPPLIER dropped under
   TO. The desktop values below are the inline ones, unchanged; only the mobile block is new. */
.qd-hd { max-width: 970px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.qd-hd__title { margin: 0; font-size: 16px; font-weight: 700; flex: 1; min-width: 0; }
.qd-hd__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.qd-body { padding: 0 20px 20px; background: #ddd; }
.qd-body__inner { max-width: 970px; margin: 0 auto; padding: 0 15px; }
.qd-card { background: #fff; padding: 20px; }

.qd-titlerow { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 10px; }
.qd-titlerow__heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.qd-quote-word { font-size: 36px; line-height: 100%; border-bottom: var(--bgcolor-theme) 4px solid;
  display: inline-block; }
.qd-quote-num { font-weight: normal; font-size: 20px; margin-left: 15px; }
.qd-sent { background: #f3f3f3; padding: 6px 14px; border-radius: 4px; font-size: 14px; }

.qd-parties { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.qd-party--supplier { text-align: right; }
.qd-supplier-logo { max-width: 160px; max-height: 60px; }

@media (max-width: 767px) {
  /* Title gets its own full-width row and the pills sit beneath it, which is what stops the heading
     wrapping one word at a time. padding-right clears the absolutely-positioned close ×. */
  .qd-hd { flex-wrap: wrap; padding-right: 46px; }
  .qd-hd__title { flex: 1 1 100%; margin-bottom: 10px; }
  .qd-hd__actions { flex: 1 1 100%; gap: 8px; }

  /* Reclaim horizontal room: 20 + 15 + 20 of padding each side left the card very narrow at 375px. */
  .qd-body { padding: 0 8px 12px; }
  .qd-body__inner { padding: 0; }
  .qd-card { padding: 14px; }

  /* Sent stays BESIDE the Quote heading, and TO stays beside SUPPLIER — both were wrapping. */
  .qd-titlerow { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .qd-titlerow__heading { flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; }
  .qd-quote-word { font-size: 28px; }
  .qd-quote-num { font-size: 16px; margin-left: 0; }
  .qd-sent { padding: 6px 10px; font-size: 12.5px; flex: 0 1 auto; }

  .qd-parties { flex-wrap: nowrap; gap: 12px; }
  .qd-parties .qd-party { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
  .qd-supplier-logo { max-width: 110px; max-height: 44px; }
}

/* Quote-detail modal close ×. Hover/focus affordance only — the placement is inline in
   QuoteDetailModal, deliberately, because as a class it fell back to normal flow (below the pills,
   hard left) any time the stylesheet was stale or outranked. */
.qd-close:hover { background: rgba(131, 255, 193, 0.25); }
.qd-close:focus-visible { outline: 2px solid var(--bgcolor-theme); outline-offset: 2px; }

/* Select / Decline pills: hover is a light mint tint (matching .ea-outline-btn), and the SELECTED pill
   carries the solid mint fill. buyerPanel.css dimmed hover with opacity:0.85 instead, which just made
   the pill look disabled. Same rule desktop and mobile — only the geometry differs between them. */
.ea-quote-btn:hover:not([disabled]) {
  opacity: 1;
  background: rgba(131, 255, 193, 0.25);
}
.ea-quote-btn[data-active='true'],
.ea-quote-btn[data-active='true']:hover {
  background: var(--bgcolor-theme);
  color: var(--textcolorcontrast-theme, #434343);
  opacity: 1;
}

/* Site header steps aside while the quote dialog is open. .pmm-hd is z-index 9007 and .ph-hd sits above
   the page too, while the dialog is 1050 — so the header painted over the top of the quote and took the
   close x with it. */
body.qd-modal-open .pmm-hd,
body.qd-modal-open .ph-hd { display: none !important; }

/* Kebab dropdown items: hover/focus highlight. These are inline-styled buttons, so there was no hover
   state at all — Portals' Bootstrap dropdown tints its rows on hover. */
.quote-menu-item { background: transparent; border-radius: 4px; transition: background 0.12s ease; }
.quote-menu-item:hover,
.quote-menu-item:focus-visible { background: rgba(131, 255, 193, 0.25); outline: none; }

/* ===== Sign-in overlay (SignInPrompt) =====
   The partial visitor's "you need an account for that" gate. Legacy loads its sign-in partial into a
   Bootstrap modal over the page (devSite.js:164) — same idea, same not-navigating-away behaviour. */
.sip-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;              /* above .pmm-hd (9007) and the quote dialog (1050) */
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.sip-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.25);
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.sip-close {
  position: absolute;
  right: 8px;
  top: 6px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  color: #434343;
  cursor: pointer;
}
.sip-close:hover { background: rgba(131, 255, 193, 0.25); }
/* login.css sizes the standalone page (100vh, page background). Inside the dialog it just needs to be
   a plain block, or the card fights the overlay for height. */
.sip-body { min-height: 0 !important; height: auto !important; background: transparent !important; padding: 8px 0 !important; }
.sip-body .login-box { box-shadow: none !important; margin: 0 auto !important; }