.race-special-label {
    font-weight: bold;
    padding-left: 0 !important;
}

#zipcode input::-webkit-outer-spin-button, #zipcode input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#zipcode input[type=number] {
    -moz-appearance: textfield;
}

h2 {
    text-align: center;
}

input#id_weight::placeholder {
    text-align: right;
}

input#id_waist::placeholder {
    text-align: right;
}

input#id_height::placeholder {
    text-align: right;
}

/* grid items */

#address {
    display: inline-grid;
}

#city {
    display: inline-grid;
}

#state {
    display: inline-grid;
}

#zipcode {
    display: inline-grid;
}

#phone-num {
    display: inline-grid;
}

#email {
    display: inline-grid;
}

#county {
    display: inline-grid;
}

#race {
    display: inline-grid;
}

#gender {
    display: inline-grid;
}

#birthdate {
    display: inline-grid;
}

#height {
    display: inline-grid;
}

#weight {
    display: inline-grid;
}

#waist {
    display: inline-grid;
}

#submit-button {
    grid-area: sub-button;
    margin-top: 25px;
    margin-bottom: 5%;
    display: grid;
    justify-content: center
}

#name-info {
    grid-area: name-info;
    display: inline-grid;
}

#location-info {
    grid-area: loc-info;
    display: inline-grid;
}

#contact-info {
    grid-area: cont-info;
    display: inline-grid;
}

#general-info {
    grid-area: gen-info;
    display: inline-grid;
}

#general-info2 {
    grid-area: gen-info2;
    display: inline-grid;
}

/* grid areas */
#content {
    margin-top: 50px;
    margin-bottom: 100px;
    display: grid;
    justify-content: center;
    justify-items: center;
}

input {
    width: auto;
}

#form-grid-container {
    display: grid;
    grid-template-areas:
               'name-info'
               'loc-info'
               'cont-info'
               'gen-info'
               'gen-info2';
    grid-template-columns: 100%;
    grid-column-gap: 50px;
    justify-items: center;
    margin-top: 25px;
}

#name-info {
    display: grid;
    grid-template-columns: 180px 180px;
    grid-column-gap: 45px;
    margin-bottom: 2%;
}

#first-name, #username, #last-name, #password1-cont, #password2-cont {
    display: grid;
}

#first-name input, #last-name input {
    width: 180px;
}

#password1-cont input, #password2-cont input, #username input {
    width: 180px;
}

#location-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    white-space: nowrap;
    grid-column-gap: 42px;
    margin-bottom: 3%;
    width: 419px;
    margin-left: 15px;
}

#address input {
    width: 236px;
}

#state select {
    width: 100px;
    height: 24px;
}

#city input {
    width: 117px;
}

#zipcode input {
    width: 100px;
}

#general-info {
    display: grid;
    grid-template-columns: 111px 80px auto;
    grid-column-gap: 38px;
    margin-bottom: 3%;
    width: 410px;
}

#general-info2 {
    display: grid;
    grid-template-columns: 105px 105px 105px;
    grid-column-gap: 45px;
    width: 410px;
}

#gender select {
    width: 111px;
    height: 24px;
}

#race select {
    width: 160px;
    display: inline-grid;
    height: 24px;
}

#birthdate input {
    width: 111px;
}

#contact-info {
    display: grid;
    grid-template-columns: 180px 180px;
    grid-column-gap: 45px;
}

#phone-num input {
    width: 180px;
}

#email input {
    width: 180px;
}

#county select {
    width: 180px;
    height: 24px;
}

input, select {
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid;
}

#height input, #weight input, #waist input {
    width: 105px;
}

#id_race {
    list-style-type: none;
}

#id_race li:hover {
    background-color: white;
}

label {
    color: black;
    display: inline;
    margin-bottom: 8px;
    float: left;
    font-size: 15px;
}

button {
    background-color: #006A66;
    border: 2px solid #006A66;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

button:hover, button:focus {
    background: white;
    color: black;
    transition: 0.5s;
}

button:focus:not(:focus-visible) {
    background: #006A66;
    color: white;
}

#register-info {
    display: grid;
    justify-items: center;
    width: 750px;
    background: #D0ECF4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-top: 2%;
    margin-bottom: 4%;
    padding: 15px 40px 25px 40px;
}

#reg_form {
    width: 495px;
    border: 2px solid #999999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-top: 2%;
    margin-bottom: 4%;
    padding: 15px 20px 25px 20px;
}

h1 {
    font-size: 1.6em;
    border-bottom: 2px solid black;
    width: 345px;
    padding-bottom: 5px;
}

h2 {
    margin-bottom: 3%;
}

#register-info ul {
    margin-top: 15px;
    margin-left: 15px;
}

.section-head {
    margin-bottom: 5px;
}

#main-header {
    width: 100%;
    display: inline-grid;
    justify-content: center;
    text-align: center;
    margin-bottom: 2%;
}

#top-info {
    display: grid;
    justify-content: center;
}

#display_name input {
    width: 180px;
}

/* New Race styling */

#id_race_multi {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    margin-left: -5px;
    margin-bottom: 10px;
}

#id_race_multi label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

#id_race_multi label input {
    width: 24px !important;
    height: 24px;
    margin-right: 10px;
    margin-bottom: 3px;
}

#race {
    grid-column: 1 / span 3;
}

form input {
    padding-left: 5px;
}

#ethnicity select {
    height: 24px;
    width: 178px;
}

.race-grid {
    display: flex;
}

.race-grid p {
    margin: -1px 0 0 0;
    font-size: 15px;
    padding-left: 5px;
}

.bold {
    font-weight: bold;
}

.errors {
    font-weight: bold;
    margin-top: 15px;
    width: 410px;
}

.errors ul {
    padding: 10px 15px 10px 40px;
    border: 2px solid #006A66;
    border-radius: 5px;
}

.errors ul li ul {
    padding: 0 0 0 5px;
    border: none !important;
}

::-webkit-calendar-picker-indicator {
    margin-left: 0;
}

form input {
    box-sizing: border-box;
    height: 24px;
}


@media only screen and (max-width: 910px) {
    #register-info {
        width: 500px;
    }
}

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

    .errors {
        width: 250px;
    }

    #form-grid-container input {
        width: 250px !important;
    }

    #form-grid-container select {
        width: 250px !important;
        display: flex;
        flex-direction: column;
    }

    #name-info, #location-info, #contact-info, #general-info, #general-info2 {
        display: flex;
        flex-direction: column;
        width: 250px;
        margin-left: 0;
    }

    #reg_form {
        width: 300px;
    }

    #register-info {
        width: 305px;
    }
}

@media only screen and (max-width: 415px) {
    #reg_form {
        width: 280px;
    }

    #register-info {
        width: 265px;
    }
}

@media only screen and (max-width: 375px) {
    #reg_form {
        width: 255px;
    }

    #register-info {
        width: 225px;
    }

    h1 {
        width: 262px;
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

.required_message {
    color: #9D2235;
    float: left;
    padding-right: 3px;
}

.required_label {
    width: 180px;
}