/*
 * File: nmm-document-library.css
 * Author: steved
 * Date: June 24, 2025
 * Description: This CSS file is so awesome it has its own room in the Smithsonian.
 *
 * Usage:
 * - This file should be placed in the "css" subdirectory of the nmm-document-library
 *   WordPress plugin.
 *
 */

/* This is used to "hide" the background of a div element, as per Hailey */
.blendedBG {
  background-color: #e8e8e8 !important; /* Light gray background color */
}

#no_results_found {
    font-size: 1.2rem;
}

/* The main overlay for the search animation */
#search-overlay-dl {
    /* Position it over the entire page */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Semi-transparent white background */
    background-color: rgba(255, 255, 255, 0.75);

    /* Use flexbox to center the icon */
    /* display: flex; */
    justify-content: center;
    align-items: center;

    /* Ensure it's on top of other content */
    /* z-index: 9999; all these hyper-aggressive z-indices end up causing problems */
    z-index: 100;

    /* Hide it by default */
    display: none;
}

/* The container for the icon, which will have the animation */
.search-icon-container-dl {
    /* Apply the animation: name, duration, timing-function, iteration-count */
    /* animation: search-animation-dl 2.5s ease-in-out infinite; */
    animation: circular-animation-dl 2.5s linear infinite;
}

/* The SVG icon itself */
.search-icon-dl {
    width: 80px;
    height: 80px;
    fill: #333; /* Color of the icon */
    opacity: 0.7; /* Make the icon itself slightly transparent */
}

/* The Keyframes Animation */
/* This animation moves the icon in an arc and rotates it slightly */
@keyframes search-animation_ {
    0% {
        transform: translateX(-60px) rotate(-45deg);
    }
    50% {
        transform: translateX(60px) rotate(45deg);
    }
    100% {
        transform: translateX(-60px) rotate(-45deg);
    }
}

/* The Keyframes Animation */
/* This animation moves the icon in an arc and rotates it slightly */
@keyframes search-animation-dl-horizontal {
    0% {
        transform: translateX(-60px);
    }
    50% {
        transform: translateX(60px);
    }
    100% {
        transform: translateX(-60px);
    }
}

@keyframes circular-animation-dl {
    0% {
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }
    100% {
        transform: rotate(-360deg) translateX(60px) rotate(360deg);
    }
}

.closed {
  margin-bottom: 10px; /* space between items */
}

#page-container #doclib-content ul .doclib-foldername {
  gap: 10px; /* white space between items */
}

/*---------------------------------------------*/
/* nmm-document-library.css - 250630-1221      */
/*---------------------------------------------*/