#content {
    margin: auto;
    padding-top: 3em;
}

body{
    margin-bottom: 3rem;
}

.nav > li > a {
    color: white;
    
}

.field-wrapper {
    border-radius: 0.5em;
    padding: 0.5em;
    margin: 0.5em;
}

.field-label {
    font-weight: bold;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.button-container {
    display: flex;
    justify-content: space-between;
}
.confirm-button {
    border: thin solid white;
    background: blue;
    border-radius: 0.5em;
    color: white;
    padding: 0.3em;
}

.cancel-button {
    border: thin solid white;
    background: red;
    border-radius: 0.5em;
    color: white;
    padding: 0.3em;
}

table {
    width: 80%;
    border: 1;
}

#login-container {
    width: 25em;
    margin-top: 15em;
    margin-bottom: 15em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

.error {
    border: solid thin red;
    background: pink;
    padding: 0.25rem;
    margin: 0.5rem;
}

.success {
    border: solid thin green;
    background: lightgreen;
    padding: 0.25rem;
    margin: 0.5rem;
}

@media
only screen and (min-width: 640px) and (max-width: 960px) {
    #content {
        width: 100%;
    }
}

@media
only screen and (min-width: 980px) and (max-width: 1600px) {
    #content {
        width: 90%;
    }
}

@media
only screen and (min-width: 1620px) {
    #content {
        width: 75%;
    }
}