@charset "utf-8";
/* CSS Document */
/*ICONOS SALUD 3.0*/
/* HOJA DE ESTILOS CSS para el desarrollo de icons en el proyecto SALUD 3.0 Desarrollado por:ADDENTRA INTERNET Fecha inicio:01/02/2016*/
/*** ICONOS ***/

:root {
    --X: 0px;
    --Y: 0px;
}

/* solo para firefox */
icon{display: inline-block; overflow: hidden;     filter: drop-shadow(0px 0px 0 #353535);}
icon:before{content: ' '; display:inline-block;background: url("../img/iconosSalud30.svg") no-repeat; position: absolute;  width: 100px; height: 100px;transform-origin: 0 0; overflow: hidden; }
icon:before{ background-position: var(--X) var(--Y);}

/*region *******************TAMAÑOS*******************/
icon.s{ width: 20px; height: 20px;}
icon.m{ width: 30px; height: 30px;}
icon.m-l{ width: 40px; height: 40px;}
icon.l{width: 50px; height: 50px; }
icon.xl{width: 60px; height: 60px; }
icon.xxl{width: 80px; height: 80px; }
icon.xxxl{width: 100px; height: 100px; }
icon.s:before{  transform: scale(.2)  }
icon.m:before{  transform: scale(.3)  }
icon.m-l:before{  transform: scale(.4)  }
icon.l:before{ transform: scale(.5)   }
icon.xl:before{ transform: scale(.6)   }
icon.xxl:before{ transform: scale(.8)   }
icon.xxxl:before{ transform: scale(1)   }
/*endregion *******************TAMAÑOS*******************/



/*region *******************TIPO ICONO*******************/
icon.accion1:before{background-position-x: calc(-100px * 0);--X: calc(-100px * 0);}
icon.accion2:before{background-position-x: calc((-100px * 1) - 0px  - 0px);--X: calc((-100px * 1) - 0px - 0px);}
icon.accion3:before{background-position-x: calc((-100px * 2) - 0px  - 0px);--X: calc((-100px * 2) - 0px - 0px);}
icon.accion4:before{background-position-x: calc((-100px * 3) - 0px  - 0px);--X: calc((-100px * 3) - 0px - 0px);}
/*endregion ******************* TIPO ICONO *******************/


/*region ******* ACCION DEL ICONO *********/
icon.validador:before{background-position-y: calc(-100px * 0);--Y: calc(-100px * 0);}
icon.eliminar:before{background-position-y: calc(-100px * 1);--Y: calc(-100px * 1);}
icon.horas:before{background-position-y: calc(-100px * 2);--Y: calc(-100px * 2);}
icon.cita:before{background-position-y: calc(-100px * 3);--Y: calc(-100px * 3);}
icon.notificaciones:before{background-position-y: calc(-100px * 4);--Y: calc(-100px * 4);}
icon.paciente:before{background-position-y: calc(-100px * 5);--Y: calc(-100px * 5);}
icon.sugerencias:before{background-position-y: calc(-100px * 6);--Y: calc(-100px * 6);}
icon.informacion:before{background-position-y: calc(-100px * 7);--Y: calc(-100px * 7);}
/*endregion ******* ACCION DEL ICONO ********/