.dropdown:hover .dropdown-menu {
    display: block;
}

.asidebar::-webkit-scrollbar {
    width: 2px !important;
}

.asidebar::-webkit-scrollbar-thumb, .navbar::-webkit-scrollbar-thumb {
    background: transparent !important;
    transition: background 0.3s !important;
}

.asidebar:hover::-webkit-scrollbar-thumb, .navbar:hover::-webkit-scrollbar-thumb {
    background-image: linear-gradient(96.34deg, #926aff 0%, #ff77b0 50%, #ffb367 100%) !important;
}

.scrollbar::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
}

.scrollbar::-webkit-scrollbar-thumb, .navbar::-webkit-scrollbar-thumb {
    background: transparent !important;
    transition: background 0.3s !important;
}

.scrollbar:hover::-webkit-scrollbar-thumb, .navbar:hover::-webkit-scrollbar-thumb {
    background-image: linear-gradient(96.34deg, #926aff 0%, #ff77b0 50%, #ffb367 100%) !important;
}

:root {
    --angle: 360deg;
    
  }
  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}
  .border-color:hover{
    background: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red);
    animation: 3s rotate linear infinite;
  }
  

  /*  device tab css start  */
  .indicator {
    z-index: 9;
    transition: all 0.3s ease-out;
  }
  .tab--1:checked ~ .indicator { left: 4px; }
  .tab--2:checked ~ .indicator { left: calc(40px + 4px + 4px); }
  .tab--3:checked ~ .indicator { left: calc(40px * 2 + 4px + 8px); }
  .tab--4:checked ~ .indicator { left: calc(40px * 3 + 4px + 12px); }
  .tab--5:checked ~ .indicator { left: calc(40px * 4 + 4px + 16px); } 
  
  .tab--1:checked ~ .tab--1 ,.tab--2:checked ~ .tab--2, 
  .tab--3:checked ~ .tab--3, .tab--4:checked ~ .tab--4, 
  .tab--5:checked ~ .tab--5 { color :white }
  
    .masonry {
        display: flex;
        flex-wrap: wrap;
        width: auto;
    }
    .grid-sizer, .wallpaper-item {
        width: calc(33.333% - 8px); /* Default: 3 columns */
        box-sizing: border-box;
    }
    @media (max-width: 1024px) {
        .grid-sizer, .wallpaper-item {
            width: calc(50% - 8px); /* 2 columns */
        }
    }
    @media (min-width: 1400px) { 
        .grid-sizer, .wallpaper-item {
            width: calc(25% - 8px); /* 4 columns */
        }
    }


    /* #wallpaper-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 8px;
      } */
      
      .wallpaper-item {
        break-inside: avoid; /* Prevents elements from breaking in the column */
      }
/*  device tab css end  */

.fixed.inset-0.z-40, .fixed.inset-0.z-30{
    background: #00000082;
}