/*RESET*/
body{
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
}
button{
	background:none;
	border:none;
	padding: 0;
}
button:focus {outline:0;}
button:active>*,
button:focus>*{
 	position:relative;
    top:0;
    left:0;
}
/*LAYOUT*/
#layout{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;/*esto lo puse para evitar scroll lateral, pero parece que mejora el scroll de los submenús largos*/
}
.site-content{
	padding-top: 77px;
	background: #f7f7f7;
	flex-grow: 1; /*hace que llegue hasta abajo (menos el footer);*/
	padding-bottom: 15px;
	position: relative; /*porque datetimepicker no funciona dentro de un contenedor sin position específico*/
}
#footer{
	align-self: flex-end;
	width: 100%;
	border-top:1px solid #ced4da;
	padding: 4px 7px;
}
#footer > nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#footer > nav > *{
	display: inline-block;
	padding: 0;
	margin:0;
	font-size: 12px;
}
#footer li{
	display: inline-block;
	padding: 0;
	margin: 0;
}
#footer a,
#footer .copy{
	display: inline-block;
	padding: 8px;
}
@media (max-width:767px){
	.site-content{
		padding-top: 64px;
	}
}
/*HEADER*/
.navbar{
	background: #fff;
	box-shadow: 0 4px 4px rgba(0,0,0,.1);
	padding: 0 16px;
}
.navbar-brand{
	line-height: 1;
}
.navbar-brand img{
	max-width: 180px;
	max-height: 24px;
}
/*Menú Principal*/
.navbar-light .navbar-nav .nav-link{
	text-align: center;
	transition: color .3s;
	font-size: 14px;
	font-weight: 600;
	color: #212529;
	padding:8px 20px;
	white-space: nowrap;
}
.navbar-nav .nav-item .material-icons{
	display: block;
}
.navbar-nav .nav-item#more ul .material-icons{
	display: none;
}
@media (min-width:768px) {
	.nav-link.dropdown-toggle:after{
		display: none;/*Si no tiene iconos, quitar esta línea*/
	}
}
/*Dropdown Toggle (general)*/
.dropdown-toggle .material-icons{
	vertical-align: middle;
}
.dropdown-toggle::after{
	vertical-align: middle;
}
.dropdown-item > .material-icons{
	vertical-align: middle;
	line-height: 0;
    position: relative;
    top: -2px;
    left: -2px;
    transform: scale(.85);
}
.dropdown-item.active > .material-icons,
.dropdown-item:active > .material-icons{
	color:#fff!important;
}
/*Menú Usuario, Idiomas y Notificaciones (*Dropdown Toggle)*/
.aside-nav{
	margin-left: 16px;
	display: inline-block;
}
.aside-nav,
.aside-nav .dropdown-toggle{
	font-size: 12px;
	font-weight: 600;
}
.aside-nav .dropdown-toggle{
	line-height: 42px;
	padding: 0 12px 0 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 200px
}
.aside-nav .dropdown-toggle:after{
	position: absolute;
	top:19px;
	right:0;
}
.aside-nav .material-icons{
	color: #adb5bd;
	line-height: 40px;
}
.aside-nav:hover{
	text-decoration: none;
}
@keyframes bounce{
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
}
.aside-nav .material-icons.text-primary{
	animation:  bounce .3s 2;
	display: inline-block;/*necesario en Edge para que haga la animación*/
}
.aside-nav .pic{
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 11px;
	background-size: cover;
	margin:2px;
	line-height: 40px;
	vertical-align: middle;
}
/*Dorpdown Menu*/
.dropdown-menu{
    transition: all 0.3s;
    max-height: 0;
    display: block;
    /*overflow: hidden;*/
    opacity: 0;
	transform:scaleY(0);
	transform-origin:left top;
	padding: 0;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	border:1px solid rgba(0,0,0,.1);
	top:auto !important;/*necesario para datetimepicker*/
}
.nav-item > .dropdown-menu{
	margin-top: -4px;
}
.dropdown-menu.show{
    max-height:none;
    opacity: 1;
	transform:scaleY(1);

	transform: initial; /*Por problemos con posicionamiento megamenú (parece que no afecta al efecto)*/
}
.dropdown-item{
	padding:12px 16px;
	font-size: 14px;
	transition: opacity .3s;
}
.dropdown-item:not(:first-child){
	border-top: 1px solid #e9ecef;
	border:none;
}
.dropdown-item:hover{
	opacity: .7;
}
/*Submenú*/
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu .dropdown-menu{
	top: 0;
	left: 100%;
	margin-left: -4px;/*márgenes para acentuar quien está arriba en caso de que se superpongan left y right*/
}
.dropdown-submenu .dropdown-menu.dropdown-menu-right{
	right:100%;
	left: auto;
	margin-left: 0;/*márgenes para acentuar quien está arriba en caso de que se superpongan left y right*/
	margin-right: -8px;/*márgenes para acentuar quien está arriba en caso de que se superpongan left y right*/
}
/*MÓVIL*/
@media (max-width:767px) {
	/*General*/
	.navbar{
		justify-content: flex-end;
		padding: 0;
	}
	.navbar-toggler{
		border:none;
		padding: 14px 16px;
		font-size: 1rem;
	}
	.navbar-light .navbar-toggler-icon{
		background:none;
		width: 16px;
		height: 12px;
		border-top:2px solid currentColor;
		border-bottom:2px solid currentColor;
		position: relative;
		vertical-align: baseline;
	}
	.navbar-light .navbar-toggler-icon:after{
		content: "";
	    position: absolute;
	   	width: 100%;
	    left: 0px;
	    top: 3px;
	    border-top:2px solid currentColor;
	}
	.navbar-brand{
		margin-right: auto;/*lo acerca al navbar-toggler*/
	}
	.navbar-light .navbar-nav .nav-link{
		display: block;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #e9ecef;
		text-align: left;
	}
	.navbar-collapse{
		order:99;
		height: calc(100vh - 50px);
       	min-height: calc(100vh - 50px);
		overflow:auto;
		position: fixed;
        top:50px;
		left: 0;
        width: 280px;
        background: #fff;
        box-shadow: 4px 0 4px rgba(0,0,0,.1);    
	}
    .navbar-collapse.collapsing {
 		transform: translateX(-280px);
		transition: transform 0s;
    }
    .navbar-collapse.show {
		transform: translateX(0);
		transition: transform .3s ease-in;
    }
	.navbar-toggler.collapsed ~ .navbar-collapse{
		transition: transform .3s ease-in;
    }
    .navbar-nav .nav-item .material-icons{
		display: inline-block;
		vertical-align: middle;
		line-height: 1px;
		position: relative;
		top:-1px;
		margin-right: 6px;
	}
	.navbar-light .navbar-nav .nav-link{
		padding: 12px;
		white-space: normal;
	}
	.navbar-light .navbar-nav .nav-link[aria-expanded="true"]{
		border-bottom: none;
	}
	.navbar-light .navbar-nav .dropdown-item{
		white-space: normal;
	}
	.navbar-light .navbar-nav .dropdown-menu{
		box-shadow: none;
	}
	.navbar-light .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item{
		padding-left: 44px;
		border:none;
	}
	.navbar-light .navbar-nav .nav-item:not(:last-child) > .dropdown-menu{
		border-bottom: 1px solid #e9ecef;
	}
	.navbar-light .navbar-nav .nav-item:not(:last-child) > .dropdown-menu.show{
		padding-bottom: 8px;
	}
	.navbar-light .navbar-nav .dropdown-menu .dropdown-menu .dropdown-item{
		padding-left: 52px;
	}
	.navbar-light .navbar-nav .dropdown-menu .dropdown-menu .dropdown-item:before{
		content:"";
		display: inline-block;
		vertical-align: middle;
		width: 4px;
		height: 4px;
		border-radius: 2px;
		border:1px solid #adb5bd;
		background: #adb5bd;
		margin-right: 4px;
		position: relative;
		top:-1px;
	}
	.navbar-light .navbar-nav .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item{
		padding-left: 69px;
	}
	.navbar-light .navbar-nav .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item:before{
		background: none;
	}
    /*Menú Usuario, Idiomas y Notificaciones*/
    .aside-nav{
    	padding:4px 10px;
    	margin: 0;
    }
    .aside-nav .dropdown-toggle{
    	padding: 0;
    }
	.aside-nav .dropdown-menu{
		position: absolute;/*Si no, agranda todo el header*/
	}
	.aside-nav .name,
	.aside-nav .dropdown-toggle:after{
		display: none;
	}
	/*Submenús*/
	.nav-item .dropdown-menu{
		border-radius: 0;
		border-width: 0;
		margin:0;
	}
	.nav-item .dropdown-item{
		border-bottom: 1px solid #e9ecef;
	}
	.dropdown-submenu .dropdown-menu,
	.dropdown-submenu .dropdown-menu.dropdown-menu-right{
		margin-left: 0;
		margin-right: 0;
	}
}
/*Megamenú*/
@media (min-width:768px) {
	.navbar-expand-md .navbar-nav .megamenu > .dropdown-menu{
		position: fixed;
		top:61px;
		right: auto;
		left: 8px;
		width:calc(100% - 16px);
		display: flex;
		flex-wrap: wrap;
		padding: 8px;
		max-height: calc(100vh - 80px);
		overflow: auto;
		/*Max-Width Version*/
		max-width: 1260px;
		left: 50%;
		transform: translateX(-50%) translateZ(0) scaleY(0);
	}
	.navbar-expand-md .navbar-nav .megamenu > .dropdown-menu.show{
		transform: translateX(-50%) translateZ(0) scaleY(1);
	}
	.navbar-expand-md .navbar-nav .megamenu > .dropdown-menu:not(.show){
		z-index: -1;
		/*display: none;*/
	}
	.navbar-expand-md .navbar-nav #more .megamenu > .dropdown-menu{
		top:54px;
	}
	.navbar-expand-md .navbar-nav .megamenu > .dropdown-menu > li{
		width: 240px;
		flex-grow: 1;
		border:1px solid #e9ecef;
		border-radius: 3px;
		margin: 4px;
	}
	.megamenu > .dropdown-menu .dropdown-menu{
		display: block;
		left: auto;
		right:auto;
		position: relative;
		transform: none;
		max-height: none;
		opacity: 1;
		border-radius: 0;
		border:none;
		background: none;
		box-shadow: none;
		padding-bottom: 4px;
	}
	.megamenu > .dropdown-menu .dropdown-toggle{
		pointer-events: none;
		/*font-weight: 600;*/
	}
	.megamenu > .dropdown-menu .dropdown-toggle:after{
		display: none;
	}
	.megamenu > ul > li > .dropdown-item{
		font-size: 16px;
		font-weight: 700;
	}
	.megamenu > ul > li > .dropdown-item.dropdown-toggle{
		border-bottom:1px solid #e9ecef;
		background: #f7f7f7;
	}
	.megamenu > .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item{
		padding-left: 24px;
	}
	.megamenu > .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item:before{
		content:"";
		display: inline-block;
		vertical-align: middle;
		width: 4px;
		height: 4px;
		border-radius: 2px;
		border:1px solid #adb5bd;
		background: #adb5bd;
		margin-right: 4px;
		position: relative;
		top:-1px;
	}
	.megamenu .dropdown-submenu .dropdown-menu,
	.megamenu .dropdown-submenu .dropdown-menu.dropdown-menu-right,
	.megamenu.dropdown-submenu .dropdown-menu,
	.megamenu.dropdown-submenu .dropdown-menu.dropdown-menu-right{
		margin-left: 0;
		margin-right: 0;
	}
}
/*Ajustes estilos header*/
@media (min-width:768px) {
	.navbar-light .navbar-nav .nav-item{
		border-left:1px solid #e9ecef;
	}
	.navbar-light .navbar-nav .nav-item:last-child{
		border-right:1px solid #e9ecef;
	}
	.navbar-light .navbar-nav .nav-link{
		padding-bottom: 4px;
		border-bottom:4px solid transparent;
	}
	.navbar-brand{
		margin-right: 32px;
	}
	#mainNav + .aside-nav{
		margin-left: 32px;
	}
	.aside-nav:nth-last-child(3){
		margin-right: 6px;
	}
	.navbar-light .navbar-nav .nav-link .material-icons{
		transition: all ease-in .2s;
	}
	.navbar-light .navbar-nav .nav-link:hover .material-icons{
		/*transform: translateY(-4px);*/
		animation:  bounce .3s;
	}
}
.navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .dropdown-item,
.navbar-light .navbar-nav.aside-nav .dropdown-toggle{
	transition: all .3s;
}
.navbar-brand:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .dropdown-item:hover,
.navbar-light .navbar-nav.aside-nav .dropdown-toggle:hover,
.navbar-light .navbar-nav .nav-link.active:hover,
.navbar-light .navbar-nav .dropdown-item.active:hover,
.navbar-light .navbar-nav.aside-nav .dropdown-toggle.active:hover{
	opacity: .6;
}
/*Cookies*/
#cookies{
	position: fixed;
	left: 0;
	bottom:0;
	width: 100%;
	background:rgba(33,37,41,.9);
	color:#fff;
	font-size: 14px;
	padding: 15px;
	text-align: center;
	z-index: 1060;
	box-shadow: 0 -4px 4px rgba(0,0,0,.1)
}
#cookies > div{
	display: inline-block;
	text-align: left;
}
#cookies > div > div{
	display: inline-block;
	text-align: left;
}
#cookies h4{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}
#cookies p{
	display: inline-block;
	padding-left: 0;
	margin: 0;
	margin-right: 8px;
}
#cookies ul{
	display: inline-block;
	padding: 0;
	margin: 0;
	margin-top: 4px;
	text-align: right;
	vertical-align: bottom;
	float: right;
}
#cookies li{
	display: inline-block;
	padding: 0;
	margin: 0;
	margin-top: 4px;
}
/*Animaciones de carga de página*/
@keyframes page{
  0% {
  	transform: scale(.5);
  	opacity:0;
  }
  100% {
  	transform: scale(1);
  	opacity:1;
  }
}
#layout.animate > .navbar{
	opacity: 0;
	animation: page ease-in-out .4s .1s forwards;
	transform-origin: center top;
}
#layout.animate .site-content{
	opacity: 0;
	animation: page ease-in-out .4s .2s forwards;
	transform-origin: center top;
}
#layout.animate #footer{
	opacity: 0;
	animation: page ease-in-out .4s .4s forwards;
	transform-origin: center bottom;
}
/*Ajustes para permitir centrar contenido*/
html{
	scroll-behavior: smooth;
}
html,
body,
#layout{
	height: 100%;
}
.center-wrapper{
	display: flex;
	width: 100%;
	min-height:100%;
	flex-direction:column;
}
.center-wrapper > *{
	width: 100%;
	align-self: flex-start;
}
.center-wrapper > .center-contents{
	align-self: center;
	margin: 0 auto;
	flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
}
.center-wrapper > .center-contents > .center-elements{
	width: 100%;
}
.center-wrapper > .center-contents > .center-elements.auto-width{
	width: auto;
	max-width: 100%;
}
/*Varios*/
#layout > .navbar{
	border-right:1px solid transparent;/*Esto evita un extraño bug que hace que si sobra espacio, todo se mete dentro de #more*/
}
/*LOGIN (etc)*/
.container-fluid.site-content.access{
	padding: 16px;
}
#footer.bg-dark{
	color: #fff;
	border-color:#495057;
}
#footer.bg-dark a{
	color:#fff;
}
.container-fluid.site-content.access h1{
	font-size: 1rem;
	padding: 0;
	margin: 0;
}
.access-logo{
	max-width: 120px;
	max-height: 80px;
	margin-bottom: 64px;
}
.access-form{
	width:calc(100vw - 80px);
	max-width: 320px;
	padding: 16px;
}
.container-fluid.site-content.access.bg-dark .shadow {
    box-shadow: 0 .2rem 1rem rgba(0,0,0,.7)!important;
}
.access-form .form-control:focus {
	position: relative;
	z-index: 2;
}
.access-form input[type="email"]:not(:last-of-type){
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.access-form input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.btn-sm-txt{
	font-size: 14px;
	padding: 8px .75rem
}
@media (max-width:575px){
	.access-logo{
		margin-bottom: 40px;
	}
	.access-form{
		padding: 0;
	}
}
@keyframes fall{
  0% {
  	transform: scale(1.5);
  	opacity:0;
  }
  100% {
  	transform: scale(1);
  	opacity:1;
  }
}
.container-fluid.site-content.access .card.animate{
	opacity: 0;
	animation: fall ease-in-out .4s .1s forwards;
}
/*PÚBLICO (textos legales)*/
.navbar.navbar-light.public{
	padding: 6px 8px;
}
.navbar.navbar-light.public + .site-content{
    padding-top: 64px
    background:none;
}
/*ELEMENTOS*/
/*Ajustes Generales*/
.shadow {
    box-shadow: 0 .2rem 1rem rgba(0,0,0,.1)!important; /*Sombra base Bootstrap más leve*/
}
.card.shadow{
	border:none;
}
.card-header{
	background-color: #f3f5f7;
}
.modal{
	padding:0 !important;/*Elimina el que le mete por js para el scroll, que da porblemas al redimensiona. Parece que si él no da problemas.*/
}
.modal-content{
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
	border:1px solid rgba(0,0,0,.1);
}
.modal-header .close{
	transition: opacity .3s;
}
.modal.animated{
  transform: scale(0);
  opacity: 0;
  transition: all .3s;
}

.modal.animated.show{
  opacity: 1;
  transform: scale(1);
}
.alert > h6{
	margin-top: 4px;
	font-weight: 600;
}
.alert > h6 > .material-icons{
	vertical-align: text-bottom;
	position: relative;
	top:1px;
}
.alert-lg{
	text-align: center;
	padding: 40px;
}
.alert-lg > h6 {
	font-size: 1.5rem;
}
.alert-lg > h6 > .material-icons{
	display: block;
	font-size: 48px;
	margin-top: -8px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-weight: 600;
}
.spaced-texts .h1,.spaced-texts .h2,.spaced-texts .h3,.spaced-texts .h4,.spaced-texts .h5,.spaced-texts .h6,
.spaced-texts h1,.spaced-texts h2,.spaced-texts h3,.spaced-texts h4,.spaced-texts h5,.spaced-texts h6,
.spaced-texts p{
	margin-bottom: 1.5rem;
}
.page-link{
	transition: background .3s;
}
nav[aria-label="breadcrumb"]{
	font-size: 14px;
	display: flex;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .25rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumb{
	margin:0;
	padding: 8px 1rem;
	background: none;
	flex-grow: 1;
	color: #6c757d;
}
.breadcrumb-item a{
	color:#6c757d;
}
.breadcrumb-item.active{
	font-weight: 600;
}
nav[aria-label="breadcrumb"] div{
	margin-top: -4px;
}
nav[aria-label="breadcrumb"] .btn{
	margin-top: 4px;
}
.btn > .material-icons{
	vertical-align:middle;
	line-height: 0;
	position: relative;
	top:-2px;
	left: -2px;
}
label{
	margin-bottom: .25em;
}
.small, small{
	line-height: 1.3;	
}
small{
	display: inline-block;
}
p.small{
	margin-bottom: .5rem;
}
.text-medium{
	font-size: 14px;
}
dl{
	margin-bottom: 1.5rem;
}
dl:last-child,
dd:last-child{
	margin-bottom:0;
}
dd{
	margin-bottom: 1rem;
}
.spaced-list li:not(:last-child){
	margin-bottom: .5rem;
}
.userPic{
	width: 22px;
	height: 22px;
	background-size: cover;
	border-radius: 50%;
	display: inline-block;
}
.userPic.sm{
	width: 48px;
	height: 48px;
}
.userPic.md{
	width: 128px;
	height: 128px;
}
code{
	color:inherit;
	display: block;
	font-size: 12px;
	background: #f3f5f7;
	padding: 16px;
	border:1px dashed #ced4da;
	border-radius: .25rem;
	color:#6c757d;
	margin-bottom:1rem;
	position: relative;
	padding-left: 32px;
}
code:before{
	content:"";
	background: #ced4da;
	width: 4px;
	display: block;
	position: absolute;
	left: 20px;
	top:20px;
	bottom:20px;
}
code.inline{
	display: inline-block;
	padding: 0 3px;
	margin: 0 3px;
}
code.inline:before{
	display: none;
}
code .material-icons{
	vertical-align: middle;
	position: relative;
	top:-1px;
}
.basicHover[data-toggle="modal" ]{
	cursor: pointer;
	transition: opacity .3s;
}
.basicHover[data-toggle="modal"]:hover{
	opacity: .8;
}
.border-soft{
	border:1px solid rgba(0,0,0,.15);
}
.icon-btn{
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	padding: 8px;
	margin: -8px 0;
	cursor: pointer;
	transition: opacity .3s;
}
.icon-btn:hover{
	opacity: .8;
}
.icon-btn:first-child,
.dropdown:first-child .icon-btn{
	margin-left: -8px;
}
.icon-btn:last-child,
.dropdown:last-child .icon-btn{
	margin-right: -8px;
}
.swatch{
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin: 8px;
	border-radius: 2px;
	display: inline-block;
	position: relative;
	top:-1px;
}
/*Tablas*/
.table-responsive{
	padding:4px;/*Para que se vea el focus de los inputs*/
	margin: -4px;/*para compensar el padding*/
    width: calc(100% + 8px);/*para compensar el margin*/
}
.table-responsive.tight{
	padding:0;
	margin: 0 -1.25rem;
    width: calc(100% + 2.5rem);
}
div.table-responsive.tight>div.dataTables_wrapper>div.row:last-child{
	margin:14px 1.25rem 0;
}
div.dataTables_wrapper div.dataTables_info{
	padding-top: 9px;
}
.table{
	border-bottom:1px solid #e9ecef;
	font-size: 14px;
}
.table td, .table th {
    border-top-color:#e9ecef;
}
.table thead th{
	border-bottom:none;
}
.table.dataTable thead th:not(:last-child),
.table.dataTable tbody td:not(:last-child),
.table.dataTable tbody th:not(:last-child){
	border-right: 1px solid #e9ecef;
}
.hide-default-filters .dataTables_wrapper > .row:first-child{
	display: none;
}
.table-striped tbody tr:nth-of-type(odd){
	background-color: #f3f5f7;
}
.table tr{
	transition: box-shadow ease-out .2s;
}
.table tr:hover{
	box-shadow: inset 0 0 9px rgba(33,37,41,.16);
}
.table tr:nth-of-type(odd):hover{
	box-shadow: inset 0 0 9px rgba(33,37,41,.08);
}
/* table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
    content:"\f106";
    font:normal normal normal 16px/1 FontAwesome;
    right: .8em;
    bottom:1.2em;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after{
    content:"\f107";
    font:normal normal normal 16px/1 FontAwesome;
    right: .8em;
    bottom:.7em;
} */
@keyframes fadeIn{
	from {opacity:0;}
	to {opacity:1;}
}
tr{
	animation: fadeIn .3s;/*Para cuando se pagina*/
}
/*Ajuste para paginación fuera scroll*/
.table-responsive,
.table-responsive.tight{
	margin-bottom: 44px;
}
div.table-responsive.tight>div.dataTables_wrapper>div.row:last-child{
	position: absolute;
	bottom: 15px;
	left: 0;
	width: calc(100% - 2.5rem);
}
@media (max-width:767px){
	.table-responsive,
	.table-responsive.tight{
		margin-bottom: 66px;
	}
	div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child,
	div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{
		padding: 0;
	}
}
.table-responsive .dropdown{
	display: inline-block;
}
/*Forms*/
.custom-select {
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 4L0 2h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px
}
*::-webkit-search-cancel-button{
    -webkit-appearance: none;
	margin-right: -10px;
    height: 30px;
    width: 30px;
  	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.71' height='6.71' viewBox='0 0 6.71 6.71'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23212529;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ESin título-1%3C/title%3E%3Cline class='cls-1' x1='0.35' y1='0.35' x2='6.35' y2='6.35'/%3E%3Cline class='cls-1' x1='0.35' y1='6.35' x2='6.35' y2='0.35'/%3E%3C/svg%3E") no-repeat center center;
}
.custom-checkbox > .custom-control-input,/*Para que los custom de Bootstrap pueden funcionar sin id*/
.custom-radio > .custom-control-input,
.custom-switch > .custom-control-input{
	position: absolute;
	left: 0;
	top:0;
	min-width: 24px;
	min-height: 24px;
	z-index: 1;
}
/**/
.custom-file-label{
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 90px;
    font-size: 1rem;
}
.custom-file-label::before{
	content:attr(data-browse);
	color: #6c757d;
}
.custom-file-input~.custom-file-label[data-browse]::after{
	font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    content:"search";
    height: 38px;
    width: 38px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
.custom-file-label + .clear{
	background: #fff;
	position: absolute;
	right:40px;
	top:1px;
	z-index: 9;
	font-size: 0;
	height: 36px;
	width: 38px;
	text-align: center;
}
.custom-file-label + .clear:before{
	font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 38px;
    content:"close";
    position: relative;
    top:-1px;
}
/**/
.custom-file.preview{
	height: 120px;
}
.custom-file.preview .custom-file-input,
.custom-file.preview .custom-file-label{
	height: 100%;
}
.custom-file.preview .custom-file-label{
	background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    padding-right:.75rem;
}
.custom-file.preview .custom-file-label:before{
	padding: 12px;
    color: #6c757d;
    display: block;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    white-space: normal;
    text-align: center;
}
.custom-file.preview .custom-file-input~.custom-file-label[data-browse]::after{
    display: none;
}
.custom-file.preview .custom-file-label + .clear{
	right: 1px;
}
/**/
.custom-file-label + .clear{
	display: none;
}
.custom-file-label.selected + .clear{
	display: block;
}
.custom-file-label.selected::before,
.custom-file.preview .custom-file-label.selected::before{
	display: none;
}
/**/
.dataTable input,
.dataTable .btn{
	min-width: 120px;
	margin: -7px 0;
}
.form-group{
	position: relative;/*para invalid-tooltip*/
}
textarea.form-control{
	resize: none;
	min-height: 120px;
}
/*COMPONENTES*/
/*DateTimePicker*/
.bootstrap-datetimepicker-widget.dropdown-menu{
	width: 276px;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.1);
}
.bootstrap-datetimepicker-widget table{
	table-layout: fixed;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table td.day{
	width: 38px;
	height: 38px;
	padding-top: 2px;
	font-size: 14px;
}
.bootstrap-datetimepicker-widget table td.day{
	border: 1px solid #e9ecef; border:none;
	border-radius: 0;
}
.bootstrap-datetimepicker-widget table th.picker-switch{
	width: auto;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active{
    text-shadow:none;
}
.bootstrap-datetimepicker-widget .datepicker-months,
.bootstrap-datetimepicker-widget .datepicker-years,
.bootstrap-datetimepicker-widget .datepicker-decades{
	/*margin-bottom: 16px;*/
}
.bootstrap-datetimepicker-widget .datepicker-decades table td{
	line-height: 1;
	padding-top: 16px;
}
.bootstrap-datetimepicker-widget .datepicker-decades .decade{
	word-spacing: 30000px;
	line-height: 1!important;
	padding-top: 6px;
}
.dataTables_wrapper .table-striped .datepicker thead tr:nth-of-type(odd),
.dataTables_wrapper .table-striped .datepicker tbody tr:nth-of-type(odd),
.dataTables_wrapper .table-striped thead  .timepickertr:nth-of-type(odd),
.dataTables_wrapper .table-striped tbody .timepicker tr:nth-of-type(odd){
	background: none;
}
.dataTables_wrapper .table.dataTable .datepicker thead th:not(:last-child),
.dataTables_wrapper .table.dataTable .datepicker tbody td:not(:last-child),
.table.dataTable .datepicker tbody th:not(:last-child),
.dataTables_wrapper .table.dataTable thead  .timepickerth:not(:last-child),
.dataTables_wrapper .table.dataTable tbody .timepicker td:not(:last-child),
.table.dataTable tbody .timepicker th:not(:last-child){
	border:none;
}
.dataTables_wrapper .table .datepicker td,
.dataTables_wrapper .table .datepicker th,
.dataTables_wrapper .table .timepicker td,
.dataTables_wrapper .table .timepicker th{
    padding: 0;
    vertical-align:middle;
    border:none;
}
.dataTables_wrapper .table .datepicker tr:hover,
.dataTables_wrapper .table .datepicker tr:nth-of-type(odd):hover,
.dataTables_wrapper .table .timepicker tr:hover,
.dataTables_wrapper .table .timepicker tr:nth-of-type(odd):hover{
	box-shadow: none;
}
.dataTables_wrapper .table .datepicker,
.dataTables_wrapper .table .timepicker{
	border-collapse: collapse;
}
.datetimePicker + * .picker-switch.accordion-toggle{
	display: none;
}
.datePicker.inline,
.timePicker.inline,
.datetimePicker.inline{
	display: none;
}
.datePicker.inline + .bootstrap-datetimepicker-widget,
.timePicker.inline + .bootstrap-datetimepicker-widget,
.datetimePicker.inline + .bootstrap-datetimepicker-widget{
	border:1px solid #ced4da;
	border-radius: .25rem;
	padding: 16px;
}

.inline + .bootstrap-datetimepicker-widget table th,
.inline + .bootstrap-datetimepicker-widget table td,
.inline + .bootstrap-datetimepicker-widget table td.day{
	width: auto;
}
.datetimePicker + .bootstrap-datetimepicker-widget .collapse:last-child{
	border-top:1px solid rgba(0,0,0,.1);
	margin-top: 24px;
}
.datetimePicker.inline + .bootstrap-datetimepicker-widget .collapse:last-child{
	margin-bottom: -12px;
}
.bootstrap-datetimepicker-widget .datepicker-decades table td span:not(.decade){
	display: none;
}
.bootstrap-datetimepicker-widget table td.today:before {
	display: none;
}
.bootstrap-datetimepicker-widget table td.today{
    box-shadow: inset 0 0 0 1px rgb(0,0,0,.1);
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{
	display: none;
}
@media (min-width:768px) {
	.datetimePicker + .bootstrap-datetimepicker-widget.dropdown-menu{
		width: 600px;
	}
	.datePicker + .bootstrap-datetimepicker-widget li:not(.picker-switch) table,
	.datetimePicker + .bootstrap-datetimepicker-widget li:not(.picker-switch) table{
		height: 320px;
	}
	.datetimePicker + .bootstrap-datetimepicker-widget .collapse{
		display: table-cell;
		vertical-align: middle;
	}
	.datetimePicker + .bootstrap-datetimepicker-widget .collapse:last-child{
		border-top:none;
		border-left:1px solid rgba(0,0,0,.1);
		margin-top: 0;
		margin-bottom:0;
		padding-left: 16px;
	}
	.datetimePicker + .bootstrap-datetimepicker-widget .collapse:first-child{
		padding-right: 16px;
	}
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover{
	color:#adb5bd;
}
/*CropperJS*/
.cropperArea{
	max-height: 400px;
	border-radius: .25rem;
	overflow: hidden;
}
.cropperTools{
	float:right;
	position: relative;
	top:-48px;
	right: 8px;
	background:#fff;
	border-radius: .25rem;
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
	line-height: 0;
	font-size: 0;
}
.cropperTools > *{
	display: inline-block;
	padding: 8px;
	cursor: pointer;
	transition: opacity .3s;
}
.cropperTools > *:hover{
	opacity: .8;
}
.cropperTools > *:not(:last-child){
	border-right: 1px solid #e9ecef;
}
.cropperTools > *[class*="zoom"]{
	position: relative;
	left: 1px;
}
.modal-cropper{
	display: block!important;/*Porque si está en none, no calcula bien el tamaño del cropperjs*/
	z-index: -99999;
}
.modal-cropper.show{
	z-index: 1050;
}
.cropperPicResult{/*Todo esto se usa solo en user-form.php, que ya está en desarrollo. En nuevas páginas se hará de otra forma*/
	background-size: cover;
	width: 200px;
	height: 200px;
}
.cropperPicResult[data-toggle="modal" ]{
	cursor: pointer;
	transition: opacity .3s;
}
.cropperPicResult[data-toggle="modal"]:hover{
	opacity: .8;
}
.text-center .cropperPicResult{
	margin: 0 auto;
}
/*Dropzone*/
.dz-hidden-input{
	display: none;/*Esto es un input hidden, que oculto porque ocupa espacio y crea scroll indeseado en toda la página.*/
}
.dropzone .dz-preview.dz-error .dz-error-message{
	display: none;/*Oculto el mensaje de error, porque es muy grande, causa scroll indeseado en toda la página y no da info útil para el ususario*/
}
.dropzone{
	position: relative;
	padding: .5rem;
	border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    min-height: 202px;
}
.dropzone.fixedHeight{
	height: 202px;
	overflow: auto;
}
.dropzone:active {
    border-color: rgba(0,183,255,.6);
    box-shadow: 0 0 0 0.2rem rgba(0,183,255,.3);
}
.dropzone .dz-message{
	color:#6c757d;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	margin: 0;
	padding: .375rem;
	width: 100%;
	width: calc(100% - 1rem);
	text-align: center;
}
.dropzone .dz-preview {
    margin: .1875rem;
    min-height: 60px;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    border-radius: .15rem;
}
.dropzone .dz-preview .dz-image {
    border-radius: .15rem;
    border:none;
    background: none;
    width:178px;
    height: auto;
}
.dropzone .dz-preview .dz-image img{
	margin: 0;
	width:100%;
	height: auto;
	
}
.dropzone .dz-preview .dz-image img:hover´{
	transition: transform .3s;
}
.dropzone .dz-preview .dz-remove{
	position: absolute;
	bottom:1px;
	right:1px;
	z-index: 30;
	font-size:0;
	width: 40px;
	height:40px;
	color:#212529; 
}
.dropzone .dz-preview .dz-remove:hover{
	text-decoration: none;
}
.dropzone .dz-preview .dz-remove::after{
	font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    content:"close";
    background: #fff;
    padding: 2px;
    border-radius: 14px;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    position: relative;
    top:8px;
}
.dropzone .dz-preview .dz-details{
	background: rgba(255,255,255,.5);
	border:1px solid rgba(0,0,0,.1);
	height: 100%;
	border-radius: .15rem;
	padding:8px;
	text-align: left;
}
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
    border-radius: 2px;
    background: rgba(255,255,255,.7);
    font-size: 12px;
    padding: 0 3px;
}
.dropzone .dz-preview .dz-details .dz-size{
	margin-bottom: 2px;
	font-size: 14px;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span,
.dropzone .dz-preview .dz-details .dz-size:hover span{
	box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span,
.dropzone .dz-preview .dz-details .dz-size:not(:hover) span,
.dropzone .dz-preview .dz-details .dz-filename:hover span,
.dropzone .dz-preview .dz-details .dz-size:hover span{
	border:none;
}
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark{
    margin-left: -20px;
    margin-top: -20px;
    line-height: 0;
    width:40px;
    height:40px;
    background:#fff;
    border-radius: 20px;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.dropzone .dz-preview .dz-success-mark::after,
.dropzone .dz-preview .dz-error-mark::after{
	font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    content:"error";
    color: #dc3545;
    position: absolute;
    left: -4px;
    top:-4px;
}
.dropzone .dz-preview .dz-success-mark::after{
	content:"check_circle";
	color: #28a745;
}
.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview.dz-error .dz-error-mark svg{
	display: none;
}
@media (max-width:575px){
	.dropzone .dz-preview .dz-image {
	    width:96px;
	}
}
.dropzone.is-invalid{
	border-color: #dc3545;
}
.dropzone.is-invalid:active {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220,63,59,.25);
}
/*CKEditor (WYSIWYG)*/
/*Muchos !important, porque el plug-in coloca los estilos mediante <style al final del todo>*/
.ck.ck-toolbar,
.ck.ck-editor__editable_inline{
	border-color:#ced4da!important;
}
.ck.ck-toolbar{
	height: 38px;
}
.ck.ck-editor__editable_inline{
	min-height: 164px;
	transition: box-shadow .3s;
}
.fixedHeight + .ck-editor .ck.ck-editor__editable_inline{
	max-height: 164px;
	overflow: auto;
}
.ck.ck-editor__editable_inline:focus,
.ck.ck-input-text:focus{
	border-color: rgba(0,183,255,.6)!important;
    box-shadow: 0 0 0 0.2rem rgba(0,183,255,.3)!important;
    outline: none;
}
.ck.ck-button:active,
.ck.ck-button:focus,
 a.ck.ck-button:active,
 a.ck.ck-button:focus{
    outline: none;
    border-color: transparent!important;
    box-shadow: none!important;
}
.ck.ck-button:not(.ck-disabled):hover,
a.ck.ck-button:not(.ck-disabled):hover,
.ck.ck-button.ck-on,
a.ck.ck-button.ck-on{
	background: #e9ecef !important;
}
.ck.ck-button.ck-button-save,
a.ck.ck-button.ck-button-save{
	color:#28a745!important;
}
.ck.ck-button.ck-button-cancel,
a.ck.ck-button.ck-button-cancel{
	color:#dc3545!important;
}
.ck-body-wrapper{
	position: fixed;/*Soluciona un bug que hace que si el "añadir link" está abierto y haces scroll, añade un segundo scroll a ala página*/
}
.is-invalid + .ck .ck.ck-editor__editable_inline,
.is-invalid + .ck .ck.ck-input-text,
.is-invalid + .ck .ck.ck-toolbar{
	border-color: #dc3545!important;
}
.is-invalid + .ck .ck.ck-editor__editable_inline:focus,
.is-invalid + .ck .ck.ck-input-text:focus{
	border-color: #dc3545!important;
    box-shadow: 0 0 0 0.2rem rgba(220,63,59,.25)!important;
}
/*Select2*/
.select2-dropdown {
	z-index: 1 !important
}
.select2-container{
	font-size: 1rem;
}
.select2-container--default .select2-selection--single {
    border-color: #ced4da;
    border-radius: .25rem;
    height: calc(1.5em + .75rem + 2px);
    outline: none;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 4L0 2h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    transition: all .3s;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-container--default.select2-container--open .select2-selection--single{
	border-color: rgba(0,183,255,.6)!important;
    box-shadow: 0 0 0 0.2rem rgba(0,183,255,.3)!important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
	padding: .375rem 1.75rem .375rem .75rem;
	line-height: 1.5;
}
.select2-search--dropdown{
	padding: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
	border:none;
	outline: none;
	padding: .375rem .75rem;
	border-bottom: 1px solid #ced4da;
}
.select2-container--open .select2-dropdown--below{
	border-color: #ced4da;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	display: none;
}
.select2-container--default .select2-results__option--selected {
    background-color: #f3f5f7;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
	background-color: rgb(0,183,255);
}
.select2-results__option.select2-results__message{
  color:#6c757d;
  font-style: italic;
  font-size: 14px;
}
@keyframes dropdown{
  0% {transform: scaleY(1);opacity:0;}/*Porque si no, pierde la posición del scroll en select2*/
  1% {transform: scaleY(0);opacity:0;}
  100% {transform: scaleY(1);opacity:1;}
}
.select2-dropdown--below{
	animation:  dropdown .3s;
	transform-origin:left top;
}
/*FullCalendar*/
.fc{
	font-size: 14px;
}
.fc .fc-timegrid-axis-cushion{max-width: none;}
.fc-toolbar-chunk:nth-child(2){
	flex-grow: 1;
	text-align: center;
	display: flex;
	align-items: center;
    justify-content: center;
}
.fc .fc-toolbar-title{
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	flex-grow: 1;
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.25rem;
}
.fc .fc-h-event .fc-event-title{
	text-overflow: ellipsis;
}
.fc .fc-direction-ltr .fc-toolbar>*>:not(:first-child) {
    margin-left: 4px;
}
.fc .fc-toolbar.fc-header-toolbar button{
	color:inherit!important;
	background: none;
	border:none;
}
.fc .fc-toolbar.fc-header-toolbar button:hover,
.fc .fc-toolbar.fc-header-toolbar button:focus{
	box-shadow:none!important;
	background: none !important;
}
.fc .fc-toolbar.fc-header-toolbar button:hover{
	background: #eee!important;
}
.fc .fc-toolbar.fc-header-toolbar .fa-chevron-left:before{
	content:"\f104";
}
.fc .fc-toolbar.fc-header-toolbar .fa-chevron-right:before{
	content:"\f105";
}
.fc a:hover{
	text-decoration: none;
}
.fc .fc-popover-close{
	 font-family: inherit;
	 font-size: 1.5rem;
	 font-weight: 700;
}
.fc .fc-popover-close:before{
    content:"×";
    line-height: 18px;
    vertical-align: top;
    margin-right: 2px;
}
.fc-daygrid-event,
.fc-v-event{
	border:none !important;
	padding: 2px 4px;
	margin-top:2px;
	margin-bottom: 2px;
}

.fc .fc-list-event.fc-event-forced-url:hover a{
	text-decoration: none;
}
.fc .table-active{
	background-color: #f3f5f7;
}
.fc .fc-list-empty{
	background-color: #f3f5f7;
	color:#6c757d;
}
.fc .fc-list-day{
	font-size: 12px;
}
.fc .fc-popover{
	box-shadow: 0 2px 4px rgb(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.1);
    animation:  fall .3s;
}
/*Charts.js*/
.chart-container{
	width: 100%;
	display: flex;
	align-items: center;/*vertical (bottom sería flex-end)*/
}
.chart-container > *{
	position: relative;
	overflow: visible;
}
.chart-container > *:first-child{
	flex-grow: 1;
	width: 1px;
	min-width: 50%;
	min-width: 120px;
}
.chart-container > .legend{
	padding-left: 24px;
	max-width: 240px;
}
#chartjs-tooltip{
	transition: all .3s;
	background: #fff;
	border-radius: 3px;
	box-shadow:0 2px 4px rgb(0 0 0 / 20%);
	position: fixed!important;
}
.legend span,
#chartjs-tooltip span{
	font-size:12px;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.3;
}
.legend span:first-child,
#chartjs-tooltip span:first-child{
	display: inline-block;
	vertical-align: middle;
	width: 16px; max-width: 16px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    position: relative;
    top:-1px;
}
.legend span.label,
#chartjs-tooltip span.label{
	font-weight: 600;
}
.legend span.value,
#chartjs-tooltip span.value{
	
}
.legend span.percent,
#chartjs-tooltip span.percent{	
	white-space: nowrap;
	color:#6c757d;
}
.legend ul{
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}
.legend li{
	display: table-row;
	margin: 0;
	padding: 0;
}
/*
.legend li:hover{
	background: #e9ecef;
}
*/
.legend span:first-child{
	top:0;
}
.legend span:not(:first-child){
	display: table-cell;
	width: 100%;
	padding-bottom: 6px;
}
.legend span.value,
.legend span.percent{
	text-align: right;
	padding-left: 12px;
}
#chartjs-tooltip thead{
	display: none;
}
.chart-container.no-legend .legend{
	display: none;
}
.chart-container.bottom-legend,
.chart-container.bottom-legend > *:nth-child(n){
	display: block;
	width: 100%;
}
.chart-container.bottom-legend > .legend{
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.chart-container.bottom-legend > .legend ul{
	display: block;
}
.chart-container.bottom-legend > .legend li,
.chart-container.bottom-legend > .legend span{
	display: inline-block;
}

.chart-container.bottom-legend > .legend li{
	margin-right: 16px;
	white-space: nowrap;
}
.chart-container.bottom-legend > .legend span:not(:first-child){
	width: auto;
}
.chart-container.bottom-legend > .legend span.value{
	padding-left: 4px;
}
.chart-container.bottom-legend > .legend span.percent {
    padding-left: 0;
}
.chart-container .legend > .no-colors > li > span:first-child,
#chartjs-tooltip.no-colors td > span:first-child{
	display: none;
}
@media (max-width:767px){
	.chart-container,
	.chart-container > *:nth-child(n){
		display: block;
		width: 100%;
	}
	.chart-container > .legend{
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin-top: 16px;
	}
	.chart-container > .legend ul{
		display: block;
	}
	.chart-container > .legend li,
	.chart-container > .legend span{
		display: inline-block;
		vertical-align:middle;	
	}
	.chart-container > .legend li{
		margin-right: 16px;
		white-space: nowrap;
	}
	.chart-container > .legend span:first-child{
		top:-2px;
	}
	.chart-container > .legend span:not(:first-child){
		width: auto;
	}
	.chart-container > .legend span.label{
		padding-left: 4px;
		max-width: 100px;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.chart-container > .legend span.value{
		padding-left: 4px;
	}
	.chart-container > .legend span.percent {
	    padding-left: 0;
	}
}
/*Imágenes tipo*/
.pic{
	display: inline-block;
	width: 100%;
	padding-top: 100%;
	background-position: center center;
	background-size: cover;
	max-width: 100%;
}
/**/
.pic.r_4_3{
	padding-top: 75%;
}
.pic.r_3_2{
	padding-top: 66.66%;
}
.pic.r_16_9{
	padding-top: 56.25%;
}
.pic.r_2_1{
	padding-top: 50%;
}
/**/
.pic.r_3_4{
	padding-top: 133.33%;
}
.pic.r_2_3{
	padding-top: 150%;
}
.pic.r_9_16{
	padding-top: 177.78%;
}
.pic.r_1_2{
	padding-top: 200%;
}
/**/
/*
- Para darles un ancho fijo, se meten en otro div con max-width
- Si se quiere limitar por altura, también tiene que ser por el ancho, así que se calcula esa anchura en base al aspect ratio de la clase
(Ej: si se quiere que .pic.r_4_3 tenga un alto de 100: max-width:133.33px, es decir: 100/3*4)
*/
/**/
.pic.circle{
	border-radius: 50%;
}
/**/
.aside-nav .pic{/*Lo repito aquí porque ya se está trabajando con la estructura y me contradice la herencia*/
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 11px;
	background-size: cover;
	margin:2px;
	line-height: 40px;
	vertical-align: middle;
	padding-top: 0;/*esto es añadido*/
}