@font-face {
  font-family: 'fontello';
  src: url("./font/fontello.eot");
  src: url("./font/fontello.eot") format('embedded-opentype'),
       url("./font/fontello.woff") format('woff'),
       url("./font/fontello.ttf") format('truetype'),
       url("./font/fontello.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}


.odon-widget-container{
	padding: 5px;
	font-family: tahoma;
	font-size: 12px;
    border-collapse:collapse;
   	display: inline-block;
}

.odon-widget-container *,
.odon-widget-container *:before ,
.odon-widget-container *:after{
	-webkit-box-sizing: initial !important;
    -moz-box-sizing: initial !important;
    box-sizing: initial !important;
}

.odon-widget-container .bar-status{
	border-top: 1px solid#ccc;
    border-bottom: 1px solid#ccc;
} 

ul.odont-convention-frame{
	display: block;
	width: 100%;
	padding: 0;
}
ul.odont-convention-frame > li{
	display: inline-block;
	padding: 5px 1px 5px 1px;
	border:1px solid transparent;
	width: 110px;
	height: 20px;
	vertical-align: top;
	text-align: left;
	font-size: 10px !important;
	cursor: pointer;
}

ul.odont-convention-frame.vertical{
	display: inline-block;
  	width: 200px;
	padding: 0;
  	overflow-y: auto;
  	height: 468px;
  	vertical-align: middle;
}
ul.odont-convention-frame.vertical > li{
	display: block;
	width: auto;
}

ul.odont-convention-frame > li:hover:not(.selected-state){
	background :rgba(255, 245, 0, 0.22);
	border:1px solid #FC0;
}
ul.odont-convention-frame > li > .convention ,
ul.odont-convention-frame > li > .title,
.convention-circle{
	display: inline-block;
	vertical-align: middle;
} 

ul.odont-convention-frame > li > .convention{
	width: 19px;
	height: 20px;
	padding: 0 1px 0 1px;
}

ul.odont-convention-frame > li > .convention-circle{
	width: 17px;
	height: 17px;
	border: 2px solid transparent;
	border-radius : 15px;
}

ul.odont-convention-frame > li > .title{
	width: 82px;
	padding-left: 5px;
	font-size: 10px !important;
	font-weight: normal;
}

ul.odont-convention-frame.vertical > li > .title{
	width: auto;
}

.odon-master-control , .odon-odontograma-frame{
	display: inline-block;
	vertical-align: middle;
}

.odon-odontograma-frame{
	clear: both;
	border: 1px solid #ccc;
	width: 755px;
}
.odon-master-control {
	width: 95px;
}

.odon-top-left-area , .odon-bottom-left-area , .odon-top-rigth-area , .odon-bottom-rigth-area{
	display: inline-block;
	width: 375px;
	vertical-align: top;
}

.odon-top-left-area , .odon-bottom-left-area {
    border-right:  1px solid #2d2e34;
}
.odon-top-rigth-area , .odon-bottom-rigth-area {
    border-left:  1px solid #2d2e34;
}
.odon-top-rigth-area,.odon-top-left-area  {
    border-bottom : 1px solid #2d2e34;
}

.odon-bottom-left-area , .odon-bottom-rigth-area {
    border-top : 1px solid #2d2e34;
}

.odon-top-left-area  .odon-teenth-container , .odon-bottom-left-area .odon-teenth-container{
	float: right;
}

.odon-clear-float-rigth{
	clear: both;
}

.odon-teenth-area{
	display: block;
	padding: 3px;
}

.odon-teenth-area .odon-teenth-container{
	display: inline-block;
	vertical-align: top;
	padding: 1px;
}

.odon-teenth-area .odon-teenth-container span{
	display: block;
	text-align: center;
	font-weight: bold;
}

.odon-teenth-area .odon-teenth-container > .other-top,.other-bottom{
	vertical-align: top;
}

.odon-teenth-area .odon-teenth-container .other-top > div.normal{
	vertical-align: bottom;
	border : 1px solid black;
	display: inline-block;
	border-bottom: 0;
}

.odon-teenth-area .odon-teenth-container canvas{
	cursor:pointer;
	vertical-align: top;
}

.odon-teenth-area .odon-teenth-container .other-bottom > div.normal{
	vertical-align: top;
	border : 1px solid black;
	display: inline-block;
	border-top: 0;
}

.odon-teenth-area .odon-teenth-container .other-top > div.normal:FIRST-CHILD,
.odon-teenth-area .odon-teenth-container .other-bottom > div.normal:FIRST-CHILD{
     border-right-color: transparent;
} 

.odon-teenth-area .odon-teenth-container canvas.odon-teenth-default-state:hover{
	background :rgba(255, 245, 0, 0.22);
	border:1px solid #FC0;
}

.odon-teenth-default-state > .teenth{
	border:1px solid black;
}

.teenth.disable {
    background-color: rgba(128, 128, 128, 0.36);
}

.odon-teenth-selected-state > .teenth , .selected-state {
	border:1px solid #FC0;
	background:rgba(235, 255, 3, 0.41);
}

/*------ UTIL STYLE CLASS ------*/

/*------ CONVENTION STYLE CLASS ------*/
.corona-cambio:before 
{
    content:"";
    display:block;
    border:2px solid blue;
    border-radius:inherit;
    width: 78%;
	height: 78%;
}

.corona-requerida{
	text-align: center;
}
.corona-requerida:after{
	margin-left: 1%;
}
.corona-requerida:before{
	margin-right: 11%;
}

.corona-requerida:after,.corona-requerida:before{
	content: "";
	width: 23%;
	height: 100%;
	border-left: 1px solid red;
	border-right: 1px solid red;
	display: inline-block;
	vertical-align: middle;
}

.endodoncia:before{
	content:"";
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 18px solid transparent;
	border-bottom-color:inherit;
	display: inline-block;
	vertical-align: middle;
}
.erosion-abracion:before , .obturacion-cervical:before {
	content:"";
	border:1px solid red;
	border-bottom-width:0;
    border-radius: 50% 50% 0 0/ 100% 100% 0 0;
    height: 10px;
    width: 90%;
    display: block;
    margin-top: 2px
}
.erosion-abracion:before{
	border-color:red;
}
.exodoncia-realizada:before{
	content:"";
	display: block;
	width: 5px;
	height: 100%;
	background-color: black;
	margin: 0 auto;
}

.exodoncia-simple{
	font-size: 18px;
	text-align: center;
	color: red;
	font-weight: bold;
}
.exodoncia-abierta{
	position: relative;
}

.exodoncia-abierta:before, .exodoncia-abierta:after{
	position: absolute;
	width: 0;
	height: 0;
	display: block;
}

.exodoncia-abierta:before{
	content: "";
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid transparent;
	vertical-align: middle;
	border-top-color: red;
	top: 3px;
	left: 0;
	right: 0;
	margin: auto;
}

.exodoncia-abierta:after{
	content: "X";
	margin: 0 auto;
	color: red;
	font-size: 14px;
	left: 0;
	width: 8px;
	height: 8px;
	top: 3px;
	bottom: 0;
	right: 0;
}

.incluido:before,.incluido:after{
	content: "";
	display: block;
	width: 100%;
	height: 15%;
	border: 2px solid blue;
	border-left-width: 0px;
	border-right-width: 0px;
}

.incluido:after{
	margin-top: 17%;
}

.nucleo,.nucleo-requerido{
	text-align: center;
	position: relative;
}

.nucleo:before,.nucleo-requerido:before{
	content: "N";
	font-size: 18px;
	font-weight: bold;
}

.nucleo-requerido:after{
	content: "";
	position: absolute;
	width: 18px;
	height: 3px;
	border: 2px solid red;
	top:0;
	left: 0;
	bottom:-3px;
	right:0;
	margin:auto;
	border-left-width: 0;
	border-right-width: 0;
}
.observacion{
	color: red;
	text-align: center;
}

.observacion:after{
	content: "?";
	font-size: 18px;
	font-weight: bold;
}

.obturacion-cervical:before {
	border-color:blue;
}

.obturacion-cambio{
	position: relative;
	background-color: red;
}

.obturacion-cambio:before{
	content: "";
	display: block;
	position: absolute;
	width: 70%;
	height: 70%;
	top:0;
	bottom:0;
	left:0;
	right: 0;
	margin: auto;
	background-color: blue;
	border-radius:inherit;
}

.odontotomia{
	text-align: center;
	color:red;
}

.odontotomia:before{
	content: "OD";
	font-size: 13px;
	font-weight: bold;
}

.provisional{
	text-align: center;
}
.provisional:before{
	content: "P";
	font-size: 18px;
	font-weight: bold;
}

.protesis{
	position: relative;
}
.protesis:after, .protesis:before{
	content: "";
	width: 85%;
	height: 2px;
	display:block;
	border: 2px solid rgb(206, 198, 198);
	background-color: blue;
	margin-top:2px;
}
.rx{
	color: red;
	text-align: center;
}
.rx:before{
	content:"Rx";
	font-size: 14px;
	font-weight: bold;
}

.resina-preventiva{
	color:red;
	text-align: center;
}

.resina-preventiva:before{
	content:"Rp";
	font-size: 14px;
	font-weight: bold;
}

.semi-incluido{
	color:red;
	text-align: center;
}

.semi-incluido:before{
	content:"\\";
	font-size: 16px;
	font-weight: bold;
}

.sin-erupcionar:before{
	content: "";
	width: 100%;
	height: 6px;
	display:block;
	background-color: black;
	margin-top:37%;
}

.superficie{
	text-align: center;
}

.superficie:before{
	content: "S";
	font-size: 16px;
	font-weight: bold;
}

.tratamiento-realizado{
	text-align: center;
	background: black;
	color: white;
}

.diente-sano{
	text-align: center;
	color: green;
}

.tratamiento-realizado:before ,
.diente-sano:before{
  content:'\e800';
  font-family:"fontello";
  width: 100%;
  height: 100%;
  font-size: 18px;
  display: block;
}

.urgencias{
	position: relative;

}
.urgencias:before,.urgencias:after{
	content: "";
	display: block;
}
.urgencias:before{
	width: 75%;
	height: 100%;
	border: 3px solid red;
	border-bottom: 0;
	border-top: 0;
	border-radius: 50%;
}
.urgencias:after{
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius:5px;
	background-color: red;
	position: absolute;
}