html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
}

body {
    background: #fff;
    margin: 20px 50px;
    line-height: 1.4;
}

a, a.temporarytetstlink {
    color: blue;
}

a:visited {
    color: blue;
}

a.temporarytestlink {
    color: blue;
}

    a.temporarytestlink:visited {
        color: blue;
    }

table {
    line-height: 1.4;
}

div {
    xborder: 1px solid red;
}


img {
    xborder: 2px solid red;
}

h1 {
    xborder: 2px solid lime;
}


div.flex-container.logoandtitle {
    xborder: 2px solid lime;
    margin-bottom: 30px;
}

.remindercount {
    color: #aaaaaa;
    font-size: 90%;
}

.recentreminders {
    display: grid;
    color: #aaaaaa;
    grid-row-gap: 5px;
    xwidth: 540px;
    xtext-align: left;
    font-size: 90%;
}

.recentreminder {
    margin: 0rem;
    padding: 0rem 0rem;
    text-overflow: ellipsis; /* you appear to need all three */
    white-space: nowrap;
    overflow: hidden;
    xfont-size: 0.9rem;
}

.emailresponsediv {
    display: block;
}

.reminderedit .emailresponsediv {
    display: block;
}

.loginbutton .mediumwide {
    display: inline-block;
    padding: 0.7em 1.9em;
    margin: 0 0.3em 0.3em 0;
    border: 1px solid white;
    border-radius: 0.6em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1em;
    color: #ffffff;
    background-color: cornflowerblue; /* was #6f9dda */
    text-align: center;
    transition: all 0.2s;
}

    .loginbutton .mediumwide .justafterdate {
        margin: 2em 0.3em 0.3em 0;
    }


p.copyright {
    font-size: 80%;
    color: silver;
    margin-top: 32px;
    margin-bottom: 20px;
}

#laResenddate {
    display: inline-block;
       color: cornflowerblue;
       font-size: 86%;
       margin-top: 10px;
       margin-bottom: 20px;
}

#ddReesenddays {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    top: -1px;
}

.entryitemlabel .subentryitemlabel {
    color: cornflowerblue;
    font-size: 86%;
    font-style: italic;
}

#versioninformation {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 10px;
    width: 10px;
    background-color: white;
}

    #versioninformation a {
        padding: 3px;
        text-decoration: none;
    }

#logorectangle {
    position: relative;
    top: -18px;
    left: -2px;
}

.surprisedcolor {
    color: black !important;
}

/*
    FLEX CONTAINER CODE
    ===================
*/

.flex-container {
    display: flex;
}

.flex-vertical-center {
    align-items: center;
}

.flex-vertical-top {
    align-items: flex-start;
}

.flex-vertical-bottom {
    align-items: flex-end;
}






x.flex-firstchild-margins:first-child {
    margin-right: 20px;
}

xi.responseiconmargin {
    margin: 100px;
}

/* 'flex: 1' will give equal width divs occupying all the available space which can be useful */
.flex-child {
}

    .flex-child:first-child {
        margin-right: 20px;
    }

.flex-child-text {
    position: relative;
    top: 3px;
}

.flex-childd-icon {
    border: 1px solid red;
}

/* Check agrees with */
.flexlabelandadvice {
    width: 540px;
    xborder: 1px solid red;
}

.flex1 {
    text-align: left;
    width: 300px;
}

.flex2 {
    position: relative;
    top: 2px;
    text-align: right;
    width: 100%;
}

.makeinline {
    display: inline-block;
}

/* 20px is slightly too much possibly so try 16px */
.standardcontentdiv {
    margin-bottom: 15px;
}

.shallowbottommargin {
    margin-bottom: 0px;
}

.deepbottommargin {
    margin-bottom: 30px;
}


.showborders {
    border: 0px solid red;
}

#ddChangereminderdate {
    width: 170px;
}

/* logo-rectangle logo-icon logo-title */
#logo-rectangle {
    position: relative;
    top: 4px;
    margin-right: 16px;
}

#logo-icon {
    position: relative;
    top: -4px;
    margin-right: 14px;
}

#logo-title {
    position: relative;
    top: 2px;
}

#feedback-link, #createnewaccount_link, #database-name, #highimportanceoutstanding-link, #culture-name, #reminderinvite-link {
    display: inline-block;
    xposition: relative;
    xtop: 2px;
    background-color: fuchsia;
    background-color: deepskyblue;
    color: white;
    font-size: 80%;
    padding: 2px 14px 1px 14px;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 24px;
}

#createnewaccount_link {
    background-color: darkorange;
}

#highimportanceoutstanding-link {
    background-color: red;
    font-weight:700;
}

#database-name, #culture-name {
    font-size: 90%;
    color: silver;
    background-color: white;
    top: 2px;
    margin-left: 16px;
}

#culture-name {
    margin-left: 0px;
}

#reminderinvite-link {
    background-color: lightseagreen;
}


#highimportance {
    display: inline-block;
    xposition: relative;
    xtop: 2px;
    background-color: red;
    color: white;
    font-size: 90%;
    padding: 2px 14px 1px 14px;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 24px;
}

#edEmailaddress, #edPassword, #edPassword2 {
    width: 280px;
    padding: 4px 8px 4px 8px;
    xbackground-color: red !important;
}

p #edPassword, #edPassword2 {
    xpadding-bottom: 130px;
}

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 154) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

.discretetext {
    font-size: 80%;
    color: silver;
}

.displaylanguage {
    font-size: 85%;
    color: cornflowerblue;
    font-style: italic;
}

.oldlink {
    font-size: 100%;
    opacity: 0.2;
}

/* Changed temporary from 0.6 to 1.0 opacity and cornflowerblue to red and 80% to 84% */
.footnotecomment, .footnotecommentdone {
    display: inline-block;
    font-size: 84%;
    color: cornflowerblue;
    opacity: 0.9;
    margin: 3px 6px 3px 16px;
}

.footnotecommentdone {
    color: green;
    opacity: 0.4;
}

xtr.datagridHeader {
    margin-bottom: 100px;
    padding-bottom: 100px;
}

.datagridHeader {
    font-size: 1.1em;
    color: #444444;
    background-color: #ffffff; /* was #ddddff */
    border: 1px solid white;
    height: 36px; /* was 30px */
}

    .datagridHeader td {
        border-bottom: 2px solid silver;
        xpadding-bottom: 100px;
        xmargin-bottom: 100px;
    }

.datagridItem {
    color: #777777;
    border: 1px solid #ffffff;
}

    .datagridItem td {
        padding: 5px 20px 5px 0px;
    }

/* this works and styles the first cell of each row*/
x.datagridItem td:first-child {
    vertical-align: central;
    color: cyan;
    padding-top: 50px;
}

.datagridItem td:last-child {
    xvertical-align: central;
    xcolor: red;
    xpadding-top: 50px;
    padding-right: 4px;
}



.datagrid tr:nth-child(2) {
    xbackground: yellow;
}

    .datagrid tr:nth-child(2) td {
        xbackground: green;
        padding-top: 12px;
    }

.datagrid tr:last-child td {
    xbackground: green;
    padding-bottom: 14px;
}

.datagridItem td a {
    color: cornflowerblue;
    text-decoration: none;
}

.settingsstatuslabel {
    color: red;
    font-size: 90%;
    margin: 0px 0px 0px 20px;
}

a.listupcominglink {
    color: dodgerblue;
    xcolor: deepskyblue;
    xfont-weight: bold;
    text-decoration: none;
    display: inline-block;
    border: 1px solid silver;
    padding: 2px 10px;
    margin: 12px;
}

a.listupcominglinkclicked {
    color: white;
    background-color: dodgerblue;
    text-decoration: none;
    xfont-weight: bold;
    display: inline-block;
    border: 1px solid silver;
    padding: 2px 10px;
    margin: 12px;
}

a.listupcominglink.firstlink {
    xmargin-left: 30px;
}

a.listupcominglinkclicked.firstlink {
    xmargin-left: 30px;
}

#heReportdescription {
    margin-right: 12px;
}

xa.listupcominglink {
    color: #333333;
}

    xa.listupcominglink:active {
        color: #ff6666;
    }

    xa.listupcominglink:link {
        color: #99ff99;
    }

    xa.listupcominglink:visited {
        color: #CCCCff;
    }

#laNorowsmessage {
    display: block;
    color: dodgerblue;
    padding: 6px 10px 6px 20px;
    border-left: 6px solid lightblue;
    margin: 20px 10px 30px 50px;
}

.errormessage {
    position: relative;
    top: -2px;
    color: red;
    font-size: 90%;
}

.smallmenuitem {
    font-size: 75%;
    opacity: 0.5;
}

p.development {
    margin-top: 0px;
    margin-bottom: 0px;
}




    /* Flexbox consists of a flex container and flex items
   Setting the display as flex says this is a flex container */
    .flex-container-main {
      display: flex;
      xbackground-color: DodgerBlue;
      height: 100px;
    }

    .flex-container-main div.logo {
      xbackground-color: red;

    }

    .flex-container-main div.title {
      xbackground-color: pink;
    }

    .flex-container-main div.information {
      xbackground-color: yellow;
      width: 100%;
    }

    .flex-container-information {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .flex-container-information div.information-top {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .flex-container-information div.information-middle {
      xbackground-color: white;
      height: 100%;
    }

    .flex-container-information div.information-bottom {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      xbackground-color: thistle;
      xwidth: 100%;
      xalign-self: flex-end;
    }

    div .information-top div {
      padding: 10px 0px 10px 20px;
      color: cornflowerblue;
      font-size: 90%;
    }

    div .information-top div a {
      color: cornflowerblue;
    }

    div .information-bottom div {
      padding: 10px 0px 10px 20px;
      color: cornflowerblue;
      font-size: 90%;
    }  







    hr {
      border-top: 1px solid #888;
      border-left: 0px;
      margin-bottom: 16px;
   }

    hr .footer {
      color: blue;
    }    


    .reportimportantindicator {
        color: fuchsia;
        font-weight: 900;
        xfont-size: 18px;
    }

.gitbranch {
    position: absolute;
    top: 6px;
    left: 12px;
    color: #aaa;
    font-size: 86%;
    font-weight: bold;
}