body{ overflow-y: hidden; }

/* esitlos para sobreponer el header sobre todo */
header{ 
	z-index: 9; 
	position: relative; 
}

/* cambiamos los tamaños de la cabecera y sus elementos */
header, header .row div{ 
	z-index: 9; 
	position: relative; 
	height: 10vh; 
}

/* estilos para las imagenes del header */
header img{ height: 40px !important; }

/* estilos para las opciones del navegador */
header a.option-nav{ 
	-ms-align-items: center; 
	align-items: center; 
	color: #fff;
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	height: 100%; 
	justify-content: center; 
	width: 50px; 
}

header span.name_bussiness{ color: #fff; margin-left: 10px; }

/* estilo para los iconos de las opciones */
header a.option-nav i{ 
	color: #fff; 
	cursor: pointer; 
	font-size: 24px; 
}

/* estilos para el contenedor la imagen redonda del header */
header a.link-card-user{ 
	-ms-align-items: center; 
	align-items: center; 
	color: #fff;
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	height: 100%; 
	padding: 0 10px; 
}

/* estilos para el link de los datos del usuario*/
header a.link-card-user:hover, header a.link-card-user:active, header a.link-card-user:focus, header a.option-nav:hover, header a.option-nav:active, header a.option-nav:focus{ 
	background-color: #0B7AE6; 
}

/* estilos para el contenedor de la imagen redonda del header */
header a.link-card-user picture.content-img-redonda{ 
	-ms-align-items: center;
	align-items: center; 
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	border-radius: 50%;  
	height: 45px !important; 
	overflow: hidden; 
	width: 45px !important; 
}

/* estilos para la imagen redonda del header */
header a.link-card-user picture.content-img-redonda img.img-redonda{ 
	border-radius: 50%; 
	height: 45px !important; 
	-webkit-transition-duration: .5s; 
	transition-duration: .5s; 
}

/* estilos para de transición la imagen redonda del header */
header a.link-card-user:focus picture.content-img-redonda img.img-redonda, header a.link-card-user:hover picture.content-img-redonda img.img-redonda, header a.link-card-user:active picture.content-img-redonda img.img-redonda{ transform: scale(1.2); }

/* estilos de la card del usuario*/
.card-user{ 
	background-color: white;
	box-shadow: -1px 3px 3px #444;
	display: none;
	height: 200px; 
	max-width: 320px; 
	position: absolute; 
	right: 0;
	top: 10vh;   
	width: 100%; 
	z-index: 9; 
}

/* estilos para la imagen de la card del usuario*/
.card-user .card-image{
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	height: 150px; 
	width: 100%;
}

/* estilos para los fondos del contenido principal*/
.card-user .card-image.v1{ background-image: url(../../img/profile/v1.png); }
.card-user .card-image.v2{ background-image: url(../../img/profile/v2.png); }
.card-user .card-image.v3{ background-image: url(../../img/profile/v3.png); }
.card-user .card-image.v4{ background-image: url(../../img/profile/v4.png); }
.card-user .card-image.v5{ background-image: url(../../img/profile/v5.png); }
.card-user .card-image.v6{ background-image: url(../../img/profile/v6.png); }

/* estilos para el nombre del usuario */
.card-user .card-image p{ bottom: 60px; color: #fff; font-size: 18px; left: 10px; text-shadow: 2px 2px 2px #000; position: absolute; }

/* estilos para el rol del usuario */
.card-user .card-image small{ bottom: 55px; color: #fff; left: 10px; text-shadow: 2px 2px 2px #000; position: absolute; }

/* estilos para el contenedor de la card de datos de usuario */
.card-user .container-fluid{ height: 50px; }

/* estilos para los separadores del contenedor*/

.card-user .container-fluid .row, .card-user .container-fluid .row .col-6 { height: 100%; }

/* estilos para los botones */
.card-user .container-fluid .row .col-6 .card-btn{ border-radius: 3px; color: #666; padding: 5px 0; text-align: center; width: 100%; }

/* estilos para las transiciones de los botones */
.card-user .container-fluid .row .col-6 .card-btn:hover{ background-color: #64b5f6; color: #fff; }

/* estilos para el contenedor del sidenav */
.content-nav{ 
	background: rgba(0, 0, 0, 0.5); 
	opacity: 0; 
	left: 0%; 
	padding: 0; 
	position: fixed; 
	top: 0; 
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	transition: all .3s ease-in-out; 
	z-index: 8; 
}

/* estilos para hacer la transición cuando le den clic al icono de barras en el archivo js script.js */
.content-nav.active{ opacity: 1; z-index: 9; }

/* estilos para mostrar el sidenav cuando hagan la transición */
.content-nav.active .nav{ margin-left: 0; }

/* estilos del sidenav */
.content-nav .nav{ 
	background: white; 
	box-shadow: 4px 3px 3px #333; 
	height: 100vh; 
	margin-left: -320px; 
	overflow-x: hidden; 
	overflow-y: auto; 
	padding: 0; 
	position: relative;  
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	transition: all .3s ease-in-out; 
	width: 320px; 
}

/* estilos del ul y li del sidenav */
.content-nav .nav ul, .content-nav .nav ul li{ 
	margin-bottom: 0; 
	position: relative;
	width: 100%; 
}

/* estilos para el último item del ul */
.content-nav .nav ul li:last-child{ margin-bottom: 60px; }

/* estilos para los links del sidenav*/
.content-nav .nav ul li a{ 
	-ms-align-items: center; 
	align-items: center; 
	border-left: 5px solid transparent; 
	color: #444; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
	font-size: 16px; 
	min-height: 60px;
	padding-left: 20px; 
}

/* estilos para los iconos de los links*/
.content-nav .nav ul li a i{ margin-right: 15px; }

/* estilos de transición para los links cuando se encuentren activos*/
.content-nav .nav ul li.active a, .content-nav .nav ul li.active a:hover, .content-nav .nav ul li.active a:focus, .content-nav .nav ul li.active a:active, .content-nav .nav .close-nav a:hover, .content-nav .nav .close-nav a:focus, .content-nav .nav .close-nav a:active{ background: #64b5f6; color: #fff; }

/* estilos de transición para los links */
.content-nav .nav ul li a:hover, .content-nav .nav ul li a:focus, .content-nav .nav ul li a:active{ 
	background: rgba(100, 181, 246, .4); 
	border-color: #64b5f6; 
	color: #000;  
}

/* estilos para las lines de separación */
.content-nav .nav ul hr{ margin: 0 !important; }

/* estilos para el icono de la flecha */
.content-nav .nav ul li.headnav .angle{ position: absolute; right: 0; }

/* estilos para el icono de la flecha cuando lo activen*/
.content-nav .nav ul li.headnav .angle.rotate{ 
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	transition: all .3s ease-in-out; 
	transform: rotate(180deg); 
}

/* estilos para los items que tienen sublinks */
.content-nav .nav ul li.headnav ul{ background-color: rgba(200, 200, 200, .4); display: none; }

/* estilos para el último item del ul */
.content-nav .nav ul li.headnav ul li{ margin-bottom: 0px !important;  }

/* estilos para los links de los items que tienen sublinks*/
.content-nav .nav ul li.headnav ul li a{  padding-left: 40px;  }

/* estilos para el contenedor del bootón de cerrar ventana */
.content-nav .nav .close-nav{ 
	border-top: 1px solid #eee; 
	bottom: 0; 
	max-width: 320px; 
	position: fixed; 
	width: 100%; 
}

/* estilos para el botón de cerrar ventana */
.content-nav .nav .close-nav a{ 
	-ms-align-items: center; 
	align-items: center;  
	color: #444; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
	font-size: 16px; 
	min-height: 60px; 
	background: rgb(235, 235, 235); 
	padding: 0px; 
	border: none; 
	color: #666; 
	justify-content: center; 
}

/* estilos para el contenido de todas las paginas */
.contenedor-principal .scroll-content{ 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 70vh !important; 
	margin-top: 20vh;
	position: fixed; 
	padding: 20px;  
	overflow-x: hidden; 
	overflow-y: auto; 
	z-index: 8; 
	width: 100%; 
}

/* estilos para los fondos del contenido principal*/
.contenedor-principal .scroll-content.v1{ background-image: url(../../img/themes/v1.png); }
.contenedor-principal .scroll-content.v2{ background-image: url(../../img/themes/v2.jpg); }
.contenedor-principal .scroll-content.v3{ background-image: url(../../img/themes/v3.png); }
.contenedor-principal .scroll-content.v4{ background-image: url(../../img/themes/v4.png); }
.contenedor-principal .scroll-content.v5{ background-image: url(../../img/themes/v5.png); }
.contenedor-principal .scroll-content.v6{ background-image: url(../../img/themes/v6.png); }

/* estilo para el bradcrumb del cntenedor principal */
.contenedor-principal .bradcrumb{ 
	box-shadow: 0 4px 2px -2px #999; 
	height: 20vh; 
	padding: 15px !important; 
	overflow-x: auto;
	position: absolute; 
	width: 100%; 
	z-index: 8; 
}

/* estilos para los enlaces del bradcrumb */
.contenedor-principal .bradcrumb a{ color: #666; }

/* estilos para las transiciones de los enlaces del bradcrumb y para el enlace activo */
.contenedor-principal .bradcrumb a:hover, .contenedor-principal .bradcrumb a:active, .contenedor-principal .bradcrumb a:focus, .contenedor-principal .bradcrumb a.active{ color: #1976d2; }
/* estilos para el enlace activado del bradcrumb */
.contenedor-principal .bradcrumb a.active{ cursor: default; }


/* diseño de la paginación */
.link_pagination, table.table a { margin-right: 0 !important; font-size: 12px !important; padding: 10px 15px; background-color: #efefef; color: #999 !important; }
.link_pagination:hover{ background-color: #bbdefb; color: #000 !important; }

/* estilos en md*/
@media( min-width: 768px )
{
	/* estilos para las imagenes del header */
	header picture img{ height: auto !important; width: 140px !important; }
}

/* estilos en lg */
@media( min-width: 999px )
{
	/* estilo para los iconos de las opciones */
	header a.option-nav i{ font-size: 20px; }

	/* estilos del contenedor del sidenav*/
	.content-nav{ 
		display: -webkit-flex; 
		display: -moz-flex; 
		display: -ms-flex; 
		display: -o-flex; 
		display: flex; 
		opacity: 1; 
		position: relative; 
	}

	/* estilos del sidenav */
	.content-nav .nav{ 
		-webkit-box-shadow: none;
		box-shadow: none; 
		height: 90vh !important; 
		margin-left: 0; 
		max-width: auto; 
		overflow-y: auto; 
	}

	/* estilos para el último item del ul del sidenav */
	.content-nav .nav ul li:last-child{ margin-bottom: 0px; }
	
	/* estilos para los links del sidenav*/
	.content-nav .nav ul li a{ min-height: 10vh; }
	
	/* estilos para el contenido de todas las paginas */
	.contenedor-principal .scroll-content{ height: 80vh !important; margin-top: 10vh; position: relative; }
	
	/* estilo para el bradcrumb del cntenedor principal */
	.contenedor-principal .bradcrumb{ height: 10vh; }
}