:root {
	--highlight: #e6510d;
	--lowlight: #fdaf01;
	--infolight: #ffffff;
	--greylight: #63595d;
	--pagelight: #2c1825;
	--blacklight: #000000;
	--shadowlight: #111111;
	--neonlight: #000000;
	--ghostlight: #FFFFFF4B;
	--rowlight: #00000023;
	--maskOpacity: 0.75;
	--backgroundColor: white;
}

body {
	background-color: var(--pagelight);
	font-family: "Futurist Regular";
	color: var(--infolight);
	padding: 0;
	margin: 0;
	--files_offset: 0;
}

@font-face {
	font-family: 'Futurist Fixed-width';
	font-style: normal;
	font-weight: normal;
	src: local('Futurist Fixed-width'), url('FUTRFW.woff') format('woff');
}

@font-face {
	font-family: 'Futurist Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Futurist Regular'), url('futurist.woff') format('woff');
}

@font-face {
	font-family: 'GravitasOne';
	font-style: normal;
	font-weight: normal;
	src: local('GravitasOne-Regular'), url('GravitasOne-Regular.ttf') format('ttf');
}

@font-face {
	font-family: 'Comfortaa-VariableFont_wght';
	font-style: normal;
	font-weight: normal;
	src: local('Comfortaa-VariableFont_wght'), url('Comfortaa-VariableFont_wght.ttf') format('ttf');
}

@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}
@-webkit-keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
		color: var(--lowlight);
	}
	40% {
		box-shadow: 0 2.5em 0 0;
		color: var(--highlight);
	}
}
@keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
		color: var(--greylight);
	}
	40% {
		box-shadow: 0 2.5em 0 0;
		color: var(--highlight);
	}
}
@media print {
	#oref1, #oref2, #oref3, #oref4, #oref5, #oref6, #oref7, #oref8, #oref9, #oref11, .section_controls {
		display: none;
	}
	#oref7 .grid .file_container, #oref7 .grid .selected, #oref7 .thumbs .file_container, #oref7 .thumbs .selected {
		border: none;
	}
	body {
		background-color: #fff;
	}
}
#oref2 {
	position: fixed;
	bottom: 0;
	left: 0;
	//height: 50px;
	padding-left: 10px;
	font-size: 2em;
	color: var(--infolight);
	text-shadow:
	3px 3px 0 #000,
	-1px -1px 0 #000,  
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 1250;
	font-family: "Futurist Regular";
	text-shadow: -1px -1px 0 var(--pagelight), 1px -1px 0 var(--pagelight), -1px 1px 0 var(--pagelight), 1px 1px 0 var(--pagelight);
}
#oref2 span, #oref2 input {
	display: inline-block;
}
.no-text-selection {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#shell {
	display: inline-block;
	font-size: 1em;
	color: ;
	background-color: transparent;
	border: 0;
	outline: none;
	color: var(--infolight);
	font-family: "Futurist Regular";
	text-shadow: -1px -1px 0 var(--pagelight), 1px -1px 0 var(--pagelight), -1px 1px 0 var(--pagelight), 1px 1px 0 var(--pagelight);
}
#textbox {
	position: absolute;
	bottom: 0;
	left:0;
	padding: .3em;
	text-align: right;
	color: var(--infolight);
	z-index: 200;
}
#textbox input {
	position: relative;
	font-size: 2em;
	color: var(--lowlight);
	background-color: transparent;
	border: 0;
	outline: none;
}
#textbox button {
	position: relative;
	font-size: 3em; 
}

#textbox span {
	cursor: pointer; 
}
.center_screen {
	position: fixed;
	top: 35%;
	left: 50%;
}
.tiny {
	font: .6em arial;
	color: rgb(73, 81, 92);
}
.privatemsg {
	color: MEDIUMSLATEBLUE;
}
.publicmsg {
	color: MEDIUMBLUE;
}
.sysmsg {
	font: .6em arial;
	color: CRIMSON;
}
p, h1 {
	-webkit-margin-after: 0;
	-webkit-margin-before: 0;
}
label, li {
	cursor: pointer;
}
.img-circle {
	border-radius: 50%;
}
span[contenteditable="true"] {
	background-color: yellow;
	color: black;
}

.helpbox:hover .popover {
	display: block;
}

.popover {
    background-color: rgba(0,0,0,0.85);
    border-radius: 6px;
    top: 42px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    color: #fff;
    display: none;
    font-size: 12px;
    font-family: 'Helvetica',sans-serif;
    left: -20px;
    padding: 7px 10px;
    position: absolute;
    width: 250px;
    z-index: 40;
}

.popover:before {
	border-bottom: 7px solid rgba(0,0,0,0.85);
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	top: -7px;
	content: '';
	display: block;
	left: 14%;
	margin-left: -7px;
	position: absolute;
}

.popover:hover {
	.popover {
		display: block;
		-webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
		-moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
		-ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
	}
}

@-webkit-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-ms-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}
@-moz-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}
@-ms-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-button {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-thumb {
	background: #e1e1e1;
	background: #666666;
	border: 0px none #ffffff;
	border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
	background: #ffffff;
	background: var(--lowlight);
	width: 10px;
}
::-webkit-scrollbar-thumb:active {
	background: var(--highlight);
}
::-webkit-scrollbar-track {
	background: #333333;
	border: 0px none #ffffff;
	border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
	background: #444;
}
::-webkit-scrollbar-track:active {
	background: #333333;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

.onoffswitch {
	position: relative; width: 45px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
	display: none;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	height: 25px; padding: 0; line-height: 25px;
	border: 2px solid var(--greylight); 
	border-radius: 25px;
	background-color: var(--greylight);
	transition: background-color 0.3s ease-in;
	border-color: var(--greylight);
}
.onoffswitch-label:before {
	content: "";
	display: block; width: 25px; margin: 0px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 18px;
	border: 2px solid var(--greylight); border-radius: 25px;
	transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: var(--highlight);
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
	border-color: var(--highlight);
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
	right: 0px; 
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: var(--lowlight);
	color: var(--ghostlight);
	font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: var(--lowlight);
	color: var(--ghostlight);
	opacity:  1;
	font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: var(--lowlight);
	color: var(--ghostlight);
	opacity:  1;
	font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: var(--lowlight);
	color: var(--ghostlight);
	font-style: italic;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: var(--lowlight);
	color: var(--ghostlight);
	font-style: italic;
}
::placeholder { /* Most modern browsers support this now. */
	color: var(--lowlight);
	color: var(--ghostlight);
	font-style: italic;
}
input[type=radio] {
	position: absolute;
	visibility: hidden;
	display: none;
}

.radiolabel {
	color: var(--infolight);
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	padding: 5px 10px;
}

input[type=radio]:checked + label.radiolabel{
	color: var(--infolight);
	background: var(--highlight);
}

label.radiolabel + input[type=radio] + label.radiolabel {
	border-left: solid 3px var(--highlight);
}
.radio-group {
	border: solid 2px var(--highlight);
	display: inline-block;
	margin: 3px 0px;
	/*border-radius: 10px;*/
	overflow: hidden;
}
.download_settings .radio-group {
	/*font-size: .5em;*/
}
.fit-contain {
	object-fit: contain;
}
.download_settings {
	text-shadow: none;
	font-size: .5em;
}
.to_download a {
	margin: 0 2px;
}
.download_settings input[type=text] {
	height: 14px;
	background: transparent;
	font-size: 12px;
	line-height: 12px;
	color: var(--infolight);
	padding-left: 5px;
	border: 0;
}
input[type=color] {
	padding: 0;
    height: 30px;
    width: 450px;
}

.noshadow {
	text-shadow: none;
}
.container {
	float: left;
	overflow: hidden;
	display: table;
}
.image_box {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	display: table-cell;
	height: 100%;
}
.image_text {
	display: table-row;
	text-align: center;
	font-size: 9pt;
	color: black;
}
.container {
  float: left;
  overflow: hidden;
  display: table;
  /*background-color: lightgrey;*/
}
.image_box {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: table-cell;
  height: 100%;
}
.image_text {
  display: table-row;
  text-align: center;
    font-size: 9pt;
}
.one_up, .two_up, .four_up, .six_up, .eight_up {
  height: 100%;
}
.one_up > .container {
  width: 100%;
  height: 100%;
  height: calc(100% - 2em);
  margin: 0;
}
.two_up > .container {
  width: 100%;
  height: calc(50% - 2.5mm - 1em);
}
.two_up > div:nth-child(2) {
  margin: 0 0 2.5mm 0;
}
.two_up > div:nth-child(3) {
  margin: 2.5mm 0 0 0;
}
/*.landscape .two_up {
  height: 100%;
}*/
.landscape .two_up > .container {
  width: calc(50% - 2.5mm);
  height: calc(100% - 2em);
}
.landscape .two_up > div:nth-child(2) {
  margin: 0 2.5mm 2.5mm 0;
}
.landscape .two_up > div:nth-child(3) {
  margin: 0 0 2.5mm 2.5mm;
}
/*.four_up {
  height: 100%;
}*/
.four_up > .container {
  width: calc(50% - 2.5mm);
  height: calc(50% - 2.5mm - 1em);
}
.four_up > div:nth-child(2) {
  margin-right: 2.5mm;
  margin-bottom: 2.5mm;
}
.four_up > div:nth-child(3) {
  margin-left: 2.5mm;
  margin-bottom: 2.5mm;
}
.four_up > div:nth-child(4) {
  margin-right: 2.5mm;
  margin-top: 2.5mm;
}
.four_up > div:nth-child(5) {
  margin-left: 2.5mm;
  margin-top: 2.5mm;
}
/*.six_up {
  height: 100%;
}*/
.six_up > .container {
  width: calc(50% - 2.5mm);
  height: calc(33% - 2.5mm - .6em);
}
.six_up > div:nth-child(2) {
  margin: 0 2.5mm 2.5mm 0;
}
.six_up > div:nth-child(3) {
  margin: 0 0 2.5mm 2.5mm;
}
.six_up > div:nth-child(4) {
  margin: 2.5mm 2.5mm 2.5mm 0;
}
.six_up > div:nth-child(5) {
  margin: 2.5mm 0 2.5mm 2.5mm;
}
.six_up > div:nth-child(6) {
  margin: 2.5mm 2.5mm 0 0;
}
.six_up > div:nth-child(7) {
  margin: 2.5mm 0 0 2.5mm;
}

.landscape .six_up > .container {
  width: calc(33% - 2.5mm);
  height: calc(50% - 2.5mm - 1em);
}
/*.landscape .six_up > div:first-child {
  margin: 0 2.5mm 2.5mm 0;
}*/
.landscape .six_up > div:nth-child(3) {
  margin: 0 2.5mm 2.5mm 2.5mm;
}
.landscape .six_up > div:nth-child(4) {
   margin: 0 0 2.5mm 2.5mm;
}
.landscape .six_up > div:nth-child(5) {
  margin: 2.5mm 2.5mm 0 0;
}
.landscape .six_up > div:nth-child(6) {
  margin: 2.5mm 2.5mm 0 2.5mm;
}
/*.landscape .six_up > div:nth-child(6) {
  margin: 2.5mm 0 0 2.5mm;
}*/

/*.eight_up {
  height: 100%;
}*/
.eight_up > .container {
  width: calc(50% - 2.5mm);
  height: calc(25% - 3.7mm - .5em);
}
.eight_up > div:nth-child(2) {
  margin: 0 2.5mm 2.5mm 0;
}
.eight_up > div:nth-child(3) {
  margin: 0 0 2.5mm 2.5mm;
}
.eight_up > div:nth-child(n+4):nth-child(even):nth-child(-n+6) {
  margin: 2.5mm 2.5mm 2.5mm 0;
}
.eight_up > div:nth-child(n+5):nth-child(odd):nth-child(-n+7) {
  margin: 2.5mm 0 2.5mm 2.5mm;
}
.eight_up > div:nth-child(8) {
  margin: 2.5mm 2.5mm 0 0;
}
.eight_up > div:nth-child(9) {
  margin: 2.5mm 0 0 2.5mm;
}

.landscape .eight_up > .container {
  width: calc(25% - 3.8mm);
  height: calc(50% - 2.5mm - 1.2em);
}
.landscape .eight_up > div:nth-child(n+3):nth-child(-n+4) {
  margin: 0 2.5mm 2.5mm 2.5mm;
}
.landscape .eight_up > div:nth-child(5) {
  margin: 0 0 2.5mm 2.5mm;
}
.landscape .eight_up > div:nth-child(6) {
  margin: 2.5mm 2.5mm 0 0; 
}
.landscape .eight_up > div:nth-child(n+7):nth-child(-n+8) {
  margin: 2.5mm 2.5mm 0 2.5mm;
}
.page_header {
  margin: 0;
  padding: 5px;
  color: black;
  text-align: center;
}

.appear[data-src], .appear[data-bkg], .appear [data-src], .appear [data-bkg] {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in;
     -moz-transition: opacity 1s ease-in;
          transition: opacity 1s ease-in;
}
.appeared[data-src], .appeared[data-bkg], .appeared [data-src], .appeared [data-bkg] {
  opacity: 1;
}

.b-lazy {
    -webkit-transition: opacity 500ms ease-in-out;
       -moz-transition: opacity 500ms ease-in-out;
         -o-transition: opacity 500ms ease-in-out;
            transition: opacity 500ms ease-in-out;
             max-width: 100%;
               opacity: 0;
}
.b-lazy.b-loaded {
               opacity: 1;
}

#oref4 span {
	pointer-events: none;
}

#drag_badge {
	position: relative;
	top: -70px;
	left: -70px;
	background-color: var(--highlight);
	color: black;
	border-radius: 1em;
	min-width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
}
.stack {
	position: absolute;
	left: -100px;
	top: -100px;
	display: flex;
	align-items: center;
	justify-content: center;

}
.stack > div {
	position: absolute;
}
.stack > div > img {
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.7);
}

#screensaver {
	position: fixed;
	width: 100%;
	height: 100%;
	transition: opacity 2s ease-in-out;
}

body.screensaver div {
	display: none;
}

body.screensaver #screensaver, body.screensaver #slideA, body.screensaver #slideB {
	display: block;
}



#screensaver div {
	opacity: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	transition: opacity 2s ease-in-out;
}

#screensaver div.display {
	opacity: 1;
	transition: opacity 2s ease-in-out;
}

#ident {
	line-height: 100vh;
    opacity: 0;
    text-align: center;
    height: 100vh;
    font-size: 10em;
    font-size: 10vmax;
    # font-family: "Futurist Fixed-width";
    # font-family: 'GravitasOne';
    # font-family: 'Comfortaa-VariableFont_wght';
    text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
    transition: opacity 2s ease-in-out;
}

#screensaver #ident.display {
	opacity: .75;
}

.filelist_filter {
	width: 9em;
	border: none;
	left: 0;
	font-weight: normal;
}
#oref4 > #filelist_filter > .closesettings {
	width: auto;
	height: 16px;
	top: 0;
	transform: rotate(0deg);
	padding: 5px;
	line-height: 1;
	border: none;
	color: var(--ghostlight);
}

#oref4 > #filelist_filter > .closesettings:hover {
	color: var(--highlight);
	background-color: transparent;
}

#oref4 > #filelist_filter > .include_subfolders_icon {
	position: relative;
	color: var(--ghostlight);
	float: right;
	margin-right: .5em;
	top: 0.3em;
	pointer-events: auto;
	cursor: pointer;
}

#oref4 .ghosted > span {
	color: var(--ghostlight);
}

#oref4 .override {
	color: var(--infolight);
}

#oref4 > #filelist_filter > .include_subfolders_icon.active {
	color: var(--highlight);
}

#oref4 > #filelist_filter > .include_subfolders_icon > #include_subfolders_indicator {
	position: absolute;
	font-size: 0.4em;
	top: 0.7em;
	left: 0.4em;
	color: transparent;
}

#oref4 > #filelist_filter > .include_subfolders_icon:hover {
	color: var(--highlight);
}

#oref4 > #filelist_filter > .include_subfolders_icon:hover > #include_subfolders_indicator {
	color: var(--infolight);
}