html,
body {
  height: 100%;
  background-image: url('../../assets/img/background.png');
  background-position: 5% 10%;
  background-repeat: no-repeat;
  background-size: 270%;

}

.bg-color {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: rgb(155,164,228);
  background: linear-gradient(45deg, rgba(155,164,228,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(140,224,203,1) 100%);
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-register {
  width: 100%;
  max-width: 660px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin .input-start {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin .input-middle {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin .input-end {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

a {
  color: rgb(0, 0, 0) !important;
  text-decoration: none !important;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.h3 {
  color: black;
}

.btn-orange {
  background: #e98c15;
  color: white !important;
}

.btn-orange:hover {
  background: orange;
}

.logo {
  height: 100%;
  max-height: 60px;
}

#colA {
  position: relative;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

#colB {
  background: rgb(80,0,212);
  background: linear-gradient(180deg, rgba(80,0,212,1) 0%rgba(80,0,212,1) 40%, rgba(5,68,137,1) 100%);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.text-main {
  color: #3c2f9e;
  font-size: 4rem;
}

.image-bg {
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 100%;
  background: rgb(155, 164, 228);
  background: linear-gradient(45deg, rgba(155, 164, 228, 0.4) 0%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 60%, rgba(140, 224, 203, 0.4) 100%), url('../../assets/img/background.png');
  background-size: cover;
  background-blend-mode: color;
}

.text-link {
  text-decoration: underline !important;
}

.bg-main {
  background-color: #641ed9;
}

.bg-main2 {
  background-color: #00c18a !important;
  color: white !important;
  border-color: transparent !important;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

input {
  background: #641ed9 !important;
  color: white !important;
}

.form-control:valid {
  background: #641ed9 !important;
}

.text-link {
  color: #b5cfe6 !important;
}

input:-internal-autofill-selected {
  background: #641ed9 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  /* box-shadow: inset 0 0 20px 20px #23232329; */
}

#showHide {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
}

#showHideButton, #showHideButton2 {
  background: #641ed9;
  height: 96%;
  margin-right: 1px;
}