.diaryHeader { display:flex; flex-wrap: wrap-reverse; }
.diaryHeader>* { padding: 0 0 0.75em 0; margin-top: 0.25em; margin-bottom: 0em; }
.diaryHeader .lblFriendlyDate { margin-right:1em; }
.diaryHeader .dateContainer { flex-grow:1; text-align:right;  }

.dialogPanel.logbookEntry{ width:100vw; max-width:36em; max-height:100vh; overflow:auto; }
.logbookEntry .titleContainer { display: flex; width: 100%; gap:1em; }
.logbookEntry .tbTime {width:4em; }
.logbookEntry .tbTitle {width:8em; flex-grow:1; }
.logbookEntry .lblTitle { flex-grow: 1; }
.logbookBoxes { display: flex; gap: 0.5em; flex-grow: 1; flex-wrap:nowrap; }
.logbookBoxes .plhBoatSetup {border: none; width:10em; min-width:8em; max-width:50%;}
.logbookBoxes .data { display: flex; flex-wrap: nowrap; gap:0.5em; flex-grow:1;}
.logbookBoxes .data .logbookBox { flex-basis:8em; flex-grow:1; max-width: 15em; min-width: 8em;}
.logbookBoxes .data.editable .logbookBox { flex-basis:10em; flex-grow:1; max-width: 15em; min-width: 10em;}
.logbookBox { min-height: 11em; padding: 0.125em 0.25em; border: 1px solid #ccc; }

.logbookRow { hyphens: auto;}
.logbookRow:nth-child(odd) {background-color:#eee;}
body.night .logbookRow:nth-child(odd) {background-color:#222;}
.logbookRow .outer, .logbookRow .inner {display: flex; flex-direction: row; flex-wrap: wrap; align-content:start; flex-grow: 1; flex-basis:10%;}
.logbookRow .outer { padding-left:0.25em; padding-right: 0.75em; } 
.logbookRow .cell { display:block; flex-grow: 1; }
.logbookRow .outer.general {flex-basis: 10%; flex-wrap: wrap-reverse; }
.logbookRow .inner.general {flex-basis: 7em;}
.logbookRow .inner.image {flex-grow: 0; padding-right: 0.5em;}
.logbookRow .cell.time {min-width: 3em;}
.logbookRow .cell.title {min-width: 8em; flex-basis:70%; }
.logbookRow .cell.boat {width: 3em; height: 4em; position: relative;}
.logbookRow .notes {flex-basis: 100%; padding:2px;}
.logbookRow .outer.data {flex-basis: 50%;}
.logbookRow .outer.nav {flex-basis: 20%; flex-grow: 0.8; }
.logbookRow .inner.coordinates { min-width: 9em; flex-direction:column;}
.logbookRow .inner.cogSogLog { display:block; min-width: 12em; flex-basis:20%;  }
.logbookRow .outer.meteo {flex-basis: 30%; }
.logbookRow .inner.weather {min-width: 9em; flex-basis:20%; }
.logbookRow .inner.airWind { flex-basis: 60%; }
.logbookRow .inner.air { display:block; min-width: 10em; }
.logbookRow .inner.wind { display:block; min-width: 10em; }
.logbookRow .icons { display: flex; flex-wrap: wrap; flex-direction: row; flex-basis: 3%; align-content:start; justify-content:end; min-width: 1.5em; }
.logbookRow .icons a { padding: 0.25em;}

.newEntryImage { width: 6em; height: 6em; position: relative; margin: 0em 1em 1em 0em;}

@media (max-width:800px){
	.logbookBoxes { flex-wrap:wrap; }
	.logbookBoxes .data { flex-direction: column; gap:0em;}
	.logbookBoxes .data .logbookBox { border: none; padding: 0em; background-color:unset; min-height:unset; min-width: unset; flex-basis: unset;}
	.logbookBoxes .data .logbookBox .semiBold {display: none; }
}

@media (max-width:534px){
	.logbookBoxes.editable .plhBoatSetup {width:7em;}
	.logbookBoxes { flex-wrap:wrap; }
	.logbookBoxes.editable .data { flex-direction: column; gap:0em;}
	.logbookBoxes.editable .data .logbookBox { border: none; padding: 0em; background-color:unset; min-height:unset; flex-basis: unset;}
	.logbookBoxes.editable .data .logbookBox .semiBold {display: none; }
}

.logbookBox>span,  .logbookBox>div { flex-grow:0; min-width: 7.5em; } 
.logbookBox>span.semiBold, .logbookBox>div.semiBold { width: 100%; }
.logbookBox>span:empty { display: none; }
.logbookBox .label { width: 3.5em; display: inline-block; }
.logbookBox .labelSmall { width: 2.3em; display: inline-block; }
.logbookBox .labelIcon { width: 1.5em; display: inline-block; }
.logbookBox .labelIcon i { font-size: 1.25em; }
.logbookBox .inlineTextbox { border-style: initial; padding-right: 0.125em; }
.logbookMeteo { background-color: #fafafa; }
.logbookNav { background-color: #fafafa; }
.logbookBoat { width: 10em; height: 11em; padding: 0em; position:relative; }

.pnlPublish {max-width:100em; min-width:25em;}
.pnlPublish > div{display:flex; }
.pnlPublish > div.title {}
.pnlPublish > div.title > div.center {flex: 0 0 20%; font-weight:600;}
.pnlPublish > div.title > div.summary {flex: 0 0 40%; }
.pnlPublish div.map {min-height:10em;height:30vh; min-width:10em; border:1px solid #333}
.pnlPublish .diaryText {flex: 1 0 10em; overflow:auto;font-size:0.75em;line-height:1.25em;max-height:50vh;}
.pnlPublish .logbookEntries, .pnlPublish .photos {width: calc(50% - 2em); max-height:9em; max-width:unset; overflow:auto; background-color:#eee;}
.pnlPublish .logbookEntries > div{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pnlPublish .photos {width: 50%; max-width: 50%; max-height:50vh; overflow:auto; display:flex; flex-wrap:wrap; justify-content:space-evenly;}
.pnlPublish .photos > div {width: 138px; padding-top: 5px; text-align:center; display: flex; flex-direction: column; justify-content: flex-end; margin: 5px; }
.pnlPublish .photos > div img {display: block; margin-left:auto; margin-right: auto; max-height:128px; max-width:128px; }
.pnlPublish .photos > div .label{max-width: 128px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnlPublish .photos > div .label label{font-size:0.75em; }

.pnlJobInfo { 
	width: 30em; min-width: 20em; max-width: 95vw;
}

.pnlJobInfo .pnlMessages{max-height:15em; overflow:auto;}

.logbookImageUpload { display:flex; flex-direction:column; gap:0.5em; max-width:20em; }

/* night styles for logbook */
body.night .logbookBox{border-color:#999}
body.night .logbookMeteo, body.night .logbookNav { background-color: #000; }

.boatSetupForm { max-width: 21.5em; }
.boatSetupDetails { width: 100vw; max-width: 35.5em; }
.boatSetupDetails .image { position: relative; height: 18em; width:16em; }
.boatSetupDetails .features { width:17em; }

.diaryText { text-align:justify; line-height:1.4em; hyphens:auto; }
textarea.diaryText { text-align: left; hyphens: none; }

.diaryPhotos { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; }

.thumbnailContainer {
	margin: 1em;
	min-width: 15em; width:25vw; max-width:24em; 
	min-height: 15em; height:25vw; max-height:24em; 
	display:flex; flex-direction:column; justify-content:center;
}
.diaryPhotos.tiny .thumbnailContainer {
	margin: 0.25em;
	min-width: unset; width: 4em; 
	min-height: unset; height: 4em;
}
.thumbnail { max-height:100%; max-width:100%; margin: 0 auto; box-shadow: 0em 0em 1em -0.25em #000; transition: box-shadow 0.5s}
.thumbnail:hover { box-shadow: 0em 0em 1em #000; cursor:pointer;}
.photoScreen {
	display:flex;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	z-index: 13500;
	background-color: rgba(0, 0, 0, 1);
}

.photoScreen .photo{
	max-width:100%; max-height:100%; margin:auto;
}

.photoScreen .lnkPrevious, .photoScreen .lnkNext, .photoScreen .pnlOptions, .photoScreen .pnlFooter {
	position:absolute;
	display:flex;
	background-color: rgba(68, 82, 86, 0.8);
	transition: all 0.5s
}

.photoScreen a, .photoScreen span, .photoScreen div {
	color:#fff;
	transition: all 0.5s
}

.photoScreen .pnlOptions, .photoScreen .pnlFooter {
	width:100%;
	height: 3em;
	align-items:center;
	padding:0em 1em;
	justify-content:space-between;
}

.photoScreen .pnlOptions {
	height: 2.5em;
}

.photoScreen .pnlFooter {
	height: 1.75em;
	bottom:0px;
}

.photoScreen .pnlFooter .lblFileName{
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.photoScreen .lnkPrevious, .photoScreen .lnkNext {
	align-items:center;
	justify-content:center;
	top:40%;
	height:20%;
	width: 4em;
	max-width:10vw;
	min-width:2.5em;
}

.photoScreen.fullscreen > div, .photoScreen.fullscreen > a {
	background-color: rgba(51, 51, 51, 0);
}

.photoScreen.fullscreen a, .photoScreen.fullscreen a:hover, .photoScreen.fullscreen span, .photoScreen.fullscreen div  {
	color: rgba(238, 238, 238, 0);
}

.photoScreen .lnkPrevious {
	left: 0px;
	border-top-right-radius:0.25em;
	border-bottom-right-radius:0.25em;
}

.photoScreen .lnkNext {
	right: 0px;
	border-top-left-radius:0.25em;
	border-bottom-left-radius:0.25em;
}

.photoScreen a:hover {
	color: #B2D3FF;
}

.photoScreen.fullscreen a:hover {
	/*color: #fff;*/
}

.photoScreen a > i {font-size:2em; }

.rcCalendar.diaryCalendar { width: calc(100vw - 40px); max-width:40em; right:10px; }
.rcCalendar.diaryCalendar .datesTable .td { height:4em; }
.rcCalendar.diaryCalendar .datesTable .td a, .rcCalendar.diaryCalendar .datesTable .td a:active, .rcCalendar.diaryCalendar .datesTable .td a:visited {padding-top:0.25em;}
.rcCalendar.diaryCalendar .icons { display:block; margin-top:0.25em;}
.rcCalendar.diaryCalendar .icons>i { margin:0em 0.125em; color:#666; }
.rcCalendar.logbookCalendar{right:10px;}

@media (max-width:600px){
	.rcCalendar.diaryCalendar {left: 0px; right:0px; width:100vw;}
}

@media (max-height:500px){
	.rcCalendar.diaryCalendar .datesTable .td a, .rcCalendar.diaryCalendar .datesTable .td a:active, .rcCalendar.diaryCalendar .datesTable .td a:visited {padding-top:0em;}
	.rcCalendar.diaryCalendar .datesTable .td { height:3.25em; }
	.rcCalendar.diaryCalendar .icons { margin-top:0em;}
}

/* Switch from grid design to one row, only showing non-empty days, only for diary calendar */
@media (max-width: 480px){
	.rcCalendar.diaryCalendar .datesTable.days, .rcCalendar.diaryCalendar .datesTable.days .tr { display: flex; flex-direction: column; }
	.rcCalendar.diaryCalendar .datesTable.days .th { display: none; }
	.rcCalendar.diaryCalendar .datesTable.days .td { width: unset; flex-grow:1; height: 2em;	}
	.rcCalendar.diaryCalendar .datesTable.days .td.empty, .rcCalendar.diaryCalendar .datesTable.days .td.oddMonth { display: none; }
	.rcCalendar.diaryCalendar .icons { display:inline-block; }
	.rcCalendar.diaryCalendar .datesTable .td a,
	.rcCalendar.diaryCalendar .datesTable .td a:active,
	.rcCalendar.diaryCalendar .datesTable .td a:visited
		 { display:flex; align-items: center; justify-content:space-between; padding: 0em 0.5em;}
}