#contentframe >.edit_frm{
        +.list_frm{
            display: none;
        }
    }

.list_frm{
    min-height: 100%;
}

main nav ul > li a[role=button] {
    &::after {
        border-top: 1px solid $oci_light_60;
        border-left: 1px solid $oci_light_60;
        border-right: 1px solid $oci_light_60;
    }

    &:hover::after, &.fbtn::after {
        border-color: $oci_light;
    }
}

#dashboard_frame {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    padding: 1rem;
    background: #DDD;
    text-align: center;
}

.wdg_frame {
    background-color: #FFF;
    border: 1px solid #ccc;
    border-radius: 6px;
    /*box-shadow: 1px 1px 3px 0 rgba(75, 75, 75, 0.2);*/
    /*box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.17);*/
    /*box-shadow: 1px 1px 3px 0 rgba(0,0,0,.17), -3px -3px 8px 0px rgb(250, 250, 250);*/
    box-shadow: 1px 2px 8px 0 rgba(140,140,160,.6), -2px -3px 8px 0px rgb(250, 250, 250);
    /*float: left;*/
    display: inline-block;
    height: 300px;
    margin-bottom: 10px;
    position: relative;
    width: 300px;
    margin-right: 15px;
    text-align:left;
    overflow: hidden;

    &.dbl {
        width: 615px;
    }

    &.tpl {
        width: 930px;
    }

    &.tny {
        width: 150px;

        .wdg_cnt > .ind label {
            font-size: 80%;
        }
    }

    .wdg_hd {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        height: 1.5rem;
        position: relative;
        background-color: $fuchs_blau_80;
        box-shadow: 1px 5px 5px $fuchs_blau inset;
        color: $fuchs_textlight;
        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        padding: .3rem .2rem 0 .2rem;
        cursor: pointer;
        margin: -1px -1px 0 -1px;

        > * {
            user-select: none;
        }
    }

    .wdg_cnt {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        height: calc(100% - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        position: relative;

        > .ind {
            text-align: center;
            padding: 1rem;
            font-size: 1.3rem;

            &.sts_neg > .ind {
                color: red;
            }

            &.sts_pos > .ind {
                color: rgb(86,165,50);
            }

            > .ind {
                font-size: 4.0rem;
                margin: 3rem 0rem;
                text-shadow: 0.08rem 0.12rem 0.35rem rgba(50,50,50,.6);
                color: $fuchs_blau;
            }
        }

        .clickable {
            cursor: pointer;
        }

        table {
            border-collapse: collapse;
            width: 100%;

            tr:first-child {
                border: none;
            }

            th {
                background-color: #CCC;
                padding: 2px 4px;
                font-size: 11px;
                line-height: 1.2;
                border: 1px solid transparent;
                text-align: left;

                &:first-child {
                    border-left: none;
                }

                &:last-child {
                    border-right: none;
                }
            }

            td {
                padding: 2px 4px;
                font-size: 12px;
                line-height: 1.1;
                border: 1px solid #CCC;

                &:first-child {
                    border-left: none;
                }

                &:last-child {
                    border-right: none;
                }
            }
        }
    }
}

#listframe {
    div.mth, div.yr {
        border: 1px solid #ccc;
        background-color: #EEE;
        padding: 0.4rem 0.2rem 0.2rem 0.35rem;
        border-radius: 0.2rem;
        cursor: pointer;
        margin: 0.2rem;
        position: relative;
        display: block;
        white-space: nowrap;
        min-height: 2.0rem;

        &.extra {
            text-decoration: red underline;
        }

        &.ivc + .extra {
            margin-top: 0.4rem;
        }

        &.selected {
            background-color: lightgreen;

            > div.wfrm, > div.mfrm {
                display: block;
            }

            > div.mthdl, > div.wthdl, > div.ythdl {
                display: inline-block;
                cursor: pointer;
            }
        }

        div.wfrm, div.mfrm, div.yfrm {
            display: none;
            position: relative;
            background-color: #FFF;
            margin: 1rem 0.2rem 0.2rem 1rem;
            padding: 0.15rem;
            border-radius: 0.2rem;

            .wk {
                border: 1px solid #ccc;
                background-color: #EEE;
                padding: 0.4rem 1.35rem 0.2rem 0.35rem;
                border-radius: 0.2rem;
                cursor: pointer;
                margin: 0.2rem;
                position: relative;
                display: block;
                white-space: nowrap;
                min-height: 2.0rem;

                &.selected {
                    background-color: lightblue;

                    div.wkdl {
                        display: inline-block;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    div.yrdl, div.mthdl, div.wkdl {
        height: 1.5rem;
        width: 1.5rem;
        display: none;
        background-color: #FFF; /* the selected box is colored */
        position: absolute;
        right: 0.4rem;
        border: 1px solid #CCC;
        border-radius: 0.2rem;
        padding: 0.1rem;
        top: 0.18rem;
        font-size: 1rem;
        text-align: center;
    }
}

.invfrm {
    > table, table.invtbl {
        border-collapse: separate;
        border-spacing: 0;
        margin: 2rem;

        th {
            padding: 0.2rem 0.35rem;
            border: 1px solid #CCC;
            text-align: left;
        }

        th, td {
            &.currency, &.num {
                text-align: right;
                white-space: nowrap;
            }

            &.keep {
                white-space: nowrap;
            }
        }

        td {
            padding: 0.2rem 0.35rem;
            border: 1px solid #CCC;
            vertical-align: top;
            position: relative;

            &.hl {
                background-color: lightyellow;
            }

            input, select {
                display: none;
            }

            &.raux {
                min-width: #{1.5rem * 1.6 * 2 + 0.5rem};
            }

            > .ttip {
                display: none;
                background: #FFF;
                padding: 0.2rem 0.35rem;
                padding: inherit;
                border: 1px solid #CCC;
                box-shadow: 1px 1px 3px rgba(50,50,50,0.5);
                min-width: 100%;
                min-height: 100%;
                border-top-color: orangered;
                z-index: 5;
            }


            .ttip p, .ctw p {
                margin: 0 0 0.1rem 0;
            }

            &:hover {
                border-top-color: orangered !important;
                border-top-width: 2px;

                > .ttip {
                    display: block;
                    position: absolute;
                    top: 0;
                    height: auto;
                    width: auto;
                    left: 0;
                }
            }
        }

        tr {
            &:nth-child(2n+1) td {
                background-color: rgba(150,150,150,.2);

                &.hl {
                    background-color: lightyellow;
                }
            }

            &.selected td {
                background-color: lightblue;

                &.hl {
                    background-color: lightyellow;
                }
                /*input, select {
					display: block;
				}*/
                .ilbtn {
                    display: inline-block;
                }
            }
        }
    }

    .ovhd {
        display: block;
        font-size: 1.5rem;
        margin: 1rem 2rem;
        font-weight: bold;
        text-decoration: underline;
        text-decoration-style: double;

        > span {
            display: block;

            &:first-child {
                text-decoration: underline;
                text-decoration-style: double;
            }

            + span {
                margin-top: 0.5rem;
            }

            &.note {
                font-size: 1rem;
                font-weight: normal;
                text-decoration: none;
                text-decoration-style: none;
            }
        }
    }

    &.mdw .ovhd {
        text-decoration-color: lightblue;
    }

    &.mdm .ovhd {
        text-decoration-color: lightgreen;
    }
}
.ilbtn {
    cursor: pointer;
    border-radius: #{1.5rem * 0.2};
    display: none;
    padding: 0.1rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    letter-spacing: 0.025rem;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: $oci_white;
    background-image: none;
    border: 1px solid #ababab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3);
    box-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3);
    min-width: #{1.5rem * 1.6};
}