article  {
  display:        flex;
  flex-direction: column;
}

#divSearch {
  display:          flex;
  flex-direction:   column;
  margin:           0 auto;
    padding:        2rem 5vw 1rem 5vw;
  width:            84vw;

  background-color: var(--baseBG);
}

  #divInputSearch {

    border-style:   solid;
    border-width:   0.05rem;
    border-radius:  0.25rem;
    display:        flex;
      flex-direction:   row;
      flex-wrap:			  wrap;
    justify-content:  end;
    margin:         1rem auto 0.25rem auto;
    padding:        0.125rem 1%;
    width:          100%;

    input {

      border:           0;
      margin:           0 auto 0 0;
      padding:          0.3rem 0.1rem;
      width:            75%;

      font-size:        0.9rem;

      background-color: transparent;
      color:            var(--baseText);

    }

    input:focus { outline: none; }

    input::placeholder { font-size: 0.9rem; font-style: italic; }

    /* Clears the 'X' from MS stuff: */
    input[type=search]::-ms-clear,
    input[type=search]::-ms-reveal { display: none; height: 0; width : 0; }

    /* Clears the 'X' from Chrome */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration { display: none; }

    span.mso {
      display:      inline-block;
      margin-left:  0.85rem;
      cursor:       pointer;
      font-size:    1.6rem;
      line-height: 1;
      color:        var(--baseText);

      &:hover {
        color: var(--baseDecoration);
        text-decoration: none;
      }

    }

  }

#divResourceList {

  border:     none;
  margin:     1.5rem auto 1rem auto;
  max-height: 90vh;
  min-height: 2rem;
  overflow-y: auto;
  padding:    0;
  width:      100%;

  a             { color: var(--baseText); text-decoration: none; }
  a:visited     { color: var(--baseText);  }
  a:hover       { color: var(--linkHover); }
  a:focus       { color: var(--linkActive); }
  a:active      { color: var(--baseText);   }

  div.resource-list-item {
    display: flex;
    flex-direction: row;
    margin: 0 0 1.6rem 0;

    div.thumbnail {
      flex-basis:   7.2rem;
      flex-grow:    0;      /* Prevents growing */
      flex-shrink:  0;    /* Prevents shrinking */

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

    div.description {

      ul { margin: 0 0 0 1rem; }

      li {
        list-style: none;
        margin: 0 0 0.25rem 0;

        text-align: left !important;

        &.title {font-weight: bold; font-size: 0.9rem;}
        &.title-local {font-size: 0.7rem; font-style: italic;}
        &.authors {font-size: 0.8rem;}
        &.description_original {font-size: 0.8rem;}
        &.description_local {font-size: 0.7rem; font-style: italic;}

        img { margin-right: 0.5rem; height: 1.2rem; width: auto; }
      }

    }

  }

  div.resource-list-item div.description {

    display:  flex;
      flex-direction: row;
    width:    fit-content;

    img.thumbnail { height: 8rem; width: auto; }

  }

}


@media only screen and (max-width: 767px) {

}

@media only screen and (max-width: 479px) {
  #divSearch { width: 96% }
}