.thumbnail-viewer-overall {
    background-color: rgba(0, 0, 0, 0.9);
    font-family: helvetica, arial, verdana;
}
.thumbnail-viewer-close {
    background-color: rgba(0, 0, 0, 0.3);    
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
}
.thumbnail-viewer-close:hover {
    background-color: rgba(0, 0, 0, 0.7);    
    text-decoration: underline;
}

.thumbnail-viewer-prev, .thumbnail-viewer-next {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
}
.thumbnail-viewer-prev:hover, .thumbnail-viewer-next:hover {
    background-color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
}

.thumbnail-viewer-label {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
    word-break: break-all;
    color: #ccc;
}

a.thumbnail-viewer, a.thumbnail-viewer:visited, a.thumbnail-viewer:hover, a.thumbnail-viewer:active {
    color: inherit;
    text-decoration: none;
    background-color: rgba(61, 61, 61, 0.8);
}

.directory-viewer {
    background-color: rgba(74, 63, 53, 0.8);
}

.file-viewer {
    background-color: rgba(53, 66, 74, 0.8);
}

.thumbnail-viewer-caption {
    text-align: center;
    width: 100%;
    padding: calc(10px * var(--inv-zoom, 1)) 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: calc(18px * var(--inv-zoom, 1));
}

.thumbnail-viewer-image {
    /* Image sizing is handled via factors in JS, 
       but we can set basic properties here */
    display: block;
}

/*
The style below is for index.html only,
it has no effect in the module
*/
.thumbnail {
    width: 150px;
    height: 150px;
    display: inline-block;
    padding: 10px;
    object-fit: contain;
}
body>a {
    text-decoration: none;
}
body {
    background-color: #333;
    color: #fff;
}
