.navbar{
  /*background-color: white;*/
  background-color: rgb(119, 187, 177);
    border: none;
}

.navbar .navbar-toggler{
  border-color: white;
  color: white;
}
/* important to remove hover */
.navbar-brand{
  color: white !important;
  position: relative;
}

/* underline on hover */
/* https://codepen.io/maheshambure21/pen/QwXaRw */

.collapse ul.navbar-nav>li>a{
  color:  white;
}

.collapse ul.stroke>li>a{
  position: relative;
}

.collapse ul.stroke>li>a:after{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    /*background:   rgb(119, 187, 177, 0.9);*/
    background: white;
    height: 1px;
}

.collapse ul.stroke>li>a:hover:after{
  width: 100%;
}

/*MIDDLE*/
.container-fluid{
height: 734px;
/*background-color: rgb(119, 187, 177, 0.9);*/
background-color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}

.centerSmall {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
}


.container h1, p{
color: rgb(119, 187, 177);
text-align: center;
}

.containerSmall h3, p{
color: rgb(119, 187, 177);
text-align: center;
}

.container .btn {
  background-color:rgb(119, 187, 177);
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 17px;
  text-align: center;
  font-family: Arial;
  margin-left: 43.5%;
  margin-right: 41.5%;
}


.column {
float: left;
width: 33.33%;
padding: 10px;
height: 10000000px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* *************** */
/* LIST FORMATTING */
/* *************** */
/* Include the padding and border in an element's total width and height */
* {
box-sizing: border-box;
}

/* Remove margins and padding from the list */
#listUL  {
margin: 0;
padding: 0;
}

/* Style the list items */
#listUL  li {
cursor: pointer;
position: relative;
padding: 12px 10px 25px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
#listUL  li:nth-child(odd) {
background: #f9f9f9;
}

/* Darker background-color on hover */
#listUL li:hover {
background: #ddd;
}

/* When clicked on, add a background color and strike out text */
#listUL li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
#listUL li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}

/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}

.close:hover {
background-color: #f44336;
color: white;
}

/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}

/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 50em;
}

.addBtn:hover {
background-color: #bbb;
}

.addBtn1 {
padding: 10px;
width: 75%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 50em;
margin-left: 10%;
}

.addBtn1:hover {
background-color: #bbb;
}


.quantity{
  float:right;
  font-size: 1rem;
  color: #fff;
  width: 8em;
  font-family: 'Roboto', sans-serif, helvetica;
  font-weight: 100;
  margin: 0;
  padding-right:60px;
}


/******************/
/* INVENTORY LIST */
/******************/
#inventoryList {
width: 100%;
}

#groceryList {
width: 100%;
}

/******************/
/* FAVORITES LIST */
/******************/
#favoritesList {
width: 100%;
}

.btnHolder{
  text-align: center;
  /*background-color: black;*/
  margin-left: 39%;
  margin-right: 45%;
  width: 100%;
  height: 7%;
}
/*
.addBtn{
  margin-left: auto;
  margin-right: auto;
}*/