header i.fa-file-upload {
    font-size: 2rem;
}


.draghelper {
    position: absolute;
    z-index: 1000;
}

.draghelper.accept {
    transition-property: left, top, width, height;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
}

.draghelper s {
    display: block;
    position: absolute;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: dotted;
    border-width: 0;

}

.draghelper.accept s {
    border-color: rgba(0, 128, 0, 1);
}

.draghelper s:nth-child(even) {
    border-top-width: 2px;
    width: 100%;
    height: 2px;
    top: 100%;
    left: 100%;
}

.draghelper s:nth-child(odd) {
    border-left-width: 2px;
    width: 2px;
    height: 100%;
    top: 100%;
    left: 100%;
}

.draghelper s:nth-child(3) {
    left: 200%;
}

.draghelper s:nth-child(4) {
    left: 100%;
    top: 200%;
}

/* ******************* CONTEXMENU ************** */
div.contextmenu{
    z-index: 999;
}
ul.contextmenu,
ul.contextmenu ul {
    position: absolute;
    background: #303030;
    color: white;
    z-index: 100;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    padding: 5px;
    box-shadow: 7px 17px 17px 1px rgba(0, 0, 0, .07);
}

ul.contextmenu li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

ul.contextmenu li hr {
    width: calc(100% + 10px);
    margin: 5px 0 5px -5px;
}

ul.contextmenu a {
    text-decoration: none;
    padding: 5px;
    display: block;
    margin: 0;
    color: white;
    white-space: nowrap;
    font-size: 1.6rem;
    min-width: 50px;
}
ul.contextmenu div.span{
    border-collapse: collapse;
    position: relative;
}
ul.contextmenu div.span div{
    position: absolute;
    left: 0;
    top:0;
    border: 1px solid #aaaaaa;
    cursor: pointer;
}
ul.contextmenu div.span div:hover{
    background: rgba(255,255,255,0.3);
}
ul.contextmenu div.span div.selected{
    background: rgba(255,255,255,0.3);
}

ul.contextmenu a:hover,
ul.contextmenu li.selected a,
ul.contextmenu li a.selected {
    background: #000;
}

ul.contextmenu form {
    white-space: nowrap;
}

/* ******************* CONTEXMENU SUB ************** */
ul.contextmenu ul {
    left: 100%;
    visibility: hidden;
    transition: visibility 0.1s;
}

ul.contextmenu li:hover ul {
    visibility: visible;
}

ul.contextmenu ul li a {
}

/* ******************* HOVER LAYER ************** */
.hoverLayer{
    position: relative;
}

.hoverLayer.download:after{
    display: flex;
    align-items: center;
    justify-content:center;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content:'\f019';
    font-size: 4rem;
    color:#fff;
    position: absolute;
    transform: translateY(-4.5rem);
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0;
    visibility: hidden;
}

.hoverLayer:before{
    content: attr(data-text);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.6);
    transition: ease-in-out opacity .2s;
    color:#fff;
    font-weight: 600;
    display: flex;
    font-size:1.6rem;
	padding-bottom: 1rem;
    align-items: end;
    justify-content:center;
    opacity: 0;
    visibility: hidden;
}

.hoverLayer:hover:before,
.hoverLayer:hover:after{
    opacity: 1;
    visibility: visible;
}


/* ******************* DARK MODE ************** */

@media (prefers-color-scheme: dark) {
    .headerlogo {
	background-image: url("../img/Logo_white.svg");
    }

    .menu {
	background: #2B2B2B;
	border-bottom-color: #999;
    }



    div.lightbox section,
    div.lightbox footer,
    div.lightbox div[class*="uploader"] h3,
    body section.widget div.searchResults > div,
    section.widget footer {
	background: #2B2B2B;
    }

    div.lightbox header,
    div.lightbox footer,
    section.widget footer {
	border-color: #999;
    }

    ul.subNavi {
	background: #2B2B2B;
    }

    .subNavi li {
	border-bottom-color: #3C3F41;
    }

    .subNavi li:hover {
	border-bottom-color: #fff;
    }

    .menu *,
    ul.subNavi *,
    a{
	color: #fff;
    }

    section.widget:not(.transparent) {
	background: #2B2B2B !important;
    }

    div.widgetSizer {
	filter: invert();
    }

    body div.widgetSizer.closed:before {
	background: #2B2B2B;
    }

    div.widgetSizer.closed {
	filter: none;
    }

    body div.widgetSizer.closed i {
	color: #fff;
    }

    div.widgetSizer i {
	color: black;
    }

    .button, button {
	color: #000;
	background: #fff;
    }

    .button:hover, button:hover:not([disabled]) {
	color: #fff;
	background: #000;
    }

    input[type="text"], input[type="search"], input[type="password"], input[type="number"], select {
	background: transparent;
	border-color: #fff;
    }

    section.widget header {
	border-bottom-color: #999 !important;
    }

    body {
	background: #3C3F41;
	color: #fff;
    }

    input,
    input::placeholder,
    section.toolbar header input::placeholder {
	color: #fff !important;
    }

    div.addWidget ul {
	background: #2B2B2B !important;
    }

    input[type="checkbox"], input[type="radio"] {
	filter: invert();
    }

    select,
    ul.barmenu li i {
	color: #fff;
    }

    hr {
	border-color: #e5e5e5;
    }

    [contenteditable] {
	outline-color: #fff;
    }

    body div.addWidget i.fa-plus-circle:before {
	background: #2B2B2B;
    }

    input[type="text"], input[type="search"], input[type="password"], input[type="number"], select, .input {
	border-color: #fff;
    }

    header i.fa-file-upload {
	color: #fff;
    }

    tr:nth-child(2n+1) td {
	background: rgba(255, 255, 255, .06);

    }

    tr td,
    tr td i {
	color: #fff;
    }

    div.controls {
	filter: invert();
    }

    div.controls p {
	color: #000;
    }

    div.dragimage > div {
	border-color: #fff !important;
    }

    .dragimage div.scaling,
    .dragimage div.rotate{
	filter: invert();
    }

    datalist{
	filter: invert();
    }

    h1.stage{
	color:rgba(255,255,255,.3);
    }

    div.message p{
	color:#fff;
    }
}