@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

:root {
	--myColor_1: #5DA698;
	--myColor_2: #B0D9D1;
	--myColor_3: #21A680;
	--myColor_4: #02734A;
	--myColor_5: #D9D9D9;
	--myColor_6: #012326;
	--myColor_7: #025959;
	--myColor_8: #03A678;
	--myColor_9: #038C65;
	--myColor_10: #025940;
	--myColor_11: #0D5902;
	--myColor_12: #0A4001;
	--myColor_13: #6EBF34;
	--myColor_14: #A9D979;
	--myColor_15: #F2F2F2;
	--myColor_16: #307CBF;
	--myColor_17: #4AA2D9;
	--myColor_18: #A0D3F2;
	--myColor_19: #83A603;
	--myColor_20: #D7F205;
	--myColor_21: #04B2D9;
	--myColor_22: #03A696;
	--myColor_23: #022601;
	--myColor_24: #0E5903;
	--myColor_25: #46A637;
	--myColor_26: #023059;
	--myColor_27: #011526;
	--myColor_28: #044D8C;
	--myColor_29: #0597F2;
	--myColor_30: #05AFF2;
	--myColor_31: #f1f2f3;
	--myColor_32: #666666;
	--myColor_33: #F26101;
	--myColor_34: #E71D36;
	--myColor_35: #A61C4F;
	--myColor_36: #2EC4B6;
	--myColor_37: #57F27D;
	--myLeftNavWidth: 9rem;

}

body {
	/*height: 100%;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	font-size: smaller;
	background-color: var(--myColor_31);
	color: var(--myColor_32);
}

html {
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
	color: blue;
}

a:visited {
	text-decoration: none;
	color: blue;
}

.logo-img img {
	width: 3rem;
}

.top-right img {
	width: 3rem;
}

.top-right a img {
	transition: transform 0.5s;
}

.top-right a img:hover {
	transform: rotate(360deg);
}

.check-button {
	display: flex;
	align-items: center;
}

.check-button label {
	padding-left: 0.5rem;
}

.check-button input {
	transition: box-shadow 0.3s;
}

input:checked+label {
	color: var(--buttonOn);
}

header,
footer {
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
	font-family: "Gruppo", sans-serif;
}

.top-left {
	display: flex;
	align-items: center;
}

.logo-text {
	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-gap: 0.25rem;
}

.logo-text p:nth-of-type(1) {
	font-size: larger;
	font-weight: bold;
}

.logo-text p:nth-of-type(2) {
	font-size: small;
	text-transform: uppercase;
	font-weight: bold;
}

.top-center {
	display: flex;
	flex-direction: column;
	grid-gap: 0.25rem;
	align-items: center;
}

.top-center div:nth-of-type(1) {
	font-weight: bold;
}

.top-center div:nth-of-type(2) a {
	font-size: smaller;
	text-decoration: none;
	cursor: pointer;
}

.top-center h2 {
	text-align: center;
}

.top-right img:nth-of-type(1):hover {
	background-color: #0073b1;
	border-radius: 50%;
	cursor: pointer;
}

.top-right img:nth-of-type(2):hover {
	background-color: #c71f1e;
	border-radius: 50%;
	cursor: pointer;
}

main.calc {
	display: flex;
	align-items: start;
	/*height: 100%;*/
	font-family: "Intro", sans-serif;
	width: 90%;
}

.main-left {
	/*height: 100%;*/
	background-color: white;
	border-radius: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	grid-gap: 1rem;
	top: 1rem;
	position: sticky;
	min-width: var(--myLeftNavWidth);
}
/*
.main-left div:nth-of-type(1) {
	margin: 1rem 0rem;
	font-size: smaller;
	text-align: center;
}
*/
div.button {
	text-align: center;
}

.main-right {
	padding-left: 2rem;
	/*padding-right: 2rem;*/
	min-width: calc(100% - var(--myLeftNavWidth));
}

main p {
	margin: 1rem 0rem;
	font-family: "Intro", sans-serif;
}

main.user {
	display: flex;
	justify-content: center;
	font-family: "Intro", sans-serif;
}

.main-center {
	width: 90%;
}

.image {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 1rem 0rem;
}

.image p {
	font-size: smaller;
}

.section-title {
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	text-align: left;
}

h3.section-title {
	margin-top: 1rem;
}

fieldset {
	border: 0;
}

legend {
	padding: 0.5rem 0rem 1.0rem 0rem;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
}


.grey {
	color: red;
}

div.form-container div input {
	border-radius: 0.5rem;
	background-color: var(--myColor_21);
	border: 0;
	color: white;
	text-align: center;
	padding: 0.2rem;
	margin-left:0.25rem;
}

/* User input required data */

div.form-container div input.userInputRequired {
	background-color: #F26101;
}

#form-div {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 1rem;
}

ul {
	margin-left: 2rem;
	display: flex;
	flex-direction: column;
	grid-gap: 0.3rem;
}

ul.where {
	font-size: smaller;
}

a.menu-left {
	padding-left: 0.5rem;
}

input[type=checkbox] {
	/* Double-sized Checkboxes */
	-ms-transform: scale(1.25);
	/* IE */
	-moz-transform: scale(1.25);
	/* FF */
	-webkit-transform: scale(1.25);
	/* Safari and Chrome */
	-o-transform: scale(1.25);
	/* Opera */
	transform: scale(1.25);
	padding: 10px;
}

hr {
	margin-top: 1.5rem;
	border-top: 2px solid var(--buttonLabel);
}

div.section-display {
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: white;
	border-radius: 1rem;
}

button {
	margin: 1rem 0rem;
	padding: 0.5em 1em;
	background-color: black;
	border: 0.16em solid white;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-align: center;
	border-radius: 10px;
	transition: 0.25s ease all;
	cursor: pointer;
}

button:hover {
	color: black;
	background-color: white;
	border: 0.16em solid black;
}

button:active {
	color: black;
	background-color: white;
	transform: translateY(0.2rem);
}

img.image-display {
	padding: 0rem 1rem;
}

div.picture-equations {
	display: flex;
	flex-direction: row;
}

div.picture-equations-img {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.picture-equations-eq {
	padding-left: 1rem;
}

p {
	text-align: justify;
}

/* Scroll top page button - START */
#topBtn {
	display: none;
	position: fixed;
	bottom: 0.5rem;
	right: 0.5rem;
	z-index: 99;
	font-size: 1rem;
	outline: none;
	background-color: black;
	color: white;
	cursor: pointer;
	padding: 0.5rem;
	border: 0.25rem solid black;
}

#topBtn:hover {
	background-color: white;
	color: black;
}
/* Scroll top page button - END */

/* User manual - START */
.accordion {
	background-color: var(--myColor_22);
	color: #444;
	cursor: pointer;
	padding: 18px;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.2s;
	border-radius: 1rem;
	display: flex;
	justify-content: center;
}

.active,
.accordion:hover {
	background-color: var(--myColor_20);
}

.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.1s ease-out;
}

/* User manual - END */

figcaption {
	font-size: smaller;
	font-style: italic;
}

div.form-container {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-gap: 0.5rem;
}

/* Powertrain parameters specific */
div.form-container-battery {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-gap: 0.5rem;
}

div.form-container-battery div input {
	border-radius: 0.5rem;
	background-color: var(--myColor_21);
	border: 0;
	color: white;
	text-align: center;
	padding: 0.2rem;
	margin-right: 0.5rem;
}

.displayDataContainer {
	display: flex;
	justify-content: space-evenly;
}

.displayDataContainerSection {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.displayDataTitle {
	text-align: center;
	padding-bottom: 1rem;
	font-size: large;
}


.tableDataDisplayContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-gap:1rem;
}

.displayDataData {
	text-align: center;
	font-size: larger;
	font-weight: bold;
	color: var(--myColor_6);
}

.displayDataNumber {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 1rem;
}

.form-container-array {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Simulation setup */
.simulationSetupDiv {
	display: flex;
	justify-content: space-evenly;
}

input[type=radio] {
	margin-right: 0.25rem;
}


/* Input data section*/
.input-data-section {
	display: flex;
	flex-direction: column;
}
.input-data-section-container {
	display: flex;
	flex-direction: row;
	grid-gap:0.5rem;
	justify-content: space-around;
}

/* Table data display (battery) */

table.tableDataDisplay {
	border: 1px solid var(--myColor_5);
}

table.tableDataDisplay td {
	border: 1px solid var(--myColor_5);
	padding: 0.25rem;
	font-size: smaller;
}

table.tableDataDisplay tr:first-of-type {
	text-align: center;
}

/* Powertrain plot */

.powertrain-data-div {
	display: flex;
	grid-gap: 1rem;
	flex-wrap: wrap;
}


/*
.powertrain-data-plot fieldset {
	display: flex;
	grid-gap: 1rem;
}
*/
/* Architecture pictures */
.architectures-section-container {
	display: flex;
	justify-content: space-around;
	grid-gap: 2rem;
}

/* Page loader animation */
.loader-container {
	z-index: 99;
	/*position: absolute;
    top: 50%;
    left: 50%;/*
    margin-top: -50px;
    margin-left: -50px;
    width: 100vw;
    height: 100vh;*/
	position: fixed;
  	top: 50%;
  	left: 50%;
  	/* bring your own prefixes */
  	/*transform: translate(-50%, -50%);*/
}

.loader-container-text {
	font-size: larger;
	margin-bottom: 0.5rem;
}

.loader {
	

	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

/* Simulation results plot select menu */

.simulationResultsDataSelection, .speedControllerDataSelection {
	display: flex;
	justify-content: space-around;
}

/* Tooltip titles*/

.tooltip {
	position: relative;
	display: inline-block;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: calc(50vw - var(--myLeftNavWidth));
	background-color: black;
	color: #fff;
	text-align: left;
	border-radius: 0.5rem;
	padding: 1rem;
  
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* Simulation results table */
.simulationResultsTable {
	display:flex;
	flex-direction: column;
	align-items: center;
	
}

.simulationResultsTable table {
	color: var(--myColor_32);
}

.simulationResultsTable h3 {
	margin-bottom: 1rem;
}
.simulationResultsTable table, td {
	
	border: 1px solid var(--myColor_32);
}

.simulationResultsTable td {
	padding: 0.5rem;
	font-size: smaller;
}

.simulationResultsTable tr:nth-of-type(1), td:nth-of-type(1) {
	font-weight: bold;
	text-align: center;
}

.tableDefinitionNumericData {
	text-align: center;
}


.simResultsCompData {
	font-size: x-large;
	font-weight: bold;
}

/* About page - START */

.page {
	width: 90%;
	background-color: white;
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	font-family: sans-serif;
}

.page-media img {
	border-radius: 50%;
	
}

.page-text {
	width: 50%;
}

.page-text-users-manual {
	width: 60%;
}

.page-media-text {
	display: flex;
	grid-gap: 2rem;
	justify-content: space-evenly;
	align-items: center;
}

/* About page - END */

/* Help page */

.help-text-container {
	text-align: justify;
}

.help-header-title {
	background-color: var(--myColor_26);
	color: white;
	padding: 1rem;
	border-radius: 0.5rem;
}

/* Custom speed profile*/

#customCycleDiv {
	display: none;
}

/* PID gains */

/* Responsive */

@media only screen and (max-width: 1260px) {
    /* ruleset for 480px - 600px */
	.logo-text {
		display: none;
	}
	.architectures-section-container {
		flex-direction: column;
		align-items: center;
	}
	.displayDataNumber {
		flex-direction: column;
	}
}

@media only screen and (max-width: 950px) {
    /* ruleset for 480px - 600px */
	.top-center {
		flex-direction: column;
		grid-gap: 0rem;
	}
	
}

@media only screen and (max-width: 600px) {
	header, footer {
		flex-direction: column;
		grid-gap: 1rem;
	}
}