/* ICON-colors: colrx used in icon class $icoc: */
    .colr0 { color: #0157b3;    }                           /* fa-folder          */
    .colr1 { color: #26b99a;    }                           /* fa-file-image      */
    .colr2 { color: #E16666;  background-color: gold;  }    /* fa-file-archive    */
    .colr2 { color: #E16666;    }                           /* fa-file-archive    */
    .colr3 { color: #cc4b4c;    }                           /* fa-file-code       */
    .colr4 { color: #0096e6;    }                           /* fa-file-alt        */
    .colr5 { color: #d75e72;    }                           /* fa-html5           */
    .colr6 { color: #09c55d;    }                           /* fa-file-excel      */
    .colr7 { color: #f6712e;    }                           /* fa-file-powerpoint */
    .colr8 { color: #f36fa0;    }                           /* fa-file-css3       */
    .colr9 { color: DodgerBlue; }                           /* fa-link            */
    .colrg { color: #cccccc;    }                           /* Gray               */
    
    :root { --lablBgrnd: #cdff9b; }                         /* Redefine default   */
    
    .txtbutt {
        text-decoration: none; 
        padding: 2px; 
        margin-right:4px;
        border: 1px solid lightgray; 
        color: blue; 
        box-shadow: 2px 2px 1px lightgray;
    }
    
    .file-name-div {   /* live-preview */
        position: relative;
    }
    .live-preview-img {
        display: none;
        border: 1px solid lightgray;
        position: absolute;
        top: 1.4em;
        left: 40px;
        z-index: 10;
        max-width: 800px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKklEQVR42mL5//8/Azbw+PFjrOJMDCSCUQ3EABZc4S0rKzsaSvTTABBgAMyfCMsY4B9iAAAAAElFTkSuQmCC)
    }
    /* File icon preview (fePv script): the image or the start of the text, the file information of Analyse mode below */
    .feFileIc { cursor: zoom-in; }
    .fePv { position: fixed; z-index: 3000; max-width: min(700px, 92vw); max-height: 75vh; overflow: hidden; pointer-events: none;
            background: #fff; color: #222; border: 1px solid #b9b9b9; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
            padding: 6px 8px; font: 12px/1.35 Arial, sans-serif; text-align: left; }
    .fePv[hidden] { display: none; }
    .fePvHead { font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fePvHead small { font-weight: normal; color: #666; }
    .fePvBody img { display: block; max-width: 100%; max-height: 50vh; margin: auto;
                    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
    /* Cards: the same width when folded (wdth: 800px) - the full width card counts its border too, and never wider than the window */
    [id^=card].cardWmax { box-sizing: border-box; max-width: min(100%, calc(100vw - 32px)); }
    .fePvTbl { border-collapse: collapse; font: 11px/1.35 Arial, sans-serif; background: #fff; }
    .fePvTbl td { border: 1px solid #d0d7de; padding: 1px 5px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .fePvTbl tr:first-child td { background: #eef3f8; font-weight: 600; }
    .fePvTblWrap { max-height: 56vh; overflow: hidden; }
    .fePvCode { display: flex; max-height: 56vh; overflow: hidden; background: #f6f8fa; border-radius: 4px; }
    .fePvCode pre { margin: 0; padding: 4px 8px 4px 6px; white-space: pre; tab-size: 4; font: 11px/1.4 Consolas, monospace; color: #24292e; }
    .fePvCode pre.fePvLn { padding: 4px 6px; color: #a0a0a0; text-align: right; background: #eceff2; user-select: none; }
    .fePv-txt { min-width: 260px; }
    .hl-c { color: #6a737d; font-style: italic; }   .hl-s { color: #032f62; }   .hl-k { color: #d73a49; }   .hl-n { color: #005cc5; }
    .hl-v { color: #e36209; }   .hl-t { color: #22863a; }   .hl-a { color: #6f42c1; }   .hl-p { color: #005cc5; }   .hl-h { color: #005cc5; font-weight: bold; }
    .fePvBody video { display: block; max-width: min(480px, 88vw); max-height: 50vh; background: #000; }
    .fePvBig { font-size: 64px; line-height: 1; text-align: center; color: #888; padding: 6px 30px; }
    .fePvFontS { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; line-height: 1.3; }
    .fePvPdf { display: block; width: min(440px, 88vw); height: min(560px, 62vh); border: 0; background: #fff; }
    .fePv pre.fePvNote { margin: 0; font: inherit; }
    /* Transfer card: write folders, basket, upload */
    .feXfer { padding: 2px 10px; line-height: 1.6; text-align: left; }
    .feXfRow { margin: 4px 0 8px; }
    .feXfHere { color: #1b7a32; }
    .feXfBtn { border-radius: 54px; padding: 2px 12px; margin: 2px 4px 2px 0; background: ivory; }
    .feXfBtn:disabled { opacity: .5; cursor: default; }
    .feBkList { border-collapse: collapse; margin: 4px 0 2px 18px; font-size: 13px; }
    .feBkList td { padding: 1px 8px 1px 0; vertical-align: middle; }
    .feBkList .feBkSize { text-align: right; color: #555; white-space: nowrap; }
    .feBkDel { border: 0; background: none; color: #b00020; cursor: pointer; padding: 0 4px; }
    .feXfSum { margin-left: 18px; color: #555; font-size: 12px; }
    .feXfDest { margin: 4px 0 2px; }
    .feXfDestRow input { width: min(360px, 60vw); padding: 2px 6px; border: 1px solid #9aa5b1; border-radius: 4px; font: inherit; }
    /* Users and password cards */
    /* Dark theme: the parts of Folder-explorer with their own colours */
    [data-theme="dark"] .fe-drop { background: #1d2731; border-color: #4b6a85; color: #d6dde4; }
    [data-theme="dark"] .fe-drop.fe-over { background: #1f3a26; }
    [data-theme="dark"] .feFileName.feOn { background: #2d4a6b; color: #fff; }
    [data-theme="dark"] .feNiceSec h4 { color: #8cc4f0; }
    [data-theme="dark"] .feXfSum, [data-theme="dark"] .feBkList .feBkSize, [data-theme="dark"] .feUsrTbl th,
    [data-theme="dark"] .feSelDest, [data-theme="dark"] .feXfHere { color: #aeb8c2; }
    [data-theme="dark"] .feUsrNew td { border-top-color: #555; }
    [data-theme="dark"] .fePm, [data-theme="dark"] .fePv { background: #232a31; color: #e3e7eb; border-color: #4a5560; }
    [data-theme="dark"] .fePmItem:hover, [data-theme="dark"] .fePmItem:focus-visible { background: #2d4a6b; }
    [data-theme="dark"] .fePmItem:disabled, [data-theme="dark"] .fePmItem:disabled i { color: #6c7680; }
    [data-theme="dark"] .fePmHead, [data-theme="dark"] .fePvHead small, [data-theme="dark"] .fePmFoot, [data-theme="dark"] .fePvNote { color: #aeb8c2; }
    [data-theme="dark"] .fePmSep, [data-theme="dark"] .fePmHead { border-color: #4a5560; background-color: transparent; }
    [data-theme="dark"] .fePmSep { background: #4a5560; }
    [data-theme="dark"] .fePvTbl { background: #1d2731; }
    [data-theme="dark"] .fePvTbl td { border-color: #3a4a58; }
    [data-theme="dark"] .fePvTbl tr:first-child td { background: #26384a; }
    [data-theme="dark"] .fe-drop .fe-pick { color: #8cc4f0; background: #24323f; border-color: #4b6a85; }
    [data-theme="dark"] .fePmItem.fePmDel, [data-theme="dark"] .fePmItem.fePmDel i { color: #ff7a8a; }
    /* Nice to know: sections in columns */
    .feSelDest { display: block; margin: 4px 0 2px; color: #555; }
    .feNice { columns: 2 340px; column-gap: 22px; font-size: 12.5px; line-height: 1.45; }
    .feNiceSec { break-inside: avoid; margin-bottom: 8px; }
    .feNiceSec h4 { margin: 2px 0 2px; font-size: 13px; color: #1a5276; }
    .feNiceSec ul { margin: 0; padding-left: 16px; }
    .feNiceSec li { margin: 1px 0; }
    .feUsers { text-align: left; }
    .feUsrTbl { border-collapse: collapse; margin-bottom: 6px; }
    .feUsrTbl th { text-align: left; font-size: 12px; color: #555; padding: 2px 6px; border-bottom: 1px solid #ddd; }
    .feUsrTbl td { padding: 3px 4px; vertical-align: middle; text-align: left; }
    .feUsrTbl .feXfBtn { padding: 2px 9px; margin: 0; }
    .feUsrTbl input, .feUsrTbl select, .fePwForm input { padding: 2px 5px; border: 1px solid #9aa5b1; border-radius: 4px; font: inherit; }
    .feUsrNew td { border-top: 1px dashed #ccc; }
    .feUsrDel { color: #b00020; }
    .fePwForm label { display: inline-block; margin: 0 10px 6px 0; }
    /* Menu on the file name (fe-preview.js) */
    .feFileName { cursor: context-menu; border-radius: 3px; }
    #tblSpan0 tr { -webkit-touch-callout: none; }      /* A long press opens the file / folder menu (not the callout of iOS) */
    .feFileName.feOn { background: #e3eefc; }
    .fePm { position: fixed; z-index: 3001; min-width: 190px; padding: 4px; background: #fff; color: #222; text-align: left;
            border: 1px solid #b9b9b9; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font: 13px/1.3 Arial, sans-serif; }
    .fePm[hidden] { display: none; }
    .fePmItem { display: block; width: 100%; padding: 5px 10px; border: 0; border-radius: 4px; background: none; color: inherit;
                font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
    .fePmItem:hover, .fePmItem:focus-visible { background: #e3eefc; outline: none; }
    .fePmItem i { width: 18px; text-align: center; margin-right: 6px; color: #4a6fa5; }
    .fePmItem.fePmDel i, .fePmItem.fePmDel { color: #b00020; }
    .fePmItem:disabled, .fePmItem:disabled i { color: #aaa; cursor: default; background: none; }
    .fePmSep { height: 1px; margin: 4px 6px; background: #ddd; }
    .fePmHead { padding: 3px 10px 5px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; border-bottom: 1px solid #ddd; margin-bottom: 3px; }
    .fePmFoot { padding: 3px 10px 1px; color: #888; font-size: 11px; font-style: italic; }
    .fePvNote { color: #666; font-style: italic; }
    .fePvInfo { margin-top: 5px; padding-top: 4px; border-top: 1px solid #ddd; }
    .fePvInfo .left { margin: 0 !important; }

.modal {            /* The Modal (background) */
  display: none;    /* Hidden by default */
  position: fixed;  /* Stay in place */
  z-index: 1;       /* Sit on top */
  left: 0;
  top: 0;
  margin: auto;
  width: 600px;
  height: 100%;     /* Full height */
  overflow: auto;   /* Enable scroll if needed */
  background-color: rgb(0,0,0);         /* Fallback color */
  background-color: rgba(0,0,0,0.4);    /* Black w/ opacity */
}

.modal-header {     /* Modal Header */
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {       /* Modal Body */
  padding: 2px 16px;
}

.modal-footer {     /* Modal Footer */
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-content {    /* Modal Content/Box */
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

@keyframes animatetop { /* Add Animation */
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

.close {    /*  The Close Button */
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.dropbtn {          /*  Dropdown Button  */
  color: #4CAF50;
  background-color: white;
  padding: 6px;
  font-size: 14px;
  border: 1px solid green;
  cursor: pointer;
}
.dropbtn:hover, 
.dropbtn:focus {    /*  Dropdown button on hover & focus  */
  background-color: #3e8e41; 
  color: black;
}
#searchInput {      /* The search field  */
  box-sizing: border-box;
  /* background-image: url( 'searchicon.png');  */
  font-family: "Font Awesome 5 Free";   content: "\f002";
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 14px;
  width:100%;
  padding: 5px 10px 6px 14px;
  border: none;
  border-bottom: 1px solid #ddd;
}
#searchInput:focus {            /*  The search field when it gets focus/clicked on  */
    outline: 3px solid #ddd;
}
.dropdown {                     /*  The container <div> - needed to position the dropdown content  */
  position: relative;
  display: inline-block;
}

.dropdown-content {             /*  Dropdown Content (Hidden by Default) */
  /*  width:170%; */
  position: absolute;
  display: none;
  background-color: #f6f6f6;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {            /* Links inside the dropdown  */
  color: black;
  padding: 2px 6px;
  text-decoration: none;
  font-size: 12px;
  display: block;
}

.dropdown-content a:hover {      /* Change color of dropdown links on hover  */
    background-color: #f1f1f1;
    color: blue;
}
 
/* fe_hint(): the hint opens below its own element (abbr.hint data-hint is otherwise placed from the nearest positioned box) */
/* Folder tree: drawn lines (├ └ │) - one level = one step of the Level ruler */
ul.feTree { list-style: none; margin: 0; padding: 0 0 0 7px; line-height: 1.25; }      /* The line just below the icon of the parent folder */
ul.feTree:not(li > ul) { padding-left: 30px; }      /* Room for the level numbers at the far left */
ul.feTree:not(li > ul) > li { padding-left: 28px; }  /* Then one level = 50px */
ul.feTree:not(li > ul) > li::before { width: 23px; }
ul.feTree li { position: relative; padding: 1px 0 1px 43px; white-space: nowrap; }    /* 7 + 43 = 50px: one step of the Level ruler */
ul.feTree li::before { content: ""; position: absolute; left: 0; top: 0; width: 38px; height: 0.8em;
    border-left: 1px solid #9aa5b1; border-bottom: 1px solid #9aa5b1; border-bottom-left-radius: 4px; }
ul.feTree li::after { content: ""; position: absolute; left: 0; top: 0.8em; bottom: 0; border-left: 1px solid #9aa5b1; }
ul.feTree li:last-child::after { display: none; }
ul.feTree .feTreeIc { color: #d9a400; margin-right: 5px; font-size: 0.9em; }
ul.feTree a { text-decoration: none; }
ul.feTree a:hover { text-decoration: underline; }
ul.feTree .feLvl { position: absolute; width: 22px; top: 2px; text-align: right; font: 11px monospace; color: #8a94a0; }
ul.feTree li.feHere > .feLvl { color: #b07d00; font-weight: bold; }
.feTreeWrap { text-align: left; border: 1px solid gray; padding-bottom: 2px; overflow-x: auto; overflow-y: hidden; }
.feRuler { position: relative; height: 18px; margin-top: 6px; border-top: 1px dashed #c5ccd3; font: 11px monospace; color: #8a94a0; white-space: nowrap; }
.feRuler span { position: absolute; top: 3px; }
ul.feTree .feTreeSize { font: 11px monospace; color: #5d6b78; }
ul.feTree .feTreeNum { display: inline-block; min-width: 10ch; text-align: right; }
.feDetTools { text-align: center; padding-top: 10px; }
.feDetTools.feInHead { float: right; padding: 0; margin: -3px 14px -3px 0; cursor: default; }
.feInHead .feModeSw { height: 28px; }
.feDetTools.feInHead { display: flex; align-items: center; gap: 8px; }          /* (frmMode is inside the card form "xxx": the browser drops the inner form tag) */
.feInHead span:has(> #FileSearch) { position: relative; }                       /* The search list opens below the field */
.feInHead .inpField { padding: 0 !important; width: auto !important; vertical-align: middle !important; }
.feInHead .fieldContent { padding: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; }
.feInHead .inpField label { display: none; }                                    /* No "Search" label: the icon says it */
.feInHead .dropbtn { height: 28px; box-sizing: border-box; display: flex; align-items: center; padding: 0 12px !important; border: 1px solid #9aa5b1 !important;
    border-radius: 14px; white-space: nowrap; cursor: pointer; font-size: 13px; }
.feInHead .dropbtn[aria-disabled=true] { cursor: default; color: #888; }
.feInHead .dropdown-content { right: 0; top: calc(100% + 4px); text-align: left; z-index: 1000; }      /* Above the sticky table header */
.feInHead .inpField { position: relative; }
.feInHead .inpField:hover > abbr.hint data-hint {                               /* The hint of the (hidden) label: when the mouse is over the field */
    display: block; position: absolute; left: 0 !important; top: calc(100% + 6px) !important; width: 200px; min-width: 160px;
    border: solid 1px #aaa; border-radius: 6px; box-shadow: 3px 3px 3px var(--ButtnShad); white-space: pre-line; overflow-wrap: break-word;
    background-color: var(--HintsBgrd); color: var(--HintsText); font-style: normal; font-weight: 400; font-size: 12px; text-align: center; padding: 5px 3px; z-index: 1001; }
.feInHead span:has(> #FileSearch.show) .inpField abbr.hint data-hint { display: none; }   /* Not over the open file list */
.feModeSw { display: inline-flex; padding: 0; border: 1px solid #9aa5b1; border-radius: 17px; overflow: hidden; background: #fff; cursor: pointer; height: 33px; vertical-align: middle; box-shadow: none; }
.feModeSw > span { display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; color: #555; font-size: 13px; }
.feModeSw[aria-pressed=false] > .feMq, .feModeSw[aria-pressed=true] > .feMa { background: #3c8dbc; color: #fff; }
.feModeSw:hover > span:not(:only-child) { filter: brightness(0.97); }
.feModeSw:focus-visible { outline: 2px solid #3c8dbc; outline-offset: 2px; }
.feRelSw button { font-size: 12px; padding: 1px 9px; margin: 0; border: 1px solid #9aa5b1; background: #fff; color: #333; cursor: pointer; box-shadow: none; }
.feRelSw button:first-of-type { border-radius: 10px 0 0 10px; }
.feRelSw button:last-of-type  { border-radius: 0 10px 10px 0; border-left: 0; }
.feSizeCol.fePending .feTreeNum { color: #999; }
.feSizeCol .feCount { cursor: pointer; color: #3c8dbc; }
.feCountAll { font-size: 12px; padding: 1px 9px; margin-left: 8px; border: 1px solid #9aa5b1; border-radius: 10px; background: #fff; cursor: pointer; }
.feRelSw button[aria-pressed=true] { background: #3c8dbc; border-color: #3c8dbc; color: #fff; }
ul.feTree .feSizeCol { position: absolute; top: 2px; }    /* One column for all levels: --feSizeX is set from the widest folder name */
ul.feTree .feTreeBar { display: inline-block; width: 50px; height: 7px; margin-right: 5px; border: 1px solid #b9c3cc; border-radius: 3px; vertical-align: middle; background: #f3f5f7; overflow: hidden; }
ul.feTree .feTreeBar > span { display: block; height: 100%; background: #3c8dbc; }
ul.feTree li.feHere > abbr > a { background: #fff3c4; border-radius: 3px; padding: 0 4px; }
abbr.hint.feHint { position: relative; display: inline-block; text-decoration: none; }
abbr.hint.feHint:hover data-hint, abbr.hint.feHint:focus-within data-hint { left: 0; top: calc(100% + 4px); }

/* Exchange area upload (fe-upload.js) */
.fe-drop { border: 2px dashed #9bbbd6; border-radius: 10px; padding: 12px; margin: 6px 0; text-align: center; background: #f7fbff; }
.fe-drop.fe-over { border-color: green; background: #eaffea; }
.fe-js { display: none; }
#feUpload.fe-ready .fe-js { display: inline-block; }
#feUpload.fe-ready .fe-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }   /* Hidden, but still reachable with the keyboard */
.fe-pick:focus-within { outline: 2px solid DodgerBlue; }
.fe-pick { position: relative; }
.fe-pick { cursor: pointer; display: inline-block; margin: 6px 4px 0; }
.fe-list table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 12px; }
.fe-list th, .fe-list td { border-bottom: 1px solid #ddd; padding: 2px 6px; text-align: left; }
.fe-list td.fe-size { text-align: right; font-family: monospace; white-space: nowrap; }
.fe-list .fe-bad  { color: #b00020; }
.fe-list .fe-good { color: #1a6e1a; }
.fe-list .fe-wrap { max-height: 260px; overflow: auto; }

.show {     /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button)  */
    display:block;
}