.step { display: none; }
.step.active { display: block; }
.buttons { margin-top: 20px; }

/* Form Input Styling */
.form-control, .form-select {
    /*border-radius: 10px;*/
    border: 1px solid #779bbd;
}

/* Focus state for inputs */
.form-control:focus, .form-select:focus {
    border-color: #79c3f4;  /* Blue border on focus */
    box-shadow: 0 0 8px rgba(121, 195, 244, 0.6); /* Blue shadow effect */
}

.card {
    border: 1px solid #9dccfa; /* Original border color */
    background-color: #e3f0fc; /* Lighter background color */
    border-radius: 5px; /* Optional: Rounded corners */
    padding: 10px; /* Padding inside the card */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow for a subtle 3D effect */
}

.educationRow {
    border: 1px solid #9dccfa !important;
}

.progressbar {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 98%;
    padding: 5px 0; /* space for circles and titles */
}

/* Line connecting circles */
.progressbar::before {
    content: "";
    position: absolute;
    top: 50%; /* vertical center of circles */
    left: 20px; /* half of first circle */
    right: 20px; /* half of last circle */
    height: 4px;
    background-color: #dcdcdc;
    z-index: 0;
    transform: translateY(-50%);
}

/* Circles */
.progress-step {
    width: 40px;
    height: 40px;
    background-color: #dcdcdc;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #555;
    position: relative;
    z-index: 1;
    flex-shrink: 0; /* prevent shrinking on smaller screens */
}

/* Step Titles */
.progress-step::after {
    content: attr(data-title);
    display: block;
    font-size: 12px;
    color: #333;
    margin-top: 10px;
    text-align: center;
    width: max-content;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

/* Highlight current step */
.progress-step.active {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 5px #007bff;
}

/* Completed steps */
.progress-step.completed {
    background-color: #007bff;
    color: white;
}


.input-group-text.icon-bg {
    background-color: rgba(255, 255, 255, 0.7); /* semi-transparent white */
    color: #007acc; /* theme blue for icon */
    font-size: 1rem;
    width: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    border-radius: 0.25rem; /* smooth edges */
    border: 1px solid #007acc; /* subtle border in theme blue */
}

.btn.toggle-password {
    background-color: rgba(255, 255, 255, 0.7); /* semi-transparent white, matching icon-bg */
    color: #007acc; /* theme blue to match other icons */
    border: 1px solid #007acc; /* subtle border consistent with icon-bg */
    border-radius: 0.25rem;
    width: 40px;
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
}

.btn.toggle-password:focus, 
.btn.toggle-password:hover {
    background-color: rgba(0, 122, 204, 0.1); /* subtle hover effect */
    color: #004a80; /* slightly darker blue on hover/focus */
    outline: none;
    box-shadow: none;
}

/*.input-group-text.whatsapp-bg {*/
/*    background-color: rgba(37, 211, 102, 0.2); */
/*    color: #25D366; */
/*    border-radius: 0.25rem;*/
/*    border: 1px solid #25D366;*/
/*}*/

#sidebar {
    background: linear-gradient(to top, #79c3f4, #f6fbff); border: 1px solid #add8e6;
    color: black;
    height: auto;
}

#sidebar .list-group-item {
    background-color: transparent;
    color: black !important;
    border: none;
}

#sidebar .list-group-item:hover,
#sidebar .list-group-item:focus {
    background-color: #007acc; /* lighter blue hover */
    color: white;
}

#sidebar .list-group-item.active {
    background-color: #007acc;
    color: white;
    font-weight: 600;
}

.footer {
    background: linear-gradient(to top, #79c3f4, #f6fbff); border: 1px solid #add8e6;
    color: black;
    /*border-top: 2px solid #005fa3; /* subtle top border like header */
    font-weight: 500;
    letter-spacing: 0.3px;
}

.footer p {
    margin: 0;
    font-size: 0.95rem;
}

.footer a {
    color: #e0f0ff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
    color: #ffffff;
}