body {
  font-family: 'Montserrat', sans-serif;
  /*background : url('bg.png') no-repeat fixed #F0F0E9 #99ffcc #FE980F*/; 
  
  /*margin: 0 auto;
  
  padding: 1em;
  max-width: 50em;
  line-height: 1.5;*/
}
html{ 
margin:0; 
padding:0; 
}
body * + * {
  /*margin-top: 1.5em;*/
}



/* Styles just for this demo */

* {
 }


header p{ margin:-0.2em auto 0.4em auto; padding:0; font: italic  12px/30px Georgia, serif; color:#666;}

h1{ 
  font-weight: 700;
  font-size: 24px;
  text-decoration: none;
 display: inline-block;
  padding: 0 0 3px 0;
  
  cursor: pointer;
 color: #000;border-bottom: 3px solid #000;}
 h1 a{font-size: 24px;}
 h1 a:hover{  border-bottom: 0;}
 h4{ color:#ED533B /*#398FF7*/;  font-size:0.9em; margin:0.5em 0 0.4em 0em ; text-decoration:underline; }
 .info p{
  font-size: 0.8em;
  padding:0;
  line-height: normal;
  }
  .info small{
  font-size: 0.8em; color:#444;}
.v{ background:#000;}
/*/////////////////////////CONTENEDORES/////////////////////////*/
.cosas,.tabla-min,.tabla-med,.tabla-max {background-color: #fff; margin: 0em auto 2.6em auto; padding: 30px;
  position: relative;}
.cosas { width: 460px;max-height: auto;}
.tabla-min {max-width: 28.5em; max-height: auto;}
.tabla-med {width: 44em; max-height: auto;}
.tabla-max {width: 50em; max-height: auto;}
.login {
	 margin: 4em auto; padding: 30px;position: relative;
  background-color: #fff;
  width: 400px;
   min-height: 19em;
 /* position:fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  */
}

.tab {
  float: left;
}
.tab:first-of-type {
  margin-right: 15px;
}

/*/////////////////////////CONTENEDORESSOMBRAS Y OTROS/////////////////////////*/
.sdwr {
	-moz-box-shadow: 0.5em 0.5em 0px 0px #36D7B7;
	-webkit-box-shadow: 0.5em 0.5em 0px 0px #36D7B7;
	box-shadow: 0.5em 0.5em 0px 0px #36D7B7;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

 .s:hover, nav :hover  {
-moz-box-shadow: 0.5em 0.5em 0px 0px #E2DCD4;
	-webkit-box-shadow: 0.5em 0.5em 0px 0px #E2DCD4;
	box-shadow: 0.5em 0.5em 0px 0px #E2DCD4;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');	 
}


.option {
  display: none;
}
legend   {
  font-weight: 700;
  font-size: 24px;
  text-decoration: none;
 display: inline-block;
  padding: 0 0 3px 0;
  
  cursor: pointer;
 color: #000;border-bottom: 3px solid #000;}
 
.form {display: block;/*width: calc(100% - 60px);*/}
.form p {position: relative; margin-bottom: 1.4em;}
.flabel input, textarea,/*select,*/ .dataTables_filter input {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  border-bottom: 3px solid #000;
  font-size: 0.8em;
  margin:1em auto 1em;
}
td .flabel{padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  border-bottom: 3px solid #000;
  font-size: 0.8em;
  margin:1em auto 1em; width: 60%;}
td button{ width: auto; text-transform: uppercase;
  font-size: 1.2em;
  
  color: #836BE2;
  font-weight:bold;
  padding: 0.5em;
  text-align: center;
  /*display: inline-block;letter-spacing: 2px;*/
  margin: 0 1em;
 
  background:#fff; }
.dataTables_filter input {
	width: 50%;
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  border-bottom: 3px solid #000;
  font-size: 0.8em;
  margin:1em auto 1.8em;
}
.flabel input:focus,.dataTables_filter input, select {border-bottom: 3px solid #99ffcc;}
.flabel label {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  position: absolute;
  top: 0px;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.flabel label.show {-webkit-transform: translateY(-10px); transform: translateY(-10px);opacity: 1;}
.help-block{ 
  font-size: 0.76em;}
.toggle input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 15px;
  height: 15px;
  border: 3px solid #000;
  vertical-align: middle;
  margin-top: -2px;
}
.toggle input:focus {
  border: 3px solid #99ffcc;
}
.toggle input:checked {
  background-color: #99ffcc;
}
.toggle label {  font-size: 12px;letter-spacing: 2px;}
button,input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
}
/*** custom checkboxes ***/

input[type=checkbox] { display: inline-block; } /* to hide the checkbox itself */
input[type=checkbox] + label  {
  font-size:0.9em;
  display: inline-block;
}

 input[type="submit"]{
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
  padding: 15px 30px;
  display: block;
  margin: 0 auto;
  width: 100%;
  background:#000;   
}
 
input[type="submit"]:hover, input[type="submit"]:focus {color: #000;background-color: #99ffcc;}
input:focus,button:focus {outline: none;}
.forgot { text-align: center;}
.forgot a {display: inline-block;padding-bottom: 3px;}
a {
  color: #000;
  text-decoration: none;
  font-size: 12px;
  /*text-transform: uppercase;*/
  
  border-bottom: 2px solid transparent;
}
a:hover, a:focus {outline: none;border-bottom: 2px solid #000;}

::-webkit-input-placeholder {
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: #000;
}

:-moz-placeholder {
  /* older Firefox*/
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: #000;
}

::-moz-placeholder {
  /* Firefox 19+ */
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: #000;
}

:-ms-input-placeholder {
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: #000;
}
#documento, #codigo{ text-transform:uppercase;}

.blob-grid > * { 

  padding: 0.2em;
 /*background: #222;
  color: #fff;
  text-align: center;*/
}

/* GRID */

.blob-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5em;
}

.blob-grid > * {
  flex: 1 0 5.6em;
  margin: 0.5em;
}

.blob-grid.x > *:first-child {
  flex-basis: calc(64% - 0.5em);
}
/*/////////////////////////EXPLICITOS NAV/////////////////////////*/
.logo  {
  max-width:100%; 
  max-height:2em;
  padding:0.3em 0.6em 0.3em 1em;
  margin:auto;
  display:block;
 
}
.fixed {position:fixed; top:0; left:0; z-index:2; width:100%;}
nav 	 {
	position:relative;
	z-index:99;
		
		
		 
		 
	}
nav ul {
  list-style: none;
  margin: 0 auto 2em auto;
  padding: 0;
  background:#FFF;
  /*background:#A3FFD1;*/
}
nav ul li a {
 
}
nav li a {
	display:block;
	 width: auto;
	 padding:0 1.4em 0 1.5em;
	height:  4.16em ;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height:  4.16em ;
  	font-size:0.6em;
	background: #fff;
	text-decoration: none;
}
nav li:hover a{background: #f3f3f3;}
nav li:hover ul a{background: #f3f3f3; color:#2f3036; height: 40px; line-height: 40px;}
nav li:hover ul a:hover{background:#000; color: #fff;}
 
nav li ul li {display: block;float: none;}
 
nav li ul li a {width: auto;min-width:12em;padding: 0 20px;}
nav li:hover a {background: #f3f3f3;}
/*nav ul li a:hover {background-color:  #f3f3f3;color: #000;}*/
nav ul li:hover {
  /*background-color: rgba(0, 102, 102, 0.8);*/
}
nav ul li:hover > ul {
  /*display: block;*/
}
nav ul ul {
  position: absolute;
  /*background-color: rgba(0, 102, 102, 0.8);*/
  display: none;
}
nav ul ul li {
  position: relative;
}
nav ul ul ul {
  left: 100%;
  top: 0;
}
nav ul:after {
  content: "";
  display: block;
  clear: both;
}
nav > ul > li {
  float: left;
}
.i { width:1em;}

/*COLORES ALERTAS DE STOCK*/
.warning td{ background:#F7B83E; color:#fff;}
  .danger td{ background:#FF3273; color:#fff;}
.tooltip {
	display:none;
	position:absolute;
	background-color:#161616;
	border-radius:2px;
	padding:10px;
	color:#fff;
	font-size:0.8em;
}  
.alert {
	background:#99ffcc;
	font-size:0.8em;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h3{ float:left; margin:0.5em 0 1em 0em ; text-decoration:underline; }
.alert-info{ display:none; position:fixed; top:5em; left:3em; z-index:9999;}
.alert p{ clear:both; margin:2em 0;}
.close{ font-size:2em; float:right;}
footer{ text-align:center;}
@media screen and (max-width : 770px){
	nav  {
    position: absolute;
    top: 3em;
    left: 0;
    width: 3em;
 
	z-index:999;
  } 
  .blob-grid > *:first-child {
  flex-basis: calc(60% - 0.5em);
}
  .blob-grid > * {
  flex: 1 0 9em;
  margin: 0.5em;
}
.sm{ clear:both; width:100%;}
}

/*/////////////////////////EXPLICITOS TABLAS/////////////////////////*/

/* Table Base */

table {
   
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table { 
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  font-weight: normal;
  font-size: 12px;
  padding: 8px 15px;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid #dddddd;
}
.table thead th {
  background: #eeeeee;
  vertical-align: bottom;
}   
/*.table tbody > tr:nth-child(odd) > td,
.table tbody > tr:nth-child(odd) > th {
  background-color: #fafafa;
}    */
.table .t-small {
  width: 5%;
}
.table .t-medium {
  width: 15%;
}
.table .t-status {
  font-weight: bold;
}
.table .t-active {
  color: #46a546;
}
.table .t-inactive {
  color: #e00300;
}
.table .t-draft {
  color: #f89406;
}
.table .t-scheduled {
  color: #049cdb;
}
td a {
  color:#000;
  }
  .capital{text-transform: capitalize;}
/* Small Sizes */
@media (max-width: 480px) { 
  .table-action thead {
    display: none;
  }
  .table-action tr {
    border-bottom: 1px solid #dddddd;
  }
  .table-action td {
    border: 0;
  }
  .table-action td:not(:first-child) {
    display: block;
  }
}


/*FUENTES*/
.small{font-size:14px;color:#969696;text-align:center;line-height: 20px;}
  .small a{color:#969696;}
  .small a:hover{color:#398FF7}
  .footer{font-size:12px;display:block;margin: 20px auto 80px auto;line-height: 20px;}
  .glyphs.character-mapping{margin:0;padding:0;border:none;}
  .glyphs.character-mapping li{margin:0;display:inline-block;width:90px;border-radius:4px;}
  .glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#398FF7 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;}
  .glyphs.character-mapping .icon svg{fill:#398FF7}
  .glyphs.character-mapping li:hover .icon{color:#fff !important;}
  .glyphs.character-mapping li:hover .icon svg{fill:#fff}
  .glyphs.character-mapping li:hover input{opacity:100;}
  .glyphs.character-mapping li:hover{background:#374347;}
  .glyphs.character-mapping input{opacity:0;background:#398FF7;color:#fff;margin:0;padding:10px 0;line-height:12px;font-size:12px;display:block;width:100%;border:none;text-align:center;outline:none;border-bottom-right-radius:3px;border-bottom-left-radius:3px;font-family:'Montserrat','Helvetica','Arial',sans-serif;font-weight:400;}
  .glyphs.character-mapping input:focus{border:none;}
  .glyphs.character-mapping input:hover{border:none;}
  .glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:none;-webkit-border-radius:3px;border-radius:3px;}
  .glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
  .glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#398FF7 !important;overflow:hidden;float:left;font-size:24px}
  .glyphs.css-mapping input{background:none;color:#398FF7;margin:0;margin-top:5px;padding:8px;line-height:14px;font-size:14px;font-family:'Montserrat','Helvetica','Arial',sans-serif;font-weight:700;display:block;width:120px;height:40px;border:none;-webkit-border-radius:5px;border-radius:5px;outline:none;float:right;}
  .glyphs.css-mapping input:focus{border:none;}
  .glyphs.css-mapping input:hover{}
  .button{
	  
	text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
  padding: 15px 30px;
  display: block;
  margin: 0 auto;
  width: 100%;
  background:#ED533B;
  text-align:center;    
	  
	  
	  /*display:block;width:250px;margin:0 auto 40px auto;padding:30px 50px;background:#374347;color:#fff;font-weight:700; letter-spacing:1px;text-decoration:none;text-align:center;border-radius:4px;*/}
  .button:hover{/*background:#398FF7 ;*/ }
  .share, .share li {padding: 0;list-style: none;max-width: 500px;display: block;text-align: center;}
  .share {margin: 30px auto 15px auto;}
  .share li {padding: 0 15px;margin: 0 auto;text-align: center;display: inline;overflow: hidden;position: relative;right: -15px;}
  .share li:first-child {top: -3px;}
  @media screen and (max-width: 640px) {
	  
	  .menu-anchor {
	width: 40px;
	height: 32px;
	float: left;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background: #FFF;
}
.menu-anchor:before {
	content: "";
	display: block;
	margin: 7px auto;
	width: 70%;
	height: 0.25em;
	background: #f49c14;
	box-shadow: 
	0 .45em 0 0 #f49c14,
	0 .9em 0 0 #f49c14;
}

.menu-active .menu-anchor {background: #d55401}

aside {width: 220px; height:100%;position: absolute; background:#FFF; top:2em;
	/*
	top: 0;
	left: 0;
	z-index: 1;
	
	height: 100%;
	padding-top: 10px;
	background: #d55401;
	box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3)*/

}

aside li a {
 }

aside li a:hover {
 }


/*
	Aqui você esconde o menu para fora da tela 
	O valor é exatamente a largura da sidebar
*/
aside {
	-webkit-transform: translateX(-220px);
	-moz-transform: translateX(-220px);
	-ms-transform: translateX(-220px);
	transform: translateX(-220px);
}

/*
	Essa é a posição original do HEADER e do MAIN
*/
 /*header, .main {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}*/

/*
   Com a classe menu-active na tag HTML
*/
.menu-active aside {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

/*.menu-active header, */
.menu-active .main {
	-webkit-transform: translateX(120px);
	-moz-transform: translateX(120px);
	-ms-transform: translateX(120px);
	transform: translateX(120px);
}
    
  }
  
  input::-webkit-calendar-picker-indicator{
    display: none;
}

 

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
  /* these 4 lines are the most important with respect to styling the control */
.calendar{border:1px solid #fff;background:#FFF; font-size:12px;}
.calendar table{color:#000;}
.calendar table td.hover{background:#ffc;color:#444;}
.calendar .selected{border:1px dotted #999;}
.date{ /*text-align:center;*/}

.calendar{overflow:auto;width:250px;height:175px;position:absolute;line-height:1em;border-radius:5px;-moz-user-select:none;-webkit-user-select: none;-khtml-user-select: none;user-select: none;}
.calendar table{width:100%;height:100%;color:#000;}
.calendar table td{padding:3px;text-align:center;cursor:pointer;border-radius:2px;}