/* Aplicăm stilurile doar în containerul shortcode-ului */
.mayanrelation-container {
	font-family: 'Popins', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url('../images/bg3.jpg') no-repeat center center;
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
	color: white;
	padding: 40px 20px;
	width: 100%;
	min-height: 100vh;
	font-size: 100%;	
  }

  @media only screen and (max-width: 767px) {
  .mayanrelation-container {
	font-size: 80%; 
  }
}
	
	.contoured-text {
  text-shadow:
	-1px 0 1px black, /* Top right shadow */
	0 1px 1px black, /* Top left shadow */
	1px 0 1px black, /* Bottom right shadow */
	0 -1px 1px black; /* Bottom left shadow */
}

.windowDiv{

	  background-color: rgba(72, 73, 73, 0.077);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  color: white;
	  margin: 0px;
	  border: 0px solid rgb(200,200,20);
	  width: 100%;
		  
	 /*
	 padding: 4px; 
	 border-radius: 10px;
	  margin-top: 30px;
	  padding: 20px;
	  margin-left:10px;
	  margin-right:10px;*/

}

  .title {
	  color: rgba(10, 10, 10, 1);
	  font-size: 150%;
	  font-weight: normal;
	  text-align: center;
	  font-family: 'Verdana', sans-serif;
	  height: 15%;
	  background-color: rgba(72, 73, 73, 0.427);
	  width: 100%;
	  margin-top: -20px;

	/*
	  border-radius: 300px 300px 0px 0px;
	  border-left: 30px solid black;
	  border-right: 30px solid black;
	  border-top: 3px solid black;
	  margin-top: 15px; */
  }
 
  #titleHead {
	   color: white;
	   font-size: 120%;
	   font-family: 'Verdana', sans-serif;
	   font-weight: normal;
	   display: none;
	   
   }
   
   #datetag {
	   color: #eeb44d;
		font-size: 120%;
		font-family: 'Verdana', sans-serif;
		font-weight: normal;
		display: none;
	   
   }
  
 .footer {
	  width: 100%;
	  height: 15%;
	  background-color: rgba(72, 73, 73, 0.434);
/*      border-radius:  0px 0px 200px 200px;*/
  }
  
  .footer span{
	  color: #EEB44D;
		font-size: 170%;
		font-weight: bold;
		text-align: right;
		font-family: 'Verdana', sans-serif;
		padding: 20px;
		display: block;
  }


  .date-selector {
	  margin-bottom: 10px;
  }


.person-selector {
	margin-bottom: 15px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.person-selector.adding {
	opacity: 0;
	transform: translateY(20px);
}

.date-inputs-container {
	margin-bottom: 20px;
}

/* Add Person Button Styles */
#addPerson {
	background-color: #EEB44D;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: normal;
	text-transform: uppercase;
	fill: #000000;
	color: #000000;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	padding: 10px 15px 10px 15px;
	border: none;
	width: auto;
}

#addPerson:hover {
	background-color:  rgba(255, 255, 255, 1);
	transition: background-color 0.5s ease, color 0.5s ease;
}



.custom-date {
	background-color: #EEB44D;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	margin-bottom: 5px;
	letter-spacing: 1px; 
	border: none;
	color: #000000; 
	border-radius: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
	padding: 14px;
	transition: box-shadow 0.3s ease;
}

.custom-date:focus {
	box-shadow: 0px 0px 15px 0px rgba(255, 215, 0, 0.8);
	outline: none;
}

#dateInput {
	background-color: #EEB44D;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	margin-bottom: 5px;
	letter-spacing: 1px; 
	border: none;
	fill: #000000;
	color: #000000; 
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
	padding: 14px 14px 14px 14px;
}
	
.myButtonRel{
	background-color: #EEB44D;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: normal;
	text-transform: uppercase;
	
	fill: #000000;
	color: #000000;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	padding: 10px 15px 10px 15px;
	border: none;
	width: 141px;

}
	  
	  .myButtonRel:hover {
			background-color:  rgba(255, 255, 255, 1);
			transition: background-color 0.5s ease, color 0.5s ease;
		}
		
		.myButtonRelCalendar{
			background-color: #EEB44D;
			font-size: 16px;
			letter-spacing: 1px;
			font-weight: normal;
			text-transform: uppercase;
			fill: #000000;
			color: #000000;
			border-radius: 10px 10px 10px 10px;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
			padding: 10px 15px 10px 15px;
			border: none;
			width: 141px;
			display: none !important;
		}
		
		.myButtonRelCalendar:hover {
			background-color:  rgba(255, 255, 255, 1);
			transition: background-color 0.5s ease, color 0.5s ease;
			display: none !important;
		}
	  
	  
	   .myButton2{
		background-color: #EEB44D;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 1px;
		fill: #000000;
		color: #000000;
		border-radius: 10px 10px 10px 10px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		padding: 15px 35px 15px 35px;
		  }
		  
		  .myButton2:hover {
				background-color:  #EEB44D;
				border: 1px;
				border-color: #EEB44D;
				transition: background-color 0.5s ease, color 0.5s ease;
			} 
	
  label {
	  display: block;
	  margin-bottom: 10px;
  }
  
  .container {
	display: flex;
	flex-wrap: wrap;
	background-color: rgba(255, 255, 255, 0);
	align-content: right;
	/* color: rgb(0, 0, 0); */
	
  }

  .nagual {
	  display: flex;
}
	.custom-date {
		background-color: #EEB44D;
		font-size: 16px;
		font-weight: normal;
		text-transform: uppercase;
		margin-bottom: 5px;
		letter-spacing: 1px; 
		border: none;
		fill: #000000;
		color: #000000; 
		border-radius: 10px 10px 10px 10px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
		padding: 14px 14px 14px 14px;
	
	}
	
	.myButtonRel{
		background-color: #EEB44D;
		font-size: 16px;
		letter-spacing: 1px;
		font-weight: normal;
		text-transform: uppercase;
		
		fill: #000000;
		color: #000000;
		border-radius: 10px 10px 10px 10px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		padding: 10px 15px 10px 15px;
		border: none;
		width: 141px;
	
	}
		  
		  .myButtonRel:hover {
				background-color:  rgba(255, 255, 255, 1);
				transition: background-color 0.5s ease, color 0.5s ease;
			}
			
			.myButtonRelCalendar{
				background-color: #EEB44D;
				font-size: 16px;
				letter-spacing: 1px;
				font-weight: normal;
				text-transform: uppercase;
				fill: #000000;
				color: #000000;
				border-radius: 10px 10px 10px 10px;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
				padding: 10px 15px 10px 15px;
				border: none;
				width: 141px;
				display: none !important;
			}
			
			.myButtonRelCalendar:hover {
				background-color:  rgba(255, 255, 255, 1);
				transition: background-color 0.5s ease, color 0.5s ease;
				display: none !important;
			}
		  
		  
		   .myButton2{
			background-color: #EEB44D;
			font-size: 14px;
			font-weight: normal;
			text-transform: uppercase;
			letter-spacing: 1px;
			fill: #000000;
			color: #000000;
			border-radius: 10px 10px 10px 10px;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
			padding: 15px 35px 15px 35px;
			  }
			  
			  .myButton2:hover {
					background-color:  #EEB44D;
					border: 1px;
					border-color: #EEB44D;
					transition: background-color 0.5s ease, color 0.5s ease;
				} 
		
  label {
	  display: block;
	  margin-bottom: 10px;
  }
  
  .container {
	display: flex;
	flex-wrap: wrap;
	background-color: rgba(255, 255, 255, 0);
	align-content: right;
	/* color: rgb(0, 0, 0); */
	
  }

  .nagual {
	  display: flex;
	  flex-direction: column;
	  flex-wrap: wrap;
	  background-color: rgba(25, 109, 94, 0.765);
	  color: white;
	  padding: 0px;
	  border: 1px solid #EED44B;
	  border-radius: 10px;
	  height: 100%;
	  max-width: 150px;
      box-shadow:
	-4px 0 4px rgb(34, 34, 33), /* Top right shadow */
	0 4px 4px rgb(34, 34, 3), /* Top left shadow */
	4px 0 4px rgb(34, 34, 3), /* Bottom right shadow */
	0 -4px 4px rgb(34, 34, 3); /* Bottom left shadow */

  }
  
  .nagual:hover{
		box-shadow:
		-4px 0 4px rgb(238, 180, 74), /* Top right shadow */
		0 4px 4px rgb(238, 180, 77), /* Top left shadow */
		4px 0 4px rgb(238, 180, 77), /* Bottom right shadow */
		0 -4px 4px rgb(238, 180, 77); /* Bottom left shadow */
		
	}
	
  .nagualine {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  margin: auto; /* Center the image horizontally */
	  color: white;
	  
  }

  .nagualinfo {
      width: 100%;
	  display: flex;
	  flex-direction: column;
	  flex-wrap: wrap;
	  background-color: rgba(148, 0, 0, 0);
	  color: white;
	  /* padding:auto; */
	  text-align: center;
	  
  }

  .nagualenglish{
	  color: rgba(230,230,100,1);
	  font-size: 80%;
  }

  .nagualtitle{
	  color: rgb(255,255,100);
	  text-align: center;
	  font-size: 90%;
	   font-variant: small-caps;
	  text-align: center;
	  padding: 2px;
	  border-radius: 10px;
	  background-color: rgba(200,50,20,0.6);
  }

  .numeral{
	  font-weight: bold;
	  color: rgb(160,190,0);
	  font-size: 100%;
  }
  .nagualname{
	  font-weight: bold;
	  color: yellow;
	  font-size: 100%;
  }
  
  .day-sign {
	width: 20%;
	margin-bottom: 20px;
	border: 2px solid tomato;
	 display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 2px;
	padding: 5px;
  }
  .day-sign img {
	max-width: 50%%;
	height: auto;
	align: center;
  }
  .day-sign .info {
	margin-top: 10px;
  }

  .day-sign .info > h3 {
	  color: green;
	  font-size: 200%;
	  
  }
  
  .grid-container {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  grid-gap: 5px;
	  margin-top: 20px;
	  overflow-y: auto;
	  grid-auto-rows: min-content;
	  padding-bottom: 30px;
	  padding-left: 5px;
	  padding-right: 5px;
	  overflow-x: hidden !important;
  }
  .grid-container2 {
      width: 100%;
  /*border: 2px solid black;*/
	  display: flex;
	  grid-template-columns: repeat(5, 1fr);
	  /* margin-top: 20px;
	  margin-bottom: 20px; */
      flex-direction: row;
	  justify-content: center;
  }  

  .grid-item {
	 /*margin: auto; /* Center the image horizontally */
	  padding: 1px;
	  text-align: center;
	  height: 100%;
	  margin: auto;
	  max-width: 150px;
	  min-width: 50px;
	  /* padding-top: 20px;      
	  padding-bottom: 20px; */
*/
  }
  
  
  .grid-item img {
	  max-width: 40% !important; /* Set maximum width to 100% of the container */
	  max-height: 60%; /* Set maximum height to 100% of the container */
	  /* min-width: 30%;
			min-heith: 40%;
	 margin: auto;  */
 
	  display: block; 
	  
	  /* object-fit: cover; /* Scale the image while preserving its aspect ratio */ */
  }
 
  .nagualine img {
	  max-width: 55% !important; /* Set maximum width to 100% of the container */
	  max-height: 60% !important; /* Set maximum height to 100% of the container */
	  /*min-width: 30%;
			min-heith: 40%;*/
	  margin: auto; /* Center the image horizontally */
 
	  display: block; /* Ensure the image is treated as a block element */
	  
	  /*object-fit: cover; /* Scale the image while preserving its aspect ratio */
  }
 
  
  .rien {

	  border: 0px;
  } 
  
  .calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  
}

.calendar-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.calendar-grid {
  display: grid;
/*      grid-template-columns: repeat(7, 1fr);
	  grid-gap: 10px;
*/
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.calendar-day {
/*  width: calc(100% / 7); */
  text-align: center;
  padding: 5px;
  display: flex;
  flex-direction: column;
  max-width: 20%; 
  margin: auto;
  margin-bottom: 10px;
  background-color: rgba(25, 109, 94, 0.504);
  border-radius: 10px;
}

.dayNag{

   display: flex;
}

.today {
  background-color: #eee;
}
  
 .dayString{
 font-size: 120%;
 text-align: left;
 color: rgba(250,189, 77,1.0);
 text-shadow:
	-1px 0 1px black,
	0 1px 1px black, 
	1px 0 1px black, 
	0 -1px 1px black;
	 font-weight: bold;
 text-align: center;
 padding-top: 2px;
 padding-bottom: 2px;

 }

.mayaDate{
/*  font-size: 150%;*/
  /* width: 100%; */
  color:rgba(200, 50, 20, 0.9);
  /*
  font-weight: bold;
  text-align: center;
  */
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
  }
  
.textDateOuter{
border: 1px solid rgb(250 119 37);
background-color: rgb(238, 180, 77, 0.174);
border-radius: 10px;
display: flex;
flex-direction: row;
padding: 5px;
margin: 5px;
}

.textDate{
	display: flex;
	flex-direction: column;
/*	width: 100%; 
	border: 1px solid rgb(250 119 37);
	border-radius: 20px;
	*/
	padding: 0px;
	margin: 5px;
}

.textDateTitle{
/*min-width: 25%;*/

 color: white;
 text-shadow:
	-1px 0 1px black,
	0 1px 1px black, 
	1px 0 1px black, 
	0 -1px 1px black;
 /*   
 color: rgba(200, 50, 20, 0.6);*/
	padding: 5px;	
	font-size: 130%;
	font-weight: bold;
}
.textDateContent{
	display: flex;
	flex-direction: row;
}

.textDateElement{
	border: 1px solid rgb(250 119 37);
	margin-left: 2px;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: rgba(125, 40, 0, 0.6);
}
.textDateElementTitle{
	 color: rgba(200,200,100,1);
}

.textDateNumber{
	color: springgreen;
	text-align: center;
	font-weight: bold;
		flex-grow: 1;
	flex-shrink:1;
	/*line-height: 100%;*/


}
.textDateString{
	text-align: center;
		 color: rgba(255,200,80,1);
	font-weight: bold;
		flex-grow: 1;
	flex-shrink:1;

}

.textDateOuter .nagual {
  margin-left: 10px;
  max-width: 100px;
}

 .tooltip {
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}

	.tooltip .tooltiptext {
	font-size: 80%;
		visibility: hidden;
		width: 220px;
		background-color: #EEB44D;
		color: black;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 125%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}
	
	.subscriber-message-relation {
		margin-top: 10px;
		text-align: center;
	  font-family: 'Verdana', sans-serif;	
	  font-size:20px; /* Schimbă mărimea textului */
	  color: white; /* Schimbă culoarea textului (ex: roșu tomat) */
	  text-shadow: 2px 2px 5px black;
	
	}
	
	.subscriber-message-relation a.login-link {
		margin-top: 10px;
		font-family: 'Verdana', sans-serif;
	  color: white;
	  font-size:20px; /* Culoare pentru link (albastru) */
	  text-shadow: 2px 2px 5px black;
	  
	}
	
	.subscriber-message-relation a.login-link:hover {
	  color: #EEB44D; /* Culoare la hover (ex: portocaliu) */
	  text-decoration: underline; /* Adaugă subliniere când se face hover pe link */
	}
	
	.person{
	 	  margin-top: 10px;
		  margin-right: 10px;
		  text-align: center;
		  font-family: 'Verdana', sans-serif;	
		  font-size: 20px; /* Schimbă mărimea textului */
		  color: white; /* Schimbă culoarea textului (ex: roșu tomat) */
		  text-shadow: 2px 2px 5px black;
		
	}

/* Compatibility calculation styles */
.compatResult {
  /* margin-top: 20px;
  border: 2px solid rgb(238, 180, 77);
  border-radius: 15px;
  padding: 10px;
  background-color: rgba(25, 109, 94, 0.2);
  box-shadow: 0 0 15px rgba(238, 180, 77, 0.5); */
}

.compatResult .textDateOuter {
  background-color: rgba(238, 180, 77, 0.3);
  border: 1px solid rgb(250, 119, 37);
}

.compatResult .textDateTitle {
  color: rgb(255, 215, 0);
  font-size: 140%;
  text-align: center;
}

.compatFormula {
  /* font-weight: bold;
  margin-bottom: 10px;
  padding: 8px;
  background-color: rgba(125, 40, 0, 0.4);
  border-radius: 8px;
  color: rgb(255, 215, 0);
  border: 1px dashed rgb(250, 119, 37);
  text-align: center; */
}

.compatNagual {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.compatNagual .nagual {
  max-width: 150px;
  margin: auto;
  border: 2px solid rgb(255, 215, 0);
}
/* Add Person animations */
.person-selector {
  margin-bottom: 15px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: white;
}

.person-selector-label {
  color: white;
}

.person-selector.adding {
  opacity: 0;
  transform: translateY(20px);
}

.date-inputs-container {
  margin-bottom: 20px;
}

/* Add Person Button enhancements */
#addPerson {
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#addPerson:hover {
  background-color:  rgba(255, 255, 255, 1);
  transition: background-color 0.5s ease, color 0.5s ease;
}