.sidebar{
    width:250px;
    height:100%;
   
    transition: width 0.3s ease-in-out;
    padding:0px 5px 0px 5px;
   
}

.sidebar .side-row{
    position: relative;
    width:100%;
    min-height:50px;
    
}

.sidebar .side-row:hover .tb{background-color:hsl(var(--color-3))}

.sidebar .side-row font{height:50px}


.sidebar .side-row .container subrow{gap:8px;cursor: pointer;height:40px;max-height:40px;
    line-height:45px;padding:0px 5px 0px 5px; transition: background-color 0.3s;}


    .side-row .container subrow:hover{background-color:hsl(var(--color-6));color:var(--color-9);box-shadow: var(--shadow) !important;}
.sidebar:not(.shrinked) .side-row.active{background-color:hsl(var(--color-6));color:var(--color-9);box-shadow: var(--shadow) !important;}



.sidebar.shrinked{width:50px;}
.sidebar .tag{transition: all 0.3s ease, visibility 0s linear 0.5s;}
.sidebar.shrinked .tag{opacity:0;visibility: hidden;max-width:0;transition:  visibility 0s linear 0.3s; }
.sidebar:not(.shrinked) .tag{opacity:1;visibility: visible;max-width:auto;}

.sidebar .tb{gap:8px;padding:0px 5px 0px 5px}
.sidebar:not(.shrinked) .container .tb{display:none;}
.sidebar.shrinked .tb{justify-content:center;}
.sidebar.shrinked  .container .tb{justify-content:start}

.sidebar.shrinked  .container input-generator {
  background-color: hsl(var(--color));
}

.sidebar.shrinked  .container .sub-container{width:calc(100% - 10px)}
.sidebar.shrinked  .container{padding-bottom: 5px;}

.sidebar .container{
    opacity: 0;
            visibility: hidden;
            max-height: 0;
            overflow: hidden;
            transition:  visibility 0s linear 0.3s;      
}
.sidebar:not(.shrinked) .container{ transition: all 0.3s ease-in-out}

.sidebar:not(.shrinked) .side-row.active .container{
    visibility: visible;
    opacity: 1;
            max-height: 200px; /* Adjust based on submenu length */
            
            
}
.sidebar.shrinked .tag{display: none;}
.sidebar.shrinked .container{
    position: fixed;
    top:inherit;
    left:40px;
    /* transition: all 0.3s ease, visibility 0s linear 0.3s; */
}

.sidebar.shrinked .side-row:hover .container{
    
    
    translate:0 -50px;
    
    width:220px;
    opacity: 1;
            visibility: visible;
            max-height: 200px; /* Adjust based on submenu length */
            transition: all 0.3s ease;
            z-index: 10;
    
    
}


   
.sidebar input-generator data-holder{height:22.5px;font-size:0.8rem}

.sidebar subrow img{ width:25px}

.sidebar subrow.active{background-color:hsl(var(--color-6))}