:root{
	--th-ww1-bg: #d3c5ba;
	--off-white: rgb(245, 245, 245);
	--th-dark-link: lightblue;
	--admin: blueviolet;
	--admin-dark: #711dbf;
	--alert-red: #db2e2e;
	--alert-red-dark: #fc6262;
	--dark-border: #343333;
	--system: #6e036e;
	--env-local: #b439c9;
	--editor-dark: #ba7c0a;
	--editor: #f9c567;
	
	/* --darker: #13655c;
	--lighter: teal;
	--lightest: #b1e0e0;
	--button-hover: #54cdcd;

	--body-bg: rgb(40, 40, 40);
	--local-line: rgb(120, 90, 50);
	--cream-white: rgb(230, 230, 230);
	--dark-text: #a3a3a3;
	--bright-grey: rgb(240, 240,240);
	--color-authors: #ffd17a;
	--color-texts: lightblue; */

}


*{
	box-sizing: border-box;
}

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;
}

pre{
	background: rgba(0, 0, 0, .2);
	padding: 5px;
	border-radius: 4px;
}
li{
	margin: 20px 0;
}

body,
#side-links,
#content{
	background: var(--bright-grey);
	/* background: black; */
}
body.th-ww1{
	background: var(--th-ww1-bg);
}
body.th-dark{
	background: var(--dark-border);
	color: lightgrey;
}

#content{
	text-align: left;
	display: inline-block;
	/* background: black; */
	margin-left: 0px;
	padding: 30px 40px 20px 200px;
	width: 100%;
}
.th-ww1 #content,
.th-ww1 h4{
	color: var(--dark-bg);
}
.th-ww1 #content{
	background: var(--th-ww1-bg)
}
.th-dark #content{
	background: var(--dark-border)
}
body.menu-hidden #content{
	padding-left: 60px;
	/* background: blue; */
}

code, code *{
	font-family: sourcecode;
	font-size: .9rem;
	line-height: 1.2rem;
}

.data-embed{
	display: none;
}

#audio{
	display: none;
}

pre{
	white-space: pre-wrap;
	/* white-space: wrap; */
	/* max-width: 100%; */
	/* display: inline-block; */
}

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;
}
.th-dark a,
.th-dark a:visited{
	color: var(--th-dark-link);
}
.th-dark a.button,
.th-dark a.button:visited{
	color: black;
}


.button,
.button a{
	color: black;
	text-decoration: none;
}
.button.sensitive-action{
	background: #a13e3e;
}
.th-ww1 .button,
.th-ww1 .button a{
	color: white;
}

.button.submit{
    background: #3da63d;
}



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


.input[type=checkbox],
input[type=checkbox].input{
	width: 20px;
	height: 20px;
	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{
	position: fixed;
	left: 0;
	top: 0px;
    z-index: 9;
	display: inline-block;

	padding: 80px 0px 0px 10px;
	width: 180px;
	height: 100vh;

	border-right: 2px solid var(--dark-border);
	color: grey;
	text-align: left;
	background: white;
}
.th-dark #header{
	border-right: 2px solid grey;
	background: var(--dark-border);
}
.th-ww1 #header{
	background: var(--th-ww1-bg);
}
.menu-item{
	padding: 10px 0;
	cursor: pointer;
	user-select: none;
}
.menu-item.active{
	background: rgba(0, 0, 0, .1);
}
.menu-item:hover{
	color: black;
}
/* .menu-item:hover a{
	color: blue;
} */
.menu-hidden #header{
	display: none;
}
.menu-item.admin-color{
	margin-top: 50px;
	display: inline-block;
	/* top: 300px; */
}
.th-dark .menu-item a,
.th-dark .menu-item{
	color: lightgrey;
}


#mobile-toggle{
	position: absolute;
	position: fixed;
	z-index: 999;
	left: 10px;
	top: 10px;
	display: none;
	user-select: none;
	cursor: pointer;
	font-weight: bold;
	display: inline-block;

	/* blorb */
	/* display: none; */
}

#mobile-toggle svg{
	width: 30px;
	max-width: 30px;
	height: auto;
	max-height: 30px;;
	background-color: white !important;
}

#mobile-toggle path.bg{
	fill: black;
	fill: transparent;
}
#mobile-toggle path{
	fill: grey;
}
.th-dark #mobile-toggle path.bg{
	fill: var(--dark-border)
}
.th-ww1 #mobile-toggle path{
	fill: var(--dark-border);
}
.th-ww1 #mobile-toggle path.bg{
	fill: var(--th-ww1-bg);
}
	
.env-production .menu-link.chess{
	display: none;
}

#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;
}

body.menu-hidden #side-links{
	display: none;
}

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


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



.spinner{
	position: fixed;
	z-index: 999999;
	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;
	text-align: left;
}
.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)
}

input.button{
	background: #aeacac;
	cursor: pointer;
    letter-spacing: 1px;
	font-size: 1rem;
	border: 0px;
}
input.button:hover{
	color: white;
}
.th-dark .button:hover{
	background: #797979;
	color: black;
}

.button,
button.button{
	position: relative;
	background: linear-gradient( -180deg, #c9c7c7, #797878 );
	padding: 5px 10px;
	cursor: pointer;
	user-select: none;
	display: inline-block;
    font-weight: bold;
	font-size: 18px;
	border-radius: 5px;
	border: 0px;
}
.th-ww1 .button,
.th-ww1 button.button{
	background: linear-gradient( #6d2a04, #411111 )
}
.button:active,
.button.selected:active{
/* 	background: #751e1e; */
}
.button.delete{
	background: rgba(205, 50, 50, .8)
}
.button:hover,
.button.delete:hover,
.button.selected:hover{
    background: #33312c;
}
.button.selected{
    background: #656464;
}

.th-dark .button{
	background: lightgrey;
}


.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;
}

.admin-color,
.button.admin-color{
	background: var(--admin);
}
.admin-color:hover,
.menu-link.admin-color:hover,
.admin-color.button:hover{
	background: var(--admin-dark);
}

#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;
}

.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);
	color: black;
}
.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;
}

.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
}




/* 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;
}

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

.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;
}

.input-wrap{
	position: relative;
	/* border: 2px solid; */
}
.input-wrap label{
	display: block;
}
.th-dark label{
	color: white;
}


.page-search{
    position: fixed;
    z-index: 999;
    top: 0;
	left: 200px;
    /* border: 2px solid yellow; */
    width: calc(100% - 420px);
    padding-bottom: 10px;
    padding-top: 10px;
	text-align: left;
}
.menu-hidden .page-search{
	left: 80px;
}
#index-nav{
    /* background: white; */
}
.page-search-bar{
	/* border: 2px solid green; */
	display: inline-block;
	width: 100%;
	vertical-align: top;
	/* height: 90%; */
}
.double .page-search-bar{
	max-width: calc( 100% - 150px );
}
.double .page-search-bar{
	position: absolute;
	transition: .5s;
	bottom: 0;
	/* height: 90%; */
	/* border: 2px solid; */
	/* display: none; */
}
.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;
}
/* title color */
.page-search input.titles{
	/* border-bottom: 2px solid lightblue; */
}
.button.option.titles{
	color: var(--color-texts);
}
/* authors color */
.page-search input.authors{
	border-bottom: 2px solid var(--color-authors);
}
.button.option.authors{
	background: var(--color-authors);
}
.button.option.titles{
	background: var(--color-texts);
}
.page-search .button.option{
	color: var(--body-bg);
}


.page-search-bar input{
    max-width: 100%;
	width: 100%;
	/* height: 100%; */
	/* border: 2px solid; */
}

.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;
}
.menu-hidden .page-title-wrap{
	padding-left: 50px;
}
.page-title-wrap .has-path-color *,
.page-title-wrap *{
	color: #a2a2a2;
	fill: #a2a2a2;
}
.th-ww1 .page-title-wrap *{
	color: grey;
}

.page-title,
.page-logo{
	display: inline-block;
	vertical-align: middle;
}
.page-title{
	margin-top: 0px;
}
.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;
}
.th-ww1 .folder-contents{
	border: 1px solid rgba(0,0,0, .2);
}

#content>.folder{
	width: calc( 100% - 90px );
}
.folder-content-wrapper{
}
.folder-tabs{
}
.folder-section{
	display: none;
	padding: 10px;
	/* border: 2px solid yellow; */
}
.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;
}

.folder-tab.active{
	opacity: 1;
	background: rgb(40, 40, 140);
}
.th-ww1 .folder-tab.active{
	background: rgb(180, 160, 140);
}

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


#site-logo{
	display: inline-block;
	/* position: absolute; */
	/* top: 5px; */
	/* right: 5px; */
	max-width: 86px;
	max-height: 80px;
	margin-bottom: 15px;
	/* border: 1px solid; */
	position: relative;
}
#site-logo svg{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
#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;
}

.menu-item a{
	/* color: grey; */
}

.rounded{
	border-radius: 4px;
}

.search-bar{
	min-width: 500px;
}


#back-top{
	position: fixed;
	bottom: 0;
	right:0;
	padding: 20px;
	background: rgba(0, 0, 0, .5);
	cursor: pointer;
}

.misc-section{
	margin-top: 80px;
}

.code{
	font-size: .8rem;
	background: rgba(0, 0,0, .2);
	padding: 5px;
	border-radius: 4px;
	margin: 5px 0;
	line-height: 1.2rem;
}

.room-meta .button.help{
    margin-right: 20px;
    font-size: .9rem;
}

@media screen and ( max-width: 800px ){

	.search-bar{
		min-width: auto;
	}

	body #content,
	body.menu-hidden #content{
		padding-left: 10px;
		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%;
    }

	#side-links{
		z-index: 9999;
	}
	#header{
		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
	*/

	.page-search,
	.menu-hidden .page-search{
		padding-top: 70px;
		width: 100%;
		max-width: 100%;
		top: 0;
		left: 0;
		/* border: 2px solid red; */
		background: white;
		padding-right: 10px;
		padding-left: 5px;
	}
	.page-search input{
		background: white;
	}
	.page-search input::placeholder{
		color: #5c5b5b;
	}

	input.input,
	textarea.input{
		width: 100%;
	}

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

	.text-block{
		width: auto;
	}

}



@keyframes edit_pulse {
	70% { opacity: .3 }
	100% { opacity: 1 }
}
@keyframes link_pulse {
	90% { opacity: .8 }
	100% { opacity: 1 }
}
@keyframes button_pulse {
	50% { background: transparent }
	100% { background: #ad7c24 }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}