:root {
    --colorWhite: white;
    --colorLightGray: #f8f9fa;
    --colorMediumGray: #b3b5b8;
    --colorDarkGray: gray;
    --colorMediumBlue: #2288c5;
    --colorDarkBlue: #022243;
    --colorMediumGreen: #28a745;

    --standardPadding: 1em 2em;
    --maxContentWidth: 1160px; /* 1024px; */
}
.colorMediumGray {color: var(--colorMediumGray);}
.colorDarkGray {color: var(--colorDarkGray);}
.colorMediumBlue {color: var(--colorMediumBlue);}
.colorMediumGreen {color: var(--colorMediumGreen);}
.backgroundMediumGray{color: white; background-color: var(--colorMediumGray);}
.backgroundDarkGray{color: white; background-color: var(--colorDarkGray);}
.backgroundMediumGreen{color: white; background-color: var(--colorMediumGreen);}

html{
    height: 100%;
} 
body{
    height: 100%;
    margin: 0;
    font-family: Verdana;
    display: flex;
    flex-direction: column;
    min-width: 1000px;
    font-size: 1em;
}

* {
    box-sizing: border-box;
}

button {
    font-size: 1em;
    cursor: pointer;
}
select {
    font-size: 1em;
}

input[type=text], input[type=password], input[type=number], input[type=date] {
    font-size: 1em;
    border: var(--colorDarkGray);
    padding: 0.5em 1em;
}

/* flex left to right */
.flexWidth {
    display: flex;
}
.vAlignCenter{
    align-items: center;
}
.hAlignCenter{
    text-align: center;
}
.flexWidth > div:first-child {
    flex-grow: 0;
    flex-shrink: 1;
}
.flexWidth > div {
    flex-grow: 1;
}
.flexWidth > div:last-child {
    flex-grow: 0;
    flex-shrink: 1;
}
.flexGrow {
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
}
.flexShrink {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
}
.displayFlex {
    display: flex;
}

/* box - top caption colored, white body */
.box {
    margin: 1em auto;
    background-color: white;
    border-radius: 0.5em;
    box-shadow: 4px 6px 13px 3px #bfc1c3
}
.box > div {
    padding: 1em;
}
.box > div:first-child {
    font-size: 2em;
    text-align: center;
    padding: 0.5em 1em;
    background-color: #f7f7f7;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
.underBox { /* aligned area under the shaded box */
    display: flex;
}
.underBox > div {
    flex-grow: 1;
}
.underBox > div:last-child {
    flex-grow: 0;
    flex-shrink: 1;
}

/* like the form on SignIn */
.standardForm label {
    width: 100%;
    display: block;
    margin-bottom: 0.5em;
}
.standardForm input {
    width: 100%;
    display: block;
    margin-bottom: 1em;
    border: 1px solid #8a9397;
    padding: 0.5em 1em;
}
.standardForm button {
    width: 100%;
    display: block;
}
.standardForm .fileSelector {
    display: flex;
    cursor: pointer;
}
.standardForm .fileSelector > div {
    width: 100%;
    flex-grow: 1;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    border: 1px solid #8a9397;
}
.standardForm .fileSelector button {
    display: inline-block;
    flex-shrink: 1;
    width: inherit;
    padding: 0 1em;
    height: 2.3em;
    border-left: none;
    border-top: 1px solid #8a9397;
    border-right: 1px solid #8a9397;
    border-bottom: 1px solid #8a9397;
}
.standardForm textarea {
    width: 100%;
    min-height: 8em;
}

.signInBox, .signUpBox, .forgotPasswordBox {
    width: 400px;
    margin-top: 4em;
}
.signInUnderBox, .signUpUnderBox, .forgotPasswordUnderBox {
    width: 400px;
    margin: 2em auto;
}

/* priceBox */
.priceBox {
    width: 300px;
    min-height: 297px;
}
.priceBox > div:first-child {
    font-size: 1.4em;
}
.priceBox .priceBoxAmount {
    font-size: 1.2em;
}
.priceBox .priceBoxCaption {
    margin-top: 1em;
    font-size: 1.2em;
}
.priceBox .priceBoxText {
    color: #6c757d;
    margin-top: 1em;
}

/* flex left to right */
/*
    <div style="display: flex;">
        <div style="flex-shrink: 1; border: 3px solid blue;">A</div>
        <div style="flex-grow: 1; border: 3px solid green;">B</div>
        <div style="flex-shrink: 1; border: 3px solid blue;">C</div>
    </div>
    <br>
    <div style="display: flex;">
        <div style="flex-shrink: 1; border: 3px solid blue;">A</div>
        <div style="flex-grow: 1; text-align: right; border: 3px solid blue;">C</div>
    </div>
*/

/* grid */
.grid{display: table;}
.grid > div {display: table-row;}
.grid > div > div {display: table-cell;}
/*.grid_row {display: table-row;}
.grid_cell {display: table-cell;}
.grid_padded .grid_cell{
    padding: 2px 4px;
}*/

.data_grid{
    border: 1px solid black;
    border-collapse: collapse;
}
.data_grid, th, td {
    border: 1px solid black;
}
.data_grid th{
    padding: 4px 8px;
    background: #40ABE0;
    color: white;
    font-weight: normal;
}
.data_grid td{
    padding: 4px 8px;
}
/*
.box {
    display: flex;
    flex-flow: column;;
    height: 100%;
}

.box .row {
}

.box .row.header {
    flex: 0 1 auto;
    background: #eee;
}

.box .row.content{
    flex: 1 1 auto;
    border: none;
}
.padded_content{
    padding: 15px 25px;
}

.box .row.footer{
    flex: 0 1 auto;
    background: #3e5961;
    text-align: center;
}
*/

/* padding ------------------------------------------------------------------------------------------------------------------- */
.standardPadding {padding: 1em 2em;}
.padding1 {padding: 1em;}
.paddingLeft4 {padding-left: 4em;}
.paddingRight1 {padding-right: 1em;}
.hPadding1 {padding: 0 1em;}
.marginBottom1 {margin-bottom: 1em;}
.marginBottom2 {margin-bottom: 2em;}
.marginBottom3 {margin-bottom: 3em;}
.marginBottom4 {margin-bottom: 4em;}
.marginTop1 {margin-top: 1em;}
.marginTop2 {margin-top: 2em;}
.marginTop3 {margin-top: 3em;}
.marginTop4 {margin-top: 4em;}
.marginW {margin-left: 1em; margin-right: 1em;}

/* img Alignment ------------------------------------------------------------------------------------------------------------------- */
.imgTextTop {vertical-align: text-top;}

/* text Alignment ------------------------------------------------------------------------------------------------------------------- */
.textCenter {text-align: center;}
.textRight {text-align: right;}
.textLeft {text-align: left;}
.textBigger1-2 {font-size: 1.2em;}

/* text Alignment ------------------------------------------------------------------------------------------------------------------- */
.fullWidth {
    display: block;
    width: 100%;
}

/* Captions/headings ------------------------------------------------------------------------------------------------------------------- */
.caption1 {
    font-size: 1.5em;
    margin-bottom: 1em;
}
.caption2 {
    font-size: 1.2em;
    margin-bottom: 1em;
}
.caption2m {
    font-size: 1.2em;
    margin: 1em;
}
.caption3 {
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.captionBold{
    font-weight: bold;
}

.textDeemphasized {
    font-size: 0.9em;
    color: var(--colorDarkGray);
}

/* links ------------------------------------------------------------------------------------------------------------------- */
.standardLink {
    text-decoration: none;
}
.mediumBlueLink {
    text-decoration: none;
    color: var(--colorMediumBlue);
}
.mediumBlueLink:hover {
    color: var(--colorDarkBlue);
}

.navButtonBar {
    text-align: center;
    margin-top: 1em;
}
.navButtonBar a {
    text-decoration: none;
    /*background-color: #007bff;*/
    background-color: white;
    color: #007bff;
    border-radius: 0.25em;
    padding: 0.5em 1em;
}
.navButtonBar a:hover {
    color: white;
    background-color: #007bff;
}
.navButtonBar a:not(:first-child) {
    margin-left: 1em;
}
.navButtonBar .selected {
    color: white;
    background-color: #007bff;
}

/* buttons ------------------------------------------------------------------------------------------------------------------- */
.plainButton { /* button that has no background or border */
    background: inherit;
    border: none;
    padding: 0px;
}

.imageButton{
    border: none;
    cursor: pointer;
    background-color: white;
}

.buttonImage {
    border: none;
    background-color: inherit;
    margin: 0;
    padding: 0;
}

.darkButton{ /* like the sign in button */
    color: white;
    background-color: #022243;
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border: none;
    cursor: pointer;
}
.darkButton:hover {
    background-color: #007bff;
}
.darkButton:disabled, .darkButton[disabled] {
    background-color: #aaa;
}

.mediumButton {
    margin-top: 1em;
    width: 100%;
    color: white;
    background-color: #007bff;
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border: none;
    cursor: pointer;
}
.mediumButton:hover {
    background-color: var(--colorMediumBlue);
}

.mediumGrayButton {
    margin-top: 1em;
    width: 100%;
    color: white;
    background-color: var(--colorMediumGray);
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border: none;
    cursor: pointer;
}
.mediumGrayButton:hover {
    background-color: var(--colorDarkGray);
}

.whiteButton {
    color: var(--colorMediumBlue);
    background-color: white;
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border: 1px solid var(--colorMediumBlue);
    cursor: pointer;
}
.whiteButton:hover {
    color: white;
    background-color: var(--colorMediumBlue);
}
.blueButton {
    color: white;
    background-color: var(--colorDarkBlue);
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border: 1px solid var(--colorDarkBlue);
    cursor: pointer;
    text-decoration: none;
}
.blueButton:hover {
    color: white;
    background-color: var(--colorMediumBlue);
}
.mediumBlueSection .blueButton:hover {
    background-color: var(--colorMediumGreen);
}

.mediumBlueButton {
    color: white;
    background-color: #007bff;
    border-radius: 0.25em;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
}
.mediumBlueButton:hover {
    background-color: var(--colorMediumBlue);
}

.smallBlueButton {
    background-color: #007bff;
    color: white;
    font-size: 0.8em;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    text-decoration: none;
}
.smallBlueButton:hover {
    background-color: var(--colorMediumBlue);
}

.smallGreenButton {
    background-color: #0c750c;
    color: white !important;
    padding: 0.1em 1em;
    border-radius: 0.5em;
    cursor: pointer;
    text-decoration: none;
}
.smallGreenButton:hover {
    background-color: var(--colorMediumBlue);
}

/*
Public
    navbar blue button
    big white button (w/ gray border, & w/ med blue border)
    big blue button (full width)
    full width light blue button
Private
    med blue tight button (AddItems)
    med blue not so tight button (DocListandFTUE

    standard dark blue button
    standard med blue button
    standard white button
    White button w/ no border, selected standard med blue button (ProfileAccount)
    Paging buttons - white with med blue text (Invite Members)
*/

/* list ------------------------------------------------------------------------------------------------------------------- */
.list1 {
    padding-left: 1em;
    color: var(--colorDarkGray);
}
.list1 li {margin-bottom: 1em;}

.listSpaced li:not(:first-child) { 
    margin-top: 1em;
 }

/* ------------------------------------------------------------------------------------------------------------------- */
/* page sections - full page width with a limited width "row" inside and multiple columns */ 
/*.section {}*/
.section .sectionRow {
    max-width: var(--maxContentWidth);
    margin: 0 auto;
    display: flex;
}
.section .sectionColumn {
    flex-grow: 1;
}
.section .sectionColumnSmall {
    flex-shrink: 1;
}

.sectionLink {
    float: right;
    color: var(--colorMediumBlue);
    font-size: 1.2em;
    text-decoration: none;
}
.sectionLink:hover{
    color: var(--colorDarkBlue);
}

.sectionButton {
    background-color: white;
    border-radius: 0.25em;
    padding: 0.5em 1em;
    font-size: 1.2em;
    margin-top: 1em;
    float: right;
    text-decoration: none;
}
.sectionButton:hover {
    background-color: var(--colorMediumBlue);
    color: white;
}

.darkBlueSection {
    background-color: var(--colorDarkBlue);
    padding: 3em 2em;
    color: white;
}
.mediumBlueSection {
    text-align: center;
    background-color: var(--colorMediumBlue);
    padding: 3em 2em;
    color: white;
}
.lightGraySection {
    background-color: var(--colorLightGray);
    padding: 2em;
}
.mediumGraySection {
    background-color: var(--colorMediumGray);
    padding: 2em;
}
.whiteSection{
    background-color: white;
    padding: 2em;
}

.section h1 {
    font-weight: normal;
    font-size: 2em;
    margin: 0 0 0.5em 0;
}

.section h2 {
    font-weight: normal;
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
}

.sectionHalfPicture {
    width: 50%;
}

.sectionHalfPicture img {
    width: 100%;
}
.sectionHalfList {
    width: 50%;
}
.sectionHalfList img:first-child {
    display: block;
    margin: 0 auto;
}
.sectionHalfList h2 {
    text-align: center;
    margin-top: 0.5em;
}
.sectionHalfList ul {
    color: var(--colorDarkBlue);
}
.sectionHalfList li {
    padding-top: 0.5em;
}

.sectionHalf {
    width: 50%;
}
.sectionHalf:not(:first-child) {
    padding-left: 2em;
}

.sectionThirds {
    width: 33%;
}
.sectionThirds:not(:first-child) {
    padding-left: 2em;
}
.sectionFourth {
    width: 25%;
}
.sectionFourth:not(:first-child) {
    padding-left: 2em;
}

.sectionImgCaptionText {
    text-align: center;
}
.sectionImgCaptionText div {
    margin-top: 1em;
}
.sectionImgCaptionText div:nth-child(2) {
    font-size: 1.4em;
}

.sectionImgCaptionText ul {
    text-align: left;
    color: #124178;
}
.sectionImgCaptionText li:not(:first-child) {
    margin-top: 0.5em;
}

.sectionNumberCaptionText {
    text-align: center;
}
.sectionNumberCaptionText div {
    margin-top: 1em;
}
.sectionNumberCaptionText div:nth-child(1) {
    font-size: 2em;
    width: 2em;
    color: white;
    background-color: #0c3c75;
    border-radius: 50%;
    padding: 0.2em;
    width: 1.7em;
    margin: 0 auto;
}
.sectionNumberCaptionText div:nth-child(2) {
    font-size: 1.5em;
}

.sectionCaptionSubcaptionText {
    text-align: center;
}
.sectionCaptionSubcaptionText h2 {
    font-size: 1.8em;
}
.sectionCaptionSubcaptionText h3 {
    font-weight: normal;
    font-size: 1.4em;
}
.sectionCaptionSubcaptionText a {
    display: inline-block;
    padding: 0.5em 2em;
    color: var(--colorMediumBlue);
    border: 1px solid var(--colorMediumBlue);
    border-radius: 0.5em;
    text-decoration: none;
    margin-top: 1em;
}
.sectionCaptionSubcaptionText a:hover {
    color: white;
    background-color: var(--colorMediumBlue);
}

.flexDirectionReverse {
    flex-direction: row-reverse;
}
.sectionTextWithImage {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 2em 2em;
}
.sectionTextWithImage > div:nth-child(1) {
    flex-shrink: 1;
    width: 30%;
    text-align: center;
}
.sectionTextWithImage > div:nth-child(2) {
    flex-grow: 1;
}
.testimonial div:nth-child(1) {
    font-size: 1.4em;
    margin-bottom: 1em;
}
.testimonial div:nth-child(3) {
    margin-top: 1em;
    font-size: 0.9em;
    color: var(--colorMediumBlue);
}

/* ------------------------------------------------------------------------------------------------------------------- */

/* page layout with fixed top, body, and footer that is at the bottom or scrolled down */
.pageHeader {
    position: fixed;
    top: 0;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
    z-index: 1;
}
.pageHeader .pageHeaderTopBar {
    padding: 0 2em;
}

.pageBody {
    flex: 1 0 auto;
    background-color: #f4f4f4;
    margin-top: 55px;
}

.pageFooter {
    flex-shrink: 0;
    border-bottom: 1px solid #e5e5e5;
}

/* page header - navigation bar */
.pageHeaderLinks a {
    color: #8a9397;
    text-decoration: none;
}

.pageHeaderLinks .headerLink {
    padding: 1em;
}
.pageHeaderLinks .headerLink:hover {
    color: #007bff;
}

.pageHeaderLinks .headerButton {
    color: white;
    background-color: #0c3c75;
    padding: 0.5em 1em;
    border-radius: 0.25em;
    margin-left: 1em;
    cursor: pointer;
    border: none;
}
.pageHeaderLinks .headerButton:hover {
    background-color: #007bff;
}

.pageHeaderLinks .headerSeparatorBar {
    margin: 0 1em;
    font-size: 1.5em;
}

.headerTag {
    color: white;
    background-color: #0c3c75;
    padding: 0.3em 0.56em;
    font-size: 0.9em;
    margin-right: 1em;
    cursor: default;
    display: none;
}
.tagOwner{background-color: black;}
.tagExecutor{background-color: #6b6b6b;}
.headerFirstName {
    margin: 0 1em 0 2em;
    cursor: default;
}
.headerProfilePhoto {
    vertical-align: middle;
    height: 40px;
    cursor: pointer;
}

.toggleMobileMenuButton {
    margin-left: -1.5em;
}
.mobileMenu {
    position: absolute;
    border: 1px solid var(--colorDarkGray);
    padding: 0.5em;
    background: white;
    z-index: 1;
    margin-top: 3.5em;
}
.mobileMenu a {
    display: block;
    text-decoration: none;
    color: var(--colorDarkGray);
}
.mobileMenu a:not(:last-child) {
    margin-bottom: 1em;
}
.mobileMenuSeparatorBar {
    height: 1px;
    background: var(--colorMediumGray);
    margin: 1em 0;
}
.profileMenuSeparatorBar {
    height: 1px;
    background: var(--colorMediumGray);
    margin: 0;
}
#profileMenu a {
    text-decoration: none;
    color: var(--colorDarkBlue);
    width: 100%;
    display: block;
    padding: 0.5em 1em;
}
#profileMenu a:hover {
    background: var(--colorMediumGray);
    color: white;
}

/* Page footer */
.pageFooterCommon {
    text-align: center;
    padding: 1em;
    font-size: 0.8em;
}
.pageFooterCommonSubText {
    margin-top: 0.5em;
    color: var(--colorDarkGray);
}
.pageFooterCaption {
    margin-bottom: 1em;
    font-weight: bold;
}
.pageFooterLink {
    margin-bottom: 0.5em;
}
.pageFooterLink a {
    color: #082748;
    text-decoration: none;
}
.pageFooterLink a:hover {
    color: #007bff;
}
.pageFooterLogo {
    margin-top: -0.7em;
}
.pageFooterLine {
    height: 1px;
    background-color: #e5e5e5;
    margin-bottom: 1em;
}
.pageFooterSocial {
    margin-right: 1em;
}

/* signed in header ------------------------------------------------------------------------------------------------------ */
.pageHeader .pageHeaderSignedInMenuBar { /* signed in dark blue bar with menu */
    color: var(--colorLightGray);
    background-color: #022243;
    display: flex;
}
.pageHeader .pageHeaderSignedInEstateBar { /* signed in white bar with estate settings */
    color: black;
    background-color: white;
    padding: 0.5em 1em;
}
.pageHeader .pageHeaderSignedInButtonBar { /* signed in dark blue bar with buttons */
    color: white;
    background-color: #022243;
    padding: 0.5em 1em;
    display: flex;
}
.pageHeaderSignedInMenuBar > div, .pageHeaderSignedInButtonBar > div {
    flex-grow: 1;
}

.pageHeaderSignedInMenuBarLinks {
    padding: 0.5em 1em;
}
.pageHeaderSignedInMenuBarLinks a {
    margin-right: 1em;
    cursor: pointer;
    text-decoration: none;
    color: var(--colorMediumGray);
    font-size: 0.9em;
}
.pageHeaderSignedInMenuBarLinks a:hover {
    color: var(--colorLightGray);
}

.pageHeaderSignedInMenuBarSettleEstate {
    padding: 0.5em 1em;
}
.pageHeaderSignedInMenuBarSettleEstate a {
    cursor: pointer;
    text-decoration: none;
    color: var(--colorMediumGray);
    font-size: 0.9em;
}
.pageHeaderSignedInMenuBarSettleEstate a:hover {
    color: var(--colorLightGray);
}

.pageHeaderSignedInMenuBarSelectEstate {
    background-color: var(--colorDarkGray);
    padding: 0.5em 1em;
    font-size: 0.9em;
}
.pageHeaderSignedInMenuBarSelectEstate select {
    background: inherit;
    border: none;
    color: white;
    margin-top: 0.1em;
}

.pageHeaderSignedInEstateBarSummary {
    display: flex;
    margin-top: 0.5em;
}
.pageHeaderSignedInEstateBarSummary > div {
    flex-grow: 1;
}
.pageHeaderSignedInEstateBarSummary a {
    text-decoration: none;
}
.pageHeaderSignedInEstateBarSummary img {
    display: inline-block;
    vertical-align: top;
}
.pageHeaderSignedInEstateBarSummary span {
    display: inline-block;
}
.pageHeaderSignedInEstateBarSummary div {
    color: var(--colorDarkBlue);
}
.pageHeaderSignedInEstateBarSummary div div:first-child {
    color: var(--colorDarkGray); 
    font-size: 0.9em; 
    margin-bottom: 0.4em;
}

.pageHeaderSignedInButtonBar a {
    color: var(--colorDarkGray);
    text-decoration: none;
    font-size: 0.8em;
    background-color: white;
    padding: 0.9em 1.1em 1.1em 0.5em;
    border-radius: 2em;
}
.pageHeaderSignedInButtonBar a:hover {
    color: var(--colorDarkBlue);
}
.pageHeaderSignedInButtonBar img {
    vertical-align: middle;
}

/* main sections ------------------------------------------------------------------------------------------------------------------- */
.pageBodySignedIn {
    background-color: white;
}
.mainSection {
    display: none;
}
.mainSection > h1 {
    text-align: center;
    color: var(--colorDarkGray);
    background-color: #f4f4f4;
    font-weight: 100;
    font-size: 1.5em;
    margin: 0px;
    padding: 0.25em 0 0.25em 0;
}
.mainSection > h1 img {
    display: block;
    margin: 0 auto;
}
.mainSection > div {
    padding: 1em;
    max-width: var(--maxContentWidth);
    margin: 0 auto;
}

.mainSection h2 {
    color: #343a40;
    font-weight: 100;
    font-size: 1.5em;
    margin-top: 2em;
}
.mainSection h3 {
    color: black;
    font-weight: 100;
    font-size: 1.2em;
}
.mainSection h4 {
    color: #343a40;
    font-size: 1.2em;
    font-weight: 100;
    font-style: italic;
}
.mainSection h4 .subheading {
    color: var(--colorDarkGray);
    font-size: 0.9em;
    margin-left: 1em;
}
.mainSection h4 .subheadinglink a {
    color: var(--colorMediumBlue);
    text-decoration: none;
    font-size: 0.9em;
    font-style: normal;
    margin-left: 1em;
}
.mainSection h4 .subheadinglink a:hover {
    color: var(--colorDarkBlue);
}
.mainSectionButtonBar {
    margin-top: 2em;
    text-align: center;
}
.mainSectionButtonBar button:not(:first-child) {
    margin-left: 0.5em;
}
.mainSection input[type=text], .mainSection input[type=text], .mainSection input[type=password], .mainSection input[type=date] {
    border: 1px solid var(--colorDarkGray);
    margin-top: 0.5em;
    padding: 0.5em 1em;
    font-size: 1em;
}
.mainSection textarea {
    display: block;
    width: 100%;
    margin-top: 0.5em;
    padding: 0.5em 1em;
    font-size: 1em;
    font-family: inherit;
    height: 5em;
}
.mainSection select {
    display: block;
    width: 100%;
    margin-top: 0.5em;
    padding: 0.5em 1em;
    font-size: 1em;
}

.mainGrid{
    margin-top: 1em;
    color: var(--colorDarkGray);
    width: 100%;
}
.mainGrid > div:first-child {
    font-size: 1.1em;
}
.mainGrid > div > div {
    border-top: 1px solid var(--colorMediumGray);
    padding: 0.25em 1em;
}
.mainGrid button {
    color: var(--colorMediumBlue);
    background: inherit;
    border: none;
    font-size: 0.9em;
}
.mainGridIcon {
    height: 1.7em;
    vertical-align: middle;
    margin-right: 1em;
}
.mainGrid a {
    text-decoration: none;
    color: var(--colorDarkGray);
}
.mainGrid select {
    display: inline-block;
    width: inherit;
    padding: 0.25em 0.5em;
}

.mainSection .newItemForm {
    display: flex;
    margin-top: 2em;
}

.mainSection .addItemPhotoBox{
    margin-left: 1em;
    padding: 1em;
    border: 1px solid var(--colorDarkGray);
    margin-top: 1.6em;
    width: 400px;
    height: 20em;
}
.mainSection .addItemPhotoBox img {
    display: block;
    max-width: 100%;
    max-height: 18em;
    cursor: pointer;
    margin: 0 auto;
}

.mainSection .mainProfilePhoto{
    flex-shrink: 1;
    border: 1px solid var(--colorDarkGray);
    margin-top: 1.7em;
    width: 40%;
}
.mainSection .mainProfilePhoto img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    cursor: pointer;
    margin: 1em auto;
}

.mainGettingStarted {
    background-color: #f4f4f4;
    padding: 1em 1em 0 1em;
    display: flex;
    flex-wrap: wrap;
}
.mainGettingStarted > div {
    width: 50%;
    margin-bottom: 1em;
    display: none;
}

.mainGettingStarted img {
    vertical-align: middle;
}

.mainGettingStarted a {
    color: #017bff;
    text-decoration: none;
}

#mainDialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:  rgba(0,0,0,0.6);
    z-index: 2;
}
#mainDialog #mainDialogBox {
    width: 600px;
    margin: 5em auto;
    text-align: center;
    border: 1px solid color(--colorDarkGray);
    border-radius: 1em;
}
#mainDialog #mainDialogTitle {
    padding: 0.5em;
    font-size: 1.5em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    background-color: var(--colorDarkBlue);
    color: white;
}
#mainDialog #mainDialogTitleText{
    margin-left: 2em;
}
#mainDialog #mainDialogTitle button {
    float: right;
    margin-right: 0.5em;
    border-radius: 0.3em;
}
#mainDialog #mainDialogContent {
    background: white;
    padding: 1em;
    font-size: 1.2em;
}
#mainDialog #mainDialogButtons {
    background: white;
    padding: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: var(--colorLightGray);
}
#mainDialog #mainDialogButtons .mediumButton {
    width: inherit;
    margin-top: 0;
}
#mainDialog #mainDialogButtons button:not(:first-child){
    margin-left: 1em;
}

/* mainDocumentFrame mainDocumentBox mainDocumentTitle mainDocumentTitleText mainDocumentClose documentFrame */
#mainDocumentFrame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:  rgba(0,0,0,0.6);
    border: 3px solid red;
}
#mainDocumentFrame #mainDocumentBox {
    position: fixed;
    top: 1em; left: 1em; right: 1em; bottom: 1em;
    text-align: center;
    border: 1px solid color(--colorDarkGray);
    border-radius: 1em;
    background: white;
}
#mainDocumentFrame #mainDocumentTitle {
    padding: 0.5em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    background-color: var(--colorDarkBlue);
    color: white;
}
#mainDocumentFrame #mainDocumentTitleText {
    font-size: 1.5em;
}
#mainDocumentFrame #mainDocumentTitle button {
    float: right;
    margin-right: 0.5em;
    border-radius: 0.3em;
    font-size: 1.3em;
}
#mainDocumentFrame #documentFrame {
    width: 100%;
    height: 100%;
    border: none;
}

/* options bar ------------------------------------------------------------------------------------------------------------------- */
.optionBar span{
    display: inline-block;
    margin-right: 1em;;
}
.optionBar select {
    display: inline-block;
}
.optionBar input {
    display: inline-block;
}
.optionBar input[type=text], .optionBar input[type=number], .optionBar input[type=date] {
    display: inline-block;
}

/* items ------------------------------------------------------------------------------------------------------------------- */
.itemList { /* preview of items */
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
}
.itemList > div {
    width: 250px;
    margin: 0 1em 2em 1em;
}
.itemList .itemBox {
    border: 1px solid var(--colorMediumGray);
    border-radius: 0.5em;
}
.itemList .itemAssigned {
    margin-bottom: 0.5em;
    color: var(--colorDarkGray);
    font-size: 0.9em;
}
.itemList .itemPhoto {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 0.45em;
    border-top-right-radius: 0.45em;
    display: block;
    border-bottom: 1px solid var(--colorLightGray);
}
.itemList .itemName {
    padding: 0.25em 0.5em;
}
.itemList .itemDescription {
    padding: 0em 0.5em 0.5em 0.5em;
    color: var(--colorDarkGray);
    font-size: 0.9em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.itemList .itemLink {
    display: block;
    background: var(--colorLightGray);
    color: var(--colorDarkGray);
    text-decoration: none;
    padding: 0.5em;
    width: 100%;
    border-top: 1px solid var(--colorMediumGray);
    border-bottom-left-radius: 0.45em;
    border-bottom-right-radius: 0.45em;
    text-align: center;
    font-size: 0.9em;
}

.mainNoneBox {
    background: #e9ecef;
    padding: 2em;
    text-align: center;
}
.mainNoneBox div {
    margin: 1em 1em 2em 1em;
}

.mainItemsSearchResultCount {
    color: var(--colorDarkGray);
    font-style: italic;
}

.itemDetailsNoDocuments {
    text-align: center;
}

/* item details ------------------------------------------------------------------------------------------------------------------- */
.itemDetailsTop {
    display: flex;
    color: var(--colorDarkGray);
}
.itemDetailsTop > div {
    flex-grow: 1;
    border-bottom: 1px solid var(--colorMediumGray);
    padding-bottom: 1em;
    width: 50%;
}
.itemDetailsTop > div:first-child {
    padding-right: 1em;
}
.itemDetailsTop > div:not(:first-child) {
    border-left: 1px solid var(--colorMediumGray);
    padding-left: 1em;
}

.itemDetailsTop .caption1 {
    color: black;
    margin-bottom: 0;
    font-size: 1.4em;
}
.itemDetailsTop .caption1b {
    color: var(--colorDarkGray);
    margin-bottom: 0;
    font-size: 1.4em;
    font-style: italic;
}

.itemDetailsTop .caption2 {
    color: black;
    font-size: 1.1em;
    margin: 0.5em 0 0.25em 0;
}

.itemDetailsTop input[type=text], .itemDetailsTop input[type=number], .itemDetailsTop input[type=date] {
    width: 100%;
    margin-top: 0;
    padding: 0.25em 0.5em;
}

.itemDetailsTop textarea {
    padding: 0.5em;
}

.itemDetailsTop select {
    padding: 0.25em 0.5em;
}

.itemDetailsPhoto {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin: 1em auto 0 auto;
    border-radius: 0.25em;
}

.itemDetailsAddComment {
    margin-top: 1em;
}
.itemDetailsAddComment input[type=text], .itemDetailsAddComment input[type=number], .itemDetailsAddComment input[type=date] {
    width: 100%;
    margin-top: 0;
}
.itemDetailsAddComment .smallBlueButton {
    background-color: #007bff;
    border: none;
    padding: 0.8em 1.2em;
}
.itemDetailsAddComment .smallBlueButton:hover {
    background-color: var(--colorMediumBlue);
}

.itemDetailsAddComment img{
    height: 35px;
}

.itemDetailsNote {
    display: flex;
}
.itemDetailsComments .itemDetailsNote:not(:first-child) {
    margin-top: 1em;
}
.itemDetailsNote > img:first-child{
    flex-shrink: 1;
    height: 2.1em;
}
.itemDetailsNote > div {
    margin-left: 1em;
}
.itemDetailsNote > div div:first-child {
}
.itemDetailsNote > div div:nth-child(2) {
    font-size: 0.8em;
}
.itemDetailsNote > div div:nth-child(3) {
    margin-top: 0.25em;
    color: var(--colorDarkGray);
}

.itemDetailsTop input:not(:first-child){
    margin-left: 3em;
}

.itemDetailsPersonItem > div{
    display: inline-block;
}
.itemDetailsPersonItem > div:not(:first-child){
    margin-left: 1em;
}
.itemDetailsPersonItem .profilePhoto {
    max-height: 40px;
    vertical-align: middle;
}

/* draft -------------------------------------------------------------------------------------------------------- */
#draftStarted {
    border: 1px solid black;
    display: flex;
    border-radius: 0.5em;
}
#draftStarted > div{
    flex-grow: 1;
}
#draftStarted > div:first-child{
    flex-grow: 0;
    flex-shrink: 1;
    background-color: #f4f4f4;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}
#draftStarted > div:last-child{
    flex-grow: 0;
    flex-shrink: 1;
}
#draftInfo {
    background-color: var(--colorDarkGray);
    padding: 1em;
    color: white;
    text-align: center;
    white-space: nowrap;
    border-top-left-radius: 0.4em;
}
#draftInfoRoundCounter {
    font-size: 1.1em;
}
#draftItemCount {
    font-size: 0.9em;
    margin-top: 0.5em;
}
#draftTurns {
}
#draftTurns .draftTurn {
    padding: 0.25em 0.5em;
    border-bottom: 1px solid white;
}
#draftTurns div:nth-child(2) {
    background-color: #0c750c;
    color: white;
}
.draftRoundSeparator {
    background: var(--colorMediumGray);
    border-top: 1px solid black;
    padding: 0.25em 0.5em;
    color: black;
}
#draftDiv .itemList {
    margin-top: 1em;
}

/* paging -------------------------------------------------------------------------------------------------------------------- */
.pagingLinks {
    margin-top: 1em;
    text-align: center;
}
.pagingLinks a {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid var(--colorMediumGray);
    color: var(--colorMediumBlue);
    text-decoration: none;
    font-size: 1.1em;
}
.pagingLinkSelected {
    background: var(--colorMediumBlue);
    color: white !important;
}

/* profile ------------------------------------------------------------------------------------------------------------------- */
/*
#mainSectionProfile h1 {
    border-top: 1px solid var(--colorMediumGray);
    padding-top: 0.5em;
    font-size: 1.5em;
    font-style: italic;
    font-weight: normal;
}
#mainSectionProfile h1 img {
    vertical-align: middle;
    margin-right: 0.5em;
}
*/
.profilePhoto {
    border-radius: 50%;
}

.profileSectionAccountInputs {
    display: flex;
}

/* misc ------------------------------------------------------------------------------------------------------------------- */
#settleEstateDiv {
    margin-top: 2em;
}

.settleEstateSection {
    border-top: 1px solid var(--colorDarkGray);
    padding: 0.5em 0;
    cursor: pointer;
}

.sectionHeading {
    margin-left: 1em;
    font-size: 1.2em;
}
.sectionToggle {
    float: right;
    margin-top: 0.5em;
}

.blueDot{
    background-color: #0c3c75;
    color: white;
    display: inline-block;
    font-size: 1.5em;
    text-align: center;
    padding: 0.5em;
    border-radius: 50%;
    width: 2.2em;
}

.settleEstateSectionDiv {
    display: none;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-bottom: 2em;
}

.settleEstateSectionComplete {
    position: absolute;
    margin-left: -3.6em;
}

/* misc ------------------------------------------------------------------------------------------------------------------- */
.isExecutor {display: none;}
.isNotExecutor {display: none;}
.hideFinancials {display: none;}
.message {
    color: var(--colorDarkBlue);
    margin-top: 1em;
    text-align: center;
}
.errorMessage {
    color: #870000;
    margin-top: 1em;
    text-align: center;
}

.tag{
    font-size: 0.9em;
    padding: 0.1em 0.5em;
    border-radius: 0.5em;
}

.smallIconWithText:not(:first-child) {
    margin-top: 1em;
}
.smallIconWithText img {
    margin-right: 0.5em;
    vertical-align: middle;
}
.noWrap {white-space: nowrap;}

.sectionCenteredImage {
    text-align: center;
}
.sectionCenteredImage img {
    max-width: 600px;
}

.questionsAndAnswers div{
    font-size: 1.2em;
}
.questionsAndAnswers p {
    margin-left: 2em;
}

.numberDot {
    font-size: 1.5em; 
}