body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}

.App {
    text-align: center
}

.App-logo {
    height: 40vmin;
    pointer-events: none
}

@media (prefers-reduced-motion:no-preference) {
    .App-logo {
        -webkit-animation: App-logo-spin 20s linear infinite;
        animation: App-logo-spin 20s linear infinite
    }
}

.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: #fff
}

.App-link {
    color: #ff0000
}
#main-content>.grid-container>.grid-row {
    border: 1px solid #e10000;
    border-radius: 0.3rem
}

#Navbar {
    margin-bottom: .5rem
}

#ContentDiv {
    background-color: #fff;
    border-radius: .5rem
}

.shoPageSection {
    height: 55vh;
    overflow-y: auto
}

#buttonsSection {
    justify-content: space-between;
    border-top: 1px solid #cfd6dd
}

#buttonsSection>button {
    margin-bottom: .5rem
}

@media (min-width: 64em) {
    .side-menu-list {
        list-style-type:none;
        color: #555
    }

    .side-menu-list>.list {
        font-size: 1rem;
        border-left: 2px solid #cfd6dd;
        color: #000
    }
}

.side-menu-list {
    list-style-type: none;
    line-height: 1.7
}

.side-menu-list>li {
    padding: 10px 20px;
    font-size: 1rem
}

.active {
    color: #000;
    font-weight: 700;
    color: #ff0000
}

.active,.done {
    border-left: 2px solid #ff0000
}

.done {
    color: #000;
    font-weight: 400
}

@media (max-width: 63.938em) {
    .usa-navbar {
        border-bottom:none
    }

    .shoPageSection {
        height: 100%;
        overflow-y: visible
    }

    .side-menu-list>li {
        float: left;
        padding: 10px 10px 3px
    }

    #progressbar {
        background-color: #cfd6dd;
        border-radius: 13px;
        padding: 3px;
        width: 25%;
        float: right
    }

    .progressbardiv,.progressbardiv25 {
        width: 25%
    }

    .progressbardiv,.progressbardiv25,.progressbardiv50 {
        background-color: #ff0000;
        height: 3px;
        border-radius: 10px
    }

    .progressbardiv50 {
        width: 50%
    }

    .progressbardiv75 {
        width: 75%
    }

    .progressbardiv75,.progressbardiv100 {
        background-color: #ff0000;
        height: 3px;
        border-radius: 10px
    }

    .progressbardiv100 {
        width: 100%
    }

    .active {
        border-left: none;
        border-bottom: 2px solid #ff0000
    }

    .done,.list {
        display: none
    }

    .done {
        border-left: none;
        border-bottom: 2px solid #ff0000
    }
}

#Home p,#Home ul {
    color: #555
}

#Home ul {
    list-style-type: square
}

#Home ul>li {
    padding: .6rem .2rem
}

.TermsCheckbox {
    font-size: 1rem
}

.usa-checkbox__label:before {
    height: 1rem;
    width: 1rem
}

.usa-checkbox__input:checked+.usa-checkbox__label:before {
    outline: none
}

#Home {
    line-height: 1.7
}

#Home h2 {
    color: #ff0000;
    transition: .2s ease
}

#Patient2 {
    line-height: 1.7
}

.FormElement {
    justify-content: center
}

.FormElement,.radioButtonDiv {
    display: flex;
    align-items: left
}

.radioButtonDiv {
    justify-content: space-between
}

@media (max-width: 63.938em) {
    .radioButtonDiv {
        justify-content:space-between
    }

    .FormElement,.radioButtonDiv {
        display: flex;
        align-items: left;
        flex-direction: column
    }

    .FormElement {
        justify-content: center
    }
}

#Symptoms {
    line-height: 1.7
}

.searchSymptomsInput {
    border: none;
    border-bottom: 1px solid #ff0000;
    transition: .2s ease-in-out;
    box-sizing: border-box
}

.searchSymptomsInput:focus {
    outline: none!important;
    border-bottom: 3px solid #ff0000;
    transition: .2s ease-in-out
}

.symtomsListBox {
    width: 100%;
    height: 35vh;
    overflow-y: scroll;
    color: #555
}

ul.symtomsListBox {
    list-style: none;
    line-height: 1.7rem;
    padding-left: 0
}

ul.symtomsListBox>li {
    padding: 0 1rem;
    transition: .2s ease-in-out;
    border-radius: 5px
}

ul.symtomsListBox>li>button:hover {
    cursor: pointer;
    background-color: #ff0000;
    transition: .2s ease-in-out;
    color: #000
}

ul.symtomsListBox>li>button {
    background-color: hsla(0,0%,100%,0);
    border: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: 2rem
}

.symtomsListBox>ul>li>button:hover {
    cursor: pointer
}

.symtomsListBox>ul>li>button:focus {
    outline: none
}

.UserSymptoms>ul {
    list-style: none
}

.UserSymptoms>ul>li {
    background-color: #ff0000;
    color: #fff;
    padding: .5rem;
    border-radius: 1rem;
    font-size: 1rem;
    margin: 5px;
    display: inline-block
}

.UserSymptoms>ul>li>button {
    border: none;
    background-color: #fff;
    color: #ff0000;
    border-radius: 5rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .5rem;
    transition: .2s ease
}

.UserSymptoms>ul>li>button:hover {
    cursor: pointer;
    background-color: #f4f4f4;
    transition: .2s ease
}

.DiseaseComponent {
    color: #000;
    padding: .5rem 1rem;
    line-height: 1.7
}

.patientInfo {
    color: #ff0000
}

.patientQuestions,.reportDiv {
    padding: .5rem 0;
    border-top: 2px solid #ff0000
}

.singleQuestion:not(:first-child) {
    border-top: 1px solid #c9c9c9
}

.singleQuestion>p:not(:first-child) {
    color: #ff0000
}

.titleReport>h4 {
    font-size: 1.2rem
}

.titleReport>a {
    background-color: #ff0000;
    color: #fff;
    line-height: 1.5rem;
    padding: 0 .6rem;
    border-radius: 2rem;
    margin-left: 1rem;
    text-decoration: none
}

.titleReport>a:focus {
    outline: none
}

div.Possibility span {
    color: #ff0000;
    font-weight: 600
}

.possibilityProgressBar {
    background-color: #cfd6dd;
    width: 100px;
    height: 4px;
    margin-left: .5rem;
    border-radius: 1rem
}

.possibilityProgressBar>div {
    height: 100%;
    background-color: #ff0000
}

.diseaseSymptoms {
    border-top: 1px solid #c9c9c9
}

.diseaseSymptoms>ul {
    list-style: none
}

.diseaseSymptoms>ul>li {
    display: inline-block;
    padding: .6rem 1rem;
    margin: .2rem;
    border-radius: .5rem
}

.diseaseSymptoms>ul>li.active {
    border: 1px solid #ff0000;
    color: #ff0000
}

body {background-color: rgba(128, 113, 113, 0.351);}