html, body {
    height:100%;
    margin: 0;
    padding: 0;
}

html > body {
    font-size: 16px; 
    font-size: 68.75%;
} /* Reset Base Font Size */

body {
    font-family: Verdana, helvetica, arial, sans-serif;
    font-size: 68.75%;
    background: #191a1a;
    color: #333;
    background-image: rgb(139, 139, 139);
    background-image: -webkit-linear-gradient(top, rgb(22, 22, 22) 0%,rgb(93, 94, 93) 44%,rgb(27, 28, 27) 100%);
}

h1 {
    color:white;
    font-family: 'trebuchet ms', verdana, arial;
    padding: 10px;
    padding-top:12px;
    padding-bottom:0px;
    margin: 0;
    text-shadow: 5px 2px 7px #ffcf32, 2px 2px 2px #ecbd24,2px 2px 2px #bc9515 ;
    border-color: 10px solid #000;
}

a img {
    border: none;
}

.loading {
    background:#202020;
    border: 1px solid #aaa;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height:90%;
    padding-top:30px;
    text-align:center;
    font-size:120%;
    color: #e0e0e0;
}
.loading_info {
    font-size:80%;
    font-style: italic;
}

/* --- Top header --- */

.app_header {

    height:330px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;

    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color: #333;
    color: #CCC;
    background-image: linear-gradient( to top, rgba(0,0,0,0.1),rgba(0, 0, 0, 0), black ), 

    /* Boardview Background*/
    linear-gradient(to bottom, rgba(0,0,0,0.1),rgba(210, 174, 67, 0.5), black ),
    url('../BVD_background.png');

    background-size: cover;
    background-position: center;

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#d7dee3',GradientType=0 );
    /*background-image: linear-gradient(top, rgb(246,248,249) 0%,rgb(215,222,227) 99%);*/
    animation-name: transition;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; 
}

*{scroll-behavior: smooth;}

@media screen and (min-width : 1024px) {
    .app_header {
        width: 90%;
    }
}

.app_header a {
    color: #900;
}
.app_header_icon {
    align-items: center;			
    background: url('../logo_shop.png') no-repeat; /* Logo Shop*/
    margin:5px;
    margin-left:31%;
    float:left;
    width:400px;
    height:256px;
    position: center;
    animation-name: transition_img;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; 
}

.app_header_search {
    float:left;
    padding-left:40%;
}

.app_header_search input{
    width:200px;
    margin-top:10px;
}

.app_header_search_help {
    display: inline-block;
    background-color: #ee9e09;
    color: white;
    width: 14px;
    height: 14px;
    border-radius: 20%;
    text-align: center;
    font-weight: bold;
    position: relative;
    top: -1px;
    cursor: pointer;
}

.app_header_search_help:hover {
    background-color: white;
    color:black;
    transition: all .45s ease;
    
}
.app_header_stats {
    padding: 10px;
    padding-top:0px;
    font-style: italic;
}

/* --- Main areas --- */

.content {
    max-width: 1440px;
    display:none;
    padding:0px;
    margin-left: auto;
    margin-right: auto;
    background: #202020;
    border: none;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

@media screen and (min-width : 1024px) {
    .content {
        width: 90%;
    }
}

.treeview {
    position:relative;
    height: 100%;
    width:29%;
    float:left;
    overflow:auto;
    border-top: 1px solid #aaa;
}
.treeview_bold {
    font-weight: bold;
}

.list_container {
    position:relative;
    height: 100%;
    overflow: auto;
    border-top: 1px solid #aaa;
}

.list_files {
    overflow: auto;
    position: relative;
}

.search_indicator {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(3, 3, 3);
    opacity: 0.7;
    text-align: center;
    padding-top: 100px;
    font-size: 18px;
    display: none;
    z-index: 99;
    color:white;
}

/* --- Splitter --- */

.vsplitbar {
    width: 4px;
    background: #202020;
    border-right: 1px solid #bbb;
    border-top: 1px solid #bbb;    
}

/* --- File Table --- */

#files.tablesorter {
    font-family:arial;
    background-color: #202020;
    font-size: 8pt;
    line-height: 1.25em;
    width: 100%;
    text-align: left;
    border-spacing: 0px;
    border-bottom: 1px solid #ccc;
}
#files.tablesorter thead tr th, #files.tablesorter tfoot tr th {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 4px;
    border-left: 0px;
    background-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#dfa334), color-stop(99%,rgb(14, 14, 14))) !important;
    color: #fff;			
}
#files.tablesorter thead tr .header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
    text-align: center;
}
#files.tablesorter tbody td {
    vertical-align: top;
    background-color: #202020;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #ccc;
    border-top: 1px solid #e0e0e0;
    padding: 3px 4px 3px 4px;
    color:white;
}

#files.tablesorter:not(.has-parent-folder) tbody tr:nth-child(even) td {
    background-color: #3e3d3d;
}
#files.tablesorter.has-parent-folder tbody tr:nth-child(odd) td {
    background-color: #3e3d3d;
}

#files.tablesorter tbody tr:hover td,
#files.tablesorter tbody tr:nth-child(even):hover td {
    background-color: #886b3a;
}

#files.tablesorter thead tr .headerSortUp {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
#files.tablesorter thead tr .headerSortDown {
    /*background-image: url(tree_tablesorter_desc.gif);*/
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
#files.tablesorter thead tr .headerSortDown, #files.tablesorter thead tr .headerSortUp {
    background-color: #FFD283;
}

#files.tablesorter th:last-of-type,
#files.tablesorter td:last-of-type {
    border-right:0px;
}

/** File Icon **/
span.file, span.file_folder {
    background: url('../file_icon.png') no-repeat left center;
    padding-left:16px;
    padding-bottom:1px;
    padding-top:1px;
}

/** File PDF Icon **/
span.pdf {
    background: url('../pdf.png') no-repeat left center;
    padding-left:16px;
    padding-bottom:1px;
    padding-top:1px;
}

/** File BDV Icon **/
span.bvd {
    background: url('../bvd.png') no-repeat left center;
    padding-left:16px;
    padding-bottom:1px;
    padding-top:1px;
}

/** Closed Folder Icon **/
span.file_folder {
    background: url(data:image/gif;base64,R0lGODlhEAAOALMIAOC6eJdaH61zLZ9oJMOHNP/Sg//inv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAgALAAAAAAQAA4AAAQ9EMlJq72XaIKnOOAhdIRhFgCwaRQRviE3lWZtB5Rg78bo8TafZFAoGo8DSuDILOAmAUHT+JwMrthsZ4uIAAA7)
                no-repeat
                left center;
}
span.file a, span.file_folder a {
    text-decoration: none;
    color: White;
}
span.file a:hover, span.file_folder a:hover {
    text-decoration: underline;
    color:#ee9e09;
}
td.size {
    text-align: right;
    white-space: nowrap;
}		
td.date {
    white-space: nowrap;
}

/* make room for [..] */
#files.tablesorter.has-parent-folder th {
    border-bottom: 1px solid #ccc;
}
#files.tablesorter.has-parent-folder tbody tr:first-child td {
    border-top: 20px solid #202020;
}
#parent_folder {
    position: absolute;
    top: 24px;
    left: 4px;
}
#parent_folder_border {
    background-color: #202020;
    height: 1px;
    position: absolute;
    width: 100%;
    top: 42px;
}

/* --- Breadcrumb --- */

.list_header {
    background: #202020;
    font-family: arial;
    font-size: 8pt;
    border: 0px;
    border-bottom: 1px solid #CCC;
    padding:3px;
    padding-left: 6px;
    color:white;
}
.list_header span {
    background-color: #202020;
}
.list_header a {
    text-decoration: none;
    color: White;
}
.list_header a:hover {
    text-decoration: underline;
    color: #ee9e09;
}		
.path_divider {
    color:#fff;
    display:inline-block;
    margin-left: 3px;
    margin-right: 2px;
    margin-bottom: 1px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #222;
}

/* --- Listview footer --- */

.list_footer {
    padding: 10px;
    border-top: 1px solid #ccc;
    color: White;
}		
.list_footer_open_export {
    float: right;
}
.list_footer_open_export:hover {
    text-decoration: underline;
    color: #ee9e09;
    cursor: pointer;
}

/* --- CSV LightBox --- */

.export_lightbox, .viewfile_lightbox {
    z-index: 1000;
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 13px;
    display: none;
}
.export_content, .viewfile_content {
    text-align: left;
    background-color: #202020;
    padding: 20px;
    padding-top: 5px;
    width: calc(100% - 40px);
    max-width: 800px;
    max-height: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.export_options {
    line-height: 2em;
    color: WHITE;
}
.export_options input {
    position: relative;
    top: 2px;
    left: 2px;
}
.export_options label {
    margin-right: 0.5em;
    padding-left: 0.5em;
    color: WHITE;
}
.export_text {
    width: 100%;
    height: calc(100% - 5.25em);	/* two .export_options => 4em + save link*/
}
.export_close:link, .export_close:visited {
    float: right;
    text-decoration: none;
    color: WHITE;
}
.export_close:hover, .export_close:active {
    text-decoration: underline;
}	
#export_checkbox_csv + label {
    margin-right: 1em;
}
.export_save {
    text-align: center;
    margin-top: 0.25em;
}
.export_save a:link, .export_save a:visited {
    color: WHITE;
    text-decoration: none;
}
.export_save a:hover {
    text-decoration: underline;
}
.export_chevron {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 18px;
    height: 16px;
    color: WHITE;
}
.export_chevron::after,
.export_chevron::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    left: 7px;
    top: 3px
}
.export_chevron::after {
    top: 8px
}

#export_tip {
    color: #eee;
    position: absolute;
    bottom: 13px;
    right: 20px;
    font-size: 11px;
}
/* --- DynaTree --- */

ul.dynatree-container
{
    white-space: nowrap;
    padding: 0px;
    margin: 0; /* issue 201 */
    background-color: #202020;
    border: 0px dotted gray;
    overflow: auto;
    height: 99%; /* issue 263 */
}

ul.dynatree-container ul
{
    padding: 0 0 0 16px;
    margin: 0;
}

ul.dynatree-container li
{
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    -moz-background-clip:border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    background-attachment: scroll;
    background-color: transparent;
    background-repeat: repeat-y;
    /* vline.gif */
    background-image:url(data:image/gif;Base64,R0lGODlhEAAQAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwMDcwKbK8P///6Wlpf/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////78KCgpICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAP4ALAAAAAAQABAAAAgpAP0JFHhvoMGDCBMiLKiwocOBDB9KXDixosGIFidizPhwI8eGHj8KDAgAOw==);
    background-position: 0 0;
    margin: 0;
    padding: 1px 0 0 0;
}
ul.dynatree-container li.dynatree-lastsib
{
    background-image: none;
}
ul.dynatree-no-connector > li
{
    background-image: none;
}
.ui-dynatree-disabled ul.dynatree-container
{
    opacity: 0.5;
    background-color: silver;
}
span.dynatree-empty,
span.dynatree-vline,
span.dynatree-connector,
span.dynatree-expander,
span.dynatree-icon,
span.dynatree-checkbox,
span.dynatree-radio,
span.dynatree-drag-helper-img,
#dynatree-drop-marker
{
    width: 16px;
    height: 16px;
    display: inline-block; /* Required to make a span sizeable */
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: left;
    /* icons Expand / Collapse tree */
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABwCAYAAACuE3ZzAAAA+UlEQVR4nO3YYY6CMBAG0HazJ9QjrMfSI+AV9YepwQ0IWVgmOO8lxIL5jOmMQlsKAAAAAAAAAAAAAAAAAAAAwCfquvMtMk80HZCdDsiuVXDu69p5oqlMdjogOx2QnQ7ILnotEJ1PpZYyb8aOx1Mde2/P+e82OBx+RsPX62Xq83eb/xq6WOvoZM+yNL+lwQnI5GUCaq3P6vXHzdR6fq18/9gk33XnW18p5eV86k9m7fxv/5n3Exi6+Cji3y3Nb+l5G5xzq3ln73n6op/Fo/NEVyA6T3QFovOp2A9og72u55fm7QdEf4Fo9gPawH5AUvYD2iB6PR6dB3K6A7CRDkvQMF4HAAAAAElFTkSuQmCC);
    background-position: 0 0;
}
ul.dynatree-container img
{
    width: 16px;
    height: 16px;
    margin-left: 3px;
    vertical-align: top;
    border-style: none;
}
span.dynatree-connector
{
    background-position: -16px -64px;
}
span.dynatree-expander
{
    background-position: 0px -80px;
    cursor: pointer;
}
.dynatree-exp-cl span.dynatree-expander /* Collapsed, not delayed, last sibling */
{
    background-position: 0px -96px;
}
.dynatree-exp-cd span.dynatree-expander /* Collapsed, delayed, not last sibling */
{
    background-position: -64px -80px;
}
.dynatree-exp-cdl span.dynatree-expander /* Collapsed, delayed, last sibling */
{
    background-position: -64px -96px;
}
.dynatree-exp-e span.dynatree-expander,  /* Expanded, not delayed, not last sibling */
.dynatree-exp-ed span.dynatree-expander  /* Expanded, delayed, not last sibling */
{
    background-position: -32px -80px;
}
.dynatree-exp-el span.dynatree-expander,  /* Expanded, not delayed, last sibling */
.dynatree-exp-edl span.dynatree-expander  /* Expanded, delayed, last sibling */
{
    background-position: -32px -96px;
}
.dynatree-loading span.dynatree-expander  /* 'Loading' status overrides all others */
{
    background-position: 0 0;
    /*background-image: url("loading.gif");*/
}
span.dynatree-icon /* Default icon */
{
    margin-left: 3px;
    background-position: 0px 0px;
}
.dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
{
    /** Closed Folder Icon **/
    background: url(data:image/gif;base64,R0lGODlhEAAOALMIAOC6eJdaH61zLZ9oJMOHNP/Sg//inv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAgALAAAAAAQAA4AAAQ9EMlJq72XaIKnOOAhdIRhFgCwaRQRviE3lWZtB5Rg78bo8TafZFAoGo8DSuDILOAmAUHT+JwMrthsZ4uIAAA7)
}
.dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
{
    /** Open Folder Icon **/
    background:url(data:image/gif;base64,R0lGODlhEAAOALMIAJdaH+C6eJ9oJMOHNK1zLf/inv/Sg////////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAgALAAAAAAQAA4AAARAEMlJq7136IEnOeBBdENhGkGwadQQviE3lWZtAxRhE3zvIzpT0HYaCQwGAnLJHCEASabU+VRKl1SJYMvtdr6ICAA7);
}
span.dynatree-node
{
    /*	display: -moz-inline-box; /* issue 133, 165, 172, 192. removed for issue 221*/
    /*	-moz-box-align: start; /* issue 221 */
    /*  display: inline-block; /* Required to make a span sizeable */
}
ul.dynatree-container a
{
    color: black; /* inherit doesn't work on IE */
    text-decoration: none;
    vertical-align: top;
    margin: 0px;
    border: 1px solid transparent;
    color:white;
}
ul.dynatree-container a:hover
{
    /*	text-decoration: underline; */
    background-color: #E9EDEF;
    border: 1px solid #aaa;
    color:black;
}
span.dynatree-node a
{
    /*font-size: 10pt; /* required for IE, quirks mode */
    display: inline-block; /* Better alignment, when title contains <br> */
    padding-left: 2px;
    padding-right: 3px; /* Otherwise italic font will be outside bounds */
}
span.dynatree-folder a
{
}
ul.dynatree-container a:focus,
span.dynatree-focused a:link  /* @IE */
{
}
span.dynatree-has-children a
{
}
span.dynatree-expanded a
{
}
span.dynatree-selected a
{
}
span.dynatree-active a
{
    font-weight: bold;
    /*background-color: #3169C6 !important;
    color: white !important; /* @ IE6 */
}

/* My's styles */
form input{
    background: #222;
    border: 1px solid #5f5d5d;
    text-align: center;
    height: 25px;
    color: #fff;
    margin: -1px 0;
}
form input:focus{
    outline: none;
}
marquee{
    text-shadow: 5px 5px 5px #121212, 5px 5px 5px #0c0c0d,5px 5px 5px #0d0d0d ;
}
.navlist{
    display: flex;
    margin-top: 5px;
}
.navlist a{
    font-family: "MontSerrat", "Tahoma";
    text-decoration: none;
    color: white;
    font-size: 12px;
    font-weight: 17px;
    font-weight: Bold;
    margin: 0 8px;
    margin-left: 5px;
    transition: all .45s ease;
    padding-top: 6px;		
}
.navlist img:hover{
    filter:sepia();
    transition: all .45s ease;
}
.navlist a:hover{
    color: #ee9e09;
    transition: all .45s ease;
}

#container{
    margin-top:10px; 
    overflow: auto; 
    width: 100%; 
    max-width: 800px;	
    height: calc(100% - 70px);
    border:solid 1px #fff;
    user-select: none;
    align-content:center;
}

.big_buttons{
    font-weight: bold; 
    height: 50px; 
    width: 150px; 
    font-size: 16px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    cursor:pointer;
}

.rotar{
  transform: rotate(0);
}

#not_found{
    color:#fff !important;
    justify-content: center;
    text-align: center;
    font-size: large;
    font-weight: bolder;
}