/* for subscribe form */
	.container {
		font-family: Arial, sans-serif;
			/* background-color: #f4f4f9; */
			/* margin: 40px; */
			display: flex;
			justify-content: center;
			align-items: center;
			/* height: 80vh; */
		}
        
        .newsletter-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra alrededor del formulario */
        }
        .form-label {
            margin-bottom: 10px;
            display: block;
            color: #333; /* Color del texto */
        }
        .form-input {
            width: calc(100% - 22px);
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .submit-btn {
            background-color: #0056b3; /* Color de fondo del botón */
            color: white;
            border: none;
            padding: 10px 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .submit-btn:hover {
            background-color: #004494; /* Cambio de color al pasar el ratón */
        }


		

body {
	  background: #d0ebff;
	  color: white;
	  font-size: 32px;
	  text-align: center;
	  font-family: 'Inter custom', sans-serif;
	}
	
	
	.helpful-notice {
		background-color: #fefefe;
		border: 1px solid #888;
		border-radius: 10px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		padding: 30px 60px;
		position: relative;
		
		font-family: Arial, sans-serif;
		margin:20px;	
			align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 14px;
		color: #333;
	}

	.modal {
	    display: none;
	    position: fixed;
	    z-index: 1;
	    left: 0;
	    top: 0;
		color:black;
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    background-color: rgba(0,0,0,0.4);
	}

	.modal-content {
	    background-color: #fefefe;
	    margin: 15% auto;
	    padding: 20px;
	    border: 1px solid #888;
	    width: 80%;
	    border-radius: 10px;
	    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
	}

	.close {
	    color: #aaa;
	    float: right;
	    font-size: 28px;
	    font-weight: bold;
	    cursor: pointer;
	}

	.close:hover,
	.close:focus {
	    color: black;
	    text-decoration: none;
	    cursor: pointer;
	}




	a {
	  color: #ffb703;
	  text-decoration: none;
	  text-shadow: 1px 1px 0 #023047, -1px -1px 0 #023047, 1px -1px 0 #023047, -1px 1px 0 #023047, 1px 1px 0 #023047;
	  position: relative;
	}

	a::after {
	  content: "";
	  position: absolute;
	  bottom: -3px;
	  left: 0;
	  height: 2px;
	  width: 100%;
	  background-color: #219ebc;;
	  transform: scaleX(0);
	  transform-origin: left;
	  transition: transform 0.2s ease-in-out;
	}

	a:hover::after {
	  transform: scaleX(1);
	}


      .data-block {
        display: inline-block;
        padding: 20px;
        margin: 10px;
        border: 2px solid #ffb703;
        border-radius: 10px;
        background: linear-gradient(to bottom right, #219ebc, #023047);
      }
		h1 {
				color: white;
				/*-webkit-text-stroke: 2px #023047;
				text-stroke: 2px #023047;*/
				box-shadow: 0 0.8px 1.5px rgb(0 0 0 / 3%), 0 2.7px 4.9px rgb(0 0 0 / 4%), 0 12px 22px rgb(0 0 0 / 7%);
				border-radius: 5px;
				/* border: 1px solid #bfbfbf59; */
				background-color: black;
		
		
		  color: white;
		      margin-bottom: 9px;
		 
		      box-shadow: 0 0.8px 1.5px rgb(0 0 0 / 3%), 0 2.7px 4.9px rgb(0 0 0 / 4%), 0 12px 22px rgb(0 0 0 / 7%);
			  border-radius:5px;
			   /*border: 1px solid #ffb703;*/
			   font-size: 37px;
			   
		}

      
	  .loading {
		display: flex;
		justify-content: center;
	  }
	#jsonData {
		font-size:12px;
		color:black;
		
	  }
	  #titlec {
		font-size:19px;
		color:black;
	  }
	  #jsonData b{
		font-size:35px;
		color:#ffb703;
		text-shadow: 1px 1px 0 #023047, -1px -1px 0 #023047, 1px -1px 0 #023047,
				-1px 1px 0 #023047, 1px 1px 0 #023047;
	  }
	#jsonDatacolor {
		font-size:19px;
		color:black;
		
	  }
	  #datetimere{font-size:100px !important;    color: #fb8500!important;}
	  
	  #jsonDatacolor b{
		font-size:13px;
		color:black;
	}

	  .loading-bar {
		width: 40px;
		height: 18px;
		margin: 10 8px;
		border-radius: 4px;
		animation: loading 1s ease-in-out infinite;
		background-color: #023047;
	  }

	  @keyframes loading {
		0% {
		  transform: scale(1);
		}
		20% {
		  transform: scale(1, 2.5);
		}
		40% {
		  transform: scale(1);
		}
	  }
	  canvas {
        /*width: 80vw;
        height: 80vh;*/
		 box-shadow: 0 0.8px 1.5px rgb(0 0 0 / 3%), 0 2.7px 4.9px rgb(0 0 0 / 4%), 0 12px 22px rgb(0 0 0 / 7%);
			  border-radius:5px;
			   border: 1px solid #cbcbcb;
      }
	  
	 
	  #subtitlec{    color: #ffb703;
		font-size: 22px;
		-webkit-text-stroke: 0px #023047;
		text-shadow: 1px 1px 0 #023047, -1px -1px 0 #023047, 1px -1px 0 #023047,
				-1px 1px 0 #023047, 1px 1px 0 #023047;
		font-weight: 600;}
		
		.loading {
		display: flex;
		justify-content: center;
	  }

	  .loading-bar {
		width: 40px;
		height: 18px;
		margin: 10 8px;
		border-radius: 4px;
		animation: loading 1s ease-in-out infinite;
		background-color: #023047;
	  }

	  @keyframes loading {
		0% {
		  transform: scale(1);
		}
		20% {
		  transform: scale(1, 2.5);
		}
		40% {
		  transform: scale(1);
		}
	  }
	  
	  
	  .live-icon {
    width: 120px;
    height: 38px;
    border-radius: 10%;
    background-color: #ff5555;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-flex;
}

		.live-dot {
		  width: 24px;
		  height: 24px;
		  border-radius: 50%;
		  background-color: #ffffff;
		  margin-left: 59px;
		}

		.live-text {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  color: #ffffff;
		  font-size: 24px;
		  font-weight: bold;
		  text-transform: uppercase;
		  margin-left: -20px;
		}

	  
	  @media screen and (min-width: 1024px) and (orientation: landscape) {
		  
		  #brid{display:none}

		  #datetimere{font-size:100px !important;    color: #fb8500!important;}
	  
		  #jsonData b{
			font-size:35px;
			color:#ffb703;
			text-shadow: 1px 1px 0 #023047, -1px -1px 0 #023047, 1px -1px 0 #023047,
					-1px 1px 0 #023047, 1px 1px 0 #023047;
		  }
		  
		}

	  
	  @media screen and (max-width:768px){
		  .menu-btn {
			  left: 0px !important;
			  
			}
		  
		h1 i{display:none}
		 #jsonData b{
			font-size:25px;
			color:#ffb703;
			-webkit-text-stroke: 0px #023047;
			
			
			  text-shadow: 1px 1px 0 #023047, -1px -1px 0 #023047, 1px -1px 0 #023047,
				-1px 1px 0 #023047, 1px 1px 0 #023047;
			
			
		  }
		  	  #datetimere{font-size:58px !important;    color: #fb8500!important;}

	  }
	  #blink {
		  animation: blink 1s infinite;
		}

		@keyframes blink {
		  50% {
			opacity: 0;
		  }
		}
		
		//menu
		.menu-btn {
	  position: relative;
	  display: inline-block;
	  padding: 12px 24px;
	  font-size: 18px;
	  font-weight: bold;
	  color: white;
	  text-transform: uppercase;
	  background-color: #023047;
	  border: none;
	  border-radius: 6px;
	  cursor: pointer;
	}

	.menu-btn:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: #219ebc;
	  z-index:-1;
	  border-radius: 6px;
	  transform: scale(0);
	  transform-origin: center;
	  transition: transform 0.3s ease-in-out;
	}

	.menu-btn:hover:before {
	  transform: scale(1);
	}
	/* Hide the sidebar by default */
	.sidebar {
	  position: fixed;
	  top: 0;
	  padding-top: 29px;
    font-size: 25px;
	  left: -300px;
	  height: 100%;
	  width: 300px;
	  background-color: #b5dbeb;
	  transition: left 0.3s ease-in-out;
	}

	.canvas-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .canvas-container::before, .canvas-container::after {
            content: '';
            position: absolute;
            width: 96%;
            height: 750px;
            border-left: 2px solid black; /* Línea izquierda */
            border-right: 2px solid black; /* Línea derecha */
            
        }

	.sidebar li{
		margin-bottom:59px;
	}
	 
	/* Show the sidebar when the menu button is clicked */
	.sidebar.active {
	  left: 0;
	  z-index: 99; 
	}

	/* Style the menu button */
	.menu-btn {
	  position: fixed;
	  top: 10px;
	  left: 20px;
	  width: 40px;
	  height: 40px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  cursor: pointer;
	  z-index: 9999;
	}

	.menu-btn span {
	  box-shadow: 0 0.8px 1.5px rgb(0 0 0 / 1%), 0 2.7px 4.9px rgb(0 0 0 / 84%), 0 12px 22px rgb(0 0 0 / 1%);

	  display: block;
	  width: 25px;
	  height: 3px;
	  margin: 3px;
	  background-color: white;
	  transition: transform 0.3s ease-in-out;
	}

	/* Rotate the spans to create an X shape when the menu button is clicked */
	.menu-btn.active span:first-child {
	  transform: rotate(45deg);
	  transform-origin: center;
	}

	.menu-btn.active span:nth-child(2) {
	  transform: scaleX(0);
	}

	.menu-btn.active span:last-child {
	  transform: rotate(-45deg);
	  transform-origin: center;
	}
	
	
	
	
	


/* Input Field Styling */
#newTitleContent {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px;
}

/* Anchor as Button Styling */
.update-button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #d79a00;
	font-size: 14px;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}

.update-button:hover {
    background-color: #219ebc; /* darker green on hover */
}