@import "color.less";
.myNav-small {
  display: none;
}
@media screen and (max-width: 767px) {
  .myNav {
    display: none;
  }
  .myNav-small {
    padding: 10px;
    display: inline-block;
    position: fixed; /* Set the navbar to fixed position */
    top: 0px; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 10;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    height: 44px;
    .sidebar-toggle {
      left: -2px;
      top: -1px;
      margin-right: -3px;
    }
    .mytitle {
      position: relative;
      color: rgb(2, 179, 90) !important;
      font-weight: bolder;
      padding-right: 10px;

      font-size: 16px;
    }
    .menu-group {
      position: absolute;
      top: 7px;
      right: 10px;
      .menu-item {
        cursor: pointer;
        padding: 12px;

        &:hover {
          padding-bottom: 10px;
          border-bottom: 3px solid rgb(2, 179, 90);
          * {
            color: rgb(2, 179, 90) !important;
          }
        }

        * {
          color: #575757 !important;
        }
      }
      .menu-item-selected {
        padding-bottom: 10px;
        border-bottom: 3px solid rgb(2, 179, 90);
        * {
          color: rgb(2, 179, 90) !important;
        }
      }
      .profile-dropdown {
        &:hover .profile-pop-triangle {
          position: absolute;
          top: -10px;
          right: 12px;
          width: 0;
          height: 0;
          z-index: 10 !important;
          border-style: solid;
          border-width: 0 10px 10px 10px;
          border-color: transparent transparent #fff transparent;
        }
        &:hover #profile-pop {
          display: block;
          position: fixed;

          border-radius: 4px;
          background-color: rgb(255, 255, 255);
          z-index: 9 !important;
          top: 40px;
          right: 10px;
          width: 170px;
          height: auto;

          padding: 2px 0px;
          .profileName {
            margin: 5px 10px !important;
            margin-bottom: -2px;
            color: @titleHover;
          }
          .profile-pop-item {
            list-style: none;
            cursor: pointer;
            font-weight: bold;
            padding: 10px !important;
            border-top: 1px solid @border;
            color: #575757 !important;
            &:hover {
              color: @titleHover !important;
              .profile-pop-itemIcon1,
              .profile-pop-itemIcon2 {
                * {
                  color: @titleHover !important;
                }
              }
            }
            .profile-pop-itemIcon1,
            .profile-pop-itemIcon2 {
              * {
                color: #575757 !important;
              }
            }
          }
        }
      }
    }
  }
}
