/* SETTING CSS PROPERTIES FOR 'index.html' and 'Meal.js' */

body {
    margin: 0;
    padding: 0;
    background-color: rgb(250, 168, 54);
}

header {
    /* to make suggestion overlaps everything else  */

    position: relative;
}

#meal-search-input {
    display: inline-block;
    width: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#searchBtn {
    background-color: rgb(163, 116, 4);
    color: white;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#suggestions-list {
    background-color: white;
    margin-top: 5px;
    color: black;
    width: 50%;
    position: absolute;
    margin-left: -8.3%;
}

.divEachSuggestion-style {
    /* this class will be executed directly through javaScipt as html element over which we
     want to apply this class, will be created after 'keyup' event  */

    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(163, 116, 4);
}

.divSuggestionText {
    /* this class will be executed directly through javaScipt as html element over which we
     want to apply this class, will be created after 'keyup' event  */

    padding-top: 0.7rem;
    width: 94%;
}

.divSuggestionText:hover {
    /* this is a pseudo class */

    background-color: rgba(248, 197, 96, 0.471);
}

.divFavBtn {
    margin: 0 1% 0 1%;
}

.favBtn {
    /* this class will be executed directly through javaScipt as html element over which we
     want to apply this class, will be created after 'keyup' event  */

    border: none;
    font-weight: 500;
    border-radius: 0.375rem;
}

.favBtn:hover {
    /* this is a pseudo class */

    background-color: brown;
    color: white;
}


#favourite-meals-list {
    display: flex;
    flex-direction: column;
    width: 60%;
    padding: 1rem;
    background-color: rgba(240, 248, 255, 0.401);
    border-radius: 0.5rem;
    text-align: center;
}

#favListHeading {
    display: flex;
    justify-content: space-around;
}

#total-number-of-meals {
    display: flex;
    align-items: center;
}


.divFavList-style {
    /* this class will be executed directly through javaScipt as html element over which we
     want to apply this class will be created after click event  */

    /* background-color: antiquewhite; */
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-between;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
    font-weight: 500;
}

.RemoveFavListBtn-style {
    /* this class will be executed directly through javaScipt as html element over which we
     want to apply this class will be created after click event  */

    border: none;
    border-radius: 0.375rem;
    width: 25px;
    height: 30px;
}

.RemoveFavListBtn-style:hover {
    background-color: red;
    color: white;
}