.required_asterisk {
    color: #9D2235
}

#required_message {
    color: #9D2235;
    margin: 0 auto 30px;
}

.red-link {
    color: #c00000;
}

form input, select {
    cursor: pointer;
}

form input[type=text], input[type=password], input[type=number] {
    cursor: text;
}

#content {
    margin: 40px 20px 80px 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#content label {
    color: black;
    line-height: 25px;
    padding-bottom: 5px;
    padding-top: 5px;
}

/*  Title Styles  */
.title {
    margin-bottom: 40px;
    line-height: 1.5;
    background-color: #3b3838;
    border-radius: 10px;
    padding: 5px 20px 25px 20px;
    color: white !important;
    margin-top: 35px;
}

.title h1 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 1.5em;
}

.title a {
    color: white;
}

.register-info {
    display: grid;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
}

.register-info p {
    margin-bottom: 5px;
}

/* Title Styles End */

/* Form Styles Begin */

.form {
    padding: 20px;
    border-radius: 10px;
    border: #3b3838 2px solid;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

#form-grid-container > div {
    display: flex;
    width: 100%;
    flex-flow: column;
}

#form-grid-container h2 {
    font-size: 18px;
}


#form-grid-container div > input, #form-grid-container div > select {
    padding: 5px;
}

.Age {
    grid-area: age;
}

.Age, .Activity, .Health {
    border: 0px;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.Age legend, .Activity legend, .Health legend {
    padding-left: 0px;
    font-weight: bold;
}

#id_age {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#id_age li > label {
    font-weight: normal;
}

#id_age li:first-child {
    display: none;
}

.First {
    grid-area: first;
}

.Last {
    grid-area: last;
}

.Age {
    margin-bottom: 10px;
}

.Email {
    grid-area: email;
}

.Username {
    grid-area: user;
}

#form-grid-container div:nth-child(13) {
    grid-area: add1;
}

#form-grid-container div:nth-child(14) {
    grid-area: add2;
}

.City {
    grid-area: city;
}

.State {
    grid-area: state;
}

.Zip {
    grid-area: zip;
}

.Phone {
    grid-area: phone;
    margin-top: 20px;
}

.County {
    grid-area: county;
}

.Mobile {
    grid-area: mobile;
    margin-bottom: 20px;
}

.EmailNotifications {
    grid-area: emailnot;
}

.SMSNotifications {
    grid-area: smsnot
}

.noto-disclaimer {
    grid-area: notodisc;
}

.Race {
    grid-area: race;
}

.Ethnicity {
    grid-area: ethnicity;
}

.Gender {
    grid-area: gender;
    margin-bottom: 20px;
}

.Health {
    grid-area: health;
    margin-bottom: 20px;
}

.Health ul {
    list-style: none;
}

.Health ul > li > label {
    font-weight: normal;
}

.Goal {
    grid-area: goal;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

#id_goal_mins {
    width: 100%;
}

.Newsletter {
    grid-area: news;
}

.Employee, .Friend, .Social, .Website, .Consent {
    flex-flow: row !important;
    align-items: center;
}

.Newsletter, .EmailNotifications, .SMSNotifications {
    display: grid !important;
    align-items: center;
    justify-content: start;
}

.Newsletter input, .EmailNotifications input, .SMSNotifications input {
    grid-column: 1;
    grid-row: 1;
    margin-right: 15px;
}

.Newsletter label, .EmailNotifications label, .SMSNotifications label {
    grid-column: 2;
    grid-row: 1;
}

.subscribe {
    grid-area: subscribe;

}

.find-out {
    grid-area: findout;

}


.Employee {
    grid-area: referemp;
}

.Friend {
    grid-area: referfr;
}

.Social {
    grid-area: refersoc;
}

.Website {
    grid-area: referweb;
    align-self: flex-start;
}

.Other {
    grid-area: referother;
    margin-bottom: 30px;
}

.Password {
    grid-area: pass;
}

.confirmation {
    grid-area: passconf;
    margin-bottom: 30px;
}

.Activity {
    grid-area: activity;
}

.Consent {
    grid-area: consent;
}

#id_activity {
    list-style: none;
    display: grid;
    grid-row-gap: 8px;
}

.Extension {
    grid-area: extension;
}

.EHC {
    grid-area: ehc;
}

.disclaimer {
    grid-area: disclaim;
    font-weight: bold;
}

#id_activity li > label {
    font-weight: normal;
}

#id_activity li {
    padding-bottom: 10px;
}

#id_activity u {
    text-decoration: none !important;
}

.reach {
    grid-area: reachheader;
}

.demo-info {
    grid-area: demographic;
}

.health-info {
    grid-area: healthinfo;
}

.create-acct {
    grid-area: createaccount;
}

.create-acct ul {
    list-style: none;
}

.activity-time {
    grid-area: activitytime;
}

.goal-select {
    grid-area: goalsel;
}

.fourh {
    grid-area: fourh;
    margin-bottom: 20px;
}

.subscribe, .find-out, .activity-time, .goal-select, .health-info {
    text-align: left;
    margin-bottom: 20px;
    font-weight: normal !important;
}

.reach, .demo-info, .create-acct {
    margin-bottom: 20px;
}

.reach, .demo-info, .activity-time, .health-info, .goal-select, .subscribe, .find-out, .acct-head {
    background-color: #3b3838;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
}

/* Form Styles End */

/* IRB Styles Begin */

.irb-text {
    grid-area: irb;
}

.red-text, .errorlist {
    color: #c00000;
    font-weight: bold;
}

.irb-head, .irb-subhead {
    text-align: center;
    margin-bottom: 10px;
}

.irb-subhead {
    font-weight: normal;
}

.main-irb-text h3 {
    text-align: center;
    margin-bottom: 10px;
}

.header-text {
    margin-bottom: 20px;
    text-align: center;
    background-color: #3b3838;
    border-radius: 10px;
    padding: 15px 20px;
    color: white;
}

.paragraph-end {
    margin-bottom: 20px;
}

.main-irb-text h4 {
    font-style: italic;
    margin-bottom: 5px;
}

.research-contact {
    list-style: none;
    padding: 10px;
    line-height: 1;
    margin-bottom: 10px;
}

.contact-name {
    font-weight: bold;
}

.contact-role {
    font-style: italic;
    margin-bottom: 5px;
}

.consent-para {
    padding: 10px 0;
}

.consent-list {
    padding: 20px;
}

.submit-button {
    grid-area: submit;
    margin-top: 15px;
    justify-self: center;
    width: 100px;
    padding: 10px;
    cursor: pointer;
    border: 2px solid #c00000;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    background-color: #c00000;

}

.submit-button:hover,
.submit-button:focus {
    background-color: white;
    color: black;
    border: 2px solid black;
}

/* IRB Styles End */

/* New Race styling */

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

#id_race_multi label {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

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

.fourh {
    white-space: nowrap;
}

@media only screen and (min-width: 0px) {
    #form-grid-container {
        display: grid;
        grid-template-areas: "reachheader" "first" "last" "email" "add1" "add2" "city" "state" "zip" "county" "phone" "mobile"  "demographic" "age" "race" "ethnicity" "gender" "extension" "ehc" "fourh" "activitytime" "activity" "healthinfo" "health" "goalsel" "goal" "subscribe" "news" "emailnot" "smsnot" "notodisc" "findout" "referemp" "referfr" "refersoc" "referweb" "referother" "createaccount" "user" "pass" "passconf" "irb" "consent" "disclaim" "submit";
        grid-template-rows: auto;
        grid-template-columns: 1fr;
    }
}

/* Tablet Styles Begin */

@media only screen and (min-width: 768px) {
    .form {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 730px;
    }

    #form-grid-container {
        display: grid;
        grid-template-areas: "reachheader reachheader reachheader reachheader" "first last last email" "add1 add2 add2 city" "state zip zip county" "phone mobile mobile ."  "demographic demographic demographic demographic" "age age age age" "race race . ." "ethnicity gender gender . " "extension ehc ehc fourh" "activitytime activitytime activitytime activitytime" "activity activity activity activity" "healthinfo healthinfo healthinfo healthinfo" "health health health health" "goalsel goalsel goalsel goalsel" "goal goal goal goal" "subscribe subscribe subscribe subscribe " "news news . ." "emailnot emailnot . ." "smsnot smsnot . ." "notodisc notodisc notodisc notodisc" "findout findout findout findout" "referemp referfr referfr refersoc" "referweb referother referother ." "createaccount createaccount createaccount createaccount" "user pass pass passconf" "irb irb irb irb" "consent consent consent consent" "disclaim disclaim disclaim disclaim" "submit submit submit submit";
        grid-template-columns: 220px 108px 107px 220px;
        grid-template-rows: 1fr;
        width: 100%;
        grid-column-gap: 10px;
        padding: 0;
        justify-content: center;
    }


    .reach {
        margin-bottom: 20px;
    }

    .Zip, .City, .County {
        margin: unset;
    }

    .Phone, .Password {
        margin-bottom: 40px;
    }

    .Employee > label, .Friend > label, .Social > label, .Website > label, .Consent > label, .Other > label {
        margin-right: 20px;
    }

    .Employee, .Friend, .Social, .Website, .Consent {
        width: unset;
        justify-content: unset;
    }

    .Goal, .Other, .Activitys {
        margin-bottom: 40px;
    }

    .City, .State {
        margin-bottom: 10px;
    }

    .Website, .Other {
        margin-top: 20px;
    }

    .Other {
        flex-flow: row !important;
    }

    .create-acct {
        margin-bottom: 20px;
    }

    .main-irb-text h4 {
        margin-bottom: 10px;
    }

    .irb-text {
        line-height: 1.5;
    }

    .paragraph-end {
        margin-bottom: 20px;
    }

    .Phone {
        margin-top: 0;
    }

    #content label {
        font-size: 10pt;
    }

}

@media only screen and (min-width: 900px) {
    .form {
        width: 860px;
    }

    #form-grid-container {
        grid-template-columns: 260px 123px 122px 260px;
    }

    #content label {
        font-size: 12pt;
    }

    .title {
        width: 860px;
    }

    .title h1 {
        font-size: 1.8em;
    }


}