/*
  /css/moduleconnexion.css
  [Update -> 03.05.22] Font = quicksand
*/

/* COLORS
    noir = #3A3F3D
    purple (btn) = #7E02FA
*/

/* DEFINE APP */
body{margin:0; }
div{box-sizing: border-box; font-size:20px; font-family:'quick'; color:#3A3F3D;}
ul{padding:0;}
a{text-decoration:none;}
input{box-sizing: border-box; outline:none;}
input[type="text"],input[type="password"]{font-family:'quick'; color:#3A3F3D;}
input[type="checkbox"]{border:2px solid #D9D9D9; color:#D9D9D9;}
input[type="checkbox"]:checked{border-color:#7E02FA; color:#7E02FA; background-color: blue;}
input[type="checkbox"] option:checked{color: #7E02FA; background-color: blue;}


/* APP CONNEXION */
#connexion-wrapper{width:21em; margin:0 auto 0 auto;}
  #connexion-logo{text-align: center; margin:2.5em 0 2.5em 0;}


/* UNIT */
.unit-row{float:left; width:100%;}
  .unit-50{float:left; width:50%;}

/* CLASSES */
.p-rela{position:relative;}
.t-right{text-align:right;}
.end{clear:both;}

/* SIZES */
.s-12{font-size:0.6em;}

/* MARGINS */
.ml-0-5{margin-left:0.5em;}
.mb-1-0{margin-bottom:1em;}

/* COLORS */
.c-grey-light{color:#BBB;}
.c-purple{color:#7E02FA;}


  /* ALERTS */
  .simple-alert{display:none; border-radius:4px; color:#FFF; padding:0.8em; font-size:0.750em; margin-bottom:1.5em;}
    .alert-red{background-color:#F2441D;}


  /* FORM */
  ul.form-items{}
  ul.form-items li{list-style: none; margin-bottom:1em;}
  .form-items input[type="text"],.form-items input[type="password"]{width:100%; border:none; border-bottom:2px solid #D9D9D9; font-size:0.750em; padding:0.8em 0.8em 0.8em 4em;}
  span.legend{font-size:0.550em; color:#777777; font-style: italic;}
  li#btn-submit-wrapper{position:relative;}
  /* submit btn */
  .form-items input[type="submit"]{width:100%; background-color:#7E02FA; color:#FFF; font-size:0.750em; padding:1.4em 1em 1.4em 1em; border-radius:4px; outline:none; border:none; cursor:pointer;
  font-family:'quickbold';}
  li#infos{font-size:0.600em; line-height:1.8em;}
  li#infoschecked{font-size:0.600em;}
  #link-motpasseoublie{font-size:0.600em; text-align:right; color:#05AFF2;}
  a#btn-motpasseoublie{color:#4000FF;}
  a#motpasseoublie{font-size:0.6em; color:#3A3F3D;}      /* main conn */
  a#motpasseoublie:hover{color:#7E02FA;}
  .form-items input.red,.form-items textarea.red{border-color:#F22929;}
  .form-items textarea{width:100%; border:none; border-bottom:2px solid #CCC; font-size:0.750em; padding:0.4em 0.8em 0.8em 4em;}

  #form-conn label{color:#3A3F3D;}

  a#remember_me{font-size:0.6em; color:#3A3F3D; margin-left:2.7em; padding:0.3em; display:inline-block;}
  #checkbox_wrapper{position:absolute; z-index:1; width:16px; height:16px; top:0.2em; left:0.5em;}

  li#options-wrapper{float:left; width:100%;}


  /* ICONED with Feather Icons*/
  .iconed{position:absolute; width:16px; height:16px; top:0.4em; left:0.5em;}
  .eyed{position:absolute; width:30px; height:30px; top:0; right:0; padding:0.3em 0 0 0; text-align:center;}
  .eyed a{color:#111324; display:block;}


  /* LOADER */
  .loader{position:absolute; top:1.3em; right:1.3em; display:none;}
  .loader img{animation: spinner 2s linear infinite; }
  @keyframes spinner{0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}


  /* FEATHER ICONS */
  .feather-16{width:16px; height:16px;}
  .feather-20{width:20px; height:20px;}