@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
  background: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  height: 100%;
  width: 100%;
}

.Fastmenu {
  display: none;
  position: absolute;
  height: 35vh;
  width: 25vh;
  background: #161D20;
  left: 80%;
  top: 10%;
  border-radius: 10px;
}

.headerFastMenu {
  position: absolute;
  width: 95%;
  height: 15%;
  background: #092E67;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.aykLogoLitle {
  width: 8vh;
  height: 4vh;
}

#nameLitleMenu, #nameLitleMenu1, #nameLitleMenu2 {
  position: absolute;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6vw;
  font-weight: 800;
  right: 22%;
  top: 17%;
}

.line {
  position: absolute;
  width: 40%;
  height: 1px;
  background: #ffffff6e;
  right: 19%;
  top: 50%;
}

#moneyLitleMenu, #moneyLitleMenu1, #moneyLitleMenu2 {
  position: absolute;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 0.6vw;
  right: 22%;
  top: 63%;    
}


.cercleLogo, .cercleLogoBig {
  position: absolute;
  width: 3.5vh;
  height: 3.5vh;
  border-radius: 50%;
  border: solid 1px #ffffff6e;
  right: 5%;
  top: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.userLogo {
  max-width: 90%; 
  max-height: 90%;
  border-radius: 50%;
}


.footerFastMenu {
  position: absolute;
  width: 100%;
  height: 15%;
  background: #092E67;
  border-radius: 0 0 10px 10px;
  bottom: 0;
}

.rentButtonLitleMenu {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 8vh;
  height: 2.5vh;
  top: 25%;
  left: 5%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rentButtonLitleMenu:hover {
  transform: scale(1.05);
}

.textButtonLitleMenu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7vw; 
  margin-left: 2vh;
  font-weight: 800;
  text-align: center;
}

.iconContainerLitleButton {
  position: absolute;
  width: 2vh;
  height: 2vh;
  left: 7%;

}

.seeMoreButtonLitleMenu {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 12vh;
  height: 2.5vh;
  top: 25%;
  right: 5%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex; 
  align-items: center;
  justify-content: center;
}

.seeMoreButtonLitleMenu:hover {
  transform: scale(1.05);
}


.iconContainerLitleButton2 {
  position: absolute;
  width: 2vh;
  height: 2vh;
  left: 5%;
}

.vehLitleContainer {
  position: absolute;
  top: 17%;
  width: 97%;
  height: 67%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.vehicleContainer {
  position: relative;
  width: 20vh;
  height: 3vh;
  background: #2b383d;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
  left: 4%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 300ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.vehicleContainer:hover {
  transform: scale(1.02);
}

.vehicleContainer.active {
  transform: scale(1.05);
  background: #093371;
}

.vehicleName, .vehiclePrice {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicleName {
  width: 40%;
  text-align: center;
  font-size: 0.6vw;
  margin-right: 10Px;
  width: 50%;
}

.vehiclePrice {
  width: 50%;
  text-align: center;
  background: #0066FF;
  border-radius: 5px;
  font-size: 0.6vw;
  height: 2vh;
}

::-webkit-scrollbar {
  width: 8px;
  transition: all 0.6s;
}

::-webkit-scrollbar-button:start {
  display: none;
}

::-webkit-scrollbar-button:end {
  display: none;
}

::-webkit-scrollbar-track {
  background-color: #d9d9d925;
  border-radius: 6px;
  transition: all 0.6s;
}

::-webkit-scrollbar-thumb {
  background-color: #0066FF;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #014cbd;
}

.vehicleList::-webkit-scrollbar-thumb {
  background-color: #87aca4;
  border-radius: 6px;

}

.vehicleList::-webkit-scrollbar-thumb:hover {
  background-color: #70a095;
}

.containerChoiceLitleMenu {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: #000000a9;
}

.choiceLitleMenuColor {
  display: none;
  position: absolute;
  height: 27vh;
  width: 24vh;
  background: #161D20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.headerFastMenuChoice {
  position: absolute;
  width: 95%;
  height: 20%;
  background: #092E67;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  padding-left: 5%;
  z-index: 1;
}

.footerFastMenuChoice {
  position: absolute;
  width: 100%;
  height: 20%;
  background: #092E67;
  border-radius: 0 0 10px 10px;
  bottom: 0;
}

.backButtonLitleMenu {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 8vh;
  height: 2.5vh;
  top: 25%;
  left: 5%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorChoiceButtonLitleMenu {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 12vh;
  height: 2.5vh;
  top: 25%;
  right: 5%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex; 
  align-items: center;
  justify-content: center;
}

.textBackLitleMenu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6vw; 
  margin-left: 2vh;
  font-weight: 800;
  text-align: center;
}

.textValidColorLitleMenu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.5vw; 
  margin-left: 2vh;
  font-weight: 800;
  text-align: center;
}

.backButtonLitleMenu:hover, .colorChoiceButtonLitleMenu:hover  {
  transform: scale(1.05);
}

.requestSectionLitleMenuChoice {
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  color: white;
  width: 20vh;
  text-align: center;
  font-size: 0.55vw; 
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);  
}

.colorPaletChoiceLitleMenu {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  background: #1e272b;
  width: 21vh;
  height: 7vh; 
  border-radius: 12px;
  top: 63%;
  left: 50%;
  padding: 2.5%;
  transform: translate(-50%, -50%);
  z-index: 2;
  justify-content: space-around; 
  align-items: center;
}

.colorPaletChoiceLitleMenu button {
  width: 2.65vh;
  height: 2.65vh;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 3px solid gray;
  cursor: pointer;
  transition: transform 0.3s;
  margin: 0.3vh; 
}

.colorButton button:hover {
  transform: scale(1.05);
}

.colorButton.active {
  transform: scale(1.1);
  outline: 3px solid #093371;
}

#greenColorLitle {
  background-color: #7AC943; 
}

#grayColorLitle {
  background-color: #6F6F6F; 
}

#darkBlueColorLitle {
  background-color: #1F4E79; 
}

#whiteColorLitle {
  background-color: #FFFFFF; 
}

#darkGreenColorLitle {
  background-color: #00A651;
}

#redColorLitle {
  background-color: #ED1C24; 
}

#orangeColorLitle {
  background-color: #F7941D; 
}

#yellowColorLitle {
  background-color: #FFD700; 
}

#pinkColorLitle {
  background-color: #EC008C; 
}

#darkColorLitle {
  background-color: #000000; 
}

#purpleColorLitle {
  background-color: #92278F; 
}

#lightBlueColorLitle {
  background-color: #00AEEF; 
}


.choiceLitleMenuTime {
  display: none;
  position: absolute;
  height: 26vh;
  width: 24vh;
  background: #161D20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.headerFastMenuChoiceTime {
  position: absolute;
  width: 95%;
  height: 20%;
  background: #092E67;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  padding-left: 5%;
  z-index: 1;
}

.footerFastMenuChoiceTime {
  position: absolute;
  width: 100%;
  height: 20%;
  background: #092E67;
  border-radius: 0 0 10px 10px;
  bottom: 0;
}

.requestSectionLitleMenuChoiceTime {
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  color: white;
  width: 20vh;
  height: 7vh;
  border-radius: 15px;
  background: #1e272b;
  text-align: center;
  font-size: 0.52vw; 
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);  
}

.timeChoiceLitleMenu {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e272b;
  width: 22vh;
  height: 3.5vh;
  border-radius: 12px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0 10px;
}

.iconRentalTime {
  position: absolute;
  width: 2.5vh;
}

.rentalTimeChoice {
  position: absolute;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  font-size: 0.6vw;
  width: 10vh;
  left: 17%;
}

.timeNegatif, .timePositif {
  position: relative;
  border-radius: 50%;
  left: 60%;
  border: none;
  width: 2.5vh;
  height: 2.5vh;
  background: #0066FF;
  transition: all 200ms;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.timePositif {
  left: 0%;
}

.timeNegatif:hover, .timePositif:hover {
  transform: scale(1.05);
}

.buttonTextLitle, .buttonTextLitle1 {
  color: white;
  font-size: 1vw;
  margin: 0;
  padding: 0;
}

.buttonTextLitle {
  position: absolute;
  margin-bottom: 3px;
}

.rentalTimeLitleMenu {
  position: absolute;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8vw;
  color: white;
  left: 17.5vh;
}

.rentalTimeLitleMenu.active {
  left: 17vh;
}

.textGoToRentLitleMenu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7vw; 
  margin-left: 2vh;
  font-weight: 800;
  text-align: center;
}

.notifications-container {
  position: fixed;
  top: 150%;
  left: 92%;
  transform: translate(-50%, -50%);
  width: 26.5vh;
  height: 200vh;
  overflow: visible;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.notification {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 4vh;
  margin-bottom: 10px;
  background-color: #161D20;
  color: white;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.notification.active {
  transform: translateX(0);
  opacity: 1;
}

.boxLogoNotif {
  width: 2.5vh;
  height: 2.5vh;
  background: #2b383d;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1vh;
  transform: translateY(-2.5px);
}

.notifLogoInfo {
  width: 1.9vh;
}

.notifText {
  margin-left: 2.5vh;
  font-size: 0.65vw;
  width: 70%;
}

.notifProgressBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3vh;
  background-color: #2b383d;
  overflow: hidden;
}

.progressBarFill {
  height: 100%;
  background-color: #0066FF;
  width: 0%;
}

.notifLogoError {
  width: 2.5vh;
}

.progressBarFill.error {
  background-color: #D32F2F; 
}

.bigMenu {
  display: none;
  position: absolute;
  width: 83.5vh;
  height: 50vh;
  background: #161D20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0px 3px 20px 0 #092E67;
}

.headerBigMenu {
  position: absolute;
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  padding-left: 3%;
  padding-top: 2%;
  z-index: 1;
}

.aykLogoBig {
  width: 18vh;
}

.welcomeMessageBox, .personnalInformation {
  position: absolute;
  left: 25%;
  top: 20%;
  width: 27.8vh;
  height: 9vh;
  background: #1e272b;
  border-radius: 10px;
  color: #ffffffb7;
  box-shadow: 0px 3px 0 0 #092E67;
  font-family: "Raleway", sans-serif;
}

.welcomeMessageTitle {
  position: absolute;
  left: 5%;
  top: -35%;
  font-weight: 500;
  font-size: 0.9vw;
}

#playerNameMessageBox {
  color: white;
  font-weight: 500;
}

.welcomeMessagetext {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 80%;
  font-size: 0.6vw;
  font-weight: 500;
  overflow: hidden;
}

.personnalInformation {
  width: 17vh;
  left: 58%;
  overflow: hidden;
  font-family: "DM+Sans", sans-serif;
  font-weight: 750;
  color: white;
}

.personnalIcon {
  position: absolute;
  width: 2.65vh;
  left: 5%;
}

.surnameBox, .nameBox, .moneyBox  {
  position: absolute;
  width: 70%;
  height: 30%;
  top: 2%;
  overflow: hidden;
}

.nameBox {
  top: 34%;
}

.moneyBox {
  top: 66%;
}

.namePlayerBig, .playerMoneyBig {
  position: relative;
  left: 35%;
  top: -17%;
  font-size: 0.7vw;
  z-index: 3;
}

.doubleLine {
  position: absolute;
  width: 14vh;
  left: 36%;
  top: 48%;
  transform: rotate(65deg);
  border: 3px solid #0056d8;
  z-index: 1;
}

#line2 {
  left: 30%;
}

.cercleLogoBig {
  width: 3vh;
  height: 3vh;
  border: solid 2px #ffffff2f;
  left: 75%;
  top: 11%;
  overflow: visible;
}

.MenuButtonBig {
  position: absolute;
  width: 13vh;
  height: 2.5vh;
  left: 80%;
  background: #1e272b;
  border: none;
  font-family: "DM+Sans", sans-serif;
  color: white;
  font-size: 0.45vw;
  border-radius: 10px;
  cursor: pointer;
  transition: all 300ms;
}

.MenuButtonBig:hover {
  transform: scale(1.05);
  background: #192024;
}

#leaveMenuButton {
  top: 18%;
}

#webSiteButton {
  top: 76%;
}

.textButtonBig {
  position: absolute;
  margin-left: 0.5vh;
  font-weight: 850;
  top: -5%;
}

.buttonIconBig {
  position: absolute;
  width: 2.5vh;
  top: 50%;
  left: 92%;
  transform: translate(-50%, -50%);
}

.actifVehicle {
  position: absolute;
  width: 30vh;
  height: 20vh;
  left: 21.5%;
  top: 46.5%;
  transform: translate(-50%, -50%);
}

.vehcileContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(./img/background/vehBackground.png);
  background-size: cover;
  border: solid 2px #80808091;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicleImage {
  position: absolute;
  width: 25vh;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.vehcileNameBig {
  position: absolute;
  font-size: 0.7vw;
  font-family: "DM+Sans", sans-serif;
  color: white;
  font-weight: 900;
  left: 5%;
  top: -2%;
}

.brandVehicle {
  position: absolute;
  font-size: 0.35vw;
  font-family: "DM+Sans", sans-serif;
  color: #ffffff77;
  font-weight: 400;
  left: 5%;
  top: 11%;
}

.detailsVehicle {
  position: absolute;
  width: 33vh;
  height: 12vh;
  background: #1e272b;
  left: 60.5%;
  top: 38.5%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  color: white;
  font-size: 0.6vw;
  font-family: "DM+Sans", sans-serif;
  font-weight: 900;
  display: flex;
  flex-wrap: wrap;
}

.detailContainer {
  position: relative;
  width: 97%;
  height: 2.4vh;
  top: 3%;
  left: 1%;
}

.detailsIcon {
  position: absolute;
  width: 1.5vh;
  left: 1%;
  top: 5%;
}

.detailTitle {
  position: absolute;
  left: 7%;
  top: -45%;
}

.lineContainer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  height: 0.5vh;
  bottom: 2%;
  left: 1%;
}

.detailLine {
  position: relative;
  width: 19%; 
  height: 60%;
  background: #424242;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.detailLine.active {
  background-color: #0056d8;
  width: 19%; 
}

.choiceTimeBig {
  position: absolute;
  width: 33vh;
  height: 3vh;
  left: 60.5%;
  top: 55.25%;
  transform: translate(-50%, -50%);
  background: #1e272b;
  border-radius: 10px;
  color: white;
  font-size: 0.7vw;
  font-family: "DM+Sans", sans-serif;
  font-weight: 900;
}

.iconTime {
  position: absolute;
  width: 2.7vh;
  left: 7%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rentalTimeText {
  position: absolute;
  left: 14%;
  top: -17%;
}

.timeNegatifBig, .timePositifBig {
  position: absolute;
  border-radius: 50%;
  border: none;
  width: 2.3vh;
  height: 2.3vh;
  background: #0066FF;
  transition: all 200ms;
  cursor: pointer;
  font-size: 30px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeNegatifBig {
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.timePositifBig {
  left: 85%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.buttonTextBig {
  font-size: 1vw;
  font-weight: 900;
  margin: 0; 
}

.buttonTextBigNeg{
  position: absolute;
  font-size: 1vw;
  font-weight: 900;
  margin: 0; 
  top: -10%;
}

.rentailDirectTime {
  position: absolute;
  left: 70%;
  top: 55%;
  transform: translate(-50%, -50%);
  font-size: 1.1vw;
  font-weight: 700;
}

.colorChoiceBig {
  position: absolute;
  width: 48vh;
  height: 3.7vh;
  background: #1e272b;
  left: 40.5%;
  top: 60%;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; 
  align-items: center;
}

.colorPalet {
  width: 2.3vh;
  height: 2.3vh;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 3px solid gray;
  cursor: pointer;
  transition: transform 0.3s;
  margin: 0.2vh; 
}

.colorPalet:hover {
  transform: scale(1.05);
}

.colorPalet.active {
  transform: scale(1.1);
  outline: 3px solid #ff5e00;
}

#orangeColor {
  background: #a56c01;
}

#yellowColor {
  background: #f8e800;
}

#pinkColor {
  background: #e100ff;
}

#blackColor {
  background: #000000;
}

#purpleColor {
  background: #6601da;
}

#cyanColor {
  background: #00cfc5;
}

#redColor {
  background: #ff0000;
}

#greenlightColor {
  background: #b3ff00;
}

#grayColor {
  background: #6d6d6d;
}

#greenColor {
  background: #00bd00;
}

#blueColor {
  background: #00b9e7;
}

#whiteColor {
  background: #ffffff;
}

.bigBtnRent {
  position: absolute;
  width: 13.5vh;
  height: 5.6vh;
  left: 82%;
  top: 26.5%;
  border-radius: 10px;
  border: none;
  background: #1e272b;
  color: white;
  font-size: 0.9vw;
  font-family: "DM+Sans", sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: all 300ms;
}

.bigBtnRent:hover {
  transform: scale(1.05);
}

#rentCarBtnBig:hover .lineColorBtn {
  width: 100%;
  border-radius: 10px;
  background: #00d4007e;
}

.bigBtnRent:hover .lineColorBtn {
  width: 100%;
  border-radius: 10px;
  background: #00ffffad;
}

.lineColorBtn {
  position: absolute;
  height: 100%;
  width: 17%;
  background: #0066FF;
  left: 0;
  border-radius: 10px 0 0 10px;
  transition: all 300ms ease-in-out;
}

.textBigBtnRent {
  position: relative;
  left: 52%;
  top: -20%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 100ms;
}

.bigBtnRent:hover .textBigBtnRent {
  opacity: 0;
}

#rentCarBtnBig {
  top: 39%;
}

.iconBtnBig {
  position: relative;
  width: 1.8vh;
  left: -37.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 300ms;
}

.bigBtnRent:hover .iconBtnBig {
  width: 3.3vh;
  left: 12.5%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.moneyCalculRent {
  position: absolute;
  width: 13.5vh;
  height: 3.3vh;
  left: 82%;
  top: 52%;
  border-radius: 10px;
  border: none;
  background: #1e272b;
  color: white;
  font-size: 0.8vw;
  font-family: "DM+Sans", sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: all 300ms;
}

.rentPrice {
  position: absolute;
  left: 55%;
  top: 10%;
  transform: translate(-50%, -50%);
  font-size: 0.75vw;
  font-weight: 900;
  transition: all 300ms;
}

.iconMoney {
  position: absolute;
  width: 2.25vh;
  left: 8%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 300ms;
}

.bigListvehContainer {
  position: absolute;
  width: 92%;
  height: 200px;
  left: 50%;
  top: 83.5%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 10;
}

.vehContainer {
  position: relative;
  background: url(./img/background/vehBackground.png);
  background-size: cover;
  border: solid 2px #80808065;
  width: 18vh;
  height: 12vh;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  margin-right: 2vh;
  flex: 0 0 auto; 
  cursor: pointer;
}
.vehTitle {
  position: absolute;
  left: 3%;
  top: -7%;
  font-size: 0.7vw;
}

.brandTitleBig {
  position: absolute;
  left: 4%;
  top: 14%;
  font-size: 0.4vw;
  font-family: "DM+Sans", sans-serif;
  color: #ffffff77;
  font-weight: 400;
}

.iconSeeVehicle {
  position: absolute;
  top: -5%;
  left: 90%;
  width: 2.6vh;
}

.imgCarListBig {
  position: absolute;
  width: 14vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.iconMoneyBigList {
  position: absolute;
  top: 83%;
  left: 55%;
  width: 1.8vh;
}

.priceCarListBig {
  position: absolute;
  top: 75%;
  left: 70%;
  font-size: 0.65vw;
}

.arrowBefore {
  position: absolute;
  width: 2.8vh;
  height: 2.8vh;
  left: 0.5%;
  top: 82%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 300ms;
}

.arrowBefore:hover {
  transform: scale(1.1);
}

.arrowAfter {
  position: absolute;
  width: 2.8vh;
  height: 2.8vh;
  left: 80.5vh;
  top: 82%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 300ms;
  z-index: 11;
}

.arrowAfter:hover {
  transform: scale(1.1);
}

.btnImgArrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.5vh;
}

.actifVehicle .vehcileContainer {
  transition: opacity 0.5s ease-in-out;
}

.vehcileContainer.fade-in {
  opacity: 0;
}

.vehcileContainer.fade-in.show {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.vehcileContainer.fade-out {
  opacity: 1;
}

.vehcileContainer.fade-out.hide {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.vehContainer {
  transition: opacity 300ms ease; 
}

.timeCountContainer {
  position: absolute;
  right: 5%;
  bottom: 3vh;
  width: 15vh;
  height: 3vh;
  border: solid 1px #0066FF;
  background: #161D20;
  border-radius: 0.5vh;
  display: none;
  color: white;
  font-size: 0.6vw;
  font-family: "DM+Sans", sans-serif;
}


.textContainer {
  display: flex;
  position: absolute;
  justify-content: center; 
  align-items: center;
  width: 100%;
  height: 100%;
}

.timeRemainingText {
  position: relative;
}

.backPreviewButton {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);
  width: 23vh;
  height: 5vh;
  background: #161D20;
  border-radius: 10px;
  border: none;
  opacity: 0; 
  cursor: pointer;
  transition: all 300ms;
  transition: opacity 1000ms;
  color: white;
  font-size: 0.7vw;
  font-family: "DM+Sans", sans-serif;
}

.backPreviewButton.active {
  opacity: 1; 
}

.contentContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.backPreviewButton:hover {
  background: #643434;
  transform: translate(-50%, -50%) scale(1.05);
}

.previewBackIcon {
  width: 3.5vh;
}

.previewBackText {
  font-weight: 900;
  margin-left: 1vh;
}

/* ################################
##########BACK MENU#############
################################ */


.backVehicle {
  display: none;
  position: absolute;
  height: 25vh;
  width: 24vh;
  background: #161D20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.requestSectionLitleMenuBack {
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: white;
  padding: 0.5vh;
  width: 20vh;
  height: 7vh;
  border-radius: 15px;
  background: #1e272b;
  text-align: center;
  font-size: 0.6vw; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}

.noBackVehBtn {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 8vh;
  height: 2.5vh;
  top: 25%;
  left: 10%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yesBackVehBtn {
  position: absolute;
  border: none;
  background: #161D20;
  color: white;
  width: 8vh;
  height: 2.5vh;
  top: 25%;
  right: 10%;
  cursor: pointer;
  border-radius: 8px;
  transition: all 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noBackVehBtn:hover, .yesBackVehBtn:hover {
  transform: scale(1.05);
}