/* overall layout / typography */
:root {
    --color-1: #8b0000;
    --color-1-tr: rgba(139, 0, 0, 0.8);
    --color-2: gold;
}

html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    position: relative;
    overflow-y: scroll;
    background-color: #e7e7e7 ;
    /* background-color: #efecea; */
    /* background-color: #e8e4e0; */
}

div.wrapper {
    display: flex;
}


main {
    /* min-width: 280px; */
    background-color: #fff ;

}

main header {}

main footer {
    position: fixed;
    bottom: 0rem;
    right: 0rem;
    text-align: right;
    width: 100%;
}

main h1 {
    text-align: left;
}


main #article-default h1 {
    font-size: 2.5rem;
}

main img {
    width: 100%;
}

article {
    position: relative;
}


#article-default img {
    height: 70vh;
    width: 100%;
    object-fit: cover;
}

aside {
    /* background-color: rgb(250, 240, 230); */
    padding-top: 2rem;
    flex: 0 1 340px;
    /* max-height: 100vh; */
    overflow: scroll;
    /* height: 100vh; */
    /* margin-top: 5rem; */
    z-index: 1;
    background-color: #fff;
    /* background-color: #ddd; */
}

#aside-main-divider {
    background-color: var(--color-1);
    min-height: 100vh;
    cursor: pointer;
    position: initial;
    position: relative;
    flex: 0 0 3px;
    z-index: 8;
    box-shadow: 0 0 12px #aaa;
}

#aside-main-divider span {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10vh;
    background-color: gold;
    text-align: center;
    border-left: 1px solid var(--color-1);
    border-right: 1px solid var(--color-1);
    font-size: 1rem;
    z-index: 5;
}


aside::-webkit-scrollbar {
    width: 10px;
}
aside::-webkit-scrollbar-track {
    background:inherit;
}
aside::-webkit-scrollbar-thumb {
    background-color: #eee;
}


main::-webkit-scrollbar {
    width: 10px;
}
main::-webkit-scrollbar-track {
    background:inherit;
}
main::-webkit-scrollbar-thumb {
    background-color: #ddd;
}





#fold-left,
#fold-right {
    position: fixed;
    top: 67vh;
    box-shadow: 0 0 5px #999;
    z-index: 9;
    opacity: 0.3;
    /* display: none; */
}

#fold-left:hover,
#fold-right:hover {
    opacity: 1;
}


#fold-left.open {
    left: 300px;
}

#fold-right {
    /* left: 2px; */
    /* display: none; */
}

#aside-main-divider:hover {
    opacity: 0.8;
}

main {
    /* margin-top: 4rem; */
    padding: 1.5rem;
    flex: 1 0 0px;
    overflow-y: scroll;
    z-index: 1;
    /* height: 99vh; */
}

main article {
    margin: 0 1rem;
}

article .columns {
    /* padding: 0 1rem; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* column-gap: 3rem; */
}

article label,
article span.label {
    font-size: .9rem;
    font-variant: small-caps;
    display: block;
    padding: .2rem;
    border-radius: .2rem;
    margin-right: 1rem;
    border-left: 1px dotted grey;
    border-top: 1px dotted grey;
    background-color: rgb(240,240,240);
    /* border-right: 1px dotted grey; */
}

article span.label-comment {
    font-size: .8rem;
}

article label a {
    font-variant: normal;
    text-decoration: none;
    color: navy
}

article label a:hover {
    text-decoration: underline;
}

textarea,
input,
select,
button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input[type="text"] {
    width: 100%;
}

article li span:last-of-type {
    /* position: absolute; */
    /* right: 1.5rem; */
}

article form ul {
    font-size: .8rem;
}

article li {
    color: #777
}

article img.thumb {
    /* width: 100px; */
}

article h1#focus_variety {
    font-size: 3rem;
    font-weight: 300;
    margin: 0;
}

article h1#focus_variety:hover {
cursor: pointer;
}

article h4#focus_variety_origin_name {
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
}


/* top nav */
/* section#toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1rem auto;
}

section#toolbar button {
    height: auto;
    margin: auto;
    padding: 0.2rem 0.7rem;
    font-size: 1.2rem;
}

aside section#toolbar #logotype {
    width: 30%;
    display: block;
    margin: auto;
}
*/

aside #logotype {
    width: 50%;
    display: block;
    margin: auto;
}

p.search {
    width: 90%;
    margin: 0.5rem auto;
    text-align: center;
}

aside section.reference, aside section.search {
    width: 90%;
    margin: 0.5rem auto;
    font-size: .9rem;
    color:#555
}

aside div.reference {
    margin-bottom: 1rem;
}


/* menu */

nav#top {
    background-color: var(--color-1);
    color: whitesmoke;
}

nav#top div {
    display: inline-block;
}

div#home {
    display: inline-flex;
    /* margin: 0.5rem; */
    position: absolute;
    left: 0.5rem;
}



div#info {
    display: inline-flex;
    /* margin: 0.5rem; */
    position: absolute;
    left: 3rem;
    bottom: 0.5rem
}




div#menu {
    display: inline-flex;
    /* margin: 0.5rem; */
    position: absolute;
    right: 1rem;
}

div#menu svg {
    fill: whitesmoke;
}


nav#top {
    width: 100%;
    /* padding: 0.5rem; */
    display: grid;
    grid-template-columns: 48px 24px minmax(200px, 80%);
    z-index: 9;
    column-gap: .3rem;
    position: absolute;
    bottom: 0;
    height: 3rem;
}

nav#top #spanHome {
    margin-top: .7rem;
}

nav.fixed {
    position: fixed !important;
    top: 0;
}
nav.absolute {
    position: absolute;
    bottom: 0;
}

nav#top #menu ul {
    margin: 0;
    padding: 0;
    background-color: var(--color-1);
    color: whitesmoke;
    position: absolute;
    text-align: right;
    list-style: none;
    right: -1rem;
    top: 2rem;
    white-space: nowrap;
    line-height: 2rem;
    min-width: 250px;
    border: 1px solid red;
}

nav#top #menu {
    cursor: pointer;
    position: absolute;
    top: .8rem;
}

nav#top #menu li {
    border: 0;
    font-size: 1rem;
    min-height: initial;
    color: whitesmoke;
    padding: 0 1rem;
}

nav#top #menu li:not(.link) {
    cursor: initial;
}



nav#top #menu li:hover {
    background-color: #800000;
}

nav#top #menu li a {
    color: whitesmoke;
    text-decoration: none;
}

nav#top #menu li a:hover {
    text-decoration: underline;
}

nav#top a img {
    position: absolute;
    width: 3rem;
}

span.history {
    padding-top: .7rem
}

span.history svg:hover {
    cursor: pointer;
    filter: drop-shadow(0 0 2px #fff);
    /* filter: blur(2px); */
    stroke: #fff;
}


span#info {
    /* position: absolute; */
    /* left: 8rem; */
    /* top: 1rem; */
    overflow: hidden;
    margin-left: .5rem;
    padding-top: .7rem
}


.red {
    background-color: var(--color-1);
    color: whitesmoke
}



/* nav#fruit */

aside h2 {
    font-size: 1.5rem;
    text-align: center;
}

nav#fruit {
    margin: .7rem
}

#fruit h3,
#fruit h4 {
    margin: 0;
    font-weight: normal;
}

#fruit h3 {
    /* margin-left: 0rem; */
    position: relative;
}

#fruit h3 span {
    position: absolute;
    right: 3rem
}

#fruit h3 {
    font-size: 1.12rem;
    /* line-height: 1.75rem; */
}

#fruit h4 {
    font-size: 1rem;
    line-height: 1.75rem;
}

#fruit .countActive {
    position: absolute;
    left: 200px;
    font-weight: bold;
}

input#searchVariety {
    width: 80%;
    margin: 0 auto 0.5rem auto;
    padding: 0.5rem;
}

button#buttonSearchVariety {
    /* -webkit-appearance: none; */
    padding: 0.5rem;
}

#fruit ul {
    list-style: none;
    margin: 0;
    padding: 0
}

aside>h3 {
    text-align: center;
    /* font-size: 1.7rem; */
}

nav#fruit>ul>li {
    position: relative;
    min-height: 4rem;
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: top 0.2rem right 0.2rem;
    line-height: 3rem;
    font-size: 1.2rem;
    color: #004700;
    cursor: pointer;
    padding: 0rem;
    /* border-bottom: 1px solid #ccc; */
    /* border-left: 1px solid #DDD; */
}

nav#fruit>ul>li:first-of-type {
    /* border-top: 1px solid #DDD; */
}

nav#fruit h3 {
    color: #000;
    border-bottom: 2px solid white;
    border-radius: .3rem;
    /* box-shadow: 0px 0px 2px white; */
}

nav#fruit p {
    line-height: 1.5rem;
    /* font-size: .9rem; */
}


nav#fruit h3.menu {
    font-size: 1rem;
    /* font-variant: small-caps; */
    border-bottom: 0
}
nav#fruit ul ul li {
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    border-radius: .3rem;
    padding: .7rem;
    background-color: rgb(240,240,240);
    margin: .3rem 0
}

nav#fruit ul ul {
    list-style-type: none;
    /* background-color: #eee; */
    /* background-color: #f6f4f3; */
    /* background-color: #f9f8f8; */
    /* background-color: #efecea; */
    border-radius: .5rem;
    padding: .5rem;
    /* margin-left: 1rem */
    margin-bottom: 1rem
}

nav#fruit div.properties:first-of-type {
    margin-top: 0.5rem;
}

nav#fruit div.properties:last-of-type {
    margin-bottom: 0.5rem;
}

nav#fruit h4 + p {
    line-height: 1rem;
    font-size: .9rem;
    text-indent: 0rem;
    text-align: left;
    margin: 1rem 0;
    color:rgba(25, 25, 25);
}

nav#fruit p.label {
    /* font-variant: small-caps; */
    font-style: italic;
    font-size: 1rem;
}

nav#fruit div.property {
    line-height: 1.5rem;
    white-space: nowrap;
    border-left: 2px solid #DDD;
    padding-left: .5rem;
    margin: 0
}

nav#fruit .col-1 {
    display: grid;
    grid-template-columns: 1fr;
}

nav#fruit .col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


nav#fruit div.property p {
    /* margin: 0 0 0 3rem; */
    /* font-variant: small-caps; */
}

nav#fruit div.property:hover {
    border-left: 2px solid #777;
}

/* 
nav div.property label:after {
    display: block;
}
 */


nav#fruit input.toggle {
    margin-right: 1rem
}

nav#fruit div.figures {
    display: grid;
    grid-template-columns: minmax(auto, 17.5%) minmax(auto, 17.5%) minmax(auto, 17.5%) minmax(auto, 17.5%);
    column-gap: 10%;
    /* grid-template-columns: minmax(auto, 40%) minmax(auto, 40%); */
    /* column-gap: 20%; */
    row-gap: 2rem;
    /* Mozilla end, Chrome baseline  */
    align-items: end; 
    font-size: 0.8rem;
}

nav#fruit div.figures figcaption {
    min-width: max-content;
    padding: 0 .2rem;
}

nav#fruit figure {
    margin: 0;
}

nav#fruit figure:hover {
    opacity: 0.9;
}

nav#fruit figure img {
    width: 100%;
}

nav#fruit figcaption {
    text-align: center;
}

.selected {
    background-color: darkseagreen;
}

nav#fruit div.columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

nav#fruit div.single {
    display: inline-block;
}


nav#fruit div.columns section.toggle {
    width: 20%;
}

nav#fruit div.columns section.toggle {
    position: relative;
}

nav#fruit div.columns section.toggle input {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
}

nav#fruit div.columns section label {
    display: block;
}


nav#fruit div.values {
    /* padding-top: .5rem   ; */
}

nav#fruit div.values label {
    /* display: inline-flex; */
}



input[type=range].slider {
    /* -webkit-appearance: none; */
    width: 76px;
    margin-right: .5rem;
    /* height: 18px; */
    /* background: #fff; */
    /* border: 1px solid #555; */
    /* border-radius: 3px; */
    /* opacity: 0.8; */
    /* -webkit-transition: .1s; */
    /* transition: opacity .1s; */
    /* margin-right: .7rem; */
    /* padding: 0; */
    /* display: inline-flex; */
}


input[type=range].slider:hover {
    opacity: 1;
}

input[type=range].slider:disabled {
    opacity: 0.4;
    background: transparent;
}

input[type=range].slider::-webkit-slider-thumb {
    /* -webkit-appearance: none; */
    /* appearance: none; */
    /* width: 32px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid black;
    background: #aaa;
    cursor: pointer; */
    /* box-shadow: 0 0 2px #000000, 0px 0px 2px #0d0d0d;  */
}

input[type=range].slider::-moz-range-thumb {
    /* -webkit-appearance: none; */
    /* appearance: none; */
    /* width: 32px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid black;
    background: #aaa;
    cursor: pointer; */
}

input[type=range].estimate::-webkit-slider-thumb {
    /* width: 16px !important; */
}


input[type="range"].estimate::-moz-range-thumb {
    /* width: 16px !important; */
}

.fields label {
    display: inline-flex;
}

label input[type="range"] {
    /* color: yellow */
    /* display: inline-flex; */
    /* align-items: end; */
    padding: 0;
    margin: 0;
}

nav#fruit .scale {
    display: inline-block;
}


ul.apples {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.apples li {
    /* display: flex; */
    /* flex-direction: row; */
    display: grid;
    grid-template-columns: 64px auto 64px 1rem;
    margin: 1rem 0
}

ul.apples img {
    width: 48px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

ul.apples .title,
ul.apples .percent {
    /* display: inline; */
}

ul.apples .title {
    font-weight: 300;
    font-size: 1.5rem;
}

ul.apples .title a {
    text-decoration: none;
}

ul.apples .title a:hover {
    text-decoration: underline;
}


ul.apples * {
    align-self: center;
}

ul.apples .percent {
    font-size: .8rem;
    text-align: right;
    min-width: 1.5rem;
}

ul.apples div.meter {
    height: 4px;
    background-color: #004700;
}

ul.apples div.meterContainer {
    display: flex;
    justify-content: flex-end;
}



/* parts */
.hidden {
    display: none;
}

.fade-in-modal {
    animation: do-fade-in .3s;
}


.fade-in {
    animation: do-fade-in .2s;
}

.fade-out {
    animation: do-fade-out .2s;
}

@keyframes do-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes do-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

nav#fruit p,
nav span,
nav label {
    font-size: 1rem;
}

nav#fruit span {
    margin-left: 0.5rem;
}


nav#fruit i.estimate {
    /* padding: 0 0.7rem; */
    font-style: normal;
    font-weight: bold;
    color: navy;
    display: inline-block;
    width: 1rem;
    text-align: center;
    margin-right: .5rem
}

.heading-marked {
    font-weight: bold !important;

    /* font-style: italic; */
    /* font-weight: bold; */
}


/* nav a-z */

nav#alphabet {
    border-bottom: 1px solid darkred;
    margin: 0;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0.5rem;
    box-shadow: 0 0 7px #777;
}

nav#alphabet span:last-of-type {
    text-align: right;
}

nav#alphabet ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: .5rem;
    overflow: scroll;
    white-space: nowrap;
    font-size: 1.4rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}

nav#alphabet ul::-webkit-scrollbar {
    display: none;
}

nav#alphabet li {
    display: inline;
    padding: 0 .5rem;
}

nav#alphabet li:hover {
    cursor: pointer;
}



form {
    max-width: 40rem;
}

form#matchAppleVariety {
    width: fit-content;
    margin:2rem auto
}

form#matchAppleVariety * {
    width: fit-content;
}


form input,
form textarea,
form select,
form button,
select,
button,
input::file-selector-button {
    padding: 0.3rem;
}

form label {
    /* display: block */
}

form textarea {
    max-height: 5rem;
}

textarea {
    width: 100%;
    height: 5rem;
    max-height: 50vh;
    min-width: 100%;
    padding: 0.5rem;
    box-shadow: 0 0 0.5rem #ccc;
}

textarea#focus_description_content {
    max-height: initial;
    height: fit-content;
}

fieldset p:first-of-type {
    margin-top: 0
}

fieldset p:last-of-type {
    margin-bottom: 0
}


footer {
    background-color: var(--color-1);
    color: whitesmoke;
    background-image: url('/images/footer-background.png');
    height: 4rem;
    padding: 1rem;
    box-shadow: 0 0 10px #777;
    border:1px solid #111;
    display: flex;
    justify-content: space-between;
}

footer a {
    color: white;
    text-decoration: none;
}


article p.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.2rem;
}

article p.gallery figure img {
    aspect-ratio: 1/1;
    object-fit: cover;
    /* max-width: 90px; */
}


/* media queries.... */

i.fa {
    color: #005200
}

input[type="checkbox"].toggle {
    /* accent-color: navy; */
    accent-color: #fff;
}


img.svg-icon {
    width: 1.5rem;
    margin-left: 1rem
}



div#references {
    display: flex;
    overflow-x: scroll;
    /* height: 1000px; */
    /* overflow: scroll; */
}

div#references>ul {
    padding: 2rem 3rem;
    background-color: #ddd;
    margin: .2rem;
    border-radius: .5rem;
}
div#references>ul:nth-of-type(2) {
    background-color: #eee;
}

div#references li {
    white-space: nowrap;
}



.toggle-nextSibling:hover {
    cursor: pointer;
}

section#references {
    min-width: 300px;
}

section#references ul {
    padding:0;
    margin:0;
    list-style: none;
}

.reference-list {
    margin: 0;
    padding: 0;
}
.reference-list li {
    display: grid;
    grid-template-columns: minmax(180px, 70%) minmax(100px,20%) 40px;
    border-bottom: 1px dotted;
    padding: .7rem;
}
.reference-list li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: system-ui;
    color: black;
    font-size: .8rem;
}

.reference-list li span.icon {
text-align: right;
}


.notation li {
    display: grid;
    grid-template-columns: 30px minmax(150px, 4fr) minmax(60px,1fr) minmax(60px,1fr);
}
div.fields {
    display: grid;
    grid-template-columns: 30px auto;
}

span.ajaxReply {
    margin: 0 1rem
}
.error {
    color: red;
}

fieldset.async-response {
    border: 1px dotted grey;
}
fieldset.async-response legend {
    font-variant: oldstyle-nums;
}

.success {
    color: green;
}

span.ajaxReply summary {
    font-size: .8rem;
}


header, footer {
    /* background-color: lightgray; */
    /* padding: .5rem */
    /* width: 1280px; */
    /* margin:0 auto; */
}

header.top {
    height: 55vh;
    background-image: url('/images/apple-orchard.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    position: relative;
    z-index: 5;
}


canvas {
    background-color: rgb(200,200,200);
}

div.toolbar {
    border-bottom: 1px dotted;
    border-top: 1px dotted;
    background-color: antiquewhite;
    padding: .2rem
}

div.toolbar span {
    display: inline-block;
}

span#description_by_user {
    font-size: .8rem;
}

span.info {
    font-family: initial;
}

span.info-icon {
        padding: 0 0.5rem;
        background-color: white;
        border-radius: 0.5rem;
}

.variety_synonym_for {
    padding: 1rem;
    font-style: italic;
    box-shadow: 0 0 10px #999;
}
span.trade_name {
    font-variant-caps: small-caps;
}
span.origin_name {
    font-size: .8em;
}

div.toolbar span.label {
    font-variant: small-caps;
    color: navy;
    padding: 0.3rem;
}
div.toolbar span.edit:hover {
    cursor: pointer;
    text-decoration: underline;
}

button.success {
    background-color: #8FBC8B;
    color: black
}

div.overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255,255,255,0.7);
    z-index: 14;
}
div.modal {
    position: fixed;
    width: 95%;
    max-width: 1260px;
    border: 1px solid gray;
    background-color: white;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem;
    box-shadow: 0 0 25px rgb(200,200,200);
    z-index: 15;
}
div.modal a.modal-close {
    position: absolute;
    top: -2rem;
    right: 0;
    color: navy;
    font-size: 1rem;
    background-color: snow;
    padding: 0.1rem 0.3rem 0.3rem 0.3rem;
    border-radius: 0.2rem;
    text-decoration: none;
    font-variant: all-small-caps;
    z-index: 15;
}
div.modal a.modal-close:hover {
    cursor: pointer;
}

div.modal section {
    z-index: 7;
    padding: 0;
}

form#upload_form img {
    width: 100%;
}

article figure {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
}

article figure span.edit-image {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 1.2rem;
    background-color: rgba(255,255,255,0.5);
}

article figure span.edit-image:hover {
    background-color: rgba(255,255,255,0.9);
    cursor: pointer;
}
section figure {
    margin: 0;
    padding: 0;
}
section img {
    width: 100%;
}

section.image-edit figcaption {
    border: 1px solid gray;
    padding: .5rem;
}

section.image-display figcaption {
    text-align: center;
    margin: 1rem
}


ul#parents li {
    margin: .5rem 0;
}

span.edit {
    padding: .5rem;
    cursor: pointer;
}
span.edit:hover {
    background-color: rgba(255,255,255,0.8);
}

ul#parents span.parent {
    padding: 0.5rem;
}
ul#parents span {
    font-size: 1rem;
    color: black;
}


article .content {
    /* font-family: Georgia, 'Times New Roman', Times, serif */
}

article span.label {
    /* background-color: cornsilk; */
} 

span:not(:first-of-type):hover {
    cursor: pointer;
}

input.required {
    background-color: sandybrown;
}

article details ul {
    font-size: 1rem;
}

article details ul li {
    margin: .2rem 0;
}

#updateAppleVariety figcaption {
    font-size: 1.4rem;
    text-align: center;
    padding: .2rem;
    margin: 0 .5rem
}

#updateAppleVariety figcaption:hover {
    cursor: pointer
}

#article-update-apple #notepad-container {
    position: fixed;
    top: 5rem;
    bottom: 2rem;
    left: 0;
    width: 320px;
    /* z-index: 12; */
    box-shadow: 0 0 7px grey;
    width: 320px;
    margin: 0 10px;
    height: auto;
}

#article-update-apple #notepad-panel {
    /* position: fixed; */
    /* bottom: 0vh;
    right: auto;
    left: auto;
    width: 80%; */
    /* max-width: inherit; */
    background-color: #8b0000;
    color: whitesmoke;
    text-align: center;
    /* z-index: 3; */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr 1fr 30px; */
    padding: 0.5rem;
    line-height: 2rem;
    /* text-align: justify; */
    /* padding-left: 1rem; */
    margin: 0;
    box-shadow: 0 0 7px grey;
    /* top: 5rem;
    left: 0;
    width: 320px;
    z-index: 5;
    margin: 0 10px; */
    /* height: fit-content; */
    text-align: center;
}

#notepad-panel span {
    min-width: 2rem;
    text-align: center;
}

#notepad-panel span.name-list {
    width: fit-content;
}

#notepad-panel select {
    text-overflow: ellipsis;
    width: 300px;
    font-size: .8rem;
}

#notepad-panel span.name-list, #notepad-panel span.placement {
    width: fit-content;
}

#notepad-panel.active {
    bottom: 41vh !important;
}

#article-update-apple #notepad {
    /* position: fixed; */
    /* bottom: 0;
    right: auto;
    left: auto;
    width: 80%;
    height: 40vh; */
    /* max-width: inherit; */
    background-color: whitesmoke;
    padding: 1rem;
    font-family: monospace;
    overflow: scroll;
    line-height: 1.4rem;
    border: 1px solid #000;
    box-shadow: 0 0 12px #aaa;
    /* z-index: 2;
    top: 10rem;
    left: 0;
    bottom: 10px;
    width: 320px;
    margin: 0 10px; */
    z-index: 5;
    height: 92%;
    width: inherit;
}

#notepad-panel span:hover {
    cursor: pointer;
}

.note {
    font-family: monospace;
}

.toggle-sibling.note {
    text-align: right;
    border-bottom: double;
    border-color: darkgrey;
    padding:1rem 0
}

.toggle-sibling.note:hover {
    cursor: pointer;
}
/* div#focus_note {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 9.5rem;
    right: 0;
} */

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#table-references {
    font-size: .7rem;
}

#table-references td.level-l {
    padding-left: 2rem
}
#table-references td.level-2 {
    padding-left: 4rem;
    font-family: monospace;
}

#table-references td:not(:first-of-type) {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid green;
    white-space: nowrap;
}
#table-references td:first-of-type {
    border-bottom: 1px dotted green;
    white-space: nowrap;
}

#table-references th {
    border: 0;
    border-bottom: 1px dotted green;
    white-space: normal;
    vertical-align: baseline;
    text-align: left;
}

#table-references tr:not([data-property]) td {
    border-color: white;
}

h4#reference-data {
    cursor: pointer;
}

#flash-message {
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    background-color: lemonchiffon;
    border: 1px solid;
    padding: 1rem;
    max-width: 50%;
    z-index: 10;
    box-shadow: 0 0 10px ghostwhite;
}

#focus_properties {
    /* font-family: monospace; */
}
#focus_properties h4 {
    margin:1rem 0 0 0; 
    padding:0
}

#focus_properties .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#focus_properties .column span {
    margin:0 .1rem
}

#focus_properties h4 {
    font-weight: normal;
}


#focus_properties span {
    color: darkgreen;
}

nav#top a {
    color: white;
}

summary:hover {
    cursor: pointer;
}

img.watermark {
    position: fixed;
    top: 1rem;
    left: 3rem;
    width: 160px;
    opacity: 0;
    z-index: 0;
    transition: opacity linear 1s;
}

.watermark.visible {
    opacity: 1;
}

section div#propertyEdit details {
    margin: 1rem 0;
    padding: 1rem 0;
    border-bottom-style: double;
}


header.variety {
    width: 100%;
}


#ajax {
    position: absolute;
    bottom: 0;
    right: 0
}


section.image-edit form, section.async-upload form {
    margin: 1rem
}

div#aside-export {
    margin: 1rem;
    border-top: 1px dotted;
    padding: 1rem;
}

a#download-csv {
    font-family: monospace;
    margin: 0 1rem;
    font-size: .9rem;
}


#versionsElement {
    background-color: #eee;
    padding: 1rem;
}

#versionsElement div.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: .8rem;
    margin: 1rem 0;
    overflow-x: auto;
}

#versionsElement div.wrapper section {
    padding: 1rem;
    box-shadow: 0 0 5px #999;
}

#versionsElement div {
    margin: .5rem 0 2rem 0;
}

/* media queries */
@media screen and (min-width: 320px) {
    div.wrapper {}

    header {
        width: 100%;
        margin: 0 auto;
    }

    header.top {
        background-size: 200%;
    }
    
    aside {
        min-width: 320px;
    }
}

@media screen and (min-width: 768px) {

    header.top {
        background-size: cover;
    }

    div.wrapper {}

    aside {}

    section {}

    article p.gallery {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
     
}


@media screen and (min-width: 1280px) {
    div#page {
        width: 1280px;
        margin: 0 auto;
        border-right: 1px solid grey;
        box-shadow: 0 0 10px #aaa
    }

    header {
        width: 1280px;
        background-size: cover
        /* margin: 0 auto; */
    }

    footer {
        width: 1280px;
        margin: 0 auto;
    }


    nav#top {
        width: 1280px;
        margin: 0 auto;
    }

    aside {}

    section {}

    #article-update-apple #notepad-container  {
        left: calc((100vw - 1280px)/2);
    }
}