main {
    width: 100%;
    display: flex;
    justify-content: center;
}

input, select {
    height: 2rem;
}

h2 {
    margin-left: 0px;
    margin-bottom: 0px;
}

section h2 {
    margin-bottom: .5rem;
}

#volunteer-delivery-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 75%;
    padding: 0px 2rem 2rem 2rem;
}

.instructions {
    flex: 1;
}

.items-container {
    background-color: #e3e3e3;
    border-radius: 10px;
    height: 20rem;
    border: 2px solid black;
    padding: 1rem 1rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.items-container h4 {
    margin-top : 0px;
    margin-bottom: .5rem;
}

.checkbox-container {
    display: flex;
    align-items: center;
}


#needed-items {
    flex: 1;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#selected-items {
    flex: 1;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.instructions-wrapper {
    padding: 0px 3rem 3rem 3rem;
    flex: 1;
}

.instructions {
    border: 2px solid black;
    width: 100%;
    height: 100%;
}

.items {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.inputs {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.form-input {
    display: flex;
    flex-direction: column;
}

.redirect-button {
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    padding: .5rem;
    border-radius: 7px;
    margin-left: 3px;
    margin-right: 3px;
    cursor: pointer;
}


/*
   Shows a loading indicator that is placed on top of the 'update' button.
   Shown after 'update' button is clicked. The loading indicator is a 'div'
   with background image, we place it on top of the 'update' button exactly
   to make it look like we changed the background of the update button.
*/
#loader-div {
    width: 25px;
    height: 25px;
    background-size: contain;
    background-image: url(loading-spinner.png);
    position: relative;
    z-index: 10;
    background-repeat: no-repeat;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    display: none;
    animation-play-state: paused;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 768px) {
    .instructions-wrapper {
        display: none;
    }

    .items-container {
        height: 10rem;
    }

    .items-container {
        flex: none;
        padding: .5rem;
    }

    #needed-items {
        padding: .5rem;
    }

    #selected-items {
        padding: .5rem;
    }

    #volunteer-delivery-form {
        flex: 1;
        width: 100%;
    }

    .form-input {
        gap: .25rem;
    }

    .items {
        flex-direction: column;
    }
}

@media only screen and (max-width: 480px) {

}