/* Común */
html,body{
  width:100%;
  height:100%;
  background: #dde1e7;
}

/* Échale un ojo a esto. Supuestamente centra todo el body tanto horizontal como verticalmente. También el color del background es agradable
body {
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
*/

.loading-gif{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Clase para poner la X de eliminación de un producto en envío de email */
.x-email-producto{
	text-align: end;
	position: absolute;
	right: 2rem;
	cursor: pointer;
}

.lang-prod-update {
	display: none;
}

div.rectImg {
  padding:0;
  margin:0;
  width:58%;
  height:48%;
  /*background:#f0f0f0;*/
}

div.rectImg2 {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
  /*background:#f0f0f0;*/
}

div.rectImg  *, div.rectImg2  * {
  width:100%;
  height:100%;
}

.each-feature{
	font-size: x-large;
	color: orange;
	font-weight: bolder;	
}

.each-url{
	font-size: x-large;
	color: green;
	font-weight: bolder;	
}

.each-email{
	font-size: x-large;
	color: fuchsia;
	font-weight: bolder;	
}

.email-border{
	border: 2px dotted fuchsia;	
}

/* Estilos para los div editables */
.editable-div-box{
	direction: ltr;
	border: 1px solid black;
}

/* Botón para subir archivos */
.container-file-input {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
input[type="file"] {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b8b8b8;
}
.button-wrap-file-input {
  position: relative;
}
.button-file-input {
  display: inline-block;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #17a2b8;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.button-file-input:hover {
  background-color: #1794b8;
}

/* Botón de quitar imagen */
.button-destroy-img {
  display: inline-block;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #3d3846;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.button-destroy-img:hover {
  background-color: #5e5c64;
  color: #fff;
}
  
  /* Sombra a los botones cuando ponemos el ratónencima de ellos */
/*.btnShadow:hover{
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}*/

/*footer {*/
#idNavBarBottom{
  background-color: white;
  min-height: 1rem;
  border-top: 1px solid rgba(50, 50, 50, 0.3);
  /*width: 100%;*/
  /*position: fixed;*/
  /*bottom: 0;*/ 
}

.cursor{
	cursor: pointer;	
}

.url-border{
	border:0.125rem dotted #57e389;
}

.feature-border{
	border:0.125rem dotted #ffbe6f;
}

/* Cards */
.tarjetas{
	width: 18.5rem; 
	cursor: pointer;
	box-shadow: 4px 4px 8px 0 rgba(20, 20, 20, 0.3);
}
.tarjetas:hover{
	box-shadow: 8px 8px 16px 0 rgba(20, 20, 20, 0.3);
}
.tarjetas:active{
	box-shadow: 16px 16px 32px 0 rgba(20, 20, 20, 0.5);
}

.top{
	vertical-align: top;
}

.center{
	text-align: center;
}

.all-center{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.no-decoration{
	text-decoration: none;
	color: black;
}

.delete-url:hover{
	cursor: pointer;
}

.cardRow{
	padding-top: 2rem;
}

/*
#cardRow a{
	text-decoration: none;
}
*/

/* Campos tel */
/*input[type=number]{*/
.id-field{
    width: 6rem;
} 


/* Página de error */
.error-mh{
	min-height: 70vh;
}

.error-msg{
	width: 55vw;
	height: 20vh;
}


/* Botones de la parte de gestión de entradas, productos, etc */
.btn-gestion{
	/*color:white;*/
	font-weight: bolder;
}

/* En algunos botones, al hacer hover, el texto se pone negro. Por eso lo ponemos, para que siga el texto blanco */
/*
.btn-gestion:hover{
	color:white;
}
*/

.btn-gestion-row div a{
	color: white;
	font-weight: bold; 
	border: 1px solid black; 
}

.btn-gestion-row div a:hover{
	color: white;
}

.btn-gestion-row div:nth-child(1){
	text-align: left;
}

.btn-gestion-row div:nth-child(2){
	text-align: right;
}


/* Radio enabled y fecha */
.enabled-date-row  div:nth-child(1){  /* div:nth-child(1) => Aplica el css al primer div que se encuentra dentro del contenedor con la clase btn-gestion-row */
	text-align: right;
}
	
.enabled-date-row  div:nth-child(2){  /* div:nth-child(1) => Aplica el css al primer div que se encuentra dentro del contenedor con la clase btn-gestion-row */
	text-align: left;
}
	
/* ============================================ */

/* CARDS */
/* ====== */
/* Entradas */
#entrFirstCard{
	float: right;
	background: #3CB371;
}

#entrFirstCard:active{
	background: #3CB301;
}

#entrSecondCard{
	float: left;
	background: #118231;
}

#entrSecondCard:active{
	background: #006400;
}

#entrThirdCard{
	float: right;
	background: #6B8E23;
}

#entrThirdCard:active{
	background: #6B7000;
}

#entrFourthCard{
	float: left;
	background: #26a269;
}

#entrFourthCard:active{
	background: #57e389;
}

/* Productos */
#prdFirstCard{
	float: right;
	background: #4682B4;
}

#prdFirstCard:active{
	background: #4672B4;
}

#prdSecondCard{
	float: left;
	background: #00BFFF;
}

#prdSecondCard:active{
	background: #007FFF;
}

#prdThirdCard{
	float: right;
	background: #7B68EE;
}

#prdThirdCard:active{
	background: #7B08EE;
}

#prdFourthCard{
	float: left;
	background: #3584e4;
}

#prdFourthCard:active{
	background: #62a0ea;
}

/* Marcas */
#brandFirstCard{
	float: left;
	background: #ffa348;
}

#brandFirstCard:active{
	background: #ff7800;
}
#brandSecondCard{
	margin: 0 auto;
	background: #d2610b;
}

#brandSecondCard:active{
	background: #e35200;
}

#brandThirdCard{
	float: right;
	background: #d28d43;
}

#brandThirdCard:active{
	background: #ff9b30;
}

/* Menús */
#menuFirstCard{
	float: left;
	background: #f5c211;
}

#menuFirstCard:active{
	background: #e5a50a;
}

#menuSecondCard{
	margin: 0 auto;
	background: #d4c826;
}

#menuSecondCard:active{
	background: #fae300;
}

#menuThirdCard{
	float: right;
	background: #eae423;
}

#menuThirdCard:active{
	background: #c5c01c;
}

#menuFourthCard{
	float: left;
	background: #a5a24a;
}

#menuFourthCard:active{
	background: #c5c01c;
}

/* Submenús */
#submenuFirstCard{
	float: left;
	background: #a40000;
}

#submenuFirstCard:active{
	background: #f37777;
}

#submenuSecondCard{
	margin: 0 auto;
	background: #f66151;
}

#submenuSecondCard:active{
	background: #991d1d;
}

#submenuThirdCard{
	float: right;
	background: #ff0000;
}

#submenuThirdCard:active{
	background: #9a4d4d;
}

/* Newsletters */
#newsletterFirstCard{
	float: right;
	background: #c061cb;
}

#newsletterFirstCard:active{
	background: #9141ac;
}

#newsletterSecondCard{
	float: left;
	background: #813d9c;
}

#newsletterSecondCard:active{
	background: #cc3cf0;
}

#newsletterThirdCard{
	float: right;
	background: #a981b4;
}

#newsletterThirdCard:active{
	background: #ba2fdd;
}

#newsletterFourthCard{
	float: left;
	background: #613583;
}

#newsletterFourthCard:active{
	background: #d5acf0;
}

/* Usuarios*/
#userFirstCard{
	float: left;
	background: #5e5c64;
}

#userFirstCard:active{
	background: #3d3846;
}
#userSecondCard{
	margin: 0 auto;
	background: #77767b;
}

#userSecondCard:active{
	background: #5e5c64;
}

#userThirdCard{
	float: right;
	background: #241f31;
}

#userThirdCard:active{
	background: #3d3846;
}

/* ============================================ */

/* CARDS - HOME PAGE */
/* ================= */
/* Productos */
#firstCard{
	margin: 0 auto;
	background: #007bff;
}
#firstCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: blue;
}

/* Entradas */
#secondCard{
	float: left;
	background: #27a243;
}
#secondCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: green;
}

/* Marcas */
#thirdCard{
	float: right;
	background: #ff7800;
}
#thirdCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: #e66100;
}

/* Menús */
#fourthCard{
	float: left;
	background: #f5c211;
}
#fourthCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: #b5c000;
}

/* Submenús */
#fifthCard{
	margin: 0 auto;
	background: #ed333b;
}
#fifthCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: #c01c28;
}

/* Newsletters */
#sixthCard{
	float: right;
	background: #613583;
}
#sixthCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: #813d9c;
}

/* Usuarios */
#seventhCard{
	margin: 0 auto; /* Ésto centra la card, la pone en el centro de la pantalla */
	background: #5e5c64;
}
#seventhCard:active{  /* Cuando hacemos click encima de la tarjeta */
	background: #3d3846;
}

.entrada-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #CBFDD1;
}

.producto-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #CBE2FD;
}

.brand-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #ffbe6f;
}

.menu-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #f6d32d;
}

.submenu-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #f66151;
}

.newsletter-card{
	font-size: 2rem;
	font-weight: bolder;
	color: white;
	background: #9141ac;
}

.user-card{
	font-size: 2rem;
	font-weight: bolder;
	background: #3d3846;
	color: white;
}

/* ============================================ */

.text-black{
	color: black;
}

.feature-top{
		padding-top: 1.5rem;
}
	
.feature-size{
		 width: 27rem;
}
	
.feature-label-show{
		display: none;
}

.center-title{
	text-align: center; 
	padding-right: 10rem;
}

.div-nombre-compl{
	width: 68.5%;
}

#menuPrin{
	padding-top: 4.5vh;
}

.img-w{
	width: 70%;
}

/*
.max-h{
	max-height: 40vh;
}
*/

.img-w-menu{
	height: 200px;
}

.imagen-style{
	max-height: 320px;
}
	
/* Cambios visuales según las dimensiones de la pantalla o browser */
@media (max-width: 1199px) {
	.img-w{
		width: 80%;
	}
	
	.lang-prod-update{
		display: block;
	}
	
	.div-nombre-compl{
		width: 83%;
	}

	.card-container{
		display: flex;
	    align-items: flex-start;
	    justify-content: center;
	    width: 100%;
	}
	
	.error-msg{
		height: 25vh;
	}
	
	.delete-url{
		padding-bottom: 1.5rem;
	}
	
	.feat-url-rows{
		display: none;
	}
	
	.feature-label-show{
		display: block;
	}
	
	.feature-size{
		 width: 40rem;
	}
	
	.hide-br{
		display: none;
	}
	
}

@media (max-width: 991px) {
	.img-w{
		width: 75%;
	}

	.div-nombre-compl{
		width: 75%;
	}
	
	.cardRow{
		padding-top: 0;
	}
	
	#menuPrin{
		padding-top: 5vh;
	}
	
	.card-container2{
		display: flex;
	    align-items: flex-start;
	    justify-content: center;
	    width: 100%;
	}
	
	.topCard{
		margin-top: 3vh;
	}
	
	.bottomCard{
		margin-bottom: 4vh;
	}
}

@media (max-width: 767px) {
	.img-w{
		width: 85%;
	}
	
	.div-nombre-compl{
		width: 90%;
	}
	
	#firstCard{
		float: inherit;
	}
	
	#menuPrin{
		padding-top: 0;
	}
	
	.card-container-mh{
			/*
			display: flex;
		    align-items: center;
		    justify-content: center;
		    width:100%;
		    */
		    min-height: 10vh;
	}
	
	.error-msg{
		width: 80vw;
	}
	
	.input-text{
		width: 90%;
	}
	
	#radio{
		padding-bottom: 1rem;
	}
	
	.btn-gestion-row  div:nth-child(1){  /* div:nth-child(1) => Aplica el css al primer div que se encuentra dentro del contenedor con la clase btn-gestion-row */
		padding: 1rem 0 2rem 0.75rem; /* top, right, bottom, left */
	}
	
	.btn-gestion-row div:nth-child(1){
		text-align: center;
	}
	
	.btn-gestion-row div:nth-child(2){
		text-align: center;
	}
	
	.enabled-date-row div:nth-child(1){
		text-align: center;
	}
	
	.enabled-date-row div:nth-child(2){
		text-align: center;
	}
	
	.feature-size{
		 max-width: 27rem;
	}
	
	.bottomCard{
		margin-bottom: 8vh;
	}
	
}

@media (max-width: 550px){
	.img-w{
		width: 90%;
	}
	
	.error-msg{
		width: 85vw;
		height: 30vh;
	}
	
	.feature-size{
		 max-width: 20rem;
	}
	
}

@media (max-width: 400px){
	.img-w{
		width: 95%;
	}
	
	.feature-size{
		 max-width: 15rem;
	}
	
	#menuPrin{
		padding-top: 5vh;
	}
}