/* The dark skin names Open Sans in 64 rules, and the Open Sans Webix ships has
   no Czech letters (č ď ě ň ř š ť ů ž). These faces carry the skin's
   descriptors and come after it, and of faces alike the browser tries the last
   declared first: every Latin letter is Inter's, the skin's own Open Sans is
   never fetched. The ranges are fontsource's for its latin and latin-ext files. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../vendor/inter/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../vendor/inter/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../vendor/inter/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../vendor/inter/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FixBooking's palette (fixbooking-web, :root), so that Bosun reads as its
   sibling. The dark skin names its colours rule by rule, without variables:
   what follows repaints only the views Bosun uses, each with a selector at
   least as specific as the skin's. */
:root {
  --ocean-100: #eef5f9;
  --ocean-200: #d3e0e9;
  --ocean-300: #a6bfd0;
  --ocean-400: #7d9bb1;
  --ocean-450: #4a7591;
  --ocean-500: #2d5670;
  --ocean-600: #1c3b54;
  --ocean-700: #12293c;
  --ocean-800: #0a1a28;
  --ocean-850: #071420;
  --ocean-900: #01070e;
  --flare: #d37952;
  --flare-hover: #e2926d;
  --flare-light: #f0a271;
  --on-flare: #190803;
  --teal: #1f6a7c;
  --teal-border: #2f8ca3;
  --teal-bright: #49a9c0;
  --teal-tint: #184659;
  --ok: #8ed3a4;
  --warn: #e3c85f;
  --danger: #ee7d98;
  --hairline: rgba(238, 245, 249, 0.07);
  --highlight: rgba(238, 245, 249, 0.05);
  --row-hover: #0f2436;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* The page has the header's colour, which Safari gives its own toolbar
   (index.html names it for the browsers that read theme-color); the stage
   under the card keeps its darker one. fixbooking-web's map grid shows
   behind the login on its own, the start's logo stands on the plain colour. */
body {
  background-color: var(--ocean-850);
}
body:has(> .bosun_login) {
  background-image: linear-gradient(rgba(106, 139, 163, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 139, 163, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.webix_view {
  background-color: var(--ocean-800);
  border-color: var(--ocean-600);
  color: var(--ocean-100);
}
.webix_view.webix_form,
.webix_view .webix_section > .webix_template {
  background-color: var(--ocean-800);
}
.webix_view ::-webkit-scrollbar,
.webix_view::-webkit-scrollbar,
.webix_view ::-webkit-scrollbar-corner,
.webix_view::-webkit-scrollbar-corner,
.webix_view ::-webkit-scrollbar-track-piece,
.webix_view::-webkit-scrollbar-track-piece {
  background: var(--ocean-800);
}
.webix_view ::-webkit-scrollbar-thumb,
.webix_view::-webkit-scrollbar-thumb {
  background: var(--ocean-600);
  border: 2px solid var(--ocean-800);
  border-radius: 5px;
}
.webix_view ::-webkit-scrollbar-button,
.webix_view::-webkit-scrollbar-button {
  display: none;
}

/* Loading. The page shows the logo and a running bar while Bosun starts
   (index.html). The frame comes up behind it unseen and shows (app.js) when
   the first screen's rows are in and the bar has run across at least once;
   the login takes the bar's place at once. A grid waiting for its rows runs
   the bar under its header (format.js), a window waiting for its detail
   covers its body with a spinner. */
.bosun_boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
body:not(.bosun_shown) > :not(.bosun_boot):not(.bosun_login):not(.webix_message_area) {
  opacity: 0;
}
body:has(> .bosun_login) > .bosun_boot {
  display: none;
}
.bosun_shown > .bosun_boot {
  animation: bosun_fade 0.3s ease-out forwards;
  pointer-events: none;
}
@keyframes bosun_fade {
  to {
    opacity: 0;
  }
}
.bosun_reveal {
  animation: bosun_reveal 0.5s ease-in-out both;
}
@keyframes bosun_reveal {
  from {
    opacity: 0;
  }
}
.bosun_boot_logo {
  height: 30px;
}
.bosun_boot_whistle {
  height: 22px;
}
.bosun_boot_bar {
  position: relative;
  width: 120px;
  height: 2px;
  margin-top: 18px;
  border-radius: 1px;
  background: var(--ocean-700);
  overflow: hidden;
}
.bosun_boot_bar::after,
.bosun_grid_bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  border-radius: 1px;
  background: var(--teal-bright);
  animation: bosun_slide 1.2s ease-in-out infinite;
}
@keyframes bosun_slide {
  from {
    left: -35%;
  }
  to {
    left: 100%;
  }
}
.bosun_grid_bar {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.bosun_grid_bar::after {
  animation-duration: 1.6s;
}
.bosun_grid_bar.bosun_on {
  display: block;
}
.bosun_spinner,
.bosun_field_loading .webix_placeholder::before {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--ocean-600);
  border-top-color: var(--teal-bright);
  border-radius: 50%;
  animation: bosun_spin 0.8s linear infinite;
}
@keyframes bosun_spin {
  to {
    transform: rotate(360deg);
  }
}
.bosun_win_loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ocean-800);
  color: var(--ocean-400);
  font-size: 13px;
}
.bosun_field_loading .webix_placeholder {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.bosun_field_loading .webix_placeholder::before {
  content: "";
  width: 13px;
  height: 13px;
}

/* The frame: header, menu, the screen as a card. */
.webix_view.bosun_side {
  background: var(--ocean-850);
}
.bosun_side .webix_view,
.bosun_header .webix_view {
  background: transparent;
}
.webix_view.webix_toolbar.bosun_header {
  position: relative;
  z-index: 2;
  background: var(--ocean-850);
  box-shadow: 0 1px 0 var(--ocean-600), 0 12px 26px -14px rgba(0, 0, 0, 0.95);
}
/* The menu's line starts under the header's 56 px, in the logo's cell the
   whistle makes taller than the header. */
.webix_view.bosun_logo_cell {
  background: linear-gradient(var(--ocean-600), var(--ocean-600)) no-repeat right 0 top 56px / 1px calc(100% - 56px);
}
.bosun_logo_cell .webix_template {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  padding: 0;
}
.bosun_logo {
  display: block;
  height: 22px;
}
.bosun_whistle {
  display: block;
  height: 15px;
}
.bosun_user .webix_template {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0;
}
.bosun_avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal-bright);
  font-size: 14px;
  font-weight: 600;
}
.bosun_who {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.15;
}
.bosun_who b {
  font-weight: 600;
}
.bosun_who small {
  color: var(--ocean-400);
  font-size: 11px;
}
.webix_view .webix_icon_button {
  border-radius: 6px;
}
.webix_view .webix_icon_button .webix_icon,
.webix_view .webix_icon_button:focus .webix_icon,
.webix_view .webix_icon_button:active .webix_icon {
  color: var(--ocean-300);
}
.webix_view .webix_icon_button:hover {
  background: var(--highlight);
}
.webix_view .webix_icon_button:hover .webix_icon {
  color: var(--ocean-100);
}

/* The menu's line runs from under the header to the page's foot, never
   beside the logo. */
.webix_view.webix_sidebar.bosun_menu,
.webix_view.bosun_idle_cell {
  background-color: transparent;
  box-shadow: inset -1px 0 0 var(--ocean-600);
}
.webix_sidebar.bosun_menu .webix_scroll_cont > .webix_tree_leaves {
  padding-top: 10px;
}
.webix_sidebar.bosun_menu .webix_tree_item,
.webix_sidebar.bosun_menu .webix_tree_branch_1 > .webix_tree_item {
  display: flex;
  align-items: center;
  height: 44px;
  line-height: 44px;
  padding: 0 14px 0 0;
  color: var(--ocean-300);
  font-size: 14px;
  font-weight: 500;
}
.webix_sidebar.bosun_menu .webix_sidebar_icon,
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected .webix_sidebar_icon {
  width: 52px;
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: var(--ocean-400);
}
.webix_sidebar.bosun_menu .webix_tree_item:hover {
  background-color: rgba(238, 245, 249, 0.03);
  color: var(--ocean-100);
}
.webix_sidebar.bosun_menu .webix_tree_item:hover .webix_sidebar_icon {
  color: var(--ocean-300);
}
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected,
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected span {
  background-color: rgba(238, 245, 249, 0.06);
  color: var(--ocean-100);
}
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected span {
  background-color: transparent;
}
.webix_sidebar.bosun_menu.webix_sidebar_left .webix_tree_item.webix_selected {
  box-shadow: inset 3px 0 var(--flare);
}
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected span.webix_sidebar_icon {
  color: var(--flare);
}
.webix_sidebar.bosun_menu .webix_tree_item span.bosun_menu_count {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ocean-600);
  color: var(--ocean-200);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.webix_sidebar.bosun_menu .webix_tree_item.webix_selected span.bosun_menu_count {
  background: rgba(211, 121, 82, 0.18);
  color: var(--flare-light);
}
.webix_sidebar.bosun_menu .webix_tree_item span.bosun_menu_count.bosun_menu_alert {
  background: var(--danger);
  color: var(--on-flare);
}

.bosun_idle_cell .webix_template {
  padding: 0;
}
.bosun_idle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 17px 0 16px;
  color: var(--ocean-300);
  font-size: 12px;
}
.bosun_idle_text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.bosun_idle_text .fas {
  font-size: 11px;
  color: var(--ocean-400);
}
.bosun_idle_track {
  height: 4px;
  border-radius: 2px;
  background: rgba(238, 245, 249, 0.08);
  overflow: hidden;
}
.bosun_idle_track div {
  height: 100%;
  border-radius: 2px;
  background: var(--teal-bright);
}
.bosun_idle_soon .bosun_idle_text,
.bosun_idle_soon .bosun_idle_text .fas {
  color: var(--warn);
}
.bosun_idle_soon .bosun_idle_track div {
  background: var(--warn);
}

.webix_view.bosun_stage {
  background: var(--ocean-900);
}
.webix_view.bosun_card {
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--ocean-600), 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

/* A screen's bar: its title, then its filters, labels above the fields. */
.webix_view.webix_toolbar.bosun_filters {
  background: var(--ocean-800);
  box-shadow: inset 0 -1px 0 var(--ocean-600);
}
.bosun_title .webix_template {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0;
  white-space: nowrap;
}
.bosun_title_icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ocean-700);
  box-shadow: inset 0 0 0 1px var(--ocean-600);
  color: var(--ocean-300);
  font-size: 16px;
}
.bosun_title .bosun_title_icon {
  background: rgba(211, 121, 82, 0.14);
  box-shadow: inset 0 0 0 1px rgba(211, 121, 82, 0.25);
  color: var(--flare);
}
/* The words hang from the icon's top edge, so the count coming under them
   does not move the name. */
.bosun_title .webix_template > div {
  height: 38px;
}
.bosun_title h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bosun_title p {
  margin: 3px 0 0;
  color: var(--ocean-400);
  font-size: 12px;
}

.webix_view .webix_inp_top_label,
.webix_view .webix_section > .webix_template {
  color: var(--ocean-400);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.webix_view .webix_inp_label,
.webix_view .webix_label_right {
  color: var(--ocean-300);
  font-size: 13px;
  font-weight: 500;
}
/* A form's section reads as the detail's headings: its title over a line,
   the first one as high in the decision's column as the detail's first. */
.webix_view .webix_section:before {
  display: none;
}
.webix_view .webix_section > .webix_template {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  display: block;
  height: auto;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  line-height: normal;
}
.webix_view .webix_el_box input,
.webix_view .webix_inp_static,
.webix_view .webix_el_textarea textarea {
  background-color: var(--ocean-900);
  border: 1px solid var(--ocean-450);
  border-radius: 6px;
  color: var(--ocean-100);
  font-size: 13px;
}
.webix_view .webix_el_box input:hover,
.webix_view .webix_inp_static:hover,
.webix_view .webix_el_textarea textarea:hover {
  border-color: var(--ocean-400);
}
/* A select takes the ring from the keyboard only (app.js): one the window
   focuses after a double click stays as it was, not violet as the skin
   draws it. */
.webix_view.webix_el_richselect .webix_inp_static:focus {
  border-color: var(--ocean-450);
}
/* A field in focus keeps its 1 px border, only teal. */
.webix_view .webix_el_box input:focus,
.bosun_keys .webix_view .webix_inp_static:focus,
.webix_view .webix_el_textarea textarea:focus {
  border-color: var(--teal-bright);
  box-shadow: none;
}
/* The skin takes every outline away and draws focus as it draws hover: a
   keyboard user sees an outline, a mouse user only the hover. */
.webix_view :focus-visible:not(input):not(textarea):not(.webix_inp_static),
.webix_window :focus-visible:not(input):not(textarea):not(.webix_inp_static) {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}
.webix_view .webix_input_icon {
  color: var(--ocean-400);
}
.webix_view ::placeholder {
  color: var(--ocean-400);
}

.webix_view .webix_segment_0,
.webix_view .webix_segment_1,
.webix_view .webix_segment_N {
  background-color: var(--ocean-900);
  border: 1px solid var(--ocean-450);
  border-right-width: 0;
  color: var(--ocean-300);
  font-size: 13px;
  font-weight: 500;
}
.webix_view .webix_segment_N {
  border-right-width: 1px;
}
.webix_view .webix_segment_0,
.webix_view .webix_segment_1,
.webix_view .webix_segment_N,
.bosun_switch_words {
  font-family: "Open Sans", sans-serif;
}
.bosun_switch_words {
  font-size: 13px;
  font-weight: 500;
}
.webix_view .webix_segment_0 .fas,
.webix_view .webix_segment_1 .fas,
.webix_view .webix_segment_N .fas {
  margin-right: 7px;
  color: var(--ocean-400);
  font-size: 12px;
}
.webix_view .webix_selected .fas {
  color: var(--ocean-100);
}
.webix_view .webix_segment_0 {
  border-radius: 6px 0 0 6px;
}
.webix_view .webix_segment_N {
  border-radius: 0 6px 6px 0;
}
.webix_view .webix_segment_0:hover,
.webix_view .webix_segment_1:hover,
.webix_view .webix_segment_N:hover,
.webix_view .webix_segment_0:focus,
.webix_view .webix_segment_1:focus,
.webix_view .webix_segment_N:focus {
  background-color: var(--ocean-800);
  color: var(--ocean-100);
}
.webix_view .webix_segment_0.webix_selected,
.webix_view .webix_segment_1.webix_selected,
.webix_view .webix_segment_N.webix_selected,
.webix_view .webix_segment_0.webix_selected:hover,
.webix_view .webix_segment_1.webix_selected:hover,
.webix_view .webix_segment_N.webix_selected:hover,
.webix_view .webix_segment_0.webix_selected:focus,
.webix_view .webix_segment_1.webix_selected:focus,
.webix_view .webix_segment_N.webix_selected:focus {
  background-color: var(--teal-tint);
  border-color: var(--teal-border);
  color: var(--ocean-100);
}

.webix_view .webix_button {
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.webix_view.webix_primary .webix_button,
.webix_view.webix_primary .webix_button:active {
  background: var(--flare);
  color: var(--on-flare);
}
.webix_view.webix_primary .webix_button:hover,
.webix_view.webix_primary .webix_button:focus {
  background: var(--flare-hover);
}
.webix_view.webix_secondary .webix_button,
.webix_view.webix_secondary .webix_button:active {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ocean-450);
  color: var(--ocean-100);
}
.webix_view.webix_secondary .webix_button:hover,
.webix_view.webix_secondary .webix_button:focus {
  background: var(--highlight);
  box-shadow: inset 0 0 0 1px var(--ocean-300);
}
.webix_view .webix_switch_box.webix_switch_on {
  background-color: var(--teal);
  border-color: var(--teal-border);
}
.webix_view .webix_checkbox_1 .webix_custom_checkbox,
.webix_view .webix_radio_1 .webix_custom_radio {
  color: var(--teal-bright);
}

/* Grids: column lines, a sortable header, a teal selection. */
.webix_view.webix_dtable {
  background: var(--ocean-800);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.webix_dtable .webix_ss_header,
.webix_dtable .webix_hcolumn,
.webix_dtable .webix_hs_center,
.webix_dtable .webix_hs_left,
.webix_dtable .webix_hs_right,
.webix_dtable .webix_ss_vscroll_header {
  background: var(--ocean-850);
  border-color: var(--ocean-600);
}
.webix_dtable .webix_ss_header .webix_hcell {
  border-color: var(--ocean-500);
  color: var(--ocean-400);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* Centred, with room for Provider in its 80 px. */
  padding: 0 4px;
  text-align: center;
  text-transform: uppercase;
}
/* A sorted column's words centre in the room its marker leaves. */
.webix_dtable .webix_ss_header .webix_hcell:has(.webix_ss_sort_asc),
.webix_dtable .webix_ss_header .webix_hcell:has(.webix_ss_sort_desc) {
  padding-right: 16px;
  color: var(--ocean-100);
}
.webix_dtable .webix_ss_header .webix_hcell:hover {
  color: var(--ocean-200);
}
.webix_dtable .webix_ss_sort_asc,
.webix_dtable .webix_ss_sort_desc {
  width: 14px;
  color: var(--teal-bright);
  font-size: 14px;
}
/* A cell cuts its overflow at its border, through its padding: a long text
   would run up to the column's line. The ellipsis ends it where the padding
   starts, in every grid, and the columns are as wide as a date or a kind. */
.webix_dtable .webix_column > div {
  text-overflow: ellipsis;
  border-color: var(--hairline);
  color: var(--ocean-200);
}
/* columnLines leaves the cells' right border transparent in this skin. */
.webix_view.webix_dtable .webix_ss_body .webix_column > div {
  border-right: 1px solid var(--hairline);
}
/* The last column keeps its text off the scrollbar beside it. */
.webix_view.webix_dtable .webix_column.webix_last > div {
  padding-right: 22px;
}
.webix_view.webix_dtable ::-webkit-scrollbar-thumb {
  border-width: 3px;
}
.webix_dtable .webix_column > div.bosun_row_quiet {
  color: var(--ocean-400);
}
.webix_view.webix_dtable .webix_column > div.bosun_row_hover {
  background: var(--row-hover);
}
.webix_view.webix_dtable .webix_column > div.webix_row_select,
.webix_view.webix_dtable .webix_column > div.webix_row_select:focus {
  background: var(--teal-tint);
  color: var(--ocean-100);
}
.webix_view.webix_dtable .webix_column.webix_first > div.bosun_row_failed {
  box-shadow: inset 3px 0 var(--danger);
}
.webix_view.webix_dtable .webix_select_mark > div.webix_row_select,
.webix_view.webix_dtable .webix_column.webix_first > div.webix_row_select {
  box-shadow: inset 2px 0 var(--teal-bright);
}
.webix_view.webix_dtable_focused .webix_column > div.webix_row_select {
  box-shadow: inset 0 1px 0 var(--teal-bright), inset 0 -1px 0 var(--teal-bright);
}
.webix_view.webix_dtable_focused .webix_column.webix_first > div.webix_row_select {
  box-shadow: inset 2px 0 var(--teal-bright), inset 0 1px 0 var(--teal-bright), inset 0 -1px 0 var(--teal-bright);
}
.webix_view.webix_dtable_focused .webix_column.webix_last > div.webix_row_select {
  box-shadow: inset -1px 0 var(--teal-bright), inset 0 1px 0 var(--teal-bright), inset 0 -1px 0 var(--teal-bright);
}
.webix_view .webix_row_select .bosun_muted {
  color: var(--ocean-300);
}
.webix_dtable .webix_resize_handle_x .webix_handle_content,
.webix_resize_marker {
  background-color: var(--teal-bright);
}
.bosun_number {
  text-align: right;
}
.bosun_center {
  text-align: center;
}

.webix_view.webix_pager {
  background: var(--ocean-850);
  box-shadow: inset 0 1px 0 var(--ocean-600);
}
.webix_view .webix_pager_item,
.webix_view .webix_pager_item_selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  min-width: 28px;
  margin: 0 2px;
  padding: 0 7px;
  line-height: 1;
  vertical-align: middle;
}
.webix_view .webix_pager_item .webix_icon {
  width: auto;
  height: auto;
  font-size: 15px;
  line-height: 1;
}
.webix_view .webix_pager_item {
  background-color: transparent;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--ocean-600);
  color: var(--ocean-300);
  font-size: 12px;
}
.webix_view .webix_pager_item:hover,
.webix_view .webix_pager_item:focus {
  background-color: var(--highlight);
  box-shadow: inset 0 0 0 1px var(--ocean-450);
  color: var(--ocean-100);
}
.webix_view .webix_pager_item_selected,
.webix_view .webix_pager_item_selected:hover,
.webix_view .webix_pager_item_selected:focus,
.webix_view .webix_pager_item_selected:active {
  background-color: var(--teal-tint);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--teal-border);
  color: var(--ocean-100);
  font-size: 12px;
  font-weight: 700;
}
.bosun_pager_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 4px;
}
.bosun_pager_total {
  color: var(--ocean-400);
  font-size: 12px;
}
.bosun_pager_total b {
  color: var(--ocean-200);
  font-weight: 600;
}

/* Windows: a head with the kind's icon, tabs, a foot with the buttons. */
.webix_view.webix_window {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ocean-600), inset 0 1px 0 rgba(238, 245, 249, 0.06), 0 40px 90px -10px rgba(0, 0, 0, 1),
    0 0 140px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.webix_view.webix_window .webix_win_head {
  border-bottom: 1px solid var(--ocean-600);
  background: var(--ocean-700);
}
.webix_win_head .webix_view {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.webix_modal,
div.webix_modal_cover {
  background: var(--ocean-900);
  opacity: 0.6;
}

/* webix.confirm, alert and prompt are one box: a small window, its title in
   the head's band, its words to the left, its buttons as a form's foot, the
   confirming one primary. */
div.webix_modal_box {
  width: 420px;
  border: 0;
  border-radius: 10px;
  background: var(--ocean-800);
  box-shadow: 0 0 0 1px var(--ocean-600), inset 0 1px 0 rgba(238, 245, 249, 0.06), 0 40px 90px -10px rgba(0, 0, 0, 1);
  text-align: left;
}
div.webix_modal_box .webix_popup_title {
  padding: 17px 20px 16px;
  border-bottom: 1px solid var(--ocean-600);
  background: var(--ocean-700);
  box-shadow: none;
  color: var(--ocean-100);
  font-size: 15px;
  line-height: 22px;
}
div.webix_modal_box .webix_popup_title + div.webix_popup_text,
div.webix_modal_box .webix_popup_text {
  padding: 18px 20px 0;
  box-shadow: none;
  color: var(--ocean-200);
  line-height: 1.55;
}
div.webix_modal_box .webix_popup_controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px 20px 20px;
}
div.webix_modal_box .webix_popup_button {
  min-width: 110px;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  border-radius: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ocean-450);
  color: var(--ocean-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
}
div.webix_modal_box .webix_popup_button:hover,
div.webix_modal_box .webix_popup_button:focus {
  background: var(--highlight);
  box-shadow: inset 0 0 0 1px var(--ocean-300);
}
div.webix_modal_box .webix_popup_button.confirm {
  background: var(--flare);
  box-shadow: none;
  color: var(--on-flare);
}
div.webix_modal_box .webix_popup_button.confirm:hover,
div.webix_modal_box .webix_popup_button.confirm:focus {
  background: var(--flare-hover);
}
.bosun_win_title .webix_template {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
}
.bosun_win_title .bosun_title_icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--ocean-800);
  font-size: 14px;
}
.bosun_win_title .bosun_sep {
  color: var(--ocean-450);
  font-weight: 400;
}
.bosun_win_title .bosun_sub {
  color: var(--ocean-300);
  font-weight: 500;
}
.webix_view .webix_item_tab {
  color: var(--ocean-300);
  font-size: 13px;
  font-weight: 500;
}
.webix_view .webix_item_tab:hover,
.webix_view .webix_item_tab.webix_selected {
  color: var(--ocean-100);
}
.webix_view .webix_item_tab.webix_selected:after,
.webix_view .webix_item_tab.webix_selected:focus:after {
  background-color: var(--teal-bright);
}
.webix_view .webix_item_tab .fas {
  margin-right: 7px;
  color: var(--ocean-400);
  font-size: 12px;
}
.webix_view .webix_item_tab.webix_selected .fas {
  color: var(--ocean-100);
}
.webix_view .webix_tab_filler {
  border-bottom: 1px solid var(--ocean-600);
}

/* The list of a richselect: a floating panel of rows without lines, the
   chosen one teal with a tick. It lies over its field with the same
   rounding, so no corner of the field shows under it. */
.webix_view.webix_popup {
  border-radius: 6px;
  background: var(--ocean-800);
  box-shadow: 0 0 0 1px var(--ocean-600), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.webix_popup .webix_view.webix_list {
  background: var(--ocean-800);
}
.webix_popup .webix_list::-webkit-scrollbar {
  width: 8px;
}
.webix_popup .webix_list::-webkit-scrollbar-thumb {
  border-width: 2px;
}
.webix_view .webix_list_item {
  border: 0;
  padding: 0 34px 0 12px;
  color: var(--ocean-200);
  font-size: 13px;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webix_view .webix_list_item:hover {
  background-color: var(--row-hover);
  color: var(--ocean-100);
}
.webix_view.webix_list .webix_list_item.webix_selected,
.webix_view .webix_list_item.webix_selected:focus {
  position: relative;
  background-color: var(--teal-tint);
  box-shadow: none;
  color: var(--ocean-100);
}
.webix_view.webix_list .webix_list_item.webix_selected:after {
  content: "\f00c";
  position: absolute;
  right: 12px;
  color: var(--teal-bright);
  font-family: "Font Awesome 7 Free";
  font-size: 11px;
  font-weight: 900;
}
/* A list to search lies over its field too: the search where the value was,
   in the field's colours, and the list under it. */
.bosun_search_popup .webix_view.bosun_search_field {
  background: var(--ocean-900);
}
.bosun_search_popup .bosun_search_field .webix_el_box {
  padding: 0;
}
.webix_view.bosun_search_field .webix_el_box input,
.webix_view.bosun_search_field .webix_el_box input:hover,
.webix_view.bosun_search_field .webix_el_box input:focus {
  padding-left: 36px;
  border: 0;
  border-bottom: 1px solid var(--ocean-600);
  border-radius: 0;
  background: var(--ocean-900);
  box-shadow: none;
}
.bosun_search_popup .webix_list .webix_scroll_cont:empty:after {
  content: "Nic nenalezeno";
  display: block;
  padding: 0 12px;
  color: var(--ocean-400);
  font-size: 13px;
  line-height: 32px;
}
/* Webix places the icon inline, on the right and a little high. */
.webix_view.bosun_search_field .webix_input_icon {
  display: flex;
  align-items: center;
  top: 0;
  left: 13px;
  right: auto !important;
  height: 100% !important;
  padding-top: 0 !important;
  color: var(--ocean-400);
  font-size: 12px;
}
.webix_view .webix_cal_body .webix_cal_select .webix_cal_day_inner,
.webix_view .webix_cal_body .webix_cal_select .webix_cal_day_inner:hover,
.webix_view .webix_cal_body .webix_cal_block.webix_selected span {
  background-color: var(--teal-tint);
  color: var(--ocean-100);
}
/* Messages are panels like the lists, with the type's colour in the icon
   alone, and stand in the corner of the screen's card: 16 px under the
   header, 16 px from the page's edge. Webix places the area inline. */
div.webix_message_area {
  top: 72px !important;
  right: 16px;
  width: 300px;
}
div.webix_message,
div.webix_message.webix_info,
div.webix_message.webix_error,
div.webix_message.webix_success,
div.webix_message.webix_debug {
  margin: 0 0 8px;
  border: 0;
  border-radius: 8px;
  background-color: var(--ocean-800);
  box-shadow: 0 0 0 1px var(--ocean-600), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
  color: var(--ocean-100);
  font-size: 13px;
}
div.webix_message > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  line-height: 1.4;
}
div.webix_message > div::before {
  flex: none;
  margin-top: 1px;
  color: var(--teal-bright);
  content: "\f05a";
  font-family: "Font Awesome 7 Free";
  font-size: 13px;
  font-weight: 900;
}
div.webix_message.webix_success > div::before {
  color: var(--ok);
  content: "\f058";
}
div.webix_message.webix_error > div::before {
  color: var(--danger);
  content: "\f071";
}
div.webix_message.webix_debug > div::before {
  color: var(--warn);
  content: "\f06a";
}
/* Webix hides a message by folding it to no height and takes it away two
   seconds later; the outline and the gap would stay there till then. */
div.webix_message.hidden {
  margin-bottom: 0;
  box-shadow: none;
  opacity: 0;
}
div.webix_tooltip {
  padding: 6px 10px;
  border: 1px solid var(--ocean-600);
  border-radius: 6px;
  background-color: var(--ocean-700);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.9);
  color: var(--ocean-100);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

/* What the cells and the details show. */
.bosun_kind .fas {
  display: inline-block;
  width: 16px;
  margin-right: 9px;
  color: var(--ocean-400);
  font-size: 13px;
  text-align: center;
}
.webix_row_select .bosun_kind .fas {
  color: var(--ocean-100);
}
.bosun_cause b {
  color: var(--ocean-100);
  font-weight: 600;
}
.bosun_chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--ocean-500);
  border-radius: 4px;
  color: var(--ocean-300);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}
.bosun_chip_provider {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bosun_chip_operator {
  background: rgba(73, 169, 192, 0.08);
  border-color: rgba(73, 169, 192, 0.45);
  color: var(--teal-bright);
}
.bosun_chip_operations {
  background: rgba(227, 200, 95, 0.07);
  border-color: rgba(227, 200, 95, 0.4);
  color: var(--warn);
}
.bosun_status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
}
.bosun_status > .fas {
  width: 14px;
  font-size: 12px;
  text-align: center;
}
.bosun_center .bosun_status > .fas {
  font-size: 13px;
}
.bosun_status_open {
  color: var(--ocean-300);
}
.bosun_status_running {
  color: var(--warn);
}
.bosun_status_decided,
.bosun_status_completed {
  color: var(--ok);
}
.bosun_status_closed {
  color: var(--ocean-400);
}
.bosun_status_failed {
  color: var(--danger);
}
/* The bar keeps one length in every row, so the rows compare; the column
   leaves the number room up to 10 000. */
.bosun_impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bosun_impact_bar {
  flex: none;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(238, 245, 249, 0.08);
  overflow: hidden;
}
.bosun_impact_bar div {
  height: 100%;
  border-radius: 2px;
  background: var(--ocean-400);
}
.bosun_fig {
  margin-right: 8px;
  color: var(--ocean-400);
}
.bosun_fig b {
  margin-left: 3px;
  color: var(--ocean-100);
  font-weight: 600;
}
.bosun_muted,
.webix_view .bosun_muted {
  color: var(--ocean-400);
}
.bosun_error,
.webix_dtable .webix_column.bosun_error > div {
  color: var(--danger);
}
.bosun_note,
.bosun_overlay {
  color: var(--ocean-400);
}
/* Webix sizes a view's own element: padding there would push the views under
   it out of the layout, past the card's edge. Its template takes the padding,
   which an autoheight then measures. */
.bosun_note .webix_template {
  padding: 8px 16px;
}
.bosun_overlay {
  padding-top: 40px;
}

.bosun_detail .webix_template,
.bosun_run_summary .webix_template {
  padding: 4px 20px 20px;
}
.bosun_detail table,
.bosun_run_summary table {
  border-collapse: collapse;
}
/* Every section of a detail is a table of its own: a fixed width for its
   labels, the longest of them (Referenční skupina), lines the values up. */
.bosun_detail th,
.bosun_run_summary th {
  width: 132px;
  padding: 4px 20px 4px 0;
  color: var(--ocean-400);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.bosun_detail td,
.bosun_run_summary td {
  padding: 4px 16px 4px 0;
  vertical-align: top;
}
.bosun_detail table.bosun_table th {
  width: auto;
  border-bottom: 1px solid var(--ocean-600);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bosun_detail table.bosun_table td {
  border-bottom: 1px solid var(--hairline);
}
/* A row that starts with its label, as two places side by side: the label
   reads as those of the facts above, not as the head of a column. */
.bosun_detail table.bosun_table tr:has(> td) > th {
  border-bottom: 1px solid var(--hairline);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.bosun_detail h2,
.bosun_run_summary h2 {
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ocean-400);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bosun_detail p {
  margin: 4px 0;
}
.bosun_detail code,
.bosun_detail pre,
.bosun_run_summary pre {
  font-family: var(--mono);
  font-size: 12px;
}
.bosun_detail code {
  padding: 1px 5px;
  border: 1px solid var(--ocean-600);
  border-radius: 4px;
  background: var(--ocean-900);
  color: var(--ocean-200);
}
.bosun_detail pre,
.bosun_run_summary pre {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ocean-600);
  border-radius: 6px;
  background: var(--ocean-900);
  color: var(--ocean-200);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bosun_run_summary pre.bosun_error {
  border-color: rgba(238, 125, 152, 0.35);
  background: rgba(238, 125, 152, 0.05);
  color: var(--danger);
}
.bosun_detail a,
.bosun_run_summary a,
.bosun_screen a,
.webix_dtable a,
.bosun_form_note a {
  border-bottom: 1px solid var(--ocean-450);
  color: var(--ocean-100);
  text-decoration: none;
}
.bosun_detail a:hover,
.bosun_run_summary a:hover,
.bosun_screen a:hover,
.webix_dtable a:hover,
.bosun_form_note a:hover {
  border-bottom-color: var(--teal-bright);
  color: var(--teal-bright);
}

/* The task's summary opens its detail: its first line as high as the
   heading of the decision's column beside it. */
.bosun_detail .bosun_summary {
  margin: 20px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.bosun_summary_cause {
  margin-bottom: 8px;
  font-size: 14px;
}
.bosun_summary_facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  color: var(--ocean-400);
}
.bosun_fact b {
  color: var(--ocean-100);
  font-weight: 600;
}
.bosun_summary_facts code {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--ocean-500);
  border-radius: 4px;
  background: var(--ocean-900);
  color: var(--ocean-300);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}
.bosun_tip {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(73, 169, 192, 0.3);
  border-radius: 8px;
  background: rgba(73, 169, 192, 0.07);
  color: var(--ocean-200);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}
.bosun_tip > .fas {
  margin-top: 2px;
  color: var(--teal-bright);
}
.bosun_tip b {
  color: var(--ocean-100);
  font-weight: 600;
}
.bosun_tip .bosun_tip_title {
  display: block;
  margin-bottom: 3px;
  color: var(--ocean-100);
  font-weight: 600;
}
.bosun_tip p {
  margin: 0 0 6px;
}
.bosun_tip p:last-child {
  margin-bottom: 0;
}
.bosun_action .webix_template {
  padding: 0;
}

/* A row's actions are buttons, smaller and quieter than a form's: the grid's
   onClick finds them by their class. A link to elsewhere can wear them too. */
.webix_dtable .bosun_row_button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ocean-500);
  color: var(--ocean-200);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
}
.webix_dtable .bosun_row_button + .bosun_row_button {
  margin-left: 6px;
}
.webix_dtable .bosun_row_button:hover,
.webix_dtable .bosun_row_button:focus-visible {
  background: var(--highlight);
  box-shadow: inset 0 0 0 1px var(--ocean-300);
  color: var(--ocean-100);
}
.webix_dtable .bosun_row_button .fas {
  color: var(--ocean-400);
  font-size: 11px;
}
.webix_dtable .bosun_icon_button {
  justify-content: center;
  width: 30px;
  padding: 0;
}
.webix_dtable .bosun_icon_button .fas {
  font-size: 13px;
}

/* The form of a task's action, beside its detail: its shade alone sets it
   apart, without a line. */
.webix_view.webix_form.bosun_action {
  background: var(--ocean-850);
}
.bosun_action .webix_view {
  background-color: transparent;
}
.bosun_action .webix_view.webix_el_box input,
.bosun_action .webix_view .webix_inp_static {
  background-color: var(--ocean-900);
}
.bosun_form_note {
  color: var(--ocean-300);
  font-size: 13px;
  line-height: 1.4;
}
.bosun_form_note .webix_template {
  padding: 4px 0;
}

.bosun_screen .webix_template {
  padding: 24px;
}
.bosun_screen h1 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
}
.bosun_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--ocean-400);
  text-align: center;
}
.bosun_empty_icon {
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ocean-850);
  box-shadow: inset 0 0 0 1px var(--ocean-600);
  color: var(--ocean-300);
  font-size: 24px;
}
.bosun_empty h1 {
  margin: 0;
  color: var(--ocean-100);
  font-size: 16px;
  font-weight: 600;
}
.bosun_empty p {
  margin: 0;
  max-width: 420px;
}

.webix_view.webix_window.bosun_login {
  border-radius: 12px;
}
.bosun_login_brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
}
.bosun_login_logo {
  display: block;
  height: 30px;
}
.bosun_login_whistle {
  display: block;
  height: 22px;
}
.bosun_login_message .webix_template,
.bosun_login_foot .webix_template {
  padding: 0;
}
.bosun_login_alert {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 125, 152, 0.45);
  border-radius: 8px;
  background: rgba(238, 125, 152, 0.06);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}
.bosun_login_alert .fas {
  margin-top: 2px;
}
.bosun_login_foot .webix_template {
  color: var(--ocean-400);
  font-size: 12px;
  text-align: center;
}