/**
 * Modificación general
 */
table {
	width: 100%;
	table-layout: fixed;
	overflow-wrap: break-word;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
	background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
	background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
	background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
	background: rgb(66, 184, 221); /* this is a light blue */
}

/**
 * Visualizando conversación de solicitud
 */
#conversaciones div {
	border: 2px solid #dedede;
	background-color: #f1f1f1;
	border-radius: 5px;
	padding: 10px;
	margin: 10px 0;

}

#conversaciones p {
	color: black;
}

#conversaciones div.autorizado {
	border-color: #ccc;
	background-color: #90baf0;
}

#conversaciones div::after {
	content: "";
	clear: both;
	display: table;
}

#conversaciones div span {
	float: left;
	color: #aaa;
}

#conversaciones div.autorizado span {
	float: right;
	color: #fcfcfc;
}

/**
 * Filtrador
 */
#cabecera {
	padding:3px;
	position:fixed;
	left:0;
	top:0;
	background-color:#1D5178;
	width:100%;
	transition: transform 0.25s ease-in-out;
	z-index:90;
}

/**
 * Cabecera (filtrador) móvil
 */
.header-unpin{
	/* display: none; */
	transform: translateY(-100px);
}
.header-pin{
	/* display: block; */
	transform: translateY(0);
}

/**
 * Cartas de presentación
 */
.carta {
	padding: 10px;
	border-radius: 5px;
	border: #333 1px solid;
	margin-bottom: 20px;
	position:relative;
}
.carta-resaltada {
	background-color:#6e4f53;
}
.carta:hover {
	background-color:#007cd5;
}
.carta .autor {
	font-style:italic;
	color:#bd5;
	margin-left:10px;
}
.carta h3 {
	font-size:1.5em;
	color:#272e38;
	margin:0;
}
.carta p {
	font-size:1.4em;
}
.carta small {
	display: block;
}
.carta button.eliminar {
	position: absolute;
	top: 0;
	right:0;
}

/**
 * Separador de paginación
 */
.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: #ccc;
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: #ccc;
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}

/**
 * Progreso de pedido
 * https://codepen.io/paulobrien/pen/sEnxy
 * https://s.codepen.io/mattdrose/fullembedgrid/qEZBge?type=embed&animations=run [x]
 */
#progreso {
	list-style:none;
	margin:0;
	padding:0;
	display:table;
	table-layout:fixed;
	width:100%;
	color:#164c5a;
}
#progreso > li {
	position: relative;
	display: table-cell;
	text-align: center;
	font-size: 0.8em;
	cursor: pointer;
}
#progreso > li:before {
	content: attr(data-step);
	display: block;
	margin: 0 auto;
	background:#C6C6C6;
	width: 3em;
	height: 3em;
	text-align: center;
	margin-bottom: 0.25em;
	line-height:3em;
	border-radius:100%;
	position:relative;
	z-index:80;
}
#progreso > li:after {
	content: '';
	position: absolute;
	display: block;
	background: #DFE3E4;
	width: 100%;
	height: 0.5em;
	top: 1.25em;
	left: 50%;
	margin-left: 1.5em\9;
	z-index: -1;
}
#progreso > li:last-child:after {
	display: none;
}
#progreso > li.is-complete {
	color: #2ECC71;
}
#progreso > li.is-complete:before, #progreso > li.is-complete:after {
	color: #FFF;
	background: #2ECC71;
}
#progreso > li.is-active {
	color:#DBB034;
}
#progreso > li.is-active:before {
	color:#FFF;
	background:#D4965A;
}

/**
 * Needed for IE8
 */
.progress__last:after {
	display: none !important;
}

/**
 * Size Extensions
 */
.progress--medium {
	font-size: 1.3em;
}

.progress--large {
	font-size: 1.9em;
}

/**
 * Arrastrar y soltar los archivos
 */
#filedrag {
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
}

#filedrag.hover {
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
}

#messages {
	padding: 0 10px;
	margin: 1em 0;
	border: 1px solid #999;
}

#progress p {
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("progress.png") 100% 0 repeat-y;
}

#progress p.success {
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed {
	background: #c00 none 0 0 no-repeat;
}

#messages > div {
	position: relative;
}

.img-superpuesto {
	position: absolute;
	top:    0px;
	left:   0px;
	width:  20px;
	height: 20px;
	text-align: center;
	line-height: 1.5em;
	border-radius: 50%;
	cursor: pointer;
}
.img-superpuesto-r {
	background-color: red;
}
.img-superpuesto-v {
	background-color: green;
}
.img-superpuesto-seguido {
	position: relative;
}

/**
 * Botones flotantes
 */
.accionador {
	position:fixed;
	width:4em;
	height:4em;
	bottom:4.3em;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	z-index:96;
}

#enlaces-flotantes{
	position:fixed;
	right:40px;
	padding-bottom:20px;
	bottom:6em;
	z-index:100;
}

#enlaces-flotantes li{
	list-style:none;
	margin-bottom:10px;
}

#enlaces-flotantes li a{
	background-color:#F33;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	width:4em;
	height:4em;
	display:block;
}

#enlaces-flotantes li a {
	font-size:1em;
}
#enlaces-flotantes li a i{
	font-size:2em;
}

#enlaces-flotantes:hover{
	visibility:visible!important;
	opacity:1!important;
}

a#menu-cotizable + ul{
	visibility:hidden;
}

a#menu-cotizable:hover + ul{
	visibility:visible;
}

a.accionador i{
	font-size:2.3em;
}

/**
 * Modificación de Pure.css
 */
/*
.servicial-form input[type="password"], .servicial-form input[type="email"], .servicial-form input[type="url"], .servicial-form input[type="date"], .servicial-form input[type="month"], .servicial-form input[type="time"], .servicial-form input[type="datetime"], .servicial-form input[type="datetime-local"], .servicial-form input[type="week"], .servicial-form input[type="tel"], .servicial-form input[type="color"], .servicial-form input[type="number"], .servicial-form input[type="search"], .servicial-form input[type="text"], .servicial-form select, .servicial-form textarea,
*/
.pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="text"], .pure-form select, .pure-form textarea {
	background-color: #333;
	color: white;
}
.pure-table-odd {
	color: #333;
}

.offset-1 {
	margin-left: 8.333333%;
}

.offset-2 {
	margin-left: 16.666667%;
}

.offset-3 {
	margin-left: 25%;
}

.offset-4 {
	margin-left: 33.333333%;
}

.offset-5 {
	margin-left: 41.666667%;
}

.offset-6 {
	margin-left: 50%;
}

.offset-7 {
	margin-left: 58.333333%;
}

.offset-8 {
	margin-left: 66.666667%;
}

.offset-9 {
	margin-left: 75%;
}

.offset-10 {
	margin-left: 83.333333%;
}

.offset-11 {
	margin-left: 91.666667%;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}
/* Fin de modificación */

body {
	background:#0094ff;
	font-family:Montserrat,"Helvetica Neue","Lucida Grande",Arial,Verdana,sans-serif;
	color:#fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-weight:normal;
	font-style:normal;
	font-size:1rem;
	line-height:1.8;
	font-weight:400;
	letter-spacing:0;
	height:100%;
	padding: 0;
	margin: 0
}

.nav-multi-square {
	overflow: hidden;
	position: fixed;
	text-align:center;
	bottom:0;
	height:4.8em;
	width:100%;
	left:0;
	z-index:95;
	color:#5b6c83;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
.nav-multi-square .nav-square {
	font-family:Montserrat,"Helvetica Neue","Lucida Grande",Arial,Verdana,sans-serif;
	display:block;
	background:#272e38;
	float:left;
	position:relative;
	width:calc(100% / 3);
	height:100%;
	border-radius:0;
	margin:0;
	cursor:pointer;
	overflow:hidden;
	-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
}
.nav-multi-square .nav-square:hover {
	background:#232932;
	box-shadow:0 0 2rem rgba(0,0,0,0.3) inset;
	color:#929fb3
}
.nav-multi-square .nav-square:hover i {
	color:#fff
}
.nav-multi-square .nav-square:before {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:100%;
	left:0;
	opacity:0;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transform:scale(0);
	-webkit-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
}
.nav-multi-square .nav-square:after {
	content:'';
	width:1px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#313a47
}
.nav-multi-square .nav-square:first-child:after {
	display:none
}
.nav-multi-square .nav-square span {
	width:100%;
	position:absolute;
/*
	top:50%;
*/
	height:auto;
	display:block;
	background:transparent;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%)
}
.nav-multi-square .nav-square span:hover {
	box-shadow:none
}
.nav-multi-square .nav-square.nav-square-current {
	color:#fff !important;
	background-color: #c62f45 !important;
}
.nav-multi-square .nav-square.nav-square-current i {
	color:#fff
}
.nav-multi-square .nav-square.nav-square-current:before {
	top:0;
	opacity:1;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1)
}
.nav-multi-square .nav-square i {
	display:block;
	margin-bottom:-15px;
	font-size:2.5em;
	-webkit-transition:all .3s linear;
	-moz-transition:all .3s linear;
	-ms-transition:all .3s linear;
	-o-transition:all .3s linear;
	transition:all .3s linear
}
.nav-square-current-sub {
	background-color: #313E3C !important;
}
i {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
em, i {
	font-style: italic;
}
a.icono {
	color: #ffcc29;
}

/**
 * While Loading
 */
.papel-tapiz {
	background:#734;
	height:100%;
	width:100%;
	opacity:0.95;
	top:0;
	left:0;
	position:fixed;
	padding:0;
	z-index:90;
}
.cargando {
	background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 50% 50% no-repeat rgb(249,249,249);
}

/*csslint important:false*/

/* ==========================================================================
	 Pure Base Extras
	 ========================================================================== */

/**
 * Extra rules that Pure adds on top of Normalize.css
 */

/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */

.hidden,
[hidden] {
	display: none !important;
}

/**
 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
 * aspect ratio.
 */
.pure-img {
	max-width: 100%;
	height: auto;
	display: block;
}

/**
 * Todo el contenido debe ser centrado.
 */
#superficie {
	margin-left: auto;
	margin-right: auto;
	width:100%;
}
#contenido {
	padding: 20px;
	margin-bottom: 7rem;
	margin-top: 5rem;
}

/*
 * Menú de la cabecera
 */
.pure-menu {
	width:100%;
	box-shadow:0px 1px 3px rgba(0,0,0,0.2);
	background:#3e3436;
	position:fixed;
	left:0;
	top:0;
}

/*
 * Inicio de sesión
 */
p{
	font-size:12px;
	text-decoration: none;
	color:#ffffff;
}

h1{
	font-size:1.5em;
	color:#525252;
}

.box{
	background:white;
	width:300px;
	border-radius:6px;
	margin: 0 auto 0 auto;
	padding:0px 0px 70px 0px;
	border: #2980b9 4px solid;
}

.email{
	background:#ecf0f1;
	border: #ccc 1px solid;
	border-bottom: #ccc 2px solid;
	padding: 8px;
	width:250px;
	color:#AAAAAA;
	margin-top:10px;
	font-size:1em;
	border-radius:4px;
}

.password{
	border-radius:4px;
	background:#ecf0f1;
	border: #ccc 1px solid;
	padding: 8px;
	width:250px;
	font-size:1em;
}

.btn{
	background:#2ecc71;
	width:125px;
	padding-top:5px;
	padding-bottom:5px;
	color:white;
	border-radius:4px;
	border: #27ae60 1px solid;
	margin-top:20px;
	margin-bottom:20px;
	float:left;
	margin-left:16px;
	font-weight:800;
	font-size:0.8em;
}

.btn:hover{
	background:#2CC06B;
}

#btn2{
	float:left;
	background:#3498db;
	width:125px;  padding-top:5px;
	padding-bottom:5px;
	color:white;
	border-radius:4px;
	border: #2980b9 1px solid;

	margin-top:20px;
	margin-bottom:20px;
	margin-left:10px;
	font-weight:800;
	font-size:0.8em;
}

#btn2:hover{
background:#3594D2;
}



/**
 * Formulario de acceso
 */
.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:520px;
	position:relative;
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:30px;
/*
	background:rgba(40,57,101,.9);
*/
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}


/**
 * Visualización de cotización
 */
@page {
				size: A4 portrait;
				margin: 2cm 1cm 2cm 2cm;
			}

#invoice {
	background-color:white;
	color:black;
	padding:12pt;
}
.lineal {
	clear:both;
	margin-top:4pt;
}
.text-right {
	text-align:right;
}
#datos-empresa {
	width:59%;
	float:left;
}
#datos-empresa p {
	color:black;
}
#datos-empresa img {
	width:80pt;
	margin-right:12pt;
	float:left;
}
#datos-empresa #nombre {
	float:left;
}

#datos-documento {
	width:40%;
	text-align:center;
	float:right;
	border:solid 1pt black;
	border-radius:4px;
}
#datos-documento p {
	color:black;
	margin:0;
}
#datos-documento h2 {
	border-top:solid 1pt black;
	margin: 0;
}
#datos-documento h3 {
	border-bottom:solid 1pt black;
	margin: 0;
}
#datos-cliente {
	border-top:1pt solid black;
	border-left:1pt solid black;
	border-top-left-radius:5px;
	padding-left:6pt;
}
#datos-cliente * {
	margin:0pt;
	color:black;
}

#desglose {
	width:100%;
}
#desglose h4 {
	text-align:center;
}
#desglose table {
	width: 100%;
}
#desglose table thead {
	border-bottom:1pt solid black;
}
#desglose table th {
	background: #008000;
	color: #333;
	text-align:center;
	font-size:10pt;
}
#desglose table th.quantity_th {
	width:13%;
}
#desglose table th.precio_th {
	width:18%;
}
#desglose table th.subtotal_th {
	width:18%;
}
#desglose table td {
	vertical-align:top;
	line-height:1.15;
}
#desglose table td {
	color:black;
	margin:0;
	line-height:1.15;
	font-size:9pt;
}

#pedestal {
	margin-top:12pt;
	overflow:hidden;
}
#pedestal #condiciones {
	width:65%;
	float:left;
}
#pedestal #condiciones * {
	margin:0;
	font-size:10pt;
}
#pedestal #condiciones h4 {
	border-top:solid 1pt black;
	border-bottom:solid 1pt black;
}
#pedestal #totales {
	width:33%;
	float:right;
}
#pedestal #totales table {
	width:100%;
}
#pedestal #totales table .totalizado {
	border-top:1pt dashed black;
}
#pedestal #agradecimiento {
	width:100%;
	text-align:center;
	position:fixed;
	display:none;
	bottom:0;
}

/**
 * Con esto imprimimos la cotización
 */
@media print {
	.no-print, .no-print * {
		display: none !important;
	}
	#invoice, #contenido, #invoice-header{
		padding:0;
		margin:0;
	}
	#pedestal #agradecimiento {
		display:block;
	}
	.ui-notify {
		display:none !important;
	}
}