/* Layout option 2, "Classic, cleaned up": the current program's look, filling the window. */

.layout-classic {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #d4d0c8;
    color: #000000;
    font: 12px Tahoma, "Microsoft Sans Serif", Verdana, "DejaVu Sans", sans-serif;
}

/* On a desktop the grid scrolls inside the window, as in the current program. */
@media (min-width: 701px) {
    .layout-classic {
        height: 100vh;
    }
}

.layout-classic .menu {
    padding: 4px;
    border-bottom: 1px solid #aca899;
}

.layout-classic .menu summary,
.layout-classic .menu-top {
    padding: 1px 9px;
}

.layout-classic .menu summary:hover,
.layout-classic .menu details[open] > summary {
    background: #0a246a;
    color: #ffffff;
}

.layout-classic .menu-items {
    top: calc(100% + 2px);
    padding: 2px;
    background: #ffffff;
    border: 1px solid #aca899;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.layout-classic .menu-items button {
    padding: 4px 20px 4px 26px;
}

.layout-classic .menu-items button:not([disabled]):hover {
    background: #0a246a;
    color: #ffffff;
}

.layout-classic .menu-items button[disabled] {
    color: #8a877d;
}

.layout-classic .menu-heading {
    padding: 4px 20px 2px 26px;
    font-weight: bold;
    color: #404040;
}

.layout-classic .menu-items hr {
    margin: 3px 1px;
    border: 0;
    border-top: 1px solid #aca899;
}

.layout-classic .head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #aca899;
}

.layout-classic .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.layout-classic .push {
    margin-left: auto;
}

.layout-classic .lbl {
    color: #404040;
}

.layout-classic .fld {
    height: 22px;
    padding: 0 6px;
    line-height: 20px;
    background: #ffffcc;
    border: 1px solid #7f9db9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-classic .fld.group {
    width: 34px;
    text-align: center;
    font-weight: bold;
}

.layout-classic .fld.code {
    min-width: 44px;
    text-align: center;
    font-weight: bold;
}

.layout-classic .fld.property {
    flex: 0 1 300px;
    min-width: 170px;
    font-weight: bold;
}

.layout-classic .fld.date {
    width: 96px;
    text-align: center;
    background: #ffffff;
}

.layout-classic .fld.day {
    width: 84px;
    text-align: center;
    font-weight: bold;
    background: #ece9d8;
    border-color: #aca899;
}

.layout-classic .fld.company {
    width: 260px;
    max-width: 70vw;
}

.layout-classic .tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.layout-classic .tb {
    box-sizing: border-box;
    width: 78px;
    height: 58px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #ece9d8;
    border: 1px solid #aca899;
    border-radius: 2px;
    font: inherit;
    font-size: 11px;
    color: #000000;
    cursor: default;
}

.layout-classic .body {
    flex: 1;
    display: flex;
    gap: 8px;
    min-height: 0;
    padding: 10px;
}

.layout-classic .groups {
    flex: 0 0 58px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layout-classic .groups-label,
.layout-classic .grid-caption {
    font-weight: bold;
}

.layout-classic .group-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #7f9db9;
    font-weight: bold;
}

.layout-classic .group-list a {
    padding: 3px 10px;
    color: inherit;
    text-decoration: none;
}

.layout-classic .group-list a[aria-current] {
    background: #0a246a;
    color: #ffffff;
}

.layout-classic .gridcol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layout-classic .gridbox {
    flex: 1;
    min-height: 300px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #7f9db9;
}

.layout-classic .gridbox table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.layout-classic .gridbox th {
    position: sticky;
    top: 0;
    height: 24px;
    padding: 0 8px;
    text-align: left;
    font-weight: bold;
    color: #3a0000;
    background: #ece9d8;
    border-right: 1px solid #aca899;
    border-bottom: 1px solid #aca899;
    white-space: nowrap;
}

.layout-classic .gridbox td {
    height: 24px;
    padding: 0;
    color: #6a0000;
    border-right: 1px solid #e6e3d6;
    border-bottom: 1px solid #e6e3d6;
    white-space: nowrap;
}

.layout-classic .gridbox td a {
    display: block;
    padding: 0 8px;
    line-height: 24px;
    color: inherit;
    text-decoration: none;
}

.layout-classic .gridbox td a:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: -3px;
}

.layout-classic .gridbox tbody tr:nth-child(odd) td {
    background: #fffff2;
}

.layout-classic .gridbox tbody tr.sel td {
    background: #0a246a;
    color: #ffffff;
}

.layout-classic .gridbox td.empty {
    padding: 0 8px;
    color: #404040;
}

.layout-classic .status {
    display: flex;
    gap: 2px;
    padding: 0 2px 2px;
    font-size: 11px;
}

.layout-classic .status div {
    min-height: 24px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #aca899;
    white-space: nowrap;
}

.layout-classic .status .app {
    flex: 1;
    justify-content: center;
    font-weight: bold;
    color: #0a246a;
}

.layout-classic .status .x {
    min-width: 200px;
}

@media (max-width: 700px) {
    .layout-classic .body {
        flex-direction: column;
    }

    .layout-classic .groups {
        flex: none;
        flex-direction: row;
        align-items: center;
    }

    .layout-classic .group-list {
        flex: none;
        flex-direction: row;
    }

    .layout-classic .push {
        margin-left: 0;
    }

    .layout-classic .status .x {
        display: none;
    }
}

.layout-classic a.tb {
    text-decoration: none;
}

.layout-classic a.tb:not([href]) {
    color: #8a877d;
}

.layout-classic .menu a.menu-top:hover {
    background: #0a246a;
    color: #ffffff;
}

/* Property Data Record */

.layout-classic .accounts {
    font-size: 10px;
}

.layout-classic .accounts th {
    max-width: 70px;
    padding: 0 4px;
    text-align: right;
    font-weight: normal;
    line-height: 1.1;
}

.layout-classic .accounts td {
    min-width: 46px;
    height: 18px;
    padding: 0 3px;
    background: #ffffff;
    border: 1px solid #aca899;
}

.layout-classic .record {
    padding: 10px;
}

.layout-classic .record-grid {
    gap: 8px;
}

.layout-classic .record .panel {
    padding: 4px 8px 8px;
    background: #ece9d8;
    border: 1px solid #aca899;
    box-shadow: inset 1px 1px 0 #ffffff;
}

.layout-classic .record legend {
    padding: 0 3px;
    font-weight: bold;
}

.layout-classic .record .owner legend,
.layout-classic .record .info legend { color: #0033cc; }
.layout-classic .record .mailing legend,
.layout-classic .record .mgmt legend { color: #800000; }
.layout-classic .record .notes legend { color: #008080; }
.layout-classic .record .renewal legend,
.layout-classic .record .col { color: #800080; }
.layout-classic .record .defined legend { color: #008000; }
.layout-classic .record .charges legend { color: #cc0000; }

.layout-classic .record label,
.layout-classic .record .col,
.layout-classic .record .term-fixed,
.layout-classic .record .supplement-label {
    font-weight: bold;
}

.layout-classic .record input:not([type=checkbox]),
.layout-classic .record textarea {
    height: 22px;
    padding: 0 4px;
    color: #000000;
    background: #ffffcc;
    border: 1px solid #7f9db9;
    border-radius: 0;
}

.layout-classic .record textarea {
    height: calc(100% - 1.5em);
    padding: 4px;
    background: #ffffff;
}

.layout-classic .record input[readonly] {
    color: #404040;
    background: #f4f2e8;
}

.layout-classic .record .with-button button {
    padding: 0 6px;
    font-size: 11px;
    background: #ece9d8;
    border: 1px solid #aca899;
}

.layout-classic .record .note {
    font-size: 10px;
    font-weight: bold;
}

.layout-classic .record-status {
    margin: 0 0 8px;
    padding: 4px 8px;
    font-weight: bold;
    color: #0a246a;
    background: #ffffe1;
    border: 1px solid #aca899;
}

.layout-classic .record-errors {
    margin: 0 0 8px;
    padding: 6px 8px 6px 24px;
    background: #ffffff;
    border: 1px solid #cc0000;
}

/* Menu items that are links */

.layout-classic .menu-items a {
    padding: 4px 20px 4px 26px;
}

.layout-classic .menu-items a[href]:hover {
    background: #0a246a;
    color: #ffffff;
}

.layout-classic .menu-items a:not([href]) {
    color: #8a877d;
}

/* Dialogs */

.layout-classic .dialog {
    background: #ece9d8;
    border: 1px solid #0a246a;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.layout-classic .dialog-title {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #0a246a, #3a6ea5);
}

.layout-classic .dialog-body {
    padding: 14px 16px 16px;
}

.layout-classic .dialog .button,
.layout-classic .dialog button {
    min-width: 80px;
    height: 24px;
    padding: 0 12px;
    color: #000000;
    background: #ece9d8;
    border: 1px solid #7f7f7f;
    box-shadow: inset 1px 1px 0 #ffffff;
}

.layout-classic .dialog .danger {
    font-weight: bold;
    color: #b00000;
}

.layout-classic .dialog-field {
    font-weight: bold;
}

.layout-classic .dialog-field input,
.layout-classic .dialog-field select {
    height: 22px;
    padding: 0 4px;
    font-weight: normal;
    background: #ffffcc;
    border: 1px solid #7f9db9;
}

.layout-classic .dialog-error,
.layout-classic .dialog-done {
    padding: 6px 8px;
    font-weight: bold;
    background: #ffffff;
    border: 1px solid #aca899;
}

.layout-classic .dialog-error {
    color: #b00000;
    border-color: #cc0000;
}

.layout-classic .dialog-done {
    color: #0a246a;
}

.layout-classic .dialog-table {
    background: #ffffff;
    border: 1px solid #7f9db9;
}

.layout-classic .dialog-table th {
    color: #3a0000;
    background: #ece9d8;
    border-bottom: 1px solid #aca899;
}

.layout-classic .dialog-table td {
    color: #6a0000;
    border-bottom: 1px solid #e6e3d6;
}

.layout-classic .dialog-table button {
    min-width: 0;
    height: 20px;
}

.layout-classic .record-nav {
    height: 18px;
    margin: 0 6px;
    padding: 0 4px;
    font-weight: bold;
    color: #0a246a;
    background: #ece9d8;
    border: 1px solid #aca899;
}

.layout-classic .record-nav[disabled] {
    color: #aca899;
}