/*
  CSS pour les formulaires de connexion et de mot de passe oublié
 */
.title-login, .title-forgotten-password {
  font-family: "Rubik", Helvetica, Arial, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  color: #009dd2;
  text-align: left;
  text-transform: uppercase;
  line-height: 28px;
}

.label-input, .label-remember-me {
  font-family: "Open Sans", Helvetica, Arial, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: rgba(37, 37, 37, 0.5);
  text-align: left;
  line-height: 18px;
  text-transform: uppercase;
}

.label-remember-me {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  bottom: 0;
}

.textSupp-input {
  font-family: "Helvetica", Helvetica, Arial, serif;
  font-size: 11px;
  color: rgba(168, 172, 178, 1.0);
  text-align: left;
  line-height: 16px;
}

.inner-addon {
  position: relative;
}

.inner-addon .picto {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.left-addon .picto {
  left: 0px;
}

.left-addon input {
  padding-left: 40px;
}

.button-group {
  margin-top: 15%;
}

/*
  Bouton "Se souvenir de moi"
 */
.knobs, .layer
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 130px;
}

.button
{
  position: relative;
  width: 230px;
  height: 30px;
  overflow: hidden;
}

.button.r, .button.r .layer
{
  border-radius: 100px;
}

.checkbox
{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs
{
  z-index: 2;
}

.layer
{
  width: 100%;
  background-color: #fcebeb;
  transition: 0.3s ease all;
  z-index: 1;
}

#button-1 .knobs:before
{
  content: 'NON';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 35px;
  height: 23px;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 7px 4px;
  background-color: #f44336;
  border-radius: 100px;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before
{
  content: 'OUI';
  left: 60px;
  background-color: #8ac44a;
}

#button-1 .checkbox:checked ~ .layer
{
  background-color: #dffcd9;
}

#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
{
  transition: 0.3s ease all;
}