@font-face{
    font-family: Sora;
    src: url(../fonts/Sora-VariableFont_wght.ttf);
}

.body-device{
    display:none;
}

body {
	margin: 0;
	background-image:url('../images/pc/fondo.webp');
	background-size:cover;
}

.view{
    position: relative;
    width: 100%;
}

.top-header{
    width: 100%;
    height: 26px;
    background-color:#d5e5f4;
    display: block;
}

.header{
    width: 100%;
    height: 122px;
    background-color:white;
    display: block;

}

.logo{
    width: 175px;
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -87.5px;
}

.content{
    width: 100%;
    height: 514px;
    background-image: url("../images/pc/bloque.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    font-family: Sora;
    font-size: 1.2rem;
    color: #dee0ed;
}

.welcome{
    text-align: center;
    position: relative;
    top: 125px;
}

.olvido{
    font-size: 1rem;
    text-align: center;
    position: relative;
    top: 10px;
}

.footer-slogan{
    font-size: 1rem;
    text-align: center;
    position: relative;
    top: 10px;
    color: #73b6ed;
    
}

.slogan span{
    font-weight: bold;
}

.login-form{
    text-align: center;
    position: relative;
    top: 120px;
    font-size: 1.4rem;
}

::placeholder{
    color: #73b6ed;
    font-size: 1rem;
}



.field{
    width: 350px;
    height: 32px;
    margin: 9px 0;
}

.g-recaptcha {
	width: 350px;
	height: 32px;
	margin: 9px 0;
	color: white;
	font-size: 1rem;
	padding: 0;
	background-color: #47a5ef;
}

.banner{
    width: 100%;
    height: 117px;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center ;
}

.banner img{
    display: inline-block;
    height: 40%;
    margin: 0 30px;
}



.footer{
    width: 100%;
    height: 160px;
    background-color: white;
    display: block;
}

.footer p{
    color: #142f88;
    text-align: center;
    font-family: Sora;
    font-size: 1rem;
}

#footer-white-strip-logos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.footer-logos-img {
	margin: 24px 4vw 0;
}


/*PANTALLA GESTION*/
.body-admin {
	margin: 0;
	font-family: Sora;
	height: 100vh;
	position: relative;
	min-height: 471px;
}

.body-admin-largo {
	margin: 0;
	font-family: Sora;
	height: 100vh;
	position: relative;
	min-height: 600px;
}

.body-admin-mas-largo {
	margin: 0;
	font-family: Sora;
    min-height: 1450px;
	position: relative;
}

.contenedor-admin{
    width: 100%;
    max-height: 560px;
    
}

.productos-asignados {
	display: flex;
	justify-content: center;
}

.salir {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	background-color: #E30613;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-admin {
   
    height: 70px;
    
    
}

.logo-admin img{
    object-fit: contain;
    width: 100%;
}

.header-admin{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: linear-gradient( to bottom, #b2e4f9ff 10%, white, white 90%);*/
    background-image:url('../images/pc/header-bkg.png');
    background-size: 100% 100%;
}

.botonera-admin {
	display: grid;
	grid-template-columns: 33% 33% 1fr;
	text-align: center;
	margin: 0 252px;
	column-gap: 30px;
	row-gap: 20px;
	position:relative;
	top:100px;
}

.botonera-client {
	display: grid;
	grid-template-columns: 50% 1fr;
	text-align: center;
	margin: 0 335px;
	column-gap: 30px;
	row-gap: 20px;
	position: relative;
	top: 50px;
}

.cabecera-boton{
    color:white;
}

.titulo-text{
    color: white;
}

.boton-menu {
	width: 215px;
	height: 50px;
	/*background-color: #144196ff;*/
	background-color:#60a7df;
	border-radius: 10px;
	color: white;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	display: inline-flex;
}

.cliente{
    width: 265px;
}


/*
*ESTILOS DE LISTAS
*/

.tabla-lista {
	width: 87%;
	margin-left: 80px;
}

.fila-tabla {
	/*background-color: #3952A6;*/
	color: white;
	text-align: center;
	background-color:#60a7df;
}

.columna-tabla {
	background-color: #D4ECFC;
}

.footer-admin{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 230px;
}

.formulario-crear-sku{
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a b c c d j k k"
    "e e f f f f f f"
    "m m z z z z z z"
    "n n n n n n n n"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd"
    "ee ee ff ff gg gg hh hh"
    "ii ii jj jj kk kk ll ll";  
}

.contenedor-admin{
    font-size:0.9rem;
}

#cod-p-lab{
    grid-area: a;
}
#cod-p{
    grid-area: b;
}

#precio-p-lab{
    grid-area: c;
}
#precio-p{
    grid-area: d;
}

#nombre-p-lab{
    grid-area: e;
}
#nombre-p{
    grid-area: f;
}

#descripcion-p-lab{
    grid-area: m;
}
#descripcion-p{
    grid-area: n;
    height: 120px;
}

#cat-p-lab{
    grid-area: u;
}
#cat-p{
    grid-area: v;
}

#marca-p-lab{
    grid-area: w;
}
#marca-p{
    grid-area: nn;
}

#status-p-lab{
    grid-area: aa;
}
#status-p{
    grid-area: bb;
}

#iva-p-lab{
    grid-area: j;
}

#iva-p{
    grid-area: k;
}

#iva-prod-u::after {
    content: '%';
}

#subir-imagen-label-id{
    grid-area: ee;
}

#subir-imagen-input-id{
    grid-area: ff;
}

#submit-producto{
    grid-area: ee;
    position: relative;
    left: 10px;
    margin-top: 10px;
    width: 90%;
    height: 45px;
    background-color: red;
    color: white;
    font-size: 1.2rem;
    border-radius: 10px;
}

#presentacion-p-lab{
    grid-area: cc;
}

#presentacion-p{
    grid-area: dd;
}


.f-crea-cliente{
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a a b b c c d d"
    "e e f f f f f f"
    "m m n n o o p p"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd"
    "ee ee ff ff ff ff ff ff"
    "ii ii jj jj kk kk ll ll"
    "mm mm mm mm mm mm mm mm";
}

#cod-e-lab{
    grid-area: a;
}
#cod-e{
    grid-area: b;
}

#email-e-lab{
    grid-area: c;
}
#email-e{
    grid-area: d;
}

#nombre-e-lab{
    grid-area: e;
    font-size: 0.9rem;
}
#nombre-e{
    grid-area: f;
}

#ciudad-e-lab{
    grid-area: m;
}
#e{
    grid-area: n;
}

#telefono-e-lab{
    grid-area: o;
}
#telefono-e{
    grid-area: p;
}

#password-e-lab{
    grid-area: u;
}
#password-e{
    grid-area: v;
}

#cel-e-lab{
    grid-area: w;
}
#cel-e{
    grid-area: nn;
}

#activo-e-lab{
    grid-area: aa;
}
#activo-e{
    grid-area: bb;
}

#tipo-e-lab{
    grid-area: cc;
}
#tipo-e{
    grid-area: dd;
}

#submit-e {
	grid-area: ee;
	margin-top: 10px;
}

.formulario-crear-usuario{  
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a a b b c c d d"
    "e e f f f f f f"
    "i i j j j j j j"
    "m m n n o o p p"
    "q q r r r r r r"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd"
    "ee ee ff ff gg gg hh hh"
    "ii ii jj jj kk kk ll ll"
    "mm mm mmmm mmmm tt tt tt tt"
    "llll llll lll lll lll lll lll lll";
}


#orden-minima-c-lab{
    grid-area: gg;
}

#orden-minima-c{
    grid-area: hh;
}

#orden-maxima-c-lab{
    grid-area: kk;
}

#orden-maxima-c{
    grid-area: ll;
}

.label-f-crear-c{
    /* text-align: right; */
    background-color: #003F9A;
    color: white;
    padding-right: 18px;
    height: 35px;
    margin-left: 5px;
}

.input-f-crear-c {
	height: 35px;
	border-left: 0;
	background-color: #EAF7FD;
	border-bottom: 6px white solid;
	border-top: 0px white solid;
	border-right: 0;
	padding-bottom: 0px;
}

.label-f-crear-c, .input-f-crear-c{
    display: flex;
    justify-content: right;
    align-items: center;
}

.formulario-crear-c{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 128px;
}

#cod-c-lab{
    grid-area: a;

}
#cod-c{
    grid-area: b;
}

#email-c-lab{
    grid-area: c;
}

#email-c{
    grid-area: d;
}

#nombre-loc-lab{
    grid-area: e;

}
#nombre-loc{
    grid-area: f;
}

#nombre-c-lab{
    grid-area: i;

}
#nombre-c{
    grid-area: j;
}

#ciudad-c-lab{
    grid-area: m;
}
#ciudad-c{
    grid-area: n;
}

#telefono-c-lab{
    grid-area: o;
}
#telefono-c{
    grid-area: p;
}

#direccion-c-lab{
    grid-area: q;
}
#direccion-c{
    grid-area: r;
}

#password-c-lab{
    grid-area: u;
}
#password-c{
    grid-area: v;
}

#cel-c-lab{
    grid-area: w;
}
#cel-c{
    grid-area: nn;
}

#ruc-c-lab{
    grid-area: aa;
}

#ruc-c{
    grid-area: bb;
}

#asesor-c-lab{
    grid-area: cc;
}
#asesor-c{
    grid-area: dd;
}

#notas-c-lab{
    grid-area: llll;
}
#notas-c{
    grid-area: lll;
}

#flete-c-lab {
    grid-area: mm;
}

#flete-c {
    grid-area: mmmm;
}

#tipo-c-lab{
    grid-area: ii;
}

#tipo-c{
    grid-area: jj;
}

#activo-c-lab{
    grid-area: ee;
}

#activo-c{
    grid-area: ff;
}




#submit-prod-c{
    position: fixed;
    left: 0;
    top: 300px;
    background-color: #E30613;
    color: white;
    font-size: 1.2rem;
    height: 60px;
    width: 90px;
    border-radius: 0 10px 10px 0;
    border: none;
}

.label-f-crear-c{
    background-color:#60a7df;   
}

#submit-cl-c{
    position: fixed;
    left: 0;
    top: 400px;
    background-color: #E30613;
    color: white;
    font-size: 1.2rem;
    height: 60px;
    width: 90px;
    border-radius: 0 10px 10px 0;
    border: none;
}

#submit-prod-c :hover{
    background-color: red;
}



/* VISTA DETALLE CLIENTE */

.contenedor-detalle-c{
    width: 100%;
    display: flex;
    justify-content: center;
    
}

.formulario-detalle-c{
    width: 860px ;
    display: grid;
    grid-template-columns: 180px 250px 180px 1fr;
    grid-template-rows: auto ;
    font-size: 0.9rem;
    gap: 1px;
    vertical-align: middle;
}


#div-form-oc-id{
    background-color:white;    
}



.label-detalle-cliente{
    background-color: #142f88;
    color: white;
    height: 30px;
    text-align: right;  
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: right;
}

.data-detalle-cliente{
    padding-left: 10px;
    height: 30px; 
    background-color: #C9E8FB;
    display: flex;
    align-items: center;
}




#codigo-cliente{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#codigo-cliente-data{
    grid-column: 2 / 5;
    grid-row: 1 / 2;
}

#nombre-comercial{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#nombre-comercial-data{
    grid-column: 2 / 5;
    grid-row: 2 / 3;
}

#nombre-cliente{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

#nombre-cliente-data{
    grid-column: 2 / 5;
    grid-row: 3 / 4;
}

#ciudad{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

#ciudad-data{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    /* width: 150px; */
}

#telefono{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

#telefono-data{
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    /* width: 150px; */
}

#iva{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

#iva-data{
    grid-column: 4 / 5;
    grid-row: 4 / 5;
}

#iva-data::after{
    content: '%';
    position: relative;
    left: 2px;
}

#categoria{
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

#categoria-data{
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

#direccion{
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

#direccion-data{
    grid-column: 2 / 5;
    grid-row: 5 / 6;
}


#password{
    grid-column: 1 / 2;
    grid-row: 6 / 7;
}

#password-data{
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    /* width: 150px; */
}

#celular{
    grid-column: 3 / 4;
    grid-row: 6 / 7;
}

#celular-data{
    grid-column: 4 / 5;
    grid-row: 6 / 7;
    /* width: 150px; */
}

#ruc{
    grid-column: 1 / 2;
    grid-row: 7 / 8;
    
}

#ruc-data{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
   /*  width: 150px; */
}

#email{
    grid-column: 3 / 4;
    grid-row: 7 / 8;
}

#email-data{
    grid-column: 4 / 5;
    grid-row: 7 / 8;
    /* width: 150px; */
}

#notas{
    grid-column: 1 / 2;
    grid-row: 8 / 10;
}

#notas-data{
    grid-column: 2 / 5;
    grid-row: 8 / 10;
}

#asesor{
    grid-column: 1 / 2;
    grid-row: 10 / 11;
}

#asesor-data{
    grid-column: 2 / 3;
    grid-row: 10 / 11;
}

#o-minima{
    grid-column: 3 / 4;
    grid-row: 10 / 11;
}

#o-minima-data{
    grid-column: 4 / 5;
    grid-row: 10 / 11;
}

#status{
    grid-column: 1 / 2;
    grid-row: 11 / 12;
}

#status-data{
    grid-column: 2 / 3;
    grid-row: 11 / 12;
}

#tipo-cliente{
    grid-column: 3 / 4;
    grid-row: 11 / 12;
}

#tipo-cliente-data{
    grid-column: 4 / 5;
    grid-row: 11 / 12;
}

.boton-submit{
    display: block;

}

.titulo{
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
    color:white;
}

#titulo-panel-clientes{
    position:relative;
    top:50px;
}


/**TABLA PASA ASIGNAR PRODUCTOS A CADA CLIENTE*/
.asignar-sku-tabla{
    width: 100%;
    background-color: white;

    position: relative;
    top: 80px;
    
}

.tabla-productos-clientes{
    /* display: flex;
    justify-content: center; */
    grid-area: mm;
}

table{
    border: 1;
    width: 80vw;
    /* margin: 0 125px; */
}

.encabezado-prod-cliente-general{
    height: 30px;
/*     display: grid;
    row-gap: 1px;
    column-gap: 1px;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: center;
    background-color: #003F9A;
    color: white;
    padding: 0 10px;
    

}



.cont-datos-prod-cliente-0{

    height: 30px;
/*     display: grid;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: left;
    background-color: #EAF7FD;
    padding: 0 10px;

}

.cont-datos-prod-cliente-1{

    height: 30px;
/*     display: grid;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: left;
    background-color: white;
    padding: 0 10px;

}



.checkbox{
    width: 15px;
    height: 15px;
}

.titulo-tabla-skus{
    text-align: center;
}
#tabla-prod-aut{
    width: 80%;
}

#precio-sin, #precio-con{
    width: 138px;
}

#sku-col{
    width: 105px;
}



.factor-in {
	width: 50px;
}

#factor-in-cont {
	text-align: center;
}

.master-footer {
	display: none;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 20px;
}

.creditos{
    padding-bottom: 30px;
}

.footer-credit{
    font-family: sans-serif;
    font-size: 0.7rem;
    text-align: center;

    

}

.footer-credit a{
    color: grey;
    text-decoration: none;
    display: inline;
}

.form-header{
    display: grid;
    grid-template-areas:    'a b c d'
                            'e f g h'
                            'i j k l';
    row-gap: 3px;
    column-gap: 3px;
    width: 770px;
}

.campo{
    /*background-color: #003F9A ;*/
    background-color: #60a7df ;
    color: white;
}
.valor{
    border:#003F9A solid 1px ;
}



#form-header-id{
    color:white;
}

#local-campo{
    grid-area: a;
}
#local-valor{
    grid-area: b;
}
#cliente-campo{
    grid-area: c;
}
#cliente-valor{
    grid-area: d;
}
#ruc-campo{
    grid-area: e;
}
#ruc-valor{
    grid-area: f;
}
#telefono-campo{
    grid-area: g;
}
#telefono-valor{
    grid-area: h;
}
#direccion-campo{
    grid-area: i;
}
#direccion-valor{
    grid-area: j;
}
#ciudad-campo{
    grid-area: k;
}
#ciudad-valor{
    grid-area: l;
}

.header-productos-form{
    background-color: #003F9A ;
    color: white;
    height: 40px;

/*     display: flex;
    flex-direction: row; */
    display: grid;
    grid-template-columns: 60px 150px 40px 600px 80px 80px 80px;
}

.row-form-oc {
	color: #003F9A;
	display: grid;
	grid-template-columns: 60px 150px 40px 600px 80px 80px 80px;
}

.icon {
	width: 35%;
}

.color-1{
    background-color: #d5e5f4;
}

.texto-centrado{
    justify-content: center;
}

.preview-div {
	position: fixed;
	width: 250px;
	height: 250px;
	background-color: aqua;
	border: 3px solid white;
	box-shadow: gray 9px 12px 16px 1px;
	top: 290px;
	left: 0px;
}

.imagen-popup{
    height: 100%;
}

.boton-cerrar {
	position: absolute;
	right: -14px;
	top: -14px;
	border: 1px solid #003F9A;
	border-radius: 21px;
	width: 30px;
	display: flex;
	background-color: lightblue;
	color: #003F9A;
	font-weight: normal;
	cursor: pointer;
	height: 30px;
	align-items: center;
	justify-content: center;
}  

.preview-class {
	cursor: pointer;
}

 
 .separador-oc{
    color:white; 
 }


/* #form-col-1{
    width: 53px;
}

#form-col-2{
    width: 150px;
}

#form-col-3{
    width: 600px;
}*/

#form-col-4{
    text-align: center;
}

#form-col-5{
    text-align: center;
}

#form-col-6{
    text-align: center;
} 

.row-form-oc a{
    text-decoration: none;

}

.precio{
    text-align: center;
}





/* .input-campos{
    text-align: center;
} */

#qty-input input {
	width: 70%;
	-webkit-appearance: none;
	border: 0.2px #003F9A solid;
	height: 72%;
	padding-bottom: 0.2px;
}

/**STYLES PARA RESULTADOS EN ORDEN DE COMPRA**/

.totales_oc {
	display: grid;
	grid-template-columns: 180px 180px;
	grid-template-rows: 180px;
	margin-left: 25px;
	text-align: center;
	position: relative;
}

.titulo-totales {
	position: absolute;
	top: -57px;
}

.head-totales-oc {
	display: grid;
	grid-template-columns: 120px;
	row-gap: 5px;
	color: white;
	grid-template-rows: 45px 45px 45px 45px;
}

.result-totales-oc {
	display: grid;
	grid-template-columns: 120px;
	grid-template-rows: 45px 45px 45px 45px;
	color: #003F9A;
	background-color: white;
	row-gap: 5px;
	font-size: 1.3rem;
} 

.form-oc {
	width: 1130px;
	margin-left: 94px;
}

.bloque-1{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.result-oc{
    border-radius: 15px;
    border: 0.4px solid #003F9A;
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:white;
}

.titulos-head-oc{
    border-radius: 15px;
    background-color: #003F9A;  
    
    display: flex;
    align-items: center;
    justify-content: center;
}


/** CODIGO PARA LA VENTANA EMERGENTE DE ORDEN DE COMPRA***/


#contenedor-emergente-oc {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.77);
    display: none;
}

#contenedor-interno-oc {
	width: 60%;
	height: 85%;
	background-color: ivory;
	top: 57px;
	left: 231px;
	position: fixed;
	overflow: scroll;
	border: solid 5px #003f9a;
	border-radius: 19px;
}

#cerrar-oc {
	position: fixed;
	top: 68px;
	right: 120px;
	background-color: #003F9A;
	color: white;
	height: 50px;
	width: 147px;
	border-radius: 10px;
	border: white solid 3px;
}

#guardar-oc {
	position: fixed;
	top: 141px;
	right: 120px;
	/* background-color: red; */
	/* color: white; */
	height: 112px;
	width: 202px;
	/* border-radius: 10px; */
	/* border: white solid 3px; */
	font-size: 1.2rem;
	font-weight: bold;
}

.boton-emergente-oc{
    background-color: rgba(255, 255, 255, 0);
    border: none;
    font-size: 1rem;
}

.boton-emergente-oc:hover{
    cursor: pointer;
    color: red;
}

#botonera {
	position: absolute;
	bottom: 10px;
	text-align: center;
	width: 100%;
	/* border-top: 1px solid blue; */
	/* border-bottom: 1px solid blue; */
}

#detalle-productos {
	margin-top: 6px;
	margin-bottom: 22px;
}

.head-form-oc {
	display: flex;
	align-items: center;
}

.campo-preview{
    text-align: center;
    background-color: #003F9A;
    color: white;
}
.valor-preview{
    text-align: center;
    border-top: 0.3px solid #003F9A;
    border-right: 0.3px solid #003F9A;
    border-bottom: 0.3px solid #003F9A;
    background-color: white;
    color: #003F9A;
}

#datos-informativos-preview{
    display: grid;
    grid-template-columns: repeat(4, 150px);
    row-gap: 3px;
    column-gap: 3px;
    font-size: 0.9rem;
}

span{
    font-size: 0.7rem;
    text-align: center;
}

.bloque-1 p{
margin: 0;
}

.titulo-preview{
    text-align: center;
}

.form-preview{
    display: grid;
    grid-template-columns: 60px 120px 386px 94px 80px;

}

.detalle-producto-preview{
    display: grid;
    grid-template-columns: 60px 120px 386px 94px 80px;
    font-size: 0.7rem;
}

.centrar {
	display: flex;
	justify-content: right;
}

.cantidad {
	margin-left: 11px;
}

.right{
    text-align:right;
}

#subtotal-label, #subtotal, #subtotal-cero-label{
    border-top: 0.8px solid #003F9A;
}

#total-factura{
    white-space: nowrap;
    text-align: left;
}

.sub_cero{
    border-top: none !important;
}

/*FORMULARIO DE EDICION DE PRODUCTOS*/

#edit-update-prod-form{
    display: grid;
    grid-template-columns: 270px 1fr;
    width: 60%;
    margin: 0 auto;
}

#descripcion-sku-id{
    height: 200px;
}

.tabla-productos-clientes-2{
    max-width: 1000px;
    position: relative;
    margin-left: 120px;
}

.tabla-productos-clientes-3 {
	max-width: 1000px;
	position: relative;
	margin: 0 auto;
}


#oc-detail-table{
    border: 1px solid black;
    border-collapse:collapse;    
}

.oc-detail-datos-informativos{
    border-top: 1px solid black;
    background-color: #003F9A;
    color: white;
}
#oc-detail-titulo-tabla{
    font-size: 1.2rem;
    font-weight: bold;

}

.valor-centrado-oc-detail{
    text-align: center;
}

.valor-right-oc-detail {
	text-align: right;
	font-style: italic;
	font-weight: bolder;
	background-color: lightsteelblue;
}

#btn-preview {
	display: none;
	position: absolute;
	top: 261px;
	right: 135px;
}

#no-oc-txt-emp {
	/*color: white;*/
	color: rgba(0, 0, 0, 0);
}

#titulo-oc{
    text-align: center;
    color:white;
}

#tabla-permisos {
	border: 1px solid black;
	margin-left: -76px;
	margin-top: 45px;
	grid-area: ii-start;
    text-align: center;
    border-collapse: collapse;
}

#tabla-permisos th{
    border-right : 1px solid black;
    border-bottom : 1px solid black;
    border-collapse: collapse;

}

#permisos {
	font-size: 0.8rem;
}

.permisos-titulo{
    width: 60px;
}

#area-gestion {
	background-color: #003F9A;
	color: white;
}

.permisos{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

#botonera-colaboradores {
	display: grid;
	grid-template-columns: 25% 25% 25% 1fr;
}

#cod-c-lab-edit{
    grid-area: a;
}

#cod-c-edit{
    grid-area: b;
}

#email-c-lab-edit{
    grid-area: c;
}

#email-c-edit{
    grid-area: d;
}

#nombre-c-lab-edit{
    grid-area: e;
}

#nombre-c-edit{
    grid-area: f;
}

#telefono-c-lab-edit{
    grid-area: m;
}

#telefono-c-edit{
    grid-area: n;
}

#cel-c-lab-edit{
    grid-area: o;
}

#cel-c-edit{
    grid-area: p;
}

#password-c-lab-edit{
    grid-area: u;
}

#password-c-edit{
    grid-area: v;
}

#ciudad_c_lab-edit{
    grid-area: w;
}

#ciudad-c-edit{
    grid-area: nn;
}

#ciudad_c_lab-edit{
    grid-area: w;
}

#ciudad-c-edit{
    grid-area: nn;
}

#tipo-c-lab-edit{
    grid-area: aa;
}

#tipo-c-edit{
    grid-area: bb;
}

#activo-c-lab-edit{
    grid-area: cc;
}

#activo-c-edit{
    grid-area: dd;
}

.boton-guarda-estado-oc{
    border: none;
    padding: 0;
}

#tabla-permisos-detalle {
	border: 1px solid black;
	margin-left: 111px;
	margin-bottom: 50px;
	margin-top: 45px;
	grid-area: ii-start;
	text-align: center;
	border-collapse: collapse;
}

#boton-imprimir {
	margin: 0;
	padding: 0;
	border: 1px solid #60A7DF;
	background: none;
}

#img-boton-print{
    margin: 0;
    padding: 0;
    border: none;
    
}

.contenedor-tabs{
    max-width: 87%;
    display:flex;
    flex-direction: row;
    margin-left: 80px;
    
}

.tab{
    
    width: 81.4px;
    height: 50px;
    font-size: 0.8rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content:center;
    
}

.boton-tab {
	background-color: #00409aad;
	border-radius: 10px 10px 0 0;
	margin: 0 1px 0;
	padding: 0;
	text-decoration: none;
	width: 81.4px;
	height: 50px;
	font-size: 0.7rem;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	word-break: break-word;
}

.boton-tab.presentaciones{
    border: 0 1px;

}

/* .boton-tab:link{
    background-color:#00409aad;
} */

.boton-tab:hover{
    background-color:tomato;
}



.boton-tab:focus{
    background-color: #003F9A;

}

.text-tab {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 9px;
}

.titulo-presentacion{
    
    text-align: center;
    background-color: floralwhite;
    border: #003F9A solid 0.5px;
    margin: 4px 0;
    font-size: 1.1rem;
    font-weight: 400;
}

.mensaje-404{
    font-size: 2rem;
    position: relative;
    top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oc-detail-datos-informativos{
    background-color:#60A7DF;
    
}

.oc-detail-valor{
    background-color:white;
    color:#003F9A;
}

.cuerpo-tabla-oc{
      background-color:white;
    color:#003F9A;  
    border-collapse:collapse;
}

#oc-detail-titulo-tabla{
    color:white;
}

#oc-detail-table{
    position:relative;
    top:75px;
}

.que-protege {
	font-size: 1.4rem;
}

.slogan-span {
	font-size: 1rem;
	font-weight: bold;
}

#totales-oc-cliente{
    color:white;
}

/* ESTILO DE LISTA OC CLIENTE */

.col-1 {
	flex: 1 0 170px;
}

.col-2 {
	flex: 1 0 198px;
}

.col-3 {
	flex: 1 0 90px;
}

.col-4 {
	flex: 1 0 90px;
}

.col-5 {
	flex: 1 0 85px;
}

.col-6 {
	flex: 1 0 85px;
}

.col-7 {
	flex: 1 0 106px;
}

.row-flex {
	display: flex;
	border-bottom: lightblue 1px solid;
}

.datos {
	border-left: 1px solid blue;
	text-align: center;
}

.edit-img-row {
	border-right: 1px solid blue;
	flex: 0 0 24px;
}

/* ESTILO PARA DETALLE DE OC PARA CLIENTES */

.oc-detail-valor {
	border-bottom: 1px solid lightblue;
}

.filas-oc-detail {
	background-color: lightsteelblue;
}

/* CAMPOS INVALIDOS */

.input-f-crear-c:invalid{
    border: red 2px solid;
}


/* BALANCE OC STYLE */
.balance {
	height: 29px;
	background-color: red;
	color: blanchedalmond;
}

.result-balance {
	background-color: whitesmoke;
	color: blue;
}

/* VIDEO CAPACITACION */

.dashboard {
	width: 70%;
	margin: 20px auto;
	display: flex;
	flex-direction: row;
	border: solid aliceblue 3px;
}

#nav-left {
	border: solid 1px blue;
	flex: 30% 0 0;
}

#content-right {
	border: solid 1px blue;
	flex: 70% 1 0;
}

.video-link-class {
	background-color: lightgrey;
	margin: 2px 0;
	padding: 3px 0 3px 11px;
	font-size: 0.7rem;
}

.video-link-class:hover {
	background-color: lightblue;
	font-style: italic;
	font-weight: bolder;
    cursor: pointer;
}

/* GESTION DE VIDEOS */

.cargar_video {
	background-color: lightblue;
	border: blueviolet 1px solid;
	margin: 5px 0;
	text-align: center;
	padding: 2px 0;
}

.cargar_video:hover {
	cursor: grab;
	background: lightcoral;
}

#lista-videos-cargar{
    display: none;
}

#lista-videos-editar{
    width: 90%;
    margin: 0 auto;
}

.lista-videos {
	display: grid;
	grid-template-columns: 300px 520px 1fr 30px;
}

.lista-videos-editar {
	display: grid;
    grid-template-columns: 460px 640px 1fr;
}

.celda-datos {
	font-size: 0.8rem;
	border-bottom: 1.3px #003F9A solid;
	padding: 6px 0 6px 5px;
	margin: auto 0;
	height: 36px;
}

.header-lista-videos {
	background-color: #003F9A;
	color: white;
	padding: 6px 0 6px 5px;
}

.boton-borra-video {
	background-color: red;
	height: 20px;
	width: 20px;
	margin: auto;
	text-align: center;
	border: 2px solid #003F9A;
}

.boton-borra-video:hover {
	background-color: grey;
	cursor: pointer;
}

.imagen-producto-img {
	width: 100%;
}

.imagen-producto {
	width: 250px;
}


.icon-etiqueta-precio {
    width: 100%;
}

.lista-precios-row {
    width: 30px;
}

.bloque-lista-precios {
	width: 20%;
	margin: 50px auto;
}

.titulo-bloque-precios {
	color: white;
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 10px;
	font-weight: bold;
}

.lista-precios {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.bloque-lista-precios-edit {
	margin: 50px auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ver-producto-img {
	width: 100%;
}

.preview-img-row {
	width: 2%;
}

.publicidad-extranet {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 100px;
}