:root {
  /* 270 is a vibrant violet, 280 is a deeper purple */
  --hue: 270;
  --columns-size: 250px;
  
  /* Applying the hue to the primary UI elements */
  --hsl-primary: var(--hue) 70% 50%;
  --hsl-primary-hover: var(--hue) 70% 40%;
}

/* Optional: Subtle purple tint for the background in dark mode */
[data-theme='dark'] {
  --hsl-bg: var(--hue) 15% 10%;
}

#change-layout {
  display: none;
}

.menu-enabled #topbar-top {
    display: none !important;
}

.date {
    display: none !important;
}

.size {
    display: none !important;
}

.dimensions {
    display: none !important;
}

.exif {
    display: none !important;
}


.popup-image-meta {
    display: none !important;
}

.popup-exif {
    display: none !important;    
}

.popup-description {
    display: none !important;    
}

.popup-basename {
    text-align: center !important;
    max-width: 500px !important;
}


.files-img {
    border-radius: 10px;
}

/* Ensure the .name container can wrap text */
.name {
    white-space: normal !important; /* Allows text to wrap instead of staying on one line */
    word-wrap: break-word !important; /* Standard property for breaking words if necessary */
    overflow-wrap: break-word !important; /* Modern standard for breaking long words */
    word-break: break-word !important; /* Prevents cutting in the middle if possible */
    text-align: center !important;
    
    /* Ensure the container has enough space to display wrapped lines */
    line-height: 1.5;
}


.clickable-area {
    position: relative; /* Essential for the absolute link to work */
    cursor: pointer;    /* Turns the mouse into a hand pointer */
    display: block;
}

.clickable-area a.overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;        /* Sits on top of everything inside the div */
}

#menu-toggle {
   display: none !important;
}


@media (max-width: 767px) {
#sidebar-topbar {
    min-height: 45px !important;
}}

@media (max-width: 767px) {
#topbar-breadcrumbs {
    height: 45px !important;
    padding-bottom: 8px !important;
    padding-top: 17px !important;
    padding-left: 50px !important;
    line-height: 18px !important;
}}

@media (min-width: 767px) {
#topbar-breadcrumbs {
    height: 60px !important;
    padding-top: 18px !important;    
}}

@media (max-width: 767px) {
#breadcrumbs {
    display: flow !important;
margin-top: -3px !important;
margin-left: 28px !important;
}}

@media (min-width: 767px) {
#breadcrumbs {
    display: block !important;
margin-left: 30px !important;
}}

.svg-icon.svg-home {
    display: none !important;
}

@media (max-width: 767px) {
#sidebar-toggle {
    top: -7px !important;
--button-padding: 8px;   
border-radius: 100px !important;
background: none !important;
}}

@media (max-width: 767px) {
.crumb-link {
       padding: 0 5px; 
}}

@media (max-width: 767px) {
.button-icon .svg-icon {
    width: 38px !important;
    height: 38px !important;
    padding-top: 5px !important;
}}

button.button-icon.button-folder-action[data-action="contextmenu"] {
    display: none !important;
}

.columns-info .name, .columns-info .title {
    -webkit-line-clamp: 30 !important;
}