.userInfo {
  position: relative; }
  @media screen and (max-width: 991px) {
    .userInfo {
      display: none; } }
  .userInfo .user-icon {
    position: relative; }
    .userInfo .user-icon .logged {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -10px;
      bottom: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: #fff;
      background-color: #ef787a; }
      @media screen and (min-width: 1200px) {
        .userInfo .user-icon .logged {
          right: 10px; } }
      .userInfo .user-icon .logged svg {
        fill: #fff;
        margin: 0; }
  .userInfo .accountSubMenu {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    z-index: 100;
    width: 250px;
    margin-bottom: 0;
    padding: 16px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16); }
    .userInfo .accountSubMenu li {
      padding: 8px 16px; }
      .userInfo .accountSubMenu li a {
        color: #1d1d1b;
        font-weight: 500; }
        .userInfo .accountSubMenu li a svg {
          fill: #1d1d1b;
          margin-right: 12px; }
        .userInfo .accountSubMenu li a.logout {
          color: #ef787a; }
          .userInfo .accountSubMenu li a.logout svg {
            fill: #ef787a; }
        .userInfo .accountSubMenu li a:hover {
          color: #d65456; }
          .userInfo .accountSubMenu li a:hover svg {
            fill: #d65456; }