@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");

.transition {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

body {
  display: table;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  width: 100%; }

p {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #878787; }

p:focus {
  border: none;
  outline: 0; }

a, button {
  text-decoration: none;
  outline: none !important;
  /*color: #878787;*/
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease; }

a:hover,
a:focus {
  text-decoration: none;
  color: #000; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0; }

h5 {
  font-size: 1em; }

ul,
ol {
  padding-left: 0; }

.btn:focus,
button:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  outline: 0; }

.btn.disabled, .btn:disabled {
  cursor: not-allowed; }

img {
  max-width: 100%; }


/* -------------------------------- *\
	encabezado panel
\* -------------------------------- */
	
	.header{
		position: fixed;
		left:0; right:0;
		z-index: 999;
	}
	
	.header-panel{
		background:#17568c;
		color:#fff;
	}
		.header-panel a, .header-panel-nav a,
		.header-panel i, .header-panel-nav i,
		.header-panel span, .header-panel-nav span{
				margin: 5px;
				vertical-align: middle;
				line-height:normal;
			}
		
		.header-panel a{ display: inline-block; } .header-panel a:hover{ text-decoration:none; }
		.header-panel i{ font-size:20px; display: inline-block; }
		@media (min-width:768px){
			.header-panel i{ font-size:16px; }
		}
		.header-panel span, .header-panel-nav span{ display: none; }
		@media (min-width:768px){
			.header-panel span, .header-panel-nav span{ display: inline-block; }
		}
				
		.logo{
			display: inline-block;
			height: 100%;
			padding: 5px 15px;
			background:#23354b;
		}
		.header-panel .logo img{
			display: inline-block;
			max-height: 24px;
		}
		
		.header-panel a{
				color:#fff;
				font-size:small;
			}
				.header-panel a:hover{
					color:#f0f0f0;	
				}
			
		.header-panel .h-usr-menu{
				position: relative;
				display: inline-block;
				height:100%;
				margin: 0 15px;
				cursor:pointer;
			}
			
			.header-panel .h-usr-menu:hover .menu{
				display: block;
			}
			
			.header-panel .h-usr-menu .menu{
				position:absolute;
				display: none;
				background:#f0f0f0;
				border:1px solid #ccc;
				border-radius:0px 0px 5px 5px;
				width:100%;
				min-width: 190px;
				color:#17568c;
				font-size:small;
				right:0;
				z-index: 1001;
			}
				.header-panel .h-usr-menu .menu a{
					color:#17568c;
					border-bottom:1px dashed #17568c;
					border-radius: 3px;
					padding: 5px 10px;
					display:block;
				}
					.header-panel .h-usr-menu .menu a:hover{
							background-color:#fcfcfc;
						}
	
	.header-panel-nav{
		background:#fafafa;	
		color:#17568c;
	}
		.header-panel-nav a{
				color:#17568c;
			}
			.header-panel-nav a:hover{ text-decoration:none; color:#0473bc; }
		
		.header-panel-nav .nav{
				display:table;
				list-style:none;
				padding:5px 15px;
			}
			.header-panel-nav .nav li{
					display: table-cell;
					margin:0 10px;
				}
				
/* -------------------------------- *\
	panel izquierdo
\* -------------------------------- */

	aside.left-panel {
		  background: #fff;
		  height: 100vh;
		  padding: 0;
		  vertical-align: top;
		  width: 280px;
		  -webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
				  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
		  position: fixed;
		  left: -280px;
		  bottom: 0;
		  top: 82px;
		  overflow:auto;
		  z-index: 999;
			
			-webkit-transition: all 0.25s ease;
  			transition: all 0.25s ease; 
		}
	@media (min-width:576px){ 
		aside.left-panel { top: 45px; left:0; } 
	}
	aside.left-panel:hover {
		/*overflow-x: scroll;*/ }
	
	aside.left-panel::-webkit-scrollbar {
		width: 8px;     /* Tamaño del scroll en vertical */
		height: 8px;    /* Tamaño del scroll en horizontal */
		/*display: none;*/
	}
	aside.left-panel::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 4px;
	}
	/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
	aside.left-panel::-webkit-scrollbar-thumb:hover {
		background: #b3b3b3;
		box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	}
	/* Cambiamos el fondo cuando esté en active */
	aside.left-panel::-webkit-scrollbar-thumb:active {
		background-color: #999999;
	}
	/* Color de fondo */
	aside.left-panel::-webkit-scrollbar-track {
		background: #e1e1e1;
		border-radius: 4px;
	}
	/* Cambiamos el fondo cuando esté en active o hover */
	/*aside.left-panel::-webkit-scrollbar-track:hover,
	aside.left-panel::-webkit-scrollbar-track:active {
	  background: #d4d4d4;
	}*/
	
	.open aside.left-panel:hover {
	  overflow-x: inherit; }
	  
	
	.navbar {
		background: #fff;
		border-radius: 0;
		border: none;
		display: inline-block;
		margin: 0;
		padding: 0;
		vertical-align: top; }
		
		.navbar ul{ margin: 0 15px; }
	  
		.navbar .menu-title {
			color: #22344a; /*#41434d;*/
			clear: both;
			display: block;
			font-family: 'Open Sans';
			font-size: 14px;
			font-weight: 700;
			line-height: 50px;
			padding: 0;
			text-transform: uppercase;
			width: 100%; }
			
		.navbar .navbar-nav {
			float: none;
			position: relative; }
			.navbar .navbar-nav > li {
			  padding-left: 30px;
			  padding-right: 30px; }
			  .navbar .navbar-nav > li.active {
				background: #fafafa; }
			.navbar .navbar-nav li {
			  width: 100%; }
	
	.lnk-panel{ display:inline-block; margin: 10px; }
		.lnk-panel:hover{ text-decoration:none; }
	.lnk-panel i{ display:inline-block; margin-right:10px; vertical-align:middle; }
	li.menu-item {
        	position: relative; margin-left: 10px; margin-bottom: 10px;
		}
		.navbar .menu-item-title{ 
				color:#8e8e8e; font-size:medium; 
				clear: both;
				display: block;
				font-family: 'Open Sans';
				font-size: 14px;
				font-weight: 700;
				line-height: 50px;
				padding: 0;
				text-transform: uppercase;
				width: 100%;
			}
        li.menu-item a {
          	display:inline-block;color:#4b4b4b;  width:100%; font-size:15px;
		  }
		  li.menu-item i{ display:inline-block; margin-right:10px; }
		  li.menu-item a:hover{ text-decoration:none; }
          li.menu-item a:before {
            content: "";
            position: absolute;
            top: 10px;
            right: 0;
            width: 8px;
            height: 8px;
            border-style: solid;
            border-width: 1px;
            border-color: #607d8b #607d8b transparent transparent;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transition: all .25s ease;
            transition: all .25s ease; }
          li.menu-item a:hover:before {
            border-color: #03a9f3 #03a9f3 transparent transparent; }
			
		li.menu-item.show a:before {
          border-color: transparent #607d8b #607d8b transparent;
          top: 20px;
          right: -5px; }
        li.menu-item.show a:hover:before {
          border-color: transparent #03a9f3 #03a9f3 transparent; }
		  
		.menu-item .aplug{color:#1e8257;} .menu-item .aplug:hover{color:#2c9367;}
		.menu-item .aplug-o{color:#6e5ebe;} .menu-item .aplug-o:hover{color:#8577cd;}
		  
	
	.right-panel {
			/*background: #f1f2f7;*/
			margin-left: auto;
			margin-top: 82px;
		}
		
		.right-panel .envase{ width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto }
		
	@media (min-width:576px){
		.right-panel { margin-left: 280px;}
	}
	
	.card {
			margin-bottom: 1.875em;
			border-radius: 5px;
			padding: 0;
			border: 0px solid transparent;
			/*background-color:#eeeeee;*/
			-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
				  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); 
		}
		.card a{ font-size:0.9em }
		.card .box-title {
			font-weight: 600;
			font-size: 1em;
			padding: 5px 0; }
			
	.card .card-body {
		float: left;
		padding: 1.25em;
		position: relative;
		width: 100%; }
		
		.card h4 { font-size: 1.1rem; }