@import "nav.css";

main .formGroup {
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em;
}

main form {
    width: 100%;
    align-items: center;
    flex: 1;
}

main form .formControl .selectDiv {
    width: 100%;
}

.formSpace {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    flex: 1;
}


#addOwner, #addVehicle {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s linear 300ms, opacity 300ms;
    -moz-transition: visibility 0s linear 300ms, opacity 300ms;
    -ms-transition: visibility 0s linear 300ms, opacity 300ms;
    -o-transition: visibility 0s linear 300ms, opacity 300ms;
    transition: visibility 0s linear 300ms, opacity 300ms;
}

#addOwner.shown, #addVehicle.shown {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0s linear 0s, opacity 300ms;
    -moz-transition: visibility 0s linear 0s, opacity 300ms;
    -ms-transition: visibility 0s linear 0s, opacity 300ms;
    -o-transition: visibility 0s linear 0s, opacity 300ms;
    transition: visibility 0s linear 0s, opacity 300ms;
}

.content {
    margin-top: 3em;
}