/************************************
Global Defaults 
 ************************************/
/* editable div settings */
[contenteditable=true]:empty:not(:focus):before{
    content:attr(data-placeholder);
}

/* default placeholder text formatting */
/* :-ms-input-placeholder, */
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
input:placeholder-shown {
    opacity: .6;
}

/* safari likes to outline the selected input (no idea why I need this block twice?) */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}

body {
    font-size:14px;
    margin:0 auto 20px auto;
    padding: 8px;
    max-width:1024px;

}

main {
    display: grid;
    justify-content: center;
}

h1 {
    margin: unset;
}

section {
    margin-top:0;
}

/************************************
Header 
 ************************************/
#logo {
    align-items:center;
    display:flex;
    height: 64px;
}

#logo h1 {
    font-size:48px;
    font-weight:100;
    margin: 0;
}

#logo img {
    display: none;
    height:64px;
    width:auto;
}

header {
    align-items:center;
    display:flex;
    justify-content:space-around;
    /*! padding:12px; */
    /*! grid-template-columns: 1fr 1fr; */
}

header #logo {
    /*! flex: 1 auto; */
    /*! justify-content: flex-start; */
}

header #pageNavigator {
    flex: 1 auto;
    justify-content:  space-around;
}

/* Page Header Message */
.headerMessage {
    text-align:center;
    font-size:150%;
    font-weight:700;
    margin-top:16px;
}

.headerMessage:empty,.form .message:empty,.fieldResult:empty {
    display:none;
    margin-top: 0px;
}

@media only screen and (max-width : 700px) {
    header {
        align-items:center;
        display:flex;
        flex-direction: column;
        justify-content:space-between;
        padding: 0;
    }

    header #logo {
        display: none;
    }

    header ul {
        padding-left: 0;
    }
    
}
/************************************
Navigation
 ************************************/
/* Page Navigation Widget */
.pageNavigator {
    /* border-radius:16px; */
    display:inline-flex;
    padding:0 5px;
    overflow: hidden;
}

.pageNavigator a, .pageNavigator .text {
    font-size:15px;
    padding:12px;
    text-decoration:none;
}

.pageNavigator .text {
    border-left:1px solid white;
    border-right:1px solid white;
    text-align:center;
    width: 225px;
}

nav {
    display: block;
}

nav .subMenu1 a {
    display: none;
}

nav .subMenu1 a:active {
    font-weight:700;
}

nav .subMenu1 a:hover,nav .subMenu1 a:focus {
}

nav .topMenu {
    display: flex;
}

nav .topMenu a {
    font-weight:700;
}

nav .topMenu a:hover,nav .topMenu a:focus,nav .subMenu1 {
}

nav a {
    font-size:90%;
    margin:0 8px;
    padding:10px 8px;
    text-decoration:none;
    text-align: center;
}

nav section {
    display:flex;
    justify-content:center;
    padding:0 8px;
}

@media only screen and (max-width : 700px) {
    nav a {
        font-size: 75%;
        margin: 10px 2px 0px 2px;
        padding: 10px 2px;
    }
}


/************************************
Buttons
 ************************************/
.button {
    font-size: 18px;
    line-height: normal;
    text-decoration: none;
    padding: 8px 16px;
    border: none;
    border-radius: var(--border-radius);
}

div.action {
    display: flex;
    flex-direction: row-reverse;
    font-size: 18px;
    line-height: 0px;
    text-align:left;
    text-decoration: none;
    width: auto;
    margin-left: 16px;
    padding: 8px 0px;
}

/************************************
Forms 
 ************************************/
.form {
    border: 0;
    display:grid;
    gap:8px;
    grid-template-columns:min-content 1fr;
    /*! padding:32px; */
    justify-content: center;
    /*! justify-items: left; */
}

.form h1 {
    font-size: 20px;
    padding: 2px 8px;
}

.form .message {
    font-size:16px;
    grid-column:1/-1;
    margin:0 0 15px;
}

.form .fieldResult {
    font-size:12px;
    grid-column:1/-1;
    justify-self:center;
}


.form h1,
.form input[type="submit"],
.form input[type="button"]{
    grid-column:1/-1;
}

.form input {
    font-size:16px;
    margin-bottom:0;
}

.form input[type="checkbox"] {
    justify-self: start;
}

textarea, input[type="text"], 
.form input[type="text"], 
.form input[type="password"], 
.form input[type="date"], 
.form input[type="time"]{
    font-family: inherit;
    border:0;
    font-weight:600;
    padding:8px;
}

.form input[type="file"] {
    width: 100%;
}

.form label {
    font-size: 18px;
    font-weight:400;
    justify-self:end;
    white-space:nowrap;
    align-self: initial;
    line-height: normal;
}

.form label:not(:empty)::after {
    content:":";
}

.form ul.checkboxList {
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    list-style-type: none;
    margin: 0;
    grid-gap: 4px;
    padding: 0;
}

.form ul.checkboxList li,
.form ul.checkboxList li * {
    margin: 0;
    padding:0;
}

.form ul.checkboxList li {
        display: grid;  
        grid-template-columns: 40px 15px;
        overflow: hidden;
        grid-gap: 6px;
}

.form ul.checkboxList li label {
}

.form ul.checkboxList li input {
}

.form .singleCheckbox {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: inherit;
}


.fileUpload {
    width: 100%;
    text-align: center;
}

.fileUpload:after {
    content: "" !important;;
}

.fileUpload input[type="file"] {
    width: 200px;
    /*display: none;*/
}

@media only screen and (max-width : 700px) {
    .form .singleCheckbox {
        display: block;
        text-align: center;
    }
}

/************************************
TiledImages
 ************************************/
.tiledImages {
    column-width:300px
}

.tiledImages .imageContainer {
    position:relative;
}

.tiledImages .action {
    margin: 0;
    position: absolute;
    right: 16px;
    top: 10px;
}

.tiledImages .imageLink {
    background-color:inherit;
    color: inherit;    
    /*! frame: 0; */
    /*! height: 0; */
    line-height: 0;
}

/************************************
Grid 
 ************************************/
.grid {
    display: grid;   
    gap: 4px 6px;
}

.grid .headerRow, .grid .subHeaderRow, .grid .entryRow, .grid .inputRow {
    display: grid;
    grid-template-columns: inherit;
    grid-column: 1/-1; 
    gap:inherit; 
}

.grid .headerRow {
    /*! border-radius: 16px; */
    padding: 3px 8px;
    text-align: center;
    margin-bottom: 4px;
}

.grid .headerRow * {
    align-self:  center;    
}

.grid .entryRow, .grid .inputRow {
    padding: 2px 0px;
}

.grid .entryRow *, .grid .inputRow *{
    font-size: 16px;
    /*! line-height:24px; */
}

.grid .entryRow.entryRowSeparator {
    margin-top: 64px;
}

.grid .subHeaderRow {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* override form settings */
.grid .form input {
    padding: 0px;
}

.grid .inputRow {
    padding: unset;
    width: 100%;
    justify-content: initial;
}

.grid .entryRow.selected input{
    color: inherit;
    background-color: inherit;  
}

/* button/anchor container */
.grid .action {
    grid-column: 1/-1;
    max-height: 10000px;
    opacity: 1;
    transition-property: max-height, opacity, padding, margin;
    transition-duration: .25s;
    transition-timing-function:   linear;
    overflow: hidden;

    margin: 0;
}

.grid .action.invisible {
    max-height: 0;
    opacity: 0;
}
 
.grid .action .button {
    margin-left: 16px;
}

.grid div.action.invisible {
    padding: 0px;
}

.grid .form.action {
    /* TODO assign color to border */
    display: grid;
    padding: 8px;
    border: 1px solid;
}

.grid .form.action.invisible {
    padding: 0;
    max-height: 0;
    /*! margin: 0; */
}

.grid .form.action div.action {
    margin: 0;
    padding: 0;
}

@media only screen and (max-width : 1024px) { 
    .grid .subHeaderRow,
    .grid .entryRow,
    .grid .inputRow {
        padding: 0 8px;
        width: calc(100% - 16px);
    }    
}

@media only screen and (max-width : 880px) {
    .grid .subHeaderRow,
    .grid .entryRow,
    .grid .inputRow {
        padding: 0 8px;
        width: calc(100% - 16px);
    }
}

@media only screen and (max-width : 700px) {
    .grid * * {
        font-size: 16px;
        line-height:24px;
    }

    .grid .action * {
        font-size: 18px;
        /* line-height:0px; */
    }
}
/************************************
Error Page 
 ************************************/
#errorPage pre {
    font-size: 14px;
}

/************************************
Login Page 
 ************************************/
#loginPage h1 {
    /*! padding: 0 10px; */
    /* padding-left: 20px;*/
    text-align: left;
    margin: 0;
}

#loginPage h2 {
    padding: 0;
    /* padding-left: 20px;*/
    text-align: right;
    margin: 0;
    margin-top: 10px;
    justify-self: right;
    max-width: 512px;
    white-space: pre-line;
}

#loginPage .form {
    margin-top: 30px;
    /* margin-top:80px; */
}

/************************************
Registration Page 
 ************************************/
#registrationPage .form {
    margin-top:80px;
}

/************************************
Diary Page 
 ************************************/
#diaryPage main {
    justify-content:  normal;
}

.notificationList {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.notificationList .notification {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font: var(--notification-font)
}

.diaryMOTD .headerRow,
.diaryQuote .headerRow {
    display: none;
}

.diaryMOTD .motd {                                                                                                                                                           
    text-align: center;                                                                                                                                                      
    margin-bottom: 26px;                                                                                                                                                      
    font: var(--motd-font);                                                                                                                                                         
    white-space: pre-line;
    
}                         


.diaryQuote .quote {                                                                                                                                                           
    text-align: center;
    margin-top: 48px;                                                                                                                                                      
    font: var(--quote-font);                                                                                                                                                         
    
    white-space: pre-line;
    
}                         

/*
.diaryMOTD .headerRow h1,
.diaryQuote .headerRow h1 {
    background-color: unset;
    color: unset;
    font-size: 16px;
    width: 100%;
    grid-column: 1/-1;
}
.diaryMOTD .motd,
.diaryQuote .quote {                                                                                                                                                           
    text-align: center;                                                                                                                                                      
    margin-bottom: 6px;                                                                                                                                                      
    font-size: 22px;                                                                                                                                                         
    white-space: pre-line;
}                         
*/

.diaryActivity {   
    grid-template-columns: auto 60px 100px repeat(4, 60px);
    width: 100%;
}

.diaryActivity .headerRow .amount {
    text-align: right;
}

.diaryActivity .headerRow .total {
    text-align: right;  
    padding: 4px 0px;
    margin-top:2px;

}

.diaryActivity .entryRow .calories {
    text-align: center;  
    height: 22px;
}

.diaryActivity .subHeaderRow h1 {
    grid-column: 1/3;
    text-align: left;
    font-size: 24px;
    margin-top: 0;
    padding: 0;
}

.diaryActivity .subHeaderRow .goals {
    grid-column: 3/-1;
    text-align: center;
    font-size: 12px;

    display: grid;
    justify-content: center;
    align-content: center;
}

/* right align these */
.diaryActivity .amount, 
.diaryActivity .servingSize, 
.diaryActivity .calories, 
.diaryActivity .carbs, 
.diaryActivity .protein, 
.diaryActivity .fat,  
.diaryActivity .amount, 
.diaryActivity .calories, 
.diaryActivity .carbs, 
.diaryActivity .protein, 
.diaryActivity .fat  {
    text-align: right;
    overflow: hidden;
}

/* center align these */
.diaryActivity .headerRow .action,
.diaryActivity .headerRow .calories .total {
    text-align: center;
}

/* indent the first column */
.diaryActivity .entryRow .name, 
.diaryActivity .inputRow .name {
    margin-left: 12px;
}

/* main page note */
.diaryDailyNote{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 6px;
}


.diaryDailyNote .headerRow {
    background-color: unset;
    color: unset; 
    /*! font-size: 24px; */
    padding: 4px;
    margin: 30px 0 10px 0;
}

.diaryDailyNote .headerRow h1{
    background-color: unset;
    color: unset; 
    font-size: 16px;
    /*! width: 100%; */
    grid-column: 1/-1;
}

.diaryDailyNote .entryRow {
    display: block;
    position: relative;
    margin: 0px;
}

.diaryDailyNote .divDailyNote {
    white-space: pre-wrap;
    overflow-x: auto;
}

/* main page goals */
.diaryGoal{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 6px;
}


.diaryGoal .headerRow {
    background-color: unset;
    color: unset; 
    /*! font-size: 24px; */
    padding: 4px;
    margin: 30px 0 10px 0;
}

.diaryGoal .headerRow h1{
    background-color: unset;
    color: unset; 
    font-size: 16px;
    /*! width: 100%; */
    grid-column: 1/-1;
}

.diaryGoal .entryRow {
    display: block;
    position: relative;
    margin: 0px;
}

.diaryGoal .entryRow .goalCheckbox {
    width: auto;
}

.diaryGoal .goalCompleted {
    text-decoration: line-through;
}

.diaryGoal textarea {
    width: 100%;
}

/* main page journal */
.diaryJournal{
    display: grid;
    grid-template-columns: auto;
}

.diaryJournal .headerRow {
    background-color: unset;
    color: unset; 
    /*! font-size: 24px; */
    padding: 4px;
    margin: 30px 0 10px 0;
}

.diaryJournal .headerRow h1{
    background-color: unset;
    color: unset; 
    font-size: 16px;
    grid-column: 1/-1;
}

.diaryJournal .entryRow {
    display: block;
    position: relative;
    margin:8px 4px;
}

.diaryJournal .journalMessage {
    white-space: pre-line;
}

.diaryJournal .entryRow:hover {
    font-style: italic;
    text-decoration: underline;
}
/* main page gallery */


.diaryGallery{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 6px;
}

.diaryGallery .headerRow {
    background-color: unset;
    color: unset; 
    /*! font-size: 24px; */
    padding: 4px;
    margin: 30px 0 10px 0;
}

.diaryGallery .headerRow h1{
    background-color: unset;
    color: unset; 
    font-size: 16px;
    /*! width: 100%; */
    grid-column: 1/-1;
}

.diaryGallery .tiledImages {
    grid-column: 1 / -1;
    column-gap: 0;
}

.diaryGallery .image {
    width: 100%;
    object-fit: contain;
}

@media only screen and (max-width : 700px) {

    .diaryMOTD .motd,
    .diaryQuote .quote {                                                                                                                                                       
        font-size: 16px;                                                                                                                                                     
    }                                                                                                                                                                        
  
    .diaryActivity .headerRow .total {
        margin-top: 0;
        padding: 2px 0 0 0 ;
    }

    .diaryActivity .headerRow div {
        font-size: 14px ;
        line-height:16px;
    }

    .diaryActivity .headerRow div.calories {
        font-size: 10px ;
        line-height:16px;
    }

    .diaryActivity .entryRow .name {
        /*grid-column: 1/-1;*/
        grid-column: 1;
    }

    .diaryActivity .entryRow .amount {
        grid-column: 2;
    }

    .diaryActivity {
        grid-template-columns: auto 50px 80px 40px;
    }

    .diaryActivity .carbs, .diaryActivity .protein, .diaryActivity .fat  {
        display: none;
    }  

    .diaryGoal {
        font-size: 16px;
    }
}

/************************************
Food List Page 
 ************************************/
.foodList {
    display:grid;
    grid-template-columns: 60px auto 100px repeat(4, 60px);
    margin: 10px;
}

.foodList .nameSearch {
    display: flex;
    align-content: baseline;
}

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

.foodList .amount,
.foodList .servingSize,
.foodList .calories,
.foodList .carbs,
.foodList .protein,
.foodList .fat {
    text-align: right;
}

 @media only screen and (max-width : 700px) {

    /* foodList Page */
    .foodList {
        margin: 0;
        grid-template-columns: auto repeat(2, 50px);
    }

    .foodList .amount,
    .foodList .carbs, 
    .foodList .protein, 
    .foodList .fat  {
        display: none;
    }  

    .foodList .headerRow {
        padding: 4px;
    }
    .foodList .inputRow .name {
        grid-column: 1 / 3;
    }

    .foodList .inputRow .servingSize,
    .foodList .inputRow .calories {
        display: none;   
    }

    .foodList .headerRow div {
        font-size: 10px;
        line-height: 15px; 
    }  

    .foodList .entryRow div {
        font-size: 14px;
        line-height: 15px; 
    }  

    .foodList :not(.inputRow) .calories {
        grid-column: 3;
    }  
}

/************************************
Tracking Page 
 ************************************/

#trackingPage main {
    justify-content: unset;
}
#trackingPage .form {
    grid-template-columns: repeat(6, 1fr);

}

#trackingPage .form input {
    opacity: 1;
}

.trackingTable {
    display: grid;
    grid-template-columns: 105px 95px repeat(10, calc((100% - 105px - 95px  - 12*6px)/10));
    grid-gap: 6px;
    /*! margin: auto; */
    /*! width: 100%; */
}

/*
.trackingTable .headerRow .tracking {
writing-mode:  sideways-rl;
}
 */

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

@media only screen and (max-width : 880px) {

    #trackingPage .form {
        grid-template-columns: min-content min-content;
    }   

    .trackingTable {
        /*grid-template-columns: 82px 75px repeat(3, 40px) 45px;  */
        grid-template-columns: 82px 75px repeat(3, calc((100% - 82px - 75px - 4*6px)/3));
    }

    .trackingTable .trackingValue3, 
    .trackingTable .trackingValue4, 
    .trackingTable .trackingValue5, 
    .trackingTable .trackingValue6, 
    .trackingTable .trackingValue7, 
    .trackingTable .trackingValue8, 
    .trackingTable .trackingValue9 {
        display: none;
    } 

    .trackingTable * * {
        font-size: 10px !important;
    }

}



/************************************
Diary Report Page 
 ************************************/
#diaryReportPage,
#diaryReportPage body,
#diaryReportPage header
{
    margin: 12mm 12mm 12mm 12mm;  
    background-color: white;
    color: black;
}

#diaryReportPage header {
    padding: 0;
    display: flex;
    justify-content: space-between;    
}

#diaryReportPage .reportTitle {
    font-size: 14px;
}

#diaryReportPage .reportDate {
    font-size: 14px;
}

.diaryReport table {
    page-break-inside: avoid;
    font-size: 10px;
    width: 100%;
    margin: 32px 0px;
}

.diaryReport table caption {
}

.diaryReport table caption h1 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 4px 0;
}

.diaryReport table caption h2 {
    text-align: center;
    font-size: 16px;
    margin: 0 0 12px 0;

}

.diaryReport table th,
.diaryReport table td {
    vertical-align: top;
}

.diaryReport .calorieSummary .date {
    text-align: left;
    width: 70px;
}

.diaryReport .calorieSummary .day {
    text-align: left;
    width: 70px;
}

.diaryReport .calorieSummary .dayCalories,
.diaryReport .calorieSummary .meal {
    text-align: right;
    width: 70px;
}

.diaryReport .dayTable .mealName {
    text-align: left;
    width: 50px;
}

.diaryReport .dayTable .mealCalories {
    text-align: right;
    width: 50px;
    padding-right:10px;
}

.diaryReport table .name {
    text-align: left;
    width: 500px;
}

.diaryReport .dayTable .amount, 
.diaryReport .dayTable .servingSize, 
.diaryReport .dayTable .calories, 
.diaryReport .dayTable .carbs, 
.diaryReport .dayTable .protein, 
.diaryReport .dayTable .fat {
    text-align: right;
    width: 50px;
}

.diaryReport table tfoot td {
    text-decoration:   underline;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    white-space:  nowrap;
    font-size: 12px;
}


/************************************
Site List Page 
 ************************************/
.siteList {
    display:grid;
    grid-template-columns: 1fr 1fr .5fr;
    margin: 10px;
}

.siteList .domainName, 
.siteList .Name, 
.siteList .edEnabled {
    text-align: left;
}

/************************************
Quote List Page 
 ************************************/
.quoteList {
    display:grid;
    grid-template-columns: 1fr .5fr;
    margin: 10px;
}

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

/************************************
Double Diary 
 ************************************/

#doubleDiaryPage body {
    max-width: unset;
}

#doubleDiaryPage main {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#doubleDiaryPage main iframe {
    width: 100%;
    height: 100vh;
    border: unset;
}

/************************************
Responsive Adjustments 
 ************************************/