/* Percentage width classes */
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.container {
    margin: 15px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center; /* Center horizontally */
}

.column {
    box-sizing: border-box;
    padding: 10px;
    flex: 1 1 auto; /* Let flex items grow, shrink, and be their default size */
}

@media screen and (max-width: 1439px) {
    .column {
        width: 100%; /* For screens smaller than XX-Large, each column takes 100% width */
    }
}

@media screen and (min-width: 1440px) {
    .w-50 {
        flex-basis: 50%; /* For XX-Large screens, each column takes 50% width */
    }

    .w-100 {
        flex-basis: 100%; /* For XX-Large screens, each column takes 100% width */
    }
}

textarea {
    width: 95%;
    max-width: 95%; /* Ensure it doesn't exceed its container's width */
    resize: none; /* Prevent resizing */
}

.col-left {
    text-align: left;
}

.col-right {
    text-align: right;
}