@charset "UTF-8";

html, body {
	font-family: Arial, Helvetica, sans-serif;
	background-color:#F7F7F7;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;	
}
 img {
     max-width: 100%;
     display: block;
     height: auto;
     width: auto;    
     image-rendering: high-quality;
     /* image-rendering: -webkit-optimize-contrast;	*/
	 pointer-events: none;/* No descarga de imagenes */
    
}

button {
	background-color: #FF0000;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
}
		button:hover {
		  opacity: 0.8;
		}
		
/* Botón Subir */
 #irarriba span{
     position: fixed;
     bottom: 20px;
     right: 25px;
     width: 55px;
     height: 55px;
     background-color: #DE2A20;
     background-image: url(../images/Icons/arrowup.png);
     border-radius: 200px 200px 200px 200px;
     -moz-border-radius: 200px 200px 200px 200px;
     -webkit-border-radius: 200px 200px 200px 200px;
     border: 0px solid #000000;
     opacity: 0.6;
     -webkit-transition: opacity .20s ease-in-out;
     transition: opacity .20s ease-in-out;
     z-index: 99999;
}
 #irarriba:hover span{
     opacity: 1;
}

/* ------------------------------------ LOGIN ------------------------------------------ */



.pan {
	background-color: #F7F7F7;
	max-height:500px;
	min-width:450px;
	display: grid;
	grid-template-rows:1fr 1fr 1fr;
	padding-top:40px;
	padding-bottom:20px;
	justify-items:center; /* justificacion */	
}

.queso {
    background-color: ;
    display: grid;
    justify-items: center; /* justificacion */
    align-items: center; /* justificacion */
    width: 430px;
	
}
.pimiento {
	background-color: ;
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
}

.pimientoseco {
	background-color: auto;
	display: grid;
	justify-items:center; /* justificacion */
	align-items: center; /* justificacion */
}

.aceite {
	background-color: white;
	max-width: 400px;
	min-width: 400px;
	min-height:60px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size:17px;
	text-align:center;
	transition:0.3s;
	color:grey;
	border: none;
}

.aceite > input[type=text]:focus, input:focus {	
	outline: 1px solid #FF6B00;
	color:#F2BDBC;
}

.vinagre {
    background-color: #FF6B00;
    max-width: 400px;
    min-height: 60px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 17px;
    border-bottom: 3px solid #F48E44;
    transition: 0.3s;
}

.chorizo {				
	background-color: auto;
	display: flex;	
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start; /* justificacion */
	max-width: 400px;
	min-width:400px;
	height:80px;
	padding-top:20px;
	border-top: 1px solid #E0E0E0;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size:14px;
	color:grey;
	}
			  
			  
/* ----------------------------------- ADMIN DASHBOARD 2.0 ------------------------------------- */



.flex-cont {
	display: flex;  
	flex-direction: column;
	background-color: red; 
	height: 100%; /* Para hacer que la página que ocupe toda la vertical */
    min-height: 100%; /* Para hacer que la página que ocupe toda la vertical */
}

/* Estilos del header */
.admin-header { 
	height:80px; 
	background-color: #F7F7F7;
	display: flex;
	flex-direction: row;
	border-bottom: 2px solid #CCD6F8;
	justify-content: space-between;
}
.admin-header-left{
    padding: 15px;
    padding-left: 25px;
    background-color: #F7F7F7;
    width: 338px;
}
.admin-header-right{
	width:auto; 	
	display: flex; 
	flex-direction: row; 
	justify-content: end; 
	padding: 15px;
	padding-right:35px;
}

.right-info { width:160px; display: flex; flex-direction: column; justify-content:end; font-size: 13px;}
.right-info-date { text-align:right; padding: 2px;}
.right-info-firmware { text-align:right; padding: 2px;}
.right-exit{width:50px; height:50px; display: flex; align-items: center; justify-content: end; background-color: ; }

.admin-avisos {
	height:35px; 	
	background-color: #FFFCDA; 
	border: 1px solid #DECE10;
	display: flex; 
	align-items: center; 
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;	
	font-size:14px;
	color:#DECE10;
	padding-top: 7px;
	padding-bottom:7px;
}

/* Estilos del menu izquierdo */
.admin-info {flex: 1;background-color: white; display:flex; flex-direction: row;}

.admin-info-left {
	padding: 15px;
	padding-top:30px;
	padding-left:25px; 
	background-color: #F7F7F7; 
	min-width:197px; 
	height:100%;
	font-family: 'Roboto', sans-serif;
}
.admin-info-left a {text-decoration: none; color:inherit;}
.info-links-menu {display: flex; flex-direction: row; height:30px; margin-bottom:5px; font-weight: bold;}
.info-links-menu-icon {
    width: 16px;
    background-color: #F7F7F7;
    margin-right: 5px;
    display: flex;
    align-items: center;	
}
.info-links-menu-text {display: flex; align-items: center}
.info-links-menu-separator {height:10px; width:80%; margin-top:3px;border-bottom: 1px solid #CCD6F8;}
.colorblue {color:#1652F0;} 
.colorgreen {color:#27A73B;}
.colororange {color:#FF6B00;}
.coloryellow {color:#DBC510;}
.colorred {color:#EF1515;}
.colorpurple {color:#C216F0;}
.colorhostinger {color:#673DE6;}  
.colorpaleorange {color:#EAC08A;}
.colorgreenpale {color: #91F286;}
.colorbluepale {color: #86DAF2;}  
.coloraqua {color: #49CCBC;} 




/* Estilos de las tabla de datos */
.admin-info-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    padding-top: 30px;
    padding-left: 45px;
    padding-bottom: 120px;
    font-size: 12px;
}
.right-title {background-color: ; height: 70px;font-size: 35px; font-weight: bold;font-family: 'Roboto', sans-serif;}
.right-avisos {
	background-color: #E6FAFF; 
	border: 1px solid #85DAF2;  
	height: 80px; 
	width: 95%; 
	padding-left: 15px; 
	margin-bottom: 15px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

.right-avisos-info {
	height:100%; 
	max-width: 800px; 
	background-color: ;	 	
	color:#4ACBEF;
	line-height: 17px;
	padding-top: 15px;
	
}

input[type="file"] {    display: ;}
.button-image {
    width: 120px;
    text-align: center;
    background-color: #4DC8EA;
    border-radius: 3px;
    border: 0px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-size: 12px;
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 10px;
    text-decoration: none;
    font-weight: bold;
}
.right-avisos-buttons {
	height:100%; 
	width: auto; 
	background-color:;
	display: flex;
  	align-items: center;
  	justify-content: center;
	padding-right:25px;
	gap:10px;
}
.button-upload {
    width: auto;
    text-align: center;
    background-color: #EF7D2F;
    border-radius: 3px;
    border: 0px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-size: 14px;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
}
.button-metaphone {
 	width:auto;
	text-align: center;
	background-color: #4DC8EA;
	border-radius: 3px;
	border: 0px solid #18ab29;
	display: inline-block;
	cursor: pointer;
	color: white;	
	font-size: 14px;
	padding: 10px 20px;
	text-decoration: none;
	font-weight: bold;
}
.button-metaphone:hover { transition: 0.3s;   background-color: #7ED8F1;
}



.right-results-title {
	background-color:; 
	width: 95%;
	height: 32px; 
	border-bottom: 1px solid #CCD6F8;
	display: flex;
	gap:5px;
	flex-direction: row;
	align-items: center;
	padding-left:15px;
	color:#A8A8A8;	
	margin-bottom:15px;
}
.right-results {
	background-color:;
    width: 95%;
    height: 32px;
    height: auto;
    border-bottom: 1px solid #E5EAFB;
    display: flex;
    gap: 5px;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
	color: #323232;
}
.right-results:hover {background-color: #F0F5F8; transition: 0.1s;}
.todaybackground {background-color:#F3FBED;}




/* Estilos de la tabla de VISITORS, BOTS y GOOGBOTS */
.right-results-order {background-color:;display: flex;align-items: center; width: 3%;}
.right-results-buttons {background-color:;display: flex;align-items: center; gap:5px; width: 21%; min-width: 280px;}
.right-results-ip {background-color:;display: flex;align-items: center;width: 17%; min-width: 250px;}
.right-results-ip a {color:#1652F0;}
.right-results-origen {background-color:;display: flex;align-items: center; width: 23%;}
.right-results-origen-goodbots {background-color:;display: flex;align-items: center; width: 15%;}
.right-results-isp {background-color:;display: flex;align-items: center; width: 12%;}
.right-results-date {background-color:;display: flex;align-items: center; width: 8%;}
.right-results-times {background-color:;display: flex;align-items: center;width: 4%;}
.right-results-last {background-color:;display: flex;align-items: center;width: 5%;}
.right-results-tipo {background-color:;display: flex;align-items: center;width: 5%;}
.today {color: #62C61C;}

.button {
 	width:55px;
	text-align: center;
	background-color: grey;
	border-radius: 5px;
	border: 0px solid #18ab29;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;	
	font-size: 14px;
	padding: 3px 20px;
	text-decoration: none;
	font-weight: bold;
}
.bbotg {background-color: #FFE9CD; color:#FE8504;}
.bdelete {background-color: #D7E7FF; color:#0869FF;}
.bblock {background-color: #FFD9DB; color:#FC1F28;}
.bgbot {background-color: #CCFBD2;color: #4DDB31;}
 
.bbotg:hover {background-color: #EF904B; color:white; transition:0.3s;}	
.bdelete:hover {background-color: #90A9EC; color:white; transition:0.3s;}
.bblock:hover {background-color: #EE7071; color:white; transition:0.3s;}
.bgbot:hover {background-color: #96DB66; color: white; transition: 0.3s;
}


/* Estilos de la tabla de SUBSCRIPTORS */
.right-results-order-subs {background-color:;display: flex;align-items: center; width: 3%;}
.right-results-buttons-subs {background-color:;display: flex;align-items: center; gap:5px; width: 12%; min-width: 200px;}
.right-results-email-subs {background-color:;display: flex;align-items: center; width: 20%;}
.right-results-email-subs a {color:inherit; text-decoration: none;}
.right-results-email-subs a:hover {text-decoration: underline;}
.right-results-ip-subs {background-color:;display: flex;align-items: center; width: 15%;}
.right-results-origen-subs {background-color:;display: flex;align-items: center; width: 18%;}
.right-results-date-subs {background-color:;display: flex;align-items: center; width: 10%;}
.right-results-observations-subs {background-color:;display: flex;align-items: center; width: 20%;}


/* Estilos de la tabla de PRODUCTS */
.right-results-order-prod {background-color:;display: flex;align-items: center; width: 3%; }
.right-results-buttons-prod {background-color:;display: flex;align-items: center; gap:5px; width: 17%; min-width: 320px;}
.right-results-name-prod {background-color:;display: flex;align-items: center; width: 20%;}
.right-results-name-prod a {color:blue; text-decoration: underline;}
.right-results-name-prod a:hover {text-decoration: underline;}
.right-results-reference-prod {background-color:;display: flex;align-items: center; width: 8%; }
.right-results-active-prod {background-color:;display: flex;align-items: center; width: 5%;}
.right-results-vistas-prod {background-color:;display: flex;align-items: center; width: 5%;}
.right-results-buy-prod {background-color:;display: flex;align-items: center; width: 9%;}
.right-results-category-prod {background-color:;display: flex;align-items: center; width: 6%;}
.right-results-date-prod {background-color:;display: flex;align-items: center; width: 6%;}

.activered {color:red;}
.colorblue1 {color:#1652F0;}


.bedit {background-color: #CBEED7; color:#07A426;}
.bcopy {background-color: #FFD9DB; color:#FC1F28;}

.bedit:hover {background-color: #76C08F; color:white; transition:0.3s;}	
.bcopy:hover {background-color: #EF904B; color:white; transition:0.3s;}	




/* Estilos de la tabla de EDIT/UPLOAD WATCHES */
.right-edit-section {
    width: 95%;
    height: auto;
	background-color: ;
    padding-left: 0px;
    display: flex;
    flex-direction: row;
    gap: 1%;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 12px;
}

input[type=checkbox] {
	top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #DDDD05;

}

.right-edit-separator {
    width: 95%;
    height: 2px;
    background-color: #CDCDCD;
    margin-bottom: 18px;
    margin-top: 8px;
}
.edit-group-1 {
	width:100%;
	height:100%;
	background-color: ;
}
.edit-group-2 {
	width:33%;
	height:100%;
	background-color: ;
}
.edit-group-3 {
	width:15%;
	height:100%;
	background-color: ;
}

.edit-group-4 {
    width: 7%;
    height: 100%;
	background-color: ;
}
.edit-tab-title {
    margin-bottom: 3px;
}
.edit-tab-input {    
    width: 100%;
	font-size: 12px;
}
.edit-input {
    width: 100%;
    box-sizing: border-box;
    border-style: none;
    background-color: #EDEDED;
    height: 28px;
    padding-left: 6px;
    padding-right: 6px;
	
}

.edit-input:focus {
   color:blue;
   border-color: blue;
   outline: 0px solid red;
}

.edit-input-required {
    width: 100%;
    box-sizing: border-box;
    border-style: none;
    background-color: #EDF3F5;
    height: 28px;
    padding-left: 6px;
    padding-right: 15px;
    color: #677587;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.text-box-edit {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
}

.right-edit-section-final {
    height: 150px;
}




/* Estilos del Footer */
.admin-footer{
	min-height:200px; 
	background-color: #2249AF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	color:white;
	font-size: 15px;
}
.admin-footer a{	
	color:white;
	margin-left:5px;
	text-decoration: none;
}
.admin-footer a:hover{text-decoration: underline;}