/* Breakpoints: 
 - 600px
 - 900px
 - 1200px
 - 1800px */
html{
	width: 100%;
	overscroll-behavior: none;
}
 body {
	width: 100%;
	overflow: hidden;
 }

  /* ----------- ABOUT PAGE ---------- */
  .aboutpage {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	justify-content: center;
	align-items: flex-start;
	z-index: 20;
	overflow-y: auto;
  }

  .aboutcontent {
	max-width: 600px;
	padding: 6em 20px;
	box-sizing: border-box;
	width: 100%;
 }

 .aboutcontent-text {
	overflow-y: visible;
  }

 .aboutbody p{
	margin-top: 8px;
 }

 .backbutton {
	width: 200px;
	display: flex;
	flex-direction: row;
	cursor: pointer;
	margin-bottom: 3em;
	gap: 8px;
 }

 .override {
	max-width: fit-content!important;
	margin-bottom: 0;
 }


.backbuttonicon {
	/* width: 10%; */
	fill: var(--surface50);
	display: flex;
	justify-content: start;
	align-items: center;
}

.backbuttontext {
	/* width: 80%; */
	display: flex;
	align-items: center;
  }

  .backbuttontext a:hover {
	color: var(--surface200)!important;
  }


  .backbutton:hover > .backbuttonicon .ico_back {
	transform: translate(-3px);
  }

  .backbutton:hover > .backbuttonicon .ico_enter {
	transform: translate(3px);
  }

  .aboutsubtitle {
	margin-bottom: 2px;
	margin-top: 24px;
	font-weight: 600;
	font-size: 18px
  }

  .inlinebox {
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: var(--surface800);
	box-sizing: border-box;
  }

  .inlinebox a {
	text-decoration: none!important;
  }

 /* ----------- LANDING PAGE ---------- */

 #content { 
	visibility: hidden; 
	/* This will toggle because for some stupid reason safari keeps on scrolling */
 }

 .landingpage {
	height: 100%;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overscroll-behavior: contain;
	
 }

 .landingpage-content {
	width: 100%;
	max-width: 1400px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
 }

 .landingpage-maincontent {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	object-fit: cover;

 }

 .landingpage-title {
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	max-height: 720px;
	font-size: 148px;
	font-weight: 400;
	margin-bottom: 0px;
	margin-top: 0px;
  }

 .landingpage-title .the {
	position: absolute;
	top: 40px;
	left: 20px;
	z-index: 2;
 }

 .landingpage-title .history {
	position: absolute;
	top: 140px;
	right: 20px;
	z-index: 2;
 }

 .landingpage-title .of {
	position: absolute;
	z-index: 0;
	top: 300px;
	left: 80px;
 }

 .landingpage-title .ferrari {
	position: absolute;
	z-index: 0;
	bottom: 48px;
	right: 200px;
 }


 .landingpage-image {
	position: absolute;
	z-index: 1;
	width: 90%;
	max-width: 780px;
	max-height: 100%;
	object-fit: cover;
 }

 .landingpage-image img{
	width: 50%;
	height: auto;
 }

 .paint {
	position: absolute;
	top: 40px;
	right: 40px;
	display: flex;
	flex-direction: column;
	align-items: end;
	width: 320px;
 }

 .paint p{
	margin: 0px;
	text-align: end;
	font-size: 16px;
	line-height: normal;
 }

 .paint-title{
	font-weight: 400;
	margin-bottom: 8px!important;
 }

 .mainmenu {
	position: absolute;
	bottom: 32px;
	width: 100%;
	height: 42px;
	max-width: 1200px;
	padding: 0px 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	box-sizing: border-box;
 }

 .secondary-buttons {
	display: flex;
	gap: 24px;
	pointer-events: all;
 }

 .secondarymenubutton {
	display: flex;
	align-items: center;
	
 }

 .secondarymenubutton-text {
	padding: 4px 0px;
	color: var(--surface400);
	border-bottom: 1px solid currentColor;
	transition: padding 0.2s ease; 
 }

 .override {
	color: var(--surface50);
 }

 .secondarymenubutton-text:hover {
	color: var(--surface300);
	border-bottom: 1px solid var(--surface300);;
	padding: 8px 0px;
	cursor: pointer;
 }

.welcomebutton {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
}

#loader {
	margin: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

#loader p {
	margin: 0px;
}

#loader img {
	width: 16px;
	height: 16px;
}

 @media only screen and (max-width: 599px) {
	.landingpage-title {
		font-size: 80px;
		max-height: 560px;
	  }

	  .landingpage-title .the {
		top: 60px;
		left: 10px;
	 }
	
	 .landingpage-title .history {
		top: 180px;
		right: 10px;
	 }
	
	 .landingpage-title .of {
		top: 320px;
		left: 10px;
	 }
	
	 .landingpage-title .ferrari {
		bottom: 60px;
		right: 10px;
	 }

	 .mainmenu {
		height: auto;
		align-items: end;
	 }

	 .secondary-buttons {
		flex-direction: column;
		gap: 8px;
	 }

	 .landingpage-buttons {
		padding: 0px 10px;
		gap: 16px;
	 }

	 .Button {
		width: 100%!important;
	 }

	 .welcomebutton {
		width: 50%!important;
	 }

	 #loader {
		width: 50%;
	}

	 .paint {
		top: 20px;
		right: 10px;
	 }

	 .secondarymenubutton-text:hover {
		padding: 4px 0px;
	 }

}
@media only screen and (min-width: 600px) and (max-width: 899px) {
	.landingpage-image {
		width: 70%;
	 }
	.landingpage-title {
		font-size: 100px;
		max-height: 560px;
	  }
	.landingpage-title .the {
		/* top: 0px; */
		left: 40px;
	 }
	
	 .landingpage-title .history {
		/* top: 150px; */
		right: 40px;
	 }
	
	 .landingpage-title .of {
		/* top: 300px; */
		left: 40px;
	 }
	
	 .landingpage-title .ferrari {
		/* bottom: 20px; */
		right: 90px;
	 }

}
@media only screen and (min-width: 900px) and (max-width: 1180px){
	.paint {
		top: 20px;
		right: 20px;
	 }

	.landingpage-title {
		font-size: 120px;
	  }
	.landingpage-image {
		width: 68%;
	 }

	 .landingpage-title .the {
		top: 20px;
		left: 32px;
	 }
	
	 .landingpage-title .history {
		top: 140px;
		right: 20px;
	 }
	
	 .landingpage-title .of {
		top: 300px;
		left: 32px;
	 }
	
	 .landingpage-title .ferrari {
		bottom: 56px;
		right: 160px;
	 }

}

/* --------------- Common Button Styles --------------- */
  
  .Button {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	width: 200px;
	height: 40px;
	max-width: 250px;
	text-decoration: none;
	font-size: 0.75rem;
	vertical-align: middle;
	text-align: center;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
	font-weight: 400;
	border-radius: 8px;
	cursor: pointer;
  }
  
  .Button:hover {
	color: var(--surface50);
  }
  
  .Button:hover > .buttonicon .ico_ext {
	transform: translate(3px, -3px);
  }
  
  .Button:hover > .buttonicon .ico_enter {
	transform: translate(3px);
  }

  .buttonicon:hover + .homebuttontext{
	color: var(--surface50);
  }
  
  /* Enter Button Specific Styles */
  .enterButton {
	border: 1px solid var(--surface50);
	font-size: 1rem;
	font-weight: 400;
	overflow: hidden;
  }

  .homebuttontext {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .homebuttontext:hover {
	color: #7f1d1d;
	background-color: var(--surface50);
  }
  
  .buttonicon {
	width: 20%;
	border-left: 1px solid var(--surface50);
	fill: var(--surface50);
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .buttoniconsvg {
	margin-bottom: 0px;
	width: 15px;
	transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

  /* ----------- DATA VIS ---------- */

.intromessage {
	position: absolute;
	width: 300px;
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.arrow {
	width: 10%;
	height: auto;
}

.circ:not(:hover) .nodetext {
	display: none;
}

.nodetext {
	z-index: 99;
	position: absolute;
}

#dataviz {
	z-index: 0;
	/* position: fixed; */
	max-width: 99vw;
	/* height: 100%; */
	/* overflow-x: scroll; */
}

#dataviz {
	overflow: hidden;
  }
  
  #dataviz::-webkit-scrollbar {
	width: 0;
  }

  .tooltip {
	position: absolute;
	font-size: 1.2em;
	padding: 8px;
	border-radius: 8px;
  }


  @media only screen and (max-width: 599px) {
	.intromessage {
		position: absolute;
		width: 300px;
		left: 50%;
		top: 60%;
		transform: translate(-50%, -50%);
	}

	.tooltip {
		display: none;
		}

	#dataviz {
		overflow-x: visible;
		max-width: 100%;
	}

	.arrow {
		transform: scaleX(-1) rotate(-20deg);
		
	}
}

/* ----------- SEARCH ---------- */


.header {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	position: fixed;
	padding: 12px 16px;
	pointer-events: none;
}
.headerlogo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgb(255,255,255,0.6);
	pointer-events: all;
}

.headerlogo img{
	width: 24px;
	height: 24px;
	opacity: 0.6;
}

.header-toprow {
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-content: space-between;
}


.hamburger-menu {
	display: none;
	width: 51px;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	cursor: pointer;
	pointer-events: all;
	background-color: var(--surface800);
	border-radius: 8px;
  }
  
  /* Hidden Menu for Small Screens */
  .mobile-menu {
	display: none;
	flex-direction: column;
	gap: 16px;
	background-color: var(--surface900);
	padding: 32px 12px;
	pointer-events: all;
  }

  .mobile-menu .secondarymenubutton-text {
	font-size: 2rem;
  }
 


.search {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 320px;
	border-radius: 8px;
	overflow: hidden;
	pointer-events: auto;
}

.searchbox {
	width: 100%;
	display: flex;
	align-items: center;
}

.search .search-icon {
	position: absolute;
	left: 32px;
	height: 20px;
}
  
.search .clear-icon {
	position: relative;
	right: 20px;
	cursor: pointer;
	height: 16px;
	display: none;
}
  
.search input {
	width: 100%;
	padding: 16px 48px;
	border: 0;
	box-sizing: border-box;
	font-size: 16px;
	font-family: inherit;
}
  
.cover-scrollbar{
	overflow: hidden;
	border-radius: 8px;
	margin-top: 8px;
	width: 100%;
	max-height: 800px;
}
.scrollable-container {
	overflow: hidden;
	max-height: 800px;
	box-sizing: border-box;
	pointer-events: auto;
}

#suggestions {
	border-radius: 8px;
	overflow: hidden;
}

.scrollable-container ul {
	overflow-y: scroll;
	max-height: 800px;
	width: 320px;
	text-decoration: none;
	list-style-type: none;
	padding: 0;
	margin-top: 0px;
}

.scrollable-container ul li {
	padding: 16px 24px;
	cursor: pointer;
	pointer-events: auto;
}

.start-year {
color: var(--surface400);
margin-right: 8px;
}

.filters {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 24px;
	border-radius: 8px;
}

.typeCheckboxes {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 40px;
}

.checkbox-row {
	padding: 4px 0px;
  }

  .checkbox-row label{
	display: block;
	white-space: nowrap;
  }
  
  /* Hide default checkbox */
  input[type="checkbox"] {
	display: none;
  }
  
  .checkbox-container input[type="checkbox"]:checked + .checkmark:after {
	opacity: 1;
  }
  
  /* Style for custom checkbox */
  .checkbox-container {
	position: relative;
	padding-left: 30px; /* Adjust the size of the custom checkbox */
	cursor: pointer;
  }
  
  /* Create the circular design */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px; /* Adjust the size of the circular checkbox */
	width: 20px; /* Adjust the size of the circular checkbox */
	border-radius: 4px;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.2);
	&:after {
		content: '';
		width: 9px;
		height: 5px;
		position: absolute;
		top: 4px;
		left: 4px;
		border: 3px solid #fcfff4;
		border-top: none;
		border-right: none;
		background: transparent;
		opacity: 0;
		transform: rotate(-45deg);
	  }
	  &:hover::after {
		opacity: 0.3;
	  }
	  
  }
  
  /* Different background colors for each checkbox type */
  .checkbox-sport-prototype .checkmark {
	background: #164e63; /* Change this to your desired color */
  }
  
  .checkbox-gran-turismo .checkmark {
	background-color: #7f1d1d; /* Change this to another desired color */
  }
  .checkbox-single-seater .checkmark {
	background-color: #ca8a04; /* Change this to another desired color */
  }
  .checkbox-special .checkmark {
	background-color: #475569; /* Change this to another desired color */
  }

	@media only screen and (max-width: 700px) {
		.header {
			padding: 8px 12px;
			gap: 8px;
			z-index: 5;
		}

		#suggestions {
			overflow-y:scroll;
			width: 100%;
		}

		.aboutbuttonicon {
			display: none;
		  }

		.filters{
			max-width: 580px;
			width: 90%;
			padding: 12px 12px;
			bottom: 8px;
		}

		.typeCheckboxes{
			gap: 16px;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.checkbox-row {
			width: 46%;
			box-sizing: border-box;
		}

		.headerlogo {
			display: none;
		}

		.datavizbuttons{
			display: none;
		  }
		
		  .hamburger-menu {
			display: flex;
		  }
		
		  .mobile-menu.active {
			display: flex;
		  }
	}
	@media only screen and (min-width: 600px) and (max-width: 899px) {
		.headerlogo {
			display: none;
		}

	}



/* ----------- INFO DIV ---------- */

.infoheaderbuttons {
	position: absolute;
	z-index: 5;
	right: 10px;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
}

.copybutton{
	height: 32px;
	width: 80px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1; 
	cursor: pointer!important;
}

.copybutton p{
	font-size: 12px;

}

.closebutton{
	width: 40px;
	height: 40px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1; 
	cursor: pointer!important;
}

.closebutton svg path{
	fill: white;
}

.info {
	position: fixed;
	bottom: 0; 
	top: 0;
	width: 100vw;
	height: auto;
	right: 0px;
	left:0px;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	overscroll-behavior: none;
	z-index: 5;
}

.imagesection {
	position: relative;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.coverimage {
	padding: 24px 56px;
}

.coverimage img{
	width: 100%;
	height: auto;
}

.modelsection {
	position: absolute;
	bottom: 24px;
	left: 24px;
}

.modelinfo {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
}

.modeltext  {
	margin-top: 0;
	margin-bottom: 0;
}

.secondaryinfo {
	padding: 32px 24px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.secondaryinfocell {
	flex-basis: 33%;
	text-align: center;
}

.secondaryinfocell p{
	margin: 0;
}

.infoTitle {
	font-size: 0.8em;
}

.cellTitle {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 2px;
	letter-spacing: 0.03em;
	font-family: 'Fira Sans Condensed', sans-serif;
}

.infoModel {
	margin-right: 12px;
}

.productionyears {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
}

.introductionsection {
	padding: 32px;	
}

.introductionsection p{
	margin-top: 0;
	margin-bottom: 0;	
}

.readmore {
	display: flex;
	flex-direction: row;
	margin-top: 8px;
	gap: 8px;
	align-items: center;
}

.externallink {
	height: 12px;
	display: none;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 599px) {
	.secondaryinfo{
		padding: 24px 12px;
	}

	.introductionsection {
		padding: 32px 16px;	
	}

	.coverimage {
		padding: 24px 32px;
	}

	.cellTitle {
		font-size: 16px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
	.info {
		width: 75%;
		max-width: 500px;
		left: auto;
	}
}
@media only screen and (min-width: 900px) {
	.info {
		width: 40%;
		max-width: 560px;
		left: auto;
	}
}


/* ----------------- INFO DIV FOOTER ----------------- */


.invert {
	filter: invert(100%);
	opacity: 0.3;
}

@media only screen and (max-width: 600px) {
	.invert-s {
		filter: invert(100%);
	}
}

.closeicon {
	width: 50%;
}

#whiteclose {
	/* filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(169deg) brightness(106%) contrast(100%); */
	opacity: 1;
}



/*--------------- HAMBURGER ---------------*/

.hamburgerclosed {
	cursor: pointer;
}



/*--------------- MODAL ------------*/

.modal {
  display: none;
  position: fixed;
  z-index: 5;
  /* padding: 70px; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  z-index: 5;
  box-sizing: border-box;
  overflow: hidden;
}

.video-responsive{
	position: relative;
  	overflow: hidden;
  	width: 100%;
  	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.video-responsive iframe{
    position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: black;
  max-width: 1200px;
  margin: auto;
  padding: 0;
  height: 100%;
  text-align: center;
}

.modalimage {
	margin: auto;
	max-height: 100%;
}

/* The Close Button */
.close {
  color: white;
  position: fixed;
  top: 5px;
  right: 10px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

/* Number text (1/3 etc) */
img {
  margin-bottom: -4px;
}



/* ----------- ANNOTATIONS ----------- */

path {
	fill: none;
  }

.domain {
	display: none;
  }

 .annotation:not(.above):not(.anomaly) path {
   stroke-dasharray: 1,3;
 }

 .annotation.anomaly path {
   stroke-width: 2px;
 }

 .annotation-note-bg {
   fill: rgba(0, 0, 0, 0);
 }

 .annotation-note-title {
   font-weight: bold;
 }

 text.title {
   font-size: 1.2em;
   font-weight: bold;
 }



 


  /* ----------------- SAFARI MESSAGE ----------------- */
  .safarimessage {
	display: none;
	width: fit-content;
	position: fixed;
	max-width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	top: 80px;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  @media only screen and (max-width: 600px) {
	.safarimessage{
		left: 12px;
		right: 12px;
		transform: none;
	}
}

@media only screen and (min-width: 600px) and (max-width: 899px) {
	.safarimessage{
		top: 100px;
	}
}


/* ----------- CHANGELOG ---------- */

.changelogbody {
	display: flex;
	justify-content: center;
	overflow-y: visible!important;
}

.divider {
	background-color: var(--surface700);
	width: 100%;
	height: 1px;
	margin-top: 48px;
	margin-bottom: 16px;
}

.changelogvideo {
	width: 100%;
	height: auto;
}



/* ----------- MODEL ---------- */
.modelbody {
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-y: visible;
	font-size: 1.1rem;
}

.menu {
	position: absolute;
	width: 100%;
	max-width: 800px;
	top: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgb(255,255,255,0.6)
}

.menulink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; 
}

.menulink:hover {
	cursor: pointer;
}

.menulink:hover img{
	opacity: 1;
}

.menulink:hover .model-headerlogo-title{
	color: var(--surface50);
}

.menu a {
	color: rgb(255, 255, 255, 0.7);

}  

.model-headerlogo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.menu img {
	width: 32px;
	height: 32px;
	opacity: 0.7;
}

.model-headerlogo-title {
	font-size: 1.2rem;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-weight: 400;
	color: rgb(255,255,255,0.6);
}

.secondarytextcolor {
	color: var(--surface400);
}

.model-headersubtitle {
	font-size: 0.8rem;
	display: flex;
}

.model-imageheader {
	width: 100%;
	display: flex;
	justify-content: center;
	background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background-color: var(--red);
}

.model-imageheader img{
	margin-top: 240px;
	margin-bottom: 30px;
	max-width: 600px;
	height: auto;
}

.model-imageheader-year {
	position: absolute;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-weight: 500;
	top: 120px;
	letter-spacing: -3%;
	font-size: 200px;
	background: -webkit-linear-gradient(rgb(255,255,255, 0.2), rgb(255,255,255, 0));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 700px) {
	.model-imageheader img{
		max-width: 100%;
	}

	.model-imageheader-year {
		font-size: 160px;
	}
  }

.model-content {
	max-width: 800px;
	padding: 4em 20px;
	box-sizing: border-box;
	width: 100%;
}

.model-modelname {
	font-size: 2.5rem;
	margin-bottom: 16px;
}

.model-submodelname {
	font-size: 1.6rem;
	margin-bottom: 32px;
}

.secondaryinfo-model {
	border-radius: 8px;
	margin-top: 64px;
}

.model-description {
	margin: 64px 0px;
}

.model-description p{
	font-size: 1.1rem!important;
	line-height: 2rem;
}

.model-buttons{
	display: flex;
	gap: 16px;
}

@media (max-width: 700px) {
	.model-buttons{
	flex-direction: column;
	}
  }

.primarybutton {
	display: inline-flex;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 4px;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px -1px 1px 0px rgba(0, 0, 0, 0.20) inset, 0px 1px 1px 0px rgba(255, 255, 255, 0.10) inset;
}

.secondarybutton {
	display: inline-flex;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 4px;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px -1px 1px 0px rgba(0, 0, 0, 0.20) inset, 0px 1px 1px 0px rgba(255, 255, 255, 0.05) inset;

}

.footer {
	margin: 64px 0px;
	padding: 12px 16px;
	border-radius: 8px;
}


/* ----------- MODEL INDEX ---------- */

.modelbody-indexcontent {
	margin: 120px 0px;
	padding: 0px 16px;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;

}

.modelindex-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.modelindex-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 24px 0px;
}

.modelindex-groupcontent {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.modelindex-group .modelindex-item {
	margin-left: 12px;
}

.modelindex-modeltitle {
	font-size: 1rem;
}

.modelindex-item {
	display: flex;
	align-items: center; /* Center items vertically, if needed */
	white-space: nowrap; /* Prevent wrapping within the flex container */
	overflow: hidden; /* Prevent overflow from making the container wider */
	gap: 12px;
  }

.modelindex-year, .modelindex-model, .modelindex-submodel {
	margin: 0;
	padding: 0; /* Optional: add some horizontal padding */
  }
  
  .modelindex-model {
	min-width: min-content; /* Take minimum width of its content */
  }
  
  .modelindex-submodel {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; /* Prevent text from wrapping */
	flex-grow: 1; /* Allow it to take remaining space */
  }