body {
    background-color: #fff;
    color: #000;
    font: 10pt verdana, tahoma, arial;
    margin-left: 0px;
}

/* Styles for larger screens (browsers/desktops) */
@media screen and (min-width: 768px) {
   body {
     margin-left: 100px;
   }
}

input, textarea {
    width: 98%
}

a:link {
    color: #000;
    font-weight: bold;
    text-decoration: underline
}

a:active {
    color: #336;
    font-weight: bold;
    text-decoration: underline
}

a:hover {
    color: maroon;
    font-weight: bold;
    text-decoration: none
}

a:visited {
    color: #336;
    font-weight: bold;
    text-decoration: underline
}

.error-message {
    background-color: #fc0;
    color: maroon;
    display: block;
    font-weight: bold;
    text-align: center;
    width: 100%
}

.read-only {
    user-select: none
}

.comment {
    text-overflow: ellipsis;
    white-space: normal;
    background-color: #eee
}

.headline {
    display: block;
    font-size: 11pt;
    font-weight: bold
}

.fHeadLineSand {
    background-color: #fc0;
    display: block;
    font-weight: bold;
    padding: 0.5em;
    text-align: center
}

.sandbox {
    background-color: #ffc;
    display: block;
    font-weight: bold;
    text-align: center;
    width: 100%
}

.fHeadlineBlack {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-align: center
}

.fHeadlineGreen {
    background-color: #9CC;
    font-weight: bold;
    padding: .5em
}

.fHeadlineRed {
    color: maroon;
    font-style: italic;
    font-weight: 700
}

.fSmall {
    color: #000;
    font-size: 9pt;
    font-style: normal
}

.fSmaller {
    color: #000;
    font-size: 8pt;
    font-style: normal
}

.right-aligned {
    text-align: right;
    width: 200px
}

.form-table {
    text-align: left;
    width: 100%
}

.centered-text {
    margin-top: 10px;
    text-align: center
}

.tdformtext {
    background-color: #fff;
    color: #de9c00;
    font-size: 1em;
    text-decoration: none
}

.formtext {
    background-color: #eee;
    border: 1px solid #969696;
    font-size: 1em;
    font-style: normal;
    font-weight: 700
}

.char-count {
    color: #666;
    font: italic 700 1em monospace;
    margin: 10px;
    text-align: left;
    width: 99%
}

.button-container {
    margin: auto;
    text-align: center
}

.form-button {
    width: 150px
}

.fake-email {
    color: #200c0c;
    font-size: smaller;
    font-weight: bold;
    text-decoration: underline;
}

.fake-email:active {
    color: #336;
    font-weight: bold;
    text-decoration: underline;
}

.fake-email:visited {
    color: #200c0c;
    font-weight: bold;
    text-decoration: underline;
}

.fake-email:hover {
    color: #933;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}


.flexTable {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.flexTableRow {
    border: 0px solid #000;
    display: flex;
    flex-direction: row;
}
.flexTableCell, .flexTableHead {
    padding: 3px 10px;
    border: 0px solid #999999;
    flex: 1;
}

.flexTableCellPhoto {
    padding: 0px 0px;
    flex: 1;
    display: flex;
    align-items: stretch;
}

.flexTableCellPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flexTableHeading {
    background-color: #ddd;
    font-weight: bold;
}
.flexTableBody {
    display: flex;
    flex-direction: column;
}