/*

  modal.css
  07.05.2020

  new modal -> mot de passe oublié

*/

/* modal main wrapper */
  .modal{position:fixed; width:600px; margin:3em auto 0 auto; background-color:#FFF; font-size:20px; z-index:3;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  #modal-title{position:relative; font-family:'montserratregular'; font-size:0.7em; color:#263544; padding:2em 3em 2em 3em; border-bottom:1px solid #DDD;}

  #btn-close-wrapper{position:absolute; top:1.2em; right:2em;}
  #btn-close-wrapper a{color:#263544;}

  /* modal form */
  #modal-form-wrapper{clear:both; padding:3em; font-size:0.7em; box-sizing: border-box;}
  #modal-label{font-family:'montserratregular'; color:#263544; margin-bottom:0.2em; font-size:1em; }

  #modal-form-wrapper input[type="text"]{border:1px solid #CCC; padding:0.8em 0.8em 0.8em 4em;  font-family:'open_sansregular'; width:100%; box-sizing: border-box; height:42px;
    outline: none; font-size:0.7em;
  }

    #email-wrapper{position:relative;}

    #iconed{position:absolute; top:1px; left:1px; width:40px; height:40px; padding:0.5em 0 0 0.5em; background-color:#E9ECE8; box-sizing: border-box;}
      #iconed i{color:#263444;}

    #submit-wrapper{position:relative; margin-top:1.5em;}

      .button-submit{background-color:#2ED8B6; font-family:'montserratregular'; font-size:0.7em; color:#FFF; padding:1em; border-radius: 4px; border:none; width:100%; text-align: center; cursor:pointer; outline:none;}

    /* loader */
    #modal-loader{position:absolute; top:0.750em; right:1em; width:16px; height:16px; display:none;}

    #modal-loader img{animation: spin 2s linear infinite;}
    @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

    /* modal alert */
    #modal-alert{padding:2em 3em 2em 3em; box-sizing: border-box; font-size:0.7em; display:none; }
      .modal-alert-red{background-color:#FF4D4D; color:#FFF; font-size:1em; font-family:'montserratregular';}
      .modal-alert-green{}

    /* overlay */
    #overlay{position: fixed; top:0; left:0; background-color: #263544; opacity: 0.8; width: 100%; height: 100vh; display: none; z-index: 2;}

    /* big icon */
    #big-icon{text-align:center; padding:0.5em 0 1em 0;}
    #big-icon i{color:#2ED8B6;}


    /* big icon red */
    #big-icon-red{text-align:center; padding:0.5em 0 1em 0;}
    #big-icon-red i{color:#FF4D4D;}

    /* modal confirm text */
    #confirm-text{text-align: center; padding:0 0 1em 0; font-size:1em; font-family:'montserratregular'; color:#263344; line-height:1.5em;}

    .green{color:#2DD8B6;}
    .red{color:#FF4D4D;}

    /* */
    #button-wrapper{text-align:center; margin-top:1em; }
    .button-grey{background-color: #DADADA; font-family: 'montserratregular'; font-size: 0.7em; color:#263544;
    padding:1em 2em 1em 2em; border-radius:4px; border:none; text-align:center; cursor:pointer; outline:none; text-decoration:none; }




/*
  material-icons
*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(/fonts/MaterialIcons-Regular.woff) format('woff'),
       url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

/*
  MATERIAL ICONS
*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }