/*
Dark Blue	rgb(0, 32, 74)
Middle Blue	rgb(0, 87, 146)
Light Blue	rgb(0, 187, 240)
Orange		rgb(253, 180, 75)
favicon: Segoe UI

*/

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

html {
	font-family: "Calibri", sans-serif;
	scroll-behavior: smooth;
}

body {
	margin: 0px;
	background-color: rgb(249, 249, 254);
	margin-bottom: 100px;
}

a {
	  all: inherit;
	  border: 0px;
	  margin: 0px;
	  display: inline;
}

.boldText {
	font-weight: bold;
}

.italicText {
	font-style: italic;
}


.topBar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 6fr) minmax(0, 15fr) minmax(0, 6fr)  minmax(0, 1fr);
	grid-template-areas:
		". .  TITLE RIGHT .";
	width: 100%;
	background-color: rgb(0, 32, 74);
	border-bottom: 3px solid rgb(253, 180, 75);
	height: 50px;
}

.topBarTitleContainer {
	grid-area: TITLE;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.topBarTitle {
	display: flex;
	flex-direction: column;
	height: 50px;
	justify-content: center;
	align-content: center;
	color: white;
	font-size: 30px;
	cursor: pointer;
}

.smallNavItemsRight {
	display: none;
	grid-area: RIGHT;
	/* display: flex; */
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	color: white;
	text-decoration: underline;
	width: 100%;
}

.rightNavListDropdownButton, .rightNavListItem {
	width: 10vw;
	height: 30px;
	border: 1px solid white;
}

.rightNavListDropdownButton {
	/* Margin top is equal to (height of topBarTitle - height of dropdown button) / 2 */
	margin-top: calc((50px - 30px)/2);
	border-radius: 4px;
}

.rightNavListContainer {
	display: none;
	z-index: 999;
	/*position: absolute;
	 Calc is (1/2)*(Height of topbartitle + height of rightNavListDropdownButton) as this is the height at which the rightnavlistdropdownbutton ends 
	top: calc((1/2)* (50px + 30px));
	width: 20%; */
}

.rightNavListItem {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	cursor: pointer;
	text-align: center;
}

.rightNavListItem:hover {
	color: Rgb(253, 180, 75);
	text-decoration: underline;
}


main {
	border: 1px solid rgb(220, 220, 230);
	border-radius: 6px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	background-color: white;
}


h1, .titleText {
  margin-left: auto;
  margin-right: auto;
}

h1 {
	text-align: center;
  margin-block-start: 0px;
  color: rgb(0, 32, 74);
  font-size: 20px;
	width: 80%;
	margin-top: 6px;
}

.titleText {
	text-align: center;
	font-size: 13px;
	align-self: flex-start;
	width: 92%;
}

.resultsTitleSubtext {
	font-size: 13px;
}

.borderObject {
	border-bottom: 1px solid rgb(90, 90, 90);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.gridContainer {
	display: grid;
	grid-template-columns: 1fr 8fr 0.5fr 8fr 1fr;
	grid-template-areas:
		". A A A ."
		". B B B ."
		". C . F ."
		". D D D ."
		". E E E .";
	margin-bottom: 3vh;
}

/* Input Fields */
.A {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 10px;
	grid-area: A;
	background-color: white;
	padding-left: 0;
}

.tableLeftColumn, .tableRightColumn {
	padding-bottom: 17px;
}

.tableLeftColumn {
	text-align: right;
	font-weight: bold;
	font-size: 15px;
	width: 27%;
}

.tableRightColumn {
	text-align: left;
	padding-left: 10px;
	font-size: 13px;
	cursor: default;
}

.optionalInput {
	color: rgb(155, 155, 155);
}

.textbox {
	width: 10%;
	height: 30px;
	text-align: center;
	font-size: 16px;
	margin-right: 0.2vw;
	margin-left: 5px;
	transition: 0.4s ease-in-out;
	box-shadow: inset 0 0 1px rgb(50 50 255);
  border: 1px solid lightgrey;
  border-radius: 3px;
}

.textbox:focus {
	box-shadow: inset 0 0 6px rgba(0, 87, 146, 1);
}



.textboxLonger {
	width: 15%;
}

.textboxShorter {
	width: 5%;
}

.entryDropdown {
	font-size: 15px;
	height: 30px;
	background-color: white;
	margin-right: 4px;
	margin-left: 5px;
	color: rgb(30, 30, 30);
	box-shadow: inset 0 0 1px rgb(50 50 255);
  border: 1px solid lightgrey;
  border-radius: 3px;
}

.activityLevelDropdown{
	width: 60%;
}

input[type=radio] {
	width: 15px;
  height: 15px;
  margin-top: -1px;
  vertical-align: middle;
}

label {
	font-size: 15px;
	margin-right: 10px;
}

.queryText {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-decoration-color: rgb(30, 30, 30);
}

.queryText:hover {
	cursor: help;
}


/* Calculate Box and Button */
.B {
	grid-area: B;
	display: flex;
	flex-direction: column;
	margin-top: 0px;
	justify-content: center;
	align-items: center;
}

.calculateButton {
	background-image: linear-gradient(rgb(0, 87, 146), rgb(0, 32, 74));
	background-color: rgb(0, 87, 146);
	color: white;
	font-size: 20px;
	border: none;
	border-radius: 6px;
	margin-bottom: 20px;
	/* border-bottom: 2px solid rgb(253, 180, 75); */
	width: 340px;
  height: 37px;
}

.calculateButton:hover, .resetButton:hover {
	background-image: linear-gradient(rgb(20, 107, 166), rgb(20, 52, 94));
	cursor: pointer;
}

.errorMessages {
	color: red;
	font-size: 17px;
}

/* Output table */
.C {
	display: none;
	flex-direction: column;
	width: 100%;
	grid-area: C;
	background-color: white;
	align-content: space-around;
	justify-content: flex-start;
}

.caloricOutputTable {
	border-collapse: collapse;
	margin-top: 10px;
}

.outputTableLeftColumn {
	text-align: center;
	vertical-align: center;
	font-size: 12px;
}

.outputTableRightColumn {
	vertical-align: center;
	text-align: center;
	font-size: 12px;
}

.caloricOutputRow {
	border-bottom: 1px solid black;
}

.outputTableLeftColumn, .outputTableRightColumn {
	padding-top: 1px;
	padding-bottom: 1px;
}


.outputBoxTitleContainer {
	display: flex;
	justify-content: center;
	align-content: flex-end;
	min-height: 60px;
}


.outputBoxTitle {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.macrosTitleContainer {
	margin-left: 5%;
	margin-right: 5%;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
	font-weight: bold;
	min-height: 60px;
}

.macrosCalculatorTitleSubline {
	font-size: 14px;
	/*background-color: rgb(242, 252, 255);*/
	background-color: white;
	border-radius: 13px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 4px;
	padding-bottom: 4px;
}

#macrosCalculatorTitle {
	margin-top: 8px;
}

.C, .F {
	margin-bottom: 26px;
	margin-top: 10px;
}

/* Macro Outputs */
.D {
	display: none;
	flex-direction: column; 
	justify-content: center;
	width: 100%;
	grid-area: D;
	margin-top: 10px;
	background-color: rgb(235, 245, 255);
 	box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
}

.macrosStatsGrid {
	max-width: 100%;
	margin-top: 17px;
	display: grid;
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 4fr) minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr) minmax(0, 4fr) minmax(0, 0.5fr);
	grid-template-areas:
		". mA . mB . mC ."
		". mD mZ1 mE mZ2 mF ."
		"mJ mG . mH . mI ."
		". mK mK mK mK mK mL";
	text-align: center;
}

.mA, .mB, .mC {
	margin-bottom: 6px;
}

.mA {
	grid-area: mA;
}
.mB {
	grid-area: mB;
}
.mC {
	grid-area: mC;
}

.mD, .mE, .mF {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	min-height: 300px;
	margin-bottom: 10px;
	border-bottom: 1px solid black;
}

.mD {
	grid-area: mD;
	border-left: 1px solid black;
}
.mE {
	grid-area: mE;
}
.mF {
	grid-area: mF;
}

/* Temporary Border fix for macros */
.mZ1 {
	grid-area: mZ1;
}
.mZ2 {
	grid-area: mZ2;
}
.mZ1, .mZ2 {
	margin-bottom: 10px;
	border-bottom: 1px solid black;
}
/* end of border fix */


.mG, .mH, .mI {
	margin-bottom: 6px;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}

.mG {
	grid-area: mG;
}
.mH {
	grid-area: mH;
}
.mI {
	grid-area: mI;
}

.mJ {
	grid-area: mJ;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-size: 2vw;
	padding-left: 10%;
	padding-bottom: 2px;
}

.mK {
	margin-top: 17px;
	grid-area: mK;
	font-size: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mL {
	grid-area: mL;
}

.statsText {
	width: 100%;
	font-size: 14px;
	margin-left: auto;
	margin-right: auto;

}

.statsTextHeading {
	font-weight: bold;
	font-size: 13px;
}


.carbsBar, .proteinBar, .fatsBar {
	display: flex;
	justify-content: center;
	background-color: rgb(245, 209, 157);
	width: 50%;
	border: 1px solid black;
	border-bottom: 0px;
	text-align: center;
	font-size: 28px;
	margin-left: auto;
	margin-right: auto;
	transition: 0.8s ease-in-out;
	box-shadow: inset 0 0 18px rgba(253, 180, 75, 1);
	height: 0px;
}

/*
.carbsBar {
	height: 300px;
}

.proteinBar {
	height: 225px;
}

.fatsBar {
	height: 225px;
}
*/

/* Macros input section */
.E {
	grid-area: E;
	display: none;
	justify-content: center;
	height: 2px;
}

.macrosInputs {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
}

.macroInputText {
	width: 37%;
	font-size: 16px;
	text-align: center;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 1);
  	transition: 0.4s ease-in-out;
  	border-radius: 18px;
  	border: none;
}
.macroInputText:focus {
  box-shadow: inset 0 0 6px rgba(0, 87, 146, 1);
}

.sliderContainer {
	width: 100%;
	display: flex;
	justify-content: center;
}

.macrosSlider {
	-webkit-appearance: none;
	width: 100%;
	height: 27px;
	border-radius: 50px;
	margin-top: 5px;
	background: linear-gradient(to right, rgb(245, 219, 167), rgb(253, 180, 75));
	border: 1px solid rgb(160, 160, 190);
	box-shadow: inset 0 0 5px rgba(253, 250, 250, 1);
}

.macrosSlider:hover {
	cursor: pointer;
}

.macrosSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 27px; /* Set a specific slider handle width */
  height: 27px; /* Slider handle height */
  background: linear-gradient(rgb(0, 87, 146), rgb(0, 32, 74));
  cursor: pointer; /* Cursor on hover */
  border-radius: 30px;
}

.macrosSlider::-moz-range-thumb {
  border-radius: 30px;
  width: 27px; /* Set a specific slider handle width */
  height: 27px; /* Slider handle height */
  background: linear-gradient(rgb(0, 87, 146), rgb(0, 32, 74));
  cursor: pointer; /* Cursor on hover */
}

.surplusDeficitArea {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4vh;
}

.surplusDeficitOutputText {
	margin-top: 1vh;
	min-height: 6vh;
	font-size: 1.5vh;
}

.miniTextbox, .deficitOrSurplusDropdown {
	border: none;
	padding: 0px 0px;
	font-size: 16px;
	height: 24px;
	text-align: center;
	border-radius: 18px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
  background-color: white;
  color: black;
}

.miniTextbox {
	width: 47px;
	margin-right: 3px;
	transition: 0.4s ease-in-out;
}

.miniTextbox:focus {
  box-shadow: inset 0 0 6px rgba(0, 87, 146, 1);
}

.deficitOrSurplusDropdown{
	margin-left: 10px;
}


/* BMI*/
.F {
	grid-area: F;
	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}


.BMIBox {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 13px;
	margin-top: 10px;
}

.BMIScaleImage {
	margin-top: 10px;
	position: relative;
	width: 100%;
	height: auto;
}

.BMIArrow {
	position: relative;
	top: calc(-0.62vh - 10px);
	width: 31.5%;
	/* 1.3% correction factor for non-symmetrical scale */
	margin-left: calc(1.3% + 50% - 31.5%);
	height: auto;
	transition: all 2.4s;
	transform-origin: right;
	transform: rotate(0deg) rotatex(61deg);
}

.BMINormalRange {
	margin-top: 4px;
	text-align: center;
	font-size: 12px;
}

/* Reset Button */
.R {
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: calc(min(16px, 2.4vw) + 6px);
	left: 50%;
	transform : translateX(-50%);
	flex-direction: column;
	align-items: center;
	width: 40vw;
	height: 40px;
	/* Background Temporarily removed until buttons are integrated
  background-color: rgb(245, 209, 157);
  */
  z-index: 10;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


.resetButton {
	background-image: linear-gradient(rgb(0, 87, 146), rgb(0, 32, 74));
	background-color: rgb(0, 87, 146);
	color: white;
	font-size: 16px;
	width: 140px;
	height: calc(0.8 * 40px);
	border: none;
	border-radius: 6px;
	margin-left: 5%;
}

.resetArrow {
	margin-right: 7px;
}

.informationSection {
	margin-top:	30px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

h2 {
	font-size: max(16px, 1.7vh);
	color: rgb(0, 32, 74);
	margin-bottom: 0px;
}
h2, .explanationParagraph {
	margin-left: 1.6vw;
}

.TDEEGraph { 
	height: calc((1513/1421) * 30vw);
	width: 30vw;
	float: right;
}

.explanation {
	margin-bottom: 40px;
	border-bottom: 1px dotted rgb(225, 225, 230);
}

.explanationParagraph {
	width: 95%;
	word-wrap: break-word;
	font-size: max(15px, 1.5vh);
}

.explanation1 {
	justify-content: left;
}

.formulaExplanation {
	background-color: rgb(245, 209, 157);
	color: rgb(80, 20, 20);
	border-radius: 9px;
	width: 80%;
	padding-left: 10px;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
}

.consentPopupGreyOut {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 100vw;
	background-color: rgba(180, 180, 180, 0.4);
}

.consentPopup {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-around;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: calc(-30vh/2); /* Half of negative height */
	margin-left: calc(-100vw/2); /* Half of negative width */
	height: 30vh;
	width: 100vw;
	background-color: black;
	border-radius: 7px;
	color: white;
}

.consentPopupTitle {
	display: flex;
	justify-content: center;
	text-align: center;
}

.consentLinks {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.consentLinkItem {
	cursor: pointer;
	text-decoration: underline;
}

.consentLinkItem:hover {
	color: rgb(253, 180, 75);
	text-decoration: underline;
}


.consentButtonContainer {
	margin-top: 1vh;
	display: flex;
	align-content: flex-start;
	justify-content: space-around;
	height: 50%;
}

.allowCookiesButton {
	width: 65%;
	height: 100%;
	background-image: linear-gradient(green, darkgreen);
	font-size: 24px;
	color: white;
	box-shadow: inset 0 0 4px white;
	border-bottom: 1px solid white;
	cursor: pointer;
}

.lowerLinkBar {
	position: fixed;
	background-color: rgb(0, 87, 146);
	color: white;
	width: 100vw;
	left: 0px;
	bottom: 0px;
	display: flex;
	justify-content: flex-end;
	align-content: center;
	z-index: 999;
	font-size: min(16px, 2.4vw);
}

.lowerLinkBarItem {
	display: flex;
	align-content: center;
	margin-right: 2vw;
	margin-left: 1vw;
	margin-top: 1px;
	margin-bottom: 3px;
	cursor: pointer;
	text-decoration: underline;

}

.lowerLinkBarCopyright {
	position: fixed;
	left: 0px;
	margin-right: 1vw;
	margin-left: 1vw;
	margin-top: 1px;
	margin-bottom: 3px;
}

.lowerLinkBarItem:hover {
	color: rgb(253, 180, 75);
	text-decoration: underline;
}

@media (orientation: landscape) {
	main {
		width: max(50vw, 800px);
	}
	.topBarTitle {
		font-size: 6vh;
	}
	h1 {
		font-size: max(3vh, 24px);
	}
	.titleText, .resultsTitleSubtext {
		font-size: max(2.1vh, 16px);
	}
	.tableLeftColumn, .tableRightColumn {
		padding-bottom: 2.5vh;
	}
	.tableLeftColumn {
		font-size: 2.3vh;
	}
	.tableRightColumn {
		font-size: 2.1vh;
	}
	.informationSection {
		width: 50%;
	}
	.entryDropdown {
		font-size: 2.5vh;
		height: 3.3vh;
	}
	.textbox {
		height: 3.3vh;
		font-size: 2.5vh;
		width: 6vh;
	}
	label {
		font-size: 2vh;
	}
	input[type=radio] {
		width: min(3vh, 20px);
    height: min(3vh, 20px);
	}
	.outputBoxTitle, .macrosTitleContainer{
		font-size: max(2.4vh, 18px);
	}
	.outputTableLeftColumn, .outputTableRightColumn {
		font-size: max(1.6vh, 16px);
	}
	.BMIBox {
		font-size: 2.2vh;
	}
	.statsText {
		font-size: max(2vh, 14px);
	}
	.macroInputText {
		font-size: max(2.3vh, 16px);
		height: max(3vh, 18px);
	}
	.statsTextHeading {
		font-size: max(2.3vh, 16px);
	}
	.mG, .surplusDeficitOutputText {
		font-size: max(1.5vh, 14px);
	}
	


	.mJ {
		font-size: 100%;
	}


	.macrosSlider {
		height: max(2vh, 20px);
	}
	.macrosSlider::-webkit-slider-thumb {
	 	height: max(2vh, 20px); /* Slider handle height */
	  	width: max(2vh, 20px);
	}

	.macrosSlider::-moz-range-thumb {
	  	height: max(2vh, 20px); /* Slider handle height */
	  	width: max(2vh, 20px);
	}
	.TDEEGraph { 
		height: 50vh;
		width: calc((1421/1513)*50vh);
	}
	.consentPopup {
		margin-top: calc(-30vh/2); /* Half of negative height */
		margin-left: calc(-40vw/2); /* Half of negative width */
		height: 30vh;
		width: 40vw;
	}
}