@import url('https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');


/* 1. Define the colors for Light Mode (Default) */
:root {
  --scrollbar-thumb-sidebar: rgba(100, 100, 100, 0.3);
  --scrollbar-thumb-main: rgba(100, 100, 100, 0.3);
}

/* 2. Override the colors for Dark Mode */
.dark {
  --scrollbar-thumb-sidebar: rgba(255, 255, 255, 0.2); /* Brighter for dark bg */
  --scrollbar-thumb-main: rgba(255, 255, 255, 0.2);   /* Soft white/grey */
}



body {
	font-family: Roboto, sans-serif;
	font-weight: 400;
	font-size: 1.0em;
	}
	
main {font-size: 1.05em;}

.pageTitle { /* TOP PAGE TITLE */
	font-family: Roboto, sans-serif; 
	letter-spacing: 2px;}

.title01 { /* SECTION TITLE ON INSTRUCTIONS PAGES (the bigger orange titles) */
		font-family: "Roboto Condensed", sans-serif;
		font-size: 1.6em;
		font-weight: 600;
		margin-bottom: 12px;
	}
	
.title01News { /* ARTICLE TITLE ON NEWS PAGE (the bigger orange titles) */
		font-family: "Roboto Condensed", sans-serif;
		font-size: 1.6em;
		font-weight: 600;
		margin-bottom: 0px;
	}

.title02 { /* SUB-SECTION TITLES (the smaller blue titles)  */
		font-family: "Roboto Condensed", sans-serif;
		font-size: 1.4em;
		font-weight: 500;
		margin-top: 25px;
		margin-bottom: 0px;
	}

.list-title { /* APPLY TO <P> WHEN USING A TEXT LINE ABOVE A LIST  */
		font-weight: 600;
		padding-bottom: 4px;
}

.list-title2 { /* APPLY TO <P> WHEN USING A TEXT LINE ABOVE A LIST  */
		font-weight: 600;
		padding-bottom: 0px;
}

p {    /** Normal <p> elements **//
	font-weight: 400;
	padding-bottom: 12px;
	line-height: 1.2em;
	}
	
ul.lists { list-style-type: disc; margin-left: 35px; margin-bottom: 10px}
ol.lists { list-style-type: decimal; margin-left: 35px; margin-bottom: 10px}
li {line-height: 1.3em; margin-bottom: 4px;}
	

.quoteGreen  {
		display: inline-block;
		padding: 18px 24px 18px 15px;
		border-style: solid;
		border-color: #53AB53;
		border-width:  0px 0px 0px 8px;
		border-radius: 8px 8px 8px 8px;
		margin-left: 0px;
	}
	
.quoteRed  {
		display: inline-block;
		padding: 18px 24px 18px 20px;
		border-style: solid;
		border-color: #D93838;
		border-width:  0px 0px 0px 8px;
		border-radius: 8px 8px 8px 8px;
		margin-left: 0px;
	}
	
.quoteBlank {
		font-weight: 400;
		display: inline-block;
		padding: 18px 24px 18px 20px;
		border-style: solid;
		border-width:  0px 0px 0px 8px;
		border-radius: 8px 8px 8px 8px;
		margin-left: 0px;
	}


/* Custom Scrollbar for Sidebar */
.sidebar-menu::-webkit-scrollbar {
		width: 16px;
		}

.sidebar-menu::-webkit-scrollbar-track {
		background: transparent;
		}

.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-sidebar);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
		}

.sidebar-menu:hover::-webkit-scrollbar-thumb {
		opacity: 0;
		}

/* Custom Scrollbar for Main Content */
.main-content::-webkit-scrollbar {
		width: 12px;
		}

.main-content::-webkit-scrollbar-track {
		background: transparent;
		}

.main-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-main);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		}

.main-content:hover::-webkit-scrollbar-thumb {
		opacity: 1;
		}

/* Collapsible Menu Styles */
.collapsible-menu {
		transition: max-height 0.3s ease-out, padding 0.3s ease-out;
		max-height: 0;
		overflow: hidden;
		padding-left: 0.2rem;
		}

.collapsible-menu.open {
		max-height: 500px; /* Adjust to a value larger than content height */
		}
		
/* Add a class for the open button background. */
.menu-button-open {
    background-color: #e5e7eb; /* light gray for light mode (Tailwind: gray-200) */
		color: #2B7FFF;
}

/* Dark mode override for the button */
.dark .menu-button-open {
    background-color: #404C60; /* dark gray for dark mode (Tailwind: gray-700) */
		color: #8EC5FF;
}

table {

}



thead {
	text-align: left;
	
}
tr {

}

th {
	text-align: center;
	padding: 6px 50px 6px 6px;

}

td {
	text-align: center;
	padding: 6px 50px 6px 6px;

}