.header-area {
  background-color: #0077C4;
  color: #FFF;
  height: 180px; }
  .header-area--list {
    height: 130px; }
  .header-area .top-header {
    background-color: #005F9D;
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: flex-end; }
    .header-area .top-header .button-area {
      height: 100%;
      display: inline-block;
      border-left: 1px solid #0077C4;
      padding: 7px; }
    .header-area .top-header .button {
      height: 100%;
      background-color: transparent;
      font-size: 1.2em; }
  .header-area .logo-area {
    max-width: 400px;
    width: 70%;
    margin: 0 auto; }
  .header-area h2 {
    text-align: center;
    font-size: 2em;
    font-weight: 300; }

.form-area {
  max-width: 385px;
  width: 85%;
  margin: 0 auto;
  background-color: #F8FAFF;
  border-radius: 6px;
  padding: 2em;
  margin-top: -50px;
  box-shadow: 0px 3px 6px 0px rgba(11, 55, 100, 0.25); }
  .form-area--list {
    background-color: #F8FAFF; }
    .form-area--list .search-area {
      display: flex;
      width: 100%;
      padding: 2em 0 1em;
      width: 85%;
      margin: 0 auto; }
    .form-area--list input {
      color: #9097A5;
      width: calc(100% - 35px);
      height: 35px;
      border-radius: 5px 0 0 5px;
      padding: 0 1em;
      border-color: #C8D3E1;
      border-style: solid;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 1.6em;
      border-right: 0; 
      -webkit-appearance: none;}
    .form-area--list button {
      width: 35px;
      height: 35px;
      border: none;
      background-color: #0077C4;
      border-radius: 0 5px 5px 0; }
      .form-area--list button span {
        display: inline-block;
        width: 18px;
        height: 18px; }
  .form-area label,
  .form-area input {
    display: block; }
  .form-area label {
    font-size: 1.6em;
    font-weight: 400;
    margin-bottom: 0.5em; }
  .form-area input {
    color: #9097A5;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    padding: 0 1em;
    border-color: #C8D3E1;
    border-style: solid;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1.6em; }
    .form-area input.error {
      border-color: #E93A47; }
      .form-area input.error::-webkit-input-placeholder {
        color: #FFF; }
      .form-area input.error::-moz-placeholder {
        color: #FFF; }
      .form-area input.error:-ms-input-placeholder {
        color: #FFF; }
      .form-area input.error::-ms-input-placeholder {
        color: #FFF; }
      .form-area input.error::placeholder {
        color: #FFF; }
  .form-area form {
    margin-bottom: 2em; }
    .form-area form .button {
      height: 40px;
      background-color: #7AAF00;
      border-radius: 5px;
      font-size: 1.6em; }
  .form-area div + div {
    margin-top: 2em; }
  .form-area .errorMessage {
    color: #E93A47;
    font-size: 1.6em;
    margin-bottom: 1em;
    display: none; }

@media (min-width: 912px) {
  .form-area--list {
    border-radius: 5px;
    max-width: 920px;
    margin: 0 auto 10px;
    box-shadow: 0px 3px 6px 0px rgba(11, 55, 100, 0.25); }
    .form-area--list .search-area {
      padding: 2em 0 1.6em; } 
    .header-area--list{
      height: 160px;
    }}
.content {
  height: calc(100% - 190px); }
  .content .recover-submit {
    text-align: center; }
    .content .recover-submit .button {
      background-color: transparent;
      display: inline-block;
      width: auto;
      color: #0077C4;
      text-decoration: underline; }

@media (min-width: 912px) {
  .content--list {
    margin-top: -30px; } }
@media (max-width: 912px) and (orientation: landscape) {
  .content {
    height: auto; } }
footer {
  height: 50px;
  text-align: center;
  width: 100%;
  padding: 5px 0;
  margin-top: 20px;
  background-color: #F8FAFF;
  border-top: 1px solid #DDE4F1;
  font-family: "Roboto", sans-serif;
  font-size: 14px; }

.list-area footer {
  
  bottom: 0; }

.list-area--list {
  margin-bottom: 40px;
  position: relative;
  font-size: 0.9em; }
  #no-result {
    font-size: 2em;
    margin: 10px;
}
  .list-area--list span {
    display: inline-block; }
  .list-area--list li {
    border-bottom: 2px solid #DDE4F1;
    font-size: 2em;
    padding: 10px 0; }
    .list-area--list li:not(.hidden) {
      display: flex;
      flex-direction: column; }
    .list-area--list li:first-child {
      border-top: 2px solid #DDE4F1; }
    .list-area--list li:last-child {
      border-bottom: none; }
  .list-area--list .item-elem {
    padding: 0 1% 0 7.5%;
    display: flex;
    align-items: center; }
    .list-area--list .item-elem + .item-elem {
      margin-top: 5px; }
  .list-area--list .abreviation {
    margin-right: 10px;
    max-width: 100px;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 1; }
    .list-area--list .abreviation--french {
      color: #0077C4; }
    .list-area--list .abreviation--english {
      color: #7AAF00; }
  .list-area--list .name {
    flex-shrink: 1; }
  .list-area--list .current-bold {
    font-weight: 700; }

@media (min-width: 912px) {
  .list-area--list {
    max-width: 920px;
    margin: 0 auto 40px; } }
.anchor-link--list {
  position: relative; }
  .anchor-link--list .anchor-link-area {
    width: 50px;
    height: 50px;
    background-color: #DDE4F1;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 10px;
    bottom: 5px;
    z-index: 20; }
    .anchor-link--list .anchor-link-area:not(.hidden) {
      display: flex; }
    .anchor-link--list .anchor-link-area a {
      display: inline-block;
      width: 25px;
      height: auto; }

*,
*:before,
*:after {
  box-sizing: border-box; }

body {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  background-color: #FFF;
  color: #383D47;
  line-height: 1.5; }

img {
  width: 100%;
  height: auto; }

.mt-2 {
  margin-top: 2em; }

.button {
  width: 100%;
  color: #FFF;
  border: none;
  font-family: "Roboto", sans-serif;
  padding: 0;
  cursor: pointer; }

.w-100 {
  width: 100%; }

.hidden {
  display: none !important; }

.highlight {
  background-color: #FFF39A;
  white-space: pre; }

.filter {
  display: flex;
  width: 85%;
  margin: 0 auto;
  padding-bottom: 2em; }
  .filter div {
    background-color: #DDE4F1;
    font-size: 1.4em;
    border-radius: 15px;
    padding: 0.2em 1.3em;
    cursor: pointer; }
    .filter div + div {
      margin-left: 0.5em; }
    .filter div.active {
      background-color: #0677C4;
      color: #FFF; }

/*# sourceMappingURL=style.css.map */