/*
 * Shipfixing member area: one look on top of the Limitless theme.
 * Brand: #273246 (navy), white surfaces, Instrument Sans. Loaded last (ShipfixingUiAsset).
 */
:root {
    --sf-navy: #273246;
    --sf-navy-hover: #34425a;
    --sf-text: #273246;
    --sf-muted: #5b6875;
    --sf-line: #d6dde4;
    --sf-line-soft: #e8ecf0;
    --sf-bg: #ffffff;   /* white page, like Comdity (user, 28 Oct); cards keep their thin line */
    --sf-surface: #ffffff;
    --sf-error: #b42318;
    --sf-ok: #1f8a5b;
    --sf-warn: #b26a00;
    --sf-radius: 10px;
}

/* ---- base ---- */
body {
    font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.panel-title, .page-title h4, .page-title h1.h4, .navbar, .btn, .form-control, .select2-container, .label, .table {
    font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--sf-navy); }
a:hover, a:focus { color: var(--sf-navy-hover); }
.text-muted { color: var(--sf-muted) !important; }

/* ---- top bar and second bar ---- */
.navbar-inverse, .navbar-inverse .navbar-collapse { background-color: var(--sf-navy); border-color: var(--sf-navy); }
.navbar-default { border-bottom-color: var(--sf-line-soft); }
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    box-shadow: inset 0 -2px 0 var(--sf-navy);
}

/* ---- page header ---- */
.page-header-content { padding-top: 6px; }
.page-title { padding: 26px 0 18px; }
.page-title h4, .page-title h1.h4 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.page-title h4 > i, .page-title h1.h4 > i { display: none; }
.page-title .breadcrumb, .breadcrumb { font-size: 12.5px; }
.breadcrumb > li > a { color: var(--sf-muted); }

/* ---- panels / cards ---- */
.panel {
    border: 1px solid var(--sf-line-soft);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(39, 50, 70, 0.04);
}
.panel > .panel-heading { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.panel-flat > .panel-heading { padding: 20px 24px 12px; }
.panel-title, h1.panel-title { font-size: 17px; font-weight: 600; }   /* h1.panel-title: the legal page title is the H1 (SEO), it must look like the old h4 */
.panel-body { padding: 20px 24px; }

/* ---- forms ---- */
.control-label, label, .form-group > label, .display-block {
    font-weight: 600;
    font-size: 13px;
    color: #3a4656;
}
.form-group { margin-bottom: 18px; }
.form-control {
    height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--sf-text);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea.form-control { height: auto; min-height: 96px; line-height: 1.5; }
.form-control::placeholder { color: #9aa5b1; }
.form-control:focus {
    border-color: var(--sf-navy);
    box-shadow: 0 0 0 3px rgba(39, 50, 70, 0.12);
    outline: 0;
}
.form-control[disabled], .form-control[readonly] { background: #f2f4f7; color: var(--sf-muted); }

/* select2 boxes look like the inputs */
.select2-container--default .select2-selection--single,
.select2-selection--single,
.select2-selection--multiple {
    min-height: 44px;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    background: var(--sf-surface);
}
/* text vertically centred in every select box */
.select2-selection--single { display: flex !important; align-items: center; }
.select2-selection--single .select2-selection__rendered {
    flex: 1; line-height: 1.3 !important; padding: 0 34px 0 14px !important; font-size: 15px; color: var(--sf-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.select2-selection--single .select2-selection__placeholder { color: #9aa5b1; line-height: 1.3; }
.select2-selection--single:after { top: 50% !important; margin-top: -8px !important; right: 12px !important; }
.select2-selection--single .select2-selection__arrow { height: 42px !important; }
.select2-container--focus .select2-selection, .select2-container--open .select2-selection {
    border-color: var(--sf-navy) !important;
    box-shadow: 0 0 0 3px rgba(39, 50, 70, 0.12);
}
.select2-results__option--highlighted, .select2-results__option[aria-selected=true] {
    background-color: #eef2f6 !important;
    color: var(--sf-text) !important;
}
.select2-dropdown { border-color: var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; }

/* number spinners (+ / -) stay one row, errors go under the whole group */
.bootstrap-touchspin, .input-group { display: flex; align-items: stretch; flex-wrap: nowrap; width: 100%; }
.bootstrap-touchspin .form-control, .input-group .form-control { flex: 1 1 auto; min-width: 90px; border-radius: var(--sf-radius) 0 0 var(--sf-radius); }
.bootstrap-touchspin .input-group-btn, .input-group .input-group-btn { display: flex; width: auto; }
.bootstrap-touchspin .input-group-btn .btn, .input-group .input-group-btn .btn {
    height: 44px; min-width: 40px; border: 1px solid var(--sf-line); border-left: 0; border-radius: 0; background: #f7f9fb; color: var(--sf-text);
}
.bootstrap-touchspin .input-group-btn:last-child .btn, .input-group .input-group-btn:last-child .btn { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; }
.input-group > .help-block, .bootstrap-touchspin > .help-block, .input-group > label.validation-error-label, .bootstrap-touchspin > label.validation-error-label {
    order: 99; flex-basis: 100%;
}

/* radios and checkboxes */
.radio-inline, .checkbox-inline, .radio label, .checkbox label { font-weight: 500; font-size: 14px; color: var(--sf-text); }

/* validation messages: small red text under the field, no icon misalignment */
.has-error .form-control, .has-error .select2-selection { border-color: var(--sf-error) !important; }
.has-error .help-block, .help-block-error, label.validation-error-label, .validation-error-label {
    color: var(--sf-error) !important;
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 6px;
    padding-left: 0 !important;
}
.validation-error-label:before, label.validation-error-label:before { display: none !important; }
.has-success .form-control { border-color: var(--sf-line); }
.help-block { color: var(--sf-muted); font-size: 12.5px; }
/* the note under a field made with ->hint() (class hint-block): the same small muted size as help-block (user, 15 Oct: the port notes were too big) */
.hint-block, .form-group .hint-block { color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }

/* ---- buttons ---- */
.btn { border-radius: var(--sf-radius); font-weight: 600; font-size: 14px; padding: 10px 18px; text-transform: none; letter-spacing: 0; }
.btn-xs, .btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-primary, .btn-success, .bg-primary.btn, .btn.bg-slate, .btn.bg-teal {
    background-color: var(--sf-navy) !important;
    border-color: var(--sf-navy) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus { background-color: var(--sf-navy-hover) !important; border-color: var(--sf-navy-hover) !important; }
.btn-default { background: #fff; border-color: var(--sf-line); color: var(--sf-text); }
.btn-default:hover { border-color: var(--sf-navy); }
.btn-link { color: var(--sf-navy); font-weight: 600; }

/* ---- form wizard (jquery.steps) ---- */
.wizard > .steps .current .number, .wizard > .steps .done .number { border-color: var(--sf-navy) !important; background-color: var(--sf-navy) !important; color: #fff !important; }
.wizard > .steps .current .number:after, .wizard > .steps .done:before, .wizard > .steps .current:before { background-color: var(--sf-navy) !important; border-color: var(--sf-navy) !important; }
.wizard > .steps .current a, .wizard > .steps .done a { color: var(--sf-text) !important; font-weight: 600; }
.wizard > .steps .error .number { border-color: var(--sf-error) !important; color: var(--sf-error) !important; }
.wizard > .actions > ul > li > a { border-radius: var(--sf-radius); padding: 10px 20px; font-weight: 600; }
.wizard > .actions > ul > li > a[href="#next"], .wizard > .actions > ul > li > a[href="#finish"] { background: var(--sf-navy); color: #fff; }

/* ---- tables ---- */
.table > thead > tr > th {
    font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
    color: var(--sf-muted); background: #f7f9fb; border-bottom: 1px solid var(--sf-line-soft);
}
.table > tbody > tr > td { border-top-color: var(--sf-line-soft); vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #f7f9fb; }

/* ---- status labels ---- */
.label { border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: none; }
.label-success, .bg-success.label { background-color: #e3f4ec !important; color: var(--sf-ok) !important; border-color: transparent !important; }
.label-warning { background-color: #fdf1dc !important; color: var(--sf-warn) !important; border-color: transparent !important; }
.label-primary { background-color: #e6eaf1 !important; color: var(--sf-navy) !important; border-color: transparent !important; }
.label-info { background-color: #e4f0fb !important; color: #1f5f99 !important; border-color: transparent !important; }
.label-default { background-color: #eef1f4 !important; color: var(--sf-muted) !important; border-color: transparent !important; }
.label-danger { background-color: #fde8e6 !important; color: var(--sf-error) !important; border-color: transparent !important; }

/* ---- alerts and notices ---- */
.alert { border-radius: var(--sf-radius); }
.alert-warning { background: #fdf6e7; color: #6b4700; border-color: #f3dfb4; }

/* ---- footer ---- */
.navbar-fixed-bottom.footer, .footer { background: #fff; border-top: 1px solid var(--sf-line-soft); }
.footer .navbar-text { font-size: 12.5px; color: var(--sf-muted, #6b7280); }
/* phones: the copyright is always visible (not behind the arrow), at the end of the page */
@media (max-width: 767px) {
    .navbar-fixed-bottom.footer { position: static; }
    .footer .visible-xs-block { display: none !important; }
    .footer #footer.navbar-collapse.collapse { display: block !important; height: auto !important; border: 0; }
    .footer .navbar-text { margin: 12px 16px 4px; text-align: center; float: none; }
    .footer .navbar-right .nav { display: flex; justify-content: center; margin: 0 0 8px; }
    .footer .navbar-right .nav > li > a { padding: 6px 10px; }
}

/* ---- money row: currency | amount | unit as one field ---- */
.sf-money { display: flex; align-items: flex-start; }
.sf-money .form-group { margin-bottom: 0; }
.sf-money .sf-money-currency { flex: 0 0 92px; }
.sf-money .sf-money-amount { flex: 1 1 auto; min-width: 110px; }
.sf-money .sf-money-unit { flex: 0 0 170px; }
.sf-money .form-control { border-radius: 0; margin-left: -1px; }
.sf-money .sf-money-currency .form-control { border-radius: var(--sf-radius) 0 0 var(--sf-radius); margin-left: 0; background: #f7f9fb; font-weight: 600; }
.sf-money .sf-money-unit .form-control { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; background: #f7f9fb; }
.sf-money .form-control:focus { position: relative; z-index: 2; }
.sf-money select.form-control { appearance: none; -webkit-appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23273246' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
@media (max-width: 767px) {
    .sf-money { flex-wrap: wrap; }
    .sf-money .sf-money-unit { flex-basis: 100%; margin-top: 8px; }
    .sf-money .sf-money-unit .form-control { border-radius: var(--sf-radius); margin-left: 0; }
    .sf-money .sf-money-amount .form-control { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; }
}

/* capacity row: number | unit, same look as the money row */
.sf-capacity .sf-money-amount.sf-first .form-control { border-radius: var(--sf-radius) 0 0 var(--sf-radius); margin-left: 0; }
.sf-capacity .sf-money-unit { flex: 0 0 120px; }
/* on a phone the capacity row stays one joined field: number and unit side by side, on one line (the money row stacks, this one does not) */
@media (max-width: 767px) {
    .sf-capacity { flex-wrap: nowrap; }
    .sf-capacity .sf-money-unit { flex: 0 0 96px; margin-top: 0; }
    .sf-capacity .sf-money-unit .form-control { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; margin-left: -1px; }
    .sf-capacity .sf-money-amount .form-control { border-radius: var(--sf-radius) 0 0 var(--sf-radius); }
}

/* multi-select (ports): full-width search text, tags inside the box; the box grows with a second and third port (user, 23 Oct: tags hung out of it) */
.select2-selection--multiple { display: flex !important; align-items: center; height: auto !important; min-height: 44px; padding: 4px 8px !important; white-space: normal !important; line-height: 1.3; }
.select2-selection--multiple .select2-selection__rendered { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; margin: 0 !important; padding: 0 !important; }
.select2-selection--multiple .select2-search--inline { flex: 1 1 120px; float: none !important; }
.select2-selection--multiple .select2-search__field { width: 100% !important; min-width: 120px; margin: 0 !important; padding: 6px 6px !important; font-size: 15px; }
.select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important; align-items: center; float: none !important; height: auto !important; line-height: 1.3 !important;
    margin: 0 !important; border-radius: 99px !important; background: #eef2f6 !important; color: var(--sf-text) !important;
    border: 0 !important; padding: 4px 10px !important; font-size: 13px; white-space: normal;
}
.select2-selection--multiple .select2-selection__choice__remove { position: static !important; float: none !important; margin: 0 0 0 6px !important; line-height: 1; }

/* input with an icon box in front (date range etc.) */
.input-group .input-group-addon {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    background: #f7f9fb; border: 1px solid var(--sf-line); border-right: 0; border-radius: var(--sf-radius) 0 0 var(--sf-radius);
}
.input-group .input-group-addon + .form-control { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; }

/* ---- posting summary: label / value grid ---- */
.sf-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--sf-line-soft); border-radius: 12px; overflow: hidden; }
.sf-summary > div { padding: 12px 16px; border-bottom: 1px solid var(--sf-line-soft); }
.sf-summary > div:nth-child(odd) { border-right: 1px solid var(--sf-line-soft); }
.sf-summary dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-muted); font-weight: 600; margin-bottom: 3px; }
.sf-summary dd { margin: 0; font-size: 15px; font-weight: 500; }
.sf-summary-heading { margin: 22px 0 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-muted); font-weight: 600; }
.sf-summary-text { margin: 0; font-size: 15px; line-height: 1.6; white-space: normal; }
@media (max-width: 767px) { .sf-summary { grid-template-columns: 1fr; } .sf-summary > div:nth-child(odd) { border-right: 0; } }

/* panel header actions (Offers button + Action menu) on one line */
.panel-heading .heading-elements > .nav { display: flex; align-items: center; gap: 4px; }
.panel-heading .heading-elements > .nav > li { float: none; }

/* inputs with an icon inside (login, reset password): keep the text clear of the icon */
.has-feedback-left .form-control { padding-left: 42px !important; }
.has-feedback-left .form-control-feedback { left: 0; width: 42px; height: 44px; line-height: 44px; color: #9aa5b1; }
.has-feedback .form-control-feedback { height: 44px; line-height: 44px; }
.login-form .panel-body, .login-form.panel { border-radius: 16px; }

/* ---- bell ---- */
.dropdown-content-heading .icons-list { float: right; }
.dropdown-content-heading .icons-list a { color: var(--sf-navy); font-weight: 600; text-transform: none; letter-spacing: 0; }
.media-list .media.sf-n-unread { background: #f1f5fb; border-radius: 8px; margin-left: -8px; margin-right: -8px; padding: 6px 8px; }
.media-list .media.sf-n-unread .media-body a { font-weight: 600; }
.sf-n-label { display: inline-block; min-width: 74px; text-align: center; border: 1px solid currentColor !important; background: transparent !important; }
.sf-n-offer { color: var(--sf-navy) !important; }
.sf-n-accept { color: var(--sf-ok) !important; }
.sf-n-decline { color: var(--sf-error) !important; }
.sf-n-matching { color: #007C89 !important; }
.sf-n-posting { color: #5a4fcf !important; }
.sf-n-company, .sf-n-account, .sf-n-other { color: var(--sf-muted) !important; }

/* fixed unit next to a number (capacity) */
.sf-money .sf-money-unit .sf-unit-static { display: flex; align-items: center; color: var(--sf-muted); font-weight: 600; cursor: default; }

/* sign-up from a "Make an offer" email */
.sf-offer-for { border: 1px solid var(--sf-line, #e3e8ed); border-radius: var(--sf-radius); background: #f7f9fb; padding: 12px 14px; margin-bottom: 16px; }
.sf-offer-for ol { margin: 8px 0 0; padding-left: 18px; }

/* annual fee note (add ship) */
.sf-fee-note { border: 1px dashed var(--sf-line); border-radius: var(--sf-radius); background: #f7f9fb; padding: 10px 14px; margin: 6px 0 12px; font-size: 13.5px; }

/* one look for profile pictures and logos: round, 72 px, filled from the 400 x 400 square */
.sf-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #dde3ea; display: block; }

/* phone: country and number in one row, same height */
.sf-phone { display: flex; gap: 8px; align-items: flex-start; }
.sf-phone .form-group { margin: 0; }
.sf-phone-country { flex: 0 0 44%; min-width: 0; }
.sf-phone-number { flex: 1 1 auto; min-width: 0; }
.sf-phone .select2-container { width: 100% !important; }
.sf-phone .form-control, .sf-phone .select2-selection { height: 38px; }
@media (max-width: 480px) { .sf-phone { flex-direction: column; } .sf-phone-country, .sf-phone-number { flex: 1 1 auto; width: 100%; } }

/* ---- Notification bars (jGrowl): one size and one colour per type -------------------------------------------
   success = green, info = blue, warning = amber, danger = red. Same width, text size and padding everywhere. */
.jGrowl.top-center { width: 440px; max-width: 92vw; margin-left: -220px; left: 50%; top: 64px; }
@media (max-width: 480px) { .jGrowl.top-center { margin-left: 0; left: 4vw; width: 92vw; } }
.jGrowl .jGrowl-notification {
    width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 13px 38px 13px 18px; min-height: 0;
    font-size: 14px; line-height: 1.45; font-weight: 400; border-radius: 4px; border: 1px solid transparent; border-left-width: 5px;
    box-shadow: 0 4px 14px rgba(39, 50, 70, .18); opacity: 1;
}
.jGrowl .jGrowl-notification.alert-styled-left:after,
.jGrowl .jGrowl-notification.alert-styled-left:before { display: none; }
.jGrowl .jGrowl-notification .jGrowl-close { right: 10px; top: 8px; font-size: 18px; opacity: .55; }
.jGrowl .jGrowl-notification .jGrowl-close:hover { opacity: 1; }
.jGrowl .jGrowl-notification.alert-success { background: #e9f6ee; border-color: #2e9e5b; color: #1b5a37; }
.jGrowl .jGrowl-notification.alert-info    { background: #e9f1fb; border-color: #2f7fd1; color: #1d4a7c; }
.jGrowl .jGrowl-notification.alert-warning { background: #fff5e1; border-color: #e8a317; color: #704900; }
.jGrowl .jGrowl-notification.alert-danger  { background: #fdecec; border-color: #d9433f; color: #8a1f1c; }

/* reference numbers (SF-P-100045) never break across lines */
span.text-size-mini.text-muted { white-space: nowrap; }

/* posting page heading: a long title wraps before the buttons on the right; status and reference sit on their own line */
@media (min-width: 769px) { .sf-posting-head .panel-title, .sf-posting-head .sf-posting-meta, .sf-posting-head > .text-size-small { padding-right: 200px; } }
.sf-posting-meta { margin: 4px 0 2px; }

/* offers listed inside a posting row (My postings, Admin > Postings) */
.sf-offer-line { padding: 6px 0; border-bottom: 1px dashed #e5e7eb; }
.sf-offer-line:last-of-type { border-bottom: 0; }
.sf-offer-line .label { margin-left: 4px; }
.sf-offer-price { margin-left: 6px; font-weight: 600; color: #273246; white-space: nowrap; }
.sf-offer-actions { margin-top: 4px; }
.sf-offer-actions .btn { margin-right: 4px; }

/* small live countdown of an offer's validity (the script in js/scripts.js counts it down) */
.sf-mini-timer { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #fff4e5; color: #9a5b00; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* plan badge next to a company name (Plan::badge) */
.sf-plan-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2px; background: #f1f3f6; color: #273246; vertical-align: middle; white-space: nowrap; }
.sf-plan-badge.sf-plan-silver { background: #f3f4f6; color: #4a515b; box-shadow: inset 0 0 0 1px #dfe2e6; }
.sf-plan-badge.sf-plan-gold { background: #fbf3dc; color: #7a5a00; box-shadow: inset 0 0 0 1px #f0dfa8; }
.sf-plan-badge.sf-plan-platinum { background: #eaf1f7; color: #1f4e79; box-shadow: inset 0 0 0 1px #d2e0ec; }
.sf-plan-badge { display: inline-flex; align-items: center; gap: 4px; line-height: 17px; }
.sf-plan-mark { width: 14px; height: 14px; flex: none; }
h4 .sf-plan-badge { font-size: 12px; padding: 2px 9px 2px 6px; margin-left: 8px; }
h4 .sf-plan-mark { width: 16px; height: 16px; }
.sf-plan-only .sf-plan-badge { margin-left: 0; }

/* top bar avatar: always a 38 px circle, older non-square uploads are cropped, not stretched */
.navbar-nav > .dropdown-user > a > img { width: 38px; height: 38px; max-height: none; object-fit: cover; }
/* top bar user: picture and name always on one line, centred with Upgrade and the bell; a little space from the right edge */
.navbar-nav > .dropdown-user > a { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.navbar-nav > .dropdown-user > a > img { margin-top: 0; }
.navbar-nav > .dropdown-user > a > img + span { padding-left: 0; }
.navbar-lg .navbar-right { margin-right: 16px; }
@media (max-width: 767px) { .navbar-lg .navbar-right { margin-right: 0; } }

/* second menu: the active tab is underlined in navy, not the theme purple */
.navbar-default .navbar-nav > .active > a:after { background-color: #273246; }

/* Account settings: profile card (Shipfixing) */
.sf-account-card { overflow: hidden; }
.sf-account-card .panel-body { padding: 28px 20px 18px; }
.sf-account-avatar { position: relative; width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e3e6ea; }
.sf-account-avatar img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; }
.sf-account-avatar-edit { position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; background: #273246; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; font-size: 13px; }
.sf-account-avatar:hover img, .sf-account-avatar:focus img { filter: brightness(.92); }
.sf-account-avatar:focus { outline: 2px solid #273246; outline-offset: 4px; }
.sf-account-name { font-size: 17px; font-weight: 600; color: #273246; }
.sf-account-sub { font-size: 13px; color: #6b7280; margin-top: 2px; word-break: break-all; }
.sf-account-hint { font-size: 12px; color: #9aa3ad; margin-top: 10px; }
.sf-account-nav { border-top: 1px solid #eef0f3; padding: 6px 0; }
.sf-account-nav > li > a { color: #374151; }
.sf-account-nav > li.active > a, .sf-account-nav > li.active > a:hover { background: #f3f5f8; color: #273246; font-weight: 600; box-shadow: inset 3px 0 0 #273246; }
/* company logo in the card: rounded square, the whole logo visible */
.sf-account-logo, .sf-account-logo img { border-radius: 18px; }
.sf-account-logo img { object-fit: contain; background: #fff; }

/* form actions on the right (user, 14 Oct): the first button (the main action) is the rightmost, Cancel / secondary to its left */
.sf-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; text-align: right; }
.sf-actions > ul.list-inline { display: flex; flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sf-actions > ul.list-inline > li { padding: 0; }

/* one button size and look everywhere (user, 14 Oct): large buttons and the old inverse/teal variants look like the others */
.btn-lg { padding: 10px 18px; font-size: 14px; line-height: 1.43; border-radius: var(--sf-radius); }
.btn-inverse, .btn.bg-inverse { background-color: var(--sf-navy) !important; border-color: var(--sf-navy) !important; color: #fff !important; }
.btn-inverse:hover, .btn-inverse:focus, .btn.bg-inverse:hover, .btn.bg-inverse:focus { background-color: var(--sf-navy-hover) !important; border-color: var(--sf-navy-hover) !important; }
.sf-actions .btn:not(.btn-link), .modal-footer .btn:not(.btn-link) { min-width: 110px; }
.btn-ladda .ladda-label { font-size: 14px; }

/* ---- Dashboard quick access: every main place as a large tile (user, 15 Oct) ---- */
/* member tab bar: gap between the charterer tabs and the ship operator tabs */
#navbar-second .sf-nav-gap { width: 1px; height: 22px; margin: 14px 18px; background: rgba(39, 50, 70, .25); list-style: none; }
@media (max-width: 768px) { #navbar-second .sf-nav-gap { width: auto; height: 1px; margin: 6px 20px; } }

/* My postings: the offers of a posting opened under its row */
tr.sf-offers-open > td { border-bottom: 0; }
.sf-offers-child > td { background: #f6f7f9; padding: 8px 12px 14px !important; }
.sf-offers-inline { background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; overflow-x: auto; }
.sf-offers-inline .table { margin-bottom: 0; }
/* the plan badge sits small at the top right of the company name (user, 15 Oct) */
.sf-plan-badge { margin-left: 4px; padding: 0 6px; font-size: 10px; line-height: 15px; vertical-align: top; position: relative; top: -3px; white-space: nowrap; }
.sf-plan-badge .sf-plan-mark { width: 11px; height: 11px; }
/* the date picker window opens above the fixed footer bar (the bottom of the calendar and the hours were hidden under it) */
.AnyTime-win, .AnyTime-pkr { z-index: 2000 !important; }
.sf-offers-inline td.media { min-width: 210px; }

/* the sister platform in the footer: its logo is the link */
.sf-sister a{display:inline-flex;align-items:center;gap:8px}.sf-sister img{display:block;height:18px;width:auto}

/* posting page heading on medium widths (22 Oct): the buttons go below the title instead of squeezing it into a narrow column */
@media (min-width: 769px) and (max-width: 1399px) {
    .sf-posting-head .panel-title, .sf-posting-head .sf-posting-meta, .sf-posting-head > .text-size-small { padding-right: 0; }
    .sf-posting-head .heading-elements { position: static; display: block; height: auto; margin-top: 12px; padding: 0; background: none; }
}

/* the fixed footer never covers the end of a page: the page keeps room for it (22 Oct) */
body { padding-bottom: 64px; }

/* friendly empty states and error pages (22 Oct) */
.sf-empty { text-align: center; padding: 36px 20px 40px; }
.sf-empty b { display: block; font-size: 17px; font-weight: 600; color: #273246; margin-bottom: 6px; }
.sf-empty p { margin: 0 auto 16px; max-width: 460px; color: #6b7280; }
.sf-error { text-align: center; padding: 90px 20px 110px; max-width: 560px; margin: 0 auto; }
.sf-error-code { font-size: 54px; font-weight: 300; letter-spacing: -.02em; color: #273246; line-height: 1; }
.sf-error h1 { font-size: 24px; font-weight: 400; margin: 14px 0 8px; color: #273246; }
.sf-error p { color: #6b7280; margin: 0 0 22px; }
.sf-error-actions .btn { margin: 0 4px; }

/* the sister-platform link in the fixed footer: text and logo on one line (the menu link rule made the logo drop below the text) */
.footer .navbar-nav > li.sf-sister > a { display: flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.footer .sf-sister img { display: inline-block; height: 18px; width: auto; }
@media (max-width: 1199px) {
    .footer .navbar-right { float: none !important; }
    .footer .navbar-right .navbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; float: none; }
}

/* "Actions" menus in the tables: the word and its arrow stay on one line (the arrow dropped below the word in a narrow cell) */
.icons-list > li > a.dropdown-toggle { white-space: nowrap; }
.icons-list > li > a.dropdown-toggle > .caret { margin-left: 5px; vertical-align: middle; }

/* the number behind a tab in the top bar ("My offers (2)") */
.sf-tab-count { opacity: .75; font-weight: normal; margin-left: 2px; }

/* Fixed / Confirm fixture and Failed: one under the other with room between, the note says who waits for whom */
.sf-fixed-actions { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; max-width: 230px; text-align: center; }
.sf-fixed-actions .sf-fixed-note { white-space: normal; }

/* My offers: the Actions column stays in view at the right edge while the wide table scrolls sideways (user, 23 Oct: the buttons were far off) */
.sf-sticky-actions > thead > tr > th:last-child,
.sf-sticky-actions > tbody > tr > td:last-child:not(.sf-counter-child) { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -8px 0 8px -8px rgba(0,0,0,.25); }
.sf-sticky-actions.table-striped > tbody > tr:nth-of-type(odd) > td:last-child:not(.sf-counter-child) { background: #f9f9f9; }

/* Posting details card (side column): the label with its icon stays on one line, the value is right aligned and wraps by itself */
.sf-detail-table > tbody > tr > td:first-child { white-space: nowrap; vertical-align: top; width: 1%; padding-right: 14px; }
.sf-detail-table > tbody > tr > td:last-child { vertical-align: top; text-align: right; }
/* nothing leaves the card (user, 23 Oct: texts hung out of it): the value column may shrink, long labels such as "Waiting for email confirmation" wrap */
.sf-detail-table { table-layout: auto; width: 100%; max-width: 100%; }
.sf-detail-table > tbody > tr > td:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.sf-detail-table .label { display: inline-block; max-width: 100%; white-space: normal; text-align: right; line-height: 1.4; }

/* date and time boxes are filled in by a picker (the plugin sets them read-only): they look like every other box, white, not grey (user, 23 Oct) */
.form-control.anytime[readonly], .form-control.daterange-single[readonly], .form-control.daterange-basic[readonly], .form-control.pickadate[readonly] {
    background: var(--sf-surface, #fff); color: var(--sf-text, #1f2327); cursor: pointer;
}

/* Cargo description and Ship requirements are cells of the same box, full width (user, 23 Oct) */
.sf-summary > div.sf-summary-wide { grid-column: 1 / -1; border-right: 0; }
.sf-summary .sf-summary-text { font-size: 15px; line-height: 1.6; font-weight: 500; }
.sf-summary > div.sf-summary-wide:last-child { border-bottom: 0; }

/* ---- offers and counteroffers: who sent what, in order (user, 23 Oct; ui-ux-pro-max) ----
   Colour is never the only sign: every row carries a word chip (You / the other role / Your turn) and a step number.
   mine = navy, theirs = teal, your turn = amber; text on the chips keeps 4.5:1 or more. */
:root {
    --sf-mine: #273246;   --sf-mine-tint: #f1f4f8;
    --sf-theirs: #0f766e; --sf-theirs-tint: #eef8f6;
    --sf-turn: #b45309;   --sf-turn-tint: #fff7ec; --sf-turn-line: #f3d3a4;
}
.sf-offers-inline, .sf-counter-wrap { background: #f8fafc; border: 1px solid var(--sf-line-soft); border-radius: 12px; padding: 8px 12px 4px; }
.sf-offers-inline > table, .sf-counter-wrap > table { margin: 0; background: transparent; }
.sf-offers-inline tr.sf-mine > td, .sf-offers-inline tr.sf-theirs > td, .sf-counter-wrap tr.sf-mine > td, .sf-counter-wrap tr.sf-theirs > td { border-top: 1px solid #e6ebf0; vertical-align: middle; }
tr.sf-mine { --rail: var(--sf-mine); background: var(--sf-mine-tint); }
tr.sf-theirs { --rail: var(--sf-theirs); background: var(--sf-theirs-tint); }
tr.sf-turn { --rail: var(--sf-turn); background: var(--sf-turn-tint); }
tr.sf-mine > td:first-child, tr.sf-theirs > td:first-child, tr.sf-turn > td:first-child { box-shadow: inset 4px 0 0 var(--rail); }
tr.sf-turn > td { border-top: 1px solid var(--sf-turn-line) !important; border-bottom: 1px solid var(--sf-turn-line); }
tr.sf-closed { opacity: .62; }
tr.sf-closed:hover { opacity: 1; }
tr.sf-counter-row > td:first-child { padding-left: 26px; }   /* indented under its offer */
/* the open counteroffer that waits for me: the one action stands out */
tr.sf-turn .btn.bg-inverse { box-shadow: 0 0 0 3px rgba(180, 83, 9, .18); }
.sf-who { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; padding: 1px 8px; border-radius: 99px; margin-right: 6px; vertical-align: middle; }
.sf-who-mine { background: var(--sf-mine); color: #fff; }
.sf-who-theirs { background: var(--sf-theirs); color: #fff; }
.sf-who-turn { background: var(--sf-turn-tint); color: var(--sf-turn); border: 1px solid var(--sf-turn-line); }
.sf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 2px 0 8px; }
.sf-legend .text-muted { margin-left: 4px; }
@media (prefers-reduced-motion: no-preference) { tr.sf-closed { transition: opacity .15s ease; } }

/* ---- sign-in family: sign in, forgot password, new password (23 Oct, user: modern, calm, one family on both sites) ----
   a brand side and a form side; the form is one calm card: big fields, a visible focus, a Show / Hide for passwords. */
.sf-auth-page .page-container, .sf-auth-page .page-content, .sf-auth-page .content-wrapper { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.sf-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 118px); background: #fff; }
.sf-auth-brand { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 56px 64px; color: #1f2327; background: #fff; border-right: 1px solid #e6e9ec; }
.sf-auth-brand-in { position: relative; max-width: 420px; width: 100%; }
.sf-auth-logo { width: 190px; height: auto; display: block; }
.sf-auth-brand h2 { margin: 30px 0 26px; font-size: 34px; line-height: 1.22; font-weight: 500; letter-spacing: -.01em; color: #273246; }
.sf-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sf-auth-points li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; color: #3d4650; }
.sf-auth-points i { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f4f8; color: #273246; font-size: 16px; }
.sf-auth-main { display: flex; align-items: center; justify-content: flex-start; padding: 48px 64px; }
.sf-auth-card { width: 100%; max-width: 400px; }
.sf-auth-card h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; font-weight: 600; color: #1f2327; letter-spacing: -.01em; }
.sf-auth-sub { margin: 0 0 28px; font-size: 15px; line-height: 1.5; color: #5f6b76; }
.sf-field { margin: 0 0 18px; }
.sf-field label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #3d4650; }
.sf-field-row { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; }
.sf-field-row label { margin: 0; }
.sf-auth-card .form-control, .sf-auth-card input[type=text], .sf-auth-card input[type=email], .sf-auth-card input[type=password] {
    height: 48px; padding: 0 14px; font-size: 15px; color: #1f2327; background: #fff; border: 1px solid #d5dce4; border-radius: 10px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.sf-auth-card .form-control:focus { border-color: #273246; box-shadow: 0 0 0 4px rgba(39,50,70,.12); outline: 0; }
.sf-auth-card input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px #fff; -webkit-text-fill-color: #1f2327; }
.sf-pw { position: relative; }
.sf-pw .form-control { padding-right: 68px; }
.sf-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 10px; border: 0; background: transparent; color: #273246; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; }
.sf-pw-toggle:hover { background: #eef1f5; }
.sf-pw-toggle:focus-visible, .sf-auth-btn:focus-visible, .sf-auth-link:focus-visible { outline: 3px solid rgba(39,50,70,.35); outline-offset: 2px; }
.sf-auth-btn { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 10px; background: #273246; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .05s; }
.sf-auth-btn:hover { background: #1d2736; }
.sf-auth-btn:active { transform: translateY(1px); }
.sf-auth-alt { margin: 22px 0 0; text-align: center; font-size: 14px; color: #5f6b76; }
.sf-auth-link { color: #273246; font-weight: 600; text-decoration: none; }
.sf-auth-link:hover { text-decoration: underline; }
.sf-auth-card .help-block { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #5f6b76; }
.sf-auth-card .help-block.text-danger, .sf-auth-card .has-error .help-block { color: #b42318; }
.sf-auth-card .has-error .form-control { border-color: #b42318; }
@media (max-width: 900px) {
    .sf-auth { grid-template-columns: 1fr; min-height: 0; }
    .sf-auth-brand { justify-content: flex-start; padding: 28px 24px; }
    .sf-auth-brand h2 { margin: 18px 0 0; font-size: 20px; }
    .sf-auth-points { display: none; }
    .sf-auth-logo { width: 150px; }
    .sf-auth-main { padding: 28px 20px 40px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sf-auth-btn, .sf-auth-card .form-control { transition: none; } }
.sf-auth-page .page-header .navbar-default { display: none; }   /* the empty second bar has nothing to show on a sign-in page */
.sf-auth { min-height: calc(100vh - 100px); }
.sf-auth-page .sf-auth { box-sizing: border-box; padding-bottom: 110px; }   /* the fixed footer bar must not cover the Sign in button on a short or narrow window (3 Nov, user) */

/* ======================================================================================================
   STANDARD COMPONENTS (docs/DESIGN-STANDARD.md, 23 Oct 2026, user: "validation, notifications, tables, action buttons: one standard")
   Same rules on Comdity (web/css/comdity-market.css). Tokens first, then forms, bars, buttons.
   ====================================================================================================== */
:root {
    --ok: #0b6b57; --ok-tint: #e3f4ec; --ok-ink: #0b5240;
    --warn: #b45309; --warn-tint: #fff7ec; --warn-ink: #7a3b06;
    --err: #b42318; --err-tint: #fdecea; --err-ink: #7a1d15;
    --info: #273246; --info-tint: #eef2f8; --info-ink: #1f2937;
}
/* 1. Form validation: a field is red only after the person tried (a failed send, or leaving it wrong), never while it is just empty.
      The browser's own red glow is switched off; the field gets one thin red line and a soft ring, the message sits under it. */
input:invalid, select:invalid, textarea:invalid { box-shadow: none; outline: 0; }
.has-error .form-control, .has-error .select2-selection, .form-control.sf-invalid, .form-control:user-invalid, .select2-container.sf-invalid .select2-selection {
    border: 1px solid var(--err) !important; background: #fff; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}
.has-error .form-control:focus, .form-control.sf-invalid:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .18); }
.has-error .help-block, .has-error .help-block-error, label.validation-error-label, .validation-error-label, .form-group .error-message {
    display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--err);
}
.has-error label, .has-error .control-label { color: inherit; }   /* only the message turns red, not the label */
.text-danger { color: var(--err) !important; }                      /* the required star */
/* 2. Notification bars (the jGrowl bars at the top): one shape, the four semantic colours of the standard, a coloured edge and a word-sized text. */
.jGrowl .jGrowl-notification { border-radius: 10px; border-width: 1px 1px 1px 4px; padding: 12px 16px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 6px 20px rgba(16, 24, 40, .12); opacity: 1; }
.jGrowl .jGrowl-notification.alert-success { background: var(--ok-tint);   border-color: var(--ok);   color: var(--ok-ink); }
.jGrowl .jGrowl-notification.alert-info    { background: var(--info-tint); border-color: var(--info); color: var(--info-ink); }
.jGrowl .jGrowl-notification.alert-warning { background: var(--warn-tint); border-color: var(--warn); color: var(--warn-ink); }
.jGrowl .jGrowl-notification.alert-danger  { background: var(--err-tint);  border-color: var(--err);  color: var(--err-ink); }
.alert { border-radius: 10px; }
.alert-success { background: var(--ok-tint);   border-color: var(--ok);   color: var(--ok-ink); }
.alert-info    { background: var(--info-tint); border-color: var(--info); color: var(--info-ink); }
.alert-warning { background: var(--warn-tint); border-color: var(--warn); color: var(--warn-ink); }
.alert-danger  { background: var(--err-tint);  border-color: var(--err);  color: var(--err-ink); }
/* 3. Buttons: three kinds only. Main (filled brand), secondary (outline), danger (outline in the danger colour; the filled red is never used).
      A positive end of a flow (Fixed, Confirm fixture) is filled green. Table action buttons are one size, in one row, on the right. */
.sf-btn-ok { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.sf-btn-ok:hover { filter: brightness(.92); }
.sf-btn-danger-o { background: #fff !important; border: 1px solid var(--err) !important; color: var(--err) !important; }
.sf-btn-danger-o:hover { background: var(--err-tint) !important; }
.table td:last-child .btn-xs, .sf-fixed-actions .btn, .sf-counter-actions .btn-xs {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.table td:last-child .btn-xs.bg-inverse { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.table td:last-child .btn-xs.btn-default { background: #fff; border: 1px solid #cdd5de; color: var(--info-ink); }
.table td:last-child .btn-xs.btn-default:hover { background: #f4f6f9; }
.table td.js-offer-actions, .table td.text-center:last-child { text-align: right !important; }
.sf-fixed-actions { align-items: flex-end; text-align: right; }
.sf-auth-help { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #5f6b76; }
.sf-auth-note { margin: 0 0 20px; padding: 12px 14px; border: 1px solid #e6e9ec; border-radius: 10px; background: #f8fafc; }
.sf-auth-note ol { margin: 6px 0 0; padding-left: 18px; }

/* the reCAPTCHA corner badge sat on top of the footer: it is hidden and the sentence Google asks for stands in the footer instead */
.grecaptcha-badge { visibility: hidden; }
.sf-rc-note { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: #6b7280; }
.sf-rc-note a { color: inherit; text-decoration: underline; }

/* the sign-up steps keep their field markup (.form-group, .control-label, .help-block, checkbox-inline): they take the look of the sign-in family here */
.sf-auth-tall .sf-auth-brand, .sf-auth-tall .sf-auth-main { align-items: flex-start; padding-top: 64px; }
.sf-auth-card .form-group { margin: 0 0 18px; }
.sf-auth-card .control-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #3d4650; }
.sf-auth-card .checkbox-inline { display: block; position: relative; padding-left: 28px !important; font-size: 14px; line-height: 1.5; color: #3d4650; }
.sf-auth-card .checkbox-inline input[type=checkbox] { position: absolute !important; left: 0; top: 3px; width: 18px; height: 18px; margin: 0 !important; accent-color: #273246; }
.sf-auth-card .checkbox-inline a { color: #273246; font-weight: 600; }
.sf-auth-err { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #b42318; font-size: 14px; line-height: 1.45; }
.sf-auth-card .checkbox-inline { font-weight: 400; }

/* 4. Dialogs (the one confirmation box): soft card, away from the top edge, readable text, the main action on the right, Cancel on the left */
.modal.sf-confirm .modal-dialog { max-width: 480px; margin: 14vh auto 0; }
.modal.sf-confirm .modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 64px rgba(16, 24, 40, .28); overflow: hidden; }
.modal.sf-confirm .modal-header { border: 0; padding: 22px 24px 4px; }
.modal.sf-confirm .modal-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: #1f2327; }
.modal.sf-confirm .modal-header .close { margin-top: -2px; opacity: .55; font-size: 24px; }
.modal.sf-confirm .modal-header .close:hover { opacity: 1; }
.modal.sf-confirm .modal-body { padding: 8px 24px 6px; font-size: 15px; line-height: 1.55; color: #3d4650; }
.modal.sf-confirm .modal-footer { border: 0; padding: 16px 24px 22px; display: flex; justify-content: flex-end; gap: 10px; }
.modal.sf-confirm .modal-footer .btn { height: 42px; padding: 0 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600; margin: 0; }
.modal.sf-confirm .modal-footer .btn-default { background: #fff; border: 1px solid #cdd5de; color: #1f2937; }
.modal.sf-confirm .modal-footer .btn-default:hover { background: #f4f6f9; }
.modal-backdrop.in { opacity: .45; }
@media (max-width: 520px) { .modal.sf-confirm .modal-dialog { margin: 10vh 12px 0; } .modal.sf-confirm .modal-footer .btn { flex: 1; } }

/* Support page: the guide sections are soft cards with a readable size; the questions have air (look only) */
.sf-guide { gap: 16px !important; }
.sf-guide > div { border: 1px solid #e6e9ec; border-radius: 12px; padding: 18px 20px 10px; background: #fff; }
.sf-guide > div h6 { font-size: 15px; margin: 0 0 12px; letter-spacing: -.005em; }
.sf-guide > div ul { list-style: none; padding: 0; }
.sf-guide > div li { position: relative; padding-left: 18px; margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.sf-guide > div li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #273246; opacity: .45; }
.sf-faq details { padding: 14px 0 !important; }
.sf-faq summary { font-size: 15px; }
.sf-faq details p { font-size: 14px; line-height: 1.6; }

/* "Posted by" in the side card: the company and person need the whole width, so the label sits above the value (a narrow column broke e-mail addresses and names in the middle of a word) */
.sf-detail-table > tbody > tr.sf-stack > td { display: block; width: auto; text-align: left; padding-right: 0; }
.sf-detail-table > tbody > tr.sf-stack > td:first-child { padding-bottom: 2px; }
.sf-detail-table > tbody > tr.sf-stack > td:last-child { padding-top: 0; }

/* the last card of a page must not touch the footer bar (user, 28 Oct: account settings page) */
.page-container .content-wrapper { padding-bottom: 32px; }
/* account settings: every section sits on one page, like Comdity (user, 28 Oct); the bottom bar is fixed, so the page keeps room below the last card */
.sf-pane { margin-bottom: 0; scroll-margin-top: 70px; }
body { padding-bottom: 72px; }

/* account settings in the look of the Comdity settings page: round cards with a thin line, no shadow, softer menu, rounded fields (user, 28 Oct: "Comdity cok ozen vermissin") */
.sf-settings .panel.panel-white, .sf-settings .sf-account-card { border: 1px solid #e3e7ea; border-radius: 14px; box-shadow: none; margin-bottom: 16px; overflow: hidden; }
.sf-settings .panel-white > .panel-heading { background: #fff; border: 0; padding: 22px 24px 0; }
.sf-settings .panel-white .panel-title { font-size: 18px; font-weight: 600; color: #273246; }
.sf-settings .panel-white > .panel-body { padding: 14px 24px 22px; }
.sf-settings .panel-white label, .sf-settings .panel-white .control-label { font-weight: 600; font-size: 14px; color: #273246; margin: 14px 0 6px; }
.sf-settings .panel-white .checkbox label { font-weight: 400; margin: 0; }
.sf-settings .panel-white .form-control { height: 46px; border: 1px solid #d8dde3; border-radius: 10px; padding: 0 14px; box-shadow: none; background-image: none; }
.sf-settings .panel-white .form-control:focus { border-color: #273246; box-shadow: 0 0 0 3px rgba(39, 50, 70, .12); }
.sf-settings .panel-white .form-control[disabled], .sf-settings .panel-white .form-control[readonly] { background: #f3f5f8; color: #6b7280; }
.sf-settings .sf-account-nav { border-top: 1px solid #eef0f3; padding: 10px; }
.sf-settings .sf-account-nav > li > a { border-radius: 10px; padding: 11px 14px; font-size: 15px; box-shadow: none; }
.sf-settings .sf-account-nav > li.active > a, .sf-settings .sf-account-nav > li.active > a:hover { background: #eef1f6; box-shadow: none; }
.sf-settings .sf-actions { margin-top: 18px; }

/* Support page in the Comdity look (user, 28 Oct: "Comdity vallahi son versiyon gibi"): same round cards as the account settings, the guide boxes without a second frame, a thin line under each question */
.sf-support .sf-guide > div { border: 0; border-radius: 0; padding: 0 4px 6px; background: transparent; }
.sf-support .sf-guide > div h6 { font-size: 15px; font-weight: 600; color: #273246; }
.sf-support .sf-faq details { border-bottom: 1px solid #eef0f3; padding: 12px 0; }
.sf-support .sf-faq details:last-child { border-bottom: 0; }
.sf-support .sf-faq summary { font-weight: 600; color: #273246; cursor: pointer; }
.sf-support .panel-white > .panel-body { padding-top: 16px; }

/* ---- white top bar, like Comdity (user, 28 Oct: "Shipfixing Comdity gibi olsun, tamamen beyaz ust cubuk") ---- */
.sf-topbar-light, .sf-topbar-light .navbar-collapse, .navbar-inverse.sf-topbar-light { background-color: #fff !important; border-color: #eef0f3 !important; box-shadow: none; }
.sf-topbar-light { border-bottom: 1px solid #eef0f3 !important; }
.sf-topbar-light .navbar-nav > li > a, .sf-topbar-light .navbar-text, .sf-topbar-light .navbar-nav > li > a .caret { color: #273246 !important; }
.sf-topbar-light .navbar-nav > li > a:hover, .sf-topbar-light .navbar-nav > li > a:focus, .sf-topbar-light .navbar-nav > .open > a { background: #f3f5f8 !important; color: #273246 !important; border-radius: 10px; }
.sf-topbar-light .sf-upgrade-btn { border: 1px solid #273246 !important; color: #273246 !important; background: #fff !important; }
.sf-topbar-light .sf-upgrade-btn:hover { background: #273246 !important; color: #fff !important; }
.sf-topbar-light .navbar-toggle, .sf-topbar-light .navbar-nav.visible-xs-block > li > a { color: #273246 !important; }
.sf-topbar-light .dropdown-menu { border: 1px solid #e3e7ea; border-radius: 12px; box-shadow: 0 8px 24px rgba(39,50,70,.10); }

/* the tab row of the member pages, in the Comdity look: text only, one calm row, small count badges, the open page underlined (user, 28 Oct) */
#navbar-second { background: #fff; border-bottom: 1px solid #eef0f3; }
#navbar-second .navbar-nav > li > a { font-size: 15px; color: #3d4650; padding: 15px 16px; }
#navbar-second .navbar-nav > li > a:hover, #navbar-second .navbar-nav > li > a:focus { background: transparent; color: #273246; }
#navbar-second .navbar-nav > li.active > a { color: #273246; font-weight: 600; background: transparent; box-shadow: inset 0 -2px 0 #273246; }
#navbar-second .sf-tab-count { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px; border-radius: 10px; background: #eef1f6; color: #273246; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
/* many tabs stay on one tidy line: no wrapping, tighter on narrower screens, a quiet scroll if the window is very small (user, 28 Oct: "menu karismasin") */
@media (min-width: 769px) {
    #navbar-second .navbar-nav { white-space: nowrap; }
    #navbar-second #navbar-second-toggle { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    #navbar-second .navbar-nav > li { float: none; display: inline-block; vertical-align: top; }
}
@media (min-width: 769px) and (max-width: 1250px) { #navbar-second .navbar-nav > li > a { padding: 15px 11px; font-size: 14.5px; } #navbar-second .sf-nav-gap { margin: 14px 10px; } }

/* ---- the header in the Comdity manner: thin line above, logo with a quiet line, plain links, one outlined button (user, 28 Oct) ---- */
.sf-topline { background: #fff; text-align: center; padding: 6px 12px 0; }
.sf-topline p { margin: 0; font-size: 12px; letter-spacing: .02em; color: #5b6875; }
.sf-topline a { color: #5b6875; text-decoration: none; }
.sf-topline a:hover { color: #273246; text-decoration: underline; }
.sf-topline i { font-style: normal; margin: 0 6px; opacity: .6; }
.sf-topbar-light .navbar-header { display: flex; align-items: center; }
.sf-topbar-light .navbar-brand.sf-brand { display: flex; align-items: center; height: auto; padding: 12px 15px; }
.sf-topbar-light .navbar-brand.sf-brand img { height: 44px; width: auto; margin: 0; }
.sf-brandline { margin-left: 18px; padding-left: 18px; border-left: 1px solid #d6dde4; font-size: 15px; color: #5b6875; white-space: nowrap; }
@media (max-width: 1100px) { .sf-brandline { display: none; } }
.sf-topbar-light .navbar-nav > li > a { font-size: 15px; }
.sf-topbar-light .sf-post-item > a.sf-post-btn { margin: 12px 6px 0 14px; padding: 8px 18px; border: 1px solid #273246; border-radius: 10px; font-weight: 600; line-height: 20px; background: #fff; }
.sf-topbar-light .sf-post-item > a.sf-post-btn:hover, .sf-topbar-light .sf-post-item > a.sf-post-btn:focus { background: #273246 !important; color: #fff !important; }
.sf-topline a:focus-visible, .sf-topbar-light a:focus-visible, #navbar-second a:focus-visible { outline: 2px solid #273246; outline-offset: 2px; border-radius: 6px; }

/* ---- the header on a phone: ONE menu icon at the top right, the tabs always visible in one swipeable row, the account links in the opened menu (user, 29 Oct) ---- */
@media (max-width: 768px) {
    .sf-topbar-light .navbar-header { display: flex; align-items: center; justify-content: space-between; float: none; width: 100%; }
    .sf-topbar-light .navbar-header .navbar-nav.pull-right { float: none !important; margin: 0 8px 0 0; }
    .sf-topbar-light .navbar-header .navbar-nav.pull-right > li > a { padding: 10px 12px; font-size: 22px; line-height: 1; border-radius: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .sf-topbar-light .navbar-brand.sf-brand { padding: 8px 12px; }
    .sf-topbar-light .navbar-brand.sf-brand img { height: 36px; width: auto; }
    .sf-topbar-light .navbar-collapse { padding: 4px 0 12px; border-top: 1px solid #eef0f3; }
    .sf-topbar-light .navbar-nav > li > a { padding: 12px 18px; }
    .sf-topbar-light .sf-upgrade-item { margin: 4px 0; }
    .sf-topbar-light .sf-upgrade-item a.sf-upgrade-btn { margin: 8px 18px !important; }
    .sf-topbar-light .sf-post-item > a.sf-post-btn { display: block; margin: 8px 18px 4px; text-align: center; }
    #navbar-second .visible-xs-block { display: none !important; }
    #navbar-second #navbar-second-toggle { display: block !important; height: auto !important; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; border-top: 0; padding: 0 6px; }
    #navbar-second .navbar-nav { white-space: nowrap; margin: 0; float: none; }
    #navbar-second .navbar-nav > li { float: none; display: inline-block; vertical-align: top; }
    #navbar-second .navbar-nav > li > a { padding: 14px 12px; font-size: 14.5px; }
    #navbar-second .sf-nav-gap { display: inline-block; vertical-align: top; width: 1px; height: 22px; margin: 14px 6px; }
}
/* the sign-in pages already have the logo in the top bar: the brand panel keeps only the slogan */
.sf-auth-page .sf-auth-logo { display: none; }
/* the bootstrap clear-fix pseudo elements must not become flex items (they pushed the logo to the middle on a phone) */
.sf-topbar-light .navbar-header::before, .sf-topbar-light .navbar-header::after { display: none; content: none; }
@media (max-width: 768px) {
    #navbar-second #navbar-second-toggle { scrollbar-width: none; -ms-overflow-style: none; box-shadow: none; }
    #navbar-second #navbar-second-toggle::-webkit-scrollbar { display: none; }
}
#navbar-second .navbar-nav > li > a, #navbar-second .navbar-nav > li.active > a { border-radius: 0; }
@media (max-width: 768px) {
    #navbar-second .navbar-nav > .active > a::after { top: auto; right: 0; width: auto; height: 2px; background-color: #273246; }
}

/* sign-in pages on a phone: calmer sizes (user, 30 Oct: "Welcome back" and the slogan were far too big) */
@media (max-width: 900px) {
    .sf-auth-brand { padding: 18px 20px 6px; border-right: 0; border-bottom: 0; }
    .sf-auth-brand h2 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: #5b6875; }
    .sf-auth-brand h2 span { display: inline; }                 /* "The Right Vessel. The Right Freight. Right on Time." on one calm line */
    .sf-auth-main { padding: 14px 20px 32px; }
    .sf-auth-card h1 { font-size: 22px; }
    .sf-auth-card .sf-auth-sub, .sf-auth-card > p { font-size: 14px; }
}
.sf-auth-brand h2 span { display: block; }   /* on a wide screen: three lines */
@media (max-width: 900px) { .sf-auth-brand h2 span { display: inline; } }

/* My postings: the opened offers belong to the posting ABOVE them (user, 30 Oct: "it looks like two different cargos"): the posting row and its offers share one tinted band and a line,
   the next posting starts clearly below */
tr.sf-offers-open > td { background: #f8fafc; border-bottom: 0; }
.sf-offers-child > td { background: #f8fafc; padding: 0 14px 18px 36px !important; position: relative; border-top: 0 !important; }
.sf-offers-child > td::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 18px; width: 2px; background: #273246; opacity: .3; }
.sf-offers-child .sf-offers-inline { background: #fff; border-left: 3px solid #273246; }
.sf-offers-head { font-size: 13px; color: #5b6875; margin: 0 0 8px; }
.sf-offers-head b { color: #273246; }
tr.sf-offers-child + tr > td { border-top: 2px solid #e3e7ea; }
/* focus: while one posting's offers are open the other postings are hidden (user, 30 Oct) */
tr.sf-focus-hide { display: none !important; }
.sf-focus-bar { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #e3e7ea; border-radius: 10px; background: #f8fafc; font-size: 14px; color: #273246; }
.sf-focus-bar a { margin-left: 8px; text-decoration: underline; }
/* under an offer only the latest counteroffer shows; the older ones open with the link (user, 30 Oct) */
tr.sf-counter-old { display: none; }
tr.sf-counter-old.sf-shown { display: table-row; }
tr.sf-counter-more > td { padding-top: 4px !important; padding-bottom: 4px !important; border-top: 0 !important; background: transparent; }
tr.sf-counter-more a { text-decoration: underline; }

/* port search in the forms: a country is a faint heading (not chosen), its ports scroll in a taller box (30 Oct) */
.select2-container--default .select2-results>.select2-results__options{max-height:320px}
.select2-container--default .select2-results__group{color:#8a94a3;font-weight:600;font-size:12px;padding:8px 6px 4px;cursor:default}

/* ---- ONE footer standard for every page and form (4 Nov 2026) ----
   The bar is part of the page flow at every width: it follows the last content, so it can never cover a form button, and it keeps a clear gap (48px)
   under the last card. Layout is the same everywhere: from 992px up the copyright sits left and the links right on ONE row; below 992px both are stacked
   and left aligned (never centred, never reversed). The theme's own side padding / negative margins / floats are reset so nothing is wider than the window. */
body { padding-bottom: 0 !important; }
.navbar-fixed-bottom.footer, .footer.navbar-fixed-bottom {
    position: static !important; left: auto; right: auto; bottom: auto; margin: 48px 0 0; padding: 0 !important; width: auto; max-width: 100%;
    box-sizing: border-box; border-width: 1px 0 0; overflow: hidden;
}
.footer .visible-xs-block { display: none !important; }
.footer #footer.navbar-collapse.collapse {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px;
    box-sizing: border-box; width: auto; max-width: 1180px; height: auto !important; margin: 0 auto !important; padding: 20px 24px;
    border: 0; box-shadow: none; overflow: visible;
}
.footer .navbar-text { order: 1; float: none; margin: 0; padding: 0; min-width: 0; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.footer .navbar-right { order: 2; float: none !important; margin: 0 !important; padding: 0; min-width: 0; max-width: 100%; }
.footer .navbar-right .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0 -10px; float: none; }
.footer .navbar-right .nav > li { float: none; }
.footer .navbar-right .nav > li > a { padding: 6px 10px; line-height: 1.4; }
.sf-auth-page .sf-auth { padding-bottom: 24px; }
@media (min-width: 992px) {
    .footer #footer.navbar-collapse.collapse { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6px 32px; }
    .footer .navbar-text { flex: 1 1 auto; }
    .footer .navbar-right { flex: 0 0 auto; }
}
.footer #footer::before, .footer #footer::after { display: none !important; content: none; }   /* the theme's clearfix pseudo-elements would become empty flex items and push the copyright sideways */
/* wide windows (like Comdity): the bar stays at the bottom of the window. It is ONE row of a known height (~70px), so a fixed space under the page
   (100px = bar + a clear gap) is always enough. Below 1200px the copyright and the links no longer fit on one row: the bar then follows the page (above). */
@media (min-width: 1200px) {
    body { padding-bottom: 100px !important; }
    .navbar-fixed-bottom.footer, .footer.navbar-fixed-bottom {
        position: fixed !important; left: 0; right: 0; bottom: 0; margin: 0; z-index: 1030; overflow: visible; background: #fff;
    }
    .footer #footer.navbar-collapse.collapse { padding-top: 10px; padding-bottom: 10px; }
}
/* the theme draws a hairline under the copyright and under the links (borders of .navbar-text and .navbar-nav) and a second top line (box-shadow): none of them */
.footer, .footer .navbar-text, .footer .navbar-nav, .footer .navbar-right { box-shadow: none !important; }
.footer .navbar-text, .footer .navbar-nav, .footer .navbar-right { border-top: 0 !important; border-bottom: 0 !important; }
/* below 992px (phones, small windows) everything is centred, so the copyright and the links share one axis */
@media (max-width: 991px) {
    .footer #footer.navbar-collapse.collapse { align-items: center; text-align: center; }
    .footer .navbar-text { text-align: center; }
    .footer .navbar-right .nav { justify-content: center; }
}