body {
    background-color: #090c10; /* Dark background color */
    font-family: 'Roboto', sans-serif;
    color: #b1b8c0;
    margin: 0;
    padding: 20px;
}

#introduction {
	margin-bottom: 40px;
}

#form_row {
    display: flex;
    justify-content: center; /* Center children horizontally */
    gap: 20px; /* Optional: adds space between the children */
    flex-wrap: wrap; /* Allows children to wrap to the next line if not enough space */
}

#account1,
#account2 {
	background-color: #ffffff;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.container-fluid {
    padding: 20px;
}

.btn {
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-control {
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 10px 15px;
}

.progress {
	background-color: #2b2b2a;
	border-radius: 20px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.progress-bar {
	background-color: #5cdd8b;
	border-radius: 20px;
}

fieldset {
	border-radius: 5px;
	padding: 10px;
}

legend {
	width: auto;
	border-bottom: none;
}

pre {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
}

#copyright {
	padding-top: 15px;
	text-align: center;
}

.navigation-buttons .custom-nav-btn {
    color: #FFFFFF;
    background-color: #003366; /* Marine Blue Background */
    border: 2px solid #002851; /* Slightly Darker Border */
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    transition: background-color 0.3s, border-color 0.3s;
    text-decoration: none; /* Remove underline from links */
    margin: 5px; /* Spacing around buttons */
}

.navigation-buttons .custom-nav-btn:hover,
.navigation-buttons .custom-nav-btn:focus {
    background-color: #002851; /* Slightly Lighter Marine Blue on Hover/Focus */
    border-color: #001f3f; /* Darken the border for hover/focus */
    color: #FFFFFF;
    text-decoration: none; /* Ensure text is not underlined on hover */
}

.navigation-buttons .custom-nav-btn:active {
    background-color: #001f3f; /* Even darker for active state */
    border-color: #001a33;
}

#progress-txt {
    text-align: center; /* Centers the text horizontally */
    width: 100%; /* Ensures the element spans the full width of its container */
    margin: auto; /* Applies automatic margins to center the element (if it has a specified width) */
    display: block; /* Ensures the element is treated as a block-level element */
    font-size: 1.4em; /* Adjusts the font size as needed */
    margin-top: 20px; /* Adds some space above the progress text for visual separation */
    margin-bottom: 20px; /* Adds some space below the progress text */
}

/* Forms */
.form-control, .form-group .checkbox, .form-group .radio, .input-group-addon {
    background-color: #12171c; /* Darker background for form elements */
    color: #ffffff; /* White text color for contrast */
    border: 1px solid #2c2f33; /* Slightly lighter border for some contrast */
}

/* Buttons */
.btn {
    background-color: #1c2025; /* Dark background for buttons */
    color: #ffffff; /* White text color */
}

.btn:hover, .btn:focus {
    background-color: #2c2f33; /* Slightly lighter background on hover/focus */
}

/* Logs, Preformatted Text */
pre, .log-container {
    background-color: #0e1116; /* Dark background for log containers/preformatted text */
    color: #7f8c8d; /* Light grey text for readability */
    border: 1px solid #2c2f33; /* Border to distinguish the container */
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto; /* Allows horizontal scrolling if content is wide */
}

/* Cards and Wells */
.card, .well { 
    background-color: #0d1117; /* Dark background for card/well elements */
    border: 1px solid #141921; /* Slightly lighter border for visibility */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Optional: adds depth */
}

/* Dark theme styling for #account1 and #account2 */
#account1, #account2 {
    background-color: #12171c; /* Dark background color */
    color: #ffffff; /* White text color for contrast */
    padding: 20px; /* Padding for internal spacing */
    border-radius: 5px; /* Rounded corners for a modern look */
    margin-bottom: 20px; /* Space between this and the next element */
    border: 1px solid #2c2f33; /* Subtle border to define the edges */
}

/* Styling for form elements within #account1 and #account2 */
#account1 .form-control, #account2 .form-control {
    background-color: #16202a; /* Slightly darker background for form controls */
    color: #ffffff; /* White text color for readability */
    border: 1px solid #2c2f33; /* Border to make the input fields stand out */
}

/* Styling for labels within #account1 and #account2 */
#account1 label, #account2 label {
    color: #8a8d91; /* Lighter grey for labels to distinguish them from other text */
}

/* Styling for buttons within #account1 and #account2 */
#account1 .btn, #account2 .btn {
    background-color: #1c2025; /* Dark background for buttons */
    color: #ffffff; /* White text color */
    border: 1px solid #343a40; /* Border for definition */
}

#account1 .btn:hover, #account2 .btn:hover {
    background-color: #2c2f33; /* Lighter on hover for interaction feedback */
    border-color: #454d55; /* Correspondingly lighter border on hover */
}

.toggle-password {
    cursor: pointer;
}

.action-btn {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.col-sm-4 {
	margin-left: 4%;
	margin-right: 4%;
}