EnVisageOnline/Main/Source/EnVisage/Content/stylesheets/skills-grid.css

.level2 {
    padding-left: 30px;
}
.item-name a {
    display:inline-block;
    overflow-x:hidden;
    text-overflow:ellipsis;
}
    .item-name .editable-wrap .editable-input
    {
        height: 32px;
        padding: 6px 12px;
    }
    .item-name .editable-wrap .editable-controls
    {
        width: 550px;
    }
        .item-name.level2 .editable-wrap .editable-controls
        {
            width: 538px;
        }
.edit-skills-tree {
    max-height: 400px;
    overflow-y:auto;
}
.edit-skills-tree table thead tr th:nth-child(1) {
    width: 40px;
    min-width: 40px;
}
    .edit-skills-tree table tbody tr td div.grid-actions-div i.fa.icon {
        margin: 0 2px;
    }
    .edit-skills-tree table tbody tr td div.grid-actions-div i.fa.icon.red {
        color: red;
    }
    .edit-skills-tree table tbody tr td div.grid-actions-div i.fa.icon.green {
        color: green;
    }
.item-collapse-container {
    width: 15px;
    display: inline-block;
    vertical-align: top;
    cursor:pointer;
}
.item-collapse-container i.fa {
    color:#4083a9;
}

/* Skills Grid Styles (ENV-1328) */
.skills-matrix {
    width: auto !important;
    overflow-x: auto !important;
    background-color: #FFFFFF;
    border: none;
    padding-left: 274px !important;
    margin-bottom: 0;
	padding-bottom: 12px;
}

    .skills-matrix table {
        width: inherit;
    }

div.skills-matrix table td.headcol,
div.skills-matrix table th.headcol {
    position: absolute;
    left: 0px;
    top: auto;
    overflow: hidden;
    margin-left: 0px;
}

/*
.skills-matrix table thead tr th.headcol-week {
    text-decoration: underline;
    color: #4083a9;
    cursor: pointer;
}

.skills-matrix table tbody tr td.headcol-week {
    color: #4083a9;
    cursor: pointer;
}
*/

.skills-matrix table thead tr th:nth-child(1),
.skills-matrix table tbody tr td:nth-child(1) {
    width: 263px;
}
/*
.skills-matrix table thead tr th {
	height: 22px;
}
*/
.skills-matrix table thead tr th.firstcol {
    height: 54px;
    text-align: center;
}
.skills-matrix td.resource-row-title, .skills-matrix td.team-row-title {
    height: 27px;
}
.skills-matrix div.row-title {
    display: block;
	margin-top:4px;
}

.skills-matrix td.team-cell-value, .skills-matrix td.skill-cell-value {
    height: 27px;
	vertical-align: middle;
}

.skills-matrix td.skill-cell-value {
	text-align: center;
}

.grid-container {
    overflow: auto;
    width: 100%;
    max-height: 200px;
    background-color: #fff;
}

.skills-matrix table thead tr th,
.skills-matrix table tbody tr td {
    min-width: 110px;
    max-width: 310px;
    text-align: center;
    padding: 4px 2px;
    vertical-align: top;
}

    .skills-matrix th.left, .skills-matrix td.left {
        text-align: left;
        padding-left: 8px;
    }

tr.total-row > td {
    background-color: #e6e6e6 !important;
    border-right-color: #e6e6e6;
}

    tr.total-row > td.resource-name {
        color: #e66454;
    }

td > span.resource-name {
    padding-left: 20px;
}

.skills-matrix div.skill-cell-div {
	position: relative;
	width: 100%;
	height: 100%;
}

.skills-matrix div.skill-cell-num {
	font-size: smaller;
	position: absolute; 
	right: 4px; 
	bottom: 0px;
}

.skills-matrix .editable-error {
	position: absolute;
}

.skill-cell-interested {
	font-size: large;
	color: #fff;
	/* opacity: 0.7; */
	text-shadow: 1px 1px 6px #000;
}

.skills-matrix-no-data-message {
	/* border: 1px solid #dbdbdb; */
	padding: 8px 4px;
	text-align: center;
}

/* Matrix cells highlighting */
.skill-cell-level0, .skill-cell-level {
	background-color: #fff;
}

.skill-cell-level1 {
	background-color: #deebf7;
}

.skill-cell-level2 {
	background-color: #bdd7ee;
}
.skill-cell-level3 {
	background-color: #9bc2e6;
}

.skill-cell-level4 {
	background-color: #2f75b5;
}

.skills-matrix-legend-table {
	border: 1px solid #dbdbdb;
	margin: 0px 10px; 
	border-collapse:collapse; 
	font-size:smaller;
}

	.skills-matrix-legend-table .value-cell {
		text-align:center;
		width: 40px;
	}

	.skills-matrix-legend-table .label-cell {
		background-color: #e6e6e6;
		white-space: nowrap; 
		padding: 0px 8px;
	}