@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.bg-login {
	background: linear-gradient(-45deg, #ced108, #23d5d5, #07526d,#012c31);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
            
            
.content-4-1 .btn:focus,
.content-4-1 .btn:active {
  outline: none !important;
}

.content-4-1 .width-left {
  width: 0%;
}

.content-4-1 .width-right {
  width: 100%;
  height: 100%;
  padding: 8rem 2rem;
  background-color: #fcfdff;
}

.content-4-1 .centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.content-4-1 .right {
  width: 100%;
}

.content-4-1 .title-text {
  font: 600 1.875rem/2.25rem Poppins, sans-serif;
  margin-bottom: 0.75rem;
}

.content-4-1 .caption-text {
  font: 400 0.875rem/1.75rem Poppins, sans-serif;
  color: #a8adb7;
}

.content-4-1 .input-label {
  font: 500 1.125rem/1.75rem Poppins, sans-serif;
  color: #39465b;
}

.content-4-1 .div-input {
  font: 300 1rem/1.5rem Poppins, sans-serif;
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #cacbce;
  color: #2a3240;
  transition: 0.3s;
}

.content-4-1 .div-input:focus-within {
  border: 1px solid #2ec49c;
  color: #2a3240;
  transition: 0.3s;
}

.content-4-1 .div-input input::placeholder {
  color: #cacbce;
  transition: 0.3s;
}

.content-4-1 .div-input:focus-within input::placeholder {
  color: #2a3240;
  outline: none;
  transition: 0.3s;
}

.content-4-1 .div-input .icon-toggle-empty-4-1 path,
.content-4-1 .div-input:focus-within .icon path {
  transition: 0.3;
  fill: #2ec49c;
  transition: 0.3s;
}

.content-4-1 .input-field {
  font: 300 1rem/1.5rem Poppins, sans-serif;
  width: 100%;
  background-color: #fcfdff;
  transition: 0.3s;
}

.content-4-1 .input-field:focus {
  outline: none;
  transition: 0.3s;
}

.content-4-1 .forgot-password {
  font: 400 0.875rem/1.25rem Poppins, sans-serif;
  color: #abaec3;
  transition: 0.3s;
  text-decoration: none;
}

.content-4-1 .forgot-password:hover {
  color: #2a3240;
}

.content-4-1 .btn-fill {
  font: 500 1.25rem/1.75rem Poppins, sans-serif;
  background-image: linear-gradient(rgba(91, 203, 173, 1),
      rgba(39, 194, 153, 1));
  padding: 0.75rem 1rem;
  margin-top: 2.25rem;
  border-radius: 0.75rem;
  transition: 0.5s;
}

.content-4-1 .btn-fill:hover {
  background-image: linear-gradient(#2ec49c, #2ec49c);
  transition: 0.5s;
}

.content-4-1 .bottom-caption {
  font: 400 0.875rem/1.25rem Poppins, sans-serif;
  margin-top: 2rem;
  color: #2a3240;
}

.content-4-1 .green-bottom-caption {
  color: #2ec49c;
  font-weight: 500;
}

.content-4-1 .green-bottom-caption:hover {
  color: #2ec49c;
  cursor: pointer;
  text-decoration: underline;
}

@media (min-width: 576px) {
  .content-4-1 .width-right {
    padding: 8rem 4rem;
  }

  .content-4-1 .right {
    width: 58.333333%;
  }
}

@media (min-width: 768px) {
  .content-4-1 .right {
    width: 66.666667%;
  }
}

@media (min-width: 992px) {
  .content-4-1 .width-left {
    width: 48%;
  }

  .content-4-1 .width-right {
    width: 52%;
  }

  .content-4-1 .right {
    width: 75%;
  }
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

@media (min-width: 1200px) {
  .content-4-1 .right {
    width: 58.333333%;
  }
}