/* standard (DVG style) */

.tabline-container {
    background-color: #fff;
    user-select: none;
}

.tabline-menuIcon:hover {
    color: #ffffff;
    background-color: #aaa;
}

.tabline-menuIconLeft {
    float: left;
}

.tabline-menuIconRight {
    float: right;
    position: absolute;
    right: 0px;
    top: 2px;
    margin-top: -2px;
    height: 22.8px;
}

.tabline-menuIconContent {
    transform: rotate(90deg);
}

    .tabline-menuIconContent::before {
        content: "»";
    }


.tabline-dp-tabsWindow {
    /* width is adapted programmatically */
    display: inline-block;
    overflow: hidden;
    background: #ccc;
}

.tabline-tabsContainer {
    /* left is adapted programmatically */
    /* width is adapted programmatically */
    height: 25px;
    position: relative;
    transition-property: left;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    margin-left: -1px;
    margin-top: 0px;
}


.tabline-instrip, .tabline-instripInvalid {
    display: inline-block;
    line-height: 25px;
    padding: 0px 10px 0px 10px;
    white-space: nowrap;
    cursor: pointer;
    /* border-top: 1px solid #bbb; */
    border-left: 1px solid #bbb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgb(130 130 130);
    color: #555;
}

.tabline-instrip {
    /* color: #fff; */
    /* font-weight: bold; */
    border-right: 1px solid #ccc;
    /* border-top-right-radius: 10px; */
    background-color: rgb(220 220 220);
}

.tabline-instripInvalid {
    color: red;
}

.tabline-instrip:hover {
    color: #3276B1;
}

.tabline-instrip:hover, .tabline-instripInvalid:hover {
    /* background-color: #d6e0e9; */
}

.tabline-selected {
    font-weight: bold;
    color: #3276b1;
    background-color: #fff;
    cursor: text;
    border-bottom: 5px solid #fff !important;
}

    .tabline-selected:hover {
        color: #333;
        background-color: #CCC;
    }


.tabline-menu {
    border: 1px solid #003366;
    position: relative;
    top: -1px;
    background-color: #ffffff;
    transform-origin: 0 0;
    transform: scaleY(0);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(1, 0, 1, 0.8);
}

.tabline-menuExpanded {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.tabline-menuColumn {
    display: inline-block;
    vertical-align: top;
}

.tabline-inmenu, .tabline-inmenuInvalid {
    display: block;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
}

.tabline-inmenuInvalid, .tabline-inmenuInvalid:hover {
    color: red;
}

.tabline-inmenu:hover {
    color: #000000;
}

.tabline-inmenu:hover, .tabline-inmenuInvalid:hover {
    background-color: #afbfcf;
}


/* Details Pane */

.tabline-dp-container {
    background-color: #ccc;
    border: 0;
    border-bottom: 5px #fff solid;
}


.tabline-dp-menuIcon, .tabline-menuIcon {
    display: inline-block;
    color: #3276B1;
    background-color: #D6E0E9;
    padding: 1px 0.8px 0px 5px;
    line-height: 27px;
    width: 20px;
    border: 1px solid #3276B1;
    font-size: 28px;
    /* padding-top: 1px; */
    cursor: pointer;
    border-radius: 3px;
}

.tabline-dp-menuIcon:hover {
    color: #ffffff;
    background-color: #3276B1;
}

.tabline-dp-menuIconLeft {
    float: left;
}

.tabline-dp-menuIconRight {
    float: right;
    position: absolute;
    right: 0;
}

.tabline-dp-menuIconContent {
    transform: rotate(90deg);
}

.tabline-dp-menuIconContent::before {
    content: "»";
    padding-left: 2px; 
}

.tabline-dp-tabsWindow {
    /* width is adapted programmatically */
    display: inline-block;
    overflow: hidden;
    background-color: #d6e0e9;
}

.tabline-dp-tabsContainer {
    /* left is adapted programmatically */
    /* width is adapted programmatically */
    height: 30px;
    position: relative;
    transition-property: left;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    margin-right: 10px;
    background-color: #d6e0e9;
}

.tabline-dp-instrip {
    color: #555;
}

.tabline-dp-instripInvalid {
    color: red;
}

.tabline-dp-instrip, .tabline-dp-instripInvalid {
    display: inline-block;
    line-height: 20px;
    padding: 5px 10px;
    margin: 0;
    background-color: #dcdcdc;
    white-space: nowrap;
    cursor: pointer;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-right: 1px solid #ccc;
}

.tabline-dp-instrip:hover, .tabline-dp-instripInvalid:hover {
    color: #000;
}

.tabline-dp-selected {
    /* border-bottom: 0px; */
    color: #3276b1 !important;
    cursor: default;
    background-color: #fff;
    font-weight: bold;
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-radius: 10px 10px 0px 0px;
}


.tabline-dp-menu {
    border: 1px solid #bbb;
    position: relative;
    top: -1px;
    background-color: #ffffff;
    transform-origin: 0 0;
    transform: scaleY(0);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(1, 0, 1, 0.8);
}

.tabline-dp-menuExpanded {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.tabline-dp-menuColumn {
    display: inline-block;
    vertical-align: top;
}

.tabline-dp-inmenu, .tabline-dp-inmenuInvalid {
    display: block;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
}

.tabline-dp-inmenuInvalid {
    color: red;
}

    .tabline-dp-inmenu:hover, .tabline-dp-inmenuInvalid:hover {
        background-color: #3276B1;
    }

.tabline-dp-inmenu:hover {
    color: #ffffff;
}