#myItem1 {
	position: fixed; /* or absolute */
	top: 50%;
	left: 50%;
  }
.spinner {
	animation: rotator 2.0s linear infinite;
}
@keyframes rotator {
	0% {
		transform: rotate(0deg);
   }
	100% {
		transform: rotate(270deg);
   }
}
.path {
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	animation: dash 2.0s ease-in-out infinite, colors 3.0s ease-in-out infinite;
}
@keyframes colors {
	0% {
		stroke: #4285f4;
   }
	25% {
		stroke: #de3e35;
   }
	50% {
		stroke: #f7c223;
   }
	75% {
		stroke: #1b9a59;
   }
	100% {
		stroke: #4285f4;
   }
}
@keyframes dash {
	0% {
		stroke-dashoffset: 187;
   }
	50% {
		stroke-dashoffset: 46.75;
		transform: rotate(135deg);
   }
	100% {
		stroke-dashoffset: 187;
		transform: rotate(450deg);
   }
}

/* ---------------------------- */
/* ----------- GPT ------------ */
/* ---------------------------- */
#loader {
  position: fixed; 
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
	transition: all 0.2s;
}

#loader_logo {
  width: 100px; /* You can adjust this */
  height: 100px; /* You can adjust this */
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
	display: flex;
	margin: 0 auto;
	filter: invert(0.9);
}

#loader_text {
  margin-top: 10px;
  color: rgb(205,205,205);
  font-size: 20px;
}
#progress-bar-container{
	width: 100%;
	/* background-color: rgba(0, 0, 0, 0.25); */
	padding: 6px;
  border-radius: 30px;
	background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 1px rgba(255, 255, 255, 0.08);
}
#progress-bar {
	height: 20px;
	width: 0%;
	/* background-color: green; */
	transition: width 0.1s linear; /* Add this line */
	background-color: lightseagreen;
	border-radius: 30px;

}