.navbar {background-color : #CCC;}
.navbar .navbar-item.button { margin: auto;}
nav.buttons {margin-top: -1.2rem; }
body > article {margin: 0.5rem;}
.article-part {margin-top: 1.5rem; padding-bottom: 0.5rem; }
.article-part:not(:last-child) {border-bottom: 1px dashed #CCC;}
.article-subpart {margin-top: 1.5rem; padding-bottom: 0.5rem; }

.footer {background-color : #CCC; padding: 1.5rem; }
a.external {font-style: italic; }
.for-image-90x90 {padding: 0; height: auto; width: auto;}
.for-image-90x90.with-legend {display: block; padding: 0.75em;}
.image-90x90 {height: 90px; width: 90px; display: grid; margin: auto; }
.image-90x90 > img {margin: auto; }
.image-90x90 > noscript {margin: auto; }
.photo-flex .for-image-90x90 {width: 90px; display: inline-flex; margin: .25em .25em 0 0; vertical-align: middle; }
.photo-flex .for-image-90x90 .image-90x90 img {width:auto; max-height: 100%; max-width: 100%; margin: auto; }

.message a.message-body.nodecoration {display: block; text-decoration: none !important}

div.unicode-page form {margin: 0.5em}
div.unicode-page div.scrollable {overflow-x: auto; max-width: 100%;}
table.unicode-page {display: grid; grid-template-columns: min-content; margin-bottom: 1rem}
table.unicode-page th, table.unicode-page td {text-align: center; vertical-align: middle;}
table.unicode-page th {font-size: 0.7em; background-color: #BBB;}
table.unicode-page .char {width: 1.75em; height: 1.75em;}
table.unicode-page .char.even {background-color: lightgrey;}
table.unicode-page .char a {color: black; text-decoration: none; display: block; overflow: visible; width: 1.75em; line-height: 1.75em; }
.unicode-char .big {font-size: 6em; min-width: 2em}
.unicode-char.modal-card-body .big {min-width: 1em}

#domoasStatus {display: flex; flex-wrap: wrap; align-items: center;}
.sixMeterDiv { display: flex; flex-wrap: wrap;}
.sixMeterDiv .highcharts-grid-line { stroke: none; }
.meterDiv { width: 300px; height: 200px;}

.level-like-media > div.level-left {align-items : flex-start; flex-shrink : 1;}
.level-like-media > div.level-left > .level-item {flex-shrink : 1; text-align: justify;}

#nojsphoto .event > .panel-heading h2:before {content: '🗁'; display: inline-block; width: 1.5em;}
#nojsphoto .event.is-collapsed > .panel-heading h2:before {content: '🗀';}
#nojsphoto .event.is-collapsed > .panel-block {display: none;}
#nojsphoto .photo-panel {display: flex; align-items: flex-start; flex-wrap: wrap; }
#nojsphoto .photo-panel > .button.for-image-90x90 {flex-grow: 0; flex-shrink: 0; margin-right: 0.75em; margin-bottom: .75em;}
#nojsphoto .photo-panel > .photo-desc {flex-shrink: 1; flex-grow: 1; display: block; width: calc(100% - 120px); min-width: 250px; }
#nojsphoto.only-small .panel-block {display:inline-flex; flex-wrap: wrap; padding: 0; border: none;}
#nojsphoto.only-small .photo-panel {display: inline;}
#nojsphoto.only-small .photo-panel > .button.for-image-90x90 {margin: .25em .25em 0 0; }
#nojsphoto.only-small .photo-panel .content {display: none;}
#modalphoto .modal-background {background-color: rgba(10, 10, 10, 0.94); }
#modalphoto .modal-content  {color: white; }
#modalphoto .modal-content .nav-left, #modalphoto .modal-content .nav-right {position: absolute; top: -1em ; height: calc(100% + 1em); width: 50%; display: flex; justify-content: center; font-size: 1.5em; }
#modalphoto .modal-content .nav-left {left: 0; }
#modalphoto .modal-content .nav-right {right: 0; }
#modalphoto .photo-desc p {text-align: center; color: white; }
#modalphoto .image img {width:auto; max-height: 100%; max-width: 100%; margin: auto; }

@media (min-width: 560px) {
  table.unicode-page .char {width: 2em; height: 2em;}
  table.unicode-page .char a {width: 2em; line-height: 2em;}
}
@media (min-width: 690px) {
  table.unicode-page .char {width: 2.5em; height: 2.5em;}
  table.unicode-page .char a {width: 2.5em; line-height: 2.5em;}
}