.timeline-wrap { padding: 16px 8px; }
.timeline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.timeline-controls { display:flex; gap:8px; margin-top:10px; }
.tl-btn { padding:6px 10px; border-radius:8px; border:1px solid #3a4756; background:#12161c; color:#e9eef5; cursor:pointer; }

.timeline {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding: 150px 0;
  box-sizing: border-box;
  white-space: nowrap;
  scroll-snap-type: x proximity;
}
.timeline::-webkit-scrollbar { height: 10px; }
.timeline::-webkit-scrollbar-thumb { background: #3b4858; border-radius: 8px; }

.timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: var(--tl-axis, #7c8a9a);
  transform: translateY(-50%);
}

.tl-item {
  position: relative;
  display: inline-block;
  width: 240px;
  text-align: center;
  scroll-snap-align: center;
}

.tl-dot {
  width: 12px; height: 12px;
  background: var(--tl-dot, #0f62fe);
  border-radius: 50%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(15,98,254,0.15);
}

.tl-stem {
  position: absolute;
  width: 2px;
  background: var(--tl-stem, #9aa8b6);
  left: 50%;
  transform: translateX(-50%);
}

.tl-card {
  position: absolute;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tl-card-bg, #12161c);
  color: var(--tl-card-fg, #e9eef5);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.tl-card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.tl-card .tl-time { font-size: 12px; opacity: 0.8; margin-bottom: 6px; }
.tl-card .tl-body { font-size: 13px; line-height: 1.35; }

.tl-item.up .tl-stem { bottom: 50%; height: 28px; }
.tl-item.up .tl-card { bottom: calc(50% + 28px); }

.tl-item.down .tl-stem { top: 50%; height: 28px; }
.tl-item.down .tl-card { top: calc(50% + 28px); }

@media (max-width: 640px) {
  .tl-item { width: 200px; }
  .tl-card { min-width: 200px; max-width: 240px; }
}
.newBody {
	background-color: #0A519F !important;
	font-family: 'Lexend', sans-serif;
	color: #E2E4E9 !important;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 999;
	overflow: scroll;
}
.mainBody {
	border: 2px solid #3F3F3F;
	background-color: #012553;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 30px auto;
	width: 1200px;
	min-width: 1200px;
	overflow: hidden;
}
.navHeader {
	width: 1140;
	background-color: #012553;
	height: 75px;
	display: flex;
	align-items: center; /* Vertically center content */
	padding: 0 30px;
}
.siteName {
	font-size: 24px;
	font-weight: bolder;
	width: 690px;
}
.navLinkHome {
	font-size: 16px;
	font-weight: bold;
	width: 125px;
	text-align: center;
	border: 0px !important;
	margin: 0px !important;
	padding: 0px !important;
	cursor: pointer;
}
.mainHeader {
	height: 440px;
	width: 1040px;
	padding: 40px 80px 0 80px;
	box-sizing: content-box;
}
.mainBodyContent {
	font-size: 14px;
	background-image: url("https://freedomsystemsnetwork.com/images/banner_fl.png");
	background-repeat: no-repeat;
}
.slogan {
	font-size: 64px;
	font-weight: bold;
	line-height: 1.2em;
	width: 650px;
	margin-bottom: 10px;
}
.tagLine {
	font-size: 32px;
	width: 600px;
	line-height: 1.2em;
}
.ourProjects {
	font-size: 42px;
	text-align: center;
	font-weight: bold;
	margin: 0 0 20px 0;
	box-sizing: content-box;
	line-height: normal !important;
}
.projectsBox {
	width: 1000px;
	margin: 0 auto;
	box-sizing: content-box;
}
.projectsTable {
	border: 0px !important;
	margin: 0px !important;
	padding: 0px !important;
	width: 1000px;
	max-width: 1000px !important;
	box-sizing: content-box;
}
.projectObject {
	width: 480px;
	height: 150px;
	padding: 20px;
	background-color: #E2E4E9;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-sizing: border-box;
	margin: 10px;
}
.projectTable {
	border: 0px !important;
	margin: 0px !important;
	padding: 0px !important;
	box-sizing: border-box;
}
.objectHeader {
	font-size: 24px;
	font-weight: bold;
	color: #012553;
	margin-left: 20px;
}
.objectText {
	font-size: 18px;
	color: #012553;
	margin-left: 20px;
}
.comingsoon {
	font-size: 18px;
	color: #012553;
	font-weight: bold;
	text-align: center;
}
.mission {
	width: 750px;
	text-align: justify;
	margin: 20px auto;
	padding: 20px;
	background-color: #E2E4E9;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-sizing: border-box;
	font-size: 18px;
	color: #012553;

}
.capabilitiesHeader {
	font-size: 42px;
	text-align: center;
	font-weight: bold;
	margin: 0 0 20px 0;
}
.capability {
	width: 950px;
	font-size: 36px;
	text-align: center;
	font-weight: bold;
	margin: 0 auto 20px auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	line-height: normal !important;
}

.capability::before,
.capability::after {
	content: "";
	flex: 1;
	height: 3px;
	background-color: #E2E4E9; /* Change this to match your design */
}
.capablityBox {
	width: 950px;
	margin: 20px auto;
	font-size: 14px;
	line-height: normal !important;
}
/* Change toolbar background color */
.ql-toolbar {
	border: 2px solid #3F3F3F !important;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
}

/* Change button styles */
.ql-toolbar button {
    border: none;
    padding: 6px;
    margin: 2px;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

/* Highlight active button */
.ql-toolbar button.ql-active {
    background: #007bff; /* Blue */
    color: white;
    border-radius: 5px;
}

/* Change dropdown styles */
.ql-toolbar .ql-picker-label {
    font-weight: bold;
    padding: 5px;
    color: #ababab;
}

.ql-toolbar .ql-picker-options {
    background: white;
    border: 1px solid #ccc;
}

/* Make toolbar fixed at the top */
.ql-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Ensure the editor has a visible border */
.ql-container {
	border: 2px solid #3F3F3F !important;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	min-height: 200px;
	padding: 20px;
}

/* Style the editable area */
.ql-editor {
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #ababab;
    min-height: 180px;
}

/* Add padding and border to make the editor more like a text box */
.ql-editor.ql-blank::before {
    color: #aaa;
    font-style: italic;
}

/* Adjust link styles */
.ql-editor a {
    color: #007bff;
    text-decoration: underline;
}

/* Customize blockquote */
.ql-editor blockquote {
    border-left: 4px solid #007bff;
    padding-left: 10px;
    margin-left: 5px;
    color: #555;
}

/* Customize code blocks */
.ql-editor pre {
    background: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}

/* Make lists align nicely */
.ql-editor ol,
.ql-editor ul {
    padding-left: 20px;
}

/* Increase spacing between paragraphs */
.ql-editor p {
    margin-bottom: 10px;
}

/* Set custom font size options */
.ql-editor .ql-size-small {
    font-size: 12px;
}
.ql-editor .ql-size-large {
    font-size: 20px;
}
.ql-editor .ql-size-huge {
    font-size: 28px;
}

/* Align images to fit inside the editor */
.ql-editor img {
    max-width: 100%;
    border-radius: 5px;
}

/* Add focus effect */
.ql-container:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Custom styling for text alignment */
.ql-align-center {
    text-align: center;
}
.ql-align-right {
    text-align: right;
}
.ql-align-justify {
    text-align: justify;
}


.grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* 7 columns for days of the week */
	gap: 0px; /* Adjust spacing between grid items */
}
.day, .date {
	padding: 5px;
}
.activeDate:hover {
	background-color: rgba(255,255,255,0.1);
}
.calendar {
	font-family: Arial, sans-serif;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 300px;
	padding: 10px;
}
.calEvent {
	font-size: 10px;
	line-height: 1em;
}
.calHeader {
	font-size: 24px;
	padding-bottom: 10px;
}
.calNav {
	border: 0px;
	background-color: transparent;
	color: #ababab;
	font-size: 24px;
	cursor: pointer;
}
.caseMenu {
	font-size: 18px;
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	border: 2px solid #3f3f3f;
	border-radius: 10px;
	padding: 5px 10px 5px 10px;
}
.carousel-container {
	width: 700px; /* Adjusted width to accommodate padding */
	height: 300px; /* Adjust height based on your content */
	overflow: hidden;
	border: 2px solid #3F3F3F;
	background-color: rgba(0,0,0,0.3);
	border-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px auto;
	padding: 20px;
	position: relative;
	box-sizing: border-box;
}
.carousel {
	position: absolute;
	top: 120px;
	left: 0;
	width: 100%;
	height: 200px;
	box-sizing: border-box;
}
.text {
	padding: 20px;
	text-align: center;
	justify-content: center;
	align-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 1s ease-in;
	box-sizing: border-box;
	font-family: "Segoe Script", "Lucida Handwriting";
	color: #ababab;
}
.text.hidden {
	opacity: 0;
	transition: opacity 1s ease-out;
}
.days {
	display: flex;
	justify-content: space-between;
	background-color: #f0f0f0;
	padding: 5px 0;
}
.day {
	text-align: center;
}
.dates {
	display: flex;
	flex-wrap: wrap;

}
.date {
	border: 1px solid #ccc;
	height: 100px;}
.addButton {
	background-color: rgba(0, 0, 0, 0.3);
	color: #ababab;
	border: 2px solid #3f3f3f;
	border-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	padding: 10px;
	margin-top: 15px;
	font-weight: bold;
	cursor: pointer;
}
.addButtonSM {
	background-color: rgba(0, 0, 0, 0.3);
	color: #ababab;
	border: 2px solid #3f3f3f;
	border-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	padding: 3px 10px 3px 10px;
	margin-top: 15px;
	font-weight: bold;
	cursor: pointer;
}

.addPersonBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	align-content: center;
	justify-content: center;
	background-color: transparent;
	z-index: 99999;
}
.addPersonContainer {
	margin: auto;
	padding: 20px;
	border: 2px solid #3f3f3f !important;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.90);
	width: 60%;
	height: 60%;
	overflow: scroll;
}
.addPersonHeader {
	color: #ababab;
	padding-bottom: 10px;
	border-bottom: 1px solid #3f3f3f;
	font-size: 24px;
	font-weight: bold;
}
.adminMenu {
	margin-top: 10px;
	font-size: 12px;
	line-height: 14px;
}
.blankli {
	list-style-type: none;
}
.caseRow:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.changeLink {
	color: #ababab;
	cursor: pointer;
	font-size: 14px;
	font-weight: normal;
}
.customFormBox {
	display: flex;
	align-content: center;
	justify-content: center;
	text-align: center;
}
.dashBox {
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
	max-width: calc(100% - 40px); /* Total horizontal margin and padding is 40px on each side */
	min-height: 600px;
	color: #ababab;
}
.dashBox-menu {
	font-size: 16px;
	font-weight: bold;
	width: 200px;
	height: 100%;
}
.dashBox-menuItem {
	cursor: pointer;
	z-index: 9990;
}
.dashBox-menuItem:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.dashBox-menuContainer {
	border-bottom: 1px solid #ababab;
	padding-top: 10px;
	padding-bottom: 10px;
}
.dashBox-subMenu {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 12px;
	font-weight: normal;
	z-index: 9999;
}
.dashBox-subItem {
	z-index: 9999;
}
.dashBox-subItem:hover {
	background-color: rgba(255, 255, 255, 0.1);
	cursor: pointer;
}
.dashBox-top {
	padding-top: 0px;
}
.dashTableHeader {
	background-color: rgba(0, 119, 200, 0.3);
	color: #ababab !important;
	text-align: left;
}
.dashTableHeadersm {
	background-color: rgba(0, 119, 200, 0.3);
	font-size: 12px;
	color: #ababab !important;
}
.dashTableRow {
	border-bottom: 1px solid #3f3f3f;
	border-top: 0px !important;
	background-color: rgba(0, 119, 200, 0.1);
}
.dashTableRowsm {
	border-bottom: 1px solid #3f3f3f;
	border-top: 0px !important;
	background-color: rgba(0, 119, 200, 0.1);
	font-size: 12px;
}
.dataBox-menu {
	font-size: 14px;
	font-weight: bold;
	width: 175px;
	height: 100%;
}
.dataBox-menuItem {
	cursor: pointer;
	z-index: 9990;
}
.dataBox-menuItem:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.dataBox-menuContainer {
	border-bottom: 1px solid #ababab;
	padding-top: 10px;
	padding-bottom: 10px;
}
.dataBox-subMenu {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 10px;
	font-weight: normal;
	z-index: 9999;
}
.dataBox-subItem {
	z-index: 9999;
}
.dataBox-subItem:hover {
	background-color: rgba(255, 255, 255, 0.1);
	cursor: pointer;
}
.dataBox-top {
	padding-top: 0px;
}
.defCellLabel {
	text-align: right;
	font-size: 10px;
	margin: 0 !important;
	border: 0px !important;
	padding: 0 15px 0 0 !important;
}
.defInput {
	padding: 10px !important;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 10px;
	height: 30px;
	width: 400px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 2px solid #3F3F3F !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin: 5px 0 5px 0 !important;
	color: #ababab !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.defSelect option {
	background-color: rgba(0,0,0,1.0);
	color: #ababab;
}
.defSelect {
	padding-top: 6px !important;
}
.disabled {
	color: #000000;
	cursor: not-allowed;
}
.divClose {
	width: 30px;;
	height: 30px;
	text-align: center;
	align-content: center;
	font-size: 18px;
	font-weight: bold;
	border-radius: 5px;
	border: 2px solid #3F3F3F !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.downButton {
	margin-left: 30px;
}
.editButtonSM {
	background-color: rgba(0, 0, 0, 0.3);
	color: #ababab;
	border: 2px solid #3f3f3f;
	border-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	padding: 3px 10px 3px 10px;
	font-weight: bold;
	cursor: pointer;
}
.element-container {
    position: relative;
	margin: 10px 0px 10px 0px;
}

.element-buttons {
    position: absolute;
    right: 0;
    top: 0;
}
.flaggedValue {
	font-weight: bolder;
	color: rgb(255,0,0);
}
.floatBoxHeader {
	font-weight: bold;
	font-size: 18px;
}
.floatBoxSM {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; /* Fixed width */
    height: 250px; /* Fixed height */
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
    box-sizing: border-box; /* Include padding and border in width and height */
    overflow: auto; /* Enable scrolling if content overflows */
}
.floatBoxM {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; /* Fixed width */
    height: 600px; /* Fixed height */
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
    box-sizing: border-box; /* Include padding and border in width and height */
    overflow: auto; /* Enable scrolling if content overflows */
}
.floatBoxLG {
    position: fixed;
    top: 10%; /* Adjust as needed */
    left: 10%; /* Adjust as needed */
    width: 80%; /* 80% of the window's width */
    height: 80%; /* 80% of the window's height */
    box-sizing: border-box; /* Include padding and border in width and height */
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
	overflow: auto; /* Enable scrolling if content overflows */
}
.form-active {
	display: block;
}
.form-inactive {
	display: none;
}
.formTitleHeader {
	font-size: 32px;
	font-weight: bold;
	color: #ababab !important;
	text-align: center;
}
.formSubHeader {
	font-size: 24px;
	font-weight: bold;
	color: #ababab !important;
}
.hasEvent {
	border-bottom: 1px solid #3f3f3f;
	border-top: 0px !important;
	background-color: rgba(0,119,200,0.1);
	padding: 3px 24px !important;
}
.hidden {
	display: none;
}
.homeMenu {
	width: 100%;
	height: 40px;
	background-color: rgba(255,255,255,0.5);
	border-bottom: 2px solid #3f3f3f;
}
.linkImage {
	cursor: pointer;
}
.input-text {
	padding: 10px !important;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	height: 40px;
	width: 600px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 2px solid #3F3F3F !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-bottom: 10px !important;
	color: #ababab !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.input-text option {
	background-color: rgba(0, 0, 0, 1.0) !important;
	color: #ababab;
}
.input-text-sm {
	padding: 10px !important;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	height: 40px;
	width: 300px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 2px solid #3F3F3F !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-bottom: 10px !important;
	color: #ababab !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.input-required {
	background-color: rgba(126, 0, 0, 0.3) !important;
}
.invoiceCell {
	border: 1px solid #cccccc !important;
}
.invoiceHeader {
	height: 60px;
	font-size: 24px;
	font-weight: bold;
	color: #ababab !important;
	background-color: rgba(0, 0, 255, 0.4);
}
.invoicePaid {
	background-color: rgba(0, 255, 0, 0.5) !important;
	color: #FFFFFF;
	padding: 5px;
	border-radius: 5px;
	width: 100px;
	text-align: center;
}
.invoiceTable {
	border: 1px solid #cccccc;
	width: 800px;
}
.invoiceTableHeader {
	font-size: 18px;
	font-weight: bold;
	color: #ababab !important;
	background-color: rgba(0, 0, 255, 0.2);
}
.invoiceUnpaid {
	background-color: rgba(255, 0, 0, 0.5) !important;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px;
	border-radius: 5px;
	width: 100px;
	text-align: center;
}
.login-form {
	display: flex;
	align-items: center; /* Vertically center the content */
	justify-content: center; /* Horizontally center the content */
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	background-image: url('https://freedomhealthsystem.net/wp-content/uploads/2024/02/background1.png');
	background-attachment: fixed;
	background-size: cover;
}
.login-container {
	width: 640px;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	margin: auto;
	align-content: center;
	justify-content: center;
	border-radius: 15px;
	border: 2px solid #666666;
}
.login-header {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}
.navIndent {
	text-indent: 10px;
}
.noEvents {
	border-bottom: 0px !important;
	border-top: 0px !important;
	background-color: transparent;
	padding: 3px 24px !important;
	color: #717171;
}
.mixedEntry {
	height: 20px !important;
	background-color: rgba(0,0,0,0.3) !important;
	border: 1px solid #ccc !important;
	font-size: 10px !important;
	padding: 2px !important;
	color: #ababab !important;
}
.mixedEntry option {
	background-color: #000000;
	color: #ababab;
}
.roleHeader {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}
.roleList {
	columns: 2;
	column-gap: 20px;
	list-style-type: none;
}
.sectionBox {
	padding: 0px 20px 20px 20px;
}
.sectionHeader {
	color: #ababab;
	font-size: 32px;
	font-weight: bold;
	margin: 20px;
}
.subsectionHeader {
	color: #ababab;
	font-size: 28px;
	font-weight: bold;
}
.subHeader {
	color: #ababab !important;
	font-size: 24px;
	font-weight: bold;
	margin: 20px;
}
.mainFeature {
	font-weight: bold;
	font-size: 16px;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid #3f3f3f;
	cursor: pointer;
}
.subFeature {
	border: 2px solid #3F3F3F;
	font-weight: normal;
	font-size: 14px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 10px 0 0 10px;
	padding: 5px 5px 5px 10px;
	cursor: pointer;
}
.mainFeature:hover {
	background-color: rgba(255,255,255,0.1);
}
.subFeature:hover {
	background-color: rgba(255,255,255,0.1);
}
.subFeatureMenu {
	padding-bottom: 15px;
}
.step-box {
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 20px;
}
.featureBox {
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px auto 20px auto;
	padding: 20px;
	width: 1200px;
	color: #ababab;
}
.systemBody {
	/* display: flex; */
	/*align-items: center;  Vertically center the content */
	/*justify-content: center;  Horizontally center the content */
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	background-image: url('https://freedomhealthsystem.net/wp-content/uploads/2024/02/background1.png');
	background-attachment: fixed;
	background-size: cover;
}
.systemContainer {
	/* display: flex; */
	/*align-items: center;  Vertically center the content */
	/*justify-content: center;  Horizontally center the content */
	width: 100%;
	height: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 999;
	overflow: scroll;
}
.systemHeader {
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom: 2px solid #3f3f3f;
	display: block;
}
.systemFooter {
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 400px;
	background-color: rgba(0, 0, 0, 0.7);
	margin-top: 40px;
	border-top: 2px solid #3f3f3f;
	display: block;
}
.tab-active {
	background-color: rgba(80, 80, 80, 0.5);
	padding: 0 0 0 0;
	margin: auto;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
	height: 40px;
	width: 200px;
	cursor: auto;
	line-height: 40px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.5);
	position: relative;
	font-size: 18px;
}
.tab-inactive {
	background-color: rgba(40, 40, 40, 0.5);
	padding: 0 0 0 0;
	margin: auto;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
	height: 40px;
	width: 200px;
	cursor: pointer;
	line-height: 40px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.5);
	position: relative;
	font-size: 18px;
}
.tableLink {
	cursor: pointer;
}
.tableLink:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.time-select {
	width: 100px !important;
	margin-bottom: 0px !important;
}
.time-table {
	width: 500px !important;
}
.upButton {
	margin-right: 30px;
}
.headerTable {
	margin: 0px !important;
	padding: 0px !important;
	border: 0px !important;
}
.navCell {
	white-space: nowrap;
	padding: 0px 0px 0px 30px !important;
	text-align: center;
	border: none !important;
	margin: 0;
}
.navLink {
	font-weight: bolder;
	font-size: 18px;
	color: #ffffff;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.navLink:hover {
	color: #00F3FF;
}
.navLinkDark {
	font-weight: bolder;
	font-size: 18px;
	color: #000000;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	cursor: pointer;
	padding: 6px 10px 6px 10px;
}
.navLinkDark:hover {
	color: #0033ff;
}
.cleanTable {
	border: 0px !important;
	margin: 0px !important;
	padding: 0px !important;
}
.welcomeBox {
	color: #ababab;
	font-size: 18px;
	text-align: right;
}
#progressBars {
	margin: auto;
	display: block;
}
.progressContainer {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	height: 40px;
	width: 600px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 2px solid #3F3F3F !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin: auto;
	margin-bottom: 10px !important;
	color: #ababab !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	position: relative;
}
.progressLabel {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	height: 20px;
	width: 600px;
	margin: auto;
	margin-bottom: 20px !important;
	color: #ababab !important;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.progress {
	width: 0%;
	text-align: center;
	height: 36px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 0px;
	color: #ababab !important;
	background-color: rgba(200, 200, 255, 0.1) !important;
}
.sideNavHeader {
	font-size: 12px;
	font-weight: bold;
}
.sideNavLink {
	font-size: 12px;
	font-weight: normal;
	line-height: 14px;
	cursor: pointer;
}
.sideNavLink:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.ul3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Adjust the gap as needed */
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.ul5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	list-style-type: none;
}
.ul3 li {
    position: relative;
    padding-left: 25px; /* Add space for the custom bullet */
	list-style-type: none;
}
.li1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: #FFFF00;
    border-radius: 50%;
}
.li2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: rgba(255,134,0,1.00);
    border-radius: 50%;
}
.li3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: #FF0000;
    border-radius: 50%;
}
.widgetBox {
	border: 2px solid #3F3F3F;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	margin: 20px;
	padding: 10px;
	font-size: 12px;
}
.widgetHeader {
	color: #ababab !important;
	font-size: 20px;
	font-weight: bold;
}
.signupBody {
	/* display: flex; */
	/*align-items: center;  Vertically center the content */
	/*justify-content: center;  Horizontally center the content */
	background-image: url('https://freedomhealthsystem.net/wp-content/uploads/2024/02/background1.png');
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
}
.signupContainer {
	/* display: flex; */
	/*align-items: center;  Vertically center the content */
	/*justify-content: center;  Horizontally center the content */
	width: 100%;
	height: 100%;
	position: fixed;
	top: 70px;
	left: 0px;
	z-index: 999;
	overflow: scroll;
}
.price-inactive {
	display: none;
}
.price-active {
	display: block;
}
.step-header {
	font-size: 22px;
	color: #fff;
}
.form-box {
	border-top: 2px solid #3F3F3F;
}
.form-box-show {
	opacity: 1;
	max-height: 1000px; /* Set a large max-height to ensure content is visible during transition */
	overflow: auto; /* Enable scrolling if content overflows */
	transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding-top 0.5s ease-in-out, margin-top 0.5s ease-in-out;
	padding-top: 15px;
	margin-top: 15px;
}
.form-box-hide {
	opacity: 0;
	max-height: 0;
	pointer-events: none; /* Prevent interaction with hidden elements */
	overflow: hidden;
	transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding-top 0.5s ease-in-out, margin-top 0.5s ease-in-out;
	padding-top: 0px;
	margin-top: 0px;
}
.step-button {
	border: 2px solid #3F3F3F;
	border-radius: 10px;
	padding: 10px;
	margin-right: 20px;
}
.agreement-box {
	background-color: rgba(0,0,0,0.3);
	border: 2px solid #3F3F3F;
	width: 800px;
	height: 200px;
	overflow: scroll;
	margin: 15px;
	padding: 15px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}