/* this makes the checkbox show the value as a label
/* need this in waterfall for deemed chkbox */
[type=checkbox]:after {
    content: attr(value);
    margin: 0px 20px;
    vertical-align: top;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
} 

.waterfall-params-box-div {
    display: flex;
    flex-direction: row;
    margin-top: 0px;
    height: auto;
} 

.waterfall-params-box {
    border: 1px solid darkgray;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    margin: 10px 10px 0 0;
    gap: 4px;
    max-width:280px;
}

.waterfall-amounts-span-label {
    font-size: .8rem;
    color: navy;
    margin-left: 10px;
}

.waterfall-amounts-span-input {
    margin-left: 15px;
    width: 100px;
}

.waterfall-excel-button {
    /* display: inline; */
    float: right;
    margin: 0 10px 0 0;
}

.waterfall-params-label {
    /* color: var(--color-text-1); */
    user-select: none;
}

.waterfall-params-label:first-of-type {
    margin-top: 10px;
}

.waterfall-params-label:not(:first-of-type) {
    margin-top: 20px;
}

.waterfall-params-text-amount {
    width: 100px;
    text-align: center;
}

.waterfall-params-full-width {
    width: 100%;
}

.waterfall-params-text-section:first-of-type {
    margin-top: 10px;
    user-select: none;
}

.waterfall-params-text-section:not(:first-of-type) {
    margin-top: 20px;
    user-select: none;
}

.waterfall-single-exit-results-totals-row {
    background-color: var(--color-background);
    /* padding: 25px 0; */
}

.waterfall-single-exit-results-totals-cell {
    padding: 5px 5px;
}

.waterfall-cbo-exit-view {
    padding: 4px 1px;
    user-select: none;
}

.waterfall-params-div-chkbox {
    margin-top: 15px;
    margin-left: 108px;
}

.waterfall-info-lbl {
    font-weight: 600;
    font-size: 0.75rem;
    margin: 5px 2px 0 8px;
}

.waterfall-cancel-button {
    margin: 22px 8px 10px 0;
    padding: 8px 8px;
    border: 1px solid gray;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.waterfall-backsolver-note {
    color: gray;
    margin: 5px 0 5px 5px;
    display: block;
}


.waterfall-toolbar-div {
    display: flex;
    gap: 10px;
    margin: 0 0 0 10px;
}

/* pushes itself, and everything after it in the toolbar, to the right hand end.
   only one item in the toolbar may do this - two auto margins split the free space
   between them instead of stacking at the edge */
.waterfall-toolbar-right {
    margin-left: auto;
}

/* ---- the toolbar at the top of the fund waterfall page's details dialogs ---- */

/* a strip across the dialog - Fund and Quarter on the left, the Details action on the right.
   the tint is the text color at low strength, so it reads as a panel in the dark theme and
   the light one alike */
.waterfall-details-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 14px 0;
    padding: 7px 10px 7px 14px;
    border: 1px solid var(--color-borders-2, silver);
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--color-text-1, black) 6%, transparent);
}

.waterfall-details-toolbar-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* a divider before every item but the first */
.waterfall-details-toolbar-item + .waterfall-details-toolbar-item {
    padding-left: 16px;
    border-left: 1px solid var(--color-borders-2, silver);
}

.waterfall-details-toolbar-caption {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-1);
    opacity: 0.8;
}

.waterfall-details-toolbar-value {
    font-weight: 600;
    color: var(--color-text-1);
}

/* a small outlined button, pushed to the right end of the strip */
.waterfall-details-toolbar-action {
    margin-left: auto;
    padding: 3px 12px;
    border: 1px solid var(--color-borders-2, silver);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-link, steelblue);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.waterfall-details-toolbar-action:hover {
    border-color: var(--color-link, steelblue);
    color: var(--color-link-highlighted, steelblue);
    background-color: color-mix(in srgb, var(--color-link, steelblue) 12%, transparent);
}

/* the total of the last column in the pwerm details dialog, and its caption, in the row of exit links */
.waterfall-details-total {
    font-weight: 600;
}


/* ---- Waterfall Log - Details dialog ---- */

.waterfall-log-details-dialog {
    width: min(1250px, 96vw);
    max-width: 96vw;
    height: min(700px, 90vh);
    max-height: 90vh;
}

/* on [open], not on the class - a display on the class outranks the browser's
   dialog:not([open]) { display: none } and the dialog would never close */
.waterfall-log-details-dialog[open] {
    display: flex;
    flex-direction: column;
}

.waterfall-log-details-dialog > * {
    flex: 0 0 auto;
}

/* the main area no longer scrolls - it hands its height down to the data area, so the
   title and the "View Results" bar stay at the top */
.waterfall-log-details-dialog .dialog-main-area {
    max-height: none;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.waterfall-log-details-dialog .tab-container {
    flex: 0 0 auto;
}

/* the only thing that scrolls. it has no top padding, so the sticky column headers sit
   flush with its top edge and the rows cannot show above them ("bleed") on the way past */
.waterfall-log-details-data {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    align-items: flex-start;
}