/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
body {
  display: flex;
  justify-content: center;
  background-color: #7393B3;
  z-index: 1;
}

#first-container {
  display: flex;
  flex-direction: column;
  z-index: 1;
}

#second-container {
  width: 1300px;
  z-index: 1;
}

#dishwasher:hover {
  cursor: pointer;
  background-image: url("../src/assets/Kitchen_furniture_set/Dishwasher_white_open.png");
}

#fridge {
  height: 857px;
  width: 100%;
  margin-right: 5px;
  background-image: url("../src/assets/Kitchen_furniture_set/Fridge_gray_2_open_1.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 89%;
  z-index: 1;
}

#fridge:hover {
  cursor: pointer;
  background-image: url("../src/assets/Kitchen_furniture_set/Fridge_gray_2_open.png");
}

#oven:hover {
  cursor: pointer;
  background-image: url("../src/assets/Kitchen_furniture_set/Stove_open.png");
}

#drawer:hover {
  cursor: pointer;
}

#right-container {
  width: 25%;
  z-index: 1;
}

.top-container {
  height: 50%;
  display: flex;
  z-index: 1;
}

.bottom-container {
  display: flex;
  height: 50%;
  z-index: 1;
}

#hood {
  height: 100%;
  width: 25%;
  margin-right: 5px;
  background-image: url("../src/assets/Kitchen_furniture_set/Range_hood_1.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  z-index: 1;
}

#oven {
  background-image: url("../src/assets/Kitchen_furniture_set/Stove_close.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  margin-right: 5px;
  height: 100%;
  width: 25%;
  background-size: 100%;
  z-index: 1;
}

#cabinet {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Cupboard_white_1.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  z-index: 1;
}

#cabinet-two {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Cupboard_white_1.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  z-index: 1;
}

#cabinet-three {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Cupboard_white_1.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  z-index: 1;
}

#drawer {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Cabinet_white_2.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  z-index: 1;
}

#dishwasher {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Dishwasher_white_close.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  z-index: 1;
}

#sink-cabinet {
  width: 25%;
  background-image: url("../src/assets/Kitchen_furniture_set/Cabinet_white_1.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  z-index: 1;
}

.hidden {
  display: none;
}

.closeIngModal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#ing-page {
  display: none;
  justify-content: center;
  position: absolute;
  background-image: url("../src/assets/Kitchen_furniture_set/spiral_notepad.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95%;
  width: 40%;
  height: 100%;
  z-index: 4;
}

.ing-modal {
  display: none; /* Hidden by default */
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.281);
}

#user-page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
  text-align: left;
  color: #7393B3;
  font-family: cursive;
  z-index: 4;
}

.user-modal {
  display: flex; /* Hidden by default */
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.281);
}

.ingredients {
  list-style: none;
  display: flex-column;
  align-items: center;
  justify-content: center;
  margin-left: 20%;
}

.ingredients-container {
  display: flex-column;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  color: #7393B3;
  font-family: cursive;
  font-size: larger;
}

.recipe-modal {
  display: none; /* Hidden by default */
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.281);
}

#recipe-page {
  display: none;
  position: absolute;
  background-image: url("../src/assets/Kitchen_furniture_set/ingredients_page/open_book.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 70%;
  height: 100%;
  z-index: 4;
}

.recipe-container {
  color: #7393B3;
  font-family: cursive;
  font-size: larger;
  width: 50%;
}

.recipe {
  margin-left: 20%;
  list-style: none;
}

#button {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
  margin-top: 50px;
  margin-left: 50px;
  font-family: cursive;
  font-size: medium;
  color: #7393B3;
}

#clearRecipe {
  margin-left: 50px;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
  font-family: cursive;
  font-size: medium;
  color: #7393B3;
}

#clearButton {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 0 5px 5px 0;
  height: 5%;
  font-family: cursive;
  font-size: medium;
  color: #7393B3;
}

#add-ingredient {
  font-family: cursive;
  font-size: medium;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
  color: #7393B3;
}

.pie-chart-container {
  display: block;
}

#chart-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 50%;
}

#chart {
  display: flex-column;
  align-items: center;
  color: #7393B3;
  font-family: cursive;
  font-size: larger;
  height: 100%;
  width: 100%;
  margin-top: 10%;
}

#chart > h1 {
  display: flex;
  justify-content: center;
  position: absolute;
  margin-right: 10%;
  margin-top: 7%;
}

.chart {
  display: flex-column;
  justify-content: center;
  align-items: center;
}

.bubble-chart-container {
  margin-top: 25%;
  height: 100%;
  width: 100%;
}

.drawer-modal {
  display: none; /* Hidden by default */
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.281);
}

#drawer-page {
  display: none;
  position: absolute;
  align-items: center;
  background-image: url("../src/assets/Kitchen_furniture_set/spiral_notepad.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95%;
  width: 40%;
  height: 100%;
  z-index: 4;
}

.drawer-container {
  display: flex-column;
  justify-content: center;
  align-items: center;
  margin-bottom: 200px;
  margin-left: 200px;
  color: #7393B3;
  font-family: cursive;
  font-size: xx-large;
  z-index: 1;
}

#tooltip {
  position: absolute;
  display: flex-column;
  width: 100px;
  height: auto;
  background-color: rgb(161, 161, 161);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  opacity: 0;
  color: black;
}

#microwave-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 100px;
  margin-left: 30%;
  margin-top: 23.5%;
}

#microwave {
  display: flex;
  position: absolute;
  justify-content: center;
  background-image: url("../src/assets/Kitchen_furniture_set/Microwave.png");
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: right;
  z-index: 2;
  height: 150px;
  width: 315px;
}

#sink-top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 100px;
  margin-left: 80%;
  margin-top: 24%;
}

#sink-top {
  display: flex;
  position: absolute;
  justify-content: center;
  background-image: url("../src/assets/Kitchen_furniture_set/Sink_1.png");
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center;
  z-index: 2;
  height: 150px;
  width: 350px;
}

#git-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 100px;
  margin-left: 89%;
  margin-top: 40%;
}

#git {
  z-index: 2;
  background-image: url("../src/assets/github-logo.png");
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: center;
  margin-right: 100%;
  height: 150px;
  width: 315px;
}

#linkedin-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 100px;
  margin-left: 53%;
  margin-top: 35.5%;
}

#linkedin {
  display: flex;
  position: absolute;
  justify-content: center;
  z-index: 2;
  height: 150px;
  width: 315px;
  background-image: url("../src/assets/vecteezy_linkedin-logo-png-linkedin-icon-transparent-png_18930587_72.png");
  background-repeat: no-repeat;
  background-size: 38%;
  background-position: center;
}

#pot-container {
  display: flex-column;
  justify-content: center;
  align-items: left;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 100px;
  margin-right: 14.5%;
  margin-top: 23.5%;
}

#pot {
  display: flex;
  position: relative;
  justify-content: left;
  background-image: url("../src/assets/Kitchen_furniture_set/Pot.png");
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: 92% 48%;
  z-index: 2;
  height: 150px;
  width: 400px;
}

#countertop {
  display: flex;
  position: absolute;
  z-index: 2;
  width: 350px;
  height: 100px;
  margin-right: 33%;
  margin-top: 23.5%;
}

#mug {
  display: flex;
  position: relative;
  background-image: url("../src/assets/Kitchen_furniture_set/Mug_blue.png");
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: 0% 63%;
  z-index: 2;
  height: 150px;
  width: 400px;
}

#kettle {
  display: flex;
  position: relative;
  background-image: url("../src/assets/Kitchen_furniture_set/Kettle_1.png");
  background-repeat: no-repeat;
  background-size: 45%;
  background-position: 92% 48%;
  z-index: 2;
  height: 150px;
  width: 400px;
}

#cuisine {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
}

#health {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
}

#mealType {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
}

#dishType {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
}

#diet {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
}

#resetButton {
  position: absolute;
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 5px 5px 0;
  margin-top: 700px;
  margin-right: 100px;
  color: #7393B3;
  font-family: cursive;
}