body, html {
    margin: 0;
    padding: 0;
    background-color: #f7f7f8;
  }

  :root {
    --breek-primary: #D72638;
    --breek-primary-dark: #B91F30;
    --breek-ink: #111;
    --breek-muted: #8a8a8a;
    --breek-line: rgba(255, 255, 255, .1);
  }
  
    .header {
      position: fixed;
      top: 0;
      z-index: 10;
      width: 220px;
      height: 100%;
      padding: 18px 14px;
      background: #0d0d0f;
      border-right: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 18px 0 45px rgba(0, 0, 0, .1);
      box-sizing: border-box;
    }

    .header .imgProfile {
      position: absolute;
      left: 0; 
      right: 0;
      margin: 40px auto;
      bottom: 0;
      width: 60px;
      height: 60px;
      border-radius: 100%;
    }

    .header .imgProfile img {
      position: absolute;
      width: 100%;
      height: auto;
      border-radius: 100%;
    }

    .header ul {
      list-style-type: none;
      margin: 0; 
      padding: 86px 0 0;
    }
    
    .header ul li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 46px;
      margin: 4px 0;
      padding: 0 13px;
      border: 1px solid transparent;
      border-radius: 12px;
      color: rgba(255, 255, 255, .68);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .header ul a {
      color: white;
      text-decoration: none;
    }

    .header ul a:hover li {
      transform: translateY(0);
      border-color: rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .06);
      color: #fff;
    }

    .header ul > a:last-child {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 18px;
    }

    .header ul > a:last-child li {
      color: rgba(255, 255, 255, .54);
    }

    .header ul li.selected {
      background: var(--breek-primary);
      border-color: rgba(255, 255, 255, .16);
      color: white;
      font-weight: 800;
      box-shadow: 0 16px 32px rgba(215, 38, 56, .28);
    }

    .header ul li.selected::before {
      content: "";
      position: absolute;
      left: -14px;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 999px;
      background: #fff;
    }

    .header ul li.locked {
      color: #999;
    }

    .header ul li img {
      display: inline-block;
      margin-right: 5px;
      width: 12px;
      height: 12px;
    }

    .header ul li svg {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      margin: 0;
      stroke-width: 1.8;
    }

    .logo {
      position: absolute;
      top: 22px;
      left: 14px;
      right: 14px;
      width: auto;
      height: 42px;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
    }
    
    .logo img {
      position: relative;
      width: 116px;
      max-height: 24px;
      object-fit: contain;
    }


    .footer {
      position: relative;
      width: calc(100% - 220px);
      height: 100%;
      left: 220px;
      padding: 0;
      background-color: black;
      /* padding: 80px; */
      /* padding: 20px 0; */
      box-sizing: border-box;
      text-align: center;
      padding: 0;
      margin: 0;
    }
  
    .footer .columns {
      text-align: left;
      width: 100%;
      max-width: 700px;
      margin: 20px 0;
      display: inline-block;
      cursor: pointer;
      padding-bottom: 50px;
      border-bottom: 1px solid #333;
  
    }
  
    .footer .columns ul {
      margin: 0 35px;
      padding: 20px;
      display: inline-block;
      color: white;
      list-style: none;
      vertical-align: top;
      text-align: left;
    }
    
    .footer .columns ul:first-child {
      margin: 0;
    }
  
    .footer .columns ul li.title {
      font-weight: 600;
      margin: 0; 
      padding: 0;
    }
  
    .footer .columns ul li {
      padding: 5px 0;
      margin: 0; 
      text-align: left;
    }
  
    .footer h5 {
      text-align: center;
      color: white;
    }
  
    .footer span {
      cursor: pointer;
    }
  
    .footer .terms {
      text-align: left;
      width: 100%;
      max-width: 1200px;
      margin: 20px auto;
    }
  
    .footer .terms a {
      margin: 0 10px;
    }

    .content {
      width: calc(100% - 220px);
      left: 220px;
    }

    /* .bt-menu {
      position: fixed; 
      z-index: 11;
      bottom: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      border: 1px solid #333;
      background-color: white;
      border-radius: 100%;
      cursor: pointer;
      transition: transform 0.3s ease;
      display: none;
    }
  
    .bt-menu:hover {
      transform: scale(1.1);
    }

    .bt-menu:active {
      transform: scale(0.9);
    } */
    
    .footer-menu {
      --footer-menu-surface: rgba(17, 17, 17, .96);
      position: fixed;
      display: none;
      z-index: 20;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      padding: 0 12px calc(10px + env(safe-area-inset-bottom));
      background: linear-gradient(to top, rgba(247, 247, 248, .98) 0%, rgba(247, 247, 248, .92) 74%, rgba(247, 247, 248, 0) 100%);
      box-sizing: border-box;
    }
    
    .footer-menu ul {
      width: 100%;
      max-width: 560px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px;
      margin: 0;
      margin-left: auto;
      margin-right: auto;
      list-style: none;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 20px;
      background: var(--footer-menu-surface);
      box-shadow: 0 -10px 34px rgba(0, 0, 0, .18);
      box-sizing: border-box;
    }
    
    .footer-menu ul li {
      min-width: 0;
      height: 54px;
      min-height: 54px;
      padding: 0;
      flex: 1;
      font-size: 10.5px;
      color: rgba(255, 255, 255, .62);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid transparent;
      border-radius: 15px;
      box-sizing: border-box;
      transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    }
    
    .footer-menu ul li a svg {
      width: 21px;
      height: 21px;
      display: block;
      margin: 0 0 4px;
      stroke-width: 1.9;
      flex: 0 0 auto;
    }


    .footer-menu ul li:last-child {
      flex: 0.58;
    }

    .footer-menu ul.manager2 li.footer-search-item,
    .footer-menu ul.manager2 li#searchArtists.footer-search-item {
      flex: 1 !important;
      width: auto !important;
      height: 54px !important;
      min-height: 54px !important;
      margin: 0 !important;
      border-radius: 15px !important;
      color: rgba(255, 255, 255, .94) !important;
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      transform: none !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
    }

    .footer-menu ul.manager2 li.footer-search-item a {
      min-height: 54px !important;
      font-weight: 900 !important;
    }

    .footer-menu ul.manager2 li.footer-search-item a svg {
      width: 21px !important;
      height: 21px !important;
      margin-bottom: 4px !important;
      stroke-width: 2.15 !important;
    }

    .footer-menu ul.manager2 li.footer-search-item.selected,
    .footer-menu ul.manager2 li#searchArtists.footer-search-item.selected {
      background-color: var(--breek-primary) !important;
      border-color: rgba(255, 255, 255, .16) !important;
      color: #fff !important;
      box-shadow: 0 10px 22px rgba(215, 38, 56, .28) !important;
      transform: translateY(-1px) !important;
    }
        
    .footer-menu ul a {
      text-decoration: none;
      color: inherit; /* Herda a cor do texto do item */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      height: 100%;
      min-height: 54px;
      margin: 0;
      padding: 0;
      font-weight: 700;
      line-height: 1.1;
    }
    
    .footer-menu li img {
      width: 20px;
    }
    
    .footer-menu ul li.selected {
      background-color: var(--breek-primary);
      border-color: rgba(255, 255, 255, .16);
      color: white;
      font-weight: 800;
      box-shadow: 0 10px 22px rgba(215, 38, 56, .28);
      transform: translateY(-1px);
    }

    .footer-menu ul li:not(.selected):hover {
      background: #2A2A2A;
      color: #fff;
    }

    .footer-menu ul.manager2 li.footer-search-item:not(.selected),
    .footer-menu ul.manager2 li#searchArtists.footer-search-item:not(.selected) {
      background: transparent !important;
      border-color: transparent !important;
      color: rgba(255, 255, 255, .94) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .footer-menu ul.manager2 li.footer-search-item:not(.selected):hover,
    .footer-menu ul.manager2 li#searchArtists.footer-search-item:not(.selected):hover {
      background: #2A2A2A !important;
      color: #fff !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .footer-menu ul.manager2 li.footer-search-item.selected,
    .footer-menu ul.manager2 li#searchArtists.footer-search-item.selected {
      background-color: var(--breek-primary) !important;
      border-color: rgba(255, 255, 255, .16) !important;
      color: #fff !important;
      box-shadow: 0 10px 22px rgba(215, 38, 56, .28) !important;
      transform: translateY(-1px) !important;
    }

    @media (max-width: 980px) {
      .header {
        left: -220px;
      }
      .footer-menu {
        display: block;
      }
      .content {
        width: 100%;
        left: 0;
        padding-bottom: 112px;
      }
      /* .bt-menu {
        display: block;
      } */
      
    }