body,
html {
    height: 100%;
    background-color: #f9f9f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.logout-button {
    position: fixed;
    top: 25px;
    right: 25px;
    border: 1px solid #6c757d;
    color: #6c757d;
    z-index: 1000;
}

.card {
    background-color: #fff;
    border: none;
    /* As per your existing .card style */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform .3s ease;
    order: 0;
}

.card-header {
    color: #6c757d;
    /* Ensure default left alignment for card headers */
    text-align: left;
}

.card-header-buttoned {
    background-color: #b0d8ff75 !important;
}

.card.inactive {
    order: 1;
    margin-bottom: 5px;
}

.card.inactive .card-body {
    display: none;
}

.card-body {
    padding: 20px;
    text-align: left;
    /* Ensure card body text is left-aligned */
}

.card-body.collapsed {
    display: none;
}

.query-header {
    cursor: pointer;
}

/* Styles for the individual sub-cards within the report */
.sub-card {
    background-color: #f9f9f9;
    /* Very light gray as requested */
    border: none;
    /* No border for the inner sub-cards */
    border-radius: 5px;
    /* Slightly less rounded than the main card */
    padding: 5px 15px;
    margin-bottom: 15px;
    /* Spacing between sub-cards */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    /* Slightly lighter shadow */
    text-align: left;
    /* Ensure sub-card text is left-aligned */
    /* Remove transition from here if it's already on the main .card */
    /* transition: transform .3s ease; */
}

.sub-card p {
    margin: 5px 0;
    line-height: 1.5;
    text-align: left;
    /* Ensure paragraph text is left-aligned */
}

.sub-card p strong {
    margin-right: 5px;
}

/* Styles for the error message container */
.error-container {
    color: red;
    margin-top: 10px;
    text-align: left;
    /* Ensure error text is left-aligned */
}

.d-none {
    display: none;
}

/* Keeping your other styles that might be used elsewhere */
.high-precision {
    background-color: #d4edda;
}

.medium-precision {
    background-color: #fff3cd;
}

.low-precision {
    background-color: #f8d7da;
}

.question-container {
    display: flex;
    flex-direction: column;
}

.row {
    margin: 0;
}

#loadingIndicator {
    margin: 30px 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}