/* Master Styles */
h1 {
  color: #369; 
  font-family: Arial, Helvetica, sans-serif;   
  font-size: 250%;
}
h2, h3 { 
  color: #444;
  font-family: Arial, Helvetica, sans-serif;   
  font-weight: lighter;
}
body { 
  margin: 0em;
}
body, input[text], button { 
  color: #888; 
  font-family: Cambria, Georgia; 
}

.regularText {
  font-size: calc(75px - 3vw) !important;
}

.regularHeaderText {
  font-size: calc(87.5px - 3.5vw) !important;
}

.shopperListsHeadings {
  width: calc(1250px - 49vw);
}

.shopperBasicListButton {
  padding: 0px !important;
  border: 0px !important;
  position: relative !important;
  width: 75px;
}

.shopperBasicListButtonOuter {
  padding: 0px !important;
  border: 0px !important;
  position: relative !important;
  left: 16px;
  width: 75px;
}

.shopperNeededForButtonOuter {
  padding: 0px !important;
  border: 0px !important;
  position: relative !important;
  width: 180px;
}

.shopperMealOptionalSelections {
  width: calc(600px - 4vw);
  max-width: calc(600px - 4vw);
}

.extraSmallResizableImage {
  width: calc(250px - 2.5vw) !important;
  height: calc(188px - 1.875vw) !important;
}

.smallResizableImage {
  width: calc(400px - 4vw) !important;
  height: calc(300px - 3vw) !important;
}

.mediumResizableImage {
  width: calc(1000px - 10vw) !important;
  height: calc(750px - 7.5vw) !important;
}

.mealPanelheight {
  min-height: calc(344px - 14vw);
  height: calc(344px - 14vw);
  vertical-align: middle;
  display: table-cell;
}

.shoppingListItems {
  width: calc(450px + 20vw);
  max-width: calc(450px + 20vw);
}

a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa; 
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.router-link-active {
  color: #039be5;
}

/* items class */
.items {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 24em;
}
.items li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.items li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.items li.selected:hover {
  background-color: #BBD8DC;
  color: white;
}
.items .text {
  position: relative;
  top: -3px;
}
.items {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 24em;
}
.items li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.items li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.items li.selected {
  background-color: #CFD8DC;
  color: white;
}

.items li.selected:hover {
  background-color: #BBD8DC;
}
.items .text {
  position: relative;
  top: -3px;
}
.items .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

/* everywhere else */
* { 
  font-family: Arial, Helvetica, sans-serif; 
}

.datePickerTextBox {
  width: calc(370px - 10vw) !important;
  max-width: calc(370px - 10vw) !important;
  height: calc(105px - 2vw) !important;
}

.showDatesButton {
  background-color: #dd5500 !important;
  border-color: #dd5500 !important;
  padding: calc(1px + 1vw) !important;
}

.datePickerContainer {
  width: calc(800px - 30vw) !important;
  height: calc(1080px - 39vw) !important;
}

.datePickerHeader {
  width: calc(800px - 30vw) !important;
  height: calc(80px - 3vw) !important;
}

.datePickerPrevious {
  width: calc(56px - 2vw) !important;
  height: calc(80px - 3vw) !important;
}

.datePickerCaption {
  width: calc(154px - 6vw) !important;
  height: calc(80px - 3vw) !important;
}

.datePickerNext {
  width: calc(56px - 2vw) !important;
  height: calc(80px - 3vw) !important;
}

.datePickerDaypicker {
  width: calc(800px - 30vw) !important;
  height: calc(800px - 30vw) !important;
}

.datePickerMonthpicker {
  width: calc(800px - 30vw) !important;
  height: calc(800px - 30vw) !important;
}

.datePickerYearpicker {
  width: calc(800px - 30vw) !important;
  height: calc(800px - 30vw) !important;
}

.datePickerFooter {
  width: calc(800px - 30vw) !important;
  height: calc(80px - 3vw) !important;
}