#mainContent {

    position: relative;
    z-index: 2;
}

.tablaDientes {

    margin: auto;
    margin-top: 2%;
}

th {

    text-align: center;
    border: 1px solid rgb(124, 119, 119);
}

td {

    padding: 6px;
}

.diente {

    position: relative;
    width: 30px;
    height: 30px;
    background-image:  url("../diente.png");
    z-index: 2; 
}

.diente:hover .proceTotal, .diente:hover .fractura, .diente:hover #estado, .diente:hover #corona, .diente:hover #erupcion{

    visibility: hidden;
}

.proceTotal {

    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 4;
    display: none;
}

.diente #estado, .diente #corona, .diente #erupcion {

    position: absolute;
    width: 25px;
    height: 25px;
    top: 2.5px;
    left: 2.5px;
    z-index: 4;
}

#simboloDiv #estado, #simboloDiv #corona, #simboloDiv #erupcion {

    position: absolute;
    width: 25px;
    height: 25px;
    top: 5px;
    left: 10px;
    z-index: 4;
}

.simboloProceECE {

    position: absolute;
    width: 25px;
    height: 25px;
    top: 5px;
    left: 10px;
    z-index: 4;
}

.buenEstado:before {
    content: 'S';
    color: blue;
    font-size: 35px;
    bottom: 15px;
    left: 2px;
    position: relative; 
    font-weight: bolder;
}

.coronaIndi {

    background:red; 
    border-radius:50px;
}

.coronaBuen {

    background:Blue; 
    border-radius:50px;
}

.coronaDefec {

    background: black; 
    border-radius:50px;
}

.erupcion {

    background-color: transparent;
    border-radius: 50%;
    border: 3px solid blue;
}

.fractura{

    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 3;
    background-image:  url("../rayo15.png");
    background-repeat: no-repeat;
    display: none;
}

.fracturaT {

    right: 6px;
}

.fracturaR {

    transform: rotate(90deg);
    right: 0px;
    top: 6px;
}

.fracturaB {

    transform: rotate(180deg);
    bottom: 0px;
    right: 6px;
}

.fracturaL {

    transform: rotate(270deg);
    left: 0px;
    top: 6px;
}

.fracturaC {

    top: 8px;
    left: 8px;
}

.endondociaDienteIndiT{

    position: absolute;
    width: 5px;
    height: 13px;
    z-index: 3;
    background: red;
    left: 13px;
    top: -6px;
}

.endondociaDienteRealiT{

    position: absolute;
    width: 5px;
    height: 13px;
    z-index: 3;
    background: blue;
    left: 13px;
    top: -6px;
}

.endondociaDienteIndiR{

    position: absolute;
    width: 13px;
    height: 5px;
    z-index: 3;
    background: red;
    right: -6px;
    bottom: 13px;
}

.endondociaDienteRealiR{

    position: absolute;
    width: 13px;
    height: 5px;
    z-index: 3;
    background: blue;
    right: -6px;
    bottom: 13px;
}

.endondociaDienteIndiB{

    position: absolute;
    width: 5px;
    height: 13px;
    z-index: 3;
    background: red;
    left: 13px;
    bottom: -6px;
}

.endondociaDienteRealiB{

    position: absolute;
    width: 5px;
    height: 13px;
    z-index: 3;
    background: blue;
    left: 13px;
    bottom: -6px;
}

.endondociaDienteIndiL{

    position: absolute;
    width: 13px;
    height: 5px;
    z-index: 3;
    background: red;
    left: -6px;
    bottom: 13px;
}

.endondociaDienteRealiL{

    position: absolute;
    width: 13px;
    height: 5px;
    z-index: 3;
    background: blue;
    left: -6px;
    bottom: 13px;
}

.endondociaDienteIndiC{

    position: absolute;
    width: 5px;
    height: 36px;
    z-index: 3;
    background: red;
    left: 13px;
    top: -3px;
}

.endondociaDienteRealiC{

    position: absolute;
    width: 5px;
    height: 36px;
    z-index: 3;
    background: blue;
    left: 13px;
    top: -3px;
}

.trapeziumt-h {

    height: 0;
    width: 30px;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    z-index: 6;   
}

.trapeziumt {

    height: 6px;
    width: 50%;
    position: absolute;
    top: 1px;
    left: 8px;
    z-index: 2;
}

.trapeziumt-bl {

    height: 6px;
    width: 50%;
    position: absolute;
    top: 1px;
    left: -7px;
    border-bottom: 7px solid transparent;
    z-index: 3; 
}

.trapeziumt-br {

    height: 6px;
    width: 50%;
    position: absolute;
    top: 1px;
    right: -7px;
    border-bottom: 7px solid transparent;
    z-index: 3; 
}

.trapeziumt-h:hover {

    border-top: 7px solid rgb(255, 120, 42);
}

.trapeziumr-h {

    height: 30px;
    width: 0px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    left: 23px;
    z-index: 6; 
}

.trapeziumr {

    height: 50%;
    width: 6px;
    position: absolute;
    top: 8px;
    right: 1px;
    z-index: 3; 
}

.trapeziumr-bt {

    height: 50%;
    width: 6px;
    position: absolute;
    top: -7px;
    right: 1px;
    border-left: 7px solid transparent;
    z-index: 3; 
}

.trapeziumr-bb {

    height: 50%;
    width: 6px;
    position: absolute;
    bottom: -7px;
    right: 1px;
    border-left: 7px solid transparent;
    z-index: 3; 
}

.trapeziumr-h:hover {

    border-right: 7px solid rgb(255, 120, 42);
}

.trapeziumb-h {

    height: 0;
    width: 30px;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 23px;
    z-index: 6; 
}

.trapeziumb {

    height: 6px;
    width: 50%;
    position: absolute;
    left: 8px;
    bottom: 1px;
    z-index: 3; 
}

.trapeziumb-br {

    height: 6px;
    width: 50%;
    position: absolute;
    right: -7px;
    bottom: 1px;
    border-top: 7px solid transparent;
    z-index: 3; 
}

.trapeziumb-bl {

    height: 6px;
    width: 50%;
    position: absolute;
    left: -7px;
    bottom: 1px;
    border-top: 7px solid transparent;
    z-index: 3; 
}

.trapeziumb-h:hover {

    border-bottom: 7px solid rgb(255, 120, 42);
}

.trapeziuml-h {

    height: 30px;
    width: 0px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    position: absolute;
    z-index: 6; 
}

.trapeziuml {

    height:  50%;
    width: 6px;
    position: absolute;
    top: 8px;
    left: 1px;
    z-index: 3; 
}

.trapeziuml-bt {

    height: 50%;
    width: 6px;
    position: absolute;
    top: -7px;
    left: 1px;
    border-right: 7px solid transparent;
    z-index: 3; 
}

.trapeziuml-bb {

    height: 50%;
    width: 6px;
    position: absolute;
    bottom: -7px;
    left: 1px;
    border-right: 7px solid transparent;
    z-index: 3; 
}

.trapeziuml-h:hover {

    border-left: 7px solid rgb(255, 120, 42);
}

.centro-h {

    height: 14px;
    width: 14px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6; 
}

.centro {

    height: 14px;
    width: 14px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;    
}

.centro-h:hover {

    background-color: rgb(255, 120, 42);
}

#camadaPincel{

    position: absolute;
    top: 0px;
    z-index: 1;
}

#simboloImg{

    background-color: #e9ecef;
}

#simboloDiv{
    position: relative;
    background-color: #e9ecef;
}

.endondociaIndic{

    width: 5px;
    height: 35px;
    background: red;
    position: absolute;
    left: 20px;
    top: 1px;
}

.endondociaReali{

    width: 5px;
    height: 35px;
    background: blue;
    position: absolute;
    left: 20px;
    top: 1px;
}