:root {
  --bs-primary: #123c5f;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-danger: #b32a38;
  --bs-warning: #ffc107;
  --bs-info: #17a2b8;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
}
.bg-curves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#main-body {
  background-image: url("../../data/users/img/fond2.jpeg");
  background-size: cover;
  background-position: center;
  background-color: #f7f7f8;
  background-repeat: no-repeat;
  min-height: 100vh;
  background-attachment: fixed;
}

#main-login2 {
  background: radial-gradient(ellipse at center, #2297ff 1%, #020202 100%);
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #2297ff 1%,
    #020202 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #2297ff 1%,
    #020202 100%
  );
  background: -o-radial-gradient(
    center,
    ellipse cover,
    #2297ff 1%,
    #020202 100%
  );
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    #2297ff 1%,
    #020202 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2297ff', endColorstr='#020202', GradientType=1);

  height: calc(100vh);
  min-height: 700px;
  width: 100%;
}

.container .middle {
  width: 100%;
  max-width: 700px;
  background: rgb(255, 255, 255);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #dedede;
  overflow: hidden;
  margin: auto;
  left: 50%;
  position: fixed;
  top: 42%;
  transform: translate(-50%, -50%);
}

.login-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  bottom: calc(min(40px, 8%));
  font-size: small;
  flex-wrap: wrap;
  background-color: var(--bs-primary);
  left: 50%;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  transform: translateX(-50%);
}

.login-footer a {
  color: rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
  margin: 0 5px;
}
.login-footer a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255);
}
.login-footer span {
  color: rgba(255, 255, 255, 0.6);
}
#login {
  padding: 10px 20px;
  min-height: 400px;
}

@media (max-width: 767.98px) {
  div#main-login {
    position: relative;
  }
  .login-footer {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background-color: transparent;
  }

  .middle {
    position: relative;
    margin: auto;
    transform: none;
    margin-top: 25px;
    width: calc(100% - 30px) !important;
    top: 45%;
  }
  .logo {
    width: 100%;
    height: 100px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}