/*
 * Loaded after Bootstrap and the seafarer SCSS.
 * Selectors repeat the existing ones (header.scss, form.scss, file_input.scss,
 * base.scss, home.scss) and use !important where those files or Bootstrap
 * utilities already set the property.
 */

body#seafarerprofile-body {
  --sf-primary: #1f71e7;
  --sf-navy: #0f1624;
  --sf-canvas: #f6f7f9;
  --sf-profile: #eef1f4;
  --sf-profile-ink: #1f2937;
  --sf-hiring: #e7f0fc;
  --sf-hiring-ink: #1a56b0;
  --sf-comms: #f3efea;
  --sf-comms-ink: #6b5344;
  --sf-muted: #5c6b7e;
  --sf-line: #e4e7ec;
  --sf-tint: var(--sf-profile);
  --sf-ink: var(--sf-profile-ink);
  background: var(--sf-canvas) !important;
  color: var(--sf-navy) !important;
  font-family: "Source Sans Pro", "Segoe UI", Helvetica, Arial, sans-serif;
}

body#seafarerprofile-body.menu-hiring_hall {
  --sf-tint: var(--sf-hiring);
  --sf-ink: var(--sf-hiring-ink);
}

body#seafarerprofile-body.menu-communications {
  --sf-tint: var(--sf-comms);
  --sf-ink: var(--sf-comms-ink);
}

body#seafarerprofile-body .container {
  max-width: 1120px !important;
}

/* Header: header.scss paints the bar, dropdowns, and toggler dark. */
body#seafarerprofile-body header.bg-dark,
body#seafarerprofile-body header.bg-dark.text-white {
  background-color: #fff !important;
  color: var(--sf-navy) !important;
  border-bottom: 1px solid var(--sf-line);
}

body#seafarerprofile-body header .navbar-brand,
body#seafarerprofile-body header .nav-link,
body#seafarerprofile-body header.navbar-dark .navbar-nav .nav-link {
  color: var(--sf-navy) !important;
}

body#seafarerprofile-body header nav.navbar .logged-in-as,
body#seafarerprofile-body header nav.navbar .logged-in-as.logged-in-toolbar {
  color: var(--sf-muted) !important;
  font-size: 13px;
  position: static !important;
  right: auto !important;
  top: auto !important;
  margin-right: 12px;
}

body#seafarerprofile-body header nav.navbar .relative-container button.navbar-toggler {
  color: var(--sf-navy) !important;
  border-color: var(--sf-line) !important;
  background: #fff !important;
  border-radius: 8px;
}

body#seafarerprofile-body header .btn-outline-light {
  color: var(--sf-navy) !important;
  border-color: var(--sf-line) !important;
  background: #fff !important;
  border-radius: 8px;
  font-weight: 600;
}

body#seafarerprofile-body header .btn-outline-light:hover {
  background: #f3f5f8 !important;
  color: var(--sf-navy) !important;
}

/* The navbar itself adds 1rem of horizontal padding on top of .container,
   so "SIU2020" starts further in than the page title, and Sign out sits
   tight against the right edge. Drop the navbar padding and keep the same
   15px inset as the content container on both sides. */
body#seafarerprofile-body header nav.navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#seafarerprofile-body header .navbar-expand-lg > .container,
body#seafarerprofile-body header nav.navbar > .container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

body#seafarerprofile-body header .navbar-brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body#seafarerprofile-body header .navbar-nav {
  gap: 8px;
}

body#seafarerprofile-body header .navbar-nav > .nav-item {
  margin: 0 4px !important;
}

body#seafarerprofile-body header .navbar-expand-lg .navbar-nav .nav-link,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a {
  padding: 8px 12px !important;
}

body#seafarerprofile-body header .dropdown-toggle::after,
body#seafarerprofile-body header .dropdown-toggle::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
  margin: 0 !important;
}

body#seafarerprofile-body header .popover .arrow {
  display: none !important;
}

body#seafarerprofile-body header .dropdown-menu .dropdown-item {
  margin: 2px 0 !important;
  padding: 8px 12px !important;
}

body#seafarerprofile-body header .navbar-nav .nav-item.dropdown {
  background-color: transparent !important;
}

body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a:link,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a:visited {
  color: var(--sf-navy) !important;
  font-weight: 500 !important;
  border-radius: 8px;
}

body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a:hover,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown > a:active,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown.active > a,
body#seafarerprofile-body header .navbar-nav .nav-item.dropdown.show > a {
  background: #f3f5f8 !important;
  color: var(--sf-navy) !important;
}

body#seafarerprofile-body header .dropdown-menu,
body#seafarerprofile-body header .navbar-nav .dropdown-menu {
  background-color: #fff !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 12px;
  padding: 6px;
}

body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item,
body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item:link,
body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item:visited {
  background-color: transparent !important;
  color: var(--sf-navy) !important;
  border-radius: 8px;
  font-weight: 400;
}

body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item:hover,
body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item:active,
body#seafarerprofile-body header .navbar-nav .dropdown-menu a.dropdown-item.active {
  background-color: #f3f5f8 !important;
  color: var(--sf-navy) !important;
}

body#seafarerprofile-body header nav.navbar #navbarDropdownMenu {
  background-color: #fff !important;
  color: var(--sf-navy) !important;
}

@media (max-width: 992px) {
  body#seafarerprofile-body header nav.navbar #navbarDropdownMenu,
  body#seafarerprofile-body header nav.navbar #navbarDropdownMenu.collapsing {
    background-color: #fff !important;
    color: var(--sf-navy) !important;
    transition: none !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body#seafarerprofile-body header nav.navbar #navbarDropdownMenu a,
  body#seafarerprofile-body header nav.navbar #navbarDropdownMenu ul li a {
    color: var(--sf-navy) !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu > .navbar-nav {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav > li {
    margin: 8px 15px !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav > .nav-item > a.nav-link,
  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav .dropdown-menu a.dropdown-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 8px !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav .dropdown.show > .dropdown-menu,
  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav .dropdown-menu.show {
    display: block !important;
  }

  body#seafarerprofile-body header #navbarDropdownMenu .navbar-nav .dropdown-menu a.dropdown-item {
    margin: 8px 0 0 !important;
  }
}

/* Type */
body#seafarerprofile-body main#content > .container.py-3 {
  padding-top: 8px !important;
}

body#seafarerprofile-body main#content h1,
body#seafarerprofile-body main#content h1.mb-3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--sf-navy) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

body#seafarerprofile-body main#content .lead {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--sf-muted) !important;
  margin-bottom: 0 !important;
}

body#seafarerprofile-body #live-job-calls > .row .lead {
  margin-bottom: 16px !important;
}

body#seafarerprofile-body #home > #content > .row > .col-12 {
  padding-bottom: 20px !important;
}

body#seafarerprofile-body #home .lead {
  margin-bottom: 0 !important;
}

body#seafarerprofile-body div.creation-step {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sf-muted) !important;
}

/* Report-in and other pending notifications */
body#seafarerprofile-body .alert-container .ht-tm-element.alert.alert-primary {
  background-color: var(--sf-navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* Notification buttons sit in .col (15px padding each side), so the gap
   between Report In and the next control is 30px. Half the gutter. */
body#seafarerprofile-body .alert-container .alert .row {
  margin-left: -7.5px !important;
  margin-right: -7.5px !important;
}

body#seafarerprofile-body .alert-container .alert .row > [class*="col"] {
  padding-left: 7.5px !important;
  padding-right: 7.5px !important;
}

body#seafarerprofile-body #flash-alerts .alert {
  border-radius: 10px !important;
}

body#seafarerprofile-body #flash-alerts .alert-dismissible .close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
  float: none !important;
}

body#seafarerprofile-body #flash-alerts .alert-dismissible .close:hover,
body#seafarerprofile-body #flash-alerts .alert-dismissible .close:focus {
  opacity: 1 !important;
  background: rgba(15, 22, 36, 0.06) !important;
}

body#seafarerprofile-body #flash-alerts .alert-dismissible .close svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Panels: section rows and forms */
body#seafarerprofile-body main#content .row.py-3 > .col-12,
body#seafarerprofile-body main#content form.simple_form,
body#seafarerprofile-body main#content form.form-with-submit {
  background: #fff !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 10px !important;
}

/* Page rows sit inside a container that already has 15px of padding.
   Bootstrap then pulls .row out by 15px and pads .col back in, so a card
   with padding removed no longer lines up with the title. Flatten only the
   top-level rows; nested form rows keep their gutters. */
body#seafarerprofile-body main#content .container > * > .row,
body#seafarerprofile-body main#content .container > .row.discharge-book-mobile-form,
body#seafarerprofile-body main#content .container > .row.report-in-scan-mobile-form {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#seafarerprofile-body main#content .container > * > .row > [class*="col"],
body#seafarerprofile-body main#content .container > .row.discharge-book-mobile-form > .col-12,
body#seafarerprofile-body main#content .container > .row.report-in-scan-mobile-form > .col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#seafarerprofile-body main#content .row.py-3 > .col-12 {
  padding: 0 0 12px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

body#seafarerprofile-body main#content .row.py-3 > .col-12 > form,
body#seafarerprofile-body main#content .row.py-3 > .col-12 form.simple_form,
body#seafarerprofile-body main#content .row.py-3 > .col-12 form.form-with-submit {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}

body#seafarerprofile-body main#content .alert h4,
body#seafarerprofile-body main#content h4.alert-heading {
  background: transparent !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.1rem !important;
  display: block !important;
}

body#seafarerprofile-body main#content h4:not(.alert-heading),
body#seafarerprofile-body main#content legend {
  background: var(--sf-tint) !important;
  color: var(--sf-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--sf-line) !important;
}

body#seafarerprofile-body main#content form > h4:not(.alert-heading) + * {
  margin-top: 12px !important;
}

body#seafarerprofile-body main#content h4:not(.alert-heading):has(.btn) {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body#seafarerprofile-body main#content .btn-add {
  margin-left: 0 !important;
}

body#seafarerprofile-body #index-notices .btn-show {
  margin: 8px 14px 12px !important;
}

/* Buttons.
   Bootstrap sets a different color for each state (hover, focus, active,
   disabled). .btn-success is green (#29c272) and .btn-primary is #266cd8.
   Every state is listed so none of those rules paint over the prototype. */
body#seafarerprofile-body .btn {
  border-radius: 8px !important;
  font-weight: 600;
  box-shadow: none !important;
}

body#seafarerprofile-body .btn-primary,
body#seafarerprofile-body .btn-success,
body#seafarerprofile-body .btn-info,
body#seafarerprofile-body .btn-save,
body#seafarerprofile-body a.btn-primary,
body#seafarerprofile-body a.btn-success,
body#seafarerprofile-body a.btn-info,
body#seafarerprofile-body button.btn-primary,
body#seafarerprofile-body button.btn-success,
body#seafarerprofile-body input.btn-primary,
body#seafarerprofile-body input.btn-success,
body#seafarerprofile-body input.btn-save,
body#seafarerprofile-body .btn-primary:hover,
body#seafarerprofile-body .btn-success:hover,
body#seafarerprofile-body .btn-info:hover,
body#seafarerprofile-body .btn-save:hover,
body#seafarerprofile-body .btn-primary:focus,
body#seafarerprofile-body .btn-success:focus,
body#seafarerprofile-body .btn-info:focus,
body#seafarerprofile-body .btn-save:focus,
body#seafarerprofile-body .btn-primary:active,
body#seafarerprofile-body .btn-success:active,
body#seafarerprofile-body .btn-info:active,
body#seafarerprofile-body .btn-save:active,
body#seafarerprofile-body .btn-primary:not(:disabled):not(.disabled):active,
body#seafarerprofile-body .btn-success:not(:disabled):not(.disabled):active,
body#seafarerprofile-body .btn-primary.disabled,
body#seafarerprofile-body .btn-primary:disabled,
body#seafarerprofile-body .btn-success.disabled,
body#seafarerprofile-body .btn-success:disabled,
body#seafarerprofile-body .btn-info.disabled,
body#seafarerprofile-body .btn-info:disabled {
  background-color: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body#seafarerprofile-body .btn-primary:hover,
body#seafarerprofile-body .btn-success:hover,
body#seafarerprofile-body .btn-info:hover,
body#seafarerprofile-body .btn-save:hover,
body#seafarerprofile-body .btn-primary:active,
body#seafarerprofile-body .btn-success:active,
body#seafarerprofile-body .btn-primary:not(:disabled):not(.disabled):active,
body#seafarerprofile-body .btn-success:not(:disabled):not(.disabled):active {
  background-color: #185ec4 !important;
  border-color: #185ec4 !important;
}

body#seafarerprofile-body .btn-light,
body#seafarerprofile-body a.btn-light,
body#seafarerprofile-body .btn-light:hover,
body#seafarerprofile-body .btn-light:focus,
body#seafarerprofile-body .btn-light:active,
body#seafarerprofile-body .btn-light:not(:disabled):not(.disabled):active,
body#seafarerprofile-body .btn-light.disabled,
body#seafarerprofile-body .btn-light:disabled {
  background-color: #fff !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-navy) !important;
  box-shadow: none !important;
}

body#seafarerprofile-body .btn-light:hover,
body#seafarerprofile-body a.btn-light:hover {
  background-color: #f3f5f8 !important;
}

body#seafarerprofile-body .btn-danger,
body#seafarerprofile-body a.btn-danger,
body#seafarerprofile-body .btn-danger:hover,
body#seafarerprofile-body .btn-danger:focus,
body#seafarerprofile-body .btn-danger:active,
body#seafarerprofile-body .btn-danger:not(:disabled):not(.disabled):active,
body#seafarerprofile-body .btn-danger.disabled,
body#seafarerprofile-body .btn-danger:disabled {
  background-color: #fff !important;
  color: #b91c1c !important;
  border: 1px solid #f3c7c7 !important;
  box-shadow: none !important;
}

body#seafarerprofile-body .btn-danger:hover,
body#seafarerprofile-body a.btn-danger:hover {
  background-color: #fef2f2 !important;
}

body#seafarerprofile-body .btn-outline-primary,
body#seafarerprofile-body .btn-outline-secondary,
body#seafarerprofile-body .btn-outline-success,
body#seafarerprofile-body .btn-outline-light {
  background-color: #fff !important;
  color: var(--sf-navy) !important;
  border-color: var(--sf-line) !important;
  box-shadow: none !important;
}

body#seafarerprofile-body form .btn-group-container .btn-group {
  display: inline-flex !important;
  gap: 8px !important;
}

body#seafarerprofile-body form .btn-group-container .btn-group > .btn,
body#seafarerprofile-body form .btn-group-container .btn-group > label.btn {
  margin-left: 0 !important;
  border-radius: 8px !important;
}

body#seafarerprofile-body form .btn-group label,
body#seafarerprofile-body form .btn-group-container .btn-group label {
  border-color: var(--sf-line) !important;
  color: var(--sf-navy);
}

body#seafarerprofile-body form .btn-group label.active,
body#seafarerprofile-body form .btn-group-container .btn-group label.active {
  background-color: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  color: #fff !important;
}

body#seafarerprofile-body form .btn-group-container .btn-group.is-valid,
body#seafarerprofile-body form .btn-group.is-valid {
  border: 1px solid #a7f3d0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body#seafarerprofile-body form .btn-group-container .btn-group.is-invalid,
body#seafarerprofile-body form .btn-group.is-invalid {
  border: 1px solid #f3c7c7 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body#seafarerprofile-body .form-btn-container .btn,
body#seafarerprofile-body .other-btn-container .btn {
  margin: 8px 8px 0 0 !important;
}

/* A button row that is the whole card (Back to homepage) inherits the
   section's 16px top padding and no side inset. Keep a small top gap and
   the same 14px side inset as form fields. */
body#seafarerprofile-body main#content .row.py-3:has(> .col-12 > .form-btn-container:only-child) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body#seafarerprofile-body main#content .row.py-3 > .col-12 > .form-btn-container,
body#seafarerprofile-body #live-job-calls > .form-btn-container,
body#seafarerprofile-body #live-job-calls__content > .form-btn-container {
  margin-top: 0 !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

body#seafarerprofile-body main#content .row.py-3 > .col-12 > .form-btn-container .btn,
body#seafarerprofile-body #live-job-calls > .form-btn-container .btn,
body#seafarerprofile-body #live-job-calls__content > .form-btn-container .btn {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

body#seafarerprofile-body #live-job-calls > .row > .col-12 > .alert {
  margin-bottom: 8px !important;
}

body#seafarerprofile-body .discharge-book-form-group > .discharge_books_actions,
body#seafarerprofile-body .report-in-scan-book-form-group > .report-in-scans_actions {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

body#seafarerprofile-body .report-in-scan-book-form-group > .report-in-scans_actions,
body#seafarerprofile-body .report-in-scan-book-form-group > .form-btn-container,
body#seafarerprofile-body .discharge-book-form-group > .discharge_books_actions,
body#seafarerprofile-body .discharge-book-form-group > .form-btn-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#seafarerprofile-body .report-in-scan-book-form-group .report-in-scans_actions .btn,
body#seafarerprofile-body .report-in-scan-book-form-group .form-btn-container .btn,
body#seafarerprofile-body .discharge-book-form-group .discharge_books_actions .btn,
body#seafarerprofile-body .discharge-book-form-group .form-btn-container .btn {
  margin: 0 !important;
}

body#seafarerprofile-body .other-btn-container {
  margin-top: 8px !important;
}

body#seafarerprofile-body .current-certificates {
  margin: 0 !important;
  padding: 0 14px 8px !important;
}

/* Tables, including .table-page tight padding and .thead-light */
body#seafarerprofile-body .table {
  margin-bottom: 0 !important;
}

body#seafarerprofile-body .table thead th,
body#seafarerprofile-body .table .thead-light th,
body#seafarerprofile-body .table-page .table th,
body#seafarerprofile-body .table-page .table td {
  font-weight: 500;
  font-size: 13px;
  color: var(--sf-muted);
  background-color: #fff !important;
  border-top: 0 !important;
  padding: 4px 14px !important;
  line-height: 1.3 !important;
}

body#seafarerprofile-body .table tbody td,
body#seafarerprofile-body .table-page .table tbody td {
  color: var(--sf-navy);
  background-color: #fff;
  padding: 10px 14px !important;
  vertical-align: middle;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sf-line) !important;
}

body#seafarerprofile-body .table td a,
body#seafarerprofile-body .table .link-col a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px;
  color: var(--sf-primary) !important;
  text-decoration: none !important;
}

body#seafarerprofile-body .table .link-col .magnifier {
  color: var(--sf-muted);
  font-size: 12px;
  margin-right: 0 !important;
}

body#seafarerprofile-body .sf-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #3d4a5c;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body#seafarerprofile-body .sf-pill.sf-pill-bad {
  background: #fef2f2;
  color: #b91c1c;
}

body#seafarerprofile-body .table tbody tr:hover td {
  background-color: #f7f8fa !important;
}

body#seafarerprofile-body .invalided,
body#seafarerprofile-body .invalided td {
  background-color: #fef2f2 !important;
}

/* Badges from DateComponent (.badge-pill.badge-success and friends) */
body#seafarerprofile-body .badge-success {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
}

body#seafarerprofile-body .badge-warning {
  background-color: #fffbeb !important;
  color: #b45309 !important;
}

body#seafarerprofile-body .badge-danger {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

body#seafarerprofile-body .badge-primary,
body#seafarerprofile-body .badge-info {
  background-color: var(--sf-hiring) !important;
  color: var(--sf-hiring-ink) !important;
}

/* Forms: labels, inputs, read-only cards, file controls */
body#seafarerprofile-body label,
body#seafarerprofile-body .col-form-label,
body#seafarerprofile-body .form-group > label {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #3d4a5c !important;
}

body#seafarerprofile-body .form-control:not(.custom-file),
body#seafarerprofile-body .custom-select,
body#seafarerprofile-body select.form-control,
body#seafarerprofile-body form .input-group input:not(.custom-file-input),
body#seafarerprofile-body form .input-group select,
body#seafarerprofile-body form .input-group textarea {
  border-radius: 8px !important;
  border-color: var(--sf-line) !important;
  min-height: 40px;
  color: var(--sf-navy) !important;
  background-color: #fff;
  max-width: 550px !important;
}

body#seafarerprofile-body form .form-group.date > .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  max-width: 550px !important;
  width: 100% !important;
}

body#seafarerprofile-body form .input-group select.date {
  float: none !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
}

body#seafarerprofile-body .form-control:focus,
body#seafarerprofile-body .custom-select:focus {
  border-color: var(--sf-primary) !important;
  outline: 2px solid rgba(31, 113, 231, 0.25);
  outline-offset: 1px;
  box-shadow: none !important;
}

body#seafarerprofile-body form .input-group .form-card {
  background-color: #f3f4f6 !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 8px !important;
  color: #3d4a5c !important;
  max-width: 550px !important;
}

/* Read-only files (Shared File Details and the other detail cards) use the
   same 550px field as the text values, with Download inside the control. */
body#seafarerprofile-body form .form-group.file > .input-group,
body#seafarerprofile-body form .read-only-input-group,
body#seafarerprofile-body form .read-only-input-group > .input-group {
  display: block !important;
  max-width: 550px !important;
  width: 100% !important;
}

body#seafarerprofile-body form .read-only-input-group {
  position: static !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#seafarerprofile-body form .read-only-input-group .form-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 4px 0 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body#seafarerprofile-body form .read-only-input-group .form-card .btn-download {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 32px !important;
  margin: 0 0 0 auto !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  line-height: 32px !important;
}

body#seafarerprofile-body form .read-only-input-group .form-card .btn-content {
  position: static !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

body#seafarerprofile-body .mobile_scan_file .input-group,
body#seafarerprofile-body .mobile_document_file .input-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
}

body#seafarerprofile-body .mobile_scan_file .custom-file-container,
body#seafarerprofile-body .mobile_document_file .custom-file-container {
  flex: 1 1 auto !important;
  max-width: 550px !important;
  width: 100% !important;
}

body#seafarerprofile-body .mobile_scan_file .custom-file.form-control,
body#seafarerprofile-body .mobile_document_file .custom-file.form-control,
body#seafarerprofile-body .custom-file.form-control {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

body#seafarerprofile-body .mobile_scan_file label.custom-file-label,
body#seafarerprofile-body .mobile_document_file label.custom-file-label {
  position: relative !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 4px 0 12px !important;
  background: transparent !important;
}

body#seafarerprofile-body .mobile_scan_file label.custom-file-label .label-text,
body#seafarerprofile-body .mobile_document_file label.custom-file-label .label-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 12px 0 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body#seafarerprofile-body .mobile_scan_file label.custom-file-label div.upload-btn,
body#seafarerprofile-body .mobile_document_file label.custom-file-label div.upload-btn {
  position: static !important;
  top: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background-color: var(--sf-primary) !important;
  color: #fff !important;
  border-radius: 8px;
}

body#seafarerprofile-body .custom-file-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 16px;
}

body#seafarerprofile-body .custom-file-container > .custom-file {
  flex: 1 1 100% !important;
}

body#seafarerprofile-body .view-attachment-container {
  order: 2;
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
}

body#seafarerprofile-body .remove-file-container {
  order: 3;
  float: none !important;
  position: static !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}

body#seafarerprofile-body .remove-file-container .remove-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
}

body#seafarerprofile-body .remove-file-container .remove-file-label {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center;
  height: 32px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #f3c7c7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #b91c1c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

body#seafarerprofile-body .mobile_scan_file .form-text,
body#seafarerprofile-body .mobile_document_file .form-text,
body#seafarerprofile-body .mobile_scan_file .input-group > .form-text,
body#seafarerprofile-body .mobile_document_file .input-group > small {
  flex: 1 1 100% !important;
  display: block !important;
  max-width: 550px !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  position: static !important;
}

body#seafarerprofile-body .select2-container .select2-selection--single,
body#seafarerprofile-body .select2-container .select2-selection--multiple {
  border-color: var(--sf-line) !important;
  border-radius: 8px !important;
  min-height: 40px;
}

body#seafarerprofile-body .login-form > .col-12 > form.simple_form {
  padding-top: 14px !important;
}

body#seafarerprofile-body .login-form form > .login-links {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-top: 12px !important;
}

body#seafarerprofile-body .login-form .login-link {
  margin-top: 8px !important;
}

body#seafarerprofile-body .login-form .login-link:first-child {
  margin-top: 0 !important;
}

body#seafarerprofile-body .login-form .custom-control {
  display: flex !important;
  align-items: center !important;
  min-height: 1.5rem !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-left: calc(14px + 1.5rem) !important;
}

body#seafarerprofile-body .login-form .custom-control-label {
  position: relative !important;
  margin-bottom: 0 !important;
  line-height: 1.5rem !important;
}

body#seafarerprofile-body .login-form .custom-control-label::before,
body#seafarerprofile-body .login-form .custom-control-label::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body#seafarerprofile-body .login-form form > .form-btn-container {
  padding-top: 4px;
}

body#seafarerprofile-body #edit-mobile-password .form-group.seafarer_user_password {
  margin-bottom: 8px !important;
}

body#seafarerprofile-body form .form-group,
body#seafarerprofile-body form .form-group.read-only-group,
body#seafarerprofile-body form .form-btn-container,
body#seafarerprofile-body form .other-btn-container {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* The file value is nested in a second .form-group, which was picking up
   another 14px and shifting it right of the other fields. */
body#seafarerprofile-body form .form-group.read-only-input-group,
body#seafarerprofile-body form .read-only-input-group > .input-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#seafarerprofile-body .discharge-book-form-group > .form-group,
body#seafarerprofile-body .report-in-scan-book-form-group > .form-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#seafarerprofile-body form .read-only-group .input-group,
body#seafarerprofile-body form .read-only-group .form-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 550px !important;
}

body#seafarerprofile-body .form-btn-container .btn {
  margin-top: 8px;
}

/* Upload dialog and apply modal */
body#seafarerprofile-body #loading-modal .modal-content,
body#seafarerprofile-body #applicationModal .modal-content {
  border: 1px solid var(--sf-line) !important;
  border-radius: 10px !important;
}

body#seafarerprofile-body #loading-modal .modal-header,
body#seafarerprofile-body #applicationModal .modal-header {
  background: var(--sf-tint) !important;
  color: var(--sf-ink) !important;
  border-bottom: 1px solid var(--sf-line) !important;
}

/* Live job call cards and countdown (job-calls.scss, countdown.scss) */
body#seafarerprofile-body #edit-documents .card.mb-3 {
  border: 1px solid var(--sf-line) !important;
  border-left: 3px solid #c5d0dc !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: #fff !important;
  margin: 12px 14px 10px !important;
}

body#seafarerprofile-body #edit-documents .card.mb-3 > .card-body {
  padding: 0 !important;
}

body#seafarerprofile-body #edit-documents .card.mb-3 > .card-body > .d-flex {
  align-items: center !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--sf-line);
  margin: 0 !important;
  padding: 6px 12px !important;
}

body#seafarerprofile-body #edit-documents .card.mb-3 .card-title {
  color: var(--sf-navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  margin: 0 !important;
}

body#seafarerprofile-body #edit-documents .card.mb-3 .collapse,
body#seafarerprofile-body #edit-documents .card.mb-3 .collapsing {
  padding: 12px 14px 4px !important;
}

body#seafarerprofile-body #job-calls-list .card {
  border: 1px solid var(--sf-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

body#seafarerprofile-body #job-calls-list .card .card-header,
body#seafarerprofile-body #job-calls-list .card .card-title {
  background: var(--sf-tint) !important;
  color: var(--sf-ink) !important;
  border-bottom: 1px solid var(--sf-line);
}

body#seafarerprofile-body .fixed-bottom_countdown {
  background: var(--sf-navy) !important;
  color: #fff !important;
}

body#seafarerprofile-body .countdown__text {
  color: #fff;
}

/* Home menu: home.scss sets #home #content to 100vh and list styles. */
body#seafarerprofile-body #home {
  display: block !important;
}

body#seafarerprofile-body #home #content {
  height: auto !important;
  width: auto !important;
  max-width: none;
}

body#seafarerprofile-body #home #popover-desktop-menu,
body#seafarerprofile-body #home #popover-mobile-menu {
  display: none !important;
}

body#seafarerprofile-body #home ul.navbar-nav {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex-direction: unset !important;
}

body#seafarerprofile-body #home ul.navbar-nav > li {
  background: #fff !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 0 6px !important;
  width: 100% !important;
}

body#seafarerprofile-body #home ul.navbar-nav > li > h2 {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  background: var(--sf-profile) !important;
  color: var(--sf-profile-ink) !important;
}

body#seafarerprofile-body #home ul.navbar-nav > li:nth-of-type(2) > h2 {
  background: var(--sf-hiring) !important;
  color: var(--sf-hiring-ink) !important;
}

body#seafarerprofile-body #home ul.navbar-nav > li:nth-of-type(3) > h2 {
  background: var(--sf-comms) !important;
  color: var(--sf-comms-ink) !important;
}

body#seafarerprofile-body #home ul.navbar-nav > li > h2::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.75' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M5 19c1.4-3 3.8-4.5 7-4.5S17.6 16 19 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

body#seafarerprofile-body #home ul.navbar-nav > li:nth-of-type(2) > h2::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.75' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16M6 20V8l6-4 6 4v12M10 20v-5h4v5'/%3E%3C/svg%3E");
}

body#seafarerprofile-body #home ul.navbar-nav > li:nth-of-type(3) > h2::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.75' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h14v9H8l-3 3z'/%3E%3C/svg%3E");
}

body#seafarerprofile-body #home ul.navbar-nav > li > ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body#seafarerprofile-body #home h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

body#seafarerprofile-body #home h3 a {
  display: block;
  padding: 6px 12px;
  color: var(--sf-navy) !important;
  font-weight: 400;
}

body#seafarerprofile-body #home h3 a:hover {
  background: #f3f5f8;
  font-weight: 500;
  text-decoration: none !important;
}

body#seafarerprofile-body .pagination .page-link {
  color: var(--sf-primary) !important;
  border-color: var(--sf-line) !important;
  background: #fff !important;
}

body#seafarerprofile-body .pagination .page-item.active .page-link {
  background: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  color: #fff !important;
}

@media (min-width: 768px) {
  body#seafarerprofile-body #home ul.navbar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}