* {
    margin: 0;
    padding: 0;
}

html,
body {
    background-color: #fff;
    font-family: verdana, sans-serif;
    /*overflow: hidden;*/
    height: 100%;
    padding: 0px;
    margin: 0px;
}

p,
li,
td,
div {
    font-size: 13px;
}

img {
    border: 0;
    vertical-align: middle;
}

ul {
    list-style: none;
}

ul li {
    list-style: none;
    padding-bottom: 2px;
}

ul li img {
    vertical-align: middle;
    padding-right: 5px;
}

span.size {
    color: #ccc;
    font-size: 10px;
    padding-left: 5px;
}

li span.lastModifiedDate {
    color: #caa;
    font-size: 10px;
    padding-left: 25px;
}
table tr td span.lastModifiedDate {
    color: #caa;
    font-size: 10px;
}


span.path {
    padding: 0px 5px 0px 5px;
}

a {
    text-decoration: none;
    color: #666;
}

a span {
    text-decoration: none;
}

a:hover {
    color: #000;
}

a:hover span {
    text-decoration: underline;
}

div.myBreadcrumb {
    padding: 3px 0px 0px 15px;
    background-color: #f7f7f7;
    height: 30px;
    border-top: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
}

div.myBreadcrumb,
div.myBreadcrumb a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

div.myBreadcrumb a:hover {
    background-color: #efefef;
}
#myBreadcrumb i{ color:#d4bf85; margin-right:7px;-webkit-text-stroke: 1px #000;}

#status {
    padding: 5px 0px 5px 0px;
    height: 20px;
    color: #a5a4a4;
    font-size:12px;
}

#status a {
    color: #fff;
    text-decoration: underline;
}

#status a:hover {
    color: #16B;
    text-decoration: underline;
    background-color: #E8E8E8;
}

#maincontent {
    width:100%;
}

#header {
    background-color: #fff;
    width: 100%;
    
    /* Edit for height of header*/
}

#headertitle {
    color: #000;
    font-size: 20px;
}

#headertitle i {
    color: #2391ce;
    /*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
}

#subheader {
    padding: 5px 15px;
}

#contents {
    overflow: auto;
    width: 100%;
}

#elements {
    position: relative;
    border: 5px solid #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

#toolbar {
    background-color: #f7f7f7;
    border-top: 1px solid #bfbfbf;
    width: 100%;
    clear: both;
    height: 35px;
    font-size: 15px;
}
#footer {
    display: none;
    width: 100%;
    clear: both;
    height: 40px;
    font-size: 15px;
}
#toolbar #defaultTools, #toolbar #selectionTools {
    display: inline-block;
    height: 100%;
    padding: 4px 0px 0px 20px;
    font-size: 17px;
}
#toolbar #defaultTools {
    border-right: 1px solid #bfbfbf;
}

#footer p,#toolbar p {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    color: #fff;
    text-align: right;
    margin-right: 5px;
    
}

#footer a,#toolbar a {
    color: #fff;
    text-decoration: underline;
}

#toolbar a.inactive {
    cursor: default;
    text-decoration: none;
    opacity: 0.25;
}

#toolbar #createFolderDiv input[type=button] {
    font-size: 12px;
    padding: 2px 5px;
    margin-left: 5px
}

#overlay {
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 10;
}

#loginForm {
    position: absolute;
    border: 1px solid silver;
    margin: auto;
    left: 50%;
    margin-top: 0;
    margin-left: -200px;
    padding: 50px 50px;
    background-color: white;
    box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 5px 10px rgb(0 0 0 / 50%); 
    -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
}

#errorBox {
    position: absolute;
    border: 1px solid silver;
    margin: auto;
    left: 50%;
    margin-top: 40px;
    margin-left: -200px;
    padding: 50px 50px;
    background-color: white;
    box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 5px 10px rgb(0 0 0 / 50%); 
    -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
    width: 400px;
}

#errorBox h3 {}
#errorBox p.error { color:red}
#errorBox div.buttonContainer { width:100%;text-align:center}
#errorBox input[type=button] { }

#loginForm label {
    display: block;
}

#loginForm input[type=password] {
    width: 300px;
}
#objectsTable { width:100%;margin-top:0px !important}
#objectsTable tr th { text-align: left; padding: 2px 2px 6px 2px;border-right:0px solid #ccc;}
#objectsTable tbody tr td a.deleteFile, #objectsTable tbody tr td a.deleteFolder { display:none; -webkit-text-stroke: 1px #000; cursor:pointer;color:red;margin-left:10px;}
#objectsTable tbody td:hover a.deleteFile, #objectsTable tbody tr td:hover a.deleteFolder{ display: inline-block; }
#objectsTable tbody td:hover input.selectCheckbox,#objectsTable tbody td input.selectCheckbox:checked, #objectsTable thead tr th:hover input.selectAllCheckbox,#objectsTable thead tr th input.selectAllCheckbox:checked{ opacity:1; }
#objectsTable tbody tr td a.folder i{ color:#d4bf85; margin-right:5px;-webkit-text-stroke: 1px #000;}
/*#objectsTable tbody tr td a.file i{ color:#f1f7f9; margin-right:5px;-webkit-text-stroke: 1px #000;}*/
#objectsTable tbody tr td a.file i{ color:#2391ce; margin-right:5px;font-size:16px;height:20px}
#objectsTable tbody tr td a.file span.fa-stack{ margin-right:5px; width:12px;line-height:20px;height:20px}
#objectsTable thead tr th input.selectAllCheckbox { opacity:0; margin-right: 6px;vertical-align: middle;position: relative;bottom: 1px;}
#objectsTable tbody tr td input.selectCheckbox { opacity:0; margin-right: 6px;vertical-align: middle;position: relative;bottom: 1px;margin-left:2px;}
#objectsTable tbody tr td a.parentFolder { margin-left:20px;}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 2px 0px;
    white-space: nowrap;
}
table.dataTable tbody td:nth-of-type(1) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    width:100%;
    max-width: 0;
}
table.dataTable tbody td:nth-of-type(2) {
    min-width: 60px;
}
table.dataTable tbody td:nth-of-type(3) {
    min-width: 130px;
}

table.dataTable thead .sorting { background-image: none !important}
table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:before, table.dataTable>thead .sorting_desc_disabled:after { bottom: 7px;}

#objectsTable_filter {
    position: fixed;
    top: 7px;
    right: 7px;
    color: white;
    z-index:2;
}
#objectsTable_filter input{
    background-color: white;
}
#objectsTable.dataTable.no-footer {
    border-bottom: none;
}
#objectsTable.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #cbcbcb;
}
table.dataTable thead th[data-is-resizable=true] {
    border-left: 1px solid transparent;
    border-right: 1px dashed #bfbfbf;
}
table.dataTable thead th.dt-colresizable-hover {
    cursor: col-resize;
    /*background-color: #eaeaea;*/
    border-left: 1px solid #bfbfbf;
}
table.dataTable thead th.dt-colresizable-bound-min, 
table.dataTable thead th.dt-colresizable-bound-max {
    opacity: 0.2;
    cursor: not-allowed !important;
}
#defaultTools label {color:#000; font-weight:bold;cursor: pointer;margin-right:15px;}
#deleteFiles,#downloadFilesButton,#selectionLabel {color:#000; font-weight:bold;cursor: pointer;margin-right:15px;text-decoration: none !important;}
#fileUploadLabel i,#createFolderLabel i { color: #2391ce;/*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;margin-right:5px;*/}
#toolbar i, #deleteFiles i, #downloadFilesButton i { color: #2391ce;/*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/margin-right:10px;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
#toolbar a:hover:not(.inactive) i,#toolbar label:hover:not(.inactive) i {
    text-shadow: -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc, 1px 1px 0 #ccc;
    /*transform: scale(1.2);*/
}
#fileUploadLabel:hover,#createFolderLabel:hover,#deleteFiles:hover,#downloadFilesButton:hover  {text-decoration:underline !important}

#createFolderDiv { 
    display: none;
    margin-top:-2px;
}
#createFolderDiv.show {
    display:inline-block !important;
}
#myProgress {
    display:none;
    position: relative;
    width: 50%;
    margin: 280px auto; 
    padding: 20px 40px 10px 40px;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    z-index:10;
    text-align:center;
}
#downloadProgress, #uploadProgress {
    display:none;
    border: 1px solid #ccc;
    position: fixed;
    right:0px;
    bottom:0px;
    width: 350px;
    /*margin: 280px auto; */
    padding: 10px 0px 0px 0px;
    /*border-radius: 4px;*/
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    z-index:10;
    text-align:center;
}
#uploadProgress {
    left:0px;
}
.myTotalBar {
    /*display:none;*/
    position: absolute;
    top: 0px;
    width: 100%;
    height: 40px;
    /*background: #f1f1f1;*/
    overflow: hidden;
}
.myBar {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 54px;
    /*background: #f1f1f1;*/
    overflow: hidden;
}
.myTotalBar div.percentage {
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    /*background-color: #007c8459;*/
    background-color: #d5f7d3;
}
.myTotalBar div.percentage.finished {
    background-color: #d5f7d3;
}

#uploadProgress #uploadFilesHeader span, #downloadProgress #downloadFilesHeader span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#uploadProgress #uploadFiles span, #downloadProgress #downloadFiles span {
    position: absolute;
    top:30px;
    left: 50%;
    transform: translateX(-50%);
}
#uploadProgress #uploadFiles p, #downloadProgress #downloadFiles p {
    position: absolute;
    top:6px;
    left: 50%;
    transform: translateX(-50%);
}
#myBar div#percentage,.myBar div.percentage {
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    /*background-color: #007c8459;*/
    background-color: #d5f7d3;
}
#myProgress #stopUploadButton {
    left:42%;
    margin-top:8px;
}
.stopDownloadButton, .stopUploadButton{
    margin-left:10px;
}
#loadingAnimation {
    z-index: 10;
    color: #007c84;
    font-size: 140px;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}
#downloadProgress #downloadFiles .fileName, #uploadProgress #uploadFiles .fileName {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 305px;
    margin-bottom:0px;
}
#downloadProgress #downloadFiles span.info, #uploadProgress #uploadFiles span.info {
    font-size:10px;
    width:100%;
}
.downloadFile,.uploadFile {
    position: relative;
    border-top:1px solid #ccc;
    height:55px;
    /*padding:5px 10px;*/
}
#downloadProgress #downloadFiles div i,#uploadProgress #uploadFiles div i {
    /*position: absolute;*/
    padding-top:8px;
    margin-left:5px;
    margin-right:0px;
    cursor:pointer;
}
#downloadProgress #downloadFiles div.stopDownload i,#uploadProgress #uploadFiles div.stopUpload i {
    color:red;
}
#downloadProgress #downloadFiles div.done i,#uploadProgress #uploadFiles div.done i {
    color:green;
}

#downloadProgress #downloadFiles, #uploadProgress #uploadFiles {
    max-height:250px;
    overflow-y: auto;
    padding-right:0px;
}
#downloadProgress #downloadFiles div.downloadFile.finished, #uploadProgress #uploadFiles div.uploadFile.finished {
    background-color: #d5f7d3;
}
#downloadProgress #downloadFiles div.downloadFile.stopped, #uploadProgress #uploadFiles div.uploadFile.stopped {
    background-color: #ffc5c5;
}
#downloadProgress #downloadFiles .stopDownload, #downloadProgress #downloadFiles .done,  #uploadProgress #uploadFiles .stopUpload, #uploadProgress #uploadFiles .done  {
    position:absolute;
    right:5px;
    top:0px;
}
#downloadProgress #downloadFilesHeader, #uploadProgress #uploadFilesHeader {
    height:30px;
    font-size:15px;
    font-weight:bold;
    /*border-bottom:1px solid #ccc;*/
}
#downloadProgress #downloadFilesHeader i#toggleDownloads, #uploadProgress #uploadFilesHeader i#toggleUploads{
    cursor:pointer;
    position: absolute;
    top:14px;
    right:16px;
}