/* Fonts */
@import url("https://use.typekit.net/ydh1ypm.css");
/* End Fonts */

:root {
 --white: hsl(0,0%,100%);
 --white-hsl: 0,0%,100%;
 --bg: hsl(40,20%,98%);
 --bg-hsl: 40,20%,98%;
 --lblue: hsl(195,70%,65%); 
 --lblue-hsl: 195,70%,65%;
 --blue: hsl(195,65%,50%); 
 --blue-hsl: 195,65%,50%;
 --blue-bg: hsl(195,70%,55%); 
 --blue-bg-hsl: 195,75%,55%;
 --darkblue: hsl(195,65%,25%);
 --darkblue-hsl: 195,65%,25%;
 --seablue: hsl(185,40%,90%);
 --seablue-hsl: 185,40%,90%;
 --seablue-bg: hsl(160,75%,80%);
 --seablue-bg-hsl: 160,75%,80%;
 --bgblue: hsl(195,62%,85%);
 --bgblue-hsl: 195,62%,85%;
 --bgsea: hsl(180,62%,95%);
 --bgsea-hsl: 180,62%,95%;
 --text: hsl(200,20%,20%);
 --text-hsl: 200,20%,20%;
 --red: hsl(5,68%,55%);
 --red-hsl: 5,68%,55%;
 --orange: hsl(31,100%,50%);
 --orange-hsl: 31,100%,50%;
 --green: hsl(95,90%,32%) ;
 --green-hsl: 95,90%,32%;
 --green-bg: hsl(110,60%,90%) ;
 --green-bg-hsl: 110,60%,90%;
 --yellowgreen: hsl(68,85%,85%);
 --yellowgreen-hsl: 68,85%,85%;
 --yellow: hsl(55,90%,70%);
 
 --filter-bg: hsl(195,65%,92%);
 --links-bg: hsl(100,65%,92%);
 --services-bg: hsl(40,20%,95%);
 
 --lgrey: hsl(40,9%,81%);
 --lgrey-hsl: 40,9%,81%;
 --lgrey-bg: hsl(190,5%,95%);
 --lgrey-bg-hsl: 190,5%,95%;
 --grey: hsl(190,5%,70%);
 --grey-hsl: 190,5%,70%;
 --black: hsl(0,0%,0%);
 --black-hsl: 0,0%,0%;
 
 --accent-color: hsl(197,90%,85%);

 --table-height: 100dvh;
 --table-height: -webkit-fill-available;
 
 --nav-height-sml: 3rem;
 --nav-height: 5rem;
 
 --padding-small: clamp(1rem, calc(1rem + 0.25vw), 1.5rem);
 --padding-normal: clamp(2rem, calc(2rem + 0.5vw), 5rem);
 --radius-small: 0.1rem;
 --radius-big: 2rem;
 
 --base-text: 16px;
 --scale: 1.2;
 --small-text: calc(var(--base-text) / var(--scale));
 --xsmall-text: calc(var(--small-text) / var(--scale));
 --minorhead-text: calc(var(--base-text) * var(--scale));
 --subhead-text: calc(var(--minorhead-text) * var(--scale));
 --head-text: calc(var(--subhead-text) * var(--scale) * var(--scale));
 --display-text: calc(var(--head-text) * var(--scale) * var(--scale));

}
/*@supports (max-height: 100dvh) {
  --body-height: 100dvh;
 }*/
 
* {
 /*outline: 1px solid red;*/
}


/*------------------------
   Global declarations
-------------------------*/

*, *::before, *::after {
 box-sizing: border-box;
}
*::-webkit-scrollbar {
  display: none;
}
* div, * p, h5 {
 margin-block-start: 0;
 margin-block-end: 0;
 margin-inline-start: 0;
 margin-inline-end: 0;
}
* a {
 text-decoration: none;
	text-shadow: none;
}
* p, h1, h2, h3, h4, h5 {
 margin-block-start: 0px;
 margin-block-end: 0px;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
}
svg:not(:root) {
 overflow: visible;
}
.zero {
 display: none;
 height: 0;
 width: 0;
}
.nowrap {
 white-space: nowrap;
}
.screenreadonly {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
html {
 scroll-behavior: smooth;
 transition: all 0.2s ease-in-out;
 transition: background-color linear 150ms;
}
html, body, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, table, caption, form, fieldset {
 /*vertical-align: baseline;*/
 margin: 0;
 padding: 0;
}
hr {
 border: none;
 height: 2px;
}
/*----------*/


/*-----------
    Fonts 
------------*/

html, body, * select, * input, * input[type="date"], * textarea, h5, table, .loginform legend span {
 font-family: "ff-din-paneuropean", "bahnschrift", "gate-a1-variable", sans-serif;
 font-size: var(--base-text);
 font-weight: 500;
 line-height: 1.6em;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 font-kerning: normal;
 letter-spacing: normal;
 font-variant-numeric: tabular-nums;
}
.display-text {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
 font-size: clamp(var(--display-text), calc(var(--display-text) + 0.5vw), calc(var(--display-text) * var(--scale)));
 font-weight: 700;
}
.head-text, .subhead-text, .minorhead-text, button, .searchform a {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
 font-weight: 700;
 line-height: 1.2em;
 letter-spacing: 0.02em;
}
.subhead-text {
 font-size: clamp(var(--subhead-text), calc(var(--subhead-text) + 0.5vw), calc(var(--subhead-text) * var(--scale)));
}
.minorhead-text {
 font-size: clamp(var(--minorhead-text), calc(var(--minorhead-text) + 0.5vw), calc(var(--minorhead-text) * var(--scale)));
}
.small-text, .xsmall-text {
 font-family: "gate-a1-variable", Arial, sans-serif;
 letter-spacing: normal;
}
.small-text {
 font-size: var(--small-text);
}
.xsmall-text {
 font-size: var(--xsmall-text);
}
.strong {
 font-weight: 00;
}
button, .searchform fieldset:last-of-type a {
 font-size: clamp(var(--base-text), calc(var(--base-text) + 0.5vw), var(--minorhead-text));
 font-weight: 700;
 line-height: 2.6rem;
 vertical-align: middle;
 letter-spacing: 0.075em;
}


/*------------
    Asides  
-------------*/
/*  Date     */

.date {
 div {
  font-family: "chainprinter", "ff-din-paneuropean-cond", "bahnschrift-semicondensed", "din-condensed-variable", Arial, sans-serif;
  font-size: clamp(var(--base-text), calc(var(--base-text) + 0.25vw), var(--minorhead-text));
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: normal;
 }
}


/*-----------------
    Navigation
------------------*/

nav:not(.services nav), .breadcrumbs, .filter {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
 font-weight: 700;
 font-size: var(--base-text);
 letter-spacing: 0.05em;
 text-transform: uppercase;
}
nav:not(.services nav), .breadcrumbs {
 line-height: 1.6em;
}
.voyage-result-top {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-semicondensed", "gate-a1-variable", sans-serif;
 font-weight: 500;
 font-size: clamp(var(--base-text), calc(var(--base-text) + 0.5vw), var(--minorhead-text));
 line-height: 1.4em;
}

@media (orientation: landscape) AND (max-height: 35rem) {
 nav:not(.services nav) {
  font-size: var(--base-text);
 }
}
@media (min-width: 88rem) AND (height >= 32rem) {
 nav:not(.services nav) {
  
 }
 .date {
  div {
   font-size: var(--display-text);
   /*font-weight: 500;
   line-height: 1.45em;
   letter-spacing: 0.05em;*/
  }
 }
}

/*  Services utilities filter asides  */

.utilities {
 font-family: "ff-din-paneuropean", "bahnschrift-semicondensed", "gate-a1-variable", sans-serif;
 font-weight: 500;
 font-size: var(--small-text);
 line-height: 1.2em;
 letter-spacing: normal;
}
.filter > h1 {
 font-size: var(--subhead-text);
 color: var(--text);
}
/*.filter span, .filter a, .links a, .services a {
 line-height: 1.8rem;
}*/

footer {
 font-size: var(--small-text);
 font-style: normal;
 font-weight: 400;
 line-height: 0.889rem;
}

/*-------------------------
   Headers, breadcrumbs
-------------------------*/

h1:not(.voyage h1) div:last-of-type, .voyage h1 > div:last-of-type {
 font-size: var(--small-text);
 font-weight: 500;
 line-height: 1.6em;
 /*text-transform: uppercase;*/
}
h1:not(.voyage h1) div:first-of-type {
 font-family: "ff-din-paneuropean", "bahnschrift-semicondensed", "din-condensed-variable", Arial, sans-serif;
 font-size: var(--small-text);
 font-weight: 500;
 line-height: 1.6em;
 letter-spacing: 0.075em;
 /*text-decoration: underline 1px solid var(--text);
 text-underline-offset: 4px;*/
}
h1:not(.voyage h1) div:nth-of-type(2), .voyage h1 > div:nth-of-type(2), .loginform legend {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
 font-weight: 500;
 font-size: clamp(var(--display-text), calc(var(--display-text) + 0.5vw), calc(var(--display-text) * var(--scale)));
 line-height: 1em;
}
h3 {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
 font-weight: 700;
 display: block;
 font-size: clamp(var(--base-text), calc(var(--base-text) + 0.25vw), var(--minorhead-text));
 line-height: auto;
 letter-spacing: 0.04em;
 text-align: center;
}
h4 {
 font-weight: 500;
 font-size: 1rem;
 line-height: 1.2rem;
}

@media (orientation: landscape) AND (height < 35rem) {
 
}

@media (min-width: 88rem) AND (height >= 32rem) {
 h1 a div:last-of-type {
  font-size: clamp(var(--display-text), calc(var(--display-text) + 1vw), calc(var(--display-text) * var(--scale)));
  line-height: 1em;
  letter-spacing: 0.015em;
 }
.services {
  font-size: 1rem;
 }
}


/*----------------------------
   Navigation search overlay
-----------------------------*/

.overlay:target legend  {
 font-size: 2.986rem;
 line-height: 2.986rem;
}

label, .label, .schedule .operation, .income .port, .expenses .expense, .bunker .fuel-type {
 font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", sans-serif;
 font-size: var(--small-text);
 font-weight: 500;
 line-height: 1.2rem;
 font-style: normal;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

label:has(+ input:hover), label:has(+ input:focus), label:has(+ select:hover), label:has(+ select:focus) {
 font-weight: 700;
 opacity: 1;
}


/*-----------------------
    Results table 
------------------------*/

table {
 th {
  font-family: "ff-din-paneuropean", "bahnschrift", "gate-a1-variable", sans-serif;
  font-weight: 700;
  font-size: var(--xsmall-text);
  line-height: 1.4rem;
  letter-spacing: 0.05em;
 }
 tbody th {
  font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
  font-weight: 700;
  font-size: var(--minorhead-text);
  line-height: 1.4em;
  letter-spacing: 0.025em;
  /*text-decoration: underline 2.5px solid var(--text);
  text-underline-offset: 0.3rem;*/
 }
 tfoot td {
  font-weight: 600;
 }
}


/*---------------------------------
   Voyage calculation table
----------------------------------*/

.voyage {
 h1 > div:first-of-type {
  font-variation-settings: "wght" 540;
 }
 h2 {
  font-family: "ff-din-paneuropean-cond", "bahnschrift-condensed", "din-condensed-variable", Arial, sans-serif;
  font-size: clamp(var(--minorhead-text), calc(var(--minorhead-text) + 0.5vw), var(--subhead-text));
  font-weight: 600;
  line-height: 1em;
  letter-spacing: 0.01em;
 }
 .back-link, .schedule .duration-s, .schedule .duration-p {
  font-family: "ff-din-paneuropean", "bahnschrift", "gate-a1-variable", sans-serif;
  font-size: clamp(var(--xsmall-text), calc(var(--xsmall-text) + 0.5vw), var(--small-text));
  font-weight: 400;
 }

 .total, .schedule .duration-total *:not(.label)  {
  font-family: "ff-din-paneuropean", "bahnschrift", "gate-a1-variable", sans-serif;
  font-size: var(--base-text);
  font-weight: 500;
 }
 .total, .schedule .port, .income .cargo, .expenses .port, .bunker .bunker-cons  {
  font-family: "ff-din-paneuropean", "bahnschrift-semicondensed", "gate-a1-variable", sans-serif;
  font-size: var(--minorhead-text);
  font-weight: 700;
 }
 .edit-link, .back-link {
  line-height: 1rem;
 }
}

@media (orientation: landscape) AND (max-height: 35rem) {
 .voyage {
  .schedule .port, .income .cargo, .expenses .port, .bunker .bunker-cons  {
   font-size: var(--base-text);
  }
 }
}
.stamp {
 font-size: 1.2rem;
 line-height: 1.2rem;
}


/*-----------------------------------------------
   Basic select, inpit and textbox appearances
-------------------------------------------------*/

/*header input[type='checkbox'] {
 display: none;
}*/

* select, * input, * input[type="date"], * textarea {
 vertical-align:baseline;
}
* select, * input:not([type="checkbox"]), * input:not([type="radio"]) {
	-webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

* select, * input:not([type="checkbox"]), * input[type="date"], * textarea { 
 /*padding-block: 0;
 padding-inline: 0;
 padding: 0 8px;*/
 padding-left: 1rem;
 padding-right: 0.5rem;
 line-height: 1.2rem;
}
* input[type="date"] {
 padding-right: 0.5rem;
}
* select:hover, * input[type="date"]:hover, * textarea:hover {
 cursor: pointer;
}
/* select arrows appearances and date-time indicators */
* select {
 /*background-image:  url('../images/expand_circle_down.svg');
 background-position: top 0 right 8px;
 background-repeat: no-repeat;
 background-size: 20px 100%;*/
}
* input[type="checkbox"] {
 display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator { 
	/*width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
 filter: brightness(80%);*/
/* color: rgba(var(--blue-rgb),0.5);*/
	/*z-index: 0;*/
}
input[type="time"]::-webkit-calendar-picker-indicator { 
	/*width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;*/
	/*z-index: 0;*/
}


/*----------------------------------------
 Searchform select and input appearances
----------------------------------------*/
select, input, input[type="date"], button, .searchform fieldset:last-of-type a {
 border: none;
 align-items: middle;
 transition: all 0.3s ease-in-out;
}

select, input, input[type="date"] {
 height: 2.5rem;
 color: var(--text);
 background-color: hsla(var(--lgrey-hsl),0.2);
 box-shadow: inset 1px 1px 1px hsla(var(--grey-hsl),0.5),
  inset 1px 1px 1px var(--white);
}
select:hover, input:hover, input[type="date"]:hover, textarea:hover, select:focus, input:focus, input[type="date"]:focus, textarea:focus, button:focus, .searchform a:focus {
 outline: 1px solid var(--seablue);
 outline-offset: 2px;
}
/*select:focus, input:focus, textarea:focus {
 outline: 2px solid var(--seablue);
}*/
select:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
 outline: none;
}
label {
 position: relative;
 top: 0;
 left: 1rem;
 align-self: flex-start;
 width: auto;
 padding: 0.15rem;
 color: var(--text);
 text-align: left;
 overflow-y: hidden; /* for smooth transition */
 opacity: 0.5;
 transition: all 0.3s ease-in-out;
}

input::placeholder, select::placeholder {
  opacity: 0.5;
}
input:hover::placeholder, select:hover::placeholder {
  color: var(--text);
  opacity: 0.75;
}

/*------------
   Buttons
--------------*/

button, .searchform fieldset:last-of-type a {
 display: block;
 position: relative;
 height: 3rem;
 margin: 1.5rem auto;
 padding: 0 var(--padding-normal);
 text-align: center;
 border: 2px solid var(--lblue);
}
button {
 color: var(--bg);
 text-shadow: 0 0 1px var(--lblue);
 background-color: var(--lblue);
 background-image: radial-gradient(var(--blue) 1px, transparent 0);
 background-size: 3px 3px;
 filter: drop-shadow(1px 1px 0.1rem var(--lgrey));
 transition: all 0.3s ease-in-out;
}
.searchform fieldset:last-of-type a {
 color: var(--lblue);
}
button:has(+ button) {
 margin: 2rem auto 0.5rem auto;
}
form button, form fieldset:last-of-type a {
 width: 100%;
}
button:hover, button:focus, button:active, .searchform a:hover, .searchform a:focus, .searchform a:active {
 text-decoration-line: none;
}
button:focus, .searchform a:focus {
 cursor: pointer;
 transform: translateY(-1px);
}
button:focus:not(:focus-visible) {
 outline: none;
}
button:hover, .searchform fieldset:last-of-type a:hover {
 top: -1px;
 color: var(--white);
 background-color: var(--lblue);
 filter: drop-shadow(0.25rem 0.25rem 0.5rem var(--lgrey));
}
button:active, .searchform fieldset:last-of-type a:active {
 background-image: radial-gradient(hsla(var(--bg-hsl),0.5) 1px, transparent 0);
 background-size: 2px 2px;
}

/*----------------
    SVG styles
-----------------*/

.icon {
 display: inline-block;
 transition: transform 0.5s ease-in-out; 
} 
.iconaside {
 position: relative;
}

div.login svg {
 margin-bottom: 90px;
}
.close {
 position: relative;
 fill: none;
 stroke: var(--bg);
 stroke-linecap: butt;
 stroke-linejoin: round;
 stroke-width: 7;
 height: 1.5rem;
 width: 1.5rem;
 transition: transform 0.5s ease-in-out; 
}
.close:hover {
 transform: rotate(180deg);
}

/*-------------------
  end of SVG styles
--------------------*/


/*----------------------------------------------------------- 
Basic page structure: header, main, footer plus flying panel
------------------------------------------------------------*/
html, body {
 min-height: 100vh;
 min-height: 100lvh;
 max-height: 100vh;
 max-height: 100lvh;
 height: 100vh;
 height: 100lvh;
 margin: 0;
 padding: 0;
 border: 0;
 
}
html {
 width: 100vw;
 min-width: 375px;
 background-color: var(--lblue);
}
body {
 position: absolute;
 top: 0;
 display: grid;
 grid-template-columns: 100vw;
 grid-template-rows: var(--nav-height-sml) calc(100% - var(--nav-height-sml));
 grid-template-areas:
  "header"
  "main";
 gap: 0;
 max-width: 100%;
 width: 100%;
 padding: 0;
 color: var(--text);
 transform: rotate(0deg);
 background-color: var(--bg);
}

/* Header basic structure */

header, aside, main, nav, footer {
 position: relative;
 width: 100%;
 max-width: 100%;
 margin: 0;
}
footer {
 z-index: 10;
}
header {
 grid-area: header;
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-between;
 align-items: center;
 height: var(--nav-height-sml);
 padding: 0 0.5rem;
 text-shadow: 0 0 1px var(--lblue);
 background-color: var(--lblue);
 background-image: radial-gradient(hsla(var(--blue-hsl),0.25) 1px, transparent 0);
 background-size: 4px 4px;
 z-index: 2;
}
main {
 grid-area: main;
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: space-between;
 align-items: center;
 height: calc(100% - var(--nav-height-sml));
 width: auto;
 max-width: 100%;
 margin: 0;
 padding: 0;
 background-color: var(--bg);
 z-index: 1;
}

footer {
 grid-area: footer;
 display: none;
 width: 0;
 height: 0;
 padding: 0;
}
footer > div {
 display: none;
}

/*--------------
   Navigation
---------------*/

nav {
 position: relative;
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-between;
 align-items: center;
 width: 100vw;
 height: var(--nav-height-sml);
 margin: 0;
 padding: 0.5rem;
 background-color: transparent;
 z-index: 3;

 a, a:link, a:visited {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  margin: 0;
  padding: 0 0.5rem;
  color: var(--text);
  line-height: calc(var(--nav-height-sml) - 1rem);
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  z-index: 1;
 }
 a.here, a.here:link, a.here:visited, a:hover, a:link:hover, a:visited:hover {
  color: var(--bg);
 }
}
 .lowercase {
  display: none;
 }
}


/* HTML: <div class="hexagon"></div> */
.hexagon {
  --b: 10px; /* adjust to control the border  */
  height: 200px; /* adjust to control the size  */
  aspect-ratio: cos(30deg);
  clip-path: 
    polygon(50% 0,-50% 50%,50% 100%,150% 50%,50% 0,
    50% var(--b),
    calc(100% - var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),
    calc(100% - var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),
    50% calc(100% - var(--b)),
    calc(var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),
    calc(var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),
    50% var(--b));
  background: #3B8686;
}


/*-----------
   Headers
------------*/

h1 {
 position: relative;
 display: block;
 width: 100%;
 margin: 0;
 padding: 1.5rem 1.5rem;
 color: var(--text);
 text-decoration: none;
 /*transform: rotate(0deg);*/ /* for fixed position of print button */
 transition: all 0.2s ease-in-out;
 z-index: 2;

 a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1.5rem auto auto;
  grid-template-areas:
   "vessel icon"
   "title title"
   "details details";
  justify-content: end;
  align-items: center;
  gap: 0.5rem 0;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.1s ease-in-out;
 }
 a, a:link, a:visited {
  color: var(--text);
 }
 .utilities {
  .icon {
   grid-area: icon;
   justify-self: end;
   align-self: end;
   display: block;
   stroke: var(--lblue);
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-width: 22;
   fill: none;
   height: 1.2rem;
   width: 1.2rem;
   z-index: 3;
   transition: all 0.1s ease-in-out;
  }
  .icon:hover, .icon:focus {
   stroke: var(--text);
   stroke-width: 28;
  }
 }
 div {
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
 }
 div:first-of-type {
  grid-area: vessel;
  position: relative;
  width: auto;
  padding: 0;
 }
 div:nth-of-type(2) {
  grid-area: title;
 }
 div:last-of-type {
  grid-area: details;
  justify-self: end;
  align-self: end;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  padding-top: 0.5rem;
 }
}

h3 {
 display: none;
}

/*-----------
Aside blocks
------------*/

aside {
 transition: all 0.1s ease-in-out;
}

.date {
 display: none;
}

.utilities {
 position: absolute;
 top: 0;
 display: flex;
 flex-flow: row nowrap;
 justify-content: flex-end;
 align-items: center;
 gap: 0.5rem;
 height: auto;
 width: auto;
 margin: 0;
 padding: 0;
 z-index: 2;
}
.utilities:div:nth-of-type(1) {
 display: block;
}
.utilities a {
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: center;
 height: 100%;
 width: 100%;
 gap: 0.25rem;
 margin: 0 auto;
 padding: 0;
 text-align: center;
 background-color: transparent;
 transition: all 0.2s ease-in-out;
}
.utilities a:link svg, .utilities a:visited svg {
 height: 1.5rem;
 width: 1.5rem;
 fill: none;
}
.utilities a span {
 display: none;
}
.utilities a:hover span, .utilities a:focus span {
 color: var(--text);
}

.utilities, .services, .filter, .links {
 display: none;
}

@media (orientation: landscape) or (width >= 40rem) {
 body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
 }
 header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  height: var(--nav-height-small)
  padding: 0 1rem;
 }
 .date {
  position: absolute;
  top: 0; 
  left: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: center;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0 0.5rem;
  color: var(--text);
  background-color: transparent;
  /*border: 1.5px solid var(--text);
  border-radius: 0.05rem;*/
  
  svg {
   display: block;
   position: relative;
   stroke: var(--text);
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-width: 10;
   fill: none;
   height: 2.5rem;
   width: 2.5rem;
   margin: 0 -0.5rem;
   z-index: 3;
   transition: all 0.1s ease-in-out;
  }
 }
 nav {
  justify-content: flex-end;
  gap: clamp(1rem, calc(1rem + 1vw), 4rem);
  width: auto;
  
  a, a:link, a:visited {
   width: auto;
  }
 }
 h1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  top: auto;
  width: 100%;
  margin: 0 auto 0 0;
  padding: 2rem 2rem;
  z-index: 0;
  
  a {
   grid-template-columns: auto auto;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
    "vessel details"
    ". details"
    "title details";
   justify-content: start;
   align-items: start;
   gap: 0.5rem 1.5rem;
   height: auto;
   width: auto;
   margin: 0 auto 0 0;
   padding: 0;
  }
  div:first-of-type {
   justify-self: end;
  }
  div:first-of-type::after {
   right: calc(-1.5rem - 2px);
   top: 0;
  }
  div:last-of-type {
   grid-area: details;
   position: relative;
   width: auto;
   height: 100%;
   max-width: 100%;
   padding-left: 1.75rem;
   padding-top: 2rem;
   text-align: left;
   background: linear-gradient(to bottom, transparent 0, transparent 1.1em, var(--lgrey) 1.1em, var(--lgrey) calc(100% - 6px), transparent calc(100% - 6px), transparent 100%);
   background-repeat: no-repeat;
   background-position: bottom left;
   background-size: 2px;
  
   span::before {
    left: 0;
   }
  }
  div:last-of-type span::before, div:first-of-type::after {
   content: url("../images/line1.svg");
   position: absolute;
   width: 1.25rem;
   height: auto;
  }
  .utilities {
   display: flex;
   gap: 2rem;
   position: relative;
   height: auto;
   align-self: flex-start;
   stroke: var(--text);
   stroke-width: 14;
  }
 }
}

@media (orientation: landscape) AND (height < 32rem) {
 body {
  flex-flow: row-reverse nowrap;
  gap: 0;
  width: 100vw;
  width: 100dvw;
  max-width: none;
  padding: 0 0 0 env(safe-area-inset-left);
 }
 header, main {
  height: 100vh ;
  height: 100dvh;
 }
 header {
  flex-flow: column nowrap;
  width: var(--nav-height);
  padding: 0;
 }
 .date {
  display: none;
 }
 nav {
  top: 0;
  bottom: 0;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 0.25rem;
 
  a, a:link, a:visited {
   width: auto;
   height: auto;
   margin: 0;
   padding: 0 0.25rem;
   text-align: center;
  }
  a.here:before, a.here:link:before, a.here:visited:before, a:hover:before, a:link:hover:before, a:visited:hover:before {
   left: -0.5rem;
  }
  a.here:after, a.here:link:after, a.here:visited:after, a:hover:after, a:link:hover:after, a:visited:hover:after {
    right: -0.5rem;
  }
 }
 main {
  width: calc(100vw - env(safe-area-inset-left) - var(--nav-height));
  padding: 0 1rem 0.5rem 1rem;
  z-index: 1;
 }
 h1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 1.5rem 1rem;
  
  a {
   grid-template-columns: auto auto;
   grid-template-rows: auto auto;
   grid-template-areas: 
    "vessel details"
    "title details";
   justify-content: start;
   align-items: start;
  }
  div:nth-of-type(2) {
   
  }
  div:last-of-type {
   padding-top: 0;
   background: none;
  }
  div:last-of-type span::before, div:first-of-type::after {
   content: none;
  }
 }
}
 
@media (min-width: 88rem) AND (height >= 32rem) {
 html, body {
  background-color: var(--bg);
 }
 html {
  position: relative;
  min-width: 100vw;
  min-height: 40rem;
  max-height: none;
  margin: 0;
  padding: 0;
  --aside-width: clamp(8rem, calc(8rem + 2vw), 15rem);
  --nav-width-var: calc(40rem + clamp(2rem, calc(2rem + 0.5vw), 5rem));
 }
 body {
  position: relative;
  display: grid;
  grid-template-columns: var(--aside-width) 1fr var(--padding-small);
  grid-template-rows: 5rem 1fr repeat(2, auto);
  grid-template-areas:
   "date filter ."
   "header main ."
   "links main ."
   "services main .";
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 40rem;
  padding: 0;
  /*background-color: var(--lblue);
  background-image: radial-gradient(hsla(var(--blue-hsl),0.25) 1px, transparent 0);
  background-size: 4px 4px;*/
  overflow: scroll;
 }
 
 /*body {
  position: relative;
  display: grid;
  grid-template-columns: var(--aside-width) 1fr;
  grid-template-rows: 3rem 1fr repeat(2, auto);
  grid-template-areas:
   "date header"
   "filter main"
   "services main"
   "links main";
  justify-content: start;
  align-items: end;
  gap: 0 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 40rem;
  padding: 0;
  background-color: var(--bg);
  background: *//*radial-gradient(ellipse closest-side at top 50vh left calc(var(--aside-width) / 2), hsla(var(--lblue-hsl),0.5) 0%, hsla(var(--lblue-hsl),0.4) 75%, transparent var(--aside-width)),*/
   /*hsla(var(--blue-hsl),0.4);
  overflow: scroll;
 }*/

 /* Header basic structure */
 
 header {
  position: relative;
  grid-area: header;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 1.25rem;
  gap: 0;
  background: none;
  background-color: transparent;
 }
 main {
  grid-area: main;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
   ". head ."
   ". table .";
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-height: calc(100% - 5.5rem);
  max-height: 100%;
  padding: var(--padding-normal);
 /* filter: drop-shadow(0.25rem 0.25rem 0.5rem hsla(var(--text-hsl),0.25));*/
  transform: rotate(0deg); /* for fixed caption in Voyage calculation */
  z-index: 0;
 }
 main:hover {
  box-shadow: none;
 }

 h1 {
  grid-area: head;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: auto;
  width: 100%;
  padding: 1rem var(--padding-small) var(--padding-normal) var(--padding-small);
 }
 h3 {
  display: block;
  position: relative;
  height: auto;
  width: auto;
  color: var(--blue);
  margin: 0;
  padding: 0 0 1rem 0;
  text-align: right;
  background-color: transparent;
  transition: all 500ms ease-in-out;
 }
 h4 {
  display: block;
  height: auto;
  width: 100%;
  margin: 0 auto 0.25rem 0;
  padding: 0.25rem;
  color: var(--bg);
  font-style: italic;
  /*text-decoration: underline 1px solid var(--text);
  text-underline-offset: 4px;*/
 }
 .date {
  position: relative;
  display: block;
  height: auto;
  width: auto;
  margin: 0 auto 0 0;
  padding: 0.5rem 1rem;
  text-align: center;
  color: var(--blue);
 }
 nav:not(.services nav) {
  position: relative;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 1rem;
  width: auto;
  height: auto;
  border: none;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  
  a, a:link, a:visited {
   flex-flow: row nowrap;
   gap: 0;
   padding: 0;
   color; var(--blue);
   text-transform: uppercase;
  }
  a.here, a.here:link, a.here:visited, a:hover, a:link:hover, a:visited:hover {
  }
 }


 .links, .services {
  position: relative;
  left: 0.25rem;
  display: block;
  height: auto;
  width: calc(var(--aside-width) - 2rem);
  margin: 0 auto 3rem auto;
  padding: 0.5rem;
  border-right: 0.25rem solid var(--blue);
  background-color: transparent;
  
  div {
   padding: 0.5rem 0;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-end;
  }
  
  /*background: 
   linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) 100%),
   linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) 100%),
   linear-gradient(to top, transparent 0, transparent calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) 100%),
   linear-gradient(to top, transparent 0, transparent calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) calc(100% - 1.5rem), hsla(var(--text-hsl),0.75) 100%),
   linear-gradient(to bottom, hsla(var(--text-hsl),0.75) 0, hsla(var(--text-hsl),0.75) 2px, transparent 2px, transparent 100%),
   linear-gradient(to bottom, hsla(var(--text-hsl),0.75) 0, hsla(var(--text-hsl),0.75) 2px, transparent 2px, transparent 100%),
   linear-gradient(to top, hsla(var(--text-hsl),0.75) 0, hsla(var(--text-hsl),0.75) 2px, transparent 2px, transparent 100%),
   linear-gradient(to top, hsla(var(--text-hsl),0.75) 0, hsla(var(--text-hsl),0.75) 2px, transparent 2px, transparent 100%);
  background-repeat: no-repeat;
  background-position: bottom left, bottom right, top left, top right, top left, top right, bottom left, bottom right;
  background-size: 2px, 2px, 2px, 2px, 0.5rem, 1.5rem, 1.5rem, 1.5rem;*/
  transition: all 200ms ease-in-out;
 }
 .filter div, .services nav, .links div {
  background-color: transparent;
 }
 
 
 .filter {
  div {
   padding: 0.5rem 0;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: stretch;
  }
  a {
   margin: 0 0.25rem;
   padding: 0 0.75rem;
  }
 }
 
 
 .links {
  grid-area: links;
  /*background-color: var(--links-bg);*/
  
  a:link, a:visited {
   color: var(--text);
  }
 }
 .utilities {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 3rem;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 1000;
  
  a {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   height: 3rem;
   padding: 0 0.5rem;
   background-color: transparent;
   border-top: 2px solid transparent;
  }
  a:link, a:visited {
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 14;
   color: var(--bg);
   stroke: var(--bg);
  }
  a:hover, a:active, a:focus, a:link:hover, a:link:active, a:link:focus {
   color: var(--blue);
   stroke: var(--blue);
  }
  a span {
   display: contents;
  }
 }
 .filter {
  grid-area: filter;
  align-self: start;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  height: auto;
  width: auto;
  margin: 0.5rem 0 0.5rem auto;
  padding: 0.1rem 0.5rem;
  
  div {
   height: auto;
   padding: 0.35rem 0.25rem;
   border-radius: 0.5rem;
   background-color: var(--blue);
  }
  a, a:link, a:visited {
   color: var(--bg);
   border-radius: 0.25rem;
  }
  a:hover, a:focus {
   color: hsla(var(--text-hsl),0.75);
   background-color: hsla(var(--bg-hsl),0.75);
  }
  
  a.here, a.here:link, a.here:visited {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
   color: var(--text);
   background-color: var(--bg);
  }
  /*a.here::before, a.here:link::before, a.here:visited::before {
   display: inline-block;
   content: url("../images/anchor-simple-light.svg");
   position: relative;
   top: 1px;
   height: 1.2rem;
   width: 1.2rem;
   margin-right: 0.25rem;
   padding: 0;
  }*/
 }
 
.services {
  grid-area: services;
  
  nav {
   position: relative;
   left: auto;
   right: auto;
   top: 0;
   bottom: auto;
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 0;
   height: fit-content;
   padding: 0;
   border: none;
  }
  a, a:link, a:visited {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 0;
   padding: 0 0.5rem;
   color: var(--text);
  }
 }

 .scrollwrapper {
  grid-area: table;
  height: calc(100% - var(--nav-height));
  padding: 0;
 }
}


/*--------------------------------------------*/
/* Navigation search overlay layer formatting */
/*--------------------------------------------*/

.overlay {
 box-sizing: border-box;
 display: none;
 margin: 0;
 padding: 0;
 opacity: 0; 
 transition: all 500ms;
}
.overlay:target {
 box-sizing: border-box;
 position: fixed;
 top: 0;
 left: 0;
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 align-items: stretch;
 height: auto;
 width: 100vw;
 width: 100dvw;
 margin: 0;
 padding: 0;
 opacity: 1;
 overflow-x: scroll;
 z-index: 1000;
 background-color: var(--bg);
 border-bottom: 0.25rem solid var(--text);
 box-shadow: 0.5rem 1rem 5rem hsla(var(--text-hsl),0.5);
}

/*---------------------------------------------------------*/
/* First DIV formatting - if any and searchform formatting */
/*---------------------------------------------------------*/

.overlay a, .overlay a:link, .overlay a:visited {
 color: var(--text);
}
.breadcrumbs, .searchform {
 position: relative;
 margin: 0;
 padding: 0;
 transition: all 500ms;
 z-index: 1000;
}
.overlay:target .breadcrumbs {
 display: flex;
 flex-flow: row nowrap;
 justify-content: flex-end;
 align-items: center;
 gap: 0.75rem;
 height: var(--nav-height-sml);
 width: 100%;
 margin: 0;
 padding: 0 var(--padding-small) 0 calc(var(--padding-small) - 0.75rem); /* Left margin - counting .close padding into account */
 color: var(--bg);
 background-color: var(--darkblue);
 box-shadow: none;
 filter: none;
 text-align: right;
}
.overlay:target .breadcrumbs > svg {
 display: block;
 position: relative;
 top: 2px;
 height: 1.5rem;
 width: 1.5rem;
 margin: 0;
 stroke: var(--bg);
 stroke-linecap: butt;
 stroke-linejoin: miter;
 stroke-width: 18;
}
.overlay:target .breadcrumbs > span {

}

/* Close button formatting */

.overlay a:has(.close), .overlay a:has(.close):link, .overlay a:has(.close):active, .overlay a:has(.close):visited {
 justify-self: flex-start;
 position: relative;
 display: block;
 height: 0;
 width: 0;
 background-color: transparent;
}
.overlay:target a:has(.close), .overlay:target a:has(.close):link, .overlay:target a:has(.close):visited  {
 height: var(--nav-height-sml);
 width: var(--nav-height-sml);
 margin: 0 auto 0 0;
 padding: 0.75rem;
 z-index: 1002;
}
.overlay:target > a:hover, .overlay:target > a:focus, .overlay:target > a:active {
 background-color: transparent;
 cursor: pointer;
}

.overlay:target a:hover .close {
 left: auto;
 right: auto;
 transform: rotate(180deg);
}

/* Search form formatting */

.overlay .searchform {
 height: 0;
 width: 0;
 margin: 0;
 padding: 0;
}
.overlay:target .searchform {
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: space-around;
 align-items: center;
 height: auto;
 width: 100%;
 margin: 0 auto;
 margin-inline-start: auto;
 margin-inline-end: auto;
 padding-block-start: 2rem;
 padding-block-end: 2.5rem;
 padding-inline-start: 0;
 padding-inline-end: 0;
 min-inline-size: min-content;
 background-color: var(--bg);
 /*filter: drop-shadow(1px 1px 0.5rem hsla(var(--text-hsl), 0.05));*/
 overflow: scroll;
}

/* Link to All records near button */

.searchform fieldset:last-of-type {
/* a {
  display: block;
  color: var(--text);
  /*text-decoration-line: underline;
  text-decoration-color: var(--lblue);
  text-decoration-style: solid;
  text-decoration-thickness: 0.25rem;
  text-underline-offset: 0.5rem;
  align-self: center;
  border: 2px solid var(--lblue);
  transition: all 0.3s ease-in-out;
 }
 a:hover, a:focus, a:active {
  text-decoration: none;
 }
 a:hover, a:focus {
  color: var(--lblue);
 }
 a:active {
  color: var(--text);
 }*/
}

/* ! Legend should not be displayed due to mobile OS bug, but must be kept for accessibility */
.overlay:target legend {
 position: absolute;
 top: 0;
 left: 0;
 height: auto;
 width: auto;
 margin: 0 auto 0 0;
 padding: 0;
 z-index: 0;
}

.overlay:target legend:hover, .overlay:target legend:focus {
 
}

/*--------------------------*/
/* Sectioning Search fields */
/*--------------------------*/

.searchform fieldset {
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 align-items: stretch;
 flex: 2 0 auto;
 height: auto;
 width: 18rem;
 margin: 0 auto;
 padding: 0.5rem 0 1.5rem 0;
 padding: 0.8dvh 0 2dvh 0;
 border: none;
}
.searchform fieldset:last-of-type {
 padding: 0;
}

/*---------------------------*/
/* Search field's formatting */
/*---------------------------*/

 
.searchform div {
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: flex-start;
 height: auto;
 width: 100%;
 margin: auto;
 padding: 0 0.2rem;
 /*overflow: visible;*/
 z-index: 20;
}
.searchform div.date_range {
 flex-flow: row nowrap;
 justify-content: space-between;
 align-items: flex-start;
 padding: 0;
 margin: 0;
}
.searchform div.date_range > div {
 width: 8.4rem;
 margin: 0;
}
.searchform select, .searchform input, .searchform input[type="date"] {
 width: 100%;
 margin: 0 0 1rem 0;
 margin: 0 0 1.75dvh 0;
}
.searchform input.half {
 width: 100%;
}

/*-------------------------------*/
/* Button formatting adjustments */
/*-------------------------------*/

.searchform button {
 position: relative;
}

/* Service area */
fieldset.links {
 display: flex;
 flex-flow: column wrap;
 justify-content: flex-start;
 align-items: flex-start;
 height: 0;
 width: 100%;
}
fieldset.links a {
 display: block;
 width: 240px;
 height: 50px;
}

@media (orientation: landscape) OR (width >= 40rem) {
 .overlay:target {
  top: 4rem;
  right: var(--padding-normal);
  bottom: auto;
  left: auto;
  width: 25rem;
 }
}

@media (orientation: landscape) AND (max-height: 35rem) {
 .overlay:target {
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  width: 100dvw;
  padding: 0 env(safe-area-inset-left);
 }
 .overlay a:has(.close), .overlay a:has(.close):link, .overlay a:has(.close):active, .overlay a:has(.close):visited {
  /*top: 0;
  right: 0;*/
 }
 .overlay:target .breadcrumbs {
 
 }
/* .overlay:target .breadcrumbs svg {
  transform: rotate(-90deg);
 }*/
 .overlay:target .searchform {
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  padding-block-start: 1.5rem;
  padding-block-end: 2rem;
 }
 .searchform fieldset {
  justify-content: flex-start;
  align-items: flex-end;
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 0;
 }
 .searchform fieldset:last-of-type:not(.report-button-set) {
  flex-flow: row-reverse nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--padding-normal);
  /*width: 100%;*/
  white-space: nowrap;
  
  button, a {
  /* width: 18rem;*/
   margin-left: 0;
   margin-right: 0;
  }
 }
 .searchform fieldset div {
  select, input, input[type="date"], input[type="time"] {
   margin: 0 0 4dvh 0;
  }
 }
 .searchform select, .searchform input, .searchform input[type="date"], .loginform select, .loginform input {
  height: clamp(2rem,8vh,2.5rem);
  margin: 0 0 clamp(0.75rem,2vh,1.5rem) 0;
 }
 button {
  margin: 1rem auto;
 }
 div:has(button + button) {
  button {
   margin: clamp(0.5rem,2.5dvh,0.75rem) auto;
  }
 }
}


@media (min-width: 88rem) AND (height >= 32rem) {
 .overlay:target {
  position: fixed;
  top: 4rem;
  bottom: auto;
  left: 10rem;
  right: auto;
  min-height: auto;
 }

 .overlay:target .searchform {
  flex-flow: column nowrap;
  height: 100%;
 }
}


/*--------------------------------------------------*/
/* Voyage calculation edit overlay layer formatting */
/*--------------------------------------------------*/

.edit {
 display: none;
}
.edit:target {
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 position: absolute;
 max-width: 100%;
 background-color: var(--white);
}
.edit:target .breadcrumbs {
 top: 0;
 width: 100%;
 color: var(--white);
 background-color: var(--blue);
}
.edit form {
 width: auto;
 background-color: var(--white);
}
@media (min-width: 720px) {
 .edit:target {
  right: auto;
  left: 0;
  height: auto;
  width: 100vw;
  padding: 0;
 }
}
 @media (min-width: 1158px) {
  .edit:target {
   top: 0;
   left: auto;
   width: 1158px;
   max-width: 1158px;
   margin: 0 auto;
 }
}

/* ------------------ */
/*   Login Form       */
/* ------------------ */

.login {
 display: block;
 color: var(--text);

 main {
  display: block;
  width: calc(100% - 2rem);
  max-width: 40rem;
  height: auto;
  min-height: auto;
  max-height: min-content;
  margin: 10vh auto auto auto;
  margin: 10dvh auto auto auto;
  padding: 5rem 10vw 3rem 10vw;
  border-radius: 0.15rem
  background-color: var(--bg);
  transform: rotate(0deg); /* for fixed caption in Voyage calculation */
  z-index: 0;
 }
 .loginform, .loginform fieldset, .loginform legend, .loginform fieldset div {
  height: auto;
 }
 .loginform, .loginform fieldset, .loginform legend {
  margin: 0;
  padding: 0;
  text-align: center;
 }
 .loginform, .loginform legend, .loginform fieldset {
  width: calc(100% - 1rem);
  max-width: 20rem;
  margin-inline: auto;
 }
 .loginform {
  z-index: 100;
 }
 .loginform fieldset:not(fieldset:last-of-type) {
  justify-content: flex-start;
  align-items: center;
  padding: 3rem 0 0 0;
  z-index: 101;
 }
 .loginform legend {
  display: block;
  text-align: center;
  z-index: 102;
 }
 .loginform legend span {
  display: block;
  padding: 1rem 0 0 0;
  color: hsla(var(--text),0.8);
 }
 .loginform button {
  position: relative;
  top: auto;
  right: auto;
  margin: 5vh auto 3vh auto;
 }
 .loginform input:-internal-autofill-selected {
     appearance: menulist-button;
     background-image: none !important;
     background-color: var(--white) !important;
 }
}
/* End of Login Form */

@media (min-width: 35rem)  {
 .login main {
  padding: 5rem 5rem 3rem 5rem;
 }
}

@media (max-height: 45rem) AND (orientation: landscape) {
 .login main {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 7vh 5rem 3vh 5rem;
 }
 .loginform fieldset {
  padding: 7vh 0 0 0;
 }
}

 
/*----------
   Button 
----------*/

input.add {
 display: block;
 align-self: flex-start;
}

/*-----------
    Table 
------------*/
.scrollwrapper {
 position: relative;
 height: 100%;
 width: 100%;
 padding: 0 0 env(safe-area-inset-bottom) 0;
 margin: 0 auto 1rem auto;
 border-bottom-left-radius: 1rem;
 border-bottom-right-radius: 1rem;
 background-color: transparent;
 transform: rotate(0deg); /* for fixed position of print button */
 overflow: scroll;
 z-index: 1;
}

@media (min-width: 88rem) {
 .scrollwrapper {
  width: auto;
  max-width: 100%;
  padding: 0;
 }
}

/*--------------*/
/* Table layout */
/*--------------*/

table a, table a:link, table a:visited {
 display: inline-block;
 font-size: inherit;
 padding: 0;
 color: inherit;
 text-decoration: none;
 cursor: pointer;
}
table a:hover, table a:focus, table a:active {
 text-decoration: underline 0.25rem solid var(--seablue);
 text-underline-offset: 4px;
}
table a:hover::before, table a:focus::before, table a:active::before {
}

table {
 position: relative;
 width: auto;
 height: auto;
	margin: 0;
 padding: 0;
	border-collapse: collapse;
 border-spacing: 0;
 background-color: transparent;
 overflow: scroll;
 z-index: 0;
}

caption {
 
}
thead {
 
}

thead th {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 height: 1.4rem;
 padding: 0 1.5rem 0.15rem 1.5rem;
 margin: 0;
 vertical-align: bottom;
 color: hsla(var(--text-hsl),1);
 background-color: var(--bg);
 box-shadow: inset 0 -3px 0 var(--text)/*, 
  inset 0 2px 0 var(--text)*/;
 z-index: 5;
}
/*.first-level {
 box-shadow: inset 0 2px 0 var(--text);
}*/
.second-level {
 top: 1.4rem;
 box-shadow: inset 0 1px 0 var(--text), inset 0 -3px 0 var(--text);
}
tbody {
 border: 0;
 overflow: scroll;
}

/* Month and year span in the table */
/*----------------------------------*/

tbody th {
 position: -webkit-sticky;
 position: sticky;
 top: calc(1.4rem + 3px); /* calculated through font size differencies */
 height: auto;
 width: auto;
 margin: 0;
 padding: 0 0.25rem 0 1.25rem;
 text-align: left;
 color: var(--text);
 background-color: transparent;
}

thead tr:first-of-type th:first-of-type, tbody tr:first-of-type th:first-of-type {
 left: 0;
 background-color: var(--bg);
 z-index: 6;
}

/*----------------------------------*/


tfoot {
}
tbody tr{
 height: auto;
 border-bottom: 2px solid hsla(var(--lgrey-hsl),0.25);
}
tbody tr:first-of-type {
 width: auto;
}
tbody tr:last-of-type {
 border-bottom: 2px solid var(--text);
}
tbody tr:has(th) {
 border-bottom: none;
}
tbody td {
 padding: 0 1.5rem;
 text-align: left;
 color: var(--text);
 background-color: var(--bg);
 z-index: 0;
}
tbody td:first-of-type {
 position: -webkit-sticky;
 position: sticky;
 left: 0;
 z-index: 1;
}
tr:hover td, tr:focus td, tr:active td {
 background-color: var(--white);
}
tr:hover td:hover, tr:hover td:focus, tr:hover td:active {
 background-color: var(--white);
}
tr:focus td:hover, tr:focus td:focus, tr:focus td:active {
 background-color: var(--white);
}
tr.total td {
 padding-top: 1.5rem;
 padding-bottom: 1.5rem;
}
td {
 height: auto;
 vertical-align: middle;
 width: auto;
}

tfoot td {
 padding: 1.5rem 1.5rem;
}
td:last-of-type a {
 font-style: normal;
 font-size: 30px;
 margin: 0 10px;
}
td:last-of-type a:hover, td:last-of-type a:focus, td:last-of-type a:active {
 color: var(--white);
 text-decoration: none;
}


@media (orientation: landscape) AND (height < 32rem) {
 table {
  width: 100%;
 }
 tbody th {
 }
 tbody td {
  padding: 0.5rem 1.5rem;
 }
}

@media (min-width: 88rem) AND (height >= 32rem) {
 table {
  width: auto;
  margin: 0 auto;
 }
 thead th {
  top: 0;
 }
 tbody th span {
  padding: 0;
 }
 tbody td {
  padding: 0.75rem 1.5rem;
 }
  
}


/*------------------------------------
  Voyage calculation table formatting
-------------------------------------*/

a.back {
 display: flex;
 flex-flow: row nowrap;
 justify-content: flex-start;
 align-items: center;
 padding: 8px;
}
a.back, a.back:link, a.back:visited {
 color: var(--text);
}
a.back:hover, a.back:focus, a.back:active {
 text-decoration: underline solid 1px var(--text);
 text-underline-offset: 2px;
}
a.back::before {
 display: inline-block;
 content: '\2794';
 position: relative;
 height: 34px;
 width: 34px;
 margin-right: 8px;
 padding: 0 8px;
 font-size: 16px;
 line-height: 32px;
 border: 2px solid var(--text);
 border-radius: 17px;
 transform: rotate(180deg);
}

/*------------------------------------------------
  Voyage calculation formatting 
-------------------------------------------------*/
.voyage {
 --offset-small: -0.35rem;
 --gap-icon: 0.1em;
 --gap-small: 0.5rem;
 --padding-side: clamp(1.5rem, calc(1.5rem + 0.25vw), 2rem);
 
 nav {
 display: none;
}
 main {
  max-width: none;
 }
 .scrollwrapper {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas:
   "result-head"
   "income-result"
   "expenses-result"
   "bunker-result"
   "charter-result"
   "schedule-result"
   "schedule"
   "income"
   "expenses"
   "bunker"
   "charter"
   "notes";
  gap: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  transform: rotate(0deg);
 }
 .icon-small {
  display: inline-block;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 20;
  position: relative;
  height: 1rem;
  width: 1rem;
  margin: 0;
  padding: 0;
  background-color: transparent;
 }
 h1 {
  position: relative;
  display: grid;
  grid-template-columns: auto 2.5rem auto 1fr;
  grid-template-rows: repeat(2, auto);
  grid-template-areas:
   "voy voy voy edit"
   ". slash voydata voydata"
   "vessel slash voydata voydata";
  gap: 1rem 0.5rem;
  justify-content: start;
  width: 100%;
  margin: 0;
  padding: 1.5rem var(--padding-small);

  span {
   display: block;
   width: auto;
  }
  a {
   grid-area: edit;
   justify-self: start;
   align-self: start;
   height: 2rem;
   width: 2rem;
   padding: 0 1rem 1rem 0;
  }
  .slash {
   justify-self: center;
  }
  .edit-link {
   justify-self: end;
  }
 }
 h1 > div {
  padding: 0;
 }
 h1 > div:first-of-type, h1 > div:last-of-type {
  display: flex;
 }
 h1 > div:first-of-type {
  grid-area: voy;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  /*align-self: end;*/
  gap: 0.5rem;
 }
 h1 > div:first-of-type div {
  position: relative;
  padding: 0 0.6rem;
  width: min-content;
  height: 1.4rem;
  line-height: 1.4rem;
  margin: 0;
  text-align: center;
 }
 h1 > div:first-of-type div::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: inline-block;
  width: 100%;
  height: 1.2rem;
  background-color: var(--filter-bg);
  border-radius: 0.6rem;
  z-index: -1;
 }
 h1 > div:nth-of-type(2) {
  grid-area: vessel;
  align-self: end;
  text-align: left;
 }
 h1 > div:last-of-type {
  grid-area: voydata;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  
  span, a {
   margin: 0;
  }
 }
 h2 {
  grid-area: section-head;
  grid-row: 1;
  grid-column: 1 / 4;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: auto;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 1rem var(--padding-small) 0.25rem var(--padding-small);
  color: var(--text);
  border-bottom: 2px solid var(--lblue);
  background-color: var(--bg);
  z-index: 3;
  
  .icon-small {
   stroke: var(--text);
  }
 }
 h2:not(section h2) {
  margin-block-end: 0.75rem;
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
  width: calc(100% - 2rem);
 }

 section > h2 {
  position: sticky;
  top: 0;
 }
.result-head {
   grid-area: result-head;
  }
 
 a:has(.close) {
  background-color: transparent;
 }
 .label {
  color: var(--grey);
 }
 
 section {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--padding-small) + 2rem) calc(var(--padding-small) + 2rem) 1fr; /* 3rem + 3rem + 2 * 0.5rem gap */
  grid-template-rows: auto;
  justify-content: start;
  align-items: stretch;
  gap: 0.25rem 0.5rem;
  width: calc(100% - 2rem);
  min-width: calc(100% - 2rem);
  height: auto;
  margin: 1rem;
  padding: 0 0 2rem 0;
  background-color: var(--bg);
  
  .edit-link, .back-link {
   grid-row: 2;
   position: relative;
   stroke: var(--text);
  }
  .edit-link {
   left: var(--padding-small);
   height: 2rem;
   width: 2rem;
   padding: 0 1rem 1rem 0;
   margin: 0;
  }
  .edit-link:first-of-type {
   grid-column: 1;
  }
  .edit-link:nth-of-type(2) {
   grid-column: 2;
  }
  .back-link {
   grid-column: 3;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-items: center;
   gap: var(--gap-icon);
   width: 100%;
   padding: 0 var(--padding-small) 1rem 0; 
   color: var(--text);
  
   svg {
    stroke-width: 20;
   }
  }
 }
 .card {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: start;
  justify-items: start;
  gap: 0.5rem 1rem;
  width: 100%;
  min-width: 100%;
  height: auto;
  margin: 0;
  padding: 1rem var(--padding-small);
  background-color: transparent;
 }
 .card:not(.card:first-of-type) {
  .back-link {
   display: none;
  }
 }
 hr {
  grid-area: grid-line;
  grid-column: 1 / -1;
  width: 100% ;
  border-top: 1px solid var(--lgrey);
  margin: 0 auto;
 }
.datablock {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  padding: 0;
 }
/* 
 h3 {
  display: block;
  padding-top: 1rem;
 }
 h4 {
  position: absolute;
  top: 1.1rem;
  left: 30%;
  padding: 0 0.25rem;
  z-index: 1000;
 }*/
 
 .total {
  grid-column: 1 / 4;
  width: calc(100% - 2 * var(--padding-side));
  margin: 0 auto;
  padding: 1rem 0;
  border-top: 1px solid var(--lgrey);
 }
 .schedule-result, .income-result, .expenses-result, .bunker-result, .charter-result {
  a, a:link, a:visited {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   margin: 0;
   padding: 0 var(--padding-side);
   color: var(--text);
  }
 }
 
 .income-result, .expenses-result, .bunker-result, .charter-result {
  a {
   div:last-of-type {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: var(--gap-small);
    width: 8rem;
   }
  }
 }
 
.schedule .operation, .income .port, .expenses .expense, .bunker .fuel-type {
 position: relative;
 left: -0.5rem;
 display: flex;
 flex-flow: row nowrap;
 justify-content: flex-start;
 align-items: center;
 gap: var(--gap-icon);
 width: auto;
 padding: 0.15rem 0.5rem;
 margin: 0;
 color: var(--text);
 stroke: var(--text);
 background-color: var(--links-bg);
 border-radius: 0.75rem;
}
 .schedule .operation span, .income .port span, .expenses .expense span, .bunker .fuel-type span {
  z-index: 1;
 }
 /*.schedule .operation::before, .income .port::before, .expenses .expense::before, .bunker .fuel-type::before {
  content: '';
  position: absolute;
  left: 0rem;
  top: 0rem;
  display: inline-block;
  width: 100%;
  height: 1.3rem;
  background-color: hsla(var(--lblue-hsl), 0.3);
  transform: skewX(-10deg);
  z-index: 0;
 }*/
    

 
 /* Schedule section */
 .schedule {
  grid-area: schedule;
  
  .card { /* Schedule card template with all inner elements */
   grid-template-columns: 3fr 3fr 2fr;
   grid-template-areas:
    "operation operation ."
    "port port ."
    ". arrived duration-s"
    ". sailed duration-p"
    "agent agent .";
   gap: 0 1.5rem;
   }
  
  .card:first-of-type { /* Last port card template */
   grid-template-areas:
    "operation operation ."
    "port port  ."
    ". sailed .";
   filter: none;
   }
 
  .operation {
   grid-area: operation;
   margin-bottom: 1rem;
  }
  .port {
   grid-area: port;
   width: auto;
  }
  .arrived, .sailed, .duration-s, .duration-p {
   justify-self: end;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-items: center;
   gap: var(--gap-icon);
   width: auto;
   margin: 0;
   color: var(--text);
   stroke: var(--text);
  }
  .arrived, .sailed, .duration-s svg, .duration-p svg  {
   gap: var(--gap-icon);
  }
  .duration-s {
   grid-area: duration-s;
  }
  .duration-p {
   grid-area: duration-p;
  }
  .duration-t {
   grid-area: duration-t;
   margin: 0;
   color: var(--text);
   stroke: var(--text);
  }
  .agent {
   grid-area: agent;
   display: none;
  }
  .agent:last-child {
   font-size: var(--small-text);
  }
  .arrived {
   grid-area: arrived;
  }
  .sailed {
   grid-area: sailed;
  }
  .duration-total { /* Total Schedule lines with all inner elements */
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: flex-end;
  } /* End Total */
 } /* End Schedule */
 
 /* Schedule-result section */
 .schedule-result {
  grid-area: schedule-result;
  
  div {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-items: center;
   gap: var(--gap-small);
   margin: 0;
   color: var(--text);
   stroke: var(--text);
  }
 } /* End Schedule-result */
 
 /* Freight section */
 .income {
  grid-area: income;
  
  h3.deductions {
   grid-area: h3-d;
  }
  h3.additions {
   grid-area: h3-a;
  }
  .card {
   position: relative;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(9, auto) ;
   grid-template-areas:
    "port port port port . ."
    "cargo cargo cargo qtty qtty qtty"
    "charterer charterer charterer charterer charterer charterer"
    "freight-brutto freight-brutto freight-brutto freight-rate freight-rate comm-rate"
    "h3-a h3-a h3-a h3-d h3-d h3-d"
    ". . . comm comm comm"
    "demurrage demurrage demurrage dem-comm dem-comm dem-comm"
    ". . . dispatch dispatch dispatch"
    "freight-net freight-net freight-net freight-net . .";
   gap: 1rem;
   margin: 0;
  }

  .port {
   grid-area: port;
  }
  .cargo {
   grid-area: cargo;
  }
  .qtty {
   grid-area: qtty;
  }
  .charterer {
   grid-area: charterer;
  }
  .freight-rate {
   grid-area: freight-rate;
  }
  .freight-brutto {
   grid-area: freight-brutto;
  }
  .comm-rate {
   grid-area: comm-rate;
   justify-self: end;
  }
  .freight-net {
   grid-area: freight-net;
  }
  .qtty {
   justify-self: end;
  }
  .demurrage {
   grid-area: demurrage;
  }
  .comm {
   grid-area: comm;
  }
  .dem-comm {
   grid-area: dem-comm;
  }
  .disp {
   grid-area: dispatch;
  }
 } /* End Income */
 
 .income-result {
  grid-area: income-result;
 }
 
 /* Expenses section */
 .expenses {
  grid-area: expenses;
  
  .card { /* Expenses card template with all inner elements */
   grid-template-columns: repeat(2, 1fr) 1.3fr;
   grid-template-rows: auto minmax(2rem, auto) auto;
   grid-template-areas:
    "expense expense expense"
    "port port port"
    "company company amount";
   gap: 0.5rem 1rem;
   margin: 0 auto;
  }
/*  .card:first-of-type {
   margin-top: 1rem;
  }*/
  .port {
   grid-area: port;
  }
  .company {
   grid-area: company;
  }
  .expense {
   grid-area: expense;
  }
  .amount {
   grid-area: amount;
   justify-self: end;
  }
 } /* End Expenses */
 
 .expenses-result {
  grid-area: expenses-result;
 }
 
 /* Bunker section */
 .bunker {
  grid-area: bunker;
  
  .card { /* Bunker card template with all inner elements */
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-template-areas: 
    "fuel-type . roe"
    "bunker-cons bunker-cons price"
    "company bunker-date port"
    "amount amount amount";
   margin: 0 auto;
  }
  .roe, .fuel-type {
   height: 1.2rem;
   line-height: 1.2rem;
   margin: 0;
  }
  .roe {
   grid-area: roe;
   justify-self: end;
   display: block;
   padding: 0 0.6rem 0 0.2rem;
   color: var(--text);
   border-radius: 0.1rem;
   background-color: var(--lgrey);
  }
  .fuel-type {
   grid-area: fuel-type;
  }
  .bunker-cons {
   grid-area: bunker-cons;
  }
  .company {
   grid-area: company;
  }
  .port {
   grid-area: port;
  }
  .bunker-date {
   grid-area: bunker-date;
  }
  .amount {
   grid-area: amount;
  }
  .price {
   grid-area: price;
  }
  .total {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-content: center;
  }
 } /* End Bunker */
 
 .bunker-result {
  grid-area: bunker-result;
 }
 
 /* Charter expenses section */
 .charter {
  grid-area: charter;
  
  .card { /* Schedule card template with all inner elements */
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-template-areas:
    "duration-tc duration-tc duration-tc"
    "tc-rate time-hire time-offhire"
    "time-net . ."
    "amount amount .";
   margin: 0 auto;
  }
  .duration-tc {
   grid-area: duration-tc;
  }
  .tc-rate {
   grid-area: tc-rate;
  }
  .time-hire {
   grid-area: time-hire;
   justify-self: end;
  }
  .time-offhire {
   grid-area: time-offhire;
   justify-self: end;
  }
  .time-net {
   grid-area: time-net;
  }
  .amount {
   grid-area: amount;
  }
 } /* End Charter */
 
 .charter-result {
  grid-area: charter-result;
 }
 
 /* Notes section */
 .notes {
  grid-area: notes;
 }/* End Notes */
 
} /* End Voyage */

/* Formatting for bigger screens */


/*----------------------------
  Voyage calculations results
-----------------------------*/
.voyage-result-top {
 position: fixed;
 top: 0;
 right: 0;
 display: grid;
 grid-template-columns: 1fr auto auto;
 grid-template-areas: 
  "close profit tceq";
 justify-content: end;
 align-items: center;
 gap: 1rem;
 height: var(--nav-height-sml);
 width: 100%;
 padding: 0 1rem;
 background-color: var(--lblue);
 z-index: 1000;
 
 div {
  margin: 0;
 }
 div:first-of-type {
  grid-area: profit;
 }
 div:last-of-type {
  grid-area: tceq;
 }
 a:has(.close) {
  justify-self: start;
  display: block;
  height: auto;
  width: auto;
  margin: 0 auto 0 0;
 }
 .label {
  color: var(--text);
 }
}
.voyage-result-top > div {
 position: relative;
 display: flex;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: flex-start;
 gap: 0;
 width: fit-content;
 height: 100%;
 margin: 0;
 padding: 0;
 z-index: 1001;
}

.voyage-result-bottom {
 display: none;
}

@media (min-width: 45rem) /*(orientation: landscape) AND (max-height: 35rem)*/  {
 html:has(.voyage) {
  height: auto;
  max-height: none;
 }
 .voyage {
  grid-template-columns: calc(100vw - env(safe-area-inset-left));
  grid-template-rows: var(--nav-height-sml) calc(100dvh - var(--nav-height));
  grid-template-areas:
   "nav"
   "main";
  max-height: none;
  
  main {
   padding: 0;
   overflow: scroll;
  }
  h1 {
   grid-template-columns: repeat(2, auto) 1.5rem;
   grid-template-areas: 
   "voy voydata edit"
   "vessel voydata .";
   padding: 1rem var(--padding-side) 1.5rem var(--padding-side);
  }
  .edit-link {
   align-self: start;
  }
  .result-head {
   margin: 1.5rem auto 1rem 0;
  }
  & .schedule-result, & .income-result, & .expenses-result, & .bunker-result, & .charter-result {
   a, a:link, a:visited {
    align-items: flex-end;
    padding: 0;
   }
   div:last-of-type {
    min-width: 8rem;
   }
  }
  & .income-result, & .schedule-result {
   a, a:link, a:visited {
    margin: 0 auto 0 var(--padding-side);
   }
  }
  & .expenses-result, & .bunker-result, & .charter-result {
   a, a:link, a:visited {
    margin: 0 var(--padding-side) 0 auto;
   }
  }
  & .schedule, & .bunker {
   .total {
    gap: 0 2rem;
    justify-content: flex-start;
   }
  }
 
  .scrollwrapper {
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
   "result-head result-head"
   "income-result expenses-result"
   "schedule-result bunker-result"
   ". charter-result"
   "schedule schedule"
   "income income"
   "expenses expenses"
   "bunker bunker"
   "charter charter"
   "notes notes";
   max-width: none;
   gap: 0 calc(2rem + 4vw);
   /*overflow: visible;*/
  }
  
  section {
   max-width: 100%;
  }
  
  /* Schedule section formatting */
  .schedule {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   gap: 0.75rem;

  
 /* Schedule card template with all inner elements */
   .card {
    grid-row: 3 / 5;
    grid-column: auto;
    grid-template-columns: 0.7fr repeat(3, 1fr) 0.7fr;
    grid-template-rows: 1rem 1rem repeat(4, auto) 6rem; 
    grid-template-areas:
     ". . . duration-s duration-s"
     ". . . duration-p duration-p"
     "operation operation operation operation ."
     "port port port port ."
     ". arrived arrived arrived ."
     ". sailed sailed sailed ."
     "agent agent agent agent .";
    justufy-content: start;
    align-items: start;
    gap: 0.5rem;
    min-width: auto;
    width: calc(100% - var(--padding-side));
    margin: 0 auto;
    padding: 1rem;
    background-color: hsla(var(--white-hsl), 0.5);
    border: 1px solid var(--lgrey);
    border-radius: 0.5rem;
   }
  
   .card:first-of-type { /* Last port card template */
    grid-row: 3 / 4;
    grid-template-rows: 2.5rem repeat(2, auto); 
    grid-template-areas:
     ". . . . ."
     "operation operation operation operation ."
     "port port port port ."
     ". sailed sailed sailed .";
    justify-content: start;
    height: auto;
    width: calc(100% - var(--padding-side));
    margin: 0 0 0 var(--padding-side);
   }
   .card:nth-of-type(3n) {
    width: calc(100% - var(--padding-side));
    margin: 0 var(--padding-side) 0 0;
   }
   .port .label {
    left: clamp(-1.5rem, calc(-1.5rem + 0.5vw), -1rem);
   }
   .agent {
    display: block;
   }
  } /* Schedule end */
  
  /* Freight section formatting */
  .income {
   .card {
    position: relative;
    grid-template-columns: 0.3fr repeat(5, 1fr);
    grid-template-rows: repeat(7, auto) ;
    grid-template-areas:
     "port port port . . ."
     ". cargo charterer qtty freight-rate comm-rate"
     ". . . . h3-a h3-d"
     ". . . freight-brutto . comm"
     ". . . . demurrage dem-comm"
     ". . . . . dispatch"
     ". . . freight-net . .";
    gap: 0.5rem 1rem;
    margin: 0 auto;
   }
   .qtty {
    justify-self: start;
   }
  }
  
  /* Expenses section formatting */
  .expenses {
   .card {
    position: relative;
    grid-template-columns: 0.3fr repeat(2, 1fr) 3fr 1.5fr;
    grid-template-rows: auto;
    grid-template-areas:
     "expense expense expense . ."
     ". port company company amount";
    align-items: end;
    margin: 0 auto;
    padding: 0.5rem var(--padding-side);
   }
   .amount {
    justify-self: start;
   }
  } /* End Expenses */
  
  /* Bunker section */
 .bunker {
  .card { /* Bunker card template with all inner elements */
   grid-template-columns: 0.3fr repeat(3, 1fr) 0.5fr;
   grid-template-rows: auto;
   grid-template-areas: 
    "fuel-type fuel-type . . ."
    ". bunker-cons price amount roe"
    ". company bunker-date port .";
   margin: 0 auto;
  }
 } /* End Bunker */
  
  .voyage-result-top {
   left: env(safe-area-inset-left);
   display: grid;
   grid-template-columns: 1fr auto auto;
   grid-template-areas: 
    "close profit tceq";
   justify-content: end;
   align-items: center;
   gap: 2rem;
   height: var(--nav-height-sml);
   width: calc(100vw - env(safe-area-inset-left));
   padding: 0 var(--padding-side);
   background-color: var(--lblue);
   z-index: 1000;
  }
 } /* End Voyage 45rem */
} /* End 45rem formatting */

@media (min-width: 88rem) AND (height >= 32rem) {
 html:has(.voyage) {
  height: 100vh;
 }
 
 .voyage {
  grid-template-columns: var(--aside-width) 1fr;
  grid-template-rows: 4rem repeat(3, auto);
  grid-template-areas:
   "date header "
   "filter main"
   "links main"
   "services main";
  align-items: start;
  gap: 3rem 1rem;
  width: 100%;
  height: 100%;
  padding: var(--padding-small);
  background-color: var(--lblue);
  overflow: scroll;

  nav, .utilities {
   display: flex;
  }
  .voyage-result-top {
   grid-area: top;
   position: relative;
   height: 4rem;
   width: 100%;
   padding: 0 var(--padding-normal);
   background-color: var(--links-bg);
   border-radius: 0.5rem;
  }
  h1 {
   grid-area: header;
  }
  h2 {
   color: var(--text);
   background-color: transparent;
  }
  main {
   grid-template-rows: auto;
   grid-template-areas:
   ". top ."
   ". header ."
   ". scroll .";
   padding: 1rem 0;
  }
  .scrollwrapper {
   grid-area: scroll;
   height: 100%;
  }
 }
}

/*--------------
   Pallette 
---------------*/

/* Colour classes */

.red {
 color: var(--red);
}
.border-red {
 border: 1px solid var(--red);
 border-radius: 0.15rem;
}
.lblue {
 color: var(--lblue);
 stroke: var(--l blue);
}
.blue {
 color: var(--blue);
 stroke: var(--blue);
}
.border-blue {
 border: 1px solid var(--blue);
 border-radius: 0.15rem;
}
.white {
 color: var(--white);
 stroke: var(--white);
}
.green {
 color: var(--green);
 stroke: var(--green);
}
.grey {
 color: var(--grey);
}
.seablue {
 color: var(--seablue);
}
.lblue {
 color: var(--lblue);
 stroke: var(--lblue);
}
.lgrey {
 color: var(--lgrey);
}
.bg {
 background-color: var(--bg);
}
.text {
 color: var(--text);
 stroke: var(--text);
}


/* end of colour structure */
 
/*-----------------------------
   Other formatting styles
-----------------------------*/

.right {
 text-align: right;
}
.left {
 text-align: left;
}
.center {
 text-align: center;
}

/*---------------------
   Errors & messages
----------------------*/

.error, .message {
 grid-area: message;
	margin-bottom: 70px;
	padding: 30px 50px;
	line-height: 28px;
	width: 100%;
	border-radius: 4px;
	filter: drop-shadow(1px 5px 5px rgba(var(--dblue-rgb), 0.2));
}
.error {
	color: var(--white);
	background-color: var(--orange);
	/*border-left: 2px solid var(--orange);*/
}
.message {
	color: var(--white);
	background-color: var(--blue);
	/*border-left: 2px solid var(--navblue);*/
}



/*---------------------------------------------------
  Graphics - colour palette, boders and backgrounds - old styles if any
----------------------------------------------------*/
/*body {
 background: radial-gradient(ellipse 300px 250px at top 200px left 3vw, rgba(var(--white-rgb),0.8), transparent),
             radial-gradient(ellipse 150px 200px at bottom 180px left 9vw, rgba(var(--white-rgb),0.5), transparent);
 background-color: var(--white);
}*/
 

/*body {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: var(--body-height);
 min-height: var(--body-height);
 max-height: var(--body-height);
 margin: 0 auto;
 padding: 0;
 display: grid;
 grid-template-columns: 2fr 2fr 2fr 2fr;
 grid-template-rows: 68px calc(var(--body-height) - 68px);
 grid-template-areas:
  "header header header header"
  "main main main main";
 background-color: var(--lblue);
}*/

/*Different border lines
/*
/*background-image: linear-gradient(to right, var(--text), var(--text)),
                   linear-gradient(to right, var(--text), var(--text));
 background-position: left bottom, left bottom 6px;
 background-repeat: repeat-x, repeat-x;
 background-size: 1px 1px, 1px 3px;*/

/* Map border
/*
/* background-image: linear-gradient(to right, var(--lblue) 50%, transparent 50%),*/ /* top dashes */
/*                   linear-gradient(to right, var(--lblue), var(--lblue)),*/ /* top top line */
/*                   linear-gradient(to right, var(--text), var(--text)); /* top  bottom line */
/* background-position: left bottom 1px, left bottom, left bottom 8px;
/* background-repeat: repeat-x, repeat-x, repeat-x;
/* background-size: 60px 3px, 1px 1px, 1px 1px;
/*box-shadow: inset 0 32px var(--blue),*/ /* white border on top of dark border */
/*            inset 0 34px var(--lblue); *//* dark border under white for a line around */

/* Map scale
/*
/* nav li {
/* background-image: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--blue) calc(50% - 1px), var(--blue) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), /* risochki */
/*                   linear-gradient(to right, var(--blue), var(--blue)); /* line */
/* background-position: left bottom, left bottom;
 background-repeat: no-repeat, repeat-x;
 background-size: 100% 6px, 1px 3px;
}
nav li:first-of-type {
  background-image: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--blue) calc(50% - 1px), var(--blue) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), /* risochki */
/*                   linear-gradient(to right, transparent, transparent calc(50% - 1px), var(--blue) calc(50% - 1px), var(--blue)); /* line */
/* background-repeat: no-repeat, no-repeat;
/* background-size: 100% 6px, 100% 3px;
 }
 nav li:last-of-type {
  background-image: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--blue) calc(50% - 1px), var(--blue) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), /* risochki */
/*                   linear-gradient(to right, var(--blue), var(--blue) calc(50% + 1px), transparent calc(50% + 1px), transparent); /* line */
/* background-repeat: no-repeat, no-repeat;
/* background-size: 100% 6px, 100% 3px;
/* } */

/*background: radial-gradient(ellipse 120vw 110vh at center, white, white 50%, var(--grey) 100%),
            white;*/

/*background: radial-gradient(circle at top 30% left 50%, hsla(var(--bg-hsl),0.6) 0, hsla(var(--bg-hsl),0.3) 10%, transparent 30%),
  linear-gradient(to bottom, var(--dblue) 0, var(--blue) 10%, hsla(var(--lblue-hsl),0.5) 25%, hsla(var(--seablue-hsl),0.5) 40%, hsla(var(--seablue-hsl),0.8) 80%, var(--dblue) 100%),
  var(--white);*/


/* Accordion menu

/*.menu_icon {
 position: relative;
 height: auto;
 width: auto;
 margin: 0 auto;
 padding: 0;
 cursor: pointer;
}
.menu_button ~ .bottom {
 display: none;
}
.menu_button {
 opacity: 0;
}
.menu_button ~ label.menu_opened {
 display: none;
}
.menu_button ~ .breadcrumbs {
 display: none;
}
.menu_button:checked ~ label.menu_opened {
 display: block;
 position: fixed;
 top: 8px;
 right: 8px;
 padding: 8px;
 z-index: 1001;
}
.menu_button:checked ~ .breadcrumbs {
 display: block;
 position: relative;
 width: auto;
 height: auto;
 margin: 0;
 padding: 0 8px;
 text-align: center;
 color: var(--skyblue);
 text-decoration-line: underline;
 text-underline-offset: 4px;
 z-index: 1000;
}
.menu_button:checked ~ label.menu_closed {
 display: none;
}
.menu_button ~ ul {
 list-style: none;
 width: 100%;
 height: 0;
 margin: 0;
 margin-block-start: 0;
 margin-block-end: 0;
 margin-inline-start: 0;
 margin-inline-end: 0;
 padding-inline-start: 0;
 z-index: 20;
}
.menu_button:checked ~ ul {
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 align-items: center;
 height: 100vh;
 width: 100vw;
 margin: 0;
 padding: 80px 16px 32px 16px;
 overflow: scroll;
}
.menu_button ~ ul li {
 display: none;
 position: relative;
 height: 0;
 width: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
 border: none;
 transition: height 0.3s ease-in-out;
}

.menu_button:checked ~ ul li {
 display: block;
 height: auto;
 padding: 0;
}*/
/*h1 a > div:first-of-type::before, h1 a > div:first-of-type:link::before, h1 a > div:first-of-type:visited::before {
 content: url("../images/my_location_20dp_000000_FILL0_wght500_GRAD0_opsz20.svg");
 position: absolute;
 left: 0;
 top: 18px;
 height: 20px;
 width: 20px;
}
h1 a > div:first-of-type:hover::before, h1 a > div:first-of-type:focus::before, h1 a > div:first-of-type:active::before {
 content: url("../images/my_location_20dp_000000_FILLtext_wght500_GRAD0_opsz20.svg");
}*/