/*============================================*/
/*=== Page Notes                           ===*/
/*=== 23-5-2020                            ===*/
/*============================================*/

#page-notes {
	display: none;
	z-index: 1;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: max-content;
	grid-auto-flow: row;
	grid-gap: 5mm 5mm;
	padding: 5mm 5mm;
	background: white;
    margin: 15mm 0 0 0;
    width: 100%;
    /*border: 1px solid red; */
}

.page-button {
    position: fixed;
    z-index: 5;
    width: 14mm;
    height: 14mm;
    border-radius: 7mm;
    color: white;
    background-color: var(--green-color);
    font-size: 7mm;
    line-height: 14mm;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
}
.page-button:hover {
    outline: 0.7mm solid var(--yellow-color);
}
.page-button:active {
    outline: 1.4mm solid var(--yellow-color);
}
.page-button:focus {
	outline: 0.7px solid var(--grey-text);
}
.page-button:disabled, .page-button:disabled:hover {
	background-color: var(--light-grey-color);
	color: var(--grey-color);
    outline: none;
}
.page-button > a {
    text-decoration: none;
    color: white;
}
.bigbtn-blink {
	animation-name: bigbtnblink;
	animation-duration: 1.5s;
	animation-iteration-count: 20;
}
@keyframes bigbtnblink {
  20% { color: var(--green-color); }
}

.page-display {
    position: fixed;
    z-index: 5;
    width: 7mm;
    height: 7mm;
    border-radius: 3.5mm;
    color: white;
    background-color: var(--red-color);
    font-size: 3.4mm;
    font-weight: bold;
    line-height: 7mm;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
}

.button-pos0  { right:  7mm; bottom: 8mm; }
.button-pos1  { right: 25mm; bottom: 8mm; }
.button-pos2  { right: 43mm; bottom: 8mm; }
.button-pos3  { right: 61mm; bottom: 8mm; }
.button-pos4  { right:  8mm; bottom: 25mm; }
.button-pos6  { right:  8mm; bottom: 43mm; }
.button-pos56 { right: 11.5mm; bottom: 55.5mm; }
.button-pos5  { right:  8mm; bottom: 61mm; }
.button-pos7  { right:  8mm; bottom: 79mm; }
.button-pos8  { right:  8mm; bottom: 97mm; }
.button-pos9  { right:  8mm; bottom: 115mm; }

@media only screen and (min-width: 14cm) {
	#page-notes   { grid-template-columns: repeat(2, 1fr); }
    .button-pos4  { right:  79mm; bottom:  8mm; }
    .button-pos5  { right:  97mm; bottom:  8mm; }
    .button-pos56 { right: 109.5mm; bottom: 11.5mm; }
    .button-pos6  { right: 115mm; bottom:  8mm; }
    .button-pos7  { right: 133mm; bottom:  8mm; }
    .button-pos8  { right: 151mm; bottom:  8mm; }
    .button-pos9  { right: 169mm; bottom:  8mm; }
}
@media only screen and (min-width: 30cm) {
	#page-notes { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (min-width: 46cm) {
	#page-notes { grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (min-width: 56cm) {
	#page-notes { grid-template-columns: repeat(5, 1fr); }
}



.note-card {
    display: grid;
	grid-template-columns: 10mm auto 10mm 10mm;
    grid-gap: 0 0;
    align-self: start;
    justify-self: stretch;
    margin: 2mm 0;
    border: 1px solid var(--green-color);
    border-radius: 2mm;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.24);
    overflow: hidden;
}
.note-card:hover {
    outline: 0.7mm solid var(--yellow-color);
}
.note-card:active {
    outline: 1.4mm solid var(--yellow-color);
}

.note-card > button {
    grid-column: span 1;
    height: 10mm;
    text-align: center;
    color: white;
    background-color: var(--green-color);
    font-size: 4.5mm;
    line-height: 6mm;
    padding: 2mm 2mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
	cursor: pointer;
}

.note-card > button:hover {
    background-color: var(--light-blue-color);
    box-shadow: none;
}

.note-top {
    grid-column: span 1;
    height: 10mm;

    text-align: left;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;

    font-size: 4.5mm;
	line-height: 6mm;
    color: white;
    background-color: var(--green-color);
	font-weight: bold;
    padding: 2mm 2mm;
    margin: 0;
	cursor: pointer;
}

.note-body {
    grid-column: 1/-1;
    vertical-align: text-top;
    text-align: left;
    padding: 2mm 2mm;
    margin: 0;
    background-color: none;
}
.note-img {
    display: none;
    grid-column: 1/-1;
    text-align: center;
}
.note-img > img {
    max-width: 100%;
    max-height: 100mm;
}
.note-img > video {
    max-width: 100%;
    max-height: 100mm;
}
.note-link {
    display: none;
    grid-column: 1/-1;
    text-align: center;
    font-size: 3.6mm;
    line-height: 4mm;
    padding: 2mm 2mm;
    margin: 0;
    background-color: none;
}