body {
  color: #808080;
  font-family: "Ubuntu", serif; }

.wrapper {
  padding: 100px 0 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.header {
  background-color: #fff;
  margin-top: -100px;
  width: 100%;
  height: 100px; }
  .header .header-logo {
    background: #fff no-repeat left center url("../media/logo-myotis-contour-blanc-ecriture noire_150.png");
    display: block;
    margin-left: 30px;
    width: 100%;
    overflow : hidden;
    height: 100px; }

:focus {
  outline: 0px !important;
  -webkit-appearance: none; }

.main-content {
# background: url("../images/login/map.jpg") no-repeat bottom center;
  background-size: cover;
  min-height: 100%; }
  .main-content.melbourne {
    background-image: url("../images/login/melbourne.jpg"); }
  .main-content.faron {
    background-image: url("../media/faron.jpg"); }
  .main-content.boscodon {
    background-image: url("../media/Boscodon.png"); }
    .main-content.myotis {
    background-image: url("../media/Boscodon.png"); }
  .main-content.nantua {
    background-image: url("../media/Nantua.jpg"); }
  .main-content.snow {
    background-image: url("../images/login/snow.jpg"); }
  .main-content.truck {
    background-image: url("../images/login/truck.jpg"); }
  .main-content.map {
    background-image: url("../images/login/map.jpg"); }
  .main-content .frame {
    background-color: #fff;
    margin: 0 auto;
    padding-bottom: 60px;
    position: absolute;
    left: 0;
    right: 0;
    top: 24%;
    width: 480px; }
  .main-content .frame-content {
    margin-top: 24px;
    margin-right: 60px;
    margin-left: 60px;
    width: calc(100% - 120px); }
    .main-content .frame-content input {
      margin: 0;
      width: 100%; }
    .main-content .frame-content.first-content {
      margin-top: 40px; }
  .main-content h1 {
    border-bottom: 1px solid #E6E6E6;
    font-size: 32px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
    padding: 24px 60px; }
    .main-content h1.error-title {
      color: #c3422c; }
  .main-content p {
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 20px; }
    .main-content p.centered {
      text-align: center; }
  .main-content a {
    color: #708e48;
    text-decoration: none; }
    .main-content a.block-link {
      display: block;
      font-size: 14px;
      margin-top: 20px; }
    .main-content a:hover {
      text-decoration: underline; }
  .main-content button {
    background-color: #708e48;
    background-image: url("../media/spinner.svg");
    background-position: -9999px -9999px;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 3px;
    color: #fff;
    display: block;
    font-size: 21px;
    line-height: 56px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 56px;
    box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
    transition: box-shadow .3s ease-out; }
    .main-content button:hover {
      background-color: #7d9f51;
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }
    .main-content button:active {
      background-color: #637d3f;
      transition: margin 0s; }
    .main-content button:disabled {
      background-color: #637d3f; }
    .main-content button.loading {
      background: #637d3f url("../media/spinner.svg") no-repeat center center;
      border-radius: 28px;
      text-indent: -9999px;
      width: 56px;
      transition: width 0.5s ease-in, border-radius 0.1s ease-in; }
    .main-content button.post-loading {
      transition: box-shadow .3s ease-out,
 width 0.5s ease-out,
 border-radius 0.1s ease 0.4s,
 text-indent 0s ease 0.5s,
 background-position 0s ease 0.5s; }
  .main-content .g-recaptcha {
    margin: 0 auto;
    width: 304px; }
  .main-content .text-entry {
    border: 0;
    border-bottom: 1px solid #E6E6E6;
    box-shadow: 0 0 0 1000px white inset;
    color: #4D4D4D;
    font-size: 21px;
    height: 40px;
    line-height: 40px;
    margin-top: 24px;
    padding: 0 0 1px;
    text-indent: 4px; }
    .main-content .text-entry:focus {
      border-bottom: 2px solid #708e48;
      padding-bottom: 0; }
    .main-content .text-entry.error {
      border-bottom: 2px solid #c3422c;
      padding-bottom: 0; }
    .main-content .text-entry::-webkit-input-placeholder {
      color: #ccc; }
    .main-content .text-entry:-moz-placeholder {
      color: #ccc; }
    .main-content .text-entry::-moz-placeholder {
      color: #ccc; }
    .main-content .text-entry:-ms-input-placeholder {
      color: #ccc; }
  .main-content .inline-error-message {
    color: #c3422c;
    font-size: 14px;
    margin-top: 4px;
    visibility: hidden; }
  .main-content .ajax-message-container {
    background-color: #BD4F3C;
    border-bottom: 1px solid #E6E6E6;
    color: #fff;
    display: none;
    font-size: 18px;
    padding: 40px 60px; }
    .main-content .ajax-message-container.success-message-container {
      background-color: #7d9f51; }
    .main-content .ajax-message-container.error-message-container {
      background-color: #BD4F3C; }
    .main-content .ajax-message-container a {
      color: #fff;
      text-decoration: underline; }
  .main-content .password-strength-text {
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 60px; }
  .main-content .password-strength-weak input {
    border-color: #c3422c !important; }
  .main-content .password-strength-weak .password-strength-text {
    color: #c3422c; }
  .main-content .password-strength-ok input {
    border-color: #ECBA01 !important; }
  .main-content .password-strength-ok .password-strength-text {
    color: #ECBA01; }
  .main-content .password-strength-good input {
    border-color: #708e48 !important; }
  .main-content .password-strength-good .password-strength-text {
    color: #708e48; }