.inform_first_sentence {
    margin-top: 1.25EM;
}
.option_group_sentence {
    margin-top: 1.25EM;
	font-style: italic;
}
.red {
    color: #e74c3c;
}
.invalid {
    border: 1px solid #ff0000 !important;
}
.inline { display: inline-block;}
.table-tight {width: auto!important; min-width: 99%;}
.table-tight td, .table-tight th { padding: 4px 8px;}
.table-tight td input[type=text] {padding: 4px; border-width: 1px; width: calc(100% - 12px);}
.table-tight td input[type=checkbox] {vertical-align: text-top;}
.table-tight td input {margin: 0;}
.table-tight label {display: inline; margin: 0; padding: 0 0 0 4px; font-size: 1.0em;} /* curse you bootstrap! why do you make labels blocks?? And force the size of a label?? */
.table-tight.no-bottom { border-bottom: none;}

.mtable {
    border: 1px solid #ddd;
    border-collapse: collapse;
    margin: 0 auto;
}

.mtable th,
.mtable td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

.customcheck input {
    display: none;
}
.customcheck label {
    display: inline-block;
    margin-bottom: 0;
}
.customcheck label img {
        display: none;
        pointer-events: none;
    }
.customcheck label img + img {
            display: block;
        }
.customcheck input:checked + label img {
    display: block;
}
.customcheck input:checked + label img + img {
        display: none;
    }
.auto {
    width: auto;
}

.conversation {
    background-color: #f8f8f8;
}

.table-noborder, .table-noborder td {
    border: none;
    margin: 0 auto;
}
.conversation {
    border: 1px solid #ddd;
    width: 93%;
    max-width: 800px;
    margin: 0 auto;
}
.conversation2 {
    display: inline-block;
    width: 100%;
    text-align: right;
}
.conversation1 {
    display: inline-block;
    width: 100%;
    text-align: left;
}

    .conversation1 .content, .conversation2 .content {
        display: inline-block;
        max-width: 75%;
        padding: 0px 20px 6px;
        border-radius: 8px;
        text-align: left;
        white-space: pre-line;
    }
.conversation1 .content .text {
    float: right;
}
.conversation2 .content .text {
    float: left;
}
.fe .conversation2 .content .date {
    float: left;
}
.fe .conversation1 .content .date {
    float: right;
}
.conversation2 .content {
    background-color: #ccf;
    float: left;
}
.guest_color {
    background-color: #ccf;
}
.prop_color {
    background-color: #fe0;
}
.guest_prop {
    width: 93%;
    max-width: 800px;
}
.conversation1 .content {
    background-color: #fe0;
    float: right;
}
.fe .content .date {
    font-size: 10px;
    clear: both;
}
.mf p {
    text-align: center;
}
.center {margin-left: auto; margin-right: auto;}

.btn-disabled {background-color: #888; pointer-events: none;}

footer .row hr {
    width: calc(100% - 60px);
    float: right;
}

.dynomenu  li {
    line-height: 100%;
}
.dynomenu .tl {
    list-style-type: none;
    height: 100%;
}
.dynomenu .tl.has-popup:hover {
    border-bottom: none;
    border-right: none;
}

.dynomenu .mm {
    display: flex;
    width: calc(100% - 70px);
    height: auto;
    min-height: 50px;
    position: absolute;
    left: 16px;
    padding: 20px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
    -webkit-box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
    -moz-box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
}

.dynomenu .mm span {
    float:left;
    clear:both;
}
.dynomenu .mm .level_0 {
    border: 1px solid #eee;
    padding: 5px;
}
    .dynomenu .mm .level_1 {
        padding-left: 0px;
        font-weight: bold;
        padding-bottom: 3px;
    }
    .dynomenu .mm .level_1 a {
        padding-bottom: 20px;

    }
    .dynomenu .mm .level_2 {
        padding-left: 0px;
        padding-bottom: 3px;
    }
    .dynomenu .mm .level_3 {
        padding-left: 10px;
        padding-bottom: 3px;
    }
    .dynomenu .mm .mmcol {      
        align-items: center;
       display: flex;
       flex: 1;
       flex-direction: column;
        border-right: inset 1px #dbdbdb80;
        border-left: inset 1px #dbdbdb80;
    }

.dynomenu .unavail, .mtab .link.unavail {
    color: #999;
}

.dynomenu .verboten, .dynomenu .verboten p, .mtab .link.verboten {
    color: #999;
    text-decoration: line-through;
}

.dynomenu .breadcrumby .link {
    display: none;
}

/* header menu */
/* Many styles are the same between dyno1 and dyno2, but I'm keeping them as separate styles for now because they used to
    be different and maybe Steve will want to make them different again.
*/
.dyno {
    background-color: #eee;
    padding: 4px 15px;
}

.dynohead {
    display: table;
    width: 100%;
    padding: 0 0 8px 0;
}

.dynorow {
    display: table-row;
}

.dynologo {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px 0 0;
    font-size: 20px;
    line-height: 40px;
}

    .dynologo img {
        padding-right: 20px;
        border: none;
    }

.dynoview {
    display: table-cell;
    text-align: right;
    padding: 4px 8px 0 0;
    line-height: 120%;
}

    .dynoview .view {
        display: inline-block;
        padding: 0;
        vertical-align: middle;
    }

    .dynoview .basic {
        display: inline-block;
        padding-left: 32px;
        vertical-align: middle;
        text-align: left;
    }

.dynohead, a.plainlink:link, a.plainlink:active, a.plainlink:hover, a.plainlink:visited {
    color: #777;
    text-decoration: none;
}

    .dynohead select {
        padding: 0;
    }
/* leave me alone bootstrap!! */
.dynomenu {
    margin: 0 0 4px 0;
}

    .dynomenu li, .dynomenu .tl {
        opacity: 100;
        padding: 7px 8px;
        margin: 0 1px;
        cursor: pointer
    }

        .dynomenu li h1 {
            font-size: 80%;
            line-height: 120%;
            color: #999;
            margin: 0 0 2px 0;
        }

        .dynomenu li p {
            margin: 0;
        }

        .dynomenu li .link {
            color: #0088cc;
        }

    .dynomenu .has-popup {
        position: relative;
    }

.dynov .has-popup::after, .dyno1 .has-popup::after, .tl .has-popup {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-right: 2.5px solid #666;
    border-bottom: 2.5px solid #666;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
}
    .dynomenu .popout {
        padding-right: 30px !important;
    }
    /* override built-in 14px */

    .dynomenu ul.level2 {
        left: -2px !important;
        top: 110% !important;
    }

        .dynomenu ul.level2 li {
            margin-bottom: 1px;
        }

    .dynomenu ul.level3.dynamic, .dynomenu ul.level4.dynamic {
        left: 101% !important;
    }
    /* These rules are bogus and dangerous because they make assumptions about what CSS ASP will generate. But they cut down on flickering.
    These may need to be updated if we make changes to options in menu.
*/
    .dynomenu ul ul {
        display: none;
    }

    .dynomenu ul.level1 > li {
        float: left;
    }

.dynoimp {
    padding: 0;
    vertical-align: middle;
    display: inline-block;
}

.dyno1 .level1 > li {
    background-color: transparent;
    border-width: 0 0 0 1px;
    border-color: #666;
    border-style: none;
}

.dyno2 .level1 > li {
    background-color: transparent;
    border-width: 0 0 0 1px;
    border-color: #666;
    border-style: none;
}
.dyno1 li, .dyno2 li, .dynov li, .mtab .link, .dynomenu .tl {
    line-height: 100%;
    background-color: #eee;
    border: 1px solid #666;
    box-sizing: border-box;
}

.dynov .level2 li:not(:last-child) {
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

.dynov .level2 li:last-child {
    border-bottom: 1px solid #666;
}
.dyno2 .level1 > li {
    width: 30ex;
}

.dynov {
    display: flex;
}

    .dynov select {
        margin-right: 1px;
    }

.dynotitle {
    color: #777;
    background-color: #fff;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 15px;
}

.dynolink {
    background-color: #fff;
    padding: 3px 8px;
    height: 22px;
    margin: 0 1px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    line-height: 11px;
    border: 1px solid #ccc;
    color: #666;
}

    .dynolink:hover, .dynolink:active {
        text-decoration: none;
    }


/*  */

@media (prefers-color-scheme: dark) {
    body, .mtab .pane {
        background-color: black;
        color: #edecec;
    }

    select {
        background-color: #333;
        color: #fff;
    }

    .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
        background-color: #333;
    }

    img {
        opacity: .75;
        transition: opacity .5s ease-in-out;
    }

        img:hover {
            opacity: 1;
        }

    .dynotitle {
        background-color: #4d4d4d;
        color: #fff;
    }

    .dyno {
        background-color: #1f1f1f;
    }
    .dynomenu .mm {
        background-color: #111;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
    -webkit-box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
    -moz-box-shadow: 3px 3px 3px 0px rgba(120,120,120,0.5);
    }
    .dynohead, a.plainlink:link, a.plainlink:active, a.plainlink:hover, a.plainlink:visited {
        color: #f7f7f7;
    }

    .dyno1 li, .dyno2 li, .dynov li, .mtab .link, .dynomenu .tl {
        background-color: #111;
        border: 1px solid #e4e4e4;
    }

        .dyno1 li a, .dyno2 li a {
            color: #f3f3f3;
        }

            .dyno1 li a:hover, .dyno2 li a:hover {
                color: #fff;
            }
    .dynov .has-popup::after, .dyno1 .has-popup::after {
        border-right: 2.5px solid white;
        border-bottom: 2.5px solid white;
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
    }
    .dynolink {
        background-color: #111;
        color: #fff;
    }
    .dyno1 li, .dyno2 li, .dynov li, .mtab .link {
        background-color: #222;
        border: 1px solid #e4e4e4;
    }

    .dynov .level2 li:not(:last-child) {
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
    }
    .menurow1 {
        background-color: #333 !important;
    }
    .dynov .level2 li:last-child {
        border-bottom: 1px solid #e4e4e4;
    }
    .menurow2 {
        background-color: #1d1d1d !important;
    }
    .tab-content {
        background-color: #1d1d1d !important;
    }
    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
        background-color: #1d1d1d !important;
        color: #fff;
    }

    div.thumbnail {
        background-color: #666 !important;
    }

    table.entry td input[type=text], table.entry td textarea {
        background-color: #333;
        color: #fff;
    }
    textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
        background-color: #333;
        color: #fff;
    }
    tr.ui-sortable-handle {
        background-color: #222 !important;
    }
    .conversation {
        background-color: #222 !important;
    }
    .conversation .content {
        color: #000;
    }
}