.diente {
    position: static;
    width: 0px;
    height: auto;
    margin-left: 50px;
    display: inline-block;
}
.cuadro {
    background-color: #FFFFFF;
    border: 1px solid #7F7F7F;
    position: relative;
    width: 25px;
    height: 15px;
    left: 45px;
    -webkit-border-radius: 80px 80px 0px 15px;
    -moz-border-radius: 80px 80px 0px 15px;
    border-radius: 80px 80px 0px 15px;
}

.cuadrotitle {
    background-color:cornflowerblue;
    border: 1px solid #7F7F7F;
    position: relative;
    width: 25px;
    height: 15px;
    left: 45px;
    -webkit-border-radius: 80px 80px 0px 15px;
    -moz-border-radius: 80px 80px 0px 15px;
    border-radius: 80px 80px 0px 15px;
}
.cuadrosuperior {
    background-color: #FFFFFF;
    border: 1px solid #7F7F7F;
    position: relative;
    width: 35px;
    height: 15px;
    left: 40px;
    -webkit-border-radius: 80px 80px 80px 80px;
    -moz-border-radius: 80px 80px 80px 80px;
    border-radius: 80px 80px 80px 80px;
}
.cuadroinferior {
    background-color: #FFFFFF;
    border: 1px solid #7F7F7F;
    position: relative;
    width: 35px;
    height: 15px;
    left: 40px;
    -webkit-border-radius: 80px 80px 80px 80px;
    -moz-border-radius: 80px 80px 80px 80px;
    border-radius: 80px 80px 80px 80px;
}
.cuadro:hover {
    /*background: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
.cuadrotitle:hover {
    /*background: rgba(117, 198, 243, 0.4);*/

    cursor: pointer;
}
.izquierdo {
    top: 1px !important;
    left: 28px !important;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.derecha {
    top: -29px !important;
    left: 61px !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.superior {
    top:  -2px !important;
    left: 40px !important;
}
.inferior {
    top: -38px !important;
    left: 45px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.debajo {
    top: 2px !important;
    left: 45px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.centro {
    background: #F3F3F3;
    border: 1px solid #7F7F7F;
    width: 25px;
    height: 25px;
    top: -49px;
    left: 45px;
    position: relative;
}
.centro:hover {
    border: 1px solid rgba(117, 198, 243, 0.4);
    /*background-color: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
#tlr {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#tr {
    border-right: 1px solid black;
}
#tll {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
#tl {
    border-left: 1px solid black;
}
#blr {
    border-right: 1px solid black;
}
#br {
    border-right: 1px solid black;
}
#bl {
    border-left: 1px solid black;
}
#bll {
    border-left: 1px solid black;
}
.click-red {
    background-color: red !important;
}
.click-orangered {
    background-color: orangered !important;
}
.click-yellow {
    background-color: yellow !important;
}
.click-darkred {
    background-color: darkred !important;
}
.click-dimgrey{
    background-color: dimgray !important;
}
.click-green {
    background-color: forestgreen !important;
}
.click-yellowgreen {
    background-color: yellowgreen !important;
}
.click-darkcyan {
    background-color: darkcyan !important;
}
.click-darkblue {
    background-color: darkblue !important;
}
.click-highlight {
    background-color: Highlight !important;
}
.click-fuchsia {
    background-color: fuchsia !important;
}
.click-aqua {
    background-color: aqua !important;
}
.click-black {
    background-color: black !important;
}
.click-blue {
    background-color: blue !important;
}
.click-deepskyblue {
    background-color: deepskyblue !important;
}
.click-delete {
    background-color: #747F7D !important;
}
.kill {
    background-color: green !important;
}
.diente-leche {
    position: relative;
    width: 0px;
    height: auto;
    margin-left: 50px;
    display: inline-block;
}
.cuadro-leche {
    border: 1px solid #7F7F7F;
    position: relative;
    width: 13px;
    height: 13px;
    left: 45px;
    -webkit-border-radius: 80px 80px 0px 15px;
    -moz-border-radius: 80px 80px 0px 15px;
    border-radius: 80px 80px 0px 15px;
}
.cuadro-leche:hover {
    /*background: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
.izquierdo-leche {
    top: -4px !important;
    left: 37px !important;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.top-leche {
    width: 15px;
    left: 47px;
}
.debajo-leche {
    width: 15px;
    top: -8px !important;
    left: 47px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.inferior-leche {
    width: 15px;
    top: -35px !important;
    left: 47px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.derecha-leche {
    top: -30px !important;
    left: 58px !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.centro-leche {
    background: #F3F3F3;
    border: 1px solid #7F7F7F;
    width: 15px;
    height: 13px;
    top: -43px;
    left: 47px;
    position: relative;
}
.centro-leche:hover {
    border: 1px solid rgba(117, 198, 243, 0.4);
    /*background-color: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}

.idiente {
    position: static;
    width: 0px;
    height: auto;
    margin-left: 50px;
    display: inline-block;
}
.icuadro {
    background-color: #FFFFFF;
    border: 1px solid #7F7F7F;
    position: relative;
    width: 25px;
    height: 15px;
    left: 45px;
    -webkit-border-radius: 80px 80px 0px 15px;
    -moz-border-radius: 80px 80px 0px 15px;
    border-radius: 80px 80px 0px 15px;
}
.icuadro:hover {
    /*background: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
.iizquierdo {
    top: 1px !important;
    left: 28px !important;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.idebajo {
    top: 2px !important;
    left: 45px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.iderecha {
    top: -29px !important;
    left: 61px !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.icentro {
    background: #F3F3F3;
    border: 1px solid #7F7F7F;
    width: 25px;
    height: 25px;
    top: -49px;
    left: 45px;
    position: relative;
}
.icentro:hover {
    border: 1px solid rgba(117, 198, 243, 0.4);
    /*background-color: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
#itlr {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#itr {
    border-right: 1px solid black;
}
#itll {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
#itl {
    border-left: 1px solid black;
}
#iblr {
    border-right: 1px solid black;
}
#ibr {
    border-right: 1px solid black;
}
#ibl {
    border-left: 1px solid black;
}
#ibll {
    border-left: 1px solid black;
}
.idiente-leche {
    position: relative;
    width: 0px;
    height: auto;
    margin-left: 50px;
    display: inline-block;
}
.icuadro-leche {
    border: 1px solid #7F7F7F;
    position: relative;
    width: 13px;
    height: 13px;
    left: 45px;
    -webkit-border-radius: 80px 80px 0px 15px;
    -moz-border-radius: 80px 80px 0px 15px;
    border-radius: 80px 80px 0px 15px;
}
.icuadro-leche:hover {
    /*background: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
.iizquierdo-leche {
    top: -4px !important;
    left: 37px !important;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.itop-leche {
    width: 15px;
    left: 47px;
}
.idebajo-leche {
    width: 15px;
    top: -8px !important;
    left: 47px !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.iderecha-leche {
    top: -30px !important;
    left: 58px !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.icentro-leche {
    background: #F3F3F3;
    border: 1px solid #7F7F7F;
    width: 15px;
    height: 13px;
    top: -43px;
    left: 47px;
    position: relative;
}
.icentro-leche:hover {
    border: 1px solid rgba(117, 198, 243, 0.4);
    /*background-color: rgba(117, 198, 243, 0.4);*/
    
    cursor: pointer;
}
.iclick-red {
    background-color: red !important;
}
.iclick-green {
    background-color: forestgreen !important;
}
.iclick-darkblue {
    background-color: darkblue !important;
}
.iclick-blue {
    background-color: blue;
}



.iclick-delete {
    background-color: #747F7D !important;
}