@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Madimi+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Madimi+One&family=Varela+Round&display=swap');
:root {
	--ClrBGMgrMain:#f0f7fe;
	--ClrBdrMgrMain:#16467b;
	--Clr1XDark:#15375c;
	--Clr1Dark:#2b619c;
	--Clr1Mid:#6385a9;
	--Clr1Light:#6da8e9;
	--Clr1XLight:#d3e6fb;
	--Clr1XXLight:#f7fbfe;
	--Clr1BG:#e3edf7;
	
	--Clr2XDark:#bb8b1b;
	--Clr2Dark:#e9a506;
	--Clr2Mid:#d8c737;
	--Clr2Light:#f0ba3c;
	--Clr2XLight:#f1cb72;
	--Clr2XXLight:#faf7f1;
	
	--Clr3XDark: #5b0000;
	--Clr3Dark: #800000;
	--Clr3Mid:#a10000;
	--Clr3Light:#e70000;
	--Clr3XLight:#ff5353;
	--Clr3XXLight:#ffbaba;
	
	--ClrContrast1Dark: #540101;
	--ClrContrast1Mid: #bb0e01;
	--ClrContrast1Light: #f33232;
	--ClrContrast1Bright: #ffb0b0;
	--ClrContrast1BG:#f0c9c7;
	
	--ClrContrast2Dark: #e1bb49;
	--ClrContrast2Mid: #ffd553;
	--ClrContrast2Light: #ffdf7c;
	--ClrContrast2Bright: #ffe467;
	
	--ClrALink: #316fe1;
	--ClrALinkHvr: #42cef1;
	--ClrTanXLignt:#f7f4e0;
	--ClrYeloMid:#b4ae00;
	--ClrYeloLight:#fdf7b6;
	--ClrHgltGrn:#72fe00;
	--ClrLightGrn:#1cb702;
	--ClrBGGrn:#c3eaca;
	--ClrBdrGrn:#006510;
	
	--ClrBgOrng:#fff7e5;
	--ClrBdrOrng:#eea903;
	
	--ClrXDarkGray:#4c4c4c;
	--ClrDarkGray:#606060;
	--ClrGray:#9b9999;
	--ClrLightGray:#d7d7d7;
	--ClrXLightGray:#eaeaea;
	
	--ClrDarkBrown:#675230;
	--ClrBrown:#947646;
	--ClrCaucFlesh:#e9cc9d;
	
	--BodyFont: verdana, arial, Sans-Serif;
}
* {
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden; 
	background-color: white;
	font-family: Verdana, Arial;
	letter-spacing: .05rem;
}
#divSiteBackground {
	width:100vw;
	min-height:85vh;
	overflow: hidden; 
	background:white;
	border:1px solid var(--ClrBdrMgrMain);
	padding:4px 1.3rem;
	margin: 0;
	z-index:1;
}

#divTopHeader {	
	display:flex;	
	justify-content:space-between;
	align-items:center;
	width:100%;	
}

#divHdrLogo {
	display:inline-block;	
}

#divHdrBanner {
	display:inline-block;	
	text-align:center;
	color:maroon;
	font-weight:bold;
	font-size:1.5rem;
}

#hrHmeTop {
	height:5px;
	border-top:1px solid black;
	border-bottom:2px solid var(--Clr3Dark);
	margin-bottom:10px;
}
/********LOG IN *******************************************************************************************************************/
#divLoginCntnr {
	position: absolute;
	width: max-content;
	height: 140px;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-size:0.9rem;
	top: 20px;
	right: 0;
	transform: translateX(102%); /* Starts off-screen */
	transition: transform 0.5s ease-in-out; /* Ensure this is targeting the correct property */	
	padding: 6px;
	z-index:2;
}
.lblLgnFld {
	display:inline-block;	
	width: 6rem;
}
.lblLgnFld::After {
	content: ": ";
}
/**********************************************************************************************************************************/
/*****   TOP NAV BAR   ************************************************************************************************************/
.topnavbar {
  overflow: hidden; 
}

.hdTopNav, .topnavbar a {
	float: left;
	color:var(--Clr1Dark);	
	font-size:0.9rem;	
	text-decoration:none;
	padding:2px 5px;
	margin:0;
}

.topnavdd {
	float: left;
	overflow: hidden;
}

.hdTopNav:hover, .topnavbar a:hover, .topnavdd:hover .topnavddbtn {
	color: var(--ClrContrast1Mid);
}

.topnavdd-content {
	display: none;
	position: absolute;
	background:white;
	min-width: 10rem;
	margin-top:1.3rem;
	margin-left:1.3rem;
	border:.5px solid var(--Clr1Dark);
	z-index: 1;
}

.topnavdd-content a {
  float: none;
  color: black;
  padding: 3px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnavdd-content a:hover {
	color: var(--ClrContrast1Mid);
}

.topnavdd:hover .topnavdd-content {
  display: block;
}

.topnavon {
	color: var(--ClrContrast1Mid);	
}


/**********************************************************************************************************************************/

/**********************************************************************************************************************************/
/******   HOME PAGE    ************************************************************************************************************/
#divHmeTopContainer {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	margin-top:6px;
}
.divHmeBlock {
	display:inline-block;
	width:max-content;
	border:none;
	box-shadow:1px 1px 4px var(--ClrLightGray);
	padding: 6px 10px;
}
.divHmeBig {
	color: var(--Clr1Dark);
	font-size:2.5rem;
	font-family:"Madimi One", sans-serif;
	font-weight:700;
	text-shadow:2px 1px 1px #000;
}
.divHmeH3 {
	color: var(--Clr2Dark);
	font-size:1.6rem;
	font-family:"Calibri", sans-serif;
	font-weight:700;	
}
.divHmeText {
	color: var(--Clr2Dark);
	font-size:1.3rem;
	font-family:"Calibri", sans-serif;
}


#divHmeBanner1 {
	display:flex;
	align-items:top;
	justify-content: left;
	width:100%;
	background:var(--Clr1XXLight);
	height:302px;
	border-top:.5px solid var(--Clr1Dark);
	border-bottom:.5px solid var(--Clr1Dark);
	margin-top:6px;
}
#divHmeBanner2 {
	display:flex;
	align-items:top;
	justify-content: right;
	width:100%;
	background:white;	
	height:302px;
	border-top:.5px solid var(--Clr1Dark);
	border-bottom:.5px solid var(--Clr1Dark);
	margin-top:6px;
}

.divHmeBannerHd {
	width:max-content; 
	font-size:2rem; 
	font-weight:bold; 
	color:black; 
	vertical-align:top; 
	margin-left:10px; 
	margin-bottom:10px;
}

/**********************************************************************************************************************************/
/****** FOOTER ************************************************************************************************************/
#hrMainBtm {
	height:5px;
	border-top:2px solid var(--Clr3Dark);
	border-bottom:1px solid black;
	
	margin-top:10px;
}
#divFooterCntnr {
	height:15rem; 
	background:var(--Clr2XXLight);
	border-bottom:1px solid var(--ClrBdrMgrMain);
	margin-bottom:10px;
}
#divFooter {
	margin-top:14.9rem;
}
/**********************************************************************************************************************************/
/****** COOKIE CONSENT ************************************************************************************************************/

/**********************************************************************************************************************************/
.divCCSettingsHdr {
	font-size:1.2rem;
	font-weight:bold;
	color:maroon;	
}
.CCSettngsTgl {	
	float:right;
	margin-right:4px;
}

.divCCSettingsHdr {
	font-size:1.2rem;
	font-weight:bold;
	color:maroon;	
}
.CCSettngsTgl {
	float:right;
	margin-right:4px;
}

#CCNotificationBnr {
	display:none;
  position: fixed;
  top: 101vw; /* Initially hidden below the viewport */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background-color: #f0f0f0;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  transition: bottom 0.5s ease-in-out;
}

#CCNotificationBnr.show {
  bottom: 20px; /* Visible position */
}

#CCSettingsBnr {
	display:none;
  position: absolute;
  left: -200px; /* Initially off-screen */
  top: 20px;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  transition: left 0.5s ease-in-out; /* Smooth transition */
}

#CCSettingsBnr.show {
  left: 20px; /* Final position */
}

/**** TOGGLE BUTTON *****************************************************************************************************************/
h2 {
    display: flex;  /* Use flexbox to align items */
    justify-content: space-between;  /* Ensures the title and toggle are spaced out */
    align-items: center;  /* Vertically center both title and toggle */
    margin: 0;  /* Optional: reset margin */
}

/* Keep toggle container floating right */
.tgl-container {
    display: inline-block;
    position: relative;
    margin-left: auto; /* Pushes the tgl to the right */
}

/* Hide the default checkbox */
.tgl-input {
    display: none;
}

/* The slider (tgl) */
.tgl-label {
    cursor: pointer;
    display: inline-block;
    width: 60px;  /* Width of the tgl */
    height: 30px; /* Height of the tgl */
    background-color: #ccc; /* Initial background color */
    border-radius: 50px; /* Make it rounded */
    position: relative;
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* The circle inside the slider */
.tgl-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px; /* Circle width */
    height: 22px; /* Circle height */
    background-color: white; /* Circle color */
    border-radius: 50%; /* Make it a circle */
    transform: translateY(-50%);
    transition: transform 0.3s ease; /* Smooth transition for the circle movement */
}

/* When the checkbox is checked, change the background and move the circle */
.tgl-input:checked + .tgl-label {
    background-color: #4caf50; /* Green when tgld on */
}

.tgl-input:checked + .tgl-label::before {
    transform: translateY(-50%) translateX(30px); /* Move circle to the right */
}
/*****************************************************************************************************************************************************/

.formTextBoxSm, .formTextAreaSm, .formDropDownSm
{
    display: inline-block;
	height: 1.1rem;
    font-size: 0.75rem;    
    background-color: white;
	border:.5px solid var(--Clr1Light);
	margin:0;
}

.formListBox {
	font-size: .6rem;
    background-color: white;
	margin:0;
}
.formListBoxSm {
	height: 3.1rem;
	font-size: 0.75rem;    
    background-color: white;
	margin:0;
}

#divFooter
{	
	width:90vw;
	text-align:center;
	padding:0;
	margin: 0 auto;
}

/*************************************************************************************************************************************************/
/*******    GENERAL    ***************************************************************************************************************************/

h1 {
	color: var(--ClrBdrMgrMain);
	font-size:1.5rem;
	text-align:center;
}

h2 {
	color:maroon;
	font-size:1.2rem;
}
h3 {
	color:black;
	font-size:1rem;
}
h4 {
	display:inline-block;
	color:black;
	font-size:1rem;
}

.divIndentParagraph {
	margin-left:10px;
	margin-bottom:10px;
}

.divLblFldsGrid {
	display: grid;
	grid-template-columns:max-content auto;
	column-gap:.6rem;
	row-gap:2px;
	font-size:.85rem;
	max-height:75vh;
	overflow-y:auto;
}

.divInlineBlock {
	display:inline-block;
}
button {
	background-color: var(--Clr1Dark);	
	color: white;
	background:#16467b;
	font-size:.9rem;
	cursor:pointer;
	border:none;
	padding:8px 12px;
	border-radius:7px;	
}

.btnSmall {
	color: var(--Clr1Dark);	
	background:white;
	font-size:.8rem;
	cursor:pointer;
	border: .5px solid #000;
	box-shadow:1px 1px 2.5px #000;
	border-radius:5px;
	border:none;
	padding:4px 6px;
	
}

.btnBig {
	display:inline-block;	
	background:linear-gradient(to bottom, var(--Clr1XLight) 1%, var(--Clr1Light) 50%, var(--Clr1Mid) 100%);
	border:.5px solid var(--Clr1Dark);
	color:white;
	cursor:pointer;
	font-size:1rem;
	font-weight:normal;
	text-align:center;
	padding:2px;
	margin:2px;
}

hr {
	display: block;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin-left: auto;
	margin-right: auto;	
	border-width: 1px;
}