@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

/* FontAwesome from CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* Top Nav Styles */
.fa { 
	display: inline-block;
	font: normal normal normal 15px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-bars:before { 
	content: "\f0c9";
}

.topnav {
  background-color: #464b51;
  overflow: hidden;
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  margin-bottom: 15px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #fffc02;
  color: black;
}

.topnav a.active {
  background-color: #fffc02;
  color: black;
}

.topnav .icon {
  display: none;
}

/* Responsive Nav for Mobile */
@media only screen and (max-width: 768px) {
	.topnav a {
		font-size: 15px;
	}
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav {
		margin-bottom: 10px;
	}
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/* General Styles */
html, body {
  background-color: black;
}

.tinhead {
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	color: #fffc02;
	font-size: 35px;
	text-decoration: underline;
}

.tinsubhead {
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	color: #fffc02;
	font-size: 30px;
	text-decoration: none;
}

/* DataTables Styling */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
  color: white;
}

.dataTables_wrapper .dataTables_filter .input[type="search"] {
  color: white;
}

p {
  color: white;
  text-decoration: underline;
}

dt {
  color: #ADD8E6;
}

dd {
  color: #fffc02;
}

th {
  background-color: #fffc02;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Special Layouts */
.mobile-only {
	color: #f2f2f2;
	font-size: 12px;
	display: none;
}

.special-gag {
	width: 35%;
	height: 35%;
}

/* General Table Width */
.table-container {
	width: 80%;  /* Set width to 80% on desktop */
}

.table-container td, th {
  text-align: center !important;
  vertical-align: middle !important;
}

.table-container td:nth-child(2),th:nth-child(2) {
  text-align: left !important;
  vertical-align: middle !important;
}

/* Updated ChartContainer CSS using IDs */
#chartContainer1, #chartContainer2 {
	height: 370px;
	width: 80%;
	margin-bottom: 50px;  /* Add space between the charts */
}

@media only screen and (max-width: 768px) {
	.mobile-only {
		display: block;
	}
	.special-gag {
		width: 75%;
		height: 75%;
	}
	#chartContainer1, #chartContainer2 {
		width: 100%;
	}
	/* Buttons for mobile */
	a.button {
		width: 80%;
	}
	/* On mobile (screens less than 768px), make the table full width */
	  .table-container {
		width: 100%;
	  }

	  /* On mobile (screens less than 768px), set table columns to left */
	  .table-container td, th {
		text-align: left !important;
		vertical-align: middle !important;
	  }
	  
	li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
	  }
	
	  /* Fixed width for the label */
	  li .dtr-title {
		flex: 0 0 140px; /* Adjust the label width */
		font-weight: bold;
	  }
	
	  /* Force the data to take up more space */
	  li .dtr-data {
		flex: 1 1 200px; /* Minimum width for the data section */
		text-align: left;
		display: inline-block; /* Ensure data is inline */
		white-space: nowrap; /* Prevent line break */
	  }
	
	  /* Inline style for the indicator (arrow) */
	  li .dtr-data .indicator {
		display: inline-block;
		margin-left: 5px; /* Space between the value and the indicator */
		vertical-align: middle; /* Align it vertically with the value */
	  }

}

/* Buttons for desktop */
a.button {
	width: 312px;
}