html, body {
    font-family: Arial, sans-serif; 
    font-style: normal; 
    margin: 0; 
    padding: 0;  
    height: 100%;
}
header {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
h1 {
    margin-bottom: 2px; 
    margin-top: 10px;
}
#disk-stats {
    margin-bottom: 10px;
}
#disk-space {
    font-family: Arial, sans-serif; 
    font-size: 15px;
}
footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    background-color: #cfcfcf; 
    color: whitesmoke; 
    padding: 0; 
    font-size: 8px;
}
/* --------------- MAIN CONTENT BOX (for upload form and files/folders display) --------------- */
.content {
//    max-width: 800px; 
    margin: 5px auto; 
    padding: 8px; 
    background-color: #ccffcc;
    border: #00514b solid 2px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
ul {
    list-style-type: none; 
    padding: 0;
    }
li {
    padding: 5px 0;
} 
a {
    color: #00514b;
    font-size: 18px;
    font-style: bold; 
    text-decoration: none;
    }
a:hover {
    color: #fff;
    text-decoration: none;
}
    
/* Indent folder contents and default icon colors*/
ul.folder-contents {
    margin-left: 15px;
    color: #fff;
}
/* Start folded (hidden) */
ul.subfolder-contents {
    display: none;
}
.file-size {
    font-size: 18px;
    float: right; 
    padding: 0 20px; 
    color: #00514b;
}
.catchScanErrorMessage {color: red;}

/* --------------- UPLOAD FORM CONTAINER --------------- */
#uploadContainer {display: flex; flex-direction: row-reverse; padding: 10px; margin-top: 5px;}
#uploadContainer form {margin-right: 20px;}

/* username and password fields */
input[type="text"] {border-radius: 5px; margin: 0 4px; width: 90px;}
input[type="password"] {border-radius: 5px; width: 90px;}

/* browse button */
input[type="file"] {cursor: pointer; padding: 0 4px; width: 68px;}
/* upload button */
button[type="submit"] {cursor: pointer;}
/* upload related messages */
.uploadOkMessage, .uploadErrorMessage {display: flex; justify-content: left; margin: 2px 20px; height: 20px;}
.uploadOkMessage p {color: green; padding: 2px; margin: 0;}
.uploadErrorMessage p {color: red; padding: 2px; margin: 0;}
/* selected files list */
#selectedFilesContainer {display: none;}
#selectedFilesList {display: block; list-style: square; padding: 0;}
#selectedFilesList li {margin: 0px 40px; padding: 0 20px 2px 10px; color: whitesmoke;}
/* --------------- DOWNLOAD RELATED STUFF --------------- */
/* #downloadControls {margin-left: 20px; padding-bottom: 0;} */
#downloadControls {display: flex; align-items: center; color: whitesmoke; min-height: 25px; margin-top: 10px;}
/* download selected button */
#downloadSelected {cursor: pointer; display: none; margin-left: auto; margin-right: 20px;}
#toggleCheckboxes {cursor: pointer; margin-left: 24px; margin-right: 7px;}
#toggleAllCheckboxes {cursor: pointer; margin-left: 12px;}

/* color of folder names */
#folderNames {
    font-size: 18px;
    display: inline;
    color: #00514b;
}
/* this is the filename/folder row in main view */
.filesRow {
    border-bottom: 1px dotted #c0c0c0;
}
.filesRow a {
    color: #00514b;
    padding: 2px; 
    margin-left: 10px;
}
.filesRow a:hover {
    background-color: #f0f0f0;
    color:#00514b;
    padding: 2px; 
    margin-left: 10px;
}
/* start checkboxes hidden */
#selectAllCheckbox {display: none; cursor: pointer;}
#folderCheckbox, #fileCheckbox {
    cursor: pointer; 
    margin-right: 8px;/*display:none; is echoed at runtime */
}
/* -------------- COMMON STYLES FOR ALL ICONS --------------- */
i {
    font-family: "Font Awesome 6 Free"; 
    font-size: 20px; 
    font-style: normal;
    color: #00514b;	 
    margin-right: 8px; 
    margin-left: 4px; 
    cursor: pointer;
}
/* Default fallback style "file-alt" icon in Font Awesome*/
.icon-default::before {
    content: "\f15b"; 
    color: #00514b;
}
/* Folder icon style */
.icon-folder-open::before {
    content: "\f07c"; 
    color: #ff0000;
    cursor: pointer;
}
.icon-folder-closed::before {
    content: "\f07b";
    color: #00514b;      
    cursor: pointer;
}

/* ---------------------- ICON COLORS ----------------------- */
.fa-file-image, .fa-file-alt, .fa-file-lines, .fa-file-word, .fa-file-video, .fa-file-code, .fa-file-audio, .fa-font {
    color: #c0c0c0;  
}