body {
    background-color: #f9f9eb;
}
.tableBtn {
  font-size: 18px;
  font-family: Roboto;
  width: 140px;
  height: 50px;
  text-align: center;
  border: 3px solid #dcdcdc;
  /*border: 3px solid rgba(155, 155, 155, 0.2); */
  
  color: black;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: rgba(155, 155, 155, 0.2); 
  
  user-select: none; /* Prevent text selection */
  transition: transform 0.2s ease;
  background-clip: padding-box; 
}
.tableBtn.selected {
  background: DimGray;
  color: white;
}
.tableBtn.wrong {
  background: DimGray;
  color: red;
}

.tableCategory {
  font-size: 18px;
  font-family: Roboto;
  height: 65px;
  width: 610px; 
  text-align: center;
  color: black;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #fbd400;
  background-clip: padding-box; 
  
  user-select: none; /* Prevent text selection */
 }
.descriptor {
  font-weight: bold;
} 
.words {
font-weight: normal;
}

.actionBtn {
  font-size: 15px;
  font-family: Arial;
  width: 125px;
  height: 50px;
  text-align: center;
  border-width: 1px;
  border-color: #dcdcdc;
  font-weight: bold;
  border-radius: 25px;
  user-select: none; /* Prevent text selection */
}
.copyBtn {
    margin-top: 15px;
}
.enabled {
  background: black;
  color: white;
}
.disabled {
  color: #999; /* Gray out the label when disabled */
}
#settingsDialog {
  width: 320px;
  padding: 20px;
  margin-right: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  position:absolute;
}
#saveSettings {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
#saveSettings::before {
  content: 'X';
  font-weight: bold;
}
.alertDialog {
  width: 150px;
  padding: 20px;
  left: 25%;
  margin-top: 100px;
  background-color:black;
  color: white;
  border:none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  position:fixed;
  transform: translateX(-50%);
}

/* CSS for the results box */
.results-box {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  margin-left:25%;
  margin-right:25%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  text-align: center; /* Center text content */
}

/* CSS for the results box label */
.results-box legend {
  font-weight: bold;
  margin-left: calc(50% - 50px);
  /*width: 100%; /* Ensure legend takes full width */
  text-align: center; /* Center text within legend */
}

hr {
  border: none; /* Remove the default border */
  height: 1px; /* Set the HR thickness */
  color: #ccc; /* Set the HR color (light gray) */
  background-color: #ccc; /* Set the background color (same as color) */
}


.navbtn{
  font-size:large;
  margin-left:10px;
  margin-right:10px;
  
	background:linear-gradient(to bottom, #bddbfa 5%, #b0b5ea 100%);
	background-color:#bddbfa;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-weight:bold;
	padding:3px 3px;
	text-decoration:none;  
}
.navbtn:hover {
	background:linear-gradient(to bottom, #b0b5ea 5%, #bddbfa 100%);
	background-color:#468ccf;
}
.navbtn:active {
	position:relative;
	top:1px;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Align items at the bottom */
  padding: 10px 20px; /* Added some padding for better visualization */
}
.nav-left {
  display: flex;
  font:medium Verdana;
  margin-right: 10px; /* Add some space between the links */
}
.nav-right {
  display: flex;
  align-items: flex-end; /* Align items at the bottom */
  /*text-align:right;*/
}
.timer {
  margin-right: 20px; /* Add some space between the text and the icons */
  font: x-large monospace;
}
.build_error {
  font-size: 15px;
  font-family: Arial;
  text-align: center;
  margin: 10px;
}