* {
    box-sizing: border-box;
    /*This work, "B+WPrescipPrice", is a derivative of "Prescription Prices Ver1" by Chris Potter, used under ccPixs.com.  
    "B+WPrescipPrice" is licensed under ccPixs.com by Sunny Lee.  */
    background: url(images/B+WPrescipPrice.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
  
 body {
    text-align: center;
    font-family:  'Vollkorn', serif;
    color: ghostwhite;
    margin: 0;
    height: 100%;
    background-color: #151B54;
}

h1 {
    font-family:  'Merienda', cursive;
    font-size: 6vh;
    margin: 4vh;
}

/**********************************/
/*Start Screen CSS*/
/*Start Screen box*/
.startScreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 6vh 5vh;
}

/*App description paragraph*/
.summary {
    text-align: center;
    margin: 30px;
    width: 80%;
}

/*form for user to enter product they want to search*/
.startForm {
    margin: 9%;
    padding: 15px;
}

/*statement for finding product*/
label {
    width: 100%;
    font-size: 3vh;
    font-weight: bold;
    color: orange;
}

/*question css*/
p {
    font-size: 3.5vh;
    width: 80%;
    margin: 4%;
}

/*textbox for searching*/
#startItemText {
    padding: 8px;
    margin: 20px auto 20px;
    border: none; 
    border-bottom: 3px solid ghostwhite;
    background: none;
    cursor: text;
    color: yellow;
    width: 100%;
    font-size: 25px;
    outline: none;
}

/*button to go find the item*/
.findButton {
    padding: 20px;
    margin: 15%;
    cursor: pointer;
    border-radius: 30px;
    background: url(images/redpill.jpg) no-repeat;
    background-size: cover;
    color: darkblue;
    transition: 0.5s;
    width: 150px;
    background-color: white;
}

/*hover for findbutton*/
.findButton:hover {
    background: url(images/bluepill.jpg) no-repeat;
    background-size: cover;
}

.findButton:active {
    background: darkslateblue;
}


/*autofill text and background*/
@-webkit-keyframes autofill {
    0%,100% {
        color: yellow;
        background: transparent;
    }
}

/*autofill animation*/
#startItemText:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

/**********************************/
/*Find Item screen*/
#findScreen{
    margin: 5%;
}

/*title text let's find...*/
h2 {
    margin: 5px;
    font-size: 4vh;
}

/*text user entered for product name*/
.userInput{
    margin: 10px auto;
    width: 100%;
    color: yellow;
    font-size: 4vh;
}

.directions{
    width: 90%;
    margin: 10px auto;
    font-size: 2vh;
}

/*box holding all the products it could be*/
.drugList{
    padding: 10px;
    margin: 15px auto;
    height: 45vh;
    border: 1px solid black;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    width: 85%;
    font-family:  'Vollkorn', serif;

}

/*box holding radio button choices*/
.radioButtonBox{
    background: white;
    overflow-y: auto;
    width: 100%;
    padding: 10px;
}

/*remove radio button circle*/
.radioChoice{
    display: none;
}

/*label for each choice*/
.choiceLabel{
    width: 95%;
    background: white;
    border: 1px solid black;
    margin: 2px;
    display: inline-flex;
    flex-direction: column;
    padding: 10px;
    color: black;
}

/*ndc number text*/
.ndcNo, .otcPrint{
    width:100%;
    font-size: 15px;
    background: white;
    margin: 5px;
}

/*css for ndc no in list display selected*/
input[type="radio"]:checked ~ *{
    background: orange;   
}

/*selected radio label*/
.active {
    background: orange;
    border: 5px solid black;
}

/*radio button hover*/
.choiceLabel:hover, .choiceLabel:hover > p {
    background: blue;
}

/*button after user has selected product*/
.foundButton {
    margin: 10px;
    padding: 3vh;
    cursor: pointer;
    background: white;
    border-radius: 30px;
    font-size: 2.5vh;
}

.foundButton:hover {
    background: blue;
}

.foundButton:active{
    background: darkslateblue; 
}

.foundButton:disabled{
    display: none;
}

/*div where user can re-enter product info*/
.searchBox{
    position: relative;
    bottom: 0;
    width: 100%;
    font-size: 20px;
    margin: 5px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*textfield and button*/
.searchTextBox{
    display: inline-flex;
    text-align: center;
    width: 75%;
}

/*error message*/
.error {
    color: red;
    font-size: 20px;
    background:  white;
    margin: 10px auto;
}

/*error message title*/
.eTitle{
    font-size: 40px;
    color: red;
    background:  white;
    margin: 10px auto;
}

/*question for re-entering the product*/
.searchBox label{
    font-size: 14px;
    padding: 5px;
    margin: 5px;
    color: white;
}

/*textfield for drug search*/
.searchText {
    background:  white;
    border: 1px solid black;
    color: black;
    padding: 6px;
    width: 100%;
    font-size: 20px;
    border-radius: 5px 0 0 5px;
}

/*css for search again button*/
.goButton {
    border: 1px solid black;
    border-radius: 0 5px 5px 0;
    font-size: 20px;
    background: white;
    padding: 5px;
    cursor: pointer;
}

.goButton:hover {
    background: blue;
}

.goButton:active {
    background: darkslateblue;
}

/**********************************/
/*results screens*/
/*results section*/
main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 5%;
}

/*search form box for result screen*/
.restart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*new search question*/
.restart label{
    color: orange;
    font-size: 2vh;
}

.searchTextBox2 {
    display: inline-flex;
    text-align: center;
    width: 95%;
}

/*css for description of boxes*/
.resultText{
    margin: 10px;
    font-size: 2vh;
}
 
/*drug description box*/
.drugDesc{
    border: 3px solid black;
}

/*box and text for drug description*/
.drugDesc, .drugDesc > * {
    background: white;
    color: black;
    width: 90%;
    text-align: center;
}

/*drug name on results screen*/
.drugN {
    font-size: 4vh;
    color: orange;
    margin: 3px auto;
}

/*text for drug description on results*/
.desc {
    margin: 1% auto;
    font-size: 2vh;
}

/*container for drugs css*/
.box {
    border: 1px solid black;
    width: 90%;
    border-radius: 30px;
    margin: 1%;
    text-align: center;
    color: black;
}

.box, .box > * {
    background: white;
}

/*box text*/
.box > * {
    margin: 5px auto;
}

/*pricing titles*/
.dTitle {
    margin: 5px auto;
    font-size: 3vh;
    font-family:  'Merienda', cursive;
}

/*css for price*/
.pResultText {
    font-size: 3.5vh;
}

/*box text errors*/
.error2 {
    color: red;
    font-size: 3vh;
}

/*cheapest box*/
.cheapest, .cheapest > * {
    background: green;
}

/*expensive box*/
.expensive, .expensive > * {
    background: salmon;
    font-weight: bolder;
}

/*make box white*/
.clear, .clear > * {
    background: white;
    font-weight: normal;
}

/**********************************/
/*other*/
.hidden {
    display: none;
 }

/*css for tablets*/
 @media only screen and (min-width: 600px) {
    #startItemText{
        margin: 5vh auto;
        font-size: 4vh;
    }
    
    .startForm{
        width: 80%;
        margin: 3vh;
    }
    
    .startForm label {
        margin: 3vh auto;
        font-size: 3vh;
    }

    .findButton{
        font-size: 2vh;
        width: 230px;
        margin: 4vh;
        padding: 3.75vh;
    }

    #findScreen{
        padding: 3vh;
    }

    .choiceLabel{
        font-size: 2.5vh;
    }

    .drugDesc{
        padding: 2vh;
    }

    .drugN{
        font-size: 3.5vh;
    }

    .desc {
        font-size: 2vh;
    }

    .restart {
        width: 80%;
    }

    #searchText2 {
        font-size: 3vh;
    }

    .cheapest {
        padding: 2vh;
    }

    .expensive {
        padding: 2vh;
    }
}
 
/*css for laptops*/
@media only screen and (min-width: 1024px) {
    #startItemText{
        margin: 7vh auto;
        font-size: 4vh;
    }
    
    p {
        margin: 4%;
    }
    
    #findScreen {
        margin: 2% 5%;
    }

    .drugList {
        height: 40vh;
    }

    .choiceLabel {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .ndcNo, .otcPrint {
        width: 30%;
    }

    main {
        display: inline-flex;
        margin: 2% 5%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .restart {
        order: 1;
        width: 90%;
    }

    .resultsText {
        width: 100%;
        order: 2;
    }

    .drugDesc {
        order: 3;
        width: 80%;
        margin: 2vh;
    }

    .ampBox {
        order: 4;
        width: 100%;
    }

    .nadacBox {
        order: 5;
        width: 40%;
    }

    .acaBox {
        order: 6;
        width:45%;
    }
    
    .cheapest {
        padding: 2vh;
    }

    .expensive {
        padding: 2vh;
    }
}