.sectorView    { color: #1155CC; }
.sectorConnect { color: #38761D; }
.sectorStore   { color: #F4B400; }
.sectorSustain { color: #DB4437; }
.sectorExecute { color: #674EA7; }
.sectorStats   { color: black; }

/* A subtle line and space between sectors. */
.headersGroup .sector {
    border-left: none;
    cursor: pointer;
}

.headersSector .sectorHeader {
    cursor: pointer;
}
.sector ~ .sector {border-left: 1px solid #E0E0E0;}
/* (Only for the first columns of the sector.) */
.sectorView     ~ .sectorView    { border-left: none; }
.sectorConnect  ~ .sectorConnect { border-left: none; }
.sectorStore    ~ .sectorStore   { border-left: none; }
.sectorSustain  ~ .sectorSustain { border-left: none; }
.sectorExecute  ~ .sectorExecute { border-left: none; }
.sectorStats    ~ .sectorStats   { border-left: none; }

table.technologiesPunchCard { border-collapse: collapse; }
tr.headersSector { font-size: 20pt; font-weight: bold; }
tr.headersSector td { text-align: center; }

td.sectorSorted { font-weight: bold; }

tr.headersGroup  { font-size: 16pt; margin: auto}
tr.headersGroup td.first {}

tr.headersGroup td div {
    height: 240px; /* Without this, the text is centered vertically. */
    width:   40px;
    padding: 0.3em 0 0 0;
    text-align: left;
    /*vertical-align: bottom; /* No effect. */
    writing-mode: vertical-lr; /* bt-lr doesn't work? So I turn it 180 with rotate() below */
    transform: rotate(180deg);
    white-space: nowrap;
}

tr.headersGroup td:nth-child(1) div {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    width: 100%;
    height: 240px;
    display: flex;
    align-items: flex-end;
    padding-left:  0.3em;
}

tr.headersGroup .sort_asc div:after{
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: bold;
    position: relative;
}

tr.headersGroup .sort_desc div:after{
    content: "\f106";
    font-family: "FontAwesome";
    font-weight: bold;
    position: relative;
}

tr.headersSector .sort_asc div:after{
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: bold;
    position: relative;
}

tr.headersSector .sort_desc div:after{
    content: "\f106";
    font-family: "FontAwesome";
    font-weight: bold;
    position: relative;
}

tr.headersSector .sort_asc div{
    font-style: italic;
}

tr.headersSector .sort_desc div{
    font-style: italic;
}

tr.app { font-size: 12pt; }
tr.app td.name, tr.app td.sectorStats { padding: 0 0.5em; }
tr.app td.name { white-space: nowrap; overflow: hidden;}
tr.app td.sectorStats { text-align: right; vertical-align: middle; }
tr.app td.circle {text-align: center; vertical-align: middle; padding: 0;line-height: 1;}
tr.app td.circle { font-size: 26pt; }
tr.app td.circle.sizeX:after { content: "𐄂"; color: #e8e8e8; font-size: 18pt; } /* No data */
tr.app td.circle.size0:after { content: '\2B24'; font-size: 1pt; vertical-align: middle; }
tr.app td.circle.size1:after { content: '\2B24'; font-size: 8pt; vertical-align: middle; }
tr.app td.circle.size2:after { content: '\2B24'; font-size: 11pt; vertical-align: middle; }
tr.app td.circle.size3:after { content: '\2B24'; font-size: 15pt; vertical-align: middle; }
tr.app td.circle.size4:after { content: '\2B24'; font-size: 18pt; vertical-align: middle; }
tr.app td.circle.size5:after { content: '\2B24'; font-size: 20pt; vertical-align: middle; }

tr.app td.sectorStats.libsCount, tr.app td.sectorStats.storyPoints { padding-right: 20px }

/********* Styles for scrolling ******************/
table.technologiesPunchCard thead, table.technologiesPunchCard tbody {
    display: block;
    width: 100%;
}

table.technologiesPunchCard tbody tr td, table.technologiesPunchCard thead tr td {
    width: 47px;
    min-width: 47px;
    max-width: 47px;
}

table.technologiesPunchCard tbody tr td:nth-last-child(2),
table.technologiesPunchCard tbody tr td:nth-last-child(3),
table.technologiesPunchCard thead tr td:nth-last-child(2),
table.technologiesPunchCard thead tr td:nth-last-child(3) {
    width: 57px;
    min-width: 57px;
    max-width: 57px;
}

table.technologiesPunchCard tbody tr td:nth-last-child(4),
table.technologiesPunchCard thead tr td:nth-last-child(4) {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
}

table.technologiesPunchCard thead tr td.sector:nth-last-child(4) div {
    width: 52px;
}

table.technologiesPunchCard thead tr td:nth-last-child(1),
table.technologiesPunchCard tbody tr td:nth-last-child(1) { width: auto; }

table.technologiesPunchCard tr td:nth-child(1) { min-width: 350px; }

table.technologiesPunchCard tbody {
    display: block;
    overflow-y: scroll;
    height: 55vh;
}

table.technologiesPunchCard {
    height: 100%;
    width: 100%;
}

table.technologiesPunchCard tbody tr {
    width: 100%;
}

table.technologiesPunchCard thead,
table.technologiesPunchCard tbody tr {
    display: table;
}

/* Tooltip container */
.table-tooltip {
    position: relative;
}

/* Tooltip text */
.table-tooltip .table-tooltiptext {
    visibility: hidden;
    color: #fff;
    text-align: left;
    border-radius: 6px;

    position: absolute;
    z-index: 1;

    font-size: 14pt;
    padding-top: 5px;
    padding-right:10px;
    padding-left: 5px;
    padding-bottom: 5px;

    /*left tooltip*/
    top: 10px;
    right: 100%;

    opacity: 0;
    transition: opacity 1s;
    background-color: #505050;
}

.table-tooltip:hover .table-tooltiptext {
    visibility: visible;
    opacity: 0.9;
    display: block;
    max-width:none;
    min-width:200px;
}

.table-tooltip:hover .table-tooltiptext .tooltiptext-tech-name {
    text-align: left;
    padding-right: 5 !important;
}

.table-tooltip:hover .table-tooltiptext .tooltiptext-tech-count {
    text-align: left;
    padding-left: 0px !important;
}

.table-tooltip:hover .table-tooltiptext .tooltiptext-tech-name-header {
    text-align: left;
    padding-right: 5 !important;
    font-style: italic;
}

.table-tooltip:hover .table-tooltiptext .tooltiptext-tech-count-header {
    text-align: left;
    padding-left: 0px !important;
    font-style: italic;
}

.table-tooltip .table-tooltiptext::after {
    position: absolute;
    border-width: 5px;
    border-style: solid;

    /* To the right of the tooltip */
    content: "";
    top: 15px;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent #505050;
}