* {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  /* Hide scrollbar for IE, Edge and Firefox */
}
* input {
  outline: none;
}
*::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
* select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body {
  position: relative;
  margin: 0;
  background-color: rgb(255, 255, 255);
}
body .main {
  position: relative;
  display: flex;
  justify-content: center;
  width: 360px;
  height: 100%;
  margin: 0 auto;
}
body .main__appleButton {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background: url(./image/appleFirstPic.png);
  border: none;
}
body .main__onboarding {
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px 0 40px 0;
  display: none;
}
body .main__onboarding .main__onboardingContent .onboardingWrapper {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingTextBox {
  width: 248px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingTextBox .main__onboardingH {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingTextBox .main__onboardingP {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingNavBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingNavBox .main__onboardingNavItem {
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background-color: rgb(217, 217, 217);
  margin-top: 20px;
}
body .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingNavBox .activeState {
  width: 24px;
  border-radius: 20px;
  background-color: rgb(53, 204, 140);
}
body .main__onboarding .main__onboardingContent .onboardingBox1 {
  display: flex;
}
body .main__onboarding .main__onboardingContent .onboardingBox2 {
  display: none;
}
body .main__onboarding .main__onboardingContent .onboardingBox3 {
  display: none;
}
body .main__onboarding .main__onboardingContent .onboardingBox4 {
  display: none;
}
body .main__onboarding .main__onboardingButtons {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20px;
}
body .main__onboarding .main__onboardingButtons .main__onboardingSkipButton, body[data-theme=dark] .main__onboarding .main__onboardingButtons .main__onboardingBackButton, body .main__onboarding .main__onboardingButtons .main__onboardingBackButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 33px;
  background: none;
  border: none;
  color: rgb(110, 113, 121);
  padding: 20px 30px;
}
body .main__onboarding .main__onboardingButtons .main__onboardingBackButton {
  display: none;
}
body .main__onboarding .main__onboardingButtons .main__onboardingNextButton {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: none;
  background: rgb(53, 204, 140) url(./image/nextArrow.svg) no-repeat center;
}
body .main__onboarding .main__startButtons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: 20px;
  display: none;
}
body .main__onboarding .main__startButtons .main__startButton {
  height: 52px;
  width: 312px;
  border-radius: 10px;
  border: none;
  background-color: rgb(53, 204, 140);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: rgb(255, 255, 255);
}
body .main__onboarding .main__startButtons .main__startParagraph {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: rgb(13, 18, 32);
}
body .main__onboarding .main__startButtons .main__startParagraph .main__startLink {
  color: rgb(53, 204, 140);
  text-decoration: none;
}
body .main__requestingData {
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0 40px 0;
  display: none;
}
body .main__requestingData .main__requestingDataContainer {
  height: 422px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox {
  height: 422px;
  width: 312px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextBox .requestingHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextBox .requestingParagraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  width: 290px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingButtonsBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingButtonsBox .requestingDataButton {
  height: 60px;
  width: 312px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose {
  width: 70px;
  height: 150px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker {
  overflow-y: scroll;
  padding: 0px 10px;
  scroll-snap-type: y mandatory;
  display: flex;
  align-items: center;
  flex-direction: column;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker .pickerNums {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  scroll-snap-align: center;
  color: rgb(110, 113, 121);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker .pickerNumsActive {
  font-weight: bold;
  color: rgb(13, 18, 32);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .highlight {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-top: 2px solid rgb(53, 204, 140);
  border-bottom: 2px solid rgb(53, 204, 140);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .unit {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextWeight {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextWeight .inputWeight {
  height: 30px;
  width: 100px;
  border: none;
  border-bottom: 1px solid rgb(53, 204, 140);
  padding-left: 10px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextWeight .weightParagraph {
  color: rgb(53, 204, 140);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextAge {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextAge .inputAge {
  height: 30px;
  width: 100px;
  border: none;
  border-bottom: 1px solid rgb(53, 204, 140);
  padding-left: 10px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextAge .ageParagraph {
  color: rgb(53, 204, 140);
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextName {
  display: flex;
  justify-content: center;
  align-items: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextName .inputName {
  height: 30px;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgb(53, 204, 140);
  padding-left: 10px;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingInfoBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
body .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingInfoBox .normCalorieParagraph {
  height: 60px;
  width: 312px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(255, 255, 255);
  background-color: rgb(53, 204, 140);
  border-radius: 10px;
}
body .main__requestingData .main__requestingDataContainer .requestingGoal {
  display: flex;
}
body .main__requestingData .main__requestingDataContainer .requestingGender {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingActivity {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingTall {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingWeight {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingAge {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingName {
  display: none;
}
body .main__requestingData .main__requestingDataContainer .requestingRecommendations {
  display: none;
}
body .main__requestingData .main__requestingDataButtons {
  width: 312px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
body .main__requestingData .main__requestingDataButtons .requestingButtonBack {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  background: none;
  border: none;
  display: none;
}
body .main__requestingData .main__requestingDataButtons .requestingButton {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: none;
  background: rgb(53, 204, 140) url(./image/nextArrow.svg) no-repeat center;
  position: absolute;
  right: 0;
  bottom: 0;
}
body .main__homePage {
  display: flex;
  justify-content: center;
  width: 360px;
  height: 800px;
  display: none;
}
body .main__homePage .main__homePageBox {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
body .main__homePage .main__homePageBox .main__homePageHeader {
  position: fixed;
  width: 330px;
  height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background-color: rgb(255, 255, 255);
  z-index: 1;
}
body .main__homePage .main__homePageBox .main__homePageHeader .personBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
body .main__homePage .main__homePageBox .main__homePageHeader .personBlock .personImg {
  height: 16px;
  width: 17px;
  padding: 5px;
  border: 1px solid rgb(53, 204, 140);
  border-radius: 50%;
}
body .main__homePage .main__homePageBox .main__homePageHeader .personBlock .personName {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .main__homePage .main__homePageBox .main__homePageHeader .calendarButton {
  height: 20px;
  width: 18px;
  background: url(./image/calendar.svg);
  border: none;
}
body .main__homePage .main__homePageBox .homePageHeadline {
  font-weight: 600;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: left;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorHeadline {
  padding-top: 78px;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock {
  width: 328px;
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background-color: rgb(247, 247, 247);
  border-radius: 10px;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock {
  position: relative;
  height: 44px;
  width: 85.33px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .pfcText {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .pfcIndicator {
  height: 4px;
  width: 100%;
  border-radius: 5px;
  background-color: rgb(204, 204, 204);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .colorIndicator {
  position: absolute;
  top: 20px;
  left: 0;
  height: 4px;
  border-radius: 5px;
  background-color: rgb(53, 204, 140);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .proteins {
  background-color: rgb(229, 101, 113);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .fats {
  background-color: rgb(255, 160, 114);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .carbs {
  background-color: rgb(89, 255, 196);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 304px;
  margin-bottom: 16px;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox .caloriesText {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox .caloriesIndicator {
  height: 4px;
  border-radius: 5px;
  background-color: rgb(204, 204, 204);
}
body .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox .colorIndicator {
  position: absolute;
  top: 23px;
  left: 0;
  height: 4px;
  border-radius: 5px;
  background-color: rgb(53, 204, 140);
}
body .main__homePage .main__homePageBox .waterIntakeBlock {
  height: 132px;
  width: 328px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(247, 247, 247);
  border-radius: 10px;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper {
  display: flex;
  justify-content: space-between;
  height: 100px;
  width: 296px;
  margin: 16px 0;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntakeTextBlock {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntakeTextBlock .waterIntakeTextBox {
  height: 20px;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntakeTextBlock .waterIntakeTextTime {
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(128, 128, 128);
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock {
  display: flex;
  align-items: center;
  gap: 16px;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock {
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .plusMinusButton {
  height: 24px;
  width: 24px;
  border-radius: 30px;
  border: none;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .plus {
  background: url(./image/plus.svg) rgb(204, 204, 204) center no-repeat;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .plus:hover {
  background-color: #B9B9B9;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .minus {
  background: url(./image/minus.svg) rgb(204, 204, 204) center no-repeat;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .minus:hover {
  background-color: #B9B9B9;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .waterIntackeIndicator {
  position: relative;
  height: 100px;
  width: 40px;
  background-color: rgb(204, 204, 204);
  border-radius: 30px;
  overflow: hidden;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .waterIndicate {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(rgb(129, 221, 255), rgb(120, 171, 255));
  transition: height 0.2s ease-in-out;
}
body .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .percentOfDrunkWater {
  position: absolute;
  top: 43%;
  left: 12.5%;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
}
body .main__homePage .main__homePageBox .homePageHeadlineBlock {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .main__homePage .main__homePageBox .homePageHeadlineBlock .plusButton {
  height: 24px;
  width: 24px;
  border-radius: 30px;
  border: none;
  background: url(./image/plus.svg) center no-repeat;
}
body .main__homePage .main__homePageBox .mealsBlock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox {
  height: 89px;
  width: 328px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(247, 247, 247);
  border-radius: 10px;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox:last-child {
  margin-bottom: 126px;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal {
  height: 57px;
  width: 296px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealHead {
  display: flex;
  justify-content: space-between;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealHead .mealName {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealHead .calories {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  font-weight: 500;
  color: rgb(13, 18, 32);
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealTimeAndDateContainer {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealTimeAndDateContainer .mealDate {
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(128, 128, 128);
}
body .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealTimeAndDateContainer .mealTime {
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(128, 128, 128);
}
body .main__homePage .main__homePageBox .controlPanel--wrapper {
  height: 104px;
  width: 328px;
  position: fixed;
  bottom: 0;
  background-color: white;
  border-radius: 10px 10px 0 0;
}
body .main__homePage .main__homePageBox .controlPanel--wrapper .controlPanel {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 40px;
  height: 74px;
  width: 328px;
  background-color: rgb(219, 251, 237);
  border-radius: 10px;
}
body .main__homePage .main__homePageBox .controlPanel--wrapper .controlPanel .controlPanelElem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}
body .main__homePage .main__homePageBox .controlPanel--wrapper .controlPanel .controlPanelElem .controlPanelParagraph {
  color: rgb(53, 204, 140);
}
body .main__mealPage {
  position: absolute;
  width: 360px;
  height: 800px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  display: none;
  z-index: 2;
}
body .main__mealPage .mealHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 312px;
  margin-top: 40px;
}
body .main__mealPage .mealHead .mealButtons {
  height: 24px;
  width: 24px;
  border: none;
  background: none;
}
body .main__mealPage .mealHead .closeBtn {
  background: url(./image/clear.svg) center no-repeat;
}
body .main__mealPage .mealHead .createBtn {
  background: url(./image/plus.svg) center no-repeat;
}
body .main__mealPage .mealHead .mealNameP {
  position: absolute;
  left: 50px;
  height: 24px;
  width: 264px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .main__mealPage .mealCaloriesBlock {
  width: 328px;
  display: flex;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(217, 217, 217);
}
body .main__mealPage .mealCaloriesBlock .mealCaloriesElem {
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body .main__mealPage .mealCaloriesBlock .mealCaloriesElem .mealCaloriesNum {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 16px;
}
body .main__mealPage .mealCaloriesBlock .mealCaloriesElem .mealCaloriesP {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  color: rgb(13, 18, 32);
}
body .main__mealPage .eatenMealsBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 328px;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .mealFoodWrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 304px;
  margin-left: 12px;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .mealFoodWrapper .mealFoodH {
  font-weight: 600;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(13, 18, 32);
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .mealFoodWrapper .mealFoodP {
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(110, 113, 121);
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock {
  position: relative;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .deleteButton {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 5px;
  background: url(./image/deleteBtn.svg) no-repeat center;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .deleteButton:hover {
  border: 1px solid rgb(53, 204, 140);
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox {
  position: absolute;
  top: 2px;
  right: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  gap: 3px;
  border: none;
  border-radius: 10px;
  display: none;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox .editOrDeleteButtons {
  height: 20px;
  width: 100%;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  line-height: 14.5px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(13, 18, 32);
  border: 1px solid rgb(53, 204, 140);
  border-radius: 4px;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox .editOrDeleteButtons:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(53, 204, 140);
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox .editOrDeleteButtons .edit_Button {
  padding-top: 3px;
}
body .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox .editOrDeleteButtons .cancel_Button {
  padding-bottom: 3px;
}
body .main__mealPage .saveMealButton {
  position: fixed;
  bottom: 40px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 328px;
  background-color: rgb(53, 204, 140);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  border: none;
}
body .main__searchFood {
  position: absolute;
  width: 360px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  display: none;
  z-index: 2;
}
body .main__searchFood .searchBarBox {
  width: 312px;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .main__searchFood .searchBarBox .backSearchButton {
  height: 64px;
  width: 24px;
  background: url(./image/bigArrow.svg) center no-repeat;
  padding: 0 20px;
  border: none;
}
body .main__searchFood .searchBarBox .searchInput {
  height: 34px;
  width: 224px;
  border: none;
  outline: none;
}
body .main__searchFood .searchBarBox .clearSearchButton {
  height: 64px;
  width: 24px;
  background: url(./image/clear.svg) center no-repeat;
  padding: 0 20px;
  border: none;
}
body .main__searchFood .foodContainer {
  height: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  overflow: auto;
}
body .main__searchFood .foodContainer .foodBox {
  height: 52px;
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body .main__searchFood .foodContainer .foodBox .foodH {
  width: 328px;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  color: rgb(13, 18, 32);
}
body .main__searchFood .foodContainer .foodBox .foodP {
  width: 328px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.5px;
  letter-spacing: 0%;
  color: rgb(101, 101, 101);
}
body .calendar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
}
body .calendar .calendarItem {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 541px;
  width: 328px;
  background-color: rgb(247, 247, 247);
  border-radius: 10px;
}
body .calendar .calendarItem .calendarHead {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid lightgray;
}
body .calendar .calendarItem .calendarHead .calendarP {
  height: 16px;
  width: 292px;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: rgb(13, 18, 32);
  outline: none;
  border: none;
}
body .calendar .calendarItem .calendarHead .calendarH {
  height: 40px;
  width: 292px;
  font-weight: 400;
  font-size: 32px;
  line-height: 39px;
  color: rgb(13, 18, 32);
}
body .calendar .calendarItem .calendarNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  width: 304px;
}
body .calendar .calendarItem .calendarNav .monthAndYear {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}
body .calendar .calendarItem .calendarNav .monthAndYear .calendarP {
  position: relative;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
  border: none;
  background-color: inherit;
}
body .calendar .calendarItem .calendarNav .navigation {
  display: flex;
  align-items: center;
}
body .calendar .calendarItem .calendarNav .navigation .backButtonCalendar, body .calendar .calendarItem .calendarNav .navigation .nextButtonCalendar {
  height: 48px;
  width: 48px;
  border: none;
  background-color: inherit;
  background: url(./image/arrow.svg) center no-repeat;
}
body .calendar .calendarItem .calendarNav .navigation .nextButtonCalendar {
  background: url(./image/arrow.svg) center no-repeat;
  transform: rotate(180deg);
}
body .calendar .calendarItem .daysName {
  height: 48px;
  width: 304px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
}
body .calendar .calendarItem .daysName .days {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 43.43px;
  width: 45px;
}
body .calendar .calendarItem .nums {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-left: 12px;
}
body .calendar .calendarItem .nums .num {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 43.43px;
  width: 43.43px;
}
body .calendar .calendarItem .nums .empty {
  height: 48px;
  width: 43.43px;
}
body .calendar .calendarItem .nums .currentDate {
  border: 1px solid rgb(53, 204, 140);
  border-radius: 50%;
  color: rgb(53, 204, 140);
}
body .calendar .calendarItem .nums .activeDate {
  background-color: rgb(53, 204, 140);
  border-radius: 50%;
  color: white;
}
body .calendar .calendarItem .buttonsCancelAndOkBox {
  height: 57px;
  width: 304px;
  display: flex;
  justify-content: end;
  gap: 8px;
}
body .calendar .calendarItem .buttonsCancelAndOkBox .calendarCancelOkBtn {
  border: none;
  background-color: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(53, 204, 140);
  padding: 12px;
}
body .eatenAmountForm {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
}
body .eatenAmountForm .eatenAmountFormBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 238px;
  width: 328px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(247, 247, 247);
  border-radius: 10px;
}
body .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .eatenAmountH {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
  margin-top: 16px;
}
body .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock {
  display: flex;
  width: 308px;
  height: 41px;
  margin: 18px 0 12px 0;
}
body .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock .caloriesElem {
  height: 41px;
  width: 77px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock .caloriesElem .caloriesNum {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  font-weight: 500;
  color: rgb(13, 18, 32);
}
body .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock .caloriesElem .caloriesP {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  font-size: 14px;
  color: rgb(13, 18, 32);
}
body .eatenAmountForm .eatenAmountFormBox .caloriesValueBlock {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
  width: 184px;
  height: 52px;
  margin-bottom: 36px;
}
body .eatenAmountForm .eatenAmountFormBox .caloriesValueBlock .eatenAmountGrams {
  height: 32px;
  width: 100px;
  background: none;
  border: none;
  border-bottom: 2px solid rgb(53, 204, 140);
  padding-left: 16px;
}
body .eatenAmountForm .eatenAmountFormBox .caloriesValueBlock .eatenAmountGramsP {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body .eatenAmountForm .eatenAmountFormBox .caloriesButtonsBlock {
  height: 17px;
  width: 284px;
  display: flex;
  justify-content: end;
  gap: 32px;
}
body .eatenAmountForm .eatenAmountFormBox .caloriesButtonsBlock .caloriesCancelOkBtn {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 14px;
  color: rgb(53, 204, 140);
}
body .profileBlock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 100%;
  width: 360px;
  background-color: inherit;
  display: none;
  z-index: 2;
}
body .profileBlock .profileHeader {
  display: flex;
  gap: 100px;
  justify-content: start;
  align-items: center;
  margin-right: 150px;
  padding-top: 40px;
}
body .profileBlock .profileHeader .profileButtonBack {
  height: 24px;
  width: 24px;
  background: url(./image/bigArrow.svg) no-repeat center;
  border: none;
  margin-left: 24px;
}
body .profileBlock .profileHeader .profileH {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .profileBlock .profileNamePhotoBlock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body .profileBlock .profileNamePhotoBlock .profileImg {
  height: 60px;
  width: 60px;
  padding: 20px;
  border: 1px solid rgb(53, 204, 140);
  border-radius: 50%;
}
body .profileBlock .profileNamePhotoBlock .profileName {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
}
body .profileBlock .menuButtonsBlock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body .profileBlock .menuButtonsBlock .menuButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 328px;
  border: none;
  border-radius: 10px;
  text-align: left;
  padding: 16px;
  background-color: rgb(219, 251, 237);
}
body .profileBlock .menuButtonsBlock .menuButtons .inButtonTextElem {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
}
body .profileBlock .menuButtonsBlock .menuButtons .calorieElem {
  color: rgb(53, 204, 140);
}
body .profileBlock .menuButtonsBlock .menuButtons:hover {
  background-color: rgb(53, 204, 140);
  color: rgb(255, 255, 255);
}
body .profileBlock .menuButtonsBlock .menuButtons:hover.meButton {
  background-image: url(./image/nextArrow.svg);
}
body .profileBlock .menuButtonsBlock .menuButtons:hover .calorieElem {
  color: rgb(255, 255, 255);
}
body .profileBlock .menuButtonsBlock .meButton {
  background-image: url(./image/greenNextArrow.svg);
  background-repeat: no-repeat;
  background-position: 296px;
}
body .profileBlock .lineElem {
  width: 100%;
  height: 1px;
  background-color: rgb(191, 191, 191);
}
body .profileBlock .otherOprionsBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .profileBlock .otherOprionsBlock .themeBlock {
  display: flex;
  width: 328px;
  height: 48px;
  justify-content: space-between;
  align-items: center;
}
body .profileBlock .otherOprionsBlock .themeBlock .themeLogoAndName {
  display: flex;
  align-items: center;
  gap: 12px;
}
body .profileBlock .otherOprionsBlock .themeBlock .themeLogoAndName .activeThemeName {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
}
body .profileBlock .otherOprionsBlock .themeBlock .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
body .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch {
  opacity: 0;
  width: 0;
  height: 0;
}
body .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch:checked + .slider {
  background-color: rgb(53, 204, 140);
}
body .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch:checked + .slider::before {
  transform: translateX(16px);
  background-color: rgb(255, 255, 255);
}
body .profileBlock .otherOprionsBlock .themeBlock .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: inherit;
  border: 2px solid rgb(53, 204, 140);
  border-radius: 34px;
  transition: 0.4s;
}
body .profileBlock .otherOprionsBlock .themeBlock .switch .slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 3px;
  background-color: rgb(53, 204, 140);
  border-radius: 50%;
  transition: 0.4s;
}
body .profileBlock .otherOprionsBlock .logOutBlock {
  width: 328px;
  height: 48px;
  display: flex;
  gap: 12px;
  align-items: center;
}
body .profileBlock .otherOprionsBlock .logOutBlock .logOutP {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  color: rgb(203, 32, 48);
}
body .meBlock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 700px;
  width: 360px;
  z-index: 2;
  display: none;
}
body .meBlock .meBlockContent {
  display: flex;
  flex-direction: column;
}
body .meBlock .meBlockContent .meHeader {
  width: 312px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 130px;
  padding-left: 16px;
  padding-top: 40px;
}
body .meBlock .meBlockContent .meHeader .meButtonBack {
  height: 24px;
  width: 24px;
  background: url(./image/bigArrow.svg) no-repeat center;
  border: none;
}
body .meBlock .meBlockContent .meHeader .meHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .meBlock .meBlockContent .meElemsBlock {
  display: flex;
  flex-direction: column;
}
body .meBlock .meBlockContent .meElemsBlock .meElem {
  height: 50px;
  width: 360px;
  border-bottom: 1px solid rgb(217, 217, 217);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .meBlock .meBlockContent .meElemsBlock .meElem .meParagraph {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  padding: 0 16px;
}
body .meBlock .meBlockContent .meElemsBlock .meElem .meGreenParagraph {
  color: rgb(53, 204, 140);
}
body .meBlock .meBlockContent .meElemsBlock .disabledMeElem {
  pointer-events: none;
}
body .meBlock .meBlockContent .meElemsBlock .disabledMeElem .meDisabledNameParagraph {
  color: rgb(110, 113, 121);
}
body .meBlock .meBlockContent .meElemsBlock .disabledMeElem .meDisabledParagraph {
  color: rgb(166, 233, 204);
}
body .meBlock .meSaveButton {
  position: fixed;
  bottom: 0;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 328px;
  background-color: rgb(53, 204, 140);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  border: none;
  margin-bottom: 40px;
}
body .changeInfoWindow {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
}
body .changeInfoWindow .changeInfoWindowWrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  border-radius: 24px 24px 0 0;
  background-color: rgb(247, 247, 247);
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}
body .changeInfoWindow .changeInfoWindowWrapper .miniLine {
  height: 4px;
  width: 34px;
  background-color: rgb(191, 191, 191);
  border-radius: 100px;
  margin-top: 20px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .nameOfChaingingParameter {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .inputAndValueWrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .inputAndValueWrapper .inputForChangeInfo {
  height: 48px;
  width: 168px;
  border: none;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid rgb(53, 204, 140);
  padding-left: 16px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .inputAndValueWrapper .valuesOfChangingInfo {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  font-size: 16px;
  color: rgb(53, 204, 140);
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  display: none;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker {
  width: 70px;
  height: 150px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker .changeInfoPicker {
  overflow-y: scroll;
  padding: 0px 10px;
  scroll-snap-type: y mandatory;
  display: flex;
  align-items: center;
  flex-direction: column;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker .changeInfoPicker .pickerNums {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  scroll-snap-align: center;
  color: rgb(110, 113, 121);
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker .changeInfoPicker .pickerNumsActive {
  font-weight: bold;
  color: rgb(13, 18, 32);
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker .changeInfoHighlight {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-top: 2px solid rgb(53, 204, 140);
  border-bottom: 2px solid rgb(53, 204, 140);
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoUnit {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoButtonsBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoButtonsBox .changeInfoDataButton {
  height: 49px;
  width: 278px;
  background-color: inherit;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 14px;
}
body .changeInfoWindow .changeInfoWindowWrapper .doneButtonChangeInfo {
  height: 52px;
  width: 328px;
  background-color: rgb(53, 204, 140);
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 16px;
  color: rgb(255, 255, 255);
  margin-bottom: 40px;
}
body .updateInfoWindow {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
}
body .updateInfoWindow .updateInfoWindowBlock {
  height: 186px;
  width: 328px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 43px;
  border-radius: 10px;
  background-color: rgb(247, 247, 247);
}
body .updateInfoWindow .updateInfoWindowBlock .updateHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .updateInfoWindow .updateInfoWindowBlock .updateInputBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
body .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInfoWindowInput {
  cursor: pointer;
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgb(53, 204, 140);
  border-radius: 2px;
  padding: 4px 2px;
}
body .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInfoWindowInput:checked {
  content: url(./image/checkMark.svg);
  border: none;
  background-color: rgb(53, 204, 140);
}
body .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInputText {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(13, 18, 32);
}
body .updateInfoWindow .updateInfoWindowBlock .updateButtonsBlock {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 32px;
  width: 286px;
}
body .updateInfoWindow .updateInfoWindowBlock .updateButtonsBlock .updateButton {
  background: none;
  border: none;
  color: rgb(53, 204, 140);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  font-weight: 500;
}
body .calorieIntakeBlock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 700px;
  width: 360px;
  z-index: 2;
  display: none;
}
body .calorieIntakeBlock .calorieIntakeWrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeHeader {
  width: 312px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 40px 0 0 16px;
  gap: 80px;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeHeader .calorieIntakeBackButton {
  height: 24px;
  width: 24px;
  background: url(./image/bigArrow.svg) no-repeat center;
  border: none;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeHeader .calorieIntakeHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock {
  height: 250px;
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock .calorieIntakeElement {
  height: 50px;
  width: 360px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(217, 217, 217);
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock .calorieIntakeElement .nutrientsName {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  margin: 0 16px;
}
body .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock .calorieIntakeElement .nutrientsValue {
  color: rgb(53, 204, 140);
}
body .calorieIntakeBlock .saveNutrientsButton {
  position: fixed;
  bottom: 0;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 328px;
  background-color: rgb(53, 204, 140);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  border: none;
  margin-bottom: 40px;
}
body .changeNutrientsIntakeWindow {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
  display: none;
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock {
  height: 337px;
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background-color: rgb(247, 247, 247);
  border-radius: 24px 24px 0 0;
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .greyLine {
  height: 4px;
  width: 32px;
  border-radius: 100px;
  background-color: rgb(191, 191, 191);
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .changeNutrientsIntakeHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .inputForNutrientsValueBlock {
  display: flex;
  align-items: center;
  gap: 12px;
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .inputForNutrientsValueBlock .nutrientsValueInput {
  height: 52px;
  width: 168px;
  border: none;
  border-bottom: 1px solid rgb(53, 204, 140);
  padding-left: 16px;
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .inputForNutrientsValueBlock .nutrientQuantity {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .recommendedQuantity {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  font-weight: 500;
  color: rgb(53, 204, 140);
}
body .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .changeNutrientsIntakeDoneButton {
  height: 52px;
  width: 328px;
  background-color: rgb(53, 204, 140);
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 16px;
  color: rgb(255, 255, 255);
  margin-top: 10px;
}

body[data-theme=dark] {
  background-color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__onboarding .main__onboardingContent .onboardingWrapper .main__onboardingTextBox .main__onboardingH {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__onboarding .main__onboardingButtons .main__onboardingBackButton {
  display: none;
}
body[data-theme=dark] .main__onboarding .main__onboardingButtons .main__onboardingNextButton {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: none;
  background: rgb(53, 204, 140) url(./image/nextArrow.svg) no-repeat center;
  background: rgb(53, 204, 140) url(./image/darkThemeArrow.svg) no-repeat center;
}
body[data-theme=dark] .main__onboarding .main__startButtons .main__startButton {
  color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__onboarding .main__startButtons .main__startParagraph {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextBox .requestingHeadline {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextWeight .inputWeight {
  background-color: inherit;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextWeight .weightParagraph {
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextAge .inputAge {
  background-color: inherit;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextAge .ageParagraph {
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextName {
  display: flex;
  justify-content: center;
  align-items: center;
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingTextName .inputName {
  background-color: inherit;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingInfoBox .normCalorieParagraph {
  color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingButtonsBox .requestingDataButton {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker {
  overflow-y: scroll;
  padding: 0px 10px;
  scroll-snap-type: y mandatory;
  display: flex;
  align-items: center;
  flex-direction: column;
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker .pickerNums {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  scroll-snap-align: center;
  color: rgb(110, 113, 121);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .picker .pickerNumsActive {
  font-weight: bold;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .requestingChooseToolWrapper .requestingChoose .highlight {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-top: 2px solid rgb(53, 204, 140);
  border-bottom: 2px solid rgb(53, 204, 140);
}
body[data-theme=dark] .main__requestingData .main__requestingDataContainer .main__requestingBox .requestingChooseToolBox .unit {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .main__requestingData .main__requestingDataButtons .requestingButton {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: none;
  background: rgb(53, 204, 140) url(./image/nextArrow.svg) no-repeat center;
  background: rgb(53, 204, 140) url(./image/darkThemeArrow.svg) no-repeat center;
}
body[data-theme=dark] .main__homePage .main__homePageBox .main__homePageHeader {
  background-color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__homePage .main__homePageBox .main__homePageHeader .personBlock .personName {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .homePageHeadline {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorHeadline {
  padding-top: 78px;
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock {
  background-color: rgb(36, 40, 51);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .pfcText {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: center;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .pfcIndicator {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .colorIndicator {
  position: absolute;
  top: 20px;
  left: 0;
  height: 4px;
  border-radius: 5px;
  background-color: rgb(53, 204, 140);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .proteins {
  background-color: rgb(229, 101, 113);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .fats {
  background-color: rgb(255, 160, 114);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .pfcBox .pfcBlock .carbs {
  background-color: rgb(89, 255, 196);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox .caloriesText {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .nutrientsIndicatorBlock .caloriesBox .caloriesIndicator {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock {
  background-color: rgb(36, 40, 51);
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntakeTextBlock .waterIntakeTextBox {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntakeTextBlock .waterIntakeTextTime {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .plus {
  background: url(./image/plusDarkTheme.svg) rgb(62, 65, 77) center no-repeat;
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .plus:hover {
  background-color: #B9B9B9;
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .minus {
  background: url(./image/minusDarkTheme.svg) rgb(62, 65, 77) center no-repeat;
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .plusMinusButtonsBlock .minus:hover {
  background-color: #B9B9B9;
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .waterIntackeIndicator {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .main__homePage .main__homePageBox .waterIntakeBlock .waterIntakeWrapper .waterIntackeButtonAndIndicatorBlock .percentOfDrunkWater {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .homePageHeadlineBlock .plusButton {
  background: url(./image/plusDarkTheme.svg) center no-repeat;
}
body[data-theme=dark] .main__homePage .main__homePageBox .mealsBlock .mealbox {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealHead .mealName {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .mealsBlock .mealbox .meal .mealHead .calories {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__homePage .main__homePageBox .controlPanel--wrapper {
  background-color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__homePage .main__homePageBox .controlPanel--wrapper .controlPanel {
  background-color: rgb(7, 54, 34);
}
body[data-theme=dark] .main__mealPage {
  background-color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__mealPage .mealHead .closeBtn {
  background: url(./image/darkClear.svg) center no-repeat;
}
body[data-theme=dark] .main__mealPage .mealHead .createBtn {
  background: url(./image/plusDarkTheme.svg) center no-repeat;
}
body[data-theme=dark] .main__mealPage .mealHead .mealNameP {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__mealPage .mealCaloriesBlock .mealCaloriesElem .mealCaloriesNum {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__mealPage .mealCaloriesBlock .mealCaloriesElem .mealCaloriesP {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__mealPage .eatenMealsBlock .mealFoodBox .mealFoodWrapper .mealFoodH {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__mealPage .eatenMealsBlock .mealFoodBox .mealFoodWrapper .mealFoodP {
  color: rgb(110, 113, 121);
}
body[data-theme=dark] .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .deleteButton {
  background: url(./image/deleteButtonDarkTheme.svg) no-repeat center;
}
body[data-theme=dark] .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .deleteButton:hover {
  border: 1px solid rgb(53, 204, 140);
}
body[data-theme=dark] .main__mealPage .eatenMealsBlock .mealFoodBox .deleteButtonsBlock .editOrDeleteButtonsBox .editOrDeleteButtons {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .main__mealPage .saveMealButton {
  color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__searchFood {
  background-color: rgb(13, 13, 13);
}
body[data-theme=dark] .main__searchFood .searchBarBox .backSearchButton {
  background: url(./image/bigArrowDarkTheme.svg) center no-repeat;
}
body[data-theme=dark] .main__searchFood .searchBarBox .searchInput {
  background: rgb(13, 13, 13);
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .main__searchFood .searchBarBox .clearSearchButton {
  background: url(./image/darkClear.svg) center no-repeat;
}
body[data-theme=dark] .main__searchFood .foodContainer .foodBox .foodH {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .calendar .calendarItem {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .calendar .calendarItem .calendarHead .calendarP {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .calendar .calendarItem .calendarHead .calendarH {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .calendar .calendarItem .calendarNav .monthAndYear .calendarP {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .calendar .calendarItem .calendarNav .navigation .backButtonCalendar, body[data-theme=dark] .calendar .calendarItem .calendarNav .navigation .nextButtonCalendar {
  background: url(./image/arrowCalendarDark.svg) center no-repeat;
  transform: rotate(180deg);
}
body[data-theme=dark] .calendar .calendarItem .calendarNav .navigation .nextButtonCalendar {
  background: url(./image/arrowCalendarDark.svg) center no-repeat;
  transform: rotate(360deg);
}
body[data-theme=dark] .calendar .calendarItem .daysName .days {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .calendar .calendarItem .nums .num {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .eatenAmountForm .eatenAmountFormBox {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .eatenAmountH {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock .caloriesElem .caloriesNum {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  font-weight: 500;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .eatenAmountForm .eatenAmountFormBox .eatenAmountFormWrapper .caloriesBlock .caloriesElem .caloriesP {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  font-size: 14px;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .eatenAmountForm .eatenAmountFormBox .caloriesValueBlock .eatenAmountGrams {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .profileBlock .profileHeader .profileButtonBack {
  background: url(./image/bigArrowDarkTheme.svg) no-repeat center;
}
body[data-theme=dark] .profileBlock .profileHeader .profileH {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 18px;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .profileBlock .profileNamePhotoBlock .profileName {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons .inButtonTextElem {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons .calorieElem {
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons:hover {
  background-color: rgb(53, 204, 140);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons:hover.meButton {
  background-image: url(./image/nextArrow.svg);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons:hover .inButtonTextElem {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .profileBlock .menuButtonsBlock .menuButtons:hover .calorieElem {
  color: rgb(255, 255, 255);
}
body[data-theme=dark] .profileBlock .lineElem {
  background-color: rgb(36, 40, 51);
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .themeLogoAndName .activeThemeName {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch {
  opacity: 0;
  width: 0;
  height: 0;
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch:checked + .slider {
  background-color: rgb(53, 204, 140);
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch .inputForSwitch:checked + .slider::before {
  transform: translateX(16px);
  background-color: rgb(255, 255, 255);
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: inherit;
  border: 2px solid rgb(53, 204, 140);
  border-radius: 34px;
  transition: 0.4s;
}
body[data-theme=dark] .profileBlock .otherOprionsBlock .themeBlock .switch .slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 3px;
  background-color: rgb(53, 204, 140);
  border-radius: 50%;
  transition: 0.4s;
}
body[data-theme=dark] .meBlock .meBlockContent .meHeader .meButtonBack {
  background: url(./image/bigArrowDarkTheme.svg) no-repeat center;
}
body[data-theme=dark] .meBlock .meBlockContent .meHeader .meHeadline {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .meBlock .meBlockContent .meElemsBlock .meElem .meParagraph {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .meBlock .meBlockContent .meElemsBlock .meElem .meGreenParagraph {
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .meBlock .meBlockContent .meElemsBlock .disabledMeElem {
  pointer-events: none;
}
body[data-theme=dark] .meBlock .meBlockContent .meElemsBlock .disabledMeElem .meDisabledNameParagraph {
  color: rgb(110, 113, 121);
}
body[data-theme=dark] .meBlock .meBlockContent .meElemsBlock .disabledMeElem .meDisabledParagraph {
  color: rgb(166, 233, 204);
}
body[data-theme=dark] .meBlock .meSaveButton {
  color: rgb(13, 13, 13);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .miniLine {
  background-color: rgb(110, 113, 121);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .nameOfChaingingParameter {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .inputsToolsWrapper .inputAndValueWrapper .inputForChangeInfo {
  background-color: inherit;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoPickerToolWrapper .changeInfoChoosePicker .changeInfoPicker .pickerNumsActive {
  font-weight: bold;
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoChooseToolBox .changeInfoUnit {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoButtonsBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .contentBlock .changeInfoButtonsBox .changeInfoDataButton {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .changeInfoWindow .changeInfoWindowWrapper .doneButtonChangeInfo {
  height: 52px;
  width: 328px;
  background-color: rgb(53, 204, 140);
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 16px;
  color: rgb(255, 255, 255);
  margin-bottom: 40px;
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateHeadline {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInfoWindowInput {
  cursor: pointer;
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgb(53, 204, 140);
  border-radius: 2px;
  padding: 4px 2px;
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInfoWindowInput:checked {
  content: url(./image/checkMark.svg);
  border: none;
  background-color: rgb(53, 204, 140);
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateInputBlock .updateInputText {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateButtonsBlock {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 32px;
  width: 286px;
}
body[data-theme=dark] .updateInfoWindow .updateInfoWindowBlock .updateButtonsBlock .updateButton {
  background: none;
  border: none;
  color: rgb(53, 204, 140);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  font-weight: 500;
}
body[data-theme=dark] .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeHeader .calorieIntakeBackButton {
  background: url(./image/bigArrowDarkTheme.svg) no-repeat center;
}
body[data-theme=dark] .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeHeader .calorieIntakeHeadline {
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock .calorieIntakeElement .nutrientsName {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  margin: 0 16px;
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .calorieIntakeBlock .calorieIntakeWrapper .calorieIntakeContentBlock .calorieIntakeElement .nutrientsValue {
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .calorieIntakeBlock .saveNutrientsButton {
  color: rgb(13, 13, 13);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock {
  background-color: rgb(62, 65, 77);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .greyLine {
  height: 4px;
  width: 32px;
  border-radius: 100px;
  background-color: rgb(110, 113, 121);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .changeNutrientsIntakeHeadline {
  color: rgb(179, 179, 179);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .inputForNutrientsValueBlock .nutrientsValueInput {
  background-color: inherit;
  color: rgb(230, 230, 230);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .inputForNutrientsValueBlock .nutrientQuantity {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgb(110, 113, 121);
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .recommendedQuantity {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0%;
  font-weight: 500;
  color: rgb(53, 204, 140);
}
body[data-theme=dark] .changeNutrientsIntakeWindow .changeNutrientsIntakeWindowBlock .changeNutrientsIntakeDoneButton {
  height: 52px;
  width: 328px;
  background-color: rgb(53, 204, 140);
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgb(13, 18, 32);
  font-size: 16px;
  color: rgb(13, 13, 13);
  margin-top: 10px;
}/*# sourceMappingURL=style.css.map */