/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
html, body, section, article,
h1, h2, p, strong, em, a {
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
  box-sizing: inherit;
  font: inherit;
  text-decoration: inherit;
  text-align: inherit;
  color: rgba(0, 0, 0, 0.6);
  background: transparent;
}

li {
  list-style: none;
}

body {
  background: repeating-linear-gradient(35deg, #16c35b, #16c35b 35px, #f9f35a 35px, #f9f35a 50px);
  font-family: Arial, Helvetica, sans-serif;
}

.big-holder {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.big {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.all-breads, .all-cheese, .all-meat, .single-sandwich, .all-toppings {
  width: 35px;
  height: auto;
}

.add-button, .subtract-button {
  width: 20px;
  height: auto;
}

.add-sub-container {
  display: flex;
  margin-left: 2px;
}

.content {
  display: none;
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;
  grid-template-columns: 125px 125px 125px 125px 125px;
  column-gap: 5px;
  row-gap: 5px;
  background-color: rgba(215, 149, 63, 0.5);
  border: 1px solid rgb(204, 147, 73);
  position: relative;
  bottom: 1px;
}

.info-content {
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 5px;
  padding-left: 95px;
  width: 650px;
  background-color: rgba(215, 149, 63, 0.5);
  border: 1px solid rgb(204, 147, 73);
  position: relative;
  bottom: 1px;
  text-align: left;
}

header {
  height: 100px;
}

.title-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.title {
  display: flex;
}

.mine-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine {
  display: flex;
  position: relative;
  top: 20px;
  width: 25%;
  margin-right: 10px;
  align-items: baseline;
}

li > a > img {
  width: 40px;
  height: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.mine-angellist > a > img {
  width: 40px;
  height: auto;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #39f082;
  border-radius: 5%;
}

.mine-portfolio > a > img {
  width: 40px;
  height: auto;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #f9f35a;
  border-radius: 5%;
}

.canvas-and-options {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 20px;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid rgb(204, 147, 73);
  border-top: 2px solid rgb(204, 147, 73);
  padding: 10px;
  background-color: rgba(250, 249, 247, 0.7);
}

.container-chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 500px;
  height: 270px;
  background-color: rgba(250, 249, 247, 0.5);
  border: 2px solid rgb(204, 147, 73);
  border-radius: 5%;
}

.total-cal-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 250px;
}

.total-cal-text {
  color: rgba(0, 0, 0, 0.6);
}

#total-cal-num {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgb(204, 147, 73);
  border-radius: 7%;
  color: rgba(0, 0, 0, 0.6);
  width: 50px;
  height: 25px;
}

.options {
  display: flex;
  align-items: center;
  background-color: rgb(215, 149, 63);
}

#item-info, #item-name-bread, #item-name-cheese, #item-name-protein, #item-name-toppings, #item-name-condiments {
  background-color: rgb(215, 149, 63);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: 0.3s;
  cursor: pointer;
}

#item-info:hover, #item-name-bread:hover, #item-name-cheese:hover, #item-name-protein:hover, #item-name-toppings:hover, #item-name-condiments:hover {
  background-color: rgb(183, 128, 56);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

#item-info.active, #item-name-bread.active, #item-name-cheese.active, #item-name-protein.active, #item-name-toppings.active, #item-name-condiments.active {
  background-color: rgb(161, 108, 38);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border-top: 1px solid rgb(204, 147, 73);
  border-left: 1px solid rgb(204, 147, 73);
  border-right: 1px solid rgb(204, 147, 73);
}

.item-name-rest {
  display: flex;
  justify-content: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

.option:hover {
  background-color: rgb(39, 162, 84);
}

li[clicked=yes] {
  border: 2px solid rgb(30, 135, 69);
}

.option {
  display: flex;
  border: 1px solid rgb(39, 162, 84);
  width: 125px;
  height: 45px;
  box-sizing: border-box;
  border-radius: 7%;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 10px;
  background-color: #39f082;
}

.option:active {
  transform: scale(0.95);
  box-shadow: 3px 2px 15px 1px rgba(0, 0, 0, 0.24);
}

.options-container {
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}

.clear {
  width: 50px;
  height: auto;
}

.clear-button, #selected-list {
  display: flex;
  border: 1px solid rgb(164, 104, 25);
  background-color: rgb(215, 149, 63);
  margin-left: 5px;
  width: 100px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 7%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s all;
}

#twelve:hover, .clear-button:hover, #selected-list:hover {
  background-color: rgb(183, 128, 56);
}

.clear-button:active, #selected-list:active #twelve:active {
  transform: scale(0.92);
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

#selected-list #selected-list-text {
  visibility: hidden;
  text-align: center;
  width: 235px;
  background-color: rgba(250, 249, 247, 0.9);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  left: 700px;
}

#selected-list.active #selected-list-text {
  visibility: visible;
}