.grid-question {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    grid-gap: 20px 20px; /* Gap between grid items */
    padding: 20px;
}

.question-prompt {
    display: flex;
    border-radius: 8px;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 20px;
    grid-column: span 2;
}

.question-option {
}

.select-correct {
    background-color: forestgreen !important;
    border-color: darkgreen;
    border: 4px;
}

.select-wrong {
    background-color: palevioletred !important;
    border-color: red !important;
    border: 4px !important;
}

.text-input {
    border: none; /* Remove default borders */
    border-bottom: 2px solid #000; /* Add bottom border */
    outline: none; /* Remove focus outline */
    padding: 5px 10px; /* Optional: Add some padding */
    font-size: 16px; /* Adjust font size */
    width: 100%; /* Make it responsive */
    background: transparent; /* Ensure no background */
    width:100%;
}

    .text-input:focus {
        border-bottom: 2px solid #007BFF; /* Change to blue when focused */
    }
    .text-input.correct {
        border-bottom: 2px solid forestgreen; /* Change to green when the answer is correct */
    }
    .text-input.wrong {
        border-bottom: 2px solid palevioletred; /* Change to green when the answer is correct */
    }
.submit-button{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    border-color:transparent;
    border-radius:8px;
}

.list-group-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 24px !important;
    border: 1px solid #A2A3A6 !important;
    padding-left: 12px;
    background-image: linear-gradient(to bottom, #FBF9F9, #E8E9EA) !important;
    font-weight: 300;
    overflow: hidden;
    max-width:160px;
    padding:0px !important;
    /*box-shadow: 0px 0px 4px #C4C4C4DD;*/
}

    .list-group-item:has(.mq-connector) {
        background-image: none !important;
        background-color: none;
        border: none !important;
        gap:4px;
    }
.mq-connect-point {
    width: 15px;
    height: 15px;
    aspect-ratio:1;
}
.mq-connector {
    width: 10vw;
    height: 8px;
}

.mq-connect-point.wrong {
    border-radius: 9999px;
    background-image: none !important;
    background-color: #FEA4A3 !important;
}

.mq-connector.wrong {
    background-image: none !important;
    background-color: #FEA4A3 !important;
}

.mq-connect-point.correct {
    border-radius: 9999px;
    background-image: none !important;
    background-color: #A4FFD6 !important;
}

.mq-connector.correct {
    background-image: none !important;
    background-color: #A4FFD6 !important;
}


.mq-connect-point.idle{
    border-radius: 9999px;
    background-image: linear-gradient(to bottom, #FBF9F9, #E8E9EA) !important;
    border: 1px solid #A2A3A6 !important;
}

.mq-connector.idle {
    background-image: none !important;
}

.mq-connect-point.connected {
    border-radius: 9999px;
    background-color: rebeccapurple !important;
    border: 1px solid #A2A3A6 !important;
}

.mq-connector.connected {
    background-color: rebeccapurple !important;
}
.mq-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 10px;
    gap:10px;
}
    .mq-item:has(.mq-item-image-container) {
        flex-direction: column;
    }
.mq-item-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.mq-item-image-container {
    height: 80px;
    background-color: #e2e2e2;
    width: 100%;
    border-radius: 14px;
    overflow:hidden;
}