.content-wrapper {
    grid-template-columns:83% 17%;
  }
  
  @media (max-width: 575.98px) {
    .content-wrapper { grid-template-columns:none;    }
    #user-tree-container {  border-top: 1px solid #000; }
  
    [data-bs-theme=dark] #user-tree-container {
      border-top: 1px solid #1F212A;
      border-left:none !important;
    }
  
    [data-bs-theme=light] #user-tree-container {
      border-top: 1px solid #000;
      border-left:none !important;
    }
  }
  @media (min-width: 575.98px) { .content-wrapper { grid-template-columns:none;    }
    #user-tree-container {  border-top: 1px solid #000; }
  }
  
  @media (min-width: 768px)    { .content-wrapper { grid-template-columns:65% 35%; } }
  @media (min-width: 992px)    { .content-wrapper { grid-template-columns:75% 25%; } }
  @media (min-width: 1200px)   { .content-wrapper { grid-template-columns:80% 20%; } }
  @media (min-width: 1400px)   { .content-wrapper { grid-template-columns:83% 17%; } }
  
  [data-bs-theme=dark] #user-tree-container {
      border-top:0;
  }
  
  [data-bs-theme=light] #user-tree-container {
      border-top:0;
  }
  
  #userTree li {
      position:relative;
      margin:2px;
      padding-block:3px;
      cursor: pointer;
      line-height:1em;
      border-bottom:1px solid var(--bs-gray-100)
  }
  
  #userTree li:last-child {
    border-bottom:none;
  }
  
  #userTree ul {
    list-style: none;
    padding-left:0;
  }   
  
  #userTree ul ul {
     display: none;
     margin-left: 0.35rem;
  }
  
  #userTree ul ul.visible {
        display: block !important;
      }
  
  #userTree .expandable::before, #userTree .collapsible::before, #userTree .leaf::before {
        color:var(--bs-gray-900);
        font-weight:bold;
        font-size:12pt;
        cursor: pointer;
        text-align:center;
        padding:0;
        display: inline-block;
        border-radius:3px;
        vertical-align: middle;
        margin-top: -1px;
        transition:all 200ms ease-in-out;
      }
  
  #userTree .expandable:hover::before {
    color:var(--bs-link-color);
    background-color:var(--bs-gray-100);
  }
      
  #userTree .expandable::before {
        font-family: 'Material Icons';
        content: 'expand_more';
  }
  
  #userTree .collapsible::before {
        font-family: 'Material Icons';
        content: 'chevron_right';
   }
  
  #userTree .player {
       background-color:#1a6daf !important;
  }
  
  #userTree .player::after {
      content: 'Jugador';
      color:#fff;
      font-size:8pt;
      font-style:italic;
      float:right;
  }
  
  #userTree .player-display {
        display:none;
      }
  
  #userTree .botonVer {
      color:var(--bs-gray-700);
      padding:3px;
      padding-left:7px;
      padding-right:7px;
      border-radius:3px;      
      line-height:1.5em;
  }
  
  #userTree .botonVer:hover {
     color:var(--bs-gray-900);
     background-color:var(--bs-primary-light);
  }
  
  #userTree .botonVer:hover + li .leaf {
      color:var(--bs-gray-100);
   }
  
   #userTree .botonVer:hover > i {
      color:var(--bs-link-color);
   }
  
  
  #userTree .leaf::before {
        font-family: 'Material Icons';
        content: 'chevron_right';
        color:var(--bs-gray-200);
   }
  
  
  #userTree .userTreeIcon {
      padding:0;
      margin:0;
      width:auto;
      height:auto;
      font-size:8pt;
      margin-right:0.3rem;
      color:#aaa;
      vertical-align:unset;
  }
  
  #userTree .text-animation {
      padding:0;
      padding-left:0;
      border-radius:3px;
      transition: background-color 0.5s ease-in-out;
    }
  
   
  #userTree .bg-color-animation {
      animation: treeBgChange 1s ease-in-out;
  }
  
  #userTree #formUserTree {
    display:none;
  }
  
  @keyframes treeBgChange {
    0% {
      background-color: transparent; /* Initial color */
    }
    50% {
      background-color: #1a6daf; /* Color change to yellow */
    }
    100% {
      background-color: transparent; /* Back to initial color */
    }
  }
  
  #userTree .definido {
    background-color:var(--bs-link-hover-color);
    color:#fff;
  }
  
  #removeViewAs {
      cursor: pointer;
  }