html, body {
    margin: 0;
    background-color: #3b85f5;
    color: WHITE;
    font-size: 18px;
    font-family: 'calibri', sans-serif;
    width: 100%;
    height: 100%;
}
  
section {
    width: 100%;
    height: 100%;
    position: absolute;
}

#connection-page {
    max-width: 720px;
    padding: 0px 20px;
    margin: 0 auto;
    text-align: center;
  }
  
  #connection-div-logo {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  #connection-logo {
    width: 300px;
    max-width: 100%;
    display: block;
    margin:0 auto;
  }
  
  .connection-separator {
    width: 250px;
    max-width: 100%;
    height: 3px;
    background-color: #094eb4;
    margin: 0 auto;
  }
  
  #connection-window {
    margin-top: 50px;
    width: 500px;
    max-width: 100%;
    background-color: #0f70e0;
    display: inline-block;
  }
  
   #connection-window-header {
     width: 100%;
     background-color: #094eb4;
     text-align: center;
   }
  
   #connection-window-header > p {
     padding: 10px 0px;
     margin: 0;
     font-weight: bold;
   }
  
   #connection-window-body {
     max-width: 500px;
     padding: 0px 20px;
   }
  
   #connection-window-body-content {
     max-width: 260px;
     margin: 0 auto;
   }
  
  #form-connection {
    text-align: initial;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  
   #form-connection > .label-connection {
     display:block;
     margin-left: 6px;
   }
  
   #form-connection > .input-connection {
     width: 100%;
     outline: 1px #094eb4 solid;
     display:block;
     margin: 4px 0px 2px -4px;
     height: 26px;
     padding: 0px 2px;
     font-size: 16px;
     font-weight: bold;
     color: #094eb4;
   }
  
   #form-connection > .input-connection:focus {
     outline: 2px #094eb4 solid;
   }
  
   #back-connection, #submit-connection {
    clear:both;
    display:block;
    margin: 0 auto;
    outline: 0px;
    border: 0px;
    height: 30px;
    width: 100px;
    color: WHITE;
    background-color: #ff7918;
    font-size: 17px;
    transition-duration: 200ms;
    cursor: pointer;
   }

   #content-btn {
     display:flex;
     justify-content: space-around;
   }
  
   #form-connection > #submit-connection:hover {
     background-color: #e37918;
   }
  
   #form-connection > #submit-connection:active {
     font-weight: bold;
   }
  
   #password-lost {
     text-decoration: none;
     color: WHITE;
     transition-duration: 500ms;
     cursor: pointer;
   }
  
   #password-lost:hover {
     text-decoration: underline;
   }
  
   #div-souvenir {
     margin: 0px 0px 20px 10px
   }
  
   #label-souvenir {
     position: relative;
     padding-left: 26px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 16px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
  
   #label-souvenir input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
   }
  
   #span-souvenir {
     position: absolute;
     top: 0;
     left: 0;
     height: 14px;
     width: 14px;
     background-color: WHITE;
     border: 2px solid #094eb4;
   }
  
   #label-souvenir input:checked ~ #span-souvenir {
     background-color: WHITE;
   }
  
   #span-souvenir:after {
     content: "";
     position: absolute;
     display: none;
   }
  
   #label-souvenir input:checked ~ #span-souvenir:after {
     display: block;
   }
  
   #label-souvenir #span-souvenir:after {
     left: 5px;
     top: 1px;
     width: 2px;
     height: 8px;
     border: solid #094eb4;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }
  
   .error-input {
     color: #D8000C;
     margin: 0;
     font-size: 15px;
     display: none;
     position: absolute;
   }
  
   .err-active {
     display: block;
   }
  
   .separator-input {
     height: 26px;
   }

   .connection-window-body-information {
     font-size: 16px;
     margin-bottom:0px;
   }