﻿/* Container */
.tabblockcontainer { padding: 5px 5px 0px 5px; border-left: solid 1px #253d75; border-right: solid 1px #253d75; }
    .tabblockcontainer > div { overflow-x: hidden; overflow-y: auto; padding: 10px 10px 0px 10px; background-color:#f7f7f7 }

/* Tab Definition */
.tabblock { padding-left: 20px; display: flex; align-items: flex-end; flex-wrap: nowrap; box-shadow: inset 0 -1px 0 #253d75 }

    .tabblock > div { flex: 1 1 auto; max-width: 150px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; padding-left: 5px; padding-right: 5px; text-align: center; line-height: 30px; margin-top: 3px; box-sizing: border-box; user-select: none }
        .tabblock > div:hover { height: 33px; margin-top: 0px; }
        .tabblock > div:not(:first-child) { border-left: solid 1px }
        .tabblock > div.selected { font-weight: bold; cursor: default; line-height: 34px; height: 34px; margin-top: 0px; border-left: solid 1px }
            .tabblock > div.selected:last-child { border-right: solid 1px }

        .tabblock > div.disabled { cursor: default; }
            .tabblock > div.disabled:hover { line-height: 29px; height: 29px; margin-top: 3px; }

    /* Colour Themes*/
    .tabblock.blue > div { background-color: #516aa4; color: #fff; border-bottom: solid 1px #253d75 }
        .tabblock.blue > div:not(:first-child) { border-left-color: #253d75 }
        .tabblock.blue > div.selected > div :not(:first-child) { border-left-color: #253d75; }
        .tabblock.blue > div.selected { background-color: #f7f7f7; color: #000; border-left-color: #253d75; border-bottom: solid 1px #f7f7f7 }
            .tabblock.blue > div.selected:last-child { border-right-color: #516aa4 }

        .tabblock.blue > div.disabled { background-color: #8ea2cc; }

    .tabblock.white > div { background-color: #ddd; color: #000; box-shadow: inset 0 -1px 0 #f7f7f7; border-bottom: solid 1px #253d75; }
        .tabblock.white > div:not(:first-child) { border-left: none; box-shadow: inset 1px 0 0 #fff, inset 0 -1px 0 #f7f7f7; }
        .tabblock.white > div.selected > div :not(:first-child) { border-left-color: #253d75; }
        .tabblock.white > div.selected { background-color: #f7f7f7; border-left: solid 1px #253d75; border-top: solid 1px #253d75; border-right: solid 1px #253d75; border-bottom: solid 1px #f7f7f7; box-shadow: none; /* reset the inset shadow for selected tab */ }
            .tabblock.white > div.selected:last-child { border-right-color: #516aa4 }

        .tabblock.white > div.disabled { background-color: #bbb; color: #fff }
        