* {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  padding: 0;
}

body {
  font-family: 'Assistant', sans-serif;
  background: #fff;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 2em 0;
  position: relative;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  width: 100%;
}

header {
  background:#222;
  color:#CCC;
}

.header-container {
  max-width: 1800px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

header h1 {
  display: contents;
}

header h1 span {
  font-size: 1.1em;
  flex-grow: 1;
  margin-left: 1em;
}

table[data-controller="table-row-click"] tbody tr, tbody[data-controller="table-points"] tr {
  cursor: pointer;
}

.pagination {
  text-align: center;
}

.raw-data {
  font-family: monospace;
  max-width: 1700px;
  min-height: 3em;
  overflow: auto;
  margin: 0 auto;
  display: block;
  text-align: center;
}

@media(max-width: 600px) {
  header h1 {
    display: flex;
    flex-direction: column;
    font-size: .8em;
    justify-content: center;
    align-items: center;
    width: min-content;
  }

  header ul {
    width: min-content;
    font-size: .7em;
  }

  .header-container a.site-title {
    display: block;
    flex-grow: 1;
  }

  header img {
    align-self: center;
  }

  header h1 span {
    align-self: center;
    margin-left: 0;
  }
}

header a {
  color:#FFF;
  text-decoration:none;
  display: contents;
}


header a:hover {
  color:#0F0;
}

.sub-header {
  font-weight: normal;
}

nav ul {
  font-size: .8em;
  list-style-type:none;
  margin:0;
  padding:0;
}

nav li {
  display:inline-block;
  margin-right: .5em;
}

nav.tabs {
  margin-bottom: .5em;
}
nav.tabs a:link, nav.tabs a:visited {
  color:#000;
  padding-bottom: .6em;
  text-decoration:none;
}
nav.tabs a:hover, nav.tabs a.active {
  border-bottom: 5px solid #000;
}

nav.tabs ul {
  padding-bottom: .5em;
}

nav.tabs li {
  font-size: 1.5em;
  padding: 1.5em 1em 0 1em;
}

@media(max-width: 800px) {
  nav.tabs { font-size: .8em; text-align: center; }
  nav.tabs li { padding: .2em; }
  .filter { display: none; }
  #journey-tabs li { padding: .3em 0; display: inline-block; }
  .title-aside { display: block; font-size: .8em; }
}

.journey-date { text-align: left; display: block; float: none !important; }

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

main {
  padding:0 1em 1em 1em;
  margin: .5em auto;
  max-width: 1800px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

main a:link, main a:visited {
  color: black;
}

main a:hover {
  text-decoration: none;
}

@media(min-width: 600px) {
  main { flex-direction: column; }
}

section, .rows > div, .columns > div {
  flex: 1;
  margin: 1em;
}

@media(min-width: 600px) {
  /* Single section only */
  section:first-child:nth-last-child(1) {
    margin: 0 10em;
    min-width: 60vw;
  }
}

section.inset, aside.inset {
  background: #eee;
  border-radius: .5em;
  padding: 1em;
}

aside {
  display: inline;
  float: left;
}

.rows {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.columns {
  display: flex;
  flex-direction: column;
}

.columns > * {
  flex: 1;
}

.columns .filter {
  flex: 0;
}

@media(min-width: 600px) {
  .columns { flex-direction: row; }
}

h2, h3 {
  text-align: center;
}

.header-button {
  float: right;
}

form {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

input, button {
  padding: .5em;
  font-size: 1em;
}

fieldset {
  border-width: 1px;
  border-radius: .5em;
}

label {
  padding-right: .5em;
}

input[type="checkbox"] {
  justify-self: start;
  transform: scale(1.5);
}

.help-text {
  font-size: .8em;
  padding: 0;
  margin: 0;
}

.inline-form {
  display: flex;
  flex-direction: row;
  gap: .5em;
  padding-bottom: .5em;
  justify-content: center;
}

form #new-box-form-message, form p {
  grid-column: 1/3;
}

form p.helper-text {
  grid-column: 2;
  font-size: .9em;
  margin: 0;
  padding: 0;
  font-style: italic;
}

@media(min-width: 600px) {
  form, fieldset {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }

  label {
    grid-column: 1;
    text-align: right;
  }

  fieldset {
    grid-column: 1/3;
  }

  legend {
    display: block;
    width: 100%;
    font-weight: bold;
    text-align: center;
  }

  input, .help-text, trix-editor, small {
    grid-column: 2;
  }

  input[type="submit"], button {
    grid-column: 1/3;
  }
}

.page-title {
  display: inline;
}

@media(min-width: 1000px) {
  .title-aside { display: inline; }
}

.page-title h2 {
  margin: 0;
  text-align: center;
}
a { transition:color 0.25s; }
a { transition:background-color 0.25s; }

table { padding:0; margin:0; border-collapse:collapse; }
table th { text-align:left; }
table tr:nth-child(odd) { background:#F8F8F8; }
table tr:nth-event(odd) { background:#FFFFFF; }
table tr td { border-top:1px solid #DDD; }
table th{ background:#444; color:white; padding: 0.25em 0.5em; }
table th a:link, table th a:visited { color:white; text-decoration:none; }

body > header { padding:1em; font-size:150%; border-bottom:1px solid #ccc; box-shadow:0px 5px 10px rgba( 0, 0, 0, 0.1 ); }
.header-content { max-width: 1800px; margin: 0 auto; }
body > footer {
  background:#333;
  padding:1em;
  font-size:12px;
  text-align:center;
  color:white;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.ui-columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:1em; }
.ui-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:1em; }
.ui-columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap:2em; }

@media screen and (max-width:600px) {
  .ui-columns-4 { display: block; }
  .ui-columns-3 { display: block; }
  .ui-columns-2 { display: block; }
}

.ui-time-adjuster { background-color:#eee; border:1px solid #CCC; border-radius:0.25em; margin-bottom:0.5em; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; line-height:3em; }
.ui-time-adjuster a { text-align:center; text-decoration:none; border-right:1px solid #CCC; color:#777; display:inline-block; }
.ui-time-adjuster a:last-child { border-right-style:none; }
.ui-time-adjuster a:hover { color:blue; background:#DDD; }
.ui-time-adjuster span { text-align:center; border-right:1px solid #CCC; display:inline-block; }

p.help { font-size:11px; color:#888; font-style:italic; margin:0 0 1em  0; }

.ui-box { border:1px solid #888; border-radius:0.5em; padding: 0 1em 1em 1em; margin-bottom:1em; background:white; }
.ui-box.ui-secondary { border-style:dotted; background:#B1FFB1; }

header form { float:right; }

.button { font-size:16px; cursor: pointer; text-decoration:none; padding:0.5em 1em; display:inline-block; background:#fad9fa; color:#d61cd6; border-radius:0.25em; border-style:none; }
.button:hover { background:#e8b0e8; color:#ad0ead; }

.button.ui-secondary { background:#DDD; color:#444; }
.button.ui-secondary:hover { background:#CCC; color:#222; }

.ui-hazard { background:red;padding:2em;text-align:center; margin-top:2em; }

.map { width:100%; height:300px; }
.mini-map { width:100%; height: 100px; min-height:100px; }
.narrow-map { width:100%; height:200px; }

.ui-form, .ui-section { background:#eee; padding:1em; margin-bottom:2em; border-radius:0.25em; }
.ui-form .ui-field { display: grid; grid-template-columns: 200px 1fr; grid-column-gap: 1em; margin-bottom:0.5em; }
.ui-form .ui-field .ui-label { text-align:right; }
.ui-form .ui-field .ui-control {}
.ui-form .ui-field:last-child { margin-bottom:0; }
.ui-form .ui-small { width:4em; }

.ui-form .ui-help { grid-column:2/-1; margin-top:0.5em; color:#666; font-size:12px; }

.ui-form .ui-group > .ui-label { font-weight:bold; margin-top:1em; border-bottom:1px solid #CCC; padding-bottom:0.5em; margin-bottom:0.5em; }
.ui-form .ui-group > .ui-label:first-child { margin-top:0; }

.ui-form.ui-hint-danger { background:#FF4444; border:2px solid #FF0000; }
.ui-form.ui-hint-danger .ui-help { color:white; }
.ui-form.ui-hint-danger .ui-group > .ui-label { color:white; }

.ui-form .ui-submit { padding-left:200px; margin-left:1em; margin-top:1em; }
.ui-form .ui-submit:first-child { margin-top:0; }

@media screen and (max-width:600px) {
  .ui-form .ui-field { display:block; }
  .ui-form .ui-field .ui-label { text-align:left; }
  .ui-form .ui-submit { padding-left:0; margin-left:0; margin-top:1em; }
}

.field_with_errors input { border: 1px solid red; }

.ui-alert { background:#f7c63e; color:#70550b; margin:1em auto .5em auto; padding:1em; border-radius:0.5em; width: 100%; }
.ui-alert.ui-hint-good { background:#7ffaa0; color:#0c5e22; }
.ui-alert p { padding-top:0.5em; margin-top:0.5em; border-top:1px solid rgba(0,0,0,0.1); }
.ui-alert p:first-child { padding:0; margin:0; border-style:none; }
.ui-filter-label { text-align:center; margin-bottom:1em; }

/*
 * Filtering
 */
ul.ui-filter-choices { list-style-type:none; padding:0; margin:1em 0; }
ul.ui-filter-choices li { display:block; margin-bottom:0.2em; }
ul.ui-filter-choices a { display:block; border:1px solid #aaa; border-radius:1em; width:100%; text-align:center; padding:0.25em 0.5em; box-sizing:border-box; text-decoration:none; color:#888; }
ul.ui-filter-choices a:hover { background:#ddd; }
ul.ui-filter-choices .ui-on a { border:1px solid #aaa; background:#7ffaa0; color:#0c5e22; }
ul.ui-filter-choices .ui-on a:hover { background:#70f098; }

ul.ui-filter-choices.ui-hint-inline {}
ul.ui-filter-choices.ui-hint-inline li { display:inline; margin-bottom:0; }
ul.ui-filter-choices.ui-hint-inline a { display:inline; }
ul.ui-filter-choices.ui-hint-inline a:hover { background:#ddd; }

/*
 * ui-datepicker
 */
.ui-datepicker { text-align:center; color:#333; }
.ui-datepicker .ui-week { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap:0; font-size:12px; }
.ui-datepicker .ui-header .ui-week .ui-day { background:#222; color:white; border-radius:0; margin:0; }
.ui-datepicker .ui-header .ui-week .ui-day:first-child { border-bottom-left-radius:0.5em; }
.ui-datepicker .ui-header .ui-week .ui-day:last-child { border-bottom-right-radius:0.5em; }
.ui-datepicker .ui-header .ui-fill { background:#444; font-size:16px; color:white; padding:0.3em; grid-column:1/-1; border-top-left-radius:0.3em; border-top-right-radius:0.3em; }
.ui-datepicker .ui-day { cursor:pointer; padding:0.3em 0; border-radius:0.5em; margin:1px; }
.ui-datepicker .ui-pickable .ui-day:hover { background:lightgreen; }
.ui-datepicker .ui-day.ui-demote { color:#888; }
.ui-datepicker .ui-day.ui-strong { font-weight:bold; color:#000; }
.ui-datepicker .ui-day.ui-highlight { background:#54afe6; color:white; }
.ui-datepicker a { text-decoration:none; color:#333; display:block; }
.ui-datepicker .ui-body .ui-day { border:1px solid white; }
.ui-datepicker .ui-body .ui-day.ui-on { border:1px solid red; }

/*
 * ui-calendar
 */
.ui-calendar { color:#333; }
.ui-calendar .ui-week { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap:0; }
.ui-calendar .ui-header .ui-week .ui-day { background:#222; color:white; border-radius:0; margin:0; }
.ui-calendar .ui-header .ui-week .ui-day:first-child { border-bottom-left-radius:0.5em; }
.ui-calendar .ui-header .ui-week .ui-day:last-child { border-bottom-right-radius:0.5em; }
.ui-calendar .ui-header .ui-fill { background:#444; font-size:16px; color:white; padding:0.5em; grid-column:1/-1; border-top-left-radius:0.3em; border-top-right-radius:0.3em; }
.ui-calendar .ui-day { padding:0.5em; }
.ui-calendar .ui-pickable .ui-day:hover { background:#eeffee; }
.ui-calendar .ui-day.ui-demote { color:#888; }
.ui-calendar .ui-day.ui-strong { font-weight:bold; color:#000; }
.ui-calendar .ui-day.ui-highlight { background:#54afe6; color:white; }
.ui-calendar .ui-body a { text-decoration:none; color:#333; display:block; }
.ui-calendar .ui-body .ui-day { border-top:1px solid #eee; border-left:1px solid #eee; }
.ui-calendar .ui-body .ui-day:last-child { border-right:1px solid #eee; }
.ui-calendar .ui-body .ui-week:last-child .ui-day { border-bottom:1px solid #eee; }
.ui-calendar .ui-body .ui-day.ui-on { border:1px solid red; }
.ui-calendar .ui-body .ui-day.ui-hint-today { border:1px solid red; border-radius:0.25em; }
.ui-calendar .ui-content a { display:block; font-weight:normal; margin-bottom:2px; background:#eee; border-radius:0.25em; padding:2px 4px; }
.ui-calendar .ui-body .ui-day .ui-label { margin-bottom:0.25em; }
.ui-calendar .ui-header span { opacity:0.5; }
.ui-calendar .ui-header a { opacity:0.5; color:white; text-decoration:none; }
.ui-calendar .ui-header a:hover { opacity:1.0; color:; }
.ui-calendar .ui-header .ui-on { font-weight:bold; font-size:140%; opacity:1.0; }

table { width:100%; }

table.ui-nice { font-size:16px; color:#333; width:100%; }
table.ui-nice tr th,
table.ui-nice tr td { padding:0.8em; }
table.ui-nice tr td { background:#e2e2e2; }
table.ui-nice tr:nth-child(odd) td { background:#eee; }
table.ui-nice .ui-hint-times { width:8em; }
table.ui-nice .ui-hint-date { width:5em; }
table.ui-nice .ui-hint-label { color:#000; font-weight:bold; }

table.ui-nice tr:hover td { background:#e2e2d2; }
table.ui-nice tr:hover:nth-child(odd) td { background:#eed; }

table.ui-nice tr { cursor:pointer; }

table.ui-nice tr.ui-draft td { background:#B1FFB1; border-top:2px dotted limegreen; border-bottom:2px dotted limegreen; font-style:italic; color:#777; }
table.ui-nice tr.ui-draft td:first-child { border-left:2px dotted limegreen; }
table.ui-nice tr.ui-draft td:last-child { border-right:2px dotted limegreen; }
table.ui-nice tr.ui-draft td.ui-hint-label { font-weight:normal; }
table.ui-nice tr.ui-draft:nth-child(odd) td { background:#B1EFB1; }

table.ui-nice tr.ui-draft:hover td { background:#A1EFA1; }
table.ui-nice tr.ui-draft:nth-child(odd):hover td { background:#A1DFA1; }

.ui-tag { background:orange; color:white; font-size:12px; display:inline-block; padding:1px 4px; text-transform:uppercase; border-radius:0.3em; position:relative; top:-0.2em; }

.ui-view-filtered-content { margin-top:1em; margin-bottom:1em; display: grid; grid-template-columns: 200px 1fr; grid-column-gap: 1em; }
.ui-view-filtered-content .ui-filter {}
.ui-view-filtered-content .ui-content {}

.ui-view-filtered-content.ui-hint-invert { grid-template-columns: 1fr 200px; }

body > div > ul.ui-menu { margin:1em 0 1.5em 0.5em; color:#AAA; }
body > div > ul.ui-menu li { display:inline; }
body > div > ul.ui-menu li a { display:inline-block; text-decoration:none; color:#888; }
body > div > ul.ui-menu li.ui-on a { font-weight:bold; color:#222; }

.ui-mobile-no {}
.ui-mobile-center {}
.ui-mobile-only { display:none; }
@media screen and (max-width: 600px) {
  .ui-mobile-no { display:none; }
  .ui-mobile-center { text-align:center; }
  .ui-mobile-only { display:inline; }
}

input.chunky { font-size:20px; }

.ui-circle { display:inline-block; background:#333; color:white; border-radius:50%; width:30px; line-height:30px; text-align:center; }
.ui-calendar .ui-circle { display:inline-block; background:#eee; color:#888; border-radius:50%; width:30px; line-height:30px; text-align:center; }
.ui-calendar .ui-on a.ui-circle { background:#54afe6; color:white; }

.ui-actions { margin:1em 0; }


dt {
  font-weight: bold;
}

h4 {
  font-size: 1.2em;
  margin-top: 0;
  a:link, a:visited {
    color: black;
    text-decoration: none;
  }
}

tr.boat_log_entry {
  a:link, a:visited {
    text-decoration: none;
  }
}

h5, h6 {
  font-size: 1em;
  margin: 0;
}

.hidden {
  display: none;
}

.title-aside {
  font-weight: normal;
  color: #888;
}

#rename-form {
  display: none;
}

a.row-link {
  color: black;
  text-decoration: none;
}

turbo-frame.tabs {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid black;
}
turbo-frame.tabs nav {
  margin: 0;
  padding: .5em;
  background-color: #000;
  top: 0;
  text-align: center;
}
turbo-frame.tabs nav ul {
  margin: .1em;
  font-size: 1.2em;
}
turbo-frame.tabs nav  li {
  display: inline;
  padding: 0 1em;
}
turbo-frame.tabs nav a:link, turbo-frame.tabs nav a:visited {
  color: #fff;
  text-decoration: none;
  padding: 1em 0;
}
turbo-frame.tabs nav a.active, turbo-frame.tabs nav a:hover {
  border-bottom: 10px solid #fff;
  text-decoration: underline 8px;
  text-underline-offset: .5em;
}
turbo-frame.tabs .tab-content {
  height: 100%;
  overflow: auto;
}
@media (max-width: 600px) {
  turbo-frame.tabs nav {
    padding: 0;
    line-height: 1.5em;
  }
  turbo-frame.tabs nav  li {
    padding: 0;
  }
  turbo-frame.tabs nav a:link, turbo-frame.tabs nav a:visited {
    padding: 0;
    margin: 1em .5em;
  }
  turbo-frame.tabs nav a.active, turbo-frame.tabs nav a:hover {
    border-bottom: 0;
    text-decoration: underline;
  }
}

.full-height {
  height: 100%;
}

.map-all {
  min-height: 40em;
  width: 200%;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .map-all {
    width: 100%;
  }
  .journey-list {
    thead { display: none; }
    tr { display: flex; flex-wrap: wrap; margin: .5em 0; border-radius: 1em; }
    td { display: block; width: 100% !important; }
  }
  .inset {
    ul.boat-list {
      padding: 0;
    }
  }
  .columns { padding: 0; }
  .rows > div { margin: 0; }
  .columns > * { margin: 0 !important; }
}

.chart-container {
  position: relative;
  width: min-content;
  margin: 0 auto;
  height: 50vh;
  width: 100%;
}

.merge-button: {
  margin-top: 1em;
}

.map-slider {
  width: 98%;
  display: block;
  margin: 0 auto;
}
.columns .map {
  padding: 0;
  margin: 0;
}
.button_to {
  margin-top: .2em;
}
.center {
   text-align: center;
}

.scroll-table {
  max-height: 60em;
  overflow-y: auto;
}

.scroll-table-small {
  max-height: 20em;
}

.scroll-table thead {
  position: sticky;
  top: 0;
}

.scroll-table tfoot {
  position: sticky;
  bottom: 0;
  background-color: white;
}

li.boat {
  list-style-type: none;
  background-color: #eee;
  padding: 1em;
  margin-bottom: .5em;
  border-radius: .5em;
}

li.boat a:link, li.boat a:visited {
  color: black;
  text-decoration: underline;
}

li.boat a:hover {
  text-decoration: none;
}

li.boat h4 {
  display: inline;
}

a:link.edit-link {
  float: right;
  padding: 0 .5em;
  text-decoration: none;
}
a:hover.edit-link {
  text-decoration: underline;
}

li.boat h5 {
  font-weight: normal;
  color: #555;
  margin: 0;
  padding: 0;
}

.journey {
  padding-top: 1em;
}

.journey h4 {
  display: inline-block;
  margin: 0 0 .5em 0;
}

.faded {
  display: inline;
  color: #888;
  font-weight: normal;
}
.faded-text {
  color: #888;
  float: right;
}

.stripe {
  max-width: 80em;
  margin: 1em auto;
}

.stripe form {
  display: unset;
}

.stripe button {
  width: 100%;
  margin-top: 1em;
}

.merge-form {
  float: right;
  margin-top: 1em;
}

.active-row {
  color: #fff;
  background-color: #666 !important;
}

.files {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.file {
  display: flex;
  flex-direction: column;
  gap: .5em;
  background-color: #fff;
  border-radius: .5em;
  padding: 1em;
  margin-bottom: 1em;
}

footer a:link, footer a:visited {
  color: #fff;
}

.right {
  float: right;
}

.vertical-center {
  display: flex;
  align-items: center;
}

.download-links {
  padding: 1em 0;
}

.annotation {
  padding: .5em 1em;
}

form.box-invite, form.crew-invite {
  display: inline;
}

#live_data_view dl {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 1.2em;
}

#live_data_view dt, #live_data_view dd {
  padding: 0;
  margin: 0;
  display: inline;
  list-style-type: none;
  display: inline;
}

#live_data_view dt {
  font-weight: bold;
  padding-right: .2em;
  padding-left: 1em;
}