:root {
    --BORDERS: red 0px dotted;
    --OUTLINES: #0000ff40 0px dotted;
    --tag-colour: #008000;
    --line-text-wrap: nowrap;
}

html {
  box-sizing: border-box;
}

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);
}

div {
    border: var(--BORDERS);
    outline: var(--OUTLINES);
}


/* 
 * main page layout
 */

/*.body-container, */
body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /*width: 97%;*/
    right: 0;
    
    /*display: flex;*/
    /*flex-direction: column;*/ 
    /*display: grid;*/
    display: flex;
    flex-direction: column;
    /*grid-template-rows: 4em 1fr 2em;*/
}

#page-header {
    position: relative;
    /*position: fixed;*/
    top: 0;
    left: 0;
    max-width: 100%;
    
    text-align: center;
    background-color: #e0ffff;
    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);
}

#body-container {
    position: relative;
    flex-grow: 1;
    overflow: auto;
    top: 0;
    left: 0;
    height: 100%;
    
    display: flex;
    flex-direction: column;
}

#page-footer {
    position: relative;
}

/*
 * stuff
 */

.js-button {
    cursor: pointer;
    color: #4000ff;
}

table {
    table-layout: fixed;
    width: 98%;
    left: 5%;
    border-spacing: 1px;
    border-collapse: separate;
}
th, td {
    padding: 2px;
    margin: 10px;
}
th {
    background-color: #e0e0ff;
}
td {
    background-color: #e8f8ff;
}
td {
    overflow-wrap: break-word; /* primarily for admin functions tables */
}

.page-id, .page-url {
    border-top: 1px black solid;
}    

.page-url, .page-title, .page-notes {
    text-wrap: var(--line-text-wrap);
    overflow: hidden;  
    overflow-wrap: anywhere;
    word-break: break-all;
    max-width: 90vw;
}
/*The difference between overflow-wrap: anywhere and overflow-wrap: break-word is in the min-content intrinsic sizes.
The difference between anywhere and break-word is apparent when calculating the min-content intrinsic sizes. With break-word, the browser doesn’t consider the soft wrap opportunities introduced by the word break when calculating min-content intrinsic sizes, but it does with anywhere. */

.label-value-grid {
    size: smaller;
/*     background-color: #e0e0ff; */
    display: grid;
/*     grid-template-columns: 20% 1fr; */
/*     grid-template-columns: auto auto; */
    grid-template-columns: auto 1fr;
    grid-gap: 5px;
}

.label-value-grid label {
    grid-column: 1 / 2;
    background-color: #e0e0ff;
}

.label-value-grid textarea {
    /*min-height: 10em;*/ /*now adjusted via js*/
}

.label-value-grid ul.errors {
    grid-column: 1 / 3;
}

.label-value-grid * {
    /* Colour the grid elements but not the gaps */
    background-color: #f8f8ff;
    padding: 5px;
}

.label-textarea-grid {
/*     size: smaller; */
/*     background-color: #e0e0ff; */
    display: grid;
/*     grid-template-columns: 20% 1fr; */
/*     grid-template-columns: auto auto; */
    grid-template-columns: auto 1fr;
    grid-gap: 5px;
}

.label-textarea-grid label {
    grid-column: 1 / 3;
    background-color: #f0f0ff;
}

.label-textarea-grid textarea {
    grid-column: 1 / 3;
    /*min-height: 10em;*/ /*now adjusted via js*/
}

.label-textarea-grid ul.errors {
    grid-column: 1 / 3;
}

.label-textarea-grid * {
    /* Colour the grid elements but not the gaps */
    background-color: #f8f8ff;
    padding: 5px;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}