@import "import.css";

/***************** root *******************/

:root {
    --BORDERS: red 0px dotted;
    --OUTLINES: #0000ff40 0px dotted;
    /*--title-colour: maroon;*/
    --title-colour: darkblue;
    --tag-colour: #008000;
    /*--tag-background: #e0ffe0;*/ 
    /*--tag-background: #f8fff8;*/
    --tag-background: white; 
    --attribute-colour: grey;
    /*--annotate-colour: #804000;*/
    --annotate-colour: var(--attribute-colour);
    /*--annotate-background: #fff0d0;*/
    /*--annotate-background: #fff8f0;*/
    --annotate-background: white;
    /*--priority-colour: #800000;*/
    --priority-colour: var(--attribute-colour);
    --altitude-colour: var(--attribute-colour);
    /*--priority-background: #f0e0e0;*/
    /*--priority-background: #f8f0f0;*/
    --priority-background: white;
    --altitude-background: white;
    /*--size-colour: #000080;*/
    --size-colour: var(--attribute-colour);
    /*--size-background: #e0f0ff;*/
    /*--size-background: #f0f8ff; */
    --size-background: white; 
    
    --edit-sidebar-width-HACK: 30px;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    padding: 5px 10px;
    margin: 5px 10px;
    /*max-height: 100%;
    overflow-y: hidden;*/
    
    border: var(--BORDERS);
    border-color: green;
    outline: var(--OUTLINES);
}




/******************************** css test    *************************************/

.css-test, .css-test-hover, .css-test-pointer, .css-test-grid {
    background: yellow;
}

@media (hover: hover) {
    .css-test-hover {
        background: #cfc;
    }
    .css-test-hover:after {
        content: ' *hover: hover*';
    }
}
@media (hover: none) {
    .css-test-hover {
        background: #fcc;
    }
    .css-test-hover:after {
        content: ' *hover: none*';
    }
}
@media (pointer: fine) {
    .css-test-pointer {
        background: #cfc;
    }
    .css-test-pointer:after {
        content: ' *pointer: fine*';
    }
}
@media (pointer: coarse) {
    .css-test-pointer {
        background: #fe9;
    }
    .css-test-pointer:after {
        content: ' *pointer: coarse*';
    }
}
@media (pointer: none) {
    .css-test-pointer {
        background: #fcc;
    }
    .css-test-pointer:after {
        content: ' *pointer: none*';
    }
}
@supports (display: grid) {
    .css-test-grid {
        background: #cfc;
    }
    .css-test-grid:after {
        content: ' *supports display grid* ';
    }
}
@supports not (display: grid) {
    .css-test-grid {
        background: #fcc;
    }
    .css-test-grid:after {
        content: ' *NO DISPLAY GRID* ';
    }
}


/******************************* tooltip replacement ********************************/


@media (hover: hover) {
    .touch-tip {
        display: none;
        white-space: pre-wrap;
    }
    .hover-tip {
        text-decoration: underline dotted;
    }
}

@media (hover: none) {
    .touch-tip {
        white-space: pre-wrap;
        font-size: 65%;
        line-height: 100%;
        /*display: block;*/ /* otherwise line-height has no effect */
        display: none; /* now we have a js button */
    }
}




/******************* what was this ... did it work *********************/
/*input {*/
    /*border: 1px solid black;*/
    /*border: 1px solid red;*/
/* } */
/* input:focus { */
    /*border: 1px solid red;*/
    /*border: 1px solid green;*/
    /*outline: none;*/
/* } */
/* textarea:focus { */
    /*outline: 5px;*/
/* } */


/*input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}*/
/* this shadow works - bold */


/*textarea:focus {
    outline-color: #C19ECE;
}

input:focus {
    outline-color: #C19ECE;
}*/
/* no effect */


/*input, textarea {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

input:focus, textarea:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}*/
/* this works - wild! */







/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/**************************** START CSS LAYOUTS STUFF ***************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/
/********************************************************************************/


/*********************** body flex ********************/

.filter_body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*align-items: stretch;*/
    align-items: start;
    height: auto;
    
    /*display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    align-items: top;*/
    
    border: 1px #aaa dotted;
}

@media screen and (min-width: 800px) {
    .filter_body { 
        /*height: 100%;*/
        /* temporary until I get the layout effect I want */
        /* TODO hacky! on wide but short screens, will overflow horizontally */
    }
}

.filter_field_set {
    /*flex: 1 1 400px;*/
    max-width: 400px;
    width: 350px;
    margin: 5px;
    /*gap: 5px;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    align-items: center;

    border: 1px #ddd dotted;
}


 /*Edit sidebar */
 
#sidebar-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    
    display: flex;
    flex-direction: row;    
    align-items: center;
    justify-content: center;
}

#edit-sidebar {
    flex-grow: 0;
    
    position: absolute;
    /*width: 24px;*/
    width: calc(var(--edit-sidebar-width-HACK) - 2px);
    top: 1px;
    bottom: 1px;
    height: calc(100% - 2px);
    right: 1px;
    border: 1px solid #111;
    background-color: #f0f0ff ; /* for debug */
    color: #8080ff; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rotated {
    /*transform: rotate(90deg) translate(50%, 100%);*/
    /*transform-origin: 0% 0%;*/
    writing-mode: vertical-lr; /* Rotate 90deg */
    /*text-align: center;*/
    /*margin: auto;*/
    /*padding: 70px 0;*/
    /*left:0;right:0;*/
    /*line-height: 36px;*/
    /*transform: translate(25%, 50%);
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;*/
    /*align-content: center;*/
    /*display: table-cell;
    text-align: center;
    vertical-align: middle;*/
}


/* This should be # id */
.body-container {
    flex-grow: 1;
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /*width: 100%;*/
    
    /* sidebar */
    /*right: 26px; 
    width: calc(100% - 26px);*/
    right: var(--edit-sidebar-width-HACK);
    
    display: flex;
    flex-direction: column;
}

.page-header {
    position: relative;
    /*position: fixed;*/
    top: 0;
    left: 0;
    max-width: 100%;
    
    text-align: center;
    /*background-color: #eee;*/
    margin: 5px 5px;
    padding: 5px 15px;
    
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    /*grid-gap: 0.3em 0.6em;*/
    align-items: center;
    
    border: var(--BORDERS);
    border-color: red;
    outline: var(--OUTLINES);
}

.header-left { 
    grid-column: 1 / 2;
}

.header-main { 
    grid-column: 2 / 3;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    text-decoration: none;
    font-size: 18pt;
}

.header-right {
    /*float: right;*/
    /*position: absolute;
    right: 0;
    top: 0;
    width: 20%;*/
    grid-column: 3 / 4;
}

.top-menu, .bottom-menu {
    display: grid; 
    /*grid-template-columns: 15% 1fr 15%;*/
    /*grid-gap: 0.3em 0.6em;*/
    align-items: center;
}
.top-menu {
    grid-template-columns: 5% 1fr 5%;
}
.bottom-menu {
    grid-template-columns: 5% 1fr 5%;
}

.menu-items-main {
    grid-column: 2 / 3;
}
.menu-items-right {
    grid-column: 3 / 4;
}

.top-menu, .bottom-menu {
    font-size: 70%;
    text-decoration: none;
    text-align: center;
    background-color: #ccc;
    margin: 5px 5px;
    padding: 5px 5px;
    border: var(--BORDERS);
    outline: var(--OUTLINES);
}

.top-menu, .bottom-menu p {
    margin: 0px 5px;
    padding: 0px 5px;
    border: var(--BORDERS);
    outline: var(--OUTLINES);
}

.top-menu {
    /*top: 120px; /* hack */
    max-width: 100%;
}

.bottom-menu {
    /*position: fixed;*/
    bottom: 0;
    left: 0;
    max-width: 100%;
}

#toast {
    /*--TOASTTOP: 90px;*/
    --TOASTOPA: 0.85;
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 16em; /* Set a default minimum width */
    /*margin-left: -125px;*/ /* Divide value of min-width by 2 */
    background-color: #333; /*#333;*/ 
    color: #eee; /*#fff;*/ 
    font-size: 12px;
    text-align: center; 
    border-radius: 5px; 
    padding: 8px; 
    position: absolute; /*fixed; */
    z-index: 5; /* Add a z-index if needed */
    /*left: 50%;*/ /* Center h & v in parent - I hope */
    /*bottom: 50%;*/ /* -or- 30px from the bottom */
    /*top: 90px;*/ /* can't get it centred in top-menu */
    /*top: var(--TOASTTOP);*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
}
#toast.show {
    visibility: visible; 
    opacity: var(--TOASTOPA);
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    animation: fadein 0.75s, fadeout 0.75s 2.0s;
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
  from { left: 0; opacity: 0;}
  to { left: 50%; opacity: var(--TOASTOPA);}
}
@keyframes fadeout {
  from {left: 50%; opacity: var(--TOASTOPA);}
  to {left: 0; opacity: 0;}
}



.page-content  {
    flex-grow: 1;
    overflow: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    
    margin: 5px;
    margin: auto;
    padding: 5px 10px;
    /*overflow-y: auto;
    max-height: 9000px;*/
    /*top: 140px; /* hack */
    
    border: var(--BORDERS);
    border-color: blue;
    outline: var(--OUTLINES);
}

.content-header {
    top: 0;
    left: 0;
    max-width: 100%;
}

.content-main {
    flex-grow: 1;
    overflow: auto;
    width: 100%;
    /*background-color: #eff;*/
    display: flex; /*required for filling vertical space, but why*/
    flex-direction: column;
}

.label {
    font-weight: bold;
}

.note-title {
    color: var(--title-colour);
}
.note-title input {
    color: var(--title-colour);
}
.note-title {
    font-size: larger;
    font-weight: bold;
    /*background-color: #fff8fc;*/
    /*border: 1px solid #ddd;*/
    border: var(--BORDERS);
    border-color: #ddd;
    outline: var(--OUTLINES);
}
.note-keywords {
    color: var(--title-colour);
}
.note-keywords input {
    color: var(--title-colour);
}
.note-keywords {
    /*font-size: larger;*/
    font-weight: bold;
    /*background-color: #fff8fc;*/
    /*border: 1px solid #ddd;*/
    border: var(--BORDERS);
    border-color: #ddd;
    outline: var(--OUTLINES);
}

.note-links {
    font-size: smaller;
    border-left: solid green 2px;
}
.url-links {
    font-size: smaller;
    border-left: solid blue 2px;
}

.note-text {
    /*background-color: #f8f8f8;*/
    /*white-space: pre-wrap;*/
    /*min-height: 4em;*/
    /*border: 1px solid #ddd;*/
    border: var(--BORDERS);
    border-color: #ddd;
    outline: var(--OUTLINES);
}
.note-text-wrap {
    white-space: pre-wrap;
    overflow-y: scroll;
}
.note-text-stream {
    flex-shrink: 0;
}

/*.note-text input {
    min-height: 6em;
    background-color: red;
}*/
.note-text textarea {
    /*min-height: 5em;*/
    /*background-color: blue;*/
}

.note-id {
    font-size: smaller;
    /*display: none;*/
}
.note-id::before {
    content: "[";
}
.note-id::after {
    content: "]";
}

.note-tags {
    color: var(--tag-colour);
    background-color: var(--tag-background);
    border: var(--BORDERS);
    border-color: #dfd;
    outline: var(--OUTLINES);
    font-size: smaller;
}

.note-annotate {
    color: var(--annotate-colour);
    background-color: var(--annotate-background);
    border: var(--BORDERS);
    border-color: #ddf;
    outline: var(--OUTLINES);
}

.note-status {
    color: #000080;
    /*background-color: #f0f0ff;*/
    border: var(--BORDERS);
    border-color: #ddf;
    outline: var(--OUTLINES);
}

.note-altitude {
    color: var(--altitude-colour);
    background-color: var(--altitude-background);
    border: var(--BORDERS);
    border-color: #fdd;
    outline: var(--OUTLINES);
}

.note-priority {
    color: var(--priority-colour);
    background-color: var(--priority-background);
    border: var(--BORDERS);
    border-color: #fdd;
    outline: var(--OUTLINES);
}

.note-size {
    color: var(--size-colour);
    background-color: var(--size-background);
    border: var(--BORDERS);
    border-color: #fdd;
    outline: var(--OUTLINES);
}

.note-not-before {
    font-size: 65%;
    /*color: #a00000;*/
    /*background-color: #ffe8e8;*/
    border: var(--BORDERS);
    border-color: #fdd;
    outline: var(--OUTLINES);
}

.date-past {
    color: #c00000;
    background-color: #ffa8a8;
}
.date-past-near {
    color: #a00000;
    background-color: #ffe8e8;
}
.date-future-near {
    color: #a04040;
    background-color: #e8e8e8;
    text-decoration: line-through;
}
.date-future {
    color: #a0a0a0;
    background-color: #e8e8e8;
    text-decoration: line-through;
}



/****                                                                      ****
 ****                      form-grid grid layout                           ****
 ****                                                                      ****/

/* default */
div.form-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto) 1fr);
    /*grid-template-rows: repeat(3, auto) 1fr;*/
    /*grid-template-rows: repeat(13, auto);*/
    grid-auto-rows: min-content;
    grid-gap: 3px;
    /* align-items: center; */ /* nope - affects background too */
    /*align-items: stretch;
    justify-items: stretch;*/
    border: var(--BORDERS);
    border-color: blue;
    outline: var(--OUTLINES);
    /*background-color: #ffe;*/
}

/* different breakpoints from small.css */
/* TODO ALL of the grid-template-rows are by trial and error */

/* larger sizes */ 
@media screen and (min-width: 600px) and (max-width: 799px) {
    div.form-grid {
        grid-template-columns: repeat(3, minmax(100px, auto) 1fr);
        grid-gap: 3px;
        /*grid-template-rows: repeat(4, auto) 1fr;*/
        /*grid-template-rows: repeat(14, auto);*/
    }
}
@media screen and (min-width: 800px) and (max-width: 999px) {
    div.form-grid {
        grid-template-columns: repeat(4, minmax(100px, auto) 1fr);
        grid-gap: 4px;
        /*grid-template-rows: repeat(4, auto) 1fr;*/
        /*grid-template-rows: repeat(14, auto);*/
    }
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
    div.form-grid {
        grid-template-columns: repeat(5, minmax(100px, auto) 1fr);
        grid-gap: 5px;
        /*grid-template-rows: repeat(3, auto) 1fr;*/
        /*grid-template-rows: repeat(14, auto);*/
    }
}
@media screen and (min-width: 1200px) {
    div.form-grid {
        grid-template-columns: repeat(6, minmax(100px, auto) 1fr);
        grid-gap: 5px;
        /*grid-template-rows: repeat(3, auto) 1fr;*/
        /*grid-template-rows: repeat(14, auto);*/
    }
}

/* smaller sizes */
@media screen and (min-width: 375px) and (max-width: 599px) {
    div.form-grid {
        grid-template-columns: repeat(3, minmax(70px, auto) 1fr);
        grid-gap: 0;
        /*grid-template-rows: repeat(4, auto) 1fr;*/
        /*grid-template-rows: repeat(4, auto);*/
    }
}
@media screen and (min-width: 250px) and (max-width: 374px) {
    div.form-grid {
        grid-template-columns: repeat(2, minmax(70px, auto) 1fr);
        grid-gap: 0;
        /*grid-template-rows: repeat(5, auto) 1fr;*/
        /*grid-template-rows: repeat(4, auto);*/
    }
}
@media screen and (max-width: 249px) {
    div.form-grid {
        grid-template-columns: repeat(1, minmax(50px, auto) 1fr);
        grid-gap: 0;
        /*grid-template-rows: repeat(5, auto) 1fr;*/
        /*grid-template-rows: repeat(4, auto);*/
    }
}

/* For all screen sizes, make Body: label full width to accommodate edit-dbg-msg */
/* NOT working! */
/*.note-text.label {
    grid-column: 1 / -1; 
}*/
    
.form-grid .note-title.label, .form-grid .note-tags.label {
    grid-column: 1 / 2;
}
.form-grid .note-title.input {
    grid-column: 2 / -1; /* -2 if the save buttons can be made to fit */
}
.form-grid .note-keywords.input {
    grid-column: 2 / -1; 
}
.form-grid .full-row-label {
    grid-column: 1 / 2;
}
.form-grid .full-row-rest {
    grid-column: 2 / -1; 
}
/*.form-grid .note-not-before.input {
    grid-column: auto / span 3; 
} this isn't great*/
.form-grid .note-not-before.label {
    grid-column: 1 / 2; 
}
.form-grid .note-not-before.input {
    grid-column: 2 / span 3; 
}
.form-grid input[type="submit"] {
    padding: 5px; 
    margin: 5px 0px;
    min-width: 10px;
    width: auto;
}

/*form .right {
    text-align: right;
    color:red;
}*/

.filter-form-errors {
    grid-column: 1 / 3;
}

.form-grid .note-tags.input {
    grid-column: 2 / -1;
}
.form-grid .note-text.input {
    grid-column: 2 / -1;
}
.form-grid .labelbox {
    grid-column-end: span 2;
}

.form-grid .labelbox.note-tags, .form-grid .labelbox.note-text, .form-grid .labelbox.note-links, .form-grid .labelbox.url-links {
    grid-column: 1 / -1;
}

.form-grid .labelbox.note-title {
    grid-column: 1 / -2;
}

.form-grid div {
    /*margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 5px;
    padding-bottom: 5px;*/
    padding: 5px 0px;
}

/*.form-grid div.right {
    text-align: right;
    justify-self: end;
    padding: 5px;
}*/

.note-view .note-status, .note-view .note-priority, .note-view .note-id  {
    /*float: left;*/
    /*width: 33.33%;*/
}

.note-view .note-status input, .note-view .note-priority input  {
    /*width: 15%;
    min-width: 20px;*/
}

.note-view:after {
    /*content: "";
    display: table;
    clear: both;*/
    /* what is this doing? */
}

.note-view label {
    /*width: 10%;*/ /* TODO */
    /*display: inline-block;*/
}
.note-view input {
    /*font-family: Roboto, Verdana, Geneva, sans-serif;*/
    font-family: inherit;
    font-size: inherit;
}
.note-view textarea {
    /*font-family: Roboto, Verdana, Geneva, sans-serif;*/
    font-family: inherit;
    font-size: inherit;
}
.note-view .label {
    /* extra padding to make label text more aligned with inputs/selects */
    margin: 0px 0px;
    padding: 15px 0px;
}
.note-view label {
    /* extra margin or padding seem to make no difference here */
    margin: 5px;
    padding: 5px;
}
.note-view input, .note-view textarea, .note-view select {
    margin: 5px;
    padding: 5px;
}
.note-view .labelbox {
    margin: 0px;
    padding: 10px;
}
#edit-dbg-msg {
    padding: 0px; /*override .labelbox*/
    font-size: smaller;
    grid-column: 1 / -1; /*full width*/
}
#edit-dbg-msg .omittable {
    display: none; /*hide line breaks put in by js*/
}
.note-view .note-title input {
    /*width: 99%;*/
    width: calc(100% - 10px); 
    max-width: 100%;
}

.note-view .note-keywords input {
    /*width: 99%;*/
    width: calc(100% - 10px); 
    max-width: 100%;
}

.note-view .note-not-before label, .note-view .note-not-before input {
    font-size: 1rem; /* override the smaller size in the div */
}
.note-view .note-not-before input {
    width: calc(100% - 10px); 
    max-width: 100%;
}

.note-view .note-text textarea {
    box-sizing: border-box; /* not helping */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*width: auto;
    height: auto;*/
    /*width: 100%;
    height: 100%;*/
/*     height: 10em; */
    width: calc(100% - 10px); 
    height: calc(100% - 10px);
    /*resize: none;*/
    resize: vertical;
    overflow: auto;
    overflow-y: scroll;
}

div.note-view div.note-text {
    width: calc(100% - 10px); 
    height: calc(100% - 10px);
    overflow: auto;
}

/*.note-view input,*/ .note-view textarea {
    /*min-width: 65px;
    width: 10%;*/
    /*display: inline-block;*/
}

.note-view select /* tags */ {
    min-width: 140px;
    max-width: 250px;
    width: 33%;
    /*display: inline-block;*/
}

.note-view input {
    min-width: 65px;
    width: 10%;
    /*display: inline-block;*/
}

.note-view input[type="checkbox"] {
    min-width: 10px;
    width: 5%;
    /*display: inline-block;*/
}

.note-view input, .note-view textarea, .note-view select {
    border: 1px solid gray;
    border-radius: 3px;
}

.note-view input:focus, .note-view textarea:focus, .note-view select:focus {
    /*outline: 2px solid blue;
    outline-offset: 0px;*/
    border: 1px solid blue;
    background: #ffc;
    box-shadow: 0 0 15px #719ECE;
}

.timestamp {
    font-size: 65%;
    color: #404040;
    /*display: none;*/
    background-color: transparent; /*to avoid obscuring borders*/
}

.note-view .timestamp  {
    /*float: left;*/
    /*width: 50%;*/
    background: #e0e0e0;
}

.import-form {
    grid-template-rows: 1fr min-content min-content min-content;
}

#tab_text {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr;
    grid-template-rows: 1fr;
    grid-gap: 3px;
    /* align-items: center; */ /* nope - affects background too */
    /*align-items: stretch;
    justify-items: stretch;*/
/*    border: var(--BORDERS);
    border-color: blue;*/
    outline: var(--OUTLINES);
    /*background-color: #fdf;*/
}

.button-row {
    display: grid;
/*     flex-direction: row; */
    grid-template-columns: 3fr 1fr;
    align-items: end;
}

button[type="button"], input[type="button"], input[type="submit"], a[type="button"] {
    /*color: #008;*/
    background-color: #eef;
    border-color: #cce;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    min-width: 75px;
    cursor: pointer;
    margin: 0px 2px;
    padding: 2px 2px;
}
a[type="button"] {
    text-decoration: none;
    display: inline-block;
}

button.tab-selected {
    background-color: #ddd;
    border-color: #ddd;
    border-width: 3px;
    border-style: solid;
    border-radius: 3px;
    margin: 0px 1px;
    padding: 2px 1px;
}
button.tab-selected.editing {
    background-color: #edc;
    border-color: #dba;
}

div.display-tab {
    flex-grow: 1;
    max-height: 100%;
    overflow: auto;
    
    display: grid; /* because the javascript buttons will set this anyway */
    grid-auto-rows: min-content;
    grid-auto-columns: 1fr;
    
    /*background-color: #cce;*/
    border-color: #ddd; /* align with button colour */
    border-width: 3px;
    border-style: solid;
    border-radius: 3px;
}
div.display-tab.editing {
    /*background-color: #cce;*/
    border-color: #dba; /* align with button colour */
    border-width: 3px;
    border-style: solid;
    border-radius: 3px;
}
#button_tabmenu {
    /*display: none;*/
    position: relative; /* required for z-index */
    z-index: 15; /* must be on top of the overlays! */
}
#button_tabmenu.v_default { display: none; }
#button_tabmenu.v_hidden { display: none; }
#button_tabmenu.v_shown { display: block; }

#menu_tabmenu.v_default { display: block; }
#menu_tabmenu.v_hidden { display: none; }
#menu_tabmenu.v_shown { display: block; }
}

#welcome {
    display: block;
}
#button_topmenu {
    /*display: none;*/
    position: relative;
    z-index: 15; /* must be on top of the overlays! */
}
#button_topmenu.v_default { display: none; }
#button_topmenu.v_hidden { display: none; }
#button_topmenu.v_shown { display: block; }

#menu_topmenu_dropdown {
    z-index: 15; /* must be on top of the overlays! */
    /*display: none;*/
}
#menu_topmenu_dropdown.v_default { display: none; }
#menu_topmenu_dropdown.v_hidden { display: none; }
#menu_topmenu_dropdown.v_shown { display: block; }

@media screen and (max-width: 600px) {
    /* TODO shouldn't this be in small.css */
    #tab_text {
        grid-template-rows: min-content 1fr;
    }
    #tab_text .note-text.label {
        grid-column: 1 / -1; 
    }
    #tab_text .note-text.input {
        grid-column: 1 / -1; 
    }
}
/*=====================================================*/



.counts {
    font-style: italic;
}



/*table, th, td {
  border: 1px solid gray;
}*/
table {
  border: 2px solid black;
  border-collapse: collapse;
  width: 100%;
}
th {
    text-align: left;
}
tr, th, td/*, td.note-tags*/ {
  border: 1px solid gray;
  padding: 2px 5px;
}

/*td.note-tags {
    border: inherit;
    color: #ff8;
}

td.note-priority {
    border: inherit;
    
}*/
.material-icons {
    vertical-align: -6px;
}
/* from https://google.github.io/material-design-icons/ */
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.list-table th, .list-table td {
    border: inherit; 
    font-size: inherit;
    background-color: inherit;
}
.list-table th {
    background-color: #eee;
}
.list-table tr:hover td {
    background-color: #ddf8;
}
.list-table tr:hover th {
    background-color: #cce8;
}
.list-table td {
    font-weight: inherit; /* don't want this for th */
    /*vertical-align: middle;  no effect */
}

.note-list-table .note-title {
    width: 50%;
}
.note-list-table .note-title {
    font-size: smaller;
}
.note-title-other {
    color: black;
    font-size: smaller;
}
.note-list-table .note-title:first-line {
    font-size: larger;
}
.note-list-table .note-tags {
    width: 30%;
    font-size: smaller;
}
.note-list-table .note-status {
    width: 10%;
}
.note-list-table .note-altitude {
    width: 6%;
}
.note-list-table .note-priority {
    width: 6%;
}
.note-list-table .note-size {
    width: 6%;
}
.note-list-table .note-annotate {
    width: 6%;
}
.note-list-table .note-id {
    width: 5%;
    font-size: 60%;
}




div.tag-edit {
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, auto) 1fr);
    grid-gap: 3px;
    border: var(--BORDERS);
    border-color: green;
    outline: var(--OUTLINES);
}

.tag-edit .label {
    /* extra padding to make label text more aligned with inputs/selects */
    margin: 0px 0px;
    padding: 15px 0px;
}
.tag-edit label {
    /* extra margin or padding seem to make no difference here */
    margin: 5px;
    padding: 5px;
}
.tag-edit input, .tag-edit textarea, .tag-edit select {
    margin: 5px;
    padding: 5px;
}
.tag-edit input, .tag-edit textarea /*, .tag-edit select*/ {
    border: 1px solid gray;
    border-radius: 3px;
}
.tag-edit input:focus, .tag-edit textarea:focus/*, .tag-edit select:focus*/ {
    /*outline: 2px solid blue;
    outline-offset: 0px;*/
    border: 1px solid blue;
    background: #ffe;
    box-shadow: 0 0 10px #719ECE;
}
.tag-edit input, .tag-edit textarea, .tag-edit select {
    /*width: 99%;*/
    width: calc(100% - 10px); 
    max-width: 100%;
}
/******** THIS IS ALL DUPLICATION of note-view - make a common class for the bits that aren't layout ********/

    
    
    
input:read-only:not([type="button"]), textarea:read-only{
    background-color: #eeeef2;
}

.unsaved-edits {
    background-color: #fdc !important;
}
    
.saving-edits {
    background-color: #eeeef2 !important;
}

.overlay.v_hidden {
    display: none;
} 
.overlay.v_default {
    display: none;
} 
.overlay.v_shown {
    display: block;
} 

#overlay_tabmenu {
    background-color: #fee; /*#333;*/ 
    opacity: 0.5; /*50%;*/
    /*position: absolute;*/
    position: fixed;
    z-index: 10; 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#overlay_topmenu {
    background-color: #eef; /*#333;*/ 
    opacity: 0.5; /*50%;*/
    /*position: absolute;*/
    position: fixed;
    z-index: 10; 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#overlay_busy {
    /*visibility: hidden; /* Hidden by default. Visible on click */
    /*display: none;*/ /* moved to overlay class */
    background-color: #888; /*#333;*/ 
    opacity: 0.5; /*50%;*/
    /*position: absolute;*/
    position: fixed;
    z-index: 10; /* Add a z-index if needed */
    /*left: 50%;*/ /* Center h & v in parent - I hope */
    /*bottom: 50%;*/ /* -or- 30px from the bottom */
    /*top: 90px;*/ /* can't get it centred in top-menu */
    /*top: var(--TOASTTOP);*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
/*    width: 100%;
    height: 100%*/
    /*transform: translate(-50%, -50%);*/
    background-image: url("/static/images/ipencil2.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 64px 64px;
}

#button_hide_overlay_busy.v_default {
    display: none; /* initial */
}
#button_hide_overlay_busy.v_shown {
    /*display: block;*/ /* test */
    display: flex; /* this is what it should be */
}
#button_hide_overlay_busy {
    justify-content: center;
    align-items: center;
    z-index: 15;
    position: fixed;
    
    color: #fff;
    opacity: 0.25;
    background-color: #888; 
    
    font-size: 16px;
    /*position: fixed;
    left: 50;
    top: 100;
    right: 0;
    bottom: 0;*/
    /*position: fixed;
    top: 80%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;*/
    margin: auto;
    /*padding: 0;*/
    vertical-align: middle;
    top: 75%;
    right: 0;
    bottom: 25%;
    left: 0;
    width: 10em;
    height: 3em;
    border: 2px dotted #25f;
    border-radius: 5px;
    cursor: pointer;
} 
    
    
/************************ summary lines ***********************/

.note-summary, .date-detail {
    /*font-size: 85%;*/
    /*color: blue;*/
    /*border-bottom: 1px blue dotted;*/
    /*border-left: 2px blue solid;*/
    /* border: 1px red solid; */
    background-color: #f0f0ff;
}
.note-summary {
    font-size: 85%;
    /*border: 1px green solid;*/
    /*padding-left: 8px;*/
    /*margin-left: 8px;*/
    /*z-index: 10;*/ /*hack so border visible above date-detail*/
}
.date-detail {
    font-size: 70%;
    /*border: 1px blue solid;*/
    /*z-index: -1;*/
}

.note-summary .note-annotate {
    background-color: #fff8e0;
    /*z-index: -1;*/
}

/*.note-summary .note-id, .note-summary .note-title, .note-summary .timestamp {*/
.note-summary *, .date-detail * {
    font-size: inherit;
    font-weight: inherit;
    /*color: blue;*/
    background-color: transparent; /*inherit;*/ /*#8080ff;*/
}

/*.note-summary .timestamp {
    color: blue;
}*/
.timestamp-bold {
    color: blue;
}

.note-summary .note-id::before {
    content: none;
}
.note-summary .note-id::after {
    content: none;
}

.label-extra {
    font-size: smaller;
    font-weight: normal;
    color: black;
    margin: 5px;
    padding: 5px;
}
#edit-dbg-msg {
    white-space: pre-wrap;
}

.note-title-trunc, .note-title-trunc span, .note-title-trunc span a {
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    /*background-color: yellow;*/
    /*width: 100px;*/
    white-space: nowrap; /* required? */
}
th.note-title-trunc {
    width: 30%; 
}
th.note-tags, th.note-dates {
    /* two each of these, total 4 */
    width: 15%
}
th.note-other  {
    width: 10%; 
}
    
/************************ common basics ***********************/

hr.whatever {
    border: 1px #aae dotted;
    height: 15px;
    min-height: 3px;
    width: 90%;
    /*margin: 5px 50px;*/
    background-color: #eee; /* Modern Browsers */
}

hr {
    border: 1px #888 solid;
    height: 3px;
    min-height: 3px;
    width: 98%;
    /*margin: 5px 50px;*/
    background-color: #eee; /* Modern Browsers */
}


/* tweak spacing */ 

h3 {
    margin: 5px 10px;
}
/*p {
    margin: 5px 10px;
}*/





/*********************** special classes ***************************/
/* these are for ones that could be anywhere */ /* even if they aren't */
/* more specific classes within engineering for each section */

.login {
    /*text-align: right;*/
    font-size: smaller;
}
.logged-in {
    /*background: green;*/
}
.logged-out {
    background: yellow; /* lightyellow is not eyecatching enough */
}

.username {
    font-weight: bold;
}

.inline {
    display: inline-block;
}

.errors {
    color: red;
    font-weight: bold;
}

.warnings {
    color: #f80;
}

.smalltext {
    font-size: smaller;
}

/* .messages, .messages p { */
.messages {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: smaller;
    color: blue;
    align: right; 
    /*background: yellow;*/
}

.textbutton {
    /*padding: 15px 25px;*/
    /*font-size: 24px;*/
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #25f;
    /*background-color: #04AA6D;*/
    border: 1px dotted #25f;
    border-radius: 5px;
    /*box-shadow: 0 9px #999;*/
}

.clickable {
    cursor: pointer;
    /*border: 2px dotted #55f;*/
    border-width: 2px 2px;
    padding: 1px 4px;
    border-style: dotted;
    border-color: #55f;
    /*border-bottom: 2px solid #f00;*/
    /*border-right: 2px solid #0f0;*/
    border-radius: 5px;
/*     padding:0px; */
/*     margin: 15px; */
    z-index: 1;
    /*display: block;*/
    position: relative;
}

.right {
    text-align: right;
}

.ping-indicator {
    display: inline-block;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    /*padding: 0px 5px;*/
    margin: 0px 5px;
    background: #eeeeee;
    border: none;
}

.filter-edit-link {
    float: right;
}


/************ moved to end - there may be something dodgy in these bits ********/

@media screen and (max-width: 600px) {
    /* moved to small.css */
}

.centred {
    /* for a p or div */
    text-align: center;
}

.centred-imgxxxxxxxxxxxxxxxxxx {
    display: flex;
    height: 90%;
    width: 100%;
}
.centred-imgxxxxxxxxxxxxxxxxx img {
    margin: auto;
    height: 90%;
    width: 100%;
    max-height: 75%;
    max-width: 75%;
    opacity: 0.5;
}
.overlain {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 0;
}
.overlain div {
    width: 100%;
    height: 100%;
    position: absolute;
    /*top: 0;
    left: 0;*/
    /*margin: auto;*/
    z-index: 5;
}
.overlainxxxxxxxxxxxxxxx img {
    max-width: 30%;
    max-height: 30%;
    /*position: absolute;*/
    /*top: 0;
    left: 0;*/
    margin: auto;
    opacity: 0.2;
    z-index: -5;
}

img.home {
    opacity: 0.15;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    z-index: -5;
}


.bulk-add ul.errors {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 70%;
}

.bulk-add textarea {
    width: 100%;
}

.bulk-messages {
    font-size: 70%;
}

.bulk-title {
    font-style: italic;
}
.bulk-url {
    text-decoration: underline;
}
.bulk-valid {
    color: green;
}
.bulk-added {
    color: blue;
}

/* testing :target */

:target {
    background: lightyellow;
}

.target_testing {
    /*visibility: hidden;*/
/*     visibility: collapse; */
    display: none;
    /*opacity: 0.4;*/
}
.target_testing:target {
    /*visibility: hidden;*/
    visibility: visible;
    /*opacity: 0.4;*/
}
:target .target_testing {
    /*visibility: hidden;*/
/*     visibility: visible; */
    /*opacity: 0.4;*/
    display: block;
}
.targethide {
    display: none;
}
:target .targetshow {
    display: none;
}
:target .targethide {
    display: inline;
}
.target_testing2 {
    display: none;
}
:target .target_testing2 {
    display: inline;
}