html, body, div, span, applet, object,
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	
body {
	line-height: 1.5;
	font-family: "Fredoka", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  font-variation-settings:
		"wdth" 100;
		padding: 20px;
		background-color: #ffffff;
		color: #000000;
	height: 100%
}	


#PageHolder {min-height: 600px;}

#HeaderContainer {width: 99%;}
#LogoContainer {float: left;}
#LogoContainer img {width: 100px;}
#Menubar {display: block;}
#HeaderText {font-weight: 600; font-size: 2em;float: left; margin: 30px 0px 0px 30px; color: #5308c5;}
#WebsiteStrapline {margin: -40px 0 0 160px; font-style: italic; font-weight: 500; font-size: 0.95em; color: green; display: block}

#MenuContainer {width: 70%; text-align: left; float: left; display: block; margin: 0px 0px 0px 28px;}

/** Return To Top**/
.return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #32174d; /* Customize the color */
    color: white;
    padding: 8px 8px 3px 8px;
    border-radius: 5px;
    text-align: center;
    display: none; /* Hidden by default */
    font-size: 0.9em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.return-to-top:hover {
    opacity: 0.7; /* Add hover effect */
}
/** Task Tabs **/

#TaskFilterTabs {float:right; width: 490px;display: block; margin: 0 28px 0 0;}
#TaskFilterTabs button {background-color: #2CBAB2; border:1px solid #2CBAB2; 
color: #FFFFFF; 
font-weight: bold;
padding: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
}

#ProjectFilterTabs {float:right; width: 390px;display: block; margin: 0 39px 0 0;}
#ProjectFilterTabs button {background-color: #2CBAB2; border:1px solid #2CBAB2; 
color: #FFFFFF; 
font-weight: bold;
padding: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
}

.ActiveFilter {background-color: #FF475E !important; border:1px solid #FF475E !important;}

#ContentHolder {width: 80%; float: left; margin: 0 0 50px 0; min-height: 300px;}
#InfoPanel {width: 17%; margin: 10px 0 0 10px;float: right;
}

#InfoPanel input[type="text"]{padding: 10px; width: 170px; border-radius: 5px; border:1px solid #708090; margin: 10px 0 0 0}
#InfoPanel select{padding: 10px; width: 170px; border-radius: 5px; border:1px solid #708090; margin: 10px 0 0 0}
#InfoPanel button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}

#AddInfoPanel {width: 15%; margin: 0px 0 0 10px;position: fixed; left: 61%;}

#ThemeChooser label {font-weight: 500;}
#ThemeChooser select {padding: 6px;}

h2 {font-weight: 600; font-size: 1.75em; color: #f84861}
h3 {font-weight: 600; font-size: 1.25em; color: #f84861}

a {color: #f84861}

.Success {font-weight: 500; color: #32cd32;}
.Error {font-weight: 500; color: #cc0000;}

.BoldText {font-weight: 500}
.SiteName {font-weight: 500; color: #F84861}

/** Submit Buttons **/
button.submitdisabled {
    background-color: #ccc; /* Grey background */
    color: #666;            /* Change text color */
    cursor: not-allowed;    /* Change cursor to show it's disabled */
    border: 1px solid #999; /* Adjust border for a disabled look */
    opacity: 0.7;           /* Slightly fade the button */
}

button.submitdisabled:hover {
    background-color: #ccc; /* Prevent hover effect */
}

#ExplainHolder {width: 75%;
	float:left;
}

#WhatIsThis {
	margin: 10px 0 0 0;
	padding: 5px;
	line-height: 2em;
	width: 60%;
	float: left;
	background-color: rgba(233,226,94, 0.5);
	}

/** Homepage Explaination **/
#WhatIsThis h2 {margin: 0 0 10px 0; color: #2dbab3}
#WhatIsThis p {font-size: 1.25em; margin: 0 0 1em 0}

#WhatIsThis ul {list-style-type: none; margin: 0 0 0 10px}
#WhatIsThis .FancyText {font-weight: 500; color: #f54661}

#BottomExplan {width: 99%;}
#BottomExplan h3 {margin: 15px 0 15px 0; color: #2dbab3}

#BottomExplan p {margin: 0 0 1em 0}

/** EMAIL ERRORS **/
.error-message {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
            display: none; /* Hidden by default */
        }
/* Optional: visual feedback for invalid input */
input:invalid:not(:placeholder-shown) {
	border-color: red;
}
input.is-invalid { /* Optional: custom class for JS validation failure */
	border-color: red;
        }
	
/** Login Form **/

#LogReg{width: 38%; float:right;
margin: 10px 0 0 0;
position: relative;
}

#InstructionLink {margin: -28px 0 0 5px;}
#InstructionLink a {background-color: #f4f0ae; padding: 5px; text-decoration: none;}

		#LogReg::-webkit-scrollbar {
			width: 12px; /* Width of the scrollbar */
		}

		#LogReg::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.5); /* Color of the scrollbar handle */
			border-radius: 6px; /* Rounded corners for the scrollbar handle */
		}

		#LogReg::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1); /* Color of the scrollbar track */
		}

		/* Styling for Firefox */
		#LogReg {
			scrollbar-width: auto; /* Makes scrollbar thinner */
			scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.8); /* Handle color and track color */
		}

	

/** HOMEPAGE TABS **/

.tab-container {
    max-width: 700px;
    margin: 0 auto;
	border:1px solid #C0C0C0;
	height: 99%;
}

.tabs {
    display: flex;
    list-style: none;
    padding: 0;
    cursor: pointer;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    background-color: #536878;
	color: #ffffff;
}

.tab.active {
    background-color: #2DBAB3;
    border-bottom: none;
    font-weight: 500;
}

.tab-content {
  /*  border: 1px solid #ddd;
    padding: 20px;
    background-color: #fff;
	border:1px solid #C0C0C0; border-radius: 10px; padding: 10px; background-color: #ffffe0*/
	padding: 5px;
	background-color: rgba(233,226,94, 0.5);
	height: 350px; overflow: scroll;
}

.tab-content h2 {margin: 0 0 20px 0; text-align: center}
.tab-content label {width: 140px !important; display:inline-block; margin: 0 0 20px 0; font-weight: 500; color: #000000;}
.tab-content input[type="email"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content input[type="text"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content input[type="password"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content select {padding: 10px; width: 100px; border-radius: 5px; border:1px solid #708090; margin: 10px 0 0 0}
.tab-content button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}

.tab-content h2 {margin: 0 0 20px 0; text-align: center}
.tab-content label {width: 200px; display:inline-block; margin: 0 0 20px 0; font-weight: 500; color: #000000;}
.tab-content input[type="email"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content input[type="text"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content input[type="password"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
.tab-content select {padding: 10px; width: 100px; border-radius: 5px; border:1px solid #708090; margin: 10px 0 0 0}
.tab-content button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}

#RegButton {margin: 0 10px 0 0;}

#pwstitle {font-weight: 500;}
#password-strength {font-weight: 500}

#WeakPWord {font-size: 0.65em}
.CheckMark {color: green !important}

/** DASHBOARD **/
#ContentHolder h2 {margin: 0;}

.dashboard-container h2 {color: #186fee}

.dashboard-container h3 {color: #186fee}

.ClearMe {clear: both}

    .dashboard-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
		padding: 10px;
		line-height: 2em;
		width: 95%;
    }
	
	.even-row {
    background-color: rgba(250,250,210,0.75);
	border:1px dashed #fb4f14;
	margin: 20px 0 20px 0;
	}

	.odd-row {
		background-color: rgba(143,188,143,0.3);
		border:1px dashed #32cd32;
		margin: 20px 0 20px 0;
	}
	

	
	.even-list {
    background-color: blue;
	}

	.odd-list {
		background-color: red;
	}


    .left-panel, .right-panel {
        width: 48%;	
    }
    .left-panel {
        border-right: 1px solid #ccc;
        padding-right: 20px;
		position: relative;
    }
    .right-panel {
        padding-left: 20px;
		position: relative;
    }
	
	
	.right-panel h3 {margin: 0 0 10px 0}
	
/***************************
 ** SUB MENU
 **************************/

#MiniSubMenu {float:right; background-color: #e6e680; padding: 5px; color: #353534; position: absolute; top: 0; right: 0; font-size: 0.75em; margin: 0 0 30px 0;} 

#MiniSubMenu a {text-decoration: none; color: #353534 !important}
	
/***************************
 ** TOOLTIPS
 ***************************/ 
.tooltip {
    display: inline-block;
    background-color: #632d99;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
	margin: 0 0 0 10px;
	float: right;
}	

.tooltip:hover::after {
    content: attr(data-tooltip);
    background-color: #2e8b57;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 120%; /* Position to the right */
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 100;
    font-size: 12px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.tooltip::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/** PROJECT (Dashboard) Stuff **/

.ProjectInfoPanel {width: 380px; position: relative;}


	.ManageTaskButton {color: #ffffff !important;  text-decoration: none; float:left; display: block; background-color:#2e8b57; font-size: 0.85em; font-weight: 600; padding: 3px 8px 10px 8px; margin:10px 0 10px 0; height: 20px; cursor:pointer; border:1px solid #2e8b57; border-radius: 5px; bottom: 0; left: 3px; position: absolute; bottom: 0}
	.ManageTaskButton a {color: #ffffff !important; text-decoration: none !important; display: block;font-size: 1.3em; padding: 3px 8px 3px 8px;height: 20px; margin: -10px 0 0 0; font-weight: 600;}
	.ProjectActive {background-color: red; font-weight: 600; color: #FFFFFF; display: block; padding: 0 0 0 10px; margin: 10px 0 5px 0; width: 100px; float:left;}
	.ProjectArchive {background-color: orange; font-weight: 600; color: #FFFFFF; display: block; padding: 0 0 0 10px; margin: 10px 0 5px 0; width: 200px;  float: left;}
	.ProjectComplete {background-color: green; font-weight: 600; color: #FFFFFF; display: block;padding: 0 0 0 10px; margin: 10px 0 5px 0; width: 200px;  float: left;}
	
	.right-panel .progress-bar-container {margin: 5px 0 0 0}
	
	.PDPadd {margin: 0 0 8px 0}
	/******************************************
	 ** PROJECT DESCRIPTION
	 *****************************************/

#ProjectDetails {display: block;}	

#ProjectDescriptionContainer {float:left; width: 100%}

#ProjectDetails details {
    margin-bottom: 15px;
    width: 95%; /* Make the <details> element take full width */
    display: block;
}
	
#ProjectDetails	summary {
    cursor: pointer;
    padding: 8px 16px;
    background-color: #5308c5;
    color: white;
    border-radius: 4px;
    font-weight: 600;
    outline: none;
    list-style: none;
    display: inline-block;
	font-size: 0.75em;
	
}

.ProjectDescription {background-color: rgba(255, 255, 255, 0.1); padding: 10px; margin: 0 0 15px 0; height: 150px; overflow: scroll; width:100%; display: block}
	
		.ProjectDescription::-webkit-scrollbar {
			width: 12px; /* Width of the scrollbar */
		}

		.ProjectDescription::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.5); /* Color of the scrollbar handle */
			border-radius: 6px; /* Rounded corners for the scrollbar handle */
		}

		.ProjectDescription::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1); /* Color of the scrollbar track */
		}

		/* Styling for Firefox */
		.ProjectDescription {
			scrollbar-width: auto; /* Makes scrollbar thinner */
			scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.8); /* Handle color and track color */
		}
		
		#TaskEditProjectLink {float:left; margin: 0; position: absolute; left: 189px;}
       #TaskEditProjectLink button{
			cursor: pointer;
			padding: 9px 16px;
			background-color: #367588;
			border: 1px solid #367588;
			color: white;
			border-radius: 4px;
			font-weight: 600;
			outline: none;
			list-style: none;
			display: inline-block;
			font-size: 0.75em;
	   }
	
	.DeleteProjectForm {display: block; bottom: 10px; right: 0; position: absolute;}
	
	.EditProjectLink {font-weight: 600; float:left; display: block; background-color:#2e8b57; font-size: 0.65em; padding: 3px 8px 3px 8px; margin:40px 0 10px 0; height: 30px; cursor:pointer; border:1px solid #2e8b57; border-radius: 5px; color: #FFFFFF !important; text-decoration: none;}
	
	.EditProjectLink a {color: #FFFFFF !important; text-decoration: none; display: block;font-size: 1.3em; padding: 10px 8px 3px 8px;height: 20px; margin: -10px 0 0 0}

/** TASK STUFF **/	

	/** Priority **/
	.LowPriority {font-weight: 600; color: green;}
	.MediumPriority {font-weight: 600; color: orange;}
	.HighPriority {font-weight: 600; color: red;}
	
	.progress-bar-title {
	float: left;
	margin: 0px 10px 0px 0px;
	}
	.progress-bar-container {
        width: 50%;
        background-color: #f3f3f3;
        border-radius: 5px;
        margin-bottom: 10px;
        overflow: hidden;
		float:left;
		border:1px dashed #808080;
    }

    .progress-bar {
        height: 20px; /* Height of the progress bar */
        background-color: #4caf50; /* Green color for the filled part */
        text-align: center; /* Center the text inside the bar */
        line-height: 20px; /* Align text vertically */
        color: white; /* Text color */
        transition: width 0.3s; /* Smooth transition for the progress change */
    }
	
	.ProgressLogList {border:1px solid #d3d3d3; height: 800px; overflow: scroll; padding: 10px 30px 10px 30px; margin: 10px 0 0 0 }
	
	/*.ProgressLogList ul {list-style-type: square;}
	.ProgressLogList ul li::marker {color: #264348;}*/
	
	
	.ProgressLogList ul {
    list-style-type: none; /* Remove default bullet */
    padding-left: 0; /* No padding on UL */
	}

	.ProgressLogList ul li {
    padding: 0 10px 0 10px; /* Add space for the background image */
    position: relative; /* Make sure the background is positioned relative to the LI */
	}

	.note-public::before {
		content: '';
		background-image: url('../img/visible.png'); /* Replace with your public note icon */
		background-size: 20px 20px; /* Adjust size as needed */
		background-repeat: no-repeat;
		position: absolute;
		left: -30px; /* Position the image to the left of the list item */
		width: 20px;
		height: 20px;
		top: 50%;
		transform: translateY(-50%); /* Center vertically */
	}

	.note-private::before {
		content: '';
		background-image: url('../img/not-visible.png'); /* Replace with your private note icon */
		background-size: 20px 20px; /* Adjust size as needed */
		background-repeat: no-repeat;
		position: absolute;
		left: -30px; /* Position the image to the left of the list item */
		width: 20px;
		height: 20px;
		top: 50%;
		transform: translateY(-50%); /* Center vertically */
	}
	

	.ProgNoteVisibleImg {top: 10px; margin: 15px 8px 0 0; background-color: #FFFFFF; border-radius:50%; padding: 2px;vertical-align: center}
	.ProgNoteVisibleImg img {}
	.ProgressNotes {font-style: italic; font-size: 0.85em}
	.ProgressModified {font-style: italic; font-size: 0.65em}

	.DeleteProgressLink {background-color: #7F1734; border:1px solid #7F1734; border-radius: 5px; 
	color: #FFFFFF; float:left; padding: 5px;
	cursor:pointer;
	margin: 0 0 20px 0;
	font-weight: 600;
	}

	.EditProgressLink {font-weight: 600; float:right; display: block; background-color:#2e8b57; font-size: 0.65em; padding: 3px 8px 3px 8px; margin:0px 0 10px 0; height: 20px; cursor:pointer; border:1px solid #2e8b57; border-radius: 5px; color: #FFFFFF !important}
	
	.EditProgressLink a {color: #FFFFFF !important; text-decoration: none; display: block;font-size: 1.3em; padding: 3px 8px 3px 8px;height: 20px; margin: -10px 0 0 0}


	.even-list {
    background-color: rgba(10,126,140,0.5);
	margin: 5px;
	padding: 5px;
	}

	.odd-list {
		background-color: rgba(67,179,174,0.3);
		margin: 5px;
		padding: 5px;
	}
	
	.TaskDescription {font-style: italic; font-size: 1.25em; height: 200px; overflow: scroll; border:1px solid #d3d3d3; padding: 10px 30px 10px 30px; margin: 10px 0 10px 0}
	.TaskInfo {width: 200px; font-weight: 600; display: inline-block; float: left}
	
	.EditShare button {margin: 8px 0 0 8px; position: absolute}
	
	.copyButton {
    width: 15px; /* Set the width of the button */
    height: 19px; /* Set the height of the button */
	background-color: transparent;
    background-image: url('../img/copy-icon-dark.png'); /* Path to your image */
    background-size: cover; /* Make the image cover the button */
    background-repeat: no-repeat;
    background-position: center;
    border: none; /* Remove the default border */
    cursor: pointer; /* Change cursor to pointer for better UX */
    outline: none; /* Remove outline when the button is focused */
    padding: 0; /* Remove default padding */
}
	
	/** FORMS FOR ADDING AND EDITING **/
	
	.EditForm {width: 58%; padding: 20px;
				display: flex;
				flex-direction: column;
				margin-bottom: 10px;
				float: left;
				}
				
	.EditForm label {width: 200px; display: inline-block; font-weight: 500; vertical-align: top; margin: 0 0 30px 0}
	.EditForm input[type="text"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
	.EditForm input[type="number"] {padding: 10px; width: 100px; border-radius: 5px; border:1px solid #708090}
	.EditForm input[type="date"] {padding: 10px; width: 150px; border-radius: 5px; border:1px solid #708090}
	.EditForm select {padding: 10px; width: 150px; border-radius: 5px; border:1px solid #708090}
	.EditForm textarea {margin: 0 0 20px 0}
	.EditForm .submit-button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	.EditForm .cancel-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 0 0 0; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	.EditForm textarea {padding: 5px; border-radius: 5px; border:1px solid #708090}		
	
	.AddForm {width: 75%; padding: 20px;
				display: flex;
				flex-direction: column;
				margin-bottom: 10px;
				float: left;
				}
	.AddForm label {width: 200px; display: inline-block; font-weight: 500; vertical-align: top; margin: 0 0 30px 0}
	.AddForm input[type="text"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
	.AddForm input[type="number"] {padding: 10px; width: 100px; border-radius: 5px; border:1px solid #708090}
	.AddForm input[type="date"] {padding: 10px; width: 150px; border-radius: 5px; border:1px solid #708090}
	.AddForm input[type="email"] {padding: 10px; width: 300px; border-radius: 5px; border:1px solid #708090}
	.AddForm input[type="password"] {padding: 10px; width: 150px; border-radius: 5px; border:1px solid #708090}
	.AddForm select {padding: 10px; width: 150px; border-radius: 5px; border:1px solid #708090}
	.AddForm textarea {margin: 0 0 20px 0}
	/*.AddForm button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}*/
	.AddForm textarea {padding: 5px; border-radius: 5px; border:1px solid #708090}
	
	.AddForm .submit-button {padding: 10px; background-color:#055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer;}
	.AddForm .cancel-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 0 0 0; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	
	#editbuttons {width: 100%}
	
	.AddForm button {width: 200px}
	
	.AccForm {padding: 20px;
				display: flex;
				flex-direction: column;
				margin-bottom: 10px;
				float: left;
				}
	
	.AccForm .submit-button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	.AccForm .cancel-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 0 0 0; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	.AccForm label {width: 200px; display: inline-block; font-weight: 500; vertical-align: top; margin: 0 0 30px 0}
	
	.EditForm .LongSelect {width: 368px !important;} // Long Select Field (project name)
	
	.SmallExplan {font-size: 0.75em; height: 15px; margin: -10px 0 -10px 0; display: block; padding:0px 10px 8px 20px; background-color: #fdfd96;}
	
	.SmallExplanBlock {font-size: 0.75em; margin: 10px 0 -10px 0; display: block; padding:5px 10px 8px 10px; background-color: #fdfd96; line-height: 0.95em;}
	
	.SmallExplanBlockPadd {font-size: 0.75em; margin: 10px 0 10px 0; display: block; padding:5px 10px 8px 10px; background-color: #fdfd96; line-height: 0.95em;}
	
	#update_password {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; float:right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	
	#DoDeleteButton {padding: 10px; background-color: #7f1734; color: #ffffff; font-weight: 600; float:left; margin: 10px 0 0 0; border: 1px solid #480607; border-radius: 5px; cursor: pointer}
	
	.ProgressUpdate {margin: 20px 0 0 0;}
	
	.ProgressUpdate label {font-weight: 600; width: 200px; display: inline-block; margin: 0 0 20px 0; }
	.ProgressUpdate input {padding: 5px;}
	.ProgressUpdate textarea {vertical-align: top}
	.UpdateProgButton {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	
	.DeleteTaskButton {padding: 10px; background-color: #7f1734; color: #ffffff; font-weight: 600; float: right; margin: 10px 0 0 0; border: 1px solid #480607; border-radius: 5px; cursor: pointer}
	
	.EditShare {width: 90%; text-align: center; margin: 10px auto 0 auto}
	.EditShare a {color: #5308c5; text-decoration: none}
	
	#donate-button-container {display: inline-block;}	
	#Footer {width: 80%; text-align: center; padding: 5px 10px 20px 10px; margin: 0 auto; font-size: 0.75em; background-color: #ffffff;}
	#Footer a {color: #8c92ac; text-decoration: none;}
	
	#MessageHolder {min-height: 100px; border:1px dashed #C0C0C0; padding: 10px; margin: 20px 0 10px 0}
	
	#MarkCompleteButton {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	#KeepActiveButton {padding: 10px; background-color: #7f1734; color: #ffffff; font-weight: 600; margin: 10px 0 0 0; border: 1px solid #480607; border-radius: 5px; cursor: pointer}
	
	/*************************************************
	 ** TIMER AND LIGHTBOX
	 ************************************************/
	 
	.TimerOptionLink {
      cursor: pointer;
      color: blue;
      text-decoration: underline;
	  text-align: center
    }
	
	#SprintTimerImg {margin:20px 0 0 0;}
	
	#timer-display {text-align: left}
	
	#timer-display h3 {color: blue;}
	
	#CancelTimerButton {width: 60px; padding: 0 0 10px 0; display: block; height: 35px; margin: 0; text-align: left;}
	#TimerButton {display:none; margin: 5px auto 5px auto!important; text-align: center; position: relative}
	
	#CancelTimerPlaceholder {width: 160px; padding: 0 0 10px 0; height: 35px; margin: 10px 0 0 0; text-align: left;}
	#FakeResetButton {display: inline-block; width: 160px !important; border:1px solid #79a9a7; border-radius: 5px; background-color: #79a9a7; color: #376c6a; text-align:center; padding: 5px 10px 5px 10px; font-weight: 500; font-size: 0.90em}
	
	
	#TimeContainer {display:block; height: 90px; text-align: center; margin: 0 0 -30px 0;}
	/*.FullTimer h3{color: rgba(249,112,132, 1)!important;}
	.FadedTimer h3{color: rgba(249,112,132, 0.4)!important;}*/
	.FullTimer #TimeTitle {color: rgba(249,112,132, 0.6)!important;}
	.FullTimer #time {color: rgba(249,112,132, 1)!important;}
	.FadedTimer #TimeTitle {color: rgba(249,112,132, 0.4)!important;}
	.FadedTimer #time {color: rgba(249,112,132, 0.4)!important;}
	
	  /* Lightbox overlay styles */
    #lightbox {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
	
	#timerfinished {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
	
	#timerCancelled {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
	
	#TaskCompleteContainer {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.2);
    }

	#ProjectCompleteContainer {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.2);
    }	
	
	#InstructionVideoLightbox {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
	
	#LogOutBox
	{
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
	
	
	#LogOutButtons .cancel-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 10px 0 10px; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	
	#LogOutButtons .submit-button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 10px 0 10px; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	
	#ConfirmationDelBox
	{
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
		
	#ConfirmationDelBox .cancel-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 10px 0 10px; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	
	#ConfirmationDelBox .canceldelete-button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 10px 0 10px; border: 1px solid #044340; border-radius: 5px; cursor: pointer}	
	
	.DeleteWarning {color: red !important; font-weight: 600}
	
	.DeleteWarningInline {color: #e66771 !important; font-weight: 600}
	
	.ConfirmDeleteButtons .submit-button {padding: 10px; background-color: #7F1734; color: #ffffff; font-weight: bold; float: left; margin: 10px 10px 0 10px; border: 1px solid #7F1734; border-radius: 5px; cursor: pointer}
	
	.ConfirmDeleteButtons .cancel-button {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: bold; float: right; margin: 10px 10px 0 10px; border: 1px solid #044340; border-radius: 5px; cursor: pointer}
	
	#deleteAccountLightbox
	{
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
    
    .lightbox-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      text-align: center;
      border-radius: 8px;
	  color: #1C1C1C
    }
	
	.lightbox-content button{background-color: #ff4f00; border:1px solid #ff4f00; border-radius: 5px; color: #FFFFFF; padding: 5px; cursor: pointer}

    .close-lightbox {
      position: absolute;
      top: -10px;
      right: 5px;
      font-size: 30px;
      cursor: pointer;
      color: red;
    }

    .timer-buttons {
      margin: 10px;
    }
	
	/***************************************
	 ** NOTEBOARD / SECTIONS / NOTECARDS
	 **************************************/

	/**Section and Card Text Styles**/
	#NoteboardTitleHeader {width: 80%;}
	.AddNewSectionLink {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; float: right; margin: -60px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer; font-size: 0.75em; color: #ffffff !important; text-decoration: none;}
	
	#NoteboardExplanation {margin: 0 0 10px 0; width: 90%;}
	.NotecardSectionDecription {padding: 2px; background-color: rgba(255, 255, 255, 0.5); color: #1C1C1C; min-height: 40px; max-height: 100px; overflow: scroll;}	
	
		/** Section style with Drag **/
	.section {
    border: 1px solid #ccc; /* Optional: add a border to sections */
    padding: 10px; /* Optional: some padding */
    margin-bottom: 10px; /* Space between sections */
    position: relative; /* Needed for positioning */
    cursor: move; /* Change cursor to indicate dragging */
    transition: background-color 0.3s, background-image 0.3s; /* Smooth transitions */
    background-image: url('../img/corkboard.jpg');
    background-size: cover;
    height: 440px;
    overflow: scroll;
    z-index: 1; /* Ensure the section is above other elements */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #96c8a2 ;
  z-index:-1
}

.overlay .overlaydescription {font-weight: 600; font-size: 1.5em; text-align: center; top: 0%; color: #000000; opacity: 1!important}

.section:hover .overlay {
  opacity: 0.5;
}

#MainSectionManager {margin: 0 0 10px 0;}


.SectionTitleButtons {margin: 0 0 10px 0}
.SectionHeading {float: left; width: 75%;}
.AddCardLink {padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; float: right; margin: 10px 0 0 0; border: 1px solid #044340; border-radius: 5px; cursor: pointer; font-size: 0.75em; color: #ffffff !important; text-decoration: none;}

			/* Ensure text is above the overlay */
			.section h3, .section p {
				position: relative; /* Bring text above the overlay */
				z-index: 1; /* Ensure text is above the background image */
			}

			/* Adjust the cards container to enable scrolling */
			.cards-container {
				height: calc(100% - 50px); /* Adjust height if you have a title/description */
				overflow-y: auto; /* Enable vertical scrolling for the cards */
				padding: 10px; /* Padding for cards */
				position: relative; /* For proper stacking context */
			}

	/** Card Syling **/
	
	.sortable-placeholder {
    border: 2px dashed #ccc; /* Style your placeholder */
    height: 50px; /* Set height to match your card */
    background-color: #f9f9f9; /* Optional: Background color */
}

	.card-holder {
		display: inline-block; /* Allows cards to line up in a row */
		width: 300px;
		margin: 10px;
		vertical-align: top; /* Keep cards aligned top */
	}

	.card {
		position: relative;
		background-color: rgba(249, 233, 66, 1);
		border: 1px solid #fcc200;
		padding: 10px;
		height: 300px; /* Set height for the card */
		overflow: hidden; /* Hide overflow */
		color: #1C1C1C;
	}

	.CardContent {
		max-height: 250px; /* Adjust to make room for Edit/Delete links */
		overflow-y: auto; /* Enable scrolling within content */
	}
	


	.EdDelLinks {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fcc200; /* Optional: a slight background */
		text-align: center;
		padding: 5px;
	}

	.EdDelLinks a {color: #ffffff !important; font-size: 0.75em;}

	.section h3 {color: #ffffff;}
	.CardTitle {font-weight: 600; font-size: 1.5em; margin: 0 0 10px 0}
	.CardDescription {margin: 0 2px 10px 2px}
		/** Edit/Delete Card/Section Links **/
		
	.EditCardLink {float:left; display: block; padding: 10px; background-color: #055f5b; color: #ffffff; font-weight: 600; text-decoration: none !important}
	.EditCardLink a {text-decoration: none !important;}
	.DeleteCardLink {float:right; display: block; padding: 10px; background-color: #7f1734; color: #ffffff; font-weight: 600; text-decoration: none !important; cursor: pointer}
	.EditCardLink a {text-decoration: none !important;}
	
	.SectionEdDelLinks {margin: 10px 0 10px 0;}
	
	.edit-section  {float:left; display: block; padding: 10px; background-color: #2e8b57; color: #ffffff !important; font-weight: 600; text-decoration: none !important ; font-size: 0.75em;}
	.edit-section a {text-decoration: none !important;}
	
	.delete-section {float:right; display: block; padding: 10px; background-color: #7f1734; color: #ffffff !important; font-weight: 600; text-decoration: none !important ; font-size: 0.75em; cursor: pointer;}
	.delete-section a {text-decoration: none !important; color: #ffffff}

	
	
	/** Section Edit Delete Links **/
	
		.EdDelLinks {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fcc200; /* Optional: a slight background */
		text-align: center;
		padding: 5px;
	}

		/** SCROLLBARS **/
		
		.section::-webkit-scrollbar {
			width: 12px; /* Width of the scrollbar */
		}

		.section::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.5); /* Color of the scrollbar handle */
			border-radius: 6px; /* Rounded corners for the scrollbar handle */
		}

		.section::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1); /* Color of the scrollbar track */
		}

		/* Styling for Firefox */
		.section {
			scrollbar-width: auto; /* Makes scrollbar thinner */
			scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.8); /* Handle color and track color */
		}	

		.card::-webkit-scrollbar {
			width: 12px; /* Width of the scrollbar */
		}

		.card::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.5); /* Color of the scrollbar handle */
			border-radius: 6px; /* Rounded corners for the scrollbar handle */
		}

		.card::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1); /* Color of the scrollbar track */
		}

		/* Styling for Firefox */
		.card {
			scrollbar-width: auto; /* Makes scrollbar thinner */
			scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.8); /* Handle color and track color */
		}
		
		/** Delete Card Confirmation Lightbox **/
		#deleteConfirmationLightbox {
			display: none; /* Hidden by default */
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
			justify-content: center;
			align-items: center;
			z-index: 1000; /* Make sure it appears above other content */
		}
		
	/**************************************
     ** ADMIN SECTION
	**************************************/
	#AdminContainer {width: 90%}
	#AdminCancelButton {float: left; width: 200px; margin: 0 50px 0 0px}
	#AdminPurgeButton {width: 200px; float: left !important; margin: 0 50px 0 50px}
	#AdminResetPurgeButton {width: 200px; float: left; text-align: center; margin: 0 50px 0 50px}
	
	#AdminContainer table {width: 99%; margin: 50px 0 0 0}
	#AdminContainer th {font-weight: 600; text-align: left}
	
	#AdminContainer table, #AdminContainer th, #AdminContainer td 
	{border: 1px solid #000000;}
	#AdminContainer td {padding: 5px;}
	

	/**********************
	 ** Sidebar
	 *********************/
	 
	 .SidebarButton {margin: 10px 0 10px 0!important; display: block}
	 .SidebarButton h3 {margin-bottom: 10px;}
	 .SidebarButton p {font-size: 0.85em !important; margin: 0 0 10px 0}
	 
	 .TaskStatus {color: red}
	 .TaskStatusComplete {color: green; font-weight: 500}
	 
	 /** Shake Important Messages **/
	 
		.shake {
		  -webkit-animation-name:              shake;    
		  -webkit-animation-duration:          0.8s;
		  -webkit-animation-iteration-count:   10;
		  -webkit-animation-timing-function:   linear;
		  -webkit-transform-origin:            50% 100%;
		}

		@-webkit-keyframes shake {
		  0%  { -webkit-transform:     translate(2px, 1px) rotate(0deg); }
		  10% { -webkit-transform:     translate(-1px, -2px) rotate(-2deg); }
		  20% { -webkit-transform:     translate(-3px, 0px) rotate(3deg); }
		  30% { -webkit-transform:     translate(0px, 2px) rotate(0deg); }
		  40% { -webkit-transform:     translate(1px, -1px) rotate(1deg); }
		  50% { -webkit-transform:     translate(-1px, 2px) rotate(-1deg); }
		  60% { -webkit-transform:     translate(-3px, 1px) rotate(0deg); }
		  70% { -webkit-transform:     translate(2px, 1px) rotate(-2deg); }
		  80% { -webkit-transform:     translate(-1px, -1px) rotate(4deg); }
		  90% { -webkit-transform:     translate(2px, 2px) rotate(0deg); }
		  100%{ -webkit-transform:     translate(1px, -2px) rotate(-1deg); }
		 }
	
	/******************************************
	 ** DARK THEME STYLES
	 *****************************************/
	body.dark-theme {
            background-color: #1c1c1c;
            color: #eaeaea;
        }
		
	body.dark-theme #MiniSubMenu {background-color: #403f3f; color: #c0c0c0} 	
	body.dark-theme #MiniSubMenu a {text-decoration: none; color: #c0c0c0 !important}
	 
	body.dark-theme h2 {color: #fcb544}
	body.dark-theme h3 {color: #fcb544}
	body.dark-theme a {color: #2dbab3}
	
	body.dark-theme #WhatIsThis {background-color: rgba(50, 59, 65, 0.5) !important;}
	body.dark-theme #WhatIsThis h2 {margin: 0 0 30px 0; color: #f84861}
	body.dark-theme #BottomExplan h2 {margin: 0 0 30px 0; color: #f84861}
	
	#InstructionLink a {background-color: #323b41 !important;}
	
	body.dark-theme .tab-content {
		border: 1px solid #708090;
		background-color: rgba(83,104,120,0.4);
	}

	body.dark-theme .tab-container h2{
		text-align:center
	}	

	body.dark-theme .tab-content label {color: #eaeaea;}
	
    body.dark-theme .even-row  {
            background-color: rgba(145,163,176, 0.2);
            color: #eaeaea;
        }
	body.dark-theme .odd-row  {
            background-color: rgba(102,102,153,0.2);
            color: #eaeaea;
        }		
		
	body.dark-theme .copyButton {
    background-image: url('../img/copy-icon.png'); /* Path to your image */}
	
	/*body.dark-theme	.FullTimer h3{color: rgba(50,205,50, 1)!important;}
	body.dark-theme .FadedTimer h3{color: rgba(50,205,50, 0.2)!important;}*/
	
	body.dark-theme .FullTimer #TimeTitle {color: rgba(50,205,50, 0.67)!important;}
	body.dark-theme .FullTimer #time {color: rgba(50,205,50, 1)!important;}
	body.dark-theme .FadedTimer #TimeTitle {color: rgba(50,205,50, 0.4)!important;}
	body.dark-theme .FadedTimer #time {color: rgba(50,205,50, 0.4)!important;}

	body.dark-theme #TaskFilterTabs button {background-color: #367588; border:1px solid #367588;}
	body.dark-theme #ProjectFilterTabs button {background-color: #367588; border:1px solid #367588;}
	body.dark-theme .ActiveFilter {background-color: #5308C5 !important; border:1px solid #5308C5 !important}
	
	body.dark-theme .SmallExplan {background-color: #32174d}
	body.dark-theme .SmallExplanBlock {background-color: #32174d}
	
	body.dark-theme	.SmallExplanBlockPadd {background-color: #32174d}
		
		
	body.dark-theme	.ProgressLogList {border:1px solid #414a4c;}
	
	body.dark-theme .TaskDescription {border:1px solid #414a4c;}
	
	body.dark-theme .ProgNoteVisibleImg {background-color: #f5c71a;}
	
	body.dark-theme .section h3 {color: #ffffff;}
	
	body.dark-theme #Footer {background-color: #1c1c1c;}