:root {
	--main-nav-background: #FFFFFF;
	--main-nav-text: #000000;

	--line-section-separtor: #ECECF9;
	--text-color: #333;

	--section-color: #f3f3f3;

	--main-orange: #ff8c00;
	--main-orange-hover: #FF6F00;

	--main-lightorange: #fce17a;
	--main-lightorange-hover: #fac75a;

	--main-blue: #4456AD;
	--main-blue-hover: #6773CF;
	--main-blue-active: #373ffa;
	--main-blue-active-border: #2b33f9;

	--main-lightblue: #6773CF;
	--main-lightblue-hover: #c3cfff;

	--secondary-lightblue: #efefff;
	--tertiary-blue: #f7faff;

	--main-red: #ff0000c7;
	--main-red-hover: #ff0000;

	--main-gray: #dbd8d8;
	--main-gray-hover: #bfbcbc;

	--main-background: #FFFFFF;
	--main-alternative-background: #EFEBEB;

	--gray-separator: #CECDCD;

    --sidebar-color: #30404F;

	--sidebar-width: 7rem;
	--header-height: 5rem;

	--fat-color: #ED7E3D;
	--carbs-color: #8644F6;
	--protein-color: #F6C451;

	--breakfast-color: #ED7E3D;
	--lunch-color: #8644F6;
	--snack-color: #F6C451;
	--dinner-color: lightblue;

	/*
    --fat-color: #ffe599ff;
    --carbs-color: #b45f06ff;
    --protein-color: #a64d79ff;
    */

	--green-nutrient: #DAEFD0;
	--orange-nutrinet: #F6E4BE;
	--red-nutrient: #EFB1AD;
	--grey-nutrient: #D3D3D3;

	--food-groups-green: #A0DCBF;
	--food-groups-orange: #ffd2aa;
	--food-groups-red: #ffadad;
}

.main-blue {
	color: var(--main-blue);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: absolute;
	display: inline-block;
	top: 55px
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: block;
	position: absolute;
	background-color: var(--tertiary-blue);
	width: 42vw;
	z-index: 9999;
	margin-left: 0vw;
	overflow-y: auto;
	max-height: 30vw;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-top: 3px;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	font-size: inherit;
	z-index: 999;
	cursor: pointer;
}

.dropdown-content a:hover {
	outline: 1px solid green;
	background-color: var(--main-blue-hover);
}

/* Side menu styles */
.sidemenu-text {
	color: white;
	/*color: #009688;*/
}

.sidemenu-icon {
	color: white !important;
	/*color: #009688;*/
}

/*  Logs section  */
.title-day-section {
	color: black;
	font-size: 21px;
	background-color: var(--tertiary-blue);
	border-radius: 10px;
	padding: 5px 0px 5px 2vw;
	font-weight: bold;
}

.sticky-title-day-section {
	position: -webkit-sticky;
	position: sticky;
	top: 135px;
	z-index: 7;
}

.title-occasion-section {
	font-size: 21px;
	background-color: white;
	border-color: lightgrey;
	border-width: 2px;
	border-style: solid;
	border-radius: 6px 6px 0 0;
	padding: 5px 0 5px 2vw;
	font-weight: bold;
	text-transform: capitalize;
}

.sticky-title-occasion-section {
	z-index: 6;
	left: -2px;
	width: calc(100% + 4px);
	max-width: none !important;
	top: -2px;
}

.log-image-container {
	border-radius: 6px;
	width: 100%;
	max-height: 450px;
	position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
}

.log-image-container-food-item {
	border-radius: 6px;
	width: 95px;
	max-height: 95px;
	position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
}

.log-image-panel {
	width: auto;
	max-width: 100%;
	max-height: 450px;
	border-radius: 6px;
}

.log-image-panel-food-item {
	width: auto;
	max-height: 95px;
	max-width: 100%;
	border-radius: 6px;
}

.background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f1f1f194;
	z-index: -1;
	border-radius: 6px;
}

.background-overlay-transparent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: -1;
	border-radius: 6px;
}

.occasion-logs-container {
	background-color: white;
	border-color: lightgrey;
	border-width: 2px;
	border-style: solid;
	border-radius: 6px;
	margin-bottom: 8px;
	max-width: 98.7%;
	padding-right: 7.5px;
	padding-left: 7.5px;
	margin-left: auto;
	margin-right: auto;
}

.calendar-selector {
	background: #fff;
	/*cursor: pointer;*/
	padding: 5px 10px;
	border: 1px solid #ccc;
	/*width: 100%;*/
	border-radius: 1em;
	display: flex;
	text-align: center;
	align-items: center;
}

#ingredientDropdown {
    display: none;
    position: absolute;
    width: 95.5%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #CCCCCC;
    background-color: white;
    z-index: 1;
	margin-right: 10px;
	border-radius: 6px;
}

#ingredientDropdown li {
    padding: 5px;
    cursor: pointer;
	margin-left: -40px;
	border-radius: 6px;;
}

#ingredientDropdown li:hover {
    background-color: var(--tertiary-blue);
}

.has-intake {
    background-color: green; /* Customize this color as needed */
}

.no-intake {
    background-color: red; /* Customize this color as needed */
}

.calendar-icon {
	height: 30px;
    width: auto;
    padding: 5px;
}

.sticky-calendar-selector {
	position: -webkit-sticky;
	position: sticky;
	top: 6.9em;
	z-index: 8;
}

/* Others */

.hidden {
	display: none !important;
}

.has-success {
	border-color: var(--main-blue);
}

.no-outline {
	outline: 0;
}

.no-outline:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}


.language-icon {
	width: 3em;
}


#scrollToTopButton {
	border: var(--main-blue) solid 3px;
	position: fixed;
	bottom: 6em;
	right: 6em;
	border-radius: 2em;
	width: 3.5em;
	height: 3.5em;
	z-index: 99;
}

#scrollToTopButton i {
	color: var(--main-blue);
	font-size: 2em;
}

#scrollToTopButton:hover {
	background: var(--main-blue);
}

.modal-custom {
	max-width: 40vh;
	width: 40vh;
	max-height: 20vh !important;
	height: 7em !important;
	top: 15vh;
	display: table;
}

.note-modal {
	background-color: white;
	padding: 2em;
}

.modal-custom-text {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: large;
}

/* ---- HEADER daterange and picture ----- */
.profile-picture-container {
	height: 40px;
	width: 40px;
	overflow: hidden;
	border-radius: 50%;
}

.profile-picture {
	height: 100%;
	width: auto;
}

.datepicker_input {
	border: none;
	min-width: 14.4em;
	text-align: center;
	font-size: 15px !important;
}

/* Style for dates with intakes */
.date-with-intakes {
    background-color: lightblue; /* Change this color to your desired shade of blue */
    color: black; /* Change the text color to contrast with the background */
    border-radius: 50%; /* Make the date cells rounded */
    cursor: pointer; /* Add a pointer cursor to indicate interactivity */
}

/* Style for dates without intakes */
.date-without-intakes {
    background-color: white; /* White background for dates without intakes */
    color: black; /* Change the text color as needed */
    border-radius: 50%; /* Make the date cells rounded */
    cursor: pointer; /* Add a pointer cursor to indicate interactivity */
}

/* Dropdown icon next to user_goals image */
.dropdown-icon {
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
}

/* Hide default dropdown icon */
.dropdown-toggle::after {
	display: none !important;
}

.info-wrapper {
	color: white;
}

.custom-nav {
	display: flex;
	align-items: center;
	min-width: 471px;
}

@media (max-width: 1666px) {
	.export-text {
		display: none;
	}
	.custom-nav {
		min-width: 378px;
	}
}

.logo-custom-header {
	width: 10rem;
	background-color: var(--tertiary-blue);
	display: flex;
	align-items: center;
}

.logo-custom-header img {
	margin: 0 auto;
	margin-right: 2px;
	margin-left: 2px;
}

.logo-header {
    display: block;
    width: auto;
    padding-right: 3px;
    height: calc(var(--header-height) - 20px);
}

/* PAGE BODY TITLES */
.page-body-title {
	font-weight: bold;
}

/* ALL CLIENTS INITIAL GRID */
.grid-container-all-clients {
	margin-top: 90px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
	gap: 30px;
}

.cell-all-clients {
	border: 1px solid #c4c4c4;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}

.user-section-all-clients {
	display: flex;
	align-items: center;
	padding: 5px;
}

.user-image-all-clients {
	width: 50px;
	height: 50px;
	min-height: 50px;
	min-width: 50px;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	background-size: cover;
	background-position: center;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 20px;
	white-space: nowrap;
    overflow: hidden;
}

.user-info-all-clients {
	margin-left: 10px;
	width: 100%;
}

.blank-rectangle-all-clients {
	border-radius: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	display: flex;
	gap: 2px;
}

.day-square-clients {
	width: calc(100%/7);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    text-align: center;
	align-items: center;
	min-height: 50px;
	background-color: white;
	border: solid lightgrey 0.5px;
}

.no-matching-clients-container {
	display: flex;
	justify-content: center;
	margin-top: 100px;
}

/* HEADER CLIENT SELECTED */
.user-info-header {
	display: flex;
	align-items: center;
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	margin-left: 20px;
	height: 64px;
	max-height: 64px;
	background-color: var(--tertiary-blue);
}

.user-image-header {
	width: 50px;
	height: 50px;
	min-height: 50px;
	min-width: 50px;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	background-size: cover;
	background-position: center;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 20px;
	white-space: nowrap;
    overflow: hidden;
}

.user-details-header {
	display: flex;
	flex-direction: column;
	padding-right: 20px;
	padding-left: 10px;
}

.user-name-header {
	font-weight: bold;
	margin: 0;
}

.user-parameter-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-left: 1px solid #ccc;
	/* Add vertical line */
	padding-left: 10px;
	padding-right: 10px;
}

.parameter-title-header {
	font-weight: bold;
	margin-bottom: 5px;
}

.edit-info-header {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding-left: 10px;
	border-left: 1px solid #ccc;
	/* Add vertical line */
}

.edit-button-icon-header {
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-right: 5px;
}

.edit-button-icon-header img {
	height: 20px;
	width: 20px;
}

.edit-button-label-header {
    display: flex;
    flex-direction: column;
    color: #333;
}

@media (max-width: 1600px) {
    .edit-button-label-header {
        display: none;
    }
}

@media (max-width: 1515px) {
    .t-header-search-box {
        display: none !important;
    }
}

.edit-button-label-header span {
	font-size: 12px;
	line-height: 12px;
}

/* NUTRITIONAL GOALS TABLE & CHARTS */
.chart-row {
	background-color: #f9f9f9;
	height: 25rem;
	width: inherit;
}

.chart-container {
	/*cursor: zoom-in;*/
	width: inherit;
	height: 25rem;
}

.nutrient_checkbox {
	margin-bottom: 10px !important;
	display: flex !important;
	padding-left: 1.25rem !important;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-content: center !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	height: 30px !important;
}

.table-header {
	background-color: var(--tertiary-blue) !important;
}

.custom-indicator-tag {
	color: white;
	font-size: 12px;
	font-weight: bold;
	background-color: var(--secondary-lightblue);
	border-radius: 6px;
	padding: 2px;
	margin-top: 5px;
}

/* DONUT CHART + DONUT LEGEND */
.chart-container-donut {
	display: flex;
	align-items: center;
}

.legend-container-donut {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
}

.legend-item-donut {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.legend-color-donut {
	width: 15px;
	height: 15px;
	margin-right: 5px;
}

.legend-label-donut {
	font-size: 12px;
}

.bold {
	font-weight: bold;
}

.calories-label-donut {
	position: absolute;
	margin-top: 57px;
	font-weight: bold;
	font-size: 15px;
}

.calories-label-donut-small {
	position: absolute;
	margin-top: 50px;
	font-weight: bold;
	font-size: 15px;
}

/* Intake log right panel opens */
#history_html {
	width: 100%;
	float: left;
}

.panel {
	position: fixed;
	top: 135px;
	right: 37px;
	width: 31%;
	height: calc(83.5vh);
	border: 2px solid lightgrey;
	border-radius: 6px;
	background-color: white;
	overflow-y: auto;
	z-index: 0;
	padding: 10px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-left: 5px;
	margin-top: 15px;
	display: none;
	transition: height 0.3s ease;
}

.panel.reduced-height {
	height: calc(100% - 215px);
}

.close_panel_button {
	position: fixed;
	background-color: white;
	border: none;
	border-radius: 6px;
	width: 30px;
	height: 30px;
	top: 151px;
	right: 38px;
	z-index: 8;
	display: none;
}

.close_panel_button:focus {
	outline: none;
}

.close_panel_button:hover {
	background-color: #e5e5e5;
}

.panel-row {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-top: 10px;
}

.panel-container {
	background-color: var(--tertiary-blue);
	border-radius: 6px;
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	padding: 5px;
	border: 1px solid var(--secondary-lightblue);
}

.panel-container input[type="text"] {
	top: 0;
	left: 0;
	height: 100%;
	border: none;
	background-color: transparent;
	font-size: inherit;
	color: inherit;
	padding: 0;
	width: 90px;
}

.food-item-container {
	cursor: pointer;
}

.food-item-container:hover {
	border: 1px solid var(--main-blue);
	background-color: var(--secondary-lightblue);
}

.panel-main-nutrient {
	min-width: 70px;
	width: 19%;
	height: fit-content;
	background-color: var(--grey-nutrient);
	margin-right: 5px;
	border-radius: 6px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 6px;
}

.panel-main-nutrients:last-child {
	margin-right: 0;
	/* Remove margin-right from the last child */
}

.main-nutrient-image {
	height: 30px;
	width: auto;
}

.occasion-time-image {
	height: 20px;
	width: auto;
}

.main-nutrient-quantity {
	font-weight: bold;
	text-align: center;
}

.main-nutrient-name {
	font-size: 12px;
	text-align: center;
}

.dropdown-container-occasions {
	position: relative;
	display: inline-block;
	width: 100%;
}

.dropdown-header-occasions {
	border: none;
	display: flex;
	justify-content: space-around;
	width: 100%;
	background-color: transparent;
}

.dropdown-header-content-occasions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dropdown-arrow-occasions {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
}

.dropdown-menu-occasions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #f9f9f9;
	padding: 10px;
	border: 1px solid #ccc;
}

/* CUSTOM RECIPES */

/* Search bar */
.recipe-search-input {
	border-radius: 6px;
	border: black solid 1px;
	width: 300px;
	margin-bottom: 10px;
	padding: 3px;
}

/* Grid */
.grid-container-all-recipes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

.cell-recipes-grid {
	display: flex;
	align-items: center;
	border: black solid 1px;
	border-radius: 6px;
}

/* Media query for screens with a maximum width of 460px */
@media (max-width: 1145px) {
	.grid-container-all-recipes {
		grid-template-columns: 1fr;
		/* Switch to one column */
	}
}

.image-container-recipes-grid {
	flex-shrink: 0;
}

.recipe-image-recipes-grid {
	width: 200px;
	height: 200px;
	object-fit: cover;
	object-position: center top;
	border-radius: 6px;
	padding: 3px;
}

.content-container-recipes-grid {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 10px;
	height: 200px;
	justify-content: space-between;
}

.recipe-title-container-recipes-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.recipe-name-recipes-grid {
	font-weight: bold;
	width: 70%;
	font-size: 18px;
	margin-right: 10px;
}

.hr-line-recipes-grid {
	border: none;
	border-top: 1px solid #939393;
	margin-top: auto;
}

.nutritional-indicators-recipes-grid {
	display: flex;
	justify-content: space-between;
}

.nutritional-indicator-recipes-grid {
	margin-bottom: 5px;
}

.buttons-container-recipes-grid {
	display: flex;
}

.select_goals_modal_text {
	font-weight: bold;
}

.delete-button-recipes-grid {
	display: flex;
	align-items: center;
	margin-left: 7px;
	padding: 5px;
	background-color: #ffa6a6;
	border-width: 1px;
	border-color: #ff5b5b;
	border-radius: 6px;
	cursor: pointer;
	justify-content: center;
	margin-right: 2px;
}

.delete-button-recipes-grid img {
	width: 20px;
	height: 20px;
}

.view-button-recipes-grid {
	display: flex;
	align-items: center;
	padding: 5px;
	background-color: lightgrey;
	border-width: 1px;
	border-color: grey;
	border-radius: 6px;
	cursor: pointer;
	justify-content: center;
	margin-right: 2px;
}

.view-button-recipes-grid img {
	width: 20px;
	height: 20px;
}

.edit-button-recipes-grid {
	display: flex;
	align-items: center;
	margin-left: 7px;
	padding: 5px;
	background-color: var(--main-blue);
	border-width: 1px;
	border-color: var(--main-blue);
	border-radius: 6px;
	cursor: pointer;
	justify-content: center;
	margin-right: 2px;
}

.edit-button-recipes-grid img {
	width: 18px;
	height: 18px;
}

/* ONE RECIPE */
.title_and_buttons_container {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.button_container {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 5px;
}

.delete-recipe-button {
	width: 30px;
	background-color: #ffa6a6;
	border-color: #ff5b5b;
}

.delete-recipe-button:active,
.delete-recipe-button:hover {
	background-color: #ff5b5b !important;
	border-color: #ff5b5b !important;
}

.go-back-recipe-button {
	width: 40px;
	height: 25px;
	border-color: #a6a6a6;
	background-color: lightgrey;
	margin-left: 5px;
}

.submit-recipe-button {
	width: 95px;
}

.edit-recipe-button {
	width: 30px;
}

.reset-recipe-button {
	width: 30px;
	border-color: #a6a6a6;
	background-color: lightgrey;
}

.recipe-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	height: 100%;
}

.recipe-column {
	position: relative;
	flex: 1;
	min-width: 300px;
	max-height: 100%;
}

.recipe-column-first {
	flex: 1;
	min-width: 300px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.recipeName {
	width: 100%;
	border-radius: 6px;
	border: grey solid 0.5px;
	height: 40px;
	font-size: 18px !important;
	font-weight: bold;
}

.recipeName:focus {
	border: grey solid 0.5px;
}

.recipe-image {
	max-width: 100%;
	width: 100%;
	height: 290px;
	margin-bottom: 10px;
	object-fit: cover;
	border-radius: 6px;
}

.upload-button {
	display: block;
	margin-bottom: 10px;
}

.table-container {
	max-height: 600px;
	overflow: hidden;
	margin-top: 5px;
}

.quantityInputRecipeTables {
	background-color: white;
	border: 1px solid black;
	border-radius: 6px;
}

.quantityInputRecipeTables:focus {
	background-color: white;
	border: 1px solid black;
	border-radius: 6px;
}

.input-recipe {
	border: none;
	text-align: center;
	font-size: 15px !important;
	background-color: transparent;
}

.recipe-input-container {
	border-radius: 6px;
	height: 35px;
	border: 1px solid #CCCCCC;
	justify-content: center;
	align-self: center;
	align-content: center;
	font-size: 15px !important;
	display: flex;
	text-align: center;
	background-color: white;
	align-items: center;
}

.recipe-input-container:focus {
	border: 1px solid #CCCCCC;
}

.add-to-table {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.table-container.scrollable {
	overflow-y: auto;
}

.recipe-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
	background-color: #ececec;
	border-radius: 6px;
}

.recipe-table th {
	font-weight: bold !important;
	width: 25%;
}

.recipe-table th,
.recipe-table td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.recipe-table th:last-child,
.recipe-table td:last-child {
	text-align: center;
}

.recipe-table tr:last-child td {
	border-bottom: none;
}

.disabled-option {
	color: #999;
	pointer-events: none;
}

.recipe-note {
	margin-bottom: 5px;
	color: grey;
	font-size: 11px;
	text-align: justify;
}

.deleteButtonRecipeTables {}

.toggle-container {
	display: flex;
	align-items: center;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin-bottom: 0;
	margin-top: 5px;
	margin-right: 5px;
	margin-left: 5px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E1E4E6;
	-webkit-transition: .4s;
	transition: .4s;
}

.toggle-label {
	text-align: center;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: grey;
}

.toggle-label-view {
	height: 26px;
	color: grey;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.toggle-switch input:checked+.toggle-slider {
	background-color: var(--main-lightblue);
}

.toggle-switch input:focus+.toggle-slider {
	box-shadow: 0 0 1px var(--main-lightblue);
}

.toggle-switch input:checked+.toggle-slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
	.recipe-container {
		flex-direction: column;
	}

	.recipe-column {
		width: 100%;
	}
}


/* REPORTS */
.date-selector-container {
	width: 100%;
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 35px;
	flex-direction: column;
}

.selected-date {
	color: white;
	font-size: 15px;
	font-weight: bold;
	background-color: var(--main-blue);
	border-radius: 6px;
	padding: 5px;
	margin-left: 15px;
}

.date-selector-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 70%;
	margin-bottom: 20px;
}

.date-selector {
	position: relative;
	display: flex;
	align-items: center;
	width: 70%;
	margin: 0 auto;
}

.date-selector .line {
	width: 100%;
	height: 1px;
	background-color: #000;
	position: relative;
	margin-bottom: 20px;
}

.date-selector .line .day {
	width: 1px;
	height: 10px;
	background-color: #000;
	position: absolute;
	top: -5px;
	cursor: pointer;
}

.date-selector .line .week {
	width: 1px;
	height: 10px;
	background-color: #000;
	position: absolute;
	top: -5px;
	cursor: pointer;
}

.date-selector .slider {
	position: absolute;
	height: 0;
	z-index: 1;
	width: calc(100% + 18px);
	margin-left: -6px;
}

.date-selector .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: none;
	background-color: var(--main-blue-active-border) !important;
	/* Change background color to black with !important */
	cursor: pointer;
	position: relative;
	z-index: 2;
	top: -10px;
}

.date-selector .slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: none;
	background-color: var(--main-blue-active-border) !important;
	cursor: pointer;
	position: relative;
	z-index: 2;
	top: -10px;
}

.slider-date {
	margin-top: 16px;
    margin-left: -17px;
    text-align: center;
    width: fit-content;
    background-color: var(--tertiary-blue);
    border-radius: 6px;
    padding: 2px;
}

.slider-date-week {
	margin-top: 16px;
	margin-left: -32px;
	text-align: center;
	width: 70px;
	background-color: var(--tertiary-blue);
	border-radius: 6px;
	border: 1px solid var(--main-blue-active-border);
}

.date-selector .line .day.selected {
	width: 2px;
}

.date-selector .line .week.selected {
	width: 2px;
}

.intake-table {
    border-collapse: collapse;
    width: 100%;
}

.intake-table th, .intake-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.intake-table tr:nth-child(even) {
    background-color: var(--secondary-lightblue);
}

.intake-table tr:hover {
    background-color: var(--tertiary-blue);
}

.daily-summary-container {
	width: 100%;
	display: flex;
	margin-top: 10px;
	justify-content: center;
	gap: 20px;
}

.weekly-summary-container {
	width: 100%;
	display: flex;
	margin-top: 10px;
	justify-content: center;
	gap: 20px;
}

.food-groups-container {
	width: 100%;
}

.information-modal-item {
	display: flex;
    align-items: center;
    gap: 15px;
}

.information-modal-item img {
	min-width: 65px;
}

.information-modal-item-title {
	font-size: 14px;
	font-weight: bold;
}

.information-modal-item-text {
	font-size: 12px;
}

.summary-box {
	width: 40%;
	min-height: 35vh;
	border-radius: 10px;
	border: 1px solid grey;
	padding: 15px;
	padding-bottom: 20px;
}

.summary-box-title {
	font-weight: bold;
}

.chart-container-donut-summary {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.calories-label-donut-summaries {
	position: absolute;
	font-weight: bold;
	font-size: 15px;
	margin-top: 115px;
}

.legend-separator-summary {
	height: 1px;
	background-color: #ccc;
	margin-bottom: 5px;
	width: 100%;
}

.legend-container-donut-summary {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.legend-item-donut-summary {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	justify-content: space-between;
}

.legend-label-donut-summary {
	font-size: 14px;
	font-weight: bold;
}

.occasion-chart-container {
	height: 250px;
	width: 100%;
	display: flex;
	justify-content: center
}

.occasion-chart-legend-container {
	display: grid;
	grid-gap: 10px;
}

@media (min-width: 1745px) {
	.occasion-chart-legend-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1745px) {
	.occasion-chart-legend-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

.legend-item {
	display: flex;
	align-items: center;
	margin-top: 10%;
	justify-content: center;
}

.legend-color-donut {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 10px;
}

.legend-label {
	margin-right: 5px;
	text-align: left;
}

.legend-percentage,
.legend-value {
	text-align: left;
	font-size: 0.9em;
}

.no-intakes-reported-container {
	display: flex;
	justify-content: center;
	margin-top: 100px;
}

.no-intakes-reported-container-logs {
	display: flex;
	justify-content: center;
	margin-top: 0;
}

.no-intakes-reported {
	font-size: 20px;
	display: inline-block;
	padding: 5px 10px;
	text-align: center;
	border: solid var(--main-blue) 1px;
	border-radius: 6px;
}

.food-group-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.food-group-cell {
	flex: 1;
	min-width: 400px;
}

.food-group-cell-weekly {
	flex: 1;
	min-width: 240px;
}

.square_daily {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 215px;
	margin: 10px;
	padding: 10px;
	border-radius: 6px;
	border: solid var(--main-blue) 1px;
	position: relative;
}

.square_daily img {
	width: 60px;
	height: 60px;
}

.edit-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
}

.square_weekly {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 270px;
	margin: 10px;
	border-radius: 6px;
	border: solid var(--main-blue) 1px;
	position: relative;
}

.square_weekly img {
	width: 60px;
	height: 60px;
}

.weekly-portions-h3 {
	position: relative;
}

.days-container {
	display: flex;
	margin-top: 10px;
	gap: 5px;
	font-size: 12px;
}

.days-container div {
	width: 14.28%;
	text-align: center;
	border-radius: 6px;
	padding: 4px;
	font-weight: bold;
	white-space: nowrap;
	display: flex;
}

.day-square {
	width: 100%;
	text-align: center;
	padding: 4px;
	font-weight: bold;
	display: flex;
	cursor: pointer;
}

.food-groups-separator {
	height: 1px;
	background-color: #ccc;
	margin-bottom: 40px;
	margin-top: 40px;
	width: 100%;
}

.box {
	display: inline-block;
}

.progress {
	width: 100px;
	height: 100px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress>.inner {
	position: absolute;
	color: red;
}

.progress>svg {
	height: 100%;
	display: block;
}

.circle-container {
	position: relative;
    width: 220px;
    margin-top: -50px;
}

.circle-container>div {
	position: absolute;
	width: 220px;
	height: 100%;
	margin-left: -4px;
	margin-top: 67px;
}

.weekly-portions-inner-info {
	width: 100%;
	background-color: var(--tertiary-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: pre;
}

.intake-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1em;
    align-items: center;
    margin-bottom: 1em;
    border-right: 2px solid #e0e0e0;
    padding-right: 1em;
}

.intake-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5em;
    border: 1px solid #ccc;
}

.intake-details p {
    margin: 0;
    color: #333;
}

.nutrient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    font-size: 0.9em;
    border-radius: 1em;
    margin-bottom: 0.5em;
    background-color: var(--tertiary-blue) !important;;
}

.nutrient-item span.name {
    flex: 1;
}

.nutrient-item span.amount {
    min-width: 70px;
    text-align: right;
}

/* MEASUREMENTS */
.table-container-measurements {
	width: 100%;
	overflow: hidden;
	margin-top: 5px;
}

.measurements-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	background-color: #ffffff;
	border-radius: 6px;
	min-height: 240px;
}

.measurements-table th {
	font-weight: bold !important;
	width: 25%;
	background-color: var(--tertiary-blue) !important;
	height: 60px;
	font-size: 16px;
}

.measurements-table th,
.measurements-table td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	height: 60px;
	font-size: 16px;
}

.measurements-table th:last-child,
.measurements-table td:last-child {
	text-align: center;
}

.measurements-table tr:last-child td {
	border-bottom: none;
}

.measurements-table-buttons {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

.button-measurements {
	display: flex;
	align-items: center;
	border: none;
	background: transparent;
	cursor: pointer;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.button-measurements img {
	width: 22px;
	height: 22px;
}

.button-delete {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	border: none;
	cursor: pointer;
	justify-content: center;
	background-color: var(--main-lightblue);
	border-radius: 6px;
}

.button-delete img {
	width: 15px;
	height: 15px;
}

.row-clickable {
	cursor: pointer;
}

.measurement-info {
	display: flex;
	justify-content: space-between;
	border: 1px solid #000;
	border-radius: 6px;
	height: 60px;
	align-items: center;
}

.measurement-cell {
	flex: 1;
	text-align: center;
	position: relative;
	height: 100%;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 8px;
}

.measurement-cell:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -1px;
	/* Adjusted to align the line with the border */
	width: 1px;
	background-color: #000;
}

.measurement-button {
	background-color: var(--main-blue);
	color: white;
	font-weight: bold;
	cursor: pointer;
}

.measurement-graph {
	padding: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	margin-top: 15px;
	border: 1px solid black;
	border-radius: 6px;
	/*height: 600px;*/
	height: 50vh;
}

.back_button {
	position: fixed;
	background-color: white;
	border: none;
	border-radius: 6px;
	width: 30px !important;
	height: 30px !important;
	right: 38px;
	z-index: 8;
	align-self: center;
}

.back_button:focus {
	outline: none;
}

.back_button:hover {
	background-color: #e5e5e5;
}

.measurement-dropdown {
	border: none;
	font-weight: bold;
	background-color: transparent;
}

.measurement-date-picker {
	border-radius: 6px;
	height: 35px;
	border: 1px solid #CCCCCC;
	justify-content: center;
	align-self: center;
	align-content: center;
	font-size: 15px !important;
	display: flex;
	text-align: center;
}

.measurement-date-picker:focus {
	border: 1px solid #CCCCCC;
}

.add-measurement-text {
	color: grey;
	font-size: 13px;
	margin-right: 10px;
}

#slider {
	margin-top: 20px;
	height: 10px;
	background-color: #ddd;
}

#slider .noUi-connect {
	background-color: var(--main-blue);
}

#slider .noUi-handle {
	background-color: var(--main-blue);
	border: none;
	box-shadow: none;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
}

/* MEASUREMENT */

.measurement-input {
	border-radius: 6px;
	height: 35px;
	border: 1px solid black;
	padding: 6px;
	margin-bottom: 25px;
}

.measurement-input:focus {
	border: 1px solid black;
}

.measurement-note {
	color: grey;
	font-size: 14px;
	text-align: justify;
}

.original-measurement {
	background-color: var(--tertiary-blue);
	border-radius: 6px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}

/* ASSIGN INTAKE */
.measurement-date-picker {
	border-radius: 6px;
	height: 35px;
	border: 1px solid #CCCCCC;
	justify-content: center;
	align-self: center;
	align-content: center;
	font-size: 15px !important;
	display: flex;
	text-align: center;
}

.measurement-date-picker:focus {
	border: 1px solid #CCCCCC;
}

.TimePick_BTN {
	position: relative !important;
    background-color: transparent !important;
    border: none !important;
    margin-left: -15px !important;
    margin-top: -2px !important;
    cursor: pointer !important;
}

.measurement-time-picker {
	border-radius: 6px;
	height: 35px;
	border: 1px solid #CCCCCC;
	justify-content: center;
	align-self: center;
	align-content: center;
	font-size: 15px !important;
	display: flex;
	text-align: center;
	background-color: white;
	align-items: center;
}

.measurement-time-picker:focus {
	border: 1px solid #CCCCCC;
}

.ingredient-dropdown {
	border-radius: 6px;
	height: 35px;
	border: 1px solid #CCCCCC;
	justify-content: center;
	align-self: center;
	align-content: center;
	font-size: 15px !important;
	display: flex;
	text-align: center;
	background-color: white;
}

#customDropdown {
    display: none;
	left: 58.8%;
	top: 73px;
    position: absolute;
    width: 38%;
    max-height: 70%;
    overflow-y: auto;
    border: 1px solid #CCCCCC;
    background-color: white;
    z-index: 1;
	margin-right: 10px;
	border-radius: 6px;
}

#customDropdown li {
    padding: 5px;
    cursor: pointer;
	margin-left: -40px;
	border-radius: 6px;;
}

#customDropdown li:hover {
    background-color: var(--tertiary-blue);
}

.table-container-assign-intakes {
	width: 58.5%;
	overflow: hidden;
	margin-top: 5px;
}

.quantityInputIntakeTable {
	background-color: white;
	border: 1px solid black;
	border-radius: 6px;
	font-size: 16px !important;
}

.quantityInputIntakeTable:focus {
	border: 1px solid black;
}

.search-container {
  max-height: 50px;
}

.search-container #dishOptions {
  max-height: 50px;
}

.datepicker-input-assign-intake {
	border: none;
	max-width: 7.5em;
	text-align: center;
	font-size: 15px !important;
	background-color: transparent;
}

/* USER INFORMATION */

.profile-picture-user-info {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin-top: 50px;
}

.user-info-text {
	margin-top: 10px;
	margin-bottom: 35px;
}

.radio-style {
    position: relative;
    display: block;
	margin: 2px 15px 20px 7px;
}

.sexCheckbox {
	margin-right: 5px;
}

/* LOG IN */
.header-login {
	display: flex;
    height: 75px;
    width: 100%;
    justify-content: space-between;
	padding-left: 30px;
	padding-right: 30px;
}

.global-container-login {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	height: 100vh;
	margin-top: -75px;
}

.login_title {
	margin-bottom: 5px;
	text-align: left;
}

.container-login {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo-login {
	width: auto;
	height: 100%;
	margin-top: 20px;
}

.form-container-login {
	width: 100%;
	max-width: 400px;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

.image-container-login {
	width: 50%;
	height: 100vh;
	overflow: hidden;
}

.background-image-login {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* TUTORIAL */
.google-slides-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tertiary-blue);
}

.google-slides {
	height: 75vh;
	width: 125.8vh;
}

.admin-selector-zone {
    width: 100%;
}