@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');



body {
background-color: #99F0F0;
padding: 0px;
margin: 0px;
background-image: url(menuBlurred.svg);
background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    margin: 0;
	    box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
}

:root {
	--base-border-radius: 10px;
}

 button:active {
	 border-radius: calc(var(--base-border-radius) + 20px);
 }
 p {
	 font-weight: 700;
 }

p, a, h1, small, h2, textarea, button, div {
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}

#titleMainIndex {
	font-size: 60px;
	font-weight: 500;
}


.mainTopIndexDiv {
	width: 100%;
	height: 100vh;
}

.mainIndexTitle {
	font-size: 50px;
	font-width: 600;
}

.mainIndexDiv {
	height: 25vh;
	display: block;
	border-radius: 10px;
}

#mainTopBar {
	width: 100%;
    box-sizing: border-box;
	position: fixed;
	top: 0;
	border-radius: 0px;
	background-color: #EE8467;
	border-bottom: 3px solid #D1745A;
	left: 0;
	z-index: 9387654;
}

#formButton {
float: right;
margin-right: 5px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
background-color: #EE8467;
font-size: 15px;
transition: 0.15s ease;
border: none;
}
#formButton:hover {
background-color: #D1745A;
}

.AllOneBarButton {
margin-left: 5px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
background-color: #EE8467;
font-size: 15px;
float: left;
border: none;
transform: translateX(-800px);
transition: 0.15s ease;
}
.AllOneBarButton:hover {
background-color: #D1745A;
border-bottom: 3px solid #6E8BFF;
}



.infoIndexing {
	border: 3px solid #93C77E;
	background-color: #BDFFA1;
	width: 80%;
	height: 170px;
	font-weight: 800;
	border-radius: 10px;
	padding: 4px;
	font-size: 30px;
}

.positionBoard {
	width: 40%;
	overflow: auto;
	background-color: #FFF6E3;
	border: 3px solid #C7C0B1;
	font-size: 30px;
	padding: 10px;
	border-radius: 10px;
	margin-left: 40px;
	margin-bottom: 10px;
}

.helpTitle {
	background-color: #FFF6E3;
	border: 3px solid #C7C0B1;
	padding: 4px;
	width: 40%;
	border-radius: 10px;
	margin-left: 40px;
}

.AIImage {
	width: 45%;
	height: 50vh;
	float: right;
	margin-top: -400px;
	margin-right: 90px;
}


.infoLab {
	margin-top: 30px;
	font-size: 18px;
}

.ExperimentLinkButton {
margin-top: 45px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
border: 3px solid #D99393;
border-radius: 5px;
background-color: #FFADAD;
font-size: 20px;
transition: 0.15s ease;
}
.ExperimentLinkButton:hover {
background-color: #B07777;
border: 3px solid #A16D6D;
}

.ExperimentLinkButton2 {
margin-top: 15px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 4px;
font-weight: 700;
border: 3px solid #4ABA7B;
border-radius: 5px;
background-color: #6ED497;
font-size: 20px;
transition: 0.15s ease;
margin-top: 40px;
}
.ExperimentLinkButton2:hover {
  background: linear-gradient(270deg, #00008B, #FFC0CB);
  background-size: 600% 600%;
  border: 3px solid; /* Set border size */
  border-image: linear-gradient(270deg, #000066, #FFA6B2) 1; /* Border gradient */
  -webkit-animation: GradientFlow 15s ease infinite;
  -moz-animation: GradientFlow 15s ease infinite;
  animation: GradientFlow 15s ease infinite;
  border-radius: 10px solid;
  color: white;
}

.contactUsDiv {
	box-sizing: border-box;
	margin: auto;
}

@-webkit-keyframes GradientFlow {
  0% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
  50% {
    background-position: 100% 50%;
    border-image-source: linear-gradient(270deg, #FF9CB0, #000066); /* Border gradient flow */
  }
  100% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
}

@-moz-keyframes GradientFlow {
  0% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
  50% {
    background-position: 100% 50%;
    border-image-source: linear-gradient(270deg, #FF9CB0, #000066); /* Border gradient flow */
  }
  100% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
}

@keyframes GradientFlow {
  0% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
  50% {
    background-position: 100% 50%;
    border-image-source: linear-gradient(270deg, #FF9CB0, #000066); /* Border gradient flow */
  }
  100% {
    background-position: 0% 50%;
    border-image-source: linear-gradient(270deg, #000066, #FFA6B2); /* Darker gradient for border */
  }
}


.ExperimentLinkButton3 {
margin-top: 45px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
border: 3px solid #4347BF;
border-radius: 5px;
background-color: #5459F0;
font-size: 20px;
transition: 0.15s ease;
color: white;
}
.ExperimentLinkButton3:hover {
background-color: #4145BA;
border: 3px solid #3A3DA6;
}

.ExperimentLinkButton4 {
margin-top: 20px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
border-radius: 5px;
background-color: #D9DE39;
border: 3px solid #000000;
font-size: 20px;
transition: 0.15s ease;
}

.betaButton {
float: right;
margin-right: 5px;
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
height: 48px;
padding: 2px;
font-weight: 700;
background-color: #EE8467;
font-size: 15px;
transition: 0.15s ease;
border: none;
}
.betaButton:hover {
background-color: #D1745A;

}

.notifyStorage {
	position: fixed;
	bottom: 1%;
	right: 5%;
	background-color: #E0E868;
	border: 3px solid #000000;
	max-width: 40%;
	border-radius: 10px;
	padding: 10px;
}

.infoDiv {
	width: 97%;
	height: 30vh;
	background-color: #5F82E3;
	border: 3px solid #4B66B3;
	padding: 5px;
	font-size: 0;
	opacity: 0;
	border-radius: 10px;
	gap: 10px;
	display: flex;
	flex-direction: row;
	margin: auto;
align-items: flex-start;
box-sizing: border-box;
flex: 1;
}

.privacyDiv {
	background-color: #D296FF;
	border: 3px solid #B581DB;
font-size: 15px;
	display: flex;
	flex-direction: column;
		border-radius: 10px;
		padding: 5px;
		margin-bottom: 1px;
				overflow: auto;
				flex: 1;
height: 100%;
box-sizing: border-box;
}
.cheapDiv {
	background-color: #85C2E6;
	border: 3px solid #6D9FBD;
	padding: 5px;
		display: flex;
	flex-direction: column;
font-size: 15px;
		border-radius: 10px;
		margin-bottom: 1px;
		overflow: auto;
flex: 1;
height: 100%;
box-sizing: border-box;

}

.bothDiv {
		background-color: #FFCD9C;
	border: 3px solid #DBB086;
font-size: 15px;
		border-radius: 10px;
			display: flex;
	flex-direction: column;
		padding: 5px;
				margin-bottom: 1px;
		overflow: auto;
flex: 1;
box-sizing: border-box;
height: 100%;
}

.AllOneLabsContainer {
	background-color: #FF8F8F;
	border: 3px solid #C97171;

}
.AllOneLabsContainer:hover {
	background-color: #D45959;
	border: 3px solid #B34B4B;
}


.AllOneAIContainer {
	background-color: #35DE6D;
	border: 3px solid #2DBD5D;

}
.AllOneAIContainer:hover {
	background-color: #29AB54;
	border: 3px solid #24964A;
}

.AllOneWebContainer {
	background-color: #A3B9FF;
	border: 3px solid #7F90C7;
}
.AllOneWebContainer:hover {
	background-color: #7989BD;
	border: 3px solid #626F99;
}

.AllOneStorageContainer {
	border: 3px solid #575757;
	background-color: #F9FF42;
}
.AllOneStorageContainer:hover {
	background-color: #D9DE39;
	border: 3px solid #000000;
}

.softwarePanel {
width: 98%; 
    background-color: #5F82E3;
    border: 3px solid #4B66B3;
    padding: 10px;
    font-size: 0; 
    border-radius: 10px;
    display: flex;
	opacity: 0;
	margin-top: 300px;
flex-wrap: wrap;
flex-direction: row;
gap: 10px;
display: flex;
padding: 7px;
box-sizing: border-box;
height: auto;

}

.AllOneCreatorContainer, .AllOneAIContainer, .AllOneWebContainer, .AllOneStorageContainer {
    border-radius: 10px;
    padding: 10px;
    font-size: 15px;
    display: inline-block;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    height: 100vh;
    overflow: hidden;
		width: 100%;

}

.motoP {
	font-size: 60px;
	font-weight: 800;
}

.profileDiv {
	background-color: #3DFFC5;
	border: 3px solid #30C99C;
	border-radius: 10px;
	padding: 5px;
	opacity: 0.0;
  box-sizing: border-box;
}

.letterInfoProfileDiv {
	width: 20%;
	padding: 5px;
	float: left;
	height: 95%;
}

.connectionsDiv {
display: flex;
margin: auto;
transform: translateX(20%);
margin-top: 40px;
 max-width: 30%;
  height: auto;
    opacity: 0;

}

.signInButton {
	font-size: 160%;
	font-weight: 800;
	height: 100%;
	border-radius: 5px;
	transition: 0.15s ease;
   white-space: nowrap;
	background-color: #94C2FF;
	border: 3px solid #7CA3D6;
	margin-top: 5%;
	box-sizing: border-box;
	padding: 5px;
	display: inline-block;
}

.signInButton:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}



.cookieBar {
width: 50%;
height: 40px;
background-color: black;
border-radius: 10px;
position: fixed;
bottom: 0.5%;
left: 27%;
color: white;	
z-index: 99999999;
display: flex;

}

#infoDiv1 {
	opacity: 0;
}

#infoDiv2 {
	opacity: 0;
}

.footBar {
	margin: auto;
}

.exampleIMG {
		margin: 5;
		width: 30%;
		height: 30%;
opacity: 0;
border-radius: 10px;
}

.imgHolder {
  box-sizing: border-box;
  }
  
  .divAnimationHolder {
	  width: 100%;
	  display: flex;
	  flex-direction: row;  
  }
  
 .allOneDiv {
	 display: flex;
margin: auto;
transform: translateX(-20%);
 max-width: 30%;
  height: auto;
  opacity: 0;

 }
 
 .wording {
	 opacity: 0;
 }
 .AllOneTechStart {
	max-width: 100%;
	height: auto;
 }
 
 .latestProducts {
	 width: 90%;
	 padding: 7px;
	 box-sizing: border-box;
	 background-color: #4C51D9;
	 border: 3px solid #D448D9;
	 border-radius: 10px;
	 display: flex;
	 flex-direction: row;
	 margin-top: 50px;
 }
 
 .latestInfo {
	 width: 48%;
	 padding: 5px;
	 box-sizing: border-box;
 	 display: flex;
	 margin: auto;
	 flex-direction: column;
 }
 
 .buttonCreate {
	 width: 40%;
	 margin: auto;
	display: flex;
	 font-size: 25px;
	 font-weight: 800;
	 border: 3px solid #BB1AC7;
	 background-color: #454AC7;
	 color: white;
	 transition: 0.15s ease;
	border-radius: 10px;

 }
 
 .buttonCreate:hover {
	 border: 3px solid #454AC7;
	 background-color: #BB1AC7;
 }
 
 .imageHolder {
	 width: 48%;
	 display: flex;
	 margin: auto;
 }
 
 .exampleIMG2 {
	 max-width: 100%;
	 max-height: 100%;
	 border-radius: 10px;
 }
 
.headerTop {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #BDEBFF;
	height: 7vh;
	display: flex;
	flex-direction: row;
	border: none;
	border-bottom: 3px solid #A6CFE0;
	z-index: 1000000;
}

.imageSVG {
	flex-direction: flex-start;
	height: 100%;
	width: auto;
}

.statusWords {
	font-weight: 800;
	font-size: 140%;
	margin-left: 4%;
	margin: auto;
	flex-direction: flex-end;
}

.imgHolder {
	height: 100%;
	display: inline-block;
	flex-direction: flex-start;
	display: flex;
	flex-direction: row;
	padding-right: 10px;
	gap: 10px;
	box-sizing: border-box;
}

.managementState {
	position: fixed;
	top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  background-color: #B9E2FA;
  border: 3px solid #A8CDE3;
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
  max-height: 80%;
  overflow: auto;
}

.managementGenericOutage {
	width: 80%;
	padding: 15px;
	box-sizing: border-box;
	display: flex;
	margin: auto;
	flex-direction: column;
	background-color: #E6F6FF;
	border: 3px solid #CDDBE3;
	border-radius: 5px;
	
}

.headDiv {
	display: flex;
		margin: auto;
		gap: 10px;
		box-sizing: border-box;
}

.titleP {
	font-weight: 500;
	font-size: 100%;
}

.buttonProducts {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	height: 100%;
	border: 3px solid #7CA3D6;
	border-radius: 3px;
	transition: 0.15s ease;
   white-space: nowrap;
	opacity: 0;
	box-sizing: border-box;
}

.buttonMiniProducts {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	padding: 15px;
	width: 100%;
	box-sizing: border-box;
	border: 3px solid #7CA3D6;
	border-radius: 5px;
	transition: 0.15s ease;
   white-space: nowrap;
   	margin-top: 1%;
	margin-bottom: 1%;

}

.buttonProducts:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.buttonHolder {
	position: absolute;
	right: 0.5%;
	top: 12.5%;
	height: 75%;
	display: flex;
	flex-direction: row;
	gap: 3px;
	max-width: 70%;
	overflow-y: hidden;
	overflow: auto;
}

.seperator {
	height: 100%;
	width: 1px;
	margin-left: 5px;
	margin-right: 5px;
	border: 2px solid #7CA3D6;
	border-radius: 5px;
	background-color: #7CA3D6;
	box-sizing: border-box;

}

.productButtonHidden {
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	height: 100%;
	border: 3px solid #7CA3D6;
	border-radius: 5px;
	transition: 0.15s ease;
   white-space: nowrap;
   display: none;

}

.menuButtonHolder {
	position: fixed;
	top: 8vh;
	right: 0.5%;
	
}

.headerCookie {
	width: 50%;
	position: fixed;
	bottom: 0.3%;
	left: 25%;
	padding: 8px;
	background-color: #7ef2d7;
	border: 3px solid #5ec4ad;
	box-sizing: border-box;
	z-index: 100000;
	font-weight: 800;
	border-radius: 8px;
	animation-name: headerAnimation;
    animation-timing-function: ease-in ease-out;
    animation-duration: 0.3s;
}

@keyframes headerAnimation {
	0% {bottom: 0.3%;}
	50% {bottom: 1%;}
	100% {bottom: 0.3%;}
}
.displayUnblurred {
	box-sizing: border-box;
	padding: 10%;
	margin-top: 5%;
	width: 80%;
	border-radius: 10px;
	border: 3px solid #7DC4C4;
	background-image: url(LandingPage.png);
background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	background-color: #89D6D6;
	opacity: 0;
}

@media (max-width: 900px) { 
.infoDiv { 
flex-direction: column;
height: 130vh;
 }
 }

.genericShapeIntro {
	margin-top: 10vh;
	filter: blur(10px);
}
.genericDivTopDiv {
	display: flex;
	width: 40%;
	height: 100%;
	padding: 5px;
	
	
}

.productDiv {
	width: 78%;
	margin: auto;
	height: auto;
	display: flex;
	flex-direction: row;
}

.genericDivTopDiv {
	flex: 0.5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.productListDiv {
	width: 70%;
	padding: 2px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.imageShow {
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	background-color: #9af5e4;
	border: 3px solid #6ebaac;
	border-radius: 4px;

}

.textDiv {
	padding: 5px;
	background-color: #9af5e4;
	border: 3px solid #6ebaac;
	box-sizing: border-box;
	border-radius: 4px;
}

.buttonNew {
	width: 100%;
	padding: 10px;
		background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	height: 100%;
	border: 3px solid #7CA3D6;
	border-radius: 3px;
	transition: 0.15s ease;
   white-space: nowrap;
	box-sizing: border-box;
}

.buttonNewM {
	width: 100%;
	padding: 10px;
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	border: 3px solid #7CA3D6;
	border-radius: 3px;
	transition: 0.15s ease;
   white-space: nowrap;
	box-sizing: border-box;
	margin-top: 5px;
}
.buttonNew:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.buttonNewM:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.buttonNewO {
	padding: 10px;
		background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	width: 100%;
	border: 3px solid #7CA3D6;
	transition: 0.15s ease;
   white-space: nowrap;
	box-sizing: border-box;
	border-radius: 4px 4px 8px 4px;

}

.buttonNewP {
	width: 100%;
	padding: 10px;
	background-color: #94C2FF;
	font-size: 90%;
	font-weight: 800;
	border: 3px solid #7CA3D6;
	transition: 0.15s ease;
   white-space: nowrap;
	box-sizing: border-box;
	border-radius: 4px 4px 4px 8px;
}

.buttonNewO:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.buttonNewP:hover {
	background-color: #7397C7;
	border: 3px solid #5E7CA3;
}

.genericDivList {
	flex: 1;
	box-sizing: border-box;
}

.imageGenericUseProduct {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	border-radius: 4px;
}