:root{
	--darker: #13655c;
	--lighter: teal;
	--lightest: #b1e0e0;
	--button-hover: #54cdcd;
	--is-read: #eed1b3;
	--to-read: ##ffffca;
	--reading: #caffcc;
	--admin: blueviolet;
	--admin-dark: #711dbf;
	--alert-red: #db2e2e;
	--alert-red-dark: #fc6262;
	--body-bg: rgb(40, 40, 40);
	--local-line: rgb(120, 90, 50);
	--cream-white: rgb(230, 230, 230);
	--dark-bg: #383737;
	--dark-bg-box: #414141;
	--dark-border: #4c4b4b;
	--dark-text: #a3a3a3;
	--text: #313030;
	--dark-text: #d0d0d0;
	--abandoned: rgb(240, 230, 230);
	--abandoned-dark: rgb(20, 20, 20);

	
	--bright-grey: rgb(240, 240,240);
	--color-authors: #ffd17a;
	--color-texts: lightblue;
	--friend-dark: lightgreen;
	--friend: green;
	--system-dark-active: #dca3dc;
	--system-dark: violet;
	--system: #6e036e;
	--env-local: orange;
	--header-bg: #c8c8c8;
	--ready-green: #007300;
	--ready-green-dark: #0da00d;
	--canceled-red: #901e1e;
}


*{
	box-sizing: border-box;
	/* color: var(--dark-text); */
}


h1,h2,h3,h4,h5,h6,
div,
a,
b,
p,
input,
span,
textarea{
	font-family:  roboto, monospace;
}

body{
	margin: 0px;
    padding: 0px;
	text-align: center;
	color: var(--text);
}
a{
	/* color: white; */
	color: var(--text);
}
.dark a{
	color: var(--dark-text);
}

body,
#side-links{
	background: var(--bright-grey);
	color: var(--text);
}
body.dark,
.dark #side-links{
	background: var(--dark-bg);
	color: var(--dark-text);
}

#dark-toggle{
	user-select: none;
}

#content{
	text-align: left;
	display: inline-block;
	margin-left: 0px;
	width: 100%;

	/* padding: 60px 120px 20px 200px; */
	padding: 60px 20px 20px 200px;
}
.menu-hidden #content{
	padding-left: 60px;
}
.menu-hidden #header{
	display: none;
}
.menu-hidden #side-links{
	display: none;
}

.menu-hidden .page-title-wrap{
	padding-left: 50px;
}

code, code *{
	font-family: sourcecode;
	font-size: .9rem;
	line-height: 1.2rem;
}
.expl{
	font-style: italic;
}
.small{
	font-size: .9rem;
}
.data-embed{
	display: none;
}

#audio{
	display: none;
}

pre{
	white-space: pre-wrap;
}

img,
svg{
	max-width: 100%;
	box-sizing: border-box;
	height: auto;
}

div,
p,
input,
span,
textarea{
	box-sizing: border-box;
}

.clearfloat{
	/* float: none; */
	border: 1px solid transparent;
	display: inline-block;
}
a{
	letter-spacing: 0.5px;
}

.await_confirm #content,
.login #content{
	text-align: center;
}

input[type=checkbox],
input[type=checkbox].input{
	width: 28px;
	height: 28px;
	vertical-align: middle;
	margin: 0 10px;
}

#content > h3 {
	margin-top: 0;
}


.flex-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}


#header{
	display: inline-block;
	position: fixed;
	left: 0;
	top: 00px;
	z-index: 99;

	text-align: right;
	padding: 80px 20px 20px 5px;

	color: var(--text);
	border-bottom: 2px solid var(--dark-border);
	text-align: left;
	background: var(--header-bg);

	min-height: 60px;
	height: 100vh;
	/* z-index:  */
}
.dark #header{
	/* background: var(--dark-bg-box); */
}
.menu-item{
	padding: 10px 0;
	cursor: pointer;
}
.dark .menu-item a{
	color: var(--dark-text);
}
.dark #header .menu-item a{
	color: var(--text);
}
.menu-item:hover{
	color: black;
}
.menu-item a{
	text-decoration: none;
}

.menu-item.svg{
	max-width: 30px;
}

#mobile-toggle{
	/* position: absolute; */
	position: fixed;
	left: 10px;
	top: 10px;
	user-select: none;
	cursor: pointer;
	font-weight: bold;
	background: #fd2424;
	/* background: var(--ready-green); */
	/* background: lightgrey; */
	width: 38px;
	height: 38px;
	padding-top: 4px;
	border-radius: 5px;
	/* box-shadow: 0px 0px 5px black; */

	/* display: none; */
	display: inline-block;
	z-index: 999;
}

#mobile-toggle svg{
	width: 30px;
	max-width: 30px;
	height: auto;
	max-height: 30px;
	background-color: white !important;
	border-radius: 3px;
}
#mobile-toggle path.bg{
	fill: var(--header-grey) !important;
}
.dark #mobile-toggle svg{
	background-color: var(--bright-grey) !important;
	/* display: none; */
}

#mobile-toggle path.bg{
	fill: var(--header-bg) !important;
}
.menu-hidden #mobile-toggle path.bg{
	fill: var(--bright-grey) !important;
}

#mobile-toggle path{
	fill: black !important;
}

/* .dark #mobile-toggle path.bg{
	fill: var(--header-bg) !important;
}
.dark #mobile-toggle path{
} */
.menu-hidden.dark #mobile-toggle path.bg{
	fill: var(--dark-bg) !important;
}
.menu-hidden.dark #mobile-toggle path{
	fill: lightgrey !important;
}

#forgot{
    font-size: .9rem;
    background: transparent;
    margin-top: 50px;
}
#forgot a{
    text-shadow: 0px 0px 0px !important;
    animation: none;
    color: grey;
    text-decoration: none;
}

.local-login{
    background: #e64a66;
    position: absolute;
    z-index: 99;
    bottom: 0px;
    padding: 100px;
    cursor: pointer;
}
.local-login.admin{
    right: 0px;
}



input.input,
textarea.input{
	background: rgba(0, 0, 0, .1);
	border: 0px;
	border-bottom: 2px solid grey;
	padding: 8px;
	font-family: helvetica;
	font-size: 1rem;
	letter-spacing: 1px;
	max-width: 100%;
	/* color: lightgrey; */
}
input[type=file].input{
	border: 0px;
}
.dark input.input,
.dark textarea.input{
	color: lightgrey;
}
select.input{
	padding: 8px;
	background: #272626;
	color: lightgrey;
}

input::placeholder,
textarea::placeholder{
	font-family: helvetica;
	color: #6d6b6b;
}

.input-wrap input,
.input-wrap label{
	display: inline-block;
	/* border: 2px solid; */
	font-size: 1rem;
}



.spinner{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: .3s;
	background: rgba(0, 0, 0, .2);

    display: none;

}
.spinner-msg{
	margin-top: 10px;
	font-style: italic;
	background: radial-gradient(
		white , 
		white, 
		white, 
		white, 
		transparent, 
		transparent, 
		transparent, 
		transparent
	);
	padding: 65px;
	border-radius: 50px;
	color: #313030;
}

.spinner img,
.spinner svg,
.spinner .rotating{
	max-width: 100px !important;
	max-height: 100px !important;
}
/* .spinner.mini , */
.spinner.mini .rotating{
	max-width: 70px !important;
	max-height: 70px !important;
}
.spinner,
.spinner *{
	/* border: 1px solid; */
}


.text-block{
	display: inline-block;
	width: 500px;
	max-width: 100%:
}

#flash-contain{
	position: fixed;
	z-index: 9;
	top: 0; 
	left: 0;
	width: 100%;
	height: 100vh;
	transition: 1s
}
img#flash{
	position: absolute;
	width: 0%;
	max-width: 1000%;
	transition: 1s;
}

#alert-contain{
	position:fixed;
	z-index: 999999;
	bottom: 50px;
	left: 0px;
	text-align: right;
	width: calc( 100% - 20px);
	pointer-events: none;
	padding-top: 10px;
}
.alert-wrap{
	transition: .5s;
}
.alert-wrapper.float-alert{
	position: fixed;
	display: inline-block;
}
.alert-msg{
	position: relative;
	background: white;
	background: rgb(40, 40, 40);
	color: lightgrey;
	font-size: 20px;
	display: inline-block;
	margin: 1px 0;
	padding: 8px 40px 7px 20px;
    pointer-events: initial;
    font-weight: bold;
	box-shadow: 0px 0px 5px black;
	border-radius: 10px;
}
.alert-msg a{
/* 	color: lightblue; */
}
.alert-msg pre{
	max-height: 80vh;
    overflow-y: auto;
}
.alert-msg span{
	color: orange
}

.alert-icon, 
.alert-close{
	height: 100%;
	width: 30px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.alert-icon{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 12px;
	border-radius: 10px 0 0 10px;
}

.alert-close{
	position: absolute;
	right: 0px;
	top: 0px;
	pointer-events: initial;
	cursor: pointer;
	border-left: 1px solid grey;
	padding: 2px 5px 0px 5px;
	font-size: 1.5rem;
	border-radius: 0 10px 10px 0;
}
.alert-close:hover{
	background: rgba(250, 50, 55, .4);
}
.alert-icon{
	background: lightgrey;
}
.alert-icon.type-success{
	background: rgba(100, 245, 100, .7);
}
.alert-icon.type-error,
.alert-icon.type-warning{
	background: red;
}
.hal .alert-icon{
	background: rgb(255 235 0)
}


.button,
button.button{
	position: relative;
	padding: 5px 10px;
	cursor: pointer;
	user-select: none;
	display: inline-block;
    font-weight: bold;
	font-size: 18px;
	border-radius: 5px;
	border: 0px;

    background: grey;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .5), inset 0 -5px 0px rgba(0,0, 0, .35);
    padding-bottom: 10px;
}
.button,
.button a{
	color: white;
	text-decoration: none;
}
.dark .button,
.dark .button a{
	color: #141414;
}

.button:active,
.button.selected:active{
	background: grey;
}
.button.delete{
	background: rgba(205, 50, 50, .8)
}
.button.selected{
    background: #656464;
}
.button.sensitive-action{
	background: #a13e3e;
}
.button.submit{
    background: #3da63d;
}


.dark .button:hover{
	background: #9b9b9b;
}
.dark .button:active,
.dark .button.selected:active{
	background: #5d5d5d;
	transform: scale(.9);
}
.dark .button.selected{
	background: radial-gradient(lightgrey, grey);
	color: white;
	text-shadow: 0px 0px 8px orange, 0px 0px 4px #946103;
}
.ready-glow{
	text-shadow: 0px 0px 8px orange, 0px 0px 4px #946103;
	color: white !important
}
.button.depressed{
	transform: scale(.97) translate(0, 2px);
	/* background: #9a9a9a; */
    box-shadow: 0 3px 3px rgba(0, 0, 0, .5), inset 0 -5px 0px rgba(0,0, 0, .35);
}



.stat{
/* 	color: #8af5f5; */
}
.stat span{
/* 	color: #fffe3f; */
}
.stat-set{
	color: lightgrey;
	font-weight: bold;
/* 	background:  */
}
.stat-set .stat{
	font-weight: initial;
}

.stat-set span{
	padding-left: 10px;
/* 	color: lightgrey; */
}

.disabled{
	opacity: .5;
	pointer-events: none;
/* 	border:2px solid red; */
}

.frame{
	position: absolute;
    pointer-events: none;
  	overflow: hidden;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
}
.faded{
	opacity: .5;
}

.hidden{
    display: none;
}

.undisplay{
	display: none;
}

.removed{
	display: none
}

.highlighted{
	color: white;
}




.row{
	font-size: 0px;
	width: 100%;
}
.column{
    position: relative;
	font-size: initial;
	display: inline-block;
	vertical-align: top;
	width: 100%;
/* 	min-height: 100%; */
}
.column-2{
	max-width: 50%;
}
.column-3{
	max-width: 33%;
}
.column-4{
	max-width: 25%;
}
.column-5{
	max-width: 20%;
}

.site-title{
	margin-top: 10px;
	text-align: center;
}

.clarification{
	font-style: italic;
}

.delete-button{
	background: rgb(255, 50, 50);
}

.menu-link.active{
	background: rgba(0, 0, 0, .6);
	width: 100% !important;
}

.menu-link.active *{
	color: white;
}
.menu-link.login-link{
	margin: 20px 0;
	display: inline-block;
	/* border:2px solid; */
}

.drop-down,
.menu-link{
	display: inline-block;
	position: relative;
}
.drop-toggle{
/* 	border: 4px solid red !important; */
}
.drop-toggle,
.menu-link{
	cursor: pointer;
	user-select: none;
	display: inline-block;
	vertical-align: middle;
	margin-top: 5px;
	border-radius: 5px;
	background: #d1d1d1;
}
.menu-link{
	/* background: #c2e1e6; */
	background: transparent;
}


.menu-link.social{
	/* background: #bae3ba; */
}

.menu-link.books{
	/* background: #bad4e3; */
}


.drop-toggle a,
.menu-link a{
	padding: 5px 10px;
	display: inline-block;
}
.drop-toggle:hover,
.menu-link:hover{
	background: #b5b5b585;
}
.menu-link.social:hover{
	background: #89b389;
}
.menu-link.books:hover{
	background: #7b98aa;
}

.menu-link:hover path{
	/* fill: white; */
}




.menu-link a{
	text-decoration: none;
	font-size: 18px;
}


#unread{
	position: absolute;
	top: -10;
	right: -10;
	color: black;
	box-shadow: 0px 0px 5px black;
}
.notification{
	display: flex;
	width: 20px;
	height: 20px;
	justify-content: center;
	align-items: center;
	padding: 10px;
	border-radius: 55px;
	background: white;	
}


.drop-down .drop-down{
	position: absolute;
	top: 50;
	right: 0px;
	display: none;
	background: white;
	background: lightgrey;
}
.dropped .drop-down{
	display: inline-block;
}
.drop-down .drop-down div{
	width: 100%;
	position: relative;
}
.drop-down .drop-down div:hover{
	background: var(--lightest);
	background: #a2a2a2;
}
.drop-down .drop-down a{
/* 	padding: 20px; */
	display: inline-block;
}
.public-link:hover{
	background: var(--button-hover);
}
#admin-link{
	font-weight: bold;
}

.menu-item.admin-color a{
	color: var(--admin) !important;
	font-weight: bold;
}


#zoom{
	position: fixed;
	bottom: 0;
	left: 0;
}


.drop-scroller{
	background: white;
	min-height: 30px;

	position: fixed;
	z-index: 99999;
/* 	background: lightgrey; */
	color: black;
	box-shadow: 0px 0px 10px black, 0px 0px 10px black;
	max-height: 400px;
	overflow-y: auto;
}

.drop-interior{
/* 	position: absolute; */
}
.drop-option{
	cursor: pointer;
	width: 100%;
	padding: 5px;
}
.drop-option:hover{
	background: #313131;
}
.dark .drop-option{
	background: var(--dark-bg);
	color: white;
}
.dark .drop-option:hover{
	background: #4b4a4a;
}

.check-wrap{
	margin: 20px 0;
}

.text-summary-field{
	white-space: pre-wrap;
}

.word-count{
	position: absolute;
	z-index: 9;
	background: rgba(255, 255, 255, .7);
}

.word-count.clingy{
	position: fixed;
}

.summary-field{
	/* border: 2px solid; */
}

.overboard{
	color: red;
}

/* new menu */

.auth-link{
	/* background: #e9e9e9; */
}

#side-links{
/* 		margin-top: 50px; */
	width: 180px;
	border-right: 2px solid #dedede;
	
	text-align: center;
	top: 0;
	padding: 10px;
	padding-top: 32px;
	height: 100vh;
	position: fixed;
	z-index: 99;
	background: white;
	text-align: center;
	padding-right: 10px;

}


#side-links a{
/* 	color: lightgrey; */
/* 	color: black; */
}

#side-links .drop-toggle,
#side-links .menu-link,
#side-links .drop-toggle a{
	width: 100%;
}

#side-links>.drop-down{
	max-width: 100%;
	width: 100%;
	display: inline-block;
	padding: 10px;
}

#link-top{
	text-align: left;
}

#links-browse{
	
}

#links-account h5{
	margin: 10px 0;
}

#links-bottom{
	position: absolute;
	bottom: 10px;
	width: calc( 100% - 20px);
	text-align: left;
}

.drop-down .drop-down{
/* 		right: 25%; */
	top: auto;
/* 		margin-top: 20px; */
	position: relative;
	width: 100%;
}

.mobile-only{
	display:none;
}
.desktop-only{
	display: inline-block;
}

#emu-logins{
	position: fixed;
	bottom: 10px;
	right: 10px;
	text-align: right;
}
.login-wrapper{
	display: inline-block;
	padding: 5px;
	background: lightgrey;
	margin: 5px;
	cursor: pointer;
}
.login-wrapper:hover{
	background: grey;
}



.prompt .modal-content .button{
    margin: 0 12px;
}

.prompt .button-area{
	margin-top: 20px;
}




/*FROM COMICUS*/
.media-option img{
	max-height: 70px;
}

.media-option{
	position: relative;
	/* border: 1px solid; */
	border-radius: 5px;
	box-shadow: 0px 0px 5px black;
	display: inline-block;
	vertical-align: top;
	margin: 3px;
	padding: 10px;
	cursor: pointer;
}
.media-option.media-type-image{
	display: inline-block;
}
.media-option.media-type-document{
	/* display: block; */
	width: 160px;
	overflow: hidden;
}
.media-type-document .filetype-image{
	font-size: 3rem;
	opacity: .3;
	transform: rotate(-10deg) translate(20%, -20%);
	transform-origin: center center;
}

.media-option .button.rm{
	position: absolute;
	right: 0;
	top: 0px;
	width: 20px;
	height: 20px;
}


.media-option .button.rm{
	position: absolute;
	right: 0;
	top: 0px;
	width: 20px;
	height: 20px;
}
/*END FROM COMICUS*/



/*MAYBE FROM HILBERTS*/
.media-item{
	position: relative;
	padding: 8px 5px;
	text-align: left;
	border-bottom: 1px solid grey;
	margin-top: 15px;
	font-size: .8rem;
}
.media-item .button{
	font-size: .8rem;
	padding: 0px 10px;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 8px;
}
.media-preview{
	display: inline-block;
	margin-right: 10px;
}
.modal .media-preview img{
	max-width: 60px;
	vertical-align: middle;
}
.media-item-title{
	display: inline-block;
	vertical-align: middle;
}
.media-details{
	display: inline-block;
}

#item-list{
	/* margin-top: 40px; */
}

.modal.media-library .modal-content{
	max-height: 80vh;
	overflow-y: auto;
	max-width: 80vw;
}
.modal.media-library .left-panel{
	max-width: 300px;
}
.modal.media-library .right-panel{
	max-width: calc( 100% - 300px );
}


.button.selected{
	background: orange;
	color: black;
}


.button.rm{
	background: var(--alert-red);
	padding: 0px 8px 7px 8px;
}
.button.rm:hover{
	background: #8d0000;
}
.dark .button.rm{
	background: var(--alert-red-dark);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 -3px 0px rgba(0,0, 0, .35);
}
.dark .button.rm:hover{
	background: #fe8585;
}




/* search bar */

#search-bar {
  margin: 0 0 30px 0;
  padding: 10;
  font-size: 1.2rem;
  border-radius: 10px;
  border: 1px solid;
}

.nav-icon svg,
.action-icon svg{
	max-height: 30px;
	width: auto;
	display: inline-block;
}
.action-icon svg{
	max-height: 22px;
}

.action-icon,
.menu-link .nav-icon,
.menu-link a{
	display: inline-block;
	width: auto;
	vertical-align: middle;
}

.text-action span{
	float: right;
	display: inline-block;
	vertical-align: middle;
	line-height: 22px;
	opacity: .6;
}
.text-action:hover span{
	opacity: 1;
}

.nav-icon{
	/* border: 2px solid pink; */
	margin-left: 5px;
}
.nav-text{
	/* border: 2px solid green; */
	display: inline-block;
	float: right;
	margin-right: 5px;
	font-size: .9rem;
	opacity: .7;
	line-height: 30px;
}

.menu-link:hover .nav-text{
	opacity: 1;
}

.button.help{
    display: inline-block;
    width: auto;
    padding: 0 5px;
    font-size: .8rem;
}

.button.warning{
	color: #b35d5d;
	margin: 0;
	border: 1px solid;
	/* padding: 0; */
}

.button.warning{
	background: #957272;
	color: #420202;	
}

.button.warning:hover{
	background: #ce5b5b;
	color: #5e0202;
}


.button.text-action.is_read,
.button.text-action.is_read.active{
	background: #eed1b3;
}
.button.text-action.is_to_read,
.button.text-action.is_to_read.active{
	background: #ffffca;
}
.button.text-action.is_reading,
.button.text-action.is_reading.active{
	background: #caffcc;
}

.rotating{
	position: relative;
	animation: rotate 5s linear infinite; /* Adjust the duration as needed */
	transform-origin: center;
}




.searches-toggle{
	width: 140px;
	display: inline-block;
	vertical-align: top;
	/* border: 2px solid orange; */
	float: right;
	text-align: center;
}
.searches-toggle .option.button{
	/* border: 2px solid lightblue; */
	font-size: .8rem;
}
.searches-toggle .option.button.selected{
	opacity: 1;
}
.searches-toggle .option:hover{
	cursor: pointer;
	opacity: .8;
}

.button.option.titles{
	color: var(--color-texts);
}

.button.option.authors{
	background: var(--color-authors);
}
.button.option.titles{
	background: var(--color-texts);
}

.key,
.perma-key{
	background: rgb(200, 200, 200);
	padding: 0 6px;
	display: inline-block;
	border-radius: 3px;
	box-shadow: 0px 0px 2px black;
	color: #646262;
	/* text-shadow: 0px 0px 2px black; */
}
body.key-handling .key{
	display: none;
}

.clarify{
	font-size: .9rem;
}

.share{
	display: none;
}


.viz img{
    display: none;
}
.viz img.public{
    display: none;
}
.viz img.private{
    display: inline-block;
}
.viz.is-public img.private{
    display: none;
}
.viz.is-public img.public{
    display: inline-block;
}
.viz.button,
.viz{
    position: absolute;
    top: 0px;
    right: 10px;
    padding: 2px 5px;
    width: 30px;
    height: 30px;
}
.viz,
.button.viz{
    background: #d38080;
}
.viz.is-public{
    background: #a1dfa1;
}

.page-title-wrap{
	position: relative;
	margin-bottom: 20px;
}

.page-title-wrap .has-path-color *,
.page-title-wrap *{
	color: #a2a2a2;
	fill: #a2a2a2;
}
.dark .has-path-color path{
	fill: #9b9898;
}

.page-title,
.page-logo{
	display: inline-block;
	vertical-align: middle;
}
.page-title{
}
.page-logo{
	max-width: 60px;
}




/* FOLDERS */
.folder{
	/* border: 3px solid red; */
	margin-top: 15px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}
.folder-contents{
	/* background: rgb(240, 240, 240); */
	padding: 10px;
	border: 1px solid rgb(40, 40, 40);
	border-radius: 0 5px 5px 5px;
}

.folder-section{
	display: none;
	padding: 10px;
}
.folder-section.active{
	display: inline-block;
	width: 100%;
}
.folder-tab{
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	/* opacity: .8; */
	/* background: rgb(240, 240, 240); */
	/* background: rgb(210, 210, 210); */
	margin-right: 2px;
	user-select: none;
	border-radius: 4px 4px 0 0;
	font-size: .9rem;
}

.folder-tab.active{
	/* opacity: 1; */
	background: var(--bright-grey);
	/* border-bottom: 1px solid var(--bright-grey); */
	z-index: 9;
	position: relative;
	/* border-bottom: 0px; */
}
.folder-tab{
	transform: translate(0, 1px);
	opacity: 1;
	border: 1px solid #969595;
	border-bottom: 0px;	
}
.dark .folder-tab{
	background: rgba(0, 0, 0,.2);
}
.dark .folder-tab.active{
	background: var(--dark-bg);
}

.folder-tab:hover{
	opacity: 1;
}
.folder-tab.active:hover{
	/* opacity: 1; */
}
/* END FOLDERS */


#site-logo{
	max-height: 80px;
	margin-bottom: 25px;
	text-align: center;
	padding-top: 50px;
}
#site-logo svg{
	max-width: 40px;
	width: auto;
	height: auto;
	display: inline-block;
	fill: var(--dark-bg);
}
#h{
	position: absolute;
	width: 50px;
	top: 0;
	left: 90%;
}


.spacer{
	display: inline-block;
	width: 100%;
	height: 20px;
}
.spacer-50{
	height: 50px;
}
.spacer-100{
	height: 100px;
}

.icon{
	display: inline-block;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.icon-button{
	padding: 0px 5px;
	font-size: 16px;
}
.icon-button .icon{
	width: 30px;
	height: 30px;
}





.completion{
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 6px;
    padding: 15px;
    border-radius: 5px;
    text-align: left;
	vertical-align: top;

	position: relative;
    background: white;
	transition: .3s;
}
.completion .prompt{
    color: orange;
}

.completion-content code{
    background: rgba(0, 0, 0, .05);
    padding: 2px 4px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #a9a8a8;
}
.completion-content pre code{
    width: 100%;
}
.completion-content pre{
    position: relative;
}

.completion-content select.code-theme-choice.input{
	position: absolute;
	width: 200px;
	max-width: 200px;
	left: 5px;
    bottom: -30px;
    opacity: 0
}
.completion-content:hover button,
.completion-content:hover select.code-theme-choice{
    opacity: 1;
	display: inline-block;
}

.completion-content button{
	position: absolute;
	bottom: -30px;
	right: 5px;
	display: none;
}
.completion-content button.copy{
	right: 90px;
}

.completed-date{
    opacity: .6;
    font-size: .8rem;
}

.completion-prompt{
    color: black;
    
}

.completion-content pre{
    padding: 5px;
	margin-bottom: 50px;
}




.admin.spinner{
	border: 3px solid var(--admin);
}

.login-notice{
	opacity: .8;
}

.modal-content .device-row.active{
	color: orange;
}

.audio-config .column.deviceId{
	padding-top: 0;
	font-size: .9rem;
}
.audio-config .button.use{
	font-size: .8rem;
	position: absolute;
	right: 0;
	top: 0;
}
.button.use{
	opacity: .5;
}


.section{
	padding: 10px;
	margin: 40px 0;
}

#splash-logo{
	position: absolute;
	top: 25vh;
	width: 200px;
	left: 50%;
	margin-left: -100px;
	z-index: -9;
}
#splash-logo svg{
	width: 100%;
}


/* .price-wrap{
	font-size: 0px;
} */
.price-display{
	/* font-size: 1.2rem; */
	font-weight: bold;
	padding-left: 0px;
}
/* .price-input{
	font-size: 1rem;
}
.price-input,
.price-display{
	font-size: 1rem;
	display: inline-block;
	max-width: 50% !important;
	
} */

.shadow-box{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
	margin: 5px 0;
	border-radius: 10px;
	padding: 10px 5px;
	background: white;
}
.shadow-box-small{
	border-radius: 5px;
}
.dark .shadow-box{
	background: rgba(255, 255, 255, .1);
    background: var(--dark-bg-box);
	
}



.toggle-wrap{
	display: inline-block;
	min-width: 80px;
	user-select: none;
	position: relative;
}

.toggle-track{
	border-radius: 20px;
	position: relative;
	width: 100%;
	height: 30px;
	max-width: 60px;
	cursor: pointer;
	display: inline-block;
	background: #c1bebe;
}
.dark .toggle-track{
	background: var(--body-bg);
}
.embedded .toggle-track{
	max-width: 100%;
	width: 200px;
	height: 40px;
}


.toggle-nob{
	padding: 10px;
	border-radius: 100px;
	position: absolute;
	top: 4px;
	transition: .5s;
	background: #e6e6e6;
	color: black;
}
.dark .toggle-nob{
	background: var(--dark-bg-box);
}
.embedded .toggle-nob{
	padding: 5px 10px;
}
.toggled .toggle-nob{
	left: calc( 100% - 26px);
}
.dark .embedded.toggled .toggle-nob{
	background: green;
}
.embedded.toggled .toggle-nob{
	left: auto;
	background: lightgreen;
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
}


.toggle-texts{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	font-weight: bold;
}
.dark .toggle-texts{
	color: lightgrey;
}
.toggle-text{
	height: 40px;
}
.create-prompt .toggle-text .flex-wrapper{
	height: 17px;
}

.toggle-text.left{
	/* left: 20px; */
}
.toggle-text.right{
	/* right: 20px; */
}

.toggle-label{
	margin: 8px 0 0 0;
	display: inline-block;
}

#place-results{
	position: relative;
	margin-top: 20px;
}

.modal.login input{
	margin: 10px 0;
}

.dark .env-local-text,
.env-local-text{
	color: var(--env-local);
	/* display: none; */
}

.admin-order-form .uuid{
	font-size: .8rem;
}

.modal-content .swap{
	font-size: .9rem;
	margin-top: 20px;
	cursor: pointer;
}
.modal.register .button{
	margin-top: 20px;
}


.pickup-icon .check:nth-of-type(1){
	transform: translate(0, -320px);
	animation: check1 linear 2s infinite;
}
.pickup-icon .check:nth-of-type(2){
	/* transform: translate(0, -0px); */
	animation: check2 linear 2s infinite;
}
.pickup-icon .check:nth-of-type(3){
	transform: translate(0, 320px);
	animation: check3 linear 2s infinite;
}

#back-top{
	position: fixed;
	bottom: 0;
	right: 0;
	background: lightgrey;
	border: 1px solid;
	padding: 20px;
	color: black;
	cursor: pointer;
	font-weight: bold;
}

@media screen and ( max-width: 800px ){
	.dark #header .menu-item a{
		/* color: var(--dark-text); */
	}
	
	body #content,
	body.menu-hidden #content{
		padding-left: 10px !important;
		padding-right: 10px;
	}
	
	#content{
		padding-top: 80px;
	}

	#content>.folder{
		width: 100%;
	}
	
	.mobile-only{
		display: inline-block;
	}
	.desktop-only{
		display: none;
	}
	
	.column-2,
    .column-3,
    .column-4,
    .column-5{
	    max-width: 100%;
    }
	.toggle-text.column-2{
		max-width: 50%;
	}

	#side-links{
		z-index: 9999;
	}
	#mobile-toggle{
		z-index: 99999;
	}
	#links-bottom{
		position: relative;
		max-width: 100%;
		width: 100%;
		text-align: left;
		margin-top: 30px;
	}
	/*
		end z-index
	*/

	#header{
		width: 70%;
		/* background: black; */
		text-align: center;
		border-right: 1px solid black;
	}

	.modal.media-library .modal-content{
		max-height: 98vh;
		max-width: 95%;
	}

	.modal.media-library .right-panel{
		max-width: calc( 100% );
	}

	#dark-toggle{
		width: 100%;
		text-align: center;
		/* border: 1px solid; */
		max-width: 100%;
	}
	#dark-toggle svg{
		max-width: 30px;
	}


}



.eta-pulse{
	animation: eta_pulse linear infinite 1s;
}
.eta-pulse-fast{
	animation: eta_pulse linear infinite .4s;
}
.edit-pulse{
	animation: edit_pulse linear infinite 1s;
}
.link-pulse{
	animation: link_pulse linear infinite 1s;
}
.button-pulse{
	animation: button_pulse linear infinite 1s;
}

@keyframes eta_pulse {
	70% { transform: scale(1.05) }
	100% { transform: scale(1) }
}
@keyframes edit_pulse {
	70% { opacity: .3 }
	100% { opacity: 1 }
}
@keyframes link_pulse {
	90% { opacity: .8 }
	100% { opacity: 1 }
}
@keyframes ready_pulse {
	0% { 
		/* opacity: .8; */
		border: 2px solid #01ff01;
	}
	90% { 
		/* opacity: .8; */
		border: 2px solid transparent;
	}
	100% { 
		/* opacity: 1; */
		border: 2px solid #01ff01;
	}
}
@keyframes button_pulse {
	50% { background: transparent }
	100% { background: #ad7c24 }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes check1 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes check2 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
}
@keyframes check3 {
	0% {
		opacity: 1;
	}
	33% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}