@charset "UTF-8";

#libraryMenu {
  max-width: 1200px;
  margin: 0 auto 40px;
}

#libraryMenu ul {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

#libraryMenu li {
  flex: 1 0 auto;
  border: 1px solid #474747;
  border-radius: 5px;
}

#libraryMenu a {
  display: block;
  padding: 20px 8px 20px 60px;
  background-position: 12px 16px;
  background-repeat: no-repeat;
  background-size: 40px;
  text-decoration: none;
  color: inherit;
  border-radius: 5px;
}

#libraryMenu a:hover {
  background-color: #FCE4EC;
}

#libraryMenu a.search {
  background-image: url("/_themes/images/library/ic-booksearch.svg");
}

#libraryMenu a.login {
  background-image: url("/_themes/images/library/ic-login.svg");
  background-size: 32px;
}

#libraryMenu a.mailaddress {
  background-image: url("/_themes/images/library/ic-mail.svg");
  background-position: 12px 20px;
}

#libraryMenu a.password {
  background-image: url("/_themes/images/library/ic-pass.svg");
}

#libraryMenu a.riyo {
  background-image: url("/_themes/images/library/ic-riyo.svg");
}

@media only screen and (max-width: 960px) {
  #libraryMenu {
    width: 100%;
    max-width: 100%;
    margin: 0 10px 20px;
  }

  #libraryMenu ul {
    flex-wrap: wrap;
  }

  #libraryMenu li {
    flex: 1 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    border: 1px solid #474747;
    border-radius: 5px;
  }

  #libraryMenu a {
    padding: 12px 8px 12px 48px;
    background-position: 12px 16px;
    background-size: 32px;
  }

  #libraryMenu a.login {
    background-image: url("/_themes/images/library/ic-login.svg");
    background-size: 24px;
  }
}

@media only screen and (max-width: 560px) {
  #libraryMenu li {
    flex: 1 0 100%;
    max-width: calc(100% - 20px);
    border: 1px solid #474747;
    border-radius: 5px;
  }
}