.blink_text {
    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
    color: #dc3545; /* Bootstrap danger red for blinking */
}

@-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
@keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }

.onboarding-checklist-widget {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.onboarding-checklist-widget .widget-header {
    cursor: pointer; /* Indicate header is clickable for toggle */
}

.onboarding-checklist-widget .step-list {
    max-height: 200px; /* Or adjust */
    overflow-y: auto;
}

.onboarding-checklist-widget .step-item .step-check {
    flex-shrink: 0;
}
.onboarding-checklist-widget .step-item .step-text a {
    color: #4e73df; /* Bootstrap primary or your theme color */
    text-decoration: none;
}
.onboarding-checklist-widget .step-item .step-text a:hover {
    text-decoration: underline;
}

/* Style for completed step text when line-through is applied */
.onboarding-checklist-widget .step-item .step-text a[style*="line-through"] {
    color: #6c757d !important; /* Bootstrap muted color */
}

.session-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.10)!important; /* Slightly more prominent shadow on hover */
}

.session-card .card-header {
    /* background-color: #f8f9fc; */ /* Light background for header if needed */
    /* border-bottom: 1px solid #e3e6f0; */ /* Standard border */
    padding: 0.75rem 1.25rem; /* Standard Bootstrap card header padding */
}

.session-card .card-body {
    padding: 1.25rem; /* Standard Bootstrap card body padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make card body take available space */
}

.manual-upload-drop-area {
    border: 2px dashed #adb5bd; /* Dashed border - Bootstrap's gray-500 */
    border-radius: 0.3rem;     /* Slightly rounded corners */
    padding: 2rem 1rem;        /* Ample padding */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: #f8f9fa; /* Light background - Bootstrap's gray-100 */
    color: #6c757d;            /* Muted text color - Bootstrap's gray-600 */
    display: flex;             /* For centering content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Allow drop area to take remaining space in card body */
    min-height: 150px; /* Ensure a minimum tappable area */
}

.manual-upload-drop-area:hover {
    background-color: #e9ecef; /* Slightly darker on hover - Bootstrap's gray-200 */
    border-color: #007bff;     /* Primary color border on hover */
}

.manual-upload-drop-area.dragover {
    background-color: #cfe2ff; /* Lighter primary color when dragging over - Bootstrap's primary-100 */
    border-color: #0056b3;     /* Darker primary color border */
    border-style: solid;       /* Change to solid border during drag */
}

.manual-upload-drop-area i { /* Styling for the upload icon */
    display: block; /* Make icon block for margin to work */
    margin-bottom: 0.75rem;
}

.manual-upload-drop-area p {
    margin-bottom: 0.25rem;
}
.step-guide-icon {
    font-size: 1.5rem; /* Adjust icon size within the circle */
}

.list-styled {
    padding-left: 1.5rem;
}
.list-styled li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.3rem;
}
.list-styled li::before {
    content: "\f058"; /* Font Awesome check-circle solid */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #1cc88a; /* Bootstrap success color or your primary */
}

.get-started-section {
    border: 1px solid #e3e6f0; /* Light border to match card style */
    animation: fadeIn 0.5s ease-in-out; /* Simple fade-in */
}

.get-started-section .step-number {
    line-height: 1;
}

.get-started-section .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.get-started-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-content-wrapper {
	animation: fadeIn 0.5s ease-in-out;
}

/* Help Sidebar Styles */
.help-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0; /* Or height: 100vh; */
    width: 350px; /* Adjust width as needed */
    background-color: #ffffff;
    border-left: 1px solid #e3e6f0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1040; /* Above most content, below modals potentially */
    transform: translateX(100%); /* Start hidden */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow during transition */
    
}

.help-sidebar.active {
    transform: translateX(0); /* Slide in */
}

.help-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.help-sidebar-header .close {
    padding: 0.75rem 1.25rem;
    margin: -0.75rem -1.25rem -0.75rem auto; /* Align close button properly */
    font-size: 1.5rem;
    opacity: 0.7;
}
 .help-sidebar-header .close:hover {
    opacity: 1;
 }

input[name='googleSignIn']{
	    background-image: url(https://img.icons8.com/color/16/000000/google-logo.png);
    background-repeat: no-repeat;
    background-position-x: 28%;
    background-position-y: 60%;
}

.help-sidebar-title {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #5a5c69;
}

.help-sidebar-content {
    padding: 1.25rem;
    overflow-y: auto; /* Enable scrolling for content */
    flex-grow: 1; /* Take remaining vertical space */
}

/* Style content within the help sidebar */
.help-sidebar-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5a5c69; /* Bootstrap default text color */
    margin-bottom: 1rem;
}

.help-sidebar-content ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

 .help-sidebar-content li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
 }

 .help-sidebar-content i { /* Style icons within help */
    margin-right: 0.3rem;
    color: #858796; /* Adjust icon color */
 }



.vh-100 {
  min-height: 100vh; /* Use min-height for flexibility */
}

.sidebar-brand-text{
	font-size:0.8rem;
}

/* Style the "OR" separator if Bootstrap's text-muted isn't enough */
.separator::before,
.separator::after {
    content: "";
    flex-grow: 1;
    background-color: #e5e7eb; /* Light gray line color */
    height: 1px;
    margin: 0 16px; /* Space around the text */
}
.separator {
    display: flex;
    align-items: center;
    color: #6c757d; /* text-muted color */
    font-size: 0.8rem;
    margin-top: 1.5rem; /* Adjust spacing */
    margin-bottom: 1.5rem;
}


/* Style the forgot password link if default link style isn't desired */
.forgot-link {
    color: #007bff; /* Standard Bootstrap link color */
    font-size: 0.8rem;
}
.forgot-link:hover {
    text-decoration: underline;
}


.table tr td:first-child, .table tr th:first-child{
	padding-left:1rem;
}

/* Style the Google button if default btn-light needs tweaks */
.google-button {
    /* Example: border color */
    border-color: #dee2e6;
}
.google-button img {
    height: 16px; /* Ensure icon size is controlled */
    width: 16px;
}

/* Add focus styles for accessibility if desired */
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-check-input:focus {
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Add to login-styles.css or create registration-styles.css */

/* Add styles for bootstrap's is-invalid class if needed,
   though bootstrap usually handles border colors. */
.form-control.is-invalid {
    border-color: #dc3545; /* Bootstrap's danger color */
}

.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545; /* Make label red */
}

.form-check-input.is-invalid {
     border-color: #dc3545; /* Add border to checkbox */
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Focus shadow */
}