/* ======================= flexx.ui.layouts._tabs =======================*/

/* Autogenerated code from Flexx. Code Subject to the BSD-2-clause license. */





    .flx-TabLayout > .flx-Widget {
        top: 30px;
        margin: 0;
        height: calc(100% - 30px);
        border: 1px solid #ddd;
    }

    .flx-TabLayout > .flx-tabbar {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 30px;
        overflow: hidden;
    }

    .flx-tabbar > .flx-tab-item {
        display: inline-block;
        height: 22px;  /* 100% - 8px: 3 margin + 2 borders + 2 padding -1 overlap */
        margin-top: 3px;
        padding: 3px 6px 1px 6px;

        overflow: hidden;
        min-width: 10px;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        background: #ececec;
        border: 1px solid #bbb;
        border-radius: 3px 3px 0px 0px;
        margin-left: -1px;
        transition: background 0.3s;
    }
    .flx-tabbar > .flx-tab-item:first-of-type {
        margin-left: 0;
    }

    .flx-tabbar > .flx-tab-item.flx-current {
        background: #eaecff;
        border-top: 3px solid #7bf;
        margin-top: 0;
    }

    .flx-tabbar > .flx-tab-item:hover {
        background: #eaecff;
    }