@font-face {
	font-family: 'Orbitron';
	src: url('../Orbitron/Orbitron-VariableFont_wght.ttf') format('truetype'),
		 url('../Orbitron/static/Orbitron-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Import Google Font */
@import url(https://fonts.googleapis.com/css?family=VT323);

html, body, div, h1, h2, h3, p, ul, li, a, button, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
	font-family: 'VT323', 'Orbitron', 'Arial', sans-serif;
	background-color: #0a0a0a;
	color: #ffcc00;
	text-align: center;
}

.body-green-bg {
	background-color: green;
}

.body-red-bg {
	background-color: red;
}

h1 {
	text-align: center;
	color: #ffcc00;
	width: 100%;
	margin: 20px auto;
	padding: 20px 0 0 0;
	font-family: 'VT323';
}

h2 {
	font-size: 1.2rem;
	color: #ffcc00;
	font-family: 'VT323';
}

h3 {
	font-size: 3rem;
	padding: 10px;
	font-family: 'VT323';
}

h4{font-size: 2.5rem;}
.green-bg {
	background: linear-gradient(45deg, transparent 50%, rgba(0, 204, 102, 0.49) 50%),
				linear-gradient(135deg, transparent 50%, rgba(0, 204, 102, 0.49) 50%),
				rgba(0, 204, 102, 0.49);
	background-size: 20px 20px;
	background-position: 0 0, 10px 0;
	box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.7);
	border: 4px solid #00cc66;
	width: 90%;
	animation: green-glow-animation 2s infinite alternate;
}

.red-bg {
	background: linear-gradient(45deg, transparent 50%, rgba(255, 51, 51, 0.7) 50%),
				linear-gradient(135deg, transparent 50%, rgba(255, 51, 51, 0.7) 50%),
				rgba(255, 51, 51, 0.7);
	background-size: 20px 20px;
	background-position: 0 0, 10px 0;
	box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
	border: 4px solid #ff3333;
	width: 90%;
	animation: red-glow-animation 2s infinite alternate;
}

/* Continuous glow animation for green button */
@keyframes green-glow-animation {
	0% {
		box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.7);
	}
	100% {
		box-shadow: 0 0 20px rgba(0, 255, 0, 0.9), 0 0 40px rgba(0, 255, 0, 0.9), 0 0 60px rgba(0, 255, 0, 0.9);
	}
}

/* Continuous glow animation for red button */
@keyframes red-glow-animation {
	0% {
		box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
	}
	100% {
		box-shadow: 0 0 20px rgba(255, 0, 0, 0.9), 0 0 40px rgba(255, 0, 0, 0.9), 0 0 60px rgba(255, 0, 0, 0.9);
	}
}

/* General button styling */
.button-fullscreen {
	width: 90vw;
	height: 150px;
	font-size: 2.5rem;
	border: none;
	border-radius: 0;
	color: white;
	margin: 20px auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Container to hold the buttons */
.button-container {
	display: flex;
	justify-content: space-between;
	max-width: 98%;
	margin: 20px auto;
}

/* Original .custom-button style */
.custom-button {
  flex: 1;
  height: 150px;
  font-size: 2.5rem;
  border: none;
  border-radius: 0;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.3s, box-shadow 0.3s;
  margin-right: 2%;
}

/* Responsive design for smaller screens */
@media only screen and (max-width: 600px) {
  .custom-button {
	font-size: 1.5rem; /* Adjust font size for smaller screens */
	height: 100px; /* Adjust button height for smaller screens */
  }

  /* Add any other responsive styles as needed */
}

/* Specific button styling */
/*#increaseButton*/ 
.bg-success{
	background-color: rgba(0, 255, 0, 0.7);
	box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.7);
	border: 4px solid #00ff00;
	border-radius: 0px;
	background-color: rgba(0, 255, 0, 0.7); /* Black background with 80% opacity */
	font-family: 'VT323';

}

}
/*#decreaseButton*/
.bg-danger {
	background-color: rgba(255, 0, 0, 0.4);
	box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
	border: 4px solid #ff0000;
	border-radius: 0px;
	font-family: 'VT323', monospace ;
}
.blockdown{	background-color: rgba(255, 0, 0, 0.4);
	box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
	border: 2px solid #ff0000;
	border-radius: 0px;
	font-family: 'VT323';}
.blockup{
	background-color: rgba(0, 255, 0, 0.7);
	box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.7);
	border: 2px solid #00ff00;
	border-radius: 0px;
	background-color: rgba(0, 255, 0, 0.7); /* Black background with 80% opacity */
	font-family: 'VT323', monospace ;

}	
section.block header figure img{display: flex; margin: 0 auto; width:100%;height: 20px;padding:5px;}
section.block{font-family: 'VT323', monospace ;font-size: .8em; }
.neg{font-family: 'VT323', monospace ;font-size: .8em; }
.sum{font-family: 'VT323', monospace ;font-size: 2.2em; }
.variation{font-family: 'VT323', monospace ;font-size: 1.2em; }
.normal{font-family: 'VT323', monospace ;font-size: 1.2em; }
.expose{font-family: 'VT323', monospace ;font-size: 1.2em; }
.nameCop{font-family: 'VT323', monospace ;font-size: 1.5em; }
section.block.down .back {	
  margin: -30px 0 0 0;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
  border: 2px solid #f00;
  border-left: 2px solid #f00;
  border-right: 2px solid #f00;
  border-bottom: 4px solid #f00;
  background-image: repeating-linear-gradient(to bottom, rgb(127, 0, 0) 0, rgb(255, 0, 0) 5px, #f11 6px, #300 7px);
  animation: animdown 4s linear 0s infinite normal;
}

@keyframes animdown {
  from {
	background-position: 0 0; /* Start position */
  }
  to {
	background-position: 0 200px; /* Move upwards */
  }
}
.page-top{
		background-color: rgba(0, 0, 0, 0.4);
	  box-shadow: 0 0 10px rgba(25, 25, 44, 0.7), 0 0 20px rgba(33, 33, 54, 0.7), 0 0 30px rgba(8, 8, 15, 0.7);
	
  	background-image: repeating-linear-gradient(to bottom, rgb(40, 24, 194) 0, rgb(10, 13, 126) 5px, #002 6px, #006 7px);
		animation: animboard 4s linear 0s infinite normal;
}

@keyframes animPageTop {
  from {
	background-position: 0 0; /* Start position */
  }
  to {
	background-position: 0 200px; /* Move upwards */
  }
}
section.block.up .back {
  margin: -30px 0 0 0;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.7);
  border-left: 2px solid #00ff00;
  border-right: 2px solid #00ff00;
  border-bottom: 4px solid #00ff00;
  background-image: repeating-linear-gradient(to bottom, rgb(0, 255, 0) 0, green 4px, #030 2px, #060 3px);
  animation: animstart 4s linear 0s infinite normal;
  
}

@keyframes animstart {
  from {
	background-position: 0 0; /* Start position */
  }
  to {
	background-position: 0 -200px; /* Move upwards */
  }
}



.card {background: transparent;}
.crn{	font-family: 'VT323', monospace ; }
.card-footer{	font-family: 'VT323', monospace ;}
.bg-dark{
	background-color: rgba(143, 143, 142, 0.4);
	box-shadow: 0 0 10px rgba(143, 143, 142, 0.7), 0 0 20px rgba(207, 207, 202, 0.7), 0 0 30px rgba(143, 143, 142, 0.7);
	border: 4px solid #5c5b5b; /* Set border color to white */
	border-radius: 0px; /* Set border radius to 0px */
	font-family: 'VT323';
.chartm{	background-color: rgba(143, 143, 142, 0.4);
	box-shadow: 0 0 10px rgba(143, 143, 142, 0.7), 0 0 20px rgba(207, 207, 202, 0.7), 0 0 30px rgba(143, 143, 142, 0.7);
	border: 4px solid #5c5b5b; /* Set border color to white */
	border-radius: 0px; /* Set border radius to 0px */
	font-family: 'VT323';}

}
.bg-warning{
	background-color: rgba(255, 255, 0, 0.4);
	box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.7), 0 0 30px rgba(255, 255, 0, 0.7);
	border: 4px solid #ffff00;
	border-radius: 0px;
	font-family: 'VT323';

}
#chartss{
	font-family: 'VT323';
}
#chartm{
	font-family: 'VT323';
}
#chart{
	font-family: 'VT323';
	background-color: rgba(48, 47, 252, 0.9);
	color: #fff;}

.bg-primary{
	background-color: rgba(0, 0, 255, 0.4); /* Neon Blue */
	box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7), 0 0 30px rgba(0, 0, 255, 0.7);
	border: 4px solid #0000ff; /* Neon Blue */
	border-radius: 0px; /* Set border radius to 0px */
	font-family: 'VT323';
	}

.mg-chart-title{color: #fff;}
	.mg-y-axis{color: #fff;}
	.mg-x-axis{color: #fff;}
	.mb-3{border:0px;}
	.card-header{
		background: #000;
		font-family: 'VT323';
		border: 0px;
		}
.card-body{		background:transparent;
	font-family: 'VT323';
	border: 0px;}
/* Original table styles */
	.table-responsive {
	  font-family: 'VT323';
	  background: #000;
	}
	
	.table-info {
	  background-color: rgba(0, 0, 255, 0.4);
	  box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7), 0 0 30px rgba(0, 0, 255, 0.7);
	  border: 4px solid #0000ff;
	  border-radius: 0px;
	  font-family: 'VT323';
	  font-size: 2rem;
	}
	
	.table-infob {
	  font-size: 2em;
	}
	
	.table-warning {
	  background-color: rgba(0, 0, 255, 0.4);
	  box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7), 0 0 30px rgba(0, 0, 255, 0.7);
	  border: 4px solid #0000ff;
	  border-radius: 0px;
	  font-family: 'VT323';
	  font-size: 2rem;
	}
	
	.thead-light {
	  background-color: rgba(255, 255, 0, 0.4);
	  box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.7), 0 0 30px rgba(255, 255, 0, 0.7);
	  border: 4px solid #ffff00;
	  border-radius: 0px;
	  font-family: 'VT323';
	}
	
	/* Responsive design for smaller screens */
	@media only screen and (max-width: 600px) {
	  /* Adjust font size and other styles for smaller screens */
	  .table-info {
		font-size: 1.5rem;
		/* Adjust other styles as needed for smaller screens */
	  }
	
	  .table-warning {
		font-size: 1.5rem;
		/* Adjust other styles as needed for smaller screens */
	  }
	
	  /* Add any other responsive styles as needed */
	}

/* Hover effect */
.custom-button:hover {
	background-color: rgba(255, 255, 255, 0.2);
}


/* Hover effects for buttons */
.button-fullscreen:hover {
	opacity: 0.8;
}

/* Responsive design for smaller screens */
@media only screen and (max-width: 600px) {
	.button-fullscreen {
		font-size: 2rem;
	}
}

#stockList {
	color: #fac868;
}

.percentage-change {
	color: #ffc400;
}

.companystock {
	color: #fac868;
}

.jzx-brand{
   margin: 20px auto;
   width: 20%;
   background-color: white; /* Sets the background color of the div to white */
   color: black; /* Sets the text color of the div to black */
   /* You can add more styles as needed */
   padding: 10px;

}
.jzx-brand-board{
	margin: 20px auto;
	   width: 80%;
	background-color: rgba(255, 255, 255, 0.9);
	  box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7), 0 0 30px rgba(0, 0, 255, 0.7);
	  padding: 10px;
 
	  }
	  
	  @keyframes animboard {
		from {
		  background-position: 0 0; /* Start position */
		}
		to {
		  background-position: 0 200px; /* Move upwards */
		}
	  }
.new-btn {
	font-family: 'VT323', monospace ;
	background: #5a5af4;
	border-bottom: 6px inset rgba(0,0,0,.5);
	border-left: 6px inset rgba(0,0,0,.5);
	border-right: 6px inset rgba(255,255,255,.5);
	border-top: 6px inset rgba(255,255,255,.5);
	box-sizing: border-box;
	color: white;
	cursor: pointer;
	display: inline-block;
	font-size: 2.2rem;
	margin: 1rem;
	min-width: 200px;
	padding: .5rem;
	text-transform: uppercase;
	width: auto;
	
	&:focus,
	&:hover {
		background: #BCBCBC;
}

.new-btn:hover {
	background-color: #ffcc00;
}

.chart-container {
	background-color: #121212;
	border: 2px solid rgba(0, 255, 255, 0.6);
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.7);
	margin-top: 20px;
	margin-bottom: 20px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}

@keyframes sprite-animation {
	0%   { background-position: 0 0; }
	100% { background-position: -100% 0; }
}

.sprite-animated {
	animation: sprite-animation 8s steps(300) infinite;
	background-size: 6000%;
}

.titleList {
	position: relative;
	margin-top: 40px;
}




#companyInfo {
	display: inline-block; /* Display the table as an inline-block element */
	background-color: rgba(0, 255, 255, 0.7); /* Neon blue background color */
	border-collapse: collapse; /* Collapse table borders */
	border-radius: 1px;
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.7);
	color: #fff;
	margin: 0 auto; /* Center the table horizontally within its container */
}

#companyInfo th,
#companyInfo td {
	padding: 10px;
	text-align: center;
	font-size: 1rem;
	border: 2px solid transparent; /* Add a transparent border to table cells */
}

#companyInfo th:hover,
#companyInfo td:hover {
	border: 2px solid rgba(0, 255, 255, 0.7); /* Neon border color on hover */
	transition: border-color 0.3s; /* Smooth transition for border color change */
}

#companyInfo th,
#companyInfo td {
	background-color: rgba(0, 255, 255, 0.7); /* Neon blue background color for table cells */
	color: #fff;
}

#companyInfo th:hover,
#companyInfo td:hover {
	background-color: transparent; /* Remove background color on hover */
}