:root{
	--button-bg: #25242b;
	--button-border: #8d8db6; 
	--button-selected: #8b8bff;
	--button-active: #5c5cc1;
	--button-hover: #34347e;
	--button-emphasis: #a69267;
	--scry-bg: rgb(55, 45, 55);
	--mud-bg: rgb(21 10 0);
	--site-bg: #111111;
	--mud-color: #cc8a25;
	/* cc8a25 */
	--pserv-bg: rgb(0, 10, 20);
	--pserv-color: rgb(173 216 230);
	--upvote: #de39b4;
	--mana: #de39b4;
	--active-color: lightgreen;
	--scry-color: #edb2ed;
	--games-text: ;
	--text-grey: lightgrey;
	--games-text: #edb2ed;
	--admin: yellow;
	--menu-item: #eaca9c;
	--content-emphasis-1: rgba(255, 155, 200, .1);
	--content-emphasis-2: rgba(255, 155, 200, .2);
}


/*PRE*/

@font-face{
	font-family: 'jost';
	src: url(/resource/font/Jost/jost.ttf)
}
/*@font-face{
	font-family: 'open_sans';
	src: url(/resource/font/Open_Sans/open_sans.ttf)
}
*/
/*@font-face{
	font-family: 'pixel';
	src: url(/resource/font/04b.ttf)
}*/

/*@font-face{
	font-family: 'kalnia';
	src: url(/resource/font/Kalnia_Glaze/Kalnia.ttf)
}
*/


*{
	box-sizing: border-box;
/*	font-family: Courier;*/
/*	font-family: kalnia;*/
/*	font-family: pixel;*/
/*	font-family: open_sans;*/
}

body{
	margin: 0px;
	padding: 0px;
	transition: .2s;
	background: var(--site-bg);
	color: lightgrey;
}

#directory-header,
#site-header a,
.button,
input,
textarea,
#game-tags,
.tag-wrap{
	font-family: monospace, courier, helvetica;
}
body{
	font-family: jost;
}
pre{
	monospace: !important;
}




#global-data{
	display: none;
	height: 0;
}

#tags{
/*     border: 3px solid; pink; */
    display: inline-block;
    width: 300px;
    vertical-align: top;
}

#dev{
	height: 0;
}


pre{
	max-width: 100%;
	box-shadow: inset 0px 0px 10px black;
	background: rgb(50, 50, 50);
	color: white;
	padding: 10px;
	border-radius: 10px;
}

img,
svg{
	max-width: 100%;
	max-height: 100%;
/* 	height: auto; */
/* 	width: auto; */
}

a{
	letter-spacing: 1px;
}

.modal .checkbox-wrap label,
.checkbox-wrap label{
	display: inline-block;
	width: auto;
}
.checkbox-wrap input.input{
	display: inline-block;
	width: 20px;
	max-width: auto;
}

#header{
    text-align: left;
    width: 100%;
    margin-bottom: 50px;
}

#await{
    max-width: 400px;
}

#logo,
#second-logo{
    display: inline-block;
    max-width: 100px;
    position: absolute;
	z-index: 9;
    top: 5px;
    left: 10px;
    width: 60px;
	opacity: .92;
}

#second-logo{
	left: 50px;
	z-index: 1;
	width: 50px;
}
#second-logo:hover, 
#logo:hover{
	opacity: 1;
	transform: scale(1.05);
}

#main-links{
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0px;
/*     padding-top: 5px;; */
}

.nav-links{
	display: inline-block;
}
.nav-links a{
	margin: 0 5px;
}

.auth-link{
	position: relative;
}
.auth-link.pub-link.filt-link a{
	/* color: var(--scry-color); */
	text-decoration: none;
	font-size: .9rem;
	color: var(--menu-item);
}
.pub-link.active,
.auth-link.active{
	padding: 0px 2px;
	border: 1px solid;
	/* background: var(--scry-color); */
	transform: scale(1.2) rotate(-2deg);
	background: rgba(255, 255, 255, .1);
}

.pub-link.filt-link.active a,
.auth-link.active a{
	/* color: black; */
}
.auth-link.icon-link.active,
#unread-messages.active{
/*	background: black;*/
/*	border: 1px solid var(--scry-color) !important;*/
	background: radial-gradient(black, var(--scry-color));
}
.filt-link{
	margin: 0 5px;
}

.pub-link{
	font-weight: bold;
}

.admin-link a{
	color: yellow !important;
}
.admin-link{
/* 	position: absolute; */
	z-index: 9;
/* 	left: -120; */
/* 	transform: translate(-60px) */
}

.auth-link{
    display: inline-block;
/*     border: 1px solid; */
    vertical-align: middle;
}
#main-links{
	/* margin: 0 10px; */
}


.auth-link img{
	max-width: 26px;
	margin: 0 8px;
}

#menu-center{
	/* position: fixed; */
	/* left: 240px; */
	/* top: 16px; */
}
#menu-center .auth-link{
	margin: 0 15px;
	font-size: 1.2rem;
}
#menu-center .auth-link:nth-of-type(1){
	margin-right: 25px;
}

#subdomains{
	display: inline-block;
}
#subdomains .auth-link{
	padding: 2px 4px;
	margin: 0 4px;
}
#subdomains .auth-link a{
	color: black;
}
#subdomains .auth-link:nth-of-type(1){
	/* background: var(--scry-color); */
}
#subdomains .auth-link:nth-of-type(2){
	/* background: var(--mud-color); */
}
#subdomains .auth-link:nth-of-type(3){
	/* background: var(--pserv-color); */
}
#subdomains .auth-link a{
	color: var(--menu-item);
}
#subdomains .auth-link .menu-icon{
	display: none;
}
#subdomains .auth-link.active{
	transform: rotate(-3deg) scale(1.3);
}
#subdomains img{
	max-width: 20px;
	vertical-align: middle;
	margin-right: 0px;
}

#left-links{
	display: inline-block;
	padding: 10px;
}
#lf-group{
	display: inline-block;
	margin-left: 70px;
	width: 30px;
	transform: scale(1.5) translate(0px, 0px);
}
#lf-group img{
	width: 100%;
	max-width: 100%;
}



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

input.input,
textarea.input,
select.input{
	background: transparent;
	border: 0px;
	border-bottom: 1px solid grey;
	padding: 8px 3px;
    letter-spacing: 2px;
    font-weight: 100;
}

textarea{
	width: 100%;

}

.spinner,
.loader{
	position: absolute;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	transition: .3s;
    display: none;
	background: rgba(255, 255, 255, .2);

}
.spinner>img{
	width: 50px;
	max-width: 90% !important;
}

#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: 9999999;
	bottom: 100px;
	right: 30px;
	text-align: right;
	width: 70%;
	pointer-events: none;
}
#alert-slider{
	position: absolute;
	bottom: 0;
	right: 0;
/* 	border: 2px solid; */
	height: 0vh;
}
.alert-wrap{
	transition: .5s;
}
.alert-msg{
	position: relative;
	background: rgba(255, 255, 255, .9);
	display: inline-block;
	margin: 1px 0;
	padding: 3px 40px 3px 20px;
    pointer-events: initial;
    box-shadow: 0px 0px 10px black, 0px 0px 10px black;
	font-weight: bold;
}
.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;
	user-select: none;
}

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

.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;
	background: black;
}
.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)
}
.combat .alert-icon{
	background: #ff8304;
}
.alert-icon.type-system{
	background: #673AB7;
}

input.button{
	cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 3px;
}
input.button:hover{
	color: white;
}

#orderby{
	background: var(--scry-bg);
	padding: 10px;
	border-radius: 10px;
	width: calc(100% - 10px);
/* 	border: 1px solid var(--scry-color); */
}

.button,
.button a{
	position: relative;
	
	background: rgba(10, 10, 30, .6);
	padding: 5px 10px;
	cursor: pointer;
	user-select: none;
	box-shadow: 2px 2px black;
	display: inline-block;
	border: 1px solid black;
	font-weight: bold;
	color: white;
	text-decoration: none;
	text-align: center;
}

.cat.button,
#orderby .button{
	font-size: .75rem;
	transition: .5s;
	position: relative;
	white-space: nowrap;
	line-height: rem;
}
.heat-count{
	position: absolute;
	top: -20px;
	right: -10px;
	z-index: 9;
	background: rgb(200, 50, 50);
	border-radius: 15px;
	padding: 5px;
	border: 2px solid white;
	display: none;
	pointer-events: none;
}
.cat.button:hover{
	opacity: 1 !important;
}
.cat.button:hover .heat-count{
	display: initial !important;
}
.inset-shadow{
	box-shadow: inset 0px 0px 5px black, 2px 2px 5px black;
	border-radius: 7px;
}
.button.inset-shadow{
	/* border: 3px solid var(--button-border); */
}
.inset-shadow.button{
	background: linear-gradient( 175deg, var(--button-bg ), #282856 )
}
.button:hover{
	background: var(--button-hover);
}
.upvote.button{
	background: #a22582;
	border: 3px solid var(--upvote);
}
.upvote.button img{
	width: 30px;
	display: inline-block;
	vertical-align: middle;
}

.upvote.button:hover{
	background: #7b1b63;
}
.upvote.button span{
	opacity: .8;
	font-size: .8rem;
}
.favorite.button{
	background: #a27025;
	border: 3px solid #de8d39;
}
.favorite.button:hover{
	background: #613a12;
}
.button:active,
.cat.button:active,
.button.selected:active,
.cat.button.selected:active{
	background: var(--button-active);
	transform: translate( 1px, 1px );
	box-shadow: 0px 0px black;;
}
.button:hover,
.button.selected:hover{
	/* background: lightgrey; */
}
#orderby .button{
	border-radius: 5px;
}
.button.selected,
.button.cat.selected,
#orderby .button.selected{
    background: var(--button-selected);
    color: black;
}
#mssp-players.button.selected{
	background: var(--active-color)
}
#orderby .button[data-order='popular'].selected{
	background: var(--upvote);
}
#mssp-players{
	/* color: var(--active-color) */
}

#site-header{
	position: fixed;
	width: 100%;
	z-index: 9999;
	text-align: left;
	background: var(--site-bg);
	border-bottom: 1px solid #333;
}
.site-title{
	height: 45px;
	padding-top: 15px;
	padding-right: 100px;
	text-align: center;
	margin: 0;
	position: absolute;
	width: 100%;
}
.site-title a{
	text-decoration: none;
	color: lightgrey;
	display: inline-block;
}
.site-title a img{
	max-height: 35px;
}
.splash .site-title a img{
	max-height: 48px;
}


.hidden{
    pointer-event: none;
    opacity: 0;
}
.shrunk{
	height: 0;
	padding: 0 !important;
	margin: 0;
	line-height: 0px;
	overflow: hidden;
	
}

.toggler h3{
	cursor: pointer;
	transition: .3s;
	user-select: none;
}
.toggler h3:hover{
	transform: translateX(5px);
}

.row{
	position: relative;
    opacity: 1;
	font-size: 0px;
}

.column{
	font-size: initial;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	position: relative;
}
.column-2{
	max-width: 50%;
}
.column-3{
	max-width: 33%;
}
.column-4{
	max-width: 25%;
}
.column-5{
	max-width: 20%;
}
.column-6{
	max-width: 16%;
}
.column-7{
	max-width: 15%;
}

.ui-fader{
	transition: .3s;
}

.highlighted{
	color: white;
}

#content{
	margin-top: 60px;
    position: relative;
    display: inline-block;
    width: 100%;
    /* max-width: 1000px; */
    padding: 10px;
    text-align: left;
}


.disabled{
	opacity: .5;
	pointer-events: none;
}

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

.undisplay{
	display: none;
}

.removed,
.auth-link.removed{
	display: none
}

.local-login{

/*     display: none; */

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



#return{

    position: fixed;
    z-index: 99999;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background: orange;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    transition: .5s;
    font-weight: bold;
    color: black;
    padding-top: 15px;
}
.index #return{
	right: 217px
}

#mode-toggle{
	position: absolute;
	z-index: 1;
	right: 350px;
    width: 25px;
	height: 25px;
    top: 5px;
    cursor: pointer;
/*     background: black; */

	display: none;
}


.lightbox{
	position: fixed;
	z-index: 99;
	background: rgba(0, 0, 0, .9);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.lightbox-content{
    height: 90%;
    width: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
}
.lightbox .modal-close{
	top: 0;
	right: 0;
}


.featured-image img{
/* 	height: 100%; */
/* 	width: auto; */
	/* width: 150px; */
	/* max-width: 10100px; */
	border-radius: 7px;
}
img.missing-img{
/* 	max-width: 30px; */
	max-height: 30px;
	width: auto;
	opacity: .5 !important;
}

input[type=password],
input[type=email],
input[type=text],
textarea.input{
    width: 100%;
	font-weight: bold;
	padding-left: 5px;
}
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=text]::placeholder,
textarea.input::placeholder{
	font-weight: initial;
}
input[type=checkbox]{
	width: 20px;
	height: 20px;
}
input[type=number]{
	max-width: initial;
	width: initial;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	letter-spacing: 2px;
    -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
/* hide arrows */
  -webkit-appearance: none;
  margin: 0;
}


#content input{
    margin: 20px 0;
}
#content input[type=checkbox]{
	margin: 5px 0;
}

.sensitive-action{
	opacity: .7;
}

.sensitive-action:hover{
	opacity: 1;
}

#admin{
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: fixed;
    right: 200px;
    top: 55px; 
    z-index: 9;
}
#admin .button{
    /* background: var(--action-color); */
    color: black;
    color: white;
	
}




.results-header{
    text-align: left;
    margin-bottom: 20px;
    width: 100%;
    margin-left: 0%;
}
.results-header .column{
    font-weight: bold;
    color: grey;
	text-align: left;
	/* border: 1px solid; */
}


.required{
    color: red;
    font-weight: bold;
}

body.about{
    text-align: center;
}
body.about #content img{
	max-width: 30px;
	vertical-align: middle;
}
body.about #content{
	font-weight: bold;
	color: rgb(50, 50, 50);
/*     color: white; */
}
body.about #content h3{
	color: rgb(50, 50, 50);
}
body.about #content p{
	padding: 0 5vw;
}
body.about #content ul{
	padding: 0 10vw;
}
body.about #content h4{
	padding: 0 5vw;
}
body.about #content pre{
	width: calc(100% - 10vw);
	max-width: calc(100% - 12vw);
	margin-left: 6vw;
}


.header-append,
.header-main{
    display: inline-block;
/* 	border: 1px solid gold; */
}
.header-main{
	width: calc( 100% - 50px );
	padding-left: 60px;
/* 	width: 90%; */
/* 	max-width: 90%; */
}
.header-append{
	width: 50px;
}


/*.is-MUD */
.result-description{
	font-size: .8rem;
}

.result-active.is-active{
	/* margin-top: 20 */
}

#mud-selector{
	position: absolute;
	left: 10px;
	top: 0px;
	cursor: pointer;
	display: none;
}
#mud-selector:hover{
	transform: scale(1.2)
}
#mud-selector img{
	width: 70px;
}

.intro-data-row pre{
	font-size: .6rem;
	line-height: .5rem;
}


.mssp-row,
.intro-data-row{
/*    background: black;*/
	background: #010101;
}
.mssp-stat{
    display: inline-block;
    padding: 5px 10px;
}
.mssp-stat label{
    color: grey;
    font-size: .8rem;
}
.mssp-stat div{
    color: white;
}


.gsgp-row,
.intro-data-row{
    background: black;
/* 	border: 2px solid green; */
}
.gsgp-stat{
    display: inline-block;
    padding: 5px 10px;
/* 	border: 2px solid red; */
}
.gsgp-stat label{
    color: grey;
    font-size: .8rem;
}
.gsgp-stat div{
    color: white;
}
.gsgp-row{
	color: lightgrey;
	padding: 0px 5px;
}


.gsgp-leaderboards{
/* 	border: 1px solid yellow; */
	color: black;
	font-size: .8rem;
	font-weight: bold;
	padding: 0px;
	background: transparent
}
.gsgp-board{
	border-radius: 3px;
	box-shadow: inset 0px 0px 5px black;
	background: rgb(150, 120, 150);
	padding: 5px;
	margin-bottom: 6px;
	display: inline-block;
	width: 100%;
}


.intro-data-row pre{
	overflow-x: auto;
}
.is-MUD .intro-data-row pre{
	background: #090303;
}



.mud-form-wrapper{
    padding: 5px;
    background: rgba(255, 255, 255, .1);
    text-align: left;
}
.mud-form-wrapper .input-wrapper:last-of-type{
    text-align: initial;
}


.mssp-players{
	position: absolute;
	top: -5px;
	left: 35%;
	font-size: 1rem;
	width: 50px;
	height: 50px;

	font-size: 1.5rem;
    padding-left: 15px;
    padding-top: 12px;
    color: #02e6ef;
    text-shadow: 0px 0px 3px black, 0px 0px 10px black, 0px 0px 3px black, 0px 0px 5px black;
    z-index: 9;
    transition: 10s linear;
}

.mssp-players img{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
    transition: 3s linear;
}

#mobile-toggle{
   	position: absolute;
	display: none;
	cursor: pointer;
   	z-index: 99;
   	top: 9px;
   	right: 22px;
   	font-weight: bold;
}

#cat-explain .color{
	display: inline-block;
	font-size: .9rem;
}
#cat-explain .box{
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
}

.modal.game .explain{
	display: inline-block;
	margin-left: 20px;
	font-weight: bold;
	white-space: wrap;
}
.modal.game .explain:hover{
	color: orange;
}

.modal.stages .modal-content{
	max-width: 70vw;
}
.modal.stages .modal-close{
	right: calc( 50% - 35vw)
}
.modal.stages .key{
	font-weight: bold;
	margin-top: 15px;
}



.game-form-section{
    padding: 10px;
    background: #02020229;
    margin: 20px 0;
	border-radius: 20px;
	border: 1px solid black;
}
.section-game{
    background: #24022229;
/*     border: 2px solid #0b5ca2; */
}
.section-dev{
    background: #32020229;
/*     border: 2px solid #840ba2; */
}
.section-notify{
    background: #02221229;
/*     border: 2px solid #8b8706; */
}

.backdrop-section{
	background: rgba(0,0,0,.2);
	border-radius: 20px;
	padding: 20px;
	/* border: 1px solid black; */
}

#unread-messages{
	position: absolute;
	background: orange;
	color: black;
	font-weight: bold;
	width: 20px;
	height: 20px;
	display: inline-block;
	font-size: .7rem;
	padding: 3px;
	bottom: -15px;
	right: -0px;
	border-radius: 8px;
	box-shadow: 0px 0px 5px black;

	display: none;
	
}

.modal.description .modal-content div{
	background: rgba(0, 0, 0, .1);
	border: 1px solid black;
	padding: 20px;
	border-radius: 20px;
	font-weight: bold;
}

.last-updated{
	font-size: .8rem;
	color: var(--scry-color);
}
.active-pulse{
	animation: active_pulse 2s infinite;
}
.link-pulse{
	animation: link_pulse 2s infinite;
}
.tab-pulse{
	animation: tab_pulse 1s infinite;
}
.load-pulse{
	animation: load_pulse 1s infinite;
}
#mobile-nav-toggle{
    display: none;
}

#site-header a[href='/about']{

}
#about{
/* 	position: absolute; */
	z-index: 1;
}
#about:hover{
/* 	transform: none; */
}

.scry-contain{
	text-align: center;
	width: 100%;
}
.scry-constrain{
	display: inline-block;
	text-align: left;
	max-width: 800px;
	width: 100%;
}



.gallery-thumb{
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    opacity: .92;
    position: relative;
    max-width: 47%;
    margin: 1%;
}
.gallery-thumb:hover{
    opacity: 1
}

.featured-picker{
    position: absolute;
    z-index: 9;
    top: -5px;
    width: 30px;
    height: 30px;
}
.media-control.remove-img,
.remove-img{
    background: maroon;
    box-shadow: 0px 0px 10px black;
}
.remove-img{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0;
	right: 0;
}
.media-control.remove-img{
	position: relative;
	margin-left: 10px;
}
.featured-picker{
    right: 50%;
    margin-right: -15px;
    background: rgba( 0, 0, 0, .5 );
    border: 2px solid lightgrey;
    border-radius: 50px;
    box-shadow: inset 0px 0px 10px black, 0px 0px 10px black;
}
.selected .featured-picker{
    background: rgba(255, 225, 00, .9);
}
.bump{
    position: absolute;
    top: -5px;
    left: 5px;
/* 	transform: rotate(-15deg); */
	font-weight: bold;
	font-size: 1.5rem;
}
.game-media .gallery-thumb:first-of-type .bump{
    display: none;
}

.media-controls{
	position: absolute;
	top: -5px;
	right: -5px;
	width: 100%;
	text-align: right;
	white-space: nowrap;
}
.media-control{
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 1px;
	padding: 2px;
	background: grey;
	vertical-align: top;
	text-align: center;
}
.media-control:hover{
	transform: scale(1.1)
}
.is-flagged .media-flagged{
	background: #f63154;
}
.is-viz .media-viz{
	
/* 	background: #5ead5e; */
}
.media-info{
	color: black;
	font-weight: bold;
	padding-top: 0px;
}


#nav{
    padding-bottom: 5px;
    position: fixed;
    top: 100px;
    width: 470px;
    text-align: left;
    height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: 50px;
	padding-left: 5px;
	user-select: none;
}

.portfolio-item{
	position: relative;;
	max-width: 150px;
	cursor: pointer;
	display: inline-block;
	margin: 3px;
	vertical-align: top;
	min-width: 120px;
}
.portfolio-item:hover img,
.is-viz.portfolio-item:hover img{
	opacity: 1;
}
.portfolio-item>img{
	opacity: .4;
}
.is-viz.portfolio-item>img{
	opacity: .8;
}
.portfolio-item canvas{
	width: 100%;
	height: 120px;
	border: 2px solid;
}

.scry-cat-explain{
	color: var(--scry-color);
/* 	border: 1px solid; */
	width: 100%;
	text-align: center;
	position: fixed;
	top: 65px;
	display: inline-block;
}
.scry-cat-explain span{
	font-weight: bold;
	background: var(--scry-color);
	color: black;
	padding: 1px 3px;
	transform: rotate(-2deg);
	display: inline-block;
}
.scry-cat-explain .desktop{
	background: initial;
	color: var(--scry-color);
	font-weight: initial;
	transform: none;
	padding-left: 20px;
}
.is-MAIN .scry-cat-explain,
.is-SERV .scry-cat-explain,
.is-MUD .scry-cat-explain{
	position: relative;
	top: 15px;
	text-align: left;
	margin-bottom: 10px;
	width: 460px;
	left: 10px;
}
.is-MUD .scry-cat-explain,
.is-MUD .scry-cat-explain .desktop{
	color: orange;
	background: initial;
}
.is-MUD .scry-cat-explain span{
	background: var(--mud-color);
}
.is-SERV .scry-cat-explain,
.is-SERV .scry-cat-explain .desktop{
	color: lightblue;
	background: initial;
}
.is-SERV .scry-cat-explain span{
	background: var(--pserv-color);
}

.cat-wrapper{
	font-size: 0px;
}
.cat-wrapper .cat{
	font-size: .75rem;
	cursor: pointer;
	display: none;
	padding: 3px 5px;
}
.cat-wrapper.toggled .cat{
	display: inline-block;
}
.cat-wrapper h4{
	font-size: initial;
	cursor: pointer;
	opacity: .7
}
.cat-wrapper h4:hover,
.cat-wrapper.toggled h4{
	opacity: 1
}
.cat-wrapper.toggled h4 .toggle{
/* 	display: inline-block; */
	transform: rotate(90deg);
}
.cat-wrapper h4 .toggle{
	margin-right: 10px;
	display: inline-block;
	transition: .2s;
}



#joust{
    background: radial-gradient( var(--scry-color), rgba(200, 0, 255, .3), transparent );
    border: 1px solid var(--admin);
}

.hover-toggle{
	display: none;
	position: absolute;
	z-index: 99;
	top: 90%;
	left: 10%;
	padding: 10px;
	background: rgba(40, 0, 40, .9);
	border: 1px solid rgba(200, 100, 200, .5);
	width: 200px;
	box-shadow: 0px 0px 10px black;
}
.has-toggle:hover .hover-toggle{
	display: inline-block;
}
.has-toggle:hover{
	background: rgba(255, 255, 255, .1);
}

.inline-icon{
	max-width: 22px;
	display: inline-block;
	vertical-align: middle;
}

.price-tag,
.button.price-tag{
	font-size: .9rem;
	color: white;
	background: rgba(128, 40, 128, .8);
	padding: 3px 8px;;
	border-radius: 3px;
	border: 1px solid rgb(238, 130, 238);
	display: inline-block;
}
.price-tag *{
	display: inline-block;
	vertical-align: middle;
}
.price-tag img{
	margin-top: -2px;
	margin-bottom: 2px;
	margin-left: 6px;
}

.price-tag{
	
}

.contain_top{
	background-position: center top !important;
	background-size: contain !important;
}
.contain_bottom{
	background-size: contain !important;
	background-position: center bottom !important;
}
.cover_top{
	background-size: cover !important;
	background-position: center top !important;
}
.cover_bottom{
	background-size: cover !important;
	background-position: center bottom !important;
}

.modal.crystal_spend .modal-content{
	background: #641f64;
	border: 1px solid var(--scry-color);
}

.game-link.is-MUD{
	color: orange;
}

.auth-link:hover,
.hover-bump:hover{
    transform: scale(1.1);
}

.standard-icon,
.small-icon,
img.small-icon{
	display: inline-block;
	vertical-align: middle;
}
.standard-icon,
.standard-icon img{
	max-width: 45px;
}
.small-icon,
img.small-icon{
	max-width: 30px;
}
.small-font{
	font-size: .8rem;
}

.button.help{
	border-radius: 5px;
	background: #111111;
	color: grey;
}

#directory-header{
	position: absolute;
	width: 100%;
/* 	border: 2px solid orange; */
	top: 55px;
	height: 50px;
}
#directory-header>div{
	display: inline-block;
	vertical-align: top;
}

#string-search{
	position: relative;
	width: calc(100% - 830px);
	max-width: 380px;
	margin-left: 15px;
}

#string-search input::placeholder{
	color: grey;
}
/* #string-search input::placeholder, */
#string-search input{
	color: orange;
	border-bottom: 1px solid var(--scry-color);
}
#string-search input{
	font-weight: bold;
}

#string-search img{
	position: absolute;
	right: 3px;
	top: 3px;
	opacity: .5;
}

#render-selection{
	transition: .4s;
	min-height: 0px;
	height: 0px;
}


#render-selection.active{
	min-height: 30px;
/* 	pointer-events: none; */
}





.is-MUD .row.game .result-main{
	width: calc(100% - 0px);
}



/*
	blorb
	game / serv merging
*/


.row.user,
.row.game,
.row.serv,
.row.listing{
	transition: .2s;
	opacity: 1;
	/* height: 50px; */
	max-height: 160px;
	overflow: hidden;
	cursor: pointer;
	display: inline-block;
	text-align: left;
	width: 100%;
	padding-bottom: 15px;
	padding-top: 15px;
	/* border-bottom: 1px solid #2d2d2d; */
	font-size: initial;
	/* border: 1px solid; */
	/* blorb */
}
.row.no-image{
	/* max-height: 100px; */
}
/* 100vh */
.row.user.offset,
.row.game.offset,
.row.serv.offset,
.row.listing.offset{
	transform: translate(2vw, 0);
	opacity: 0;
}
.row.user .column,
.row.game .column,
.row.serv .column,
.row.listing .column{
    vertical-align: top;
    text-align: left;
/*     padding:3px; */
    overflow: hidden;
}
.row.user .column:nth-of-type(1),
.row.game .column:nth-of-type(1),
.row.serv .column:nth-of-type(1){
    font-weight: bold;
	margin-top: 5px;
	font-size: .8rem;
	max-width: 180px;
}


.row.game .column.featured-image,
.row.serv .column.featured-image{
	text-align: center;
	max-width: 175px;
	margin-right: 20px;
	min-height: 130px;
}
.row.game .column.featured-image>.flex-wrapper{
	height: 130px;
	align-items: flex-start;
}
.row.game .game-tags{
	max-width: calc( 100% - 380px );
	/* border: 2px solid; */
}
.row.game .game-tags .button{
	padding: 2px 4px;
	font-size: .6rem;
	border-radius: 0;
	font-weight: initial;
	letter-spacing: initial;
}

.row.game .result-main,
.row.serv .result-main,
.row.game .result-side,
.row.serv .result-side{
	font-size: initial;
	display: inline-block;
	vertical-align: top;
/* 	border: 1px solid; */
}

.row.game .result-main,
.row.serv .result-main{
	/* width: calc(100% - 100px); */
	/* margin-right: 20px; */
	width:100%;
}

.row.game .result-side,
.row.serv .result-side{
	width: 30px;
	/* background: red; */
}

.row.game .result-year,
.row.serv .result-year{
	font-size: .8rem;
	display: inline-block;
}
.row.game .result-side>*,
.row.serv .result-side>*{
	display: inline-block;
}
.row.game .orbs,
.row.serv .orbs{
	/* #d98383 */
	color: var(--upvote);
	font-weight: bold;
	font-size: .9rem;
}

.game.row .hover-text,
.serv.row .hover-text{
	display: none;
	position: absolute;
	z-index: 9;
	top: 0;
	font-weight: bold;
	left: 0;
	height: 100%;
	font-size: .7rem;
	color: orange;
	transform: rotate( -2deg );
	background: black;
    height: auto;
    padding: 2px;
}
.game.row .result-description:hover .hover-text,
.serv.row .result-description:hover .hover-text{
	display: inline-block;
}
.game.row .result-description,
.serv.row .result-description{
	position: relative;
	max-width: calc( 100% - 380px);
}

.status-row{
	/* height: 30px; */
	/* width: auto; */
	display: inline-block;
	vertical-align: top;
}
.status-row *{
	display: inline-block;
	/* border: 1px solid; */
	height: auto;
	width: auto;
	vertical-align: middle;
}
.status-row img{
	width: 30px;
	opacity: .6
}


.result-active{
	margin-left: 20px;
}
.result-active img{
	margin-right: 5px;
}

/* .game.row .result-active.is-active,
.serv.row .result-active.is-active{
	color: rgb(255, 155, 255);
	font-weight: bold;
	font-size: 1.4rem;
} */
.game.row:hover .result-active.is-active,
.serv.row:hover .result-active.is-active{
	animation: active_pulse 1.5s linear infinite;
}

.game.row .result-active.is-active,
.serv.row .result-active.is-active{
	/* d98383 */
	color: var(--active-color);
	font-weight: bold;
	font-size: 1.2rem;
}

.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;
	overflow-y: auto;
	max-height: 500px;
}
.drop-interior{
/* 	position: absolute; */
}
.drop-option{
	cursor: pointer;
	width: 100%;
	padding: 5px;
}
.drop-option:hover{
	background: grey;
}

.modal.game .creation-submit,
.modal.serv .creation-submit{
	text-align: right;
}
.creation-submit input.button{
	background: orange;
	color: black;
}

.lightbox-nav.button{
	position: fixed;
	top: 50%;
	font-size: 2rem;
	cursor: pointer;
	width: 50px;
	height: 50px;
	padding: 0;
	color: grey;
	background: black;
	border: 2px solid #434141;

	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
}
.lightbox-nav.left{
	left: 10px; 
	
}
.lightbox-nav.right{
	right: 10px; 
}

.chain-row{
	border: 1px solid #483004;
	padding: 20px;
	margin: 10px 0;
}
.chain-row .quid.column{
	position: absolute;
	bottom: 0;
	left: 40px;
	display: inline-block;
/* 	border: 2px solid; */
	text-align: left;
	font-size: .7rem;
	opacity: .4;
	padding: 0px;
	width: auto;
}
.chain-row .column{
	padding: 10px;
	overflow: hidden;
}
.chain-row.header .created{
	display: none;
}
.chain-row .created{
	font-size: .7rem;
	opacity: .7;
	position: absolute;
	bottom: 0px;
	right: 20px;
	text-align: left;
	padding: 0;
	width: auto;
}
.chain-row.header{
	border: 0px solid;
	padding: 0px 20px;
}
.chain-row .price-tag{
	position: absolute;
	bottom: 22px;
	right: 16px;
	background: transparent;
	border: 0px;
	font-size: .8rem;
	color: var(--scry-color);
}


#await-email{
	display: none;
}

.point-count{
	position: absolute;
	right: calc( 100% + 5px);
	top: 0;
}

.chain-row.header{
	color: #887e7e;
}
.chain-row .description{
	max-height: 100px;
	overflow-y: auto;
	font-size: .9rem;
	max-width: 43%;
}

.has-backdrop .modal-content{
	background: transparent;
}
.backdrop{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	pointer-events: none;
	z-index: -9;
	background: rgba(10, 10, 10, .8);
}

.chain-row .backdrop .corner{
	width: 25px;
	height: 25px;
}
.backdrop .corner, 
.backdrop .side{
	position: absolute;
	top: 0px;
	left: 0;
	width: 40px;
	height: 40px;
	background-size: cover;
	opacity: .6;
}
.backdrop .corner.tl{
}
.backdrop .corner.tr{
	left: auto;
	right: 0px;
}
.backdrop .corner.bl{
	top: auto;
	bottom: 0px;
}
.backdrop .corner.br{
	top: auto;
	bottom: 0px;
	right: 0px;
	left: auto;
}

.backdrop .side{
	background: url(/resource/media/borders/1/bar.png);
	width: 2px;
	height: 100%;
	max-height: 90vw;
	opacity: .3;
}
.backdrop .side.right{
	right:  0px;
	left: auto;
}
.backdrop .side.bottom{
	transform: rotate(90deg);
	top: auto;
	bottom: calc( -50% + 5px);
	left: 50%;
}
.backdrop .side.top{
	transform: rotate(90deg);
	top: calc( -50% + 5px);
	left: 50%;
}

.modal-content textarea{
	max-height: 200px;
}


.quest-solved{
    position: absolute;
    bottom: 45px;
    right: 55px;
    padding: 0px;
    width:45px;
    height: 45px;
    background: url('/resource/media/treasure/chest-closed.png');
    background-size: contain;
}
.chain-row.header .quest-solved{
	display: none;
}
.solved .quest-solved{
    background: url('/resource/media/treasure/chest-open.png');
    background-size: contain;
}
.chain-row .quest-solved{
	display: inline-block;
	top: 0px;
	top: 40px;
	right: 20px;
}
.chain-row .chain-count{
	position:absolute;
	bottom: -5px;
	right: 47%;
	background: var(--scry-color);
	padding: 2px 5px;
	color: black;
	font-size: initial;
	font-weight: bold;
}

.animator-500{
	transition: .5s;
}

.column.chain-row-details{
	padding-left: 20px;
}
.column.chain-row-details a:hover{
	color: orange;
}
.chain-row-details .chain-row-poster{
	position: relative;
	color: grey;
	padding-left: 0px;
	display: inline-block;
	padding-top: 5px;
	font-size: .8rem;
	width: 100%;
}
.chain-row-details .chain-row-poster:hover{
	color: white;
}
.header .chain-row-details .chain-row-poster{
/* 	padding-top: 0px; */
	display: none;
}

.solve-stamp{
	position: absolute;
	width: auto;
	color: var(--scry-color);
	font-size: .7rem;
	right: 15px;
	bottom: 17px;
}

#es6-warning{
	color: var(--scry-color);
	position: absolute;
	top: 200px;
	text-align: center;
	width: 100%;
	font-size: .9rem;
	z-index: 9999;
}


.scry-content-sign{
	background: #e8d9b6;
	border: 3px solid brown;
	border-radius: 4px;
	box-shadow: inset 0px 0px 10px black, inset 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black;
	color: black;
}

.button .wrappp{
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    box-shadow: 0px 0px 9px black, 0px 0px 3px black;
    z-index: 99;
    background: linear-gradient(125deg,  rgba(255, 155, 205, .2), transparent, rgba(5, 5, 55, .2) );
}
.button:active .wrappp{
    background: linear-gradient(125deg,  rgba(255, 155, 205, .1), transparent, rgba(5, 5, 55, .5) );
}
.button:hover .wrappp{
    box-shadow: 0px 0px 9px black, 0px 0px 3px black, 0px 0px 5px black, 0px 0px 5px black;
}



#audio{
	
    display: initial; /* (!) */
    
	position: fixed;
	right: -5px;
	z-index: 999;
	bottom: 170px;
	width: 30px;
	padding: 5px;
	border-radius: 50px;
	cursor: pointer;
	opacity: .8;
	border: 1px solid rgb(100, 100, 100);

	height: 100px;
	background: black;
}

#audio:hover{
	opacity: 1;
}

#audio img{
	position: absolute;
	z-index: 9;
	bottom: 0px;
	width: 35px;
	max-width: 1000px;
	left: -5px;
	border: 1px solid grey;
	border-radius: 50px;
	padding: 2px;
	background: black;

	pointer-events: none;
	user-select: none;
	user-drag: none;
}


.cat.button{
	border-radius: 8px;
	box-shadow: 0px 0px !important;
}










/*POST*/


.highlighted{
	color: white;
}

.sensitive-action{
	background: #c3939b;
}

body.game #category-picker{
	border: 0px;
	box-shadow: none;
}

.sensitive-action{
	background: red;
	color: black;
}

.comment-row{
    border: 1px solid grey;
    background: lightgrey;
}


/*messages page*/
.received-message{
    /*background: #010117;*/
}
.sent-message{
    /*background: #01170e;*/
}

.message-row .column{
    border: 1px solid #d2cfcf;
}

.reply-label{
	text-align: left;
}

.fill{
    position: absolute;
    width: 100%;
	height: 100%;
}
.fill-bl{
	bottom: 0px;
	left: 0px;
}
.fill-br{
	bottom: 0px;
	right: 0px;
}
.fill-tr{
	top: 0px;
	right: 0px;
}
.fill-tl{
	top: 0px;
	left: 0px;
}

.tile-wrapper{
	overflow: hidden;
}
.tile-slider{
	position: absolute;
	display: inline-block;
	transition: .5s linear;
}
.tile-pane{
	display: inline-block;
	position: relative;
}
.tile-pane img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}



/*ADD BASE DARK*/





.auth-link a{
    color: lightgrey;
	text-decoration: none;
	color: var(--menu-item);
}
.account-link a{
	color: grey;
}

a{
	color: var(--games-text);
	color: lightgrey;
}

.button,
.button a{
	color: white;
	text-decoration: none;
}

input.input{
	background: transparent;
	border-bottom: 1px solid grey;
}

.alert-msg{
	position: relative;
	background: rgb(40, 40, 40);
	display: inline-block;
	margin: 1px 0;
	padding: 10px 55px 10px 30px;
    pointer-events: initial;
    font-weight: bold;
	text-align: left;
}
.alert-msg a{
	color: white;
}

.highlighted{
	color: white;
}

.site-title{
	/* background: rgb(14 14 14); */
	margin: 0;
	padding: 0;
	padding-top: 5px;
	/* transform: scale(15) rotate(125deg); */
	transition: 1s;
}

body.is-MUD .site-title{
	/* border-bottom: 1px solid #b58313; */
}
body.is-SERV .site-title{
	/* background: var(--pserv-bg); */
	border-color: var(--pserv-color);
}
body.is-SERV #orderby{
	background: var(--pserv-bg);
}
body.is-MUD #orderby{
	background: var(--mud-bg);
}

.button.sensitive-action,
.sensitive-action{
	background: rgba(195, 47, 45, .8);
}

.button{
	background: var(--button-bg);
}

.modal-content{
	background: rgb(50, 50, 50);
	box-shadow: 3px 3px 0px black;
/* 	border: 5px solid #2d2d3c; */
}
.modal-content input,
.modal-content textarea,
.modal-content select{
	background: rgb(0, 0, 0, .3);
    color: white;
/*     border-color: rgb(40, 40, 40); */
}
.modal-content input::placeholder,
.modal-content textarea::placeholder{
	color: white;
}

input,
textarea{
	color: lightgrey;
}

.game-section{
    border-top: 1px solid #121727;
}

.modal select.input,
.modal input.input,
.modal textarea.input{
	border-bottom: 1px solid black;
}

body.game #category-picker p{
    text-align: left;
    color: orange;
    padding: 5px;
}
body.game #category-picker h4{
    color: orange;
}



/*messages page*/
.received-message{
    background: #010117;
}
.sent-message{
    background: #17010a;
}

.message-row .column{
    border: 1px solid transparent;
}

pre{
	background: rgb(40, 40, 40);
	color: lightgrey;
}

.heat-count{
	box-shadow: 0px 0px 10px black;
}

body.about #content h3{
	color: lightgrey;
}

body.about #content{
	color: rgb(200, 200, 200);
}

.gsgp-board{
	background: rgb(50, 20, 50);
	color: rgb(170, 170, 170);
}

.gsgp-board-type{
	color: var(--scry-color);
}

.account textarea,
.account input{
	background: black;
	color: lightgrey;
	padding: 10px;
}
.account input[type=file]{
	background: initial
}

.account textarea::placeholder{
	color: lightgrey;
}

body.account #content a{
	
}



body.post .post-content{
	border: 1px solid rgb(50, 50, 50);
}
body.post #render-area .post{
	border: 1px solid rgb(30, 30, 30);
    border-left: 2px solid rgb(30, 30, 30);
}
body.forum .forum-post{
    border: 1px solid rgba(50, 50, 50, .5);
}

.post .post-content{
	background: rgb(30, 25, 30);
}

.is-MUD .post .post-content{
	background: rgb(30, 15, 10);
}




.loader, 
.spinner{
	background: radial-gradient(black, rgba(0, 0, 0, 0));
}




a.row.game{
    color: var(--text-grey);
}
.row.game:hover{
    background: rgba(255, 255, 255, .1)
}

.modal.description .modal-content div{
    background: rgba(0, 0, 0, .3);
}

.data-embed{
	display: none;
}

.align-center{
	text-align: center;
}




/* FOLDERS */
.folder{
	/* border: 3px solid red; */
	margin-top: 15px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}
.folder-contents{
	background: rgb(0,0,0,.7);
}
#content>.folder{
	width: calc( 100% - 90px );
}
.folder-content-wrapper{
}
.folder-tabs{
}
.folder-section{
	display: none;
	padding: 10px;
}
.folder-section.active{
	display: inline-block;
	width: 100%;
}
.folder-tab{
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	background: rgb(0, 0, 0, .5);
	margin-right: 2px;
	user-select: none;
}
.folder-tab.active{
	background: rgba(0, 0, 0, 0.7);
}
.folder-tab:hover{
	opacity: 1;
}
/* END FOLDERS */



.link-type-chat img{
	opacity: .7;
}

@media screen and (max-width: 800px){
    #content{
/*         left: 0px; */
    }
	#nav{
        background: black;
	}

	.nav-links{
		display: block;
	}
	.nav-links a{
		margin: 0;
	}

	.row.game .result-main,
	.row.serv .result-main{
		width: 100%;
	}

	.row.game{
		max-height: 450px;
		background: rgba(255, 255, 255, .1);
		padding: 5px;
		/* border: 1px solid pink; */
	}

	.game.row .result-description,
	.serv.row .result-description{
		position: relative;
		max-width: 40%;
		
	}

	.row.user .column:nth-of-type(1),
	.row.game .column:nth-of-type(1),
	.row.serv .column:nth-of-type(1),
	.row.game .column.featured-image,
	.row.serv .column.featured-image{
		max-width: 48%;
	}

	.is-MUD .row.game .result-main{
		width: 100%;
	}
	#subdomains{
		width: 100%;
		text-align: right;
	}
	#subdomains img{
		display: none;
	}
	#subdomains .auth-link{
		padding-right: 0;
		margin: 10px 0;
	}
	#left-links{
		padding-right: 0;
	}
	#lf-group{
		display: block;
	}
	#lf-group a{
		font-size: 1.2rem;
	}

	.result-side .flex-wrapper{
		/* border: 1px solid; */
		height: auto;
	}

	.row.game .game-tags{
		max-width: 45%;
	}
	
}