/****************************************
  MEDIA QUERIES
****************************************/
#help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: none; }
  #help-overlay:not(.hidden) {
    display: block; }

#help-menu {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 425px;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 30px; }
  @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
    #help-menu {
      width: 310px; } }
  #help-menu:not(.hidden) {
    transform: translateX(0); }
  #help-menu #help-tab {
    position: absolute;
    right: 452px;
    top: 12%;
    transform: rotate(270deg);
    background-color: #006E96;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 51;
    border-radius: 5px 5px 0 0;
    transform-origin: right;
    font-size: 18px;
    width: auto;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; }
    @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
      #help-menu #help-tab {
        padding: 10px;
        right: 332px; }
        #help-menu #help-tab img {
          height: 24px; }
        #help-menu #help-tab *:not(img) {
          display: none; } }
    #help-menu #help-tab:hover {
      filter: brightness(1.1); }
  @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
    #help-menu .help-menu-header h2 {
      font-size: 1rem; } }
  #help-menu .help-menu-header button.close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer; }
  #help-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 1rem; }
    #help-menu ul li {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 10px;
      border: 3px solid #006E96;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      min-height: 110px; }
      #help-menu ul li a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        width: 100%; }
        #help-menu ul li a i {
          font-size: 1.5rem;
          color: #006E96;
          margin-right: 1rem; }
          @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
            #help-menu ul li a i {
              font-size: 1.2rem; } }
        #help-menu ul li a div {
          display: flex;
          flex-direction: column; }
          #help-menu ul li a div .title {
            font-size: 0.9rem;
            margin-bottom: 5px;
            font-weight: bold;
            color: #006E96; }
            @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
              #help-menu ul li a div .title {
                font-size: 0.8rem; } }
          #help-menu ul li a div span {
            font-size: 0.7rem;
            color: #555; }
            @media (max-width: 480px), (min-width: 481px) and (max-width: 769px) {
              #help-menu ul li a div span {
                font-size: 0.6rem; } }