/* Exercise Container */
.exercise-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.content-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem; /* Reduced space for the check button */
    max-width: 75rem; /* Increased width for 4-column layout */
}

/* Table Layout */
.items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.75rem; /* Even spacing between cells */
    margin-bottom: 1.5rem;
}

.items-table tr {
    margin-bottom: 1rem;
}

.items-table .image-cell {
    width: 8rem; /* Smaller image cell for 4-column layout */
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem;
}

.items-table .text-cell {
    vertical-align: middle;
    padding: 0.5rem;
    width: 17rem; /* Fixed width for text cells */
}

.items-table img {
    width: 8rem; /* Square image */
    height: 8rem; /* Square image */
    object-fit: cover;
    border-radius: 0.75rem;
    display: block;
}

.sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: #00699F;
}

/* Drop Elements */
.drop_element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 2.5rem;
    border: 0.125rem solid #F9B002;
    border-radius: 1.25rem;
    padding: 0.75rem 1rem;
    background-color: white;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}


/* Drag Elements */
.drag_element {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 2.5rem;
    border: 0.125rem solid #00699F;
    border-radius: 1.25rem;
    padding: 0.75rem 1rem;
    color: #00699F;
    font-size: 1.25rem;
    font-weight: 500;
    cursor: grab;
    user-select: none;
    box-sizing: border-box;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Answers Container - Single row layout */
.answers-container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to ensure single row */
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 75rem;
    max-width: 75rem;
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    margin: 0 auto;
}

.drop_element.correct, .drag_element.correct {
    border-color: #258174;
    
  }
  
  .drop_element.incorrect, .drag_element.incorrect {
    border-color: #FF0000;
  }
  .drop_element .drag_element{
    background-color: none;
    border: 0;
  }