/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


 body{ font-family:'Lato', sans-serif; }



 .home-login{background:linear-gradient(90deg, #434343 47%, #F39322 47%,#F39322 90% ) no-repeat;display: flex; flex-direction: column; justify-content: center;height: 100vh;}
 

 .main-section{margin: 50px 0;}
 .wrapper{width: 100%;max-width: 1200px; margin: 0 auto;}


.inner-login{display: flex; flex-direction: row; justify-content: space-around; align-items: center; align-content: center;}

.login{display: flex; flex-direction: row; justify-content: center; align-items: center;flex-basis: 50%; }
.img-logo{position: absolute;}
.title-login{font-size: 35px; font-weight: 700; color: #292929; text-transform: uppercase;}
.u-orange{color: #F39322!important;}
.text-login{font-size:27px ; font-weight: 400;}
.formulario-login{position: relative;padding: 100px 0 0; background: white; border-radius: 15px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);    width: 100%;
    max-width: 394px;}

    .img-logo{position: absolute; top: -40px; left: 20px;  }
    	.formulario-login form{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;padding: 10px 20px 40px;}
.formulario-login form input{margin: 10px 0; width: 100%;}
.formulario-login form input[type=text]{border: none;border-bottom: 1px solid grey;font-size: 18px;}
.formulario-login form input[type=submit]{ background: url("imagenes/arrow-btn.png") center right no-repeat; background-color: #F39322; font-size: 22px; font-weight: 700; color: #000; width:173px; border-radius: 10px;border: 0;
    padding: 10px 15px; }
.box-orange{ background: #F39322; flex-basis: 50%; padding: 50px 0px 50px 50px;}
.franja-negra{background: black; display: flex; justify-content: flex-end; align-items: center; position: relative; padding: 20px;
    border-radius: 0 0 15px 15px;}
.locker{position: absolute; top: -20px; left: 20px;}
.error-message{font-size: 11px; color: red;}

.mensaje-exito{display: flex; flex-direction: column;justify-content: space-between; align-items: center; padding: 0px 20px 20px;margin-bottom: 70px;font-size: 14px; color: green;text-align: center;}
.mensaje-exito img{padding: 20px 0;}

@media(max-width:768px){

.home-login{background:#434343;}
.box-orange{display: none;}
.login{flex-basis: 90%;}
}


/*Facturas*/

.section-facturas{
	    background-image: url(../imagenes/bg-extranet.jpg), linear-gradient(90deg, #343434 30%, #ffffff 30%,#ffffff 90% );
    background-repeat: repeat-y, no-repeat;
    background-position: center, center;


}


.inner-facturas .wrapper{display: flex; position: relative;flex-wrap: wrap}
.dark-zone{flex-basis: 30%;padding: 90px 0 0;background: #343434;}
.light-zone{ padding: 100px 0 0;margin: 0 0 0 50px;flex-grow: 1; max-width: 768px;}
.user-box{position: relative;padding: 90px 20px 50px; background: #202020; border-radius: 15px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);    width: 100%;
    max-width: 258px; display: flex; flex-direction: column; align-items: center;}

.img-nc{position: absolute; top: -40px; width: 97px; height: 97px; color: #fff; display: flex;
    flex-direction: column;
    justify-content: center; }
.denominacion{padding: 20px 0; font-size: 20px; font-weight: 700;}
.user-box p {color: #fff; text-align: center;}

.tab-list{display: flex; flex-direction: column; justify-content: flex-start; margin: 40px 0;}

.tab{background: #202020; padding: 20px 50px; margin: 10px 0; color: #fff; text-decoration: none; }

/*.tab-content{display: none;}*/
.show{display: flex; flex-direction: column;}


.mensaje-bienvenida{display: flex; justify-content: flex-start; align-items: center; font-size: 25px; font-weight: 600; color:#F39322;line-height: 1.2}
.mensaje-bienvenida span{font-size: 30px;}
.mensaje-bienvenida img {margin: 0 20px 0 0; max-width:85px; }


.inicio{background: url('imagenes/ico-casa.png') center left no-repeat #202020; color: #fff; font-size:17px ;}
.factura{background: url('imagenes/ico-factura.png') center left no-repeat #202020; color: #fff; font-size:17px ;}
.active{color: orange; background: #202020;position: relative;}
.active:after{content: ''; position: absolute; top: 0; left: 0; width: 13px; height: 100%; background: #F39322;}

.box-ng{display: flex; flex-direction: row; background: #F0F0F0; border-radius: 15px; }
.saludo{font-size:24px; font-weight: 400; color: #202020; padding-bottom: 15px;}
.saludo strong{font-weight: 700;}
.parte-naranja{padding: 25px; background:#F39322 ; border-radius: 15px 0 0 15px; display: flex; flex-direction: column; justify-content: center;}
.parte-gris{padding: 10px; display: flex; justify-content: space-between; align-items: center;    width: 100%;}
.parte-naranja img{    width: 60px;margin-bottom: 10px;}
.parte-naranja p{color: #fff; font-size: 17px; font-weight: 400;}
.parte-naranja p strong{font-weight: 700;}

.calendar{width: 115px;  background: white; border-radius: 10px; border: 2px solid black; min-height: 130;}
.calendar .title{color: white; background: black; padding: 10px 20px; text-align: center;}
.content-calendar{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.day {padding: 10px 0 0;}
.day strong{font-size: 50px;font-weight: 800;}
.datos{padding: 10px 15px;}
.item-datos1{font-size: 12px; font-weight: 500;}
.item-datos2{font-size: 17px; font-weight: 700;}

.otros-datos{display: flex; justify-content: flex-start;}
.boxes{display: flex; justify-content: space-between;margin: 40px 0 20px;}

.grey-box{background: linear-gradient(#F0F0F0 85%, #F0F0F0 15%, #F39322 15%) no-repeat; border-radius:15px; max-width:247px; flex-basis: 25%; padding: 20px 20px 5px;display: flex;
    flex-direction: column;
    justify-content: space-between;    min-height: 120px; text-decoration: none; color: #202020}

.title-facturas{display: flex; justify-content: space-between; align-items: center;}
.franja-naranja{position: relative; height: 20px; width: 100%;}
.franja-naranja p{font-size: 10px; position: absolute; top: 8px;right: 0px; font-weight: 600; }
.big-number{font-size: 40px; font-weight: 600; text-align: right;margin: 10px 0; }
.small{text-align: right; margin: 5px; font-size: 12px;}
.small a{text-decoration: none;}
.text-title-facturas{font-weight: 300; font-size: 17px;}
.text-title-facturas strong{font-weight: 700;}

.item-buscador{background:#F0F0F0 50%; padding: 20px; border-radius: 15px; display: flex; justify-content: space-between; }
.mostrar{ display: flex; justify-content: space-between; flex-basis: 50%; padding: 0 10px 0 0;align-items: center;}
.mostrar p{font-weight: 400; font-size: 16px; color: #202020;font-family: 'Lato', sans-serif;}
.mostrar p strong{font-weight: 700;}
.mostrar select{padding: 10px; background: transparent;}
.buscar{flex-basis: 50%; padding: 0 10px 0 20px;}
.buscar p{font-weight: 400; font-size: 13px; color: #F39322}

.text-select{font-weight: 400; font-size: 13px; color: #202020;}

.listado{position: relative;background: #f0f0f0; border-radius: 15px; padding: 25px; margin: 30px 0;}

.table-listado{border-top: 1px solid black; padding-top: 20px;}
.listado>div .dataTables_filter{position: absolute; top: -138px; right: 127px;px; color: white;}
.listado .dataTables_wrapper .dataTables_filter input{border: 0!important; color: #F39322;}
.listado .dataTables_wrapper .dataTables_filter input::placeholder{color: #F39322;}
.table-listado .dataTables_info{font-size: 12px;}
.title-listado{font-size:17px; font-weight:700;padding-bottom: 20px;}
.title-tabla{font-size: 12px; font-family: 'Lato', sans-serif; font-weight: 400;} 
.tabla-numero{font-size: 12px;}
.tabla-nombre{font-size: 12px;}
.descarga-factura{display: flex; justify-content: space-between; align-items: center;}
.pagado{color: green!important;font-size: 14px;}
.no-pagado{color: red!important;font-size: 14px;}


/*Partners*/

.partners{margin: 60px 0 0;}
.partners p{font-size: 38px; margin: 0px 0 30px;}
.partners p strong{font-weight: 700;}

.inner-logos{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.inner-logos a{flex-basis: 13%;}


.footer{ padding: 20px 0;flex-basis: 100%; display: flex;
	justify-content: flex-end;
	align-items: center;}

.footer p{text-align: center;font-size: 13px;    flex-basis: 70%;}


@media(max-width: 768px){
	.inner-logos a{flex-basis: 30%;}
	.wrapper{padding: 0 20px;}
}
@media(max-width: 425px){
	.section-facturas{background: #fff;}
	
	.dark-zone{padding: 100px 20px 0;}
	.light-zone{margin: 0;padding: 50px 20px 0;}
	.inner-facturas{flex-direction: column;}
	.box-ng{flex-direction: column;}
	.parte-naranja{border-radius: 15px 15px 0 0;}
	.otros-datos{flex-direction: column;}
	.boxes{flex-direction: column;align-items: center;}
	.grey-box{margin: 20px 0;  width: 247px;}
	.item-buscador{background: linear-gradient(180deg, #F0F0F0 50%, #343434 50% ) no-repeat; min-height: 100px; flex-direction: column;}
	.listado>div .dataTables_filter { position: absolute; top: -148px; right: 100px; color: white;}
	
	.inner-logos a{flex-basis: 50%;display: flex;
    justify-content: center; margin: 15px 0;}
    .parte-gris{flex-direction: column;}
}


.mensaje-error {background: rgba(243,147,34, 0.5); display: flex;	flex-direction: column;	align-items: center; padding: 10px 20px;margin: 0 10px 35px;line-height: 1.1}
.mensaje-error a{color: #F39322; font-weight: 700;}
.listado table.dataTable tbody th, .listado table.dataTable tbody td{vertical-align: middle}
.listado table.dataTable tbody tr:hover{-webkit-box-shadow: inset 0px -2px 11px 0px rgba(0,0,0,0.57);
	-moz-box-shadow: inset 0px -2px 11px 0px rgba(0,0,0,0.57);
	box-shadow: inset 0px -2px 11px 0px rgba(0,0,0,0.57);}

.filtro{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.8); display: flex; justify-content: center; align-items: center;}
.pop-up{background: white; padding: 30px; border-radius: 20px; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 18px;
	color: #202020; -webkit-box-shadow: 10px 10px 21px 0px rgba(0,0,0,0.61);
	-moz-box-shadow: 10px 10px 21px 0px rgba(0,0,0,0.61);
	box-shadow: 10px 10px 21px 0px rgba(0,0,0,0.61); max-width: 550px;
	width: 100%;}
.pop-up .close-pop {position: absolute; top: 10px; right: 10px; font-weight: 600; color: #202020; font-size: 30px; text-decoration: none}
.pop-up .big-number {font-size: 40px;}
.pop-up .box-btns{display: flex; justify-content: space-between; align-items: center;	width: 100%;}
.pop-up .btn-pop{font-weight: 600; color: white; background: #F39322; padding: 15px 20px; font-size: 18px; text-transform: uppercase; text-decoration: none;margin: 15px 0;min-width: 170px;text-align: center }
.pop-up .btn-pop.out{background: crimson}