/* background-color: #f0f2f5; */


.form-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.card {
    border: 1px solid #dee2e6;
    border-top-width: 8px;
    border-top-color: black; /* Blue top border like Google Forms */
    /* border-top-color: #4285F4; /* Blue top border like Google Forms */
}


.cardleftborderblue {
    border-left: 5px solid #007BFF; /* You can change the color here */
}

.cardleftbordergreen {
    border-left: 5px solid #198754; /* You can change the color here */
}

.cardextra {
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}


.cardbordertranparentcolor {
    border-top-color: transparent; /* Blue top border like Google Forms */
}

.card-header-custom {
    background-color: #fff;
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

/* New CSS to center the image */
/*         .card:first-child .bg-white > img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        } */

.account-info {
    border: 1px solid #dee2e6;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.375rem;
}

/* Custom styles for radio buttons to match the image */
.form-check-input {
    width: 1.3em; /* Increased width */
    height: 1.3em; /* Increased height */
    border: 2px solid #6c757d; /* Thicker, grey border */
    margin-top: 0.1em; /* Adjust vertical alignment */
}

.form-check-label {
    font-size: 1.0rem; /* Increased font size for the label */
    padding-left: 0.5em; /* Add some space between button and text */
}

.form-check-input:focus {
    border-color: #5a5a5a;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

.form-check-input:checked {
    background-color: #fff; /* Keep background white */
    border-color: #6c757d; /* Keep border grey */
    /* SVG for the inner grey dot */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e");
}

.health-message-grid {
    border: 0px solid #dee2e6;
    border-radius: 0.375rem;
}

.health-message-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

    .health-message-row:last-child {
        border-bottom: none;
    }

.health-message-label {
    flex-grow: 1;
}

.health-message-options {
    display: flex;
    justify-content: space-around;
    width: 120px; /* Fixed width for the YA/TIDAK columns */
}

.question-grid {
    border: 0px solid #dee2e6;
    border-radius: 0.375rem;
}

.question-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

    .question-row:last-child {
        border-bottom: none;
    }


/* Tambahkan ini pada fail CSS anda */
@media(max - width: 576px) {
    .form - row {
        flex - direction: column; /* Tukar arah susunan kepada menegak */
        align - items: flex - start; /* Jajarkan semua item ke kiri */
    }
}