body {background-color: #def6f3;z-index: 99999; }
a {text-decoration: none;}
a:hover,a:focus {text-decoration: none;}
.card {text-align: center;z-index: 99999; align-items: center;justify-content: center;background-color: #def6f3;padding: 5px;padding-top: 32px;}
.card-body {width: 400px;background-color: white;border-radius: 10px;padding: 25px;text-align: center;margin: 0 auto;z-index: 99999; align-items: center;justify-content: center;marging-top: 42px;box-shadow: 0 10px 25px rgba(0,0,0,.25);}
.form-outline {position: relative;margin-bottom: 20px;}
.form-outline .form-control {width: 100%;padding: 12px 0px 12px 10px;font-size: 12px;border-radius: 6px;}
.form-control:focus {border: 2px solid #0d6efd;outline: none;}
.form-outline label {position: absolute;top: 50%;left: 10px;color: #999;font-size: 12px;pointer-events: none;transform: translateY(-50%);transition: all 0.2s ease;background: #fff;padding: 0 5px;}
.form-outline .form-control:focus + label,
.form-outline .form-control:not(:placeholder-shown) + label {
  top: -2px;font-size: 12px;color: #0d6efd;font-weight: bold;background-color: white;}

/* Icône */
.form-outline .prefix {
    position: absolute;
    right: 10px;
    top: 50%;font-size: 16px;
    transform: translateY(-50%);
    color: #999;
}
 #message {
  margin-bottom:15px;
 }
 #connexion {
padding: 8px;
font-size: 15px;
border-radius: 5px;
background-color: blue;
border-color: blue;
color: white;
width: 100%;
position: relative;
 }
.form-outline.has-value + label {
    top: -8px;
    font-size: 12px;
    color: #0d6efd;
}


@media (max-width: 992px) {
  .card-body {
    width: 90%;
}

}