html, body {width: 100%; height: 100%; margin: 0; font-family: sans-serif;}

.body {
    display: grid;
    grid-template-columns: 1fr 3fr auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
    'logo nav profile'
    'breadcrumb breadcrumb breadcrumb'
    'aside article article'
    'footer footer footer';
    height: 100%;
}

.logo {grid-area: logo; padding: 0.5em 1em 0.2em 1.5em; align-self:center}
.nav {grid-area: nav; padding: 1em 1em 0em 1em; align-self: end;}
.profile {grid-area: profile; white-space: nowrap; padding: 1em 1.5em 0 1em;}
.aside {grid-area: aside; padding: 1.5em;}
.breadcrumb {grid-area: breadcrumb; padding: 0 1.5em;}
.article {grid-area: article; padding: 1.5em 1em;}
footer {grid-area: footer; text-align: center; padding: 0.5em 1.5em;}

.logo .text {font-size: 1.3em; font-family: logoFont; letter-spacing: .1rem; color: black; vertical-align: middle;}
.logo .dots {display: inline-block; width: 1em; height: 1.4em; position: relative; vertical-align: middle;}
.logo .dots span {
    height: 0.4em; width: 0.4em; border-radius: 50%;
    display: inline-block; position: absolute;
    background-color: #37f; transition: background-color 0.3s ease;
}
.logo .dots .top {top: 0.1em;}
.logo .dots .middle {top: 0.5em; left: 0.5em;}
.logo .dots .bottom {top: 0.9em;}
.logo a:hover .text {color: #37f;}
.logo a:hover .dots span {background-color: #2C2;}
.logo a:hover .dots .top, .logo.loading .dots .top {animation: 0.5s ease-in-out flash-top;}
.logo a:hover .dots .middle, .logo.loading .dots .middle {animation: 0.5s ease-in-out flash-middle;}
.logo a:hover .dots .bottom, .logo.loading .dots .bottom {animation: 0.5s ease-in-out flash-bottom;}
.logo.loading .dots .top, .logo.loading .dots .middle, .logo.loading .dots .bottom {animation-iteration-count: infinite;}
@keyframes flash-top { from {top: 0.1em; left: 0em;} to {top: 0.5em; left: 0.5em;} }
@keyframes flash-middle { from {top: 0.5em; left: 0.5em;} to {top: 0.9em; left: 0;} }
@keyframes flash-bottom { from {top: 0.9em;} to {top: 0.1em;} }

.nav .item {margin-right: 1.5em; line-height: 1.5em;}
.nav .count {color: gray;}

.profile a {display: block;}

nav.breadcrumb .selected, .body.storages .nav .storages a, .body.drivers .nav .drivers a {color: gray; font-weight: bold; cursor: default;}
nav.breadcrumb .divider {margin: 0 0.5em;}
nav.breadcrumb span {vertical-align: middle;}

.aside ul {list-style-type: none; padding: 0;}
.aside li {padding: 0.5em;}
.aside li.divider {border-bottom: 1px solid gray; margin-bottom: 1em;}
.aside a {display: inline-block; text-decoration: none; color: inherit;}
.aside input {font-size: 1.2em;}
.aside p {margin-block-start: 0; margin-block-end: 1.5em;}
.aside .info {display: grid; grid-template-columns: auto 1fr; gap: 1em; font-size: 0.8em; color: gray; margin-top: 1em;}
.aside .search {display: grid; grid-template-columns: 1fr auto; margin-bottom: 1.8em; align-items:center;}
.aside .search input {grid-column-start: 1; grid-column-end: 3; grid-row: 1; display: inline-grid;}
.aside .search .link {grid-column: 2; grid-row: 1; padding: 0.3em 0;}
.aside .search .link svg {width: 1.5em; height: 1.5em;}
.aside .search input { padding: 0.2em 1.6em 0.2em 0.5em;}

.aside h3 {color: gray; padding-bottom: 0.5em; margin-block-start: 0.5em;}
.aside .filter {padding: 0.5em 0; margin-bottom: 1.5em;}
.aside .selected {color: gray; font-weight: bold;}
.aside .ctrl {padding-bottom: 0.5em;}
.aside .btn {margin: 1.5em 0; display: block;}
#delete-photo {margin: 2em 1.5em;}

.filter .divider {margin: 0 0.5em;}

.article .header {color: gray; margin-bottom: 1.5em;}
.article .header h2 {margin-top: 0.2em;}
.article .header p { margin-block-start: 0; }
.article .legend {display: grid; grid-template-columns: min-content auto; gap: 1em;}
.article .legend span {white-space: nowrap;}
.article .legend a {padding: 0;}

.add a, .add span {color: forestgreen;}
.add svg {stroke: forestgreen;}

.btn {
    cursor: pointer; padding: 0.4em 1em 0.5em 1em; font-size: 1.3em;
    border: 1px solid black; border-radius: 2em; background-color: transparent; transition: all 0.3s;
}
.btn:not(:disabled):hover {background-color: #eee; color: #37f;}
.btn:not(:disabled):hover svg {stroke: #37f;}
.btn:disabled {cursor: default;}
.btn:disabled svg {stroke: gray;}
.btn svg, .btn span {vertical-align: middle;}
.btn svg {margin-right: 0.3em;}

#print_posters {margin-top: 1.5em;}

svg.plus path {stroke: forestgreen;}
.block-label {color: gray;}

.thumbnail {display: inline-block; vertical-align: top; margin-right: 0.5em;}
.thumbnail img {width: 240px; height: 135px; border-radius: 0.5em;}
.thumbnail .info {display: inline-block; font-size: 0.8em; color: gray;}
.thumbnail .link {display: inline-block; vertical-align: top; margin-left: auto;}
.thumbnail .icon svg {width: 1.5em; height: 1.5em; margin: 0;}
.thumbnail .btn {margin-left: auto;}

.photo-box {display: inline-block; grid-template-rows: min-content min-content; max-width: 600px; border-radius: 1em; margin-right: 1em;}
.photo-box .img-box {display: grid; padding: 0;}
.photo-box .img-box img {grid-row: 1; grid-column: 1; width: 480px; height: 270px; border-radius: 1em;}
.photo-box .new-window {grid-row: 1; grid-column: 1; text-align: end; width: 1em; height: 1em; margin: 0.5em 0.5em 0.5em auto;}
.photo-box .ctrl-box {margin: 1em 0;}
.photo-box .ctrl-box button {margin-right: 1em;}
.photo-box .img-box:hover a {color: #37f;}
.photo-box .img-box:hover .new-window svg {stroke: #37f;}
.photo-ctrl .selected {color: gray; font-weight: bold;}

.card {display: grid; grid-template-columns: 1fr 1fr; gap: 1em; border: 1px solid black; border-radius: 0.5em; padding: 1em 1.5em; margin-bottom: 1em;}
.card .row a, .card .row span {vertical-align: middle;}
.card .row.title .label {font-size: 1.5em; padding-top: 0;}
.card .icon {padding: 0.5em; cursor: pointer; vertical-align: middle;}
.card .details {display: grid; grid-template-columns: min-content min-content min-content; gap: 1em;}
.card .details span {padding: 0.5em 0;}
.card .details .value {white-space: nowrap;}
.card .info {color: gray;}
.card .row.extra {padding: 0.5em 0;}
.card .row.extra .label {font-size: 0.8em;}

.icon.disabled {cursor: initial;}
.disabled svg.trash path {stroke: gray;}
.disabled, .disabled span {color: gray;}
.disabled svg {stroke: gray;}

.poster {
    display: inline-block; margin-right: 1em; margin-bottom: 1.3em; padding: 0.5em 1em; font-size: 1.2em;
    border: 1px solid black; box-shadow: 0 0 0.3em #777;}
.poster p {margin-block-start: 0.5em; margin-block-end: 0.5em; padding: 0;}
.poster .row {display: grid; grid-template-columns: auto 1fr auto; align-items: center;}
.poster .row div {display: inline-block; vertical-align: middle;}
.poster .io {font-size: 3em;}
.poster img {width: 100%; margin-top: 2em;}
.poster button {margin: 1em 1em 1em 0; font-size: 1.2em;}
.poster input {margin-left: 1em; font-size: 1.2em;}

.row .logo {margin: auto 0 auto auto;}
.row .logo span {vertical-align: middle;}
.row .logo svg {width: 1em; height: 1em; vertical-align: middle;}

.edit-form .required {font-size: 0.8em; color: gray; margin-bottom: 2em; margin-left: 0.2em;}
.edit-form .required b {font-size: 1.5em; vertical-align: top; margin-right: 0.3em;}
.edit-form .item {height: 5.5em; transition: all 0.4s ease-in-out;}
.edit-form .item.hide {height: 0; overflow: hidden;}
.edit-form .row {display: grid; grid-template-columns: 1em 1fr auto; gap: 0.8em; align-items:center;}
.edit-form .row .radio {display: grid; gap: 1em;}
.edit-form .row .radio input {margin: 0 0.5em 0 0;}
.edit-form .row .label {grid-column: 1; grid-row: 1; font-size: 2em; color: gray; margin: auto 0; width: 1em; height: 0.8em;}
.edit-form .row input[type=text], .edit-form .row input[type=number] {
    grid-column-start: 2; grid-column-end: 4; grid-row: 1; display: inline-grid; font-size: 1.2em; padding: 0.5em 2.5em 0.5em 1em;
}
.edit-form .row .link {grid-column: 3; grid-row: 1; padding: 0.5em; align-items: center;}
.edit-form .row .link svg {width: 1.2em; height: 1.2em;}
.edit-form .item .hint {display: grid; grid-template-columns: auto 1fr auto; gap: 2em; margin: 0.5em 0 0 4em;}
.edit-form .item .hint span {display: inline-flex;}
.edit-form .item .hint span.hidden {display: none;}
.edit-form .checkbox {margin-bottom: 2em;}
.edit-form .checkbox input {margin: 0.2em 0 0 0; vertical-align: top;}
.edit-form .checkbox .label {display: inline-block; padding-left: 0.8em; white-space: initial;}
.edit-form .ctrl {margin-bottom: 2em;}
.edit-form .ctrl .button {margin-left: 1em; padding: 0.5em 1em; font-size: 1.3em;}
.edit-form .ctrl .link {margin-left: 1.7em;}
.edit-form .ctrl .btn {margin: 0 1.5em;}
.edit-form .add-cam {margin-bottom: 1.7em;}
.edit-form .add-cam .hint {vertical-align: bottom; color: gray;}
.edit-form .row input.error {border: 1px solid indianred; border-radius: 0.1em;}
.edit-form .errorlist {display: inline; list-style: none;}
.edit-form .errorlist li {display: inline;}
.edit-form .alert-danger {margin-bottom: 2em;}

.ctrl .link svg {margin-right: 0.5em;}

/* Common styles */
a {text-decoration: none; padding: 0.5em 0; color: #000; vertical-align: middle; display: inline-block;}
a, a .text, .link, .link span {transition: color 0.3s;}
svg {transition: stroke 0.3s;}
a:hover, .link:not(.disabled):hover, .link:not(.disabled):hover span {color: #37f;}
a:hover svg, .link:not(.disabled):hover svg, .icon:hover svg {stroke: #37f;}
.link {color: black;}
.disabled:hover {cursor: default;}
.disabled:hover svg {stroke: gray;}

a span, a svg, .link span, .link svg {vertical-align: middle;}
a svg, .link svg {margin-right: 0.5em;}
a.selected {cursor: default;}
.hidden, a.hidden, span.hidden {display: none;}

svg {width: 1em; height: 1em;}
.link {cursor: pointer; white-space: nowrap;}
.hint {color: gray; font-size: 0.8em;}
.error, .delete {color: indianred;}
.error svg, .delete svg {stroke: indianred;}
.empty-article {margin-top: 0.5em;}

footer a {margin: -0.3em 2em 0 2em;}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
}

@font-face {
    font-family: logoFont;
    src: url(logo.woff2);
}

@media print {
    .body {display: block;}
	.no-print {display: none;}
	.print .poster {display: block; margin: 0; border: none; box-shadow: none;}
    .pagebreak {page-break-after: always; display: block;}
}