:root{
  --dlx-primary:#0b74b9;
  --dlx-radius:10px;
}

.downloads-sidebar .list-group{ gap:10px; }
.downloads-sidebar .list-group-item{
  line-height: 1em;
  border:1px solid #dadada;
  border-radius:var(--dlx-radius);
  padding: 18px 15px;
  display:flex;align-items:center;gap:.5rem;
}
.downloads-sidebar .list-group-item.active{
  background:var(--dlx-primary);
  border-color:var(--dlx-primary);
  color:#fff;
}
.downloads-sidebar{
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
}
.downloads-sidebar .list-group-item .bi-folder2{ font-size:1rem; opacity:.85; }

.downloads-content{ border:1px solid #dadada; padding:20px; border-radius:20px; overflow: hidden; }
.explorer-wrap{
    overflow:auto;
    max-height:60vh;
}

.downloads-breadcrumb a{ text-decoration:none; }
.downloads-breadcrumb .sep{ display:inline-flex; align-items:center; padding:0 .375rem; opacity:.6; }
.downloads-breadcrumb .bi-chevron-right{ font-size:.9rem; }

.folder-grid .folder{
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  border-radius:var(--dlx-radius);
  padding:.9rem;text-align:center;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.folder-grid .folder:hover{
  background:rgba(13,110,253,.06);
  border-color:rgba(13,110,253,.25);
  transform:translateY(-1px);
}
.folder-grid .bi-folder-fill{ color:#f4b400; }

.dlx-copy-btn {
    top: 0px;
    left: 0px;
    border: 1px solid var(--e-global-color-uicore_primary);
    line-height: 8px;
    font-size: 20px;
    padding: 8px;
    color: #fff;
    border-radius: 5px;
    background: var(--e-global-color-uicore_primary);
    opacity:0;
    transition: 0.2s ease-out;
}
.folder-grid .folder:hover .dlx-copy-btn {
    top: 8px;
    left: 8px;
    opacity:1;
}


.breadcrumb-bar{
    padding: 5px;
    border: 1px solid #dadada;
    border-radius: 100px;
}
.breadcrumb-bar button{
    border-radius: 100px;
    width: 90px;
    height: -webkit-fill-available;
}

.file-list .file-row{
  padding:.75rem 0; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; gap:.75rem;
}
.file-list .file-row:last-child{ border-bottom:0; }
.file-icon{ width:32px; text-align:center; font-size:1.4rem; color:var(--dlx-primary); }
.file-title{ margin:0; font-weight:600; }
.file-meta{ font-size:.85rem; color:#6c757d; }

.loader-overlay {
    position: absolute;
    background-color: #ffffff9e;
    width: 100%;
    height: 100%;
    display: block;
    justify-items: center;
}

.loader {
    position: absolute;
    top: 40%;
    margin: auto;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid var(--e-global-color-uicore_primary);
    animation: l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}
