.table-container {
    user-select: none;
}

.table-column-container {
    display: inline-block;
    padding: 5px;
    box-shadow: inset 0 0 100px 100px #f3ebeb;
}

.table-column-container.green {
    background-color: green;
}

.table-column-container.blue {
    background-color: blue;
}

.table-column-container.red {
    background-color: red;
}

.table-column-title {
    text-align: center;
    margin-bottom: 0.5em;
}

.table-row {
    height: 56px;
    margin-bottom: 17px;
}

.table-cell {
    display: inline-block;
    width: 42px;
    height: 58px;
    padding: 5px;
}

.skill {
    max-height: 56px;
}

.skill.disabled * {
    filter: grayscale(1);
}

.skill:not(.disabled) .icon:hover  {
    box-shadow: inset 0 0 10px #089, 0 0 5px #0ab;
}

.skill .icon {
    position: relative;
    z-index: 1;
}

.skill-level {
    display: inline-block;
    position: relative;
    left: 26px;
    top: -16px;
    min-width: 16px;
    padding: 1px;
    border: 1px solid #b7b1b1;
    border-radius: 3px;
    background-color: #d0bcbc;
    text-align: center;
    float: left;
    z-index: 2;
}

.skill-connector {
    position: relative;
    border: 2px solid #b38d72;
}

.skill-connector.vertical {
    left: 19px;
    top: -17px;
    width: 0;
    height: 17px;
    margin-bottom: -20px;
}

.skill-connector.vertical.double {
    top: -90px;
    height: 90px;
    margin-bottom: -93px;
}

.skill-connector.horizontal {
    left: -12px;
    top: 27px;
    width: 10px;
    height: 0;
    margin-bottom: -3px;
}

.skill-connector.double-left {
    width: 49px;
    height: 44px;
    border-top: none;
    left: -34px;
    top: -17px;
    border-width: 3.5px;
    margin-bottom: -47px;
    z-index: 0;
}

.skill-tooltip {
    font-family: 'Arial', serif;
    user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100px;
    max-width: 350px;
    color: #fff;
    padding: 7px;
    background-color: #000C;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -.03em;
    z-index: 100;
}

.skill-tooltip .title {
    color: #e6b919;
}

.skill-tooltip p {
    margin: 0;
}

.skill-tooltip .next-level, .requirements {
    margin-top: 1em;
}

.skill-tooltip .next-level:before {
    color: #18f17a;
    content: 'Next Level:';
}

.skill-tooltip .requirements:before {
    color: #859ee2;
    content: 'Requirements:';
}

.skill-tooltip .requirements .incomplete {
    color: #e42e17;
}

.class {
    width: 160px;
    height: 203px;
    float: left;
    margin: 2px;
}

.class:hover {
    box-shadow: inset 0 0 10px #089, 0 0 5px #0ab;
}

.class.dk {
    background: url(https://muxlegend.com/images/class/dk.png);
}

.class.dw {
    background: url(https://muxlegend.com/images/class/dw.png);
}

.class.elf {
    background: url(https://muxlegend.com/images/class/elf.png);
}

.class.mg {
    background: url(https://muxlegend.com/images/class/mg.png);
}

.class.dl {
    background: url(https://muxlegend.com/images/class/dl.png);
}

.class.sum {
    background: url(https://muxlegend.com/images/class/sum.png);
}

.class.rf {
    background: url(https://muxlegend.com/images/class/rf.png);
}

.class.gl {
    background: url(https://muxlegend.com/images/class/gl.png);
}

.class.rw {
    background: url(https://muxlegend.com/images/class/rw.png);
}

.class.sl {
    background: url(https://muxlegend.com/images/class/sl.png);
}

.class.gc {
    background: url(https://muxlegend.com/images/class/gc.png);
}