/*CSS: ODONTOGRAMA LISTADO*/

.zonas{position: relative;cursor:pointer;}

.css-shapes-middle{
    height: 33.3333334%;
    width: 33.3333334%;
    background-color: #c5c4be !important;
    top: 32.333334%;
    left: 33.333334%;
    
}
.css-shapes-up{
    height: 0px;
    width: 100%;
    border-radius: 10px;
    top: -37.333333%;
    left: 0px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-top: 0px transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #dcd7d7;
}
.css-shapes-bottom{
    height: 0px;
    width: 100%;
    border-radius: 10px;
    top:2%;left:0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #dcd7d7;
}
.css-shapes-right{
    height: 0px;
    width: 100%;
    border-radius: 10px;
    top:-66.6666667%;
    left:36.333333%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-top: 0px transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #dcd7d7;
}
.css-shapes-left{
    height: 0px;
    width: 100%;
    border-radius: 10px;
    top:-100%;
    left:-36.333333%;;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    border-top: 0px transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #dcd7d7;
}

.pos_right_2{top:-66.6666667%;}
.pos_left_2{top:-100%;}

.pos_up_3{top:-68.6666667%;}
.pos_right_3{top:-67.6666667%;}
.pos_left_3{top:-101%;}
.pos_bottom_3{top:35.3333334%;}
.pos_middle_3{top: 33.3333334%;}

.pos_up_4{top:-68.6666667%;}
.pos_left_4{top:-66.6666667%;}
.pos_bottom_4{top:35.3333334%;}
.pos_right_4{top:-100%;}

.diente{margin-top: 14px;
    margin-bottom: 14px;width: 26px;height: 95px;margin: 0 7px; display:inline-block;text-align: center;}
    .pieza_name{position: relative;top: 20px;left: 17px;display: block;}
    .capa_estado{height: 36px;
        width: 36px;
        position: relative;
        top: -35px;
        left: -4px;}
        .capa_estado_empty{
           height: 36px;
           width: 36px;
           position: relative;
           top: -33px;
           left: -3px;
           border: 2px solid #c3c9cc;
           cursor: pointer;
           border-radius: 8px;
       }
       .capa_estado_empty.active{

        background-image: url(../img/odonto/check.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .capa_estado_big{height: 90px;width:90px; position: absolute;top: 0;}
    .diente input{margin-bottom: 13px;width: 35px; text-align:center; position:relative; left:-4px;top:-13px; color:blue; font-weight:bold;}
    .visible{visibility: visible;}
    .oculto{visibility: hidden;}

    .lateral_rojo{border-bottom-color: #FF0000!important;}
    .central_rojo{background-color: #FF0000!important;}
    .lateral_azul{border-bottom-color: #03A9F4!important;}
    .central_azul{background-color: #03A9F4!important;}
    .text_rojo{color:#FF0000!important;}
    #caja .col-md-6, #caja .col-md-3{padding: 0px}
    #odontograma .col-xs-6 {min-height: 70px; padding: 5px;}
    #odontograma .col-xs-6:nth-child(odd) {border-right:1px solid #ccc;}




    /*CSS: ODONTOGRAMA MODAL*/
    .pd{width: 90px;height: 90px;position: relative;}
    .pd .css-shapes-up{
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid #eee;
    }
    .pd .css-shapes-bottom{
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid #EEE;
    }
    .pd .css-shapes-right{
        border-left: 31px solid transparent;
        border-right: 29px solid transparent;
        border-bottom: 30px solid #ddd;
    }
    .pd .css-shapes-left{
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid #ddd;
    }
    .pd .lateral_rojo{border-bottom-color: #FF0000;}
    .pd .central_rojo{background-color: #FF0000;}
    .pd .lateral_azul{border-bottom-color: #03A9F4;}
    .pd .central_azul{background-color: #03A9F4;}
    .pd .lateral_azul_oscuro{border-bottom-color: #0055ff;}
    .pd .central_azul_oscuro{background-color: #0055ff;}

    .u-padding-left-0{
        padding-left: 0;
    }

    /*.modal-xlg {
            width: 600px !important;
    }

    
    @media (min-width: 995px){
        .modal-xlg {
            width: 1120px !important;
        }
    }
*/
    @media (min-width: 992px){
        .modal-xlg {
            width: 1120px !important;
        }
    }

    @media (max-width: 1110px){
        .modal-xlg {
            width: 900px !important;
        }
    }


    @media (max-width: 920px){
        .modal-xlg {
            width: auto; 
        }
    }

    .diente__margin{
        margin-bottom: 28px;
        margin-top: 15px;
    }