@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:400;
	font-display:block;
	src:url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2)format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
} 
body
{
	margin:0;
	padding:0;
	background:#111; 
	min-height:100vh;
	overflow-x:hidden;
	overflow-y:scroll;
	color:#eee;
    font-family: "Roboto", sans-serif;
}

*::-webkit-scrollbar {
  width: 7px;
  height:7px;
  background-color: #555;
}
 
*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
*::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


:root
{
	--logo:url(https://megamaker.webmeka.io/templates/images/logo.png);
}

#logoBand
{
	margin-top:20px;
	margin-bottom:20px;
	width:calc(100% + 1px);
	margin-left:-1px;
	padding:16px;
	background:#060606;
	border-top:1px solid #444;
	border-bottom:1px solid #444;
}
#logo
{
	background:var(--logo);
	background-repeat:no-repeat;
	background-position:center center;
	width:90%;
	height:100px;
	background-size:contain; 
	margin:0px auto;
}

#global
{
	min-width:100vw;
	min-height:100vh;
	display: grid;
	grid-template-columns: 250px calc(100vw - 250px); 
	gap: 0px 0px;
	grid-template-areas:
		". .";
}
#menu
{  
	width:250px;  
	height:100%;
	background:#060606;
	box-sizing:border-box;
	border-right:1px solid #444;
	position:fixed;
	left:0;
	top:0;
}

#main
{  
	width:calc(100vw - 250px);
	height:100%; 
	margin-left:250px;
	box-sizing:border-box;
	padding-bottom:40px;
	padding-right:7px;
}

h1
{
	margin:0;
	background: #003b65;
	display: block;
	margin-top:12px;
	margin-bottom:12px;
	width: calc(100% + 7px); 
	padding:5px 12px;
	font-size: 16px;
	font-family:Roboto, Tahoma;
	border-top:1px solid #072467;
	border-bottom:1px solid #072467; 
	vertical-align:middle;
	font-weight:normal;
	box-sizing:border-box;
}
h1 img
{
	vertical-align:middle;
	margin-top:-3px;
}

h2
{
	margin:0;
	background: #011d31;
	display: block;
	margin-top:12px;
	margin-bottom:12px;
	width: calc(100% + 7px); 
	padding:5px 24px;
	font-size: 16px;
	font-family:Roboto, Tahoma;
	border-top:1px solid #072467;
	border-bottom:1px solid #072467; 
	vertical-align:middle;
	font-weight:normal;
	box-sizing:border-box;
}
h2 img
{
	vertical-align:middle;
	margin-top:-3px;
}
.webBox
{
	margin:8px auto;
	width:calc(100% - 20px);
	border:1px solid #161616;
	border-radius:3px; 
	box-sizing:border-box;
	padding:4px;
	font-size:14px;
	font-family:Tahoma;
	text-align:center;
}
.webBox #connected{
	
}
.webBox #notConnected{
	
}
.webBox  #notConnected input
{
	background:rgba(255,255,255,0.05);
	border:1px solid #161616;
	border-radius: 4px;
	margin:2px auto;
	width:calc(100% - 20px);
	font-size:13px;
	color:white;
	text-align:center;
	margin-top:4px;
	letter-spacing:1px;
	padding:3px 6px;
}

.webBox form 
{
	margin:0;
	padding:0;
}

.webBox #notConnected input[type=submit]
{
	cursor:pointer;
	background: #001905;
	font-weight: bold;
	border-radius: 4px;
	padding:6px 6px;
}

.webBox .subtitle
{
	background:#072467;
	color:white;
	border-radius:3px;
	width:100%;
	margin:0px auto;
	margin-top:-1px;
	box-sizing:border-box;
	padding:2px 8px;
	text-align:center;
	font-weight:bold;
	margin-bottom:2px;
	height:22px;
	overflow:hidden;
	text-overflow:ellipsis;
	position:relative;
	
}
.webBox .subtitle .swap
{
	position:absolute;
	right:4px;
	bottom:6px;
	cursor:pointer;
	font-size: 10px;
}
.webBox.nav .subtitle
{
	background:#69032a;
}
.webBox.staffPanel .subtitle
{
	background:#04401e;
}
.webBox ul ,
.webBox ul li
{
	margin:0;
	padding:0;
	list-style-type:none;
}
.webBox ul li a
{
	display:block;
	background-color:rgba(255,255,255,0.025);
	transition:background 0.3s;
	border:1px solid #161616;
	border-radius: 4px;
	margin:2px auto;
	width:calc(100% - 6px);
	font-size:14px;
	color:white; 
	margin-top:4px;
	letter-spacing:1px;
	padding-left:24px;
	text-align:left;
	padding:3px 6px;
	text-decoration:none;
	position:relative;
	box-sizing:border-box;
	padding-left:24px;
	background-repeat:no-repeat;
	background-position:4px center;
	background-size:auto 16px;
	image-rendering: pixelated;
	--icon:none;
	background-image:var(--icon);
	
}
.webBox ul li a:hover
{
	background-color:#021540;
	padding-left:28px; 
	transition:padding-left 0.075s ;
}

.webBox ul li.disconnect a
{
	background-color:#2d0000;
}
.webBox ul li .nLevels
{ 
	position: absolute;
	right: 4px;
	font-size: 10px;
	color: #79ade2;
	bottom: 3px; 
}
.webBox ul li.myStats a{
	background-image:url(/templates/images/life.png);
}
.webBox ul li.disconnect a{
	background-image:url(/templates/images/yashichi.png);
}
.webBox ul li.myLevels a{
	background-image:url(/templates/images/megamanConstruction.png);
	
}
.webBox ul li.myFavorites a{
	background-image:url(/templates/images/starCrashIconTransp.png);
}

.textBox
{
	background: #00123c99;
	display: block;
	margin:5px auto;
	width: calc(100% - 40px); 
	padding:5px 12px;
	font-size: 16px;
	font-family:Roboto, Tahoma;
	border:1px solid #07246799; 
	border-radius:4px;
	vertical-align:middle;
	font-weight:normal;
	box-sizing:border-box;
}
  

table
{
	margin:0px auto;
	width:100%;
	font-size:14px;
	border:1px solid #003b65CC;
	border-radius:4px;
}
table tr
{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	clear:both;
}
table tr:nth-child(odd) td
{ 
	background:rgba(48,96,255,0.08);
}
table tr.top td
{
	background:#072467;
	color:white;
}

table tr td.dpl
{
		padding-left:4px;
}
 

table tr td a
{
	color:white;
	text-decoration:none;
	transition:color 0.3s;
}

table tr td a:hover
{
	color:#ffc931;
}

.textBox ul ,
.textBox ul li
{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
.textBox ul li
{
	margin:2px 5px;
}

.pr
{
	position:relative;
	
}
.tc
{
	text-align:center;
}

.halfTransp
{
	opacity:0.5;
}

.levelLikesBar
{
	display:inline-block;
	min-width:60px;
	width:calc(100% - 20px); 
	height:5px;
	box-sizing:border-box; 
	position:relative;
	background:#00f2fb6b;
	margin-top: -7px;
	border-radius:4px; 
}
.levelLikesBar .fillLike
{ 
	--value:0;
	width:calc(1% * var(--value));
	height:100%; 
	position:absolute;	
	top:0;
	left:0;
	background:#00b800; 
	border-radius:4px 0px 0px 4px;  
}
.levelLikesBar .fillDislike
{ 
	--value:0;
	width:calc(1% * var(--value));
	height:100%; 
	position:absolute;	
	top:0;
	right:0;
	background:#8d2b2b; 
	border-radius:0px 4px 4px 0px;  
}
.levelDifficultyBar .effect,
.levelLikesBar .effect
{
	background: repeating-linear-gradient(-45deg, rgba(0,0,0,0), rgba(0,0,0,0) 15px, rgba(0,0,0,0.25) 15px, rgba(0,0,0,0.25) 30px);
	display:inline-block;
	width:calc(100%); 
	height:5px;
	position:absolute;
	border-radius:4px; 
	left:0;
	top:0;
}
.levelLikesBar .fillLike .text img
{
	margin-bottom: -2px;
}
.levelLikesBar .fillLike .text
{
	position:absolute;
	left:1px; 
	bottom:-18px;
	font-size:11px;
	color:white;
	text-shadow:0px 1px rgba(0,0,0,0.9);
	text-align:left;
	color:#0eb50e;
	vertical-align:middle;
	width:100%;
	min-width:40px;
	
}
.levelLikesBar .fillDislike .text
{
	position:absolute;
	right:1px;
	bottom:-18px;
	font-size:11px;
	color:white;
	text-shadow:0px 1px rgba(0,0,0,0.9);
	text-align:right;
	color:#b50e0e;
	vertical-align:middle;
	width:100%;
	min-width:40px;
}
.levelLikesBar .fillDislike .text img
{
	margin-bottom: -4px;
}

.levelDifficultyBar
{
	display:inline-block;
	min-width:60px;
	width:calc(100% - 10px);
	border:1px solid #222;
	height:7px;
	box-sizing:border-box;
	--dColor:rgba(0,0,0,0);
	position:relative;
	margin-top: -8px;
	border-radius:4px;
}
.levelDifficultyBar .fill
{
	width:100%;
	height:100%;
	background:var(--dColor);
	border-radius:4px; 


}
.levelDifficultyBar .text
{
	display:block;
	width:100%;
	position:absolute; 
	text-align:left;
	font-size:11px;
	color:white;
	text-shadow:0px 1px rgba(0,0,0,0.9);
	letter-spacing:1px;
	bottom:-14px;
	left:0;
}
.levelDifficultyBar .perc
{
	display:block;
	width:100%;
	position:absolute; 
	text-align:center;
	font-size:11px;
	color:white;
	text-shadow:0px 1px rgba(0,0,0,0.9);
	letter-spacing:1px; 
	text-align:right;
	right:0;
	opacity:0.5;
	bottom:-14px;
}
.weaponIcons
{
	position:absolute;
	right:4px;
	top:5px;
	margin:4px 3px;
	margin-bottom:-2px;
	overflow:hidden;
}
.weaponIcons img
{
	margin:0px 1px;
}
.clear
{
	clear:both;
}
a.nextPage, a.previousPage, a.button
{
	display: inline-block;
    background: #69032a;
    color: white;
    border-radius: 5px;
    padding: 5px 12px;
    text-decoration: none;
	text-align:center;
	margin:2px;
	transition:background 0.6s;
	letter-spacing:0.7px;
} 
a.button.blue
{
	background:#019abd;
}
a.button.purple
{
	background:#8f01bd;
}

a.fLeft{ float:left; }
a.fRight{ float:right; }
a.nextPage:hover, a.previousPage:hover, a.button:hover
{
	background:#072467;
}

table tr .levelName
{
	--wn:0;
	--minus:calc(260px - calc(calc(12 - var(--wn)) * 20px));
	--mw:calc(100vw - 950px);
	display:inline-block;
	min-width:200px;
	max-width:calc(var(--mw) - var(--minus));
}
.weaponIcons{
  animation: weaponAppear 1s; 
}
.weaponIcons:hover
{
	-webkit-box-reflect: below -8px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

@keyframes weaponAppear {
  from { opacity: 0.3;  transform:rotate3d(1,0,0,90deg) ;  }
  to   { opacity: 1;  transform:rotate3d(1,0,0,0deg); }
}

@keyframes starHue {
	0% { filter:hue-rotate(63deg); }
	50% { filter:hue-rotate(243deg);}
	100% { filter:hue-rotate(423deg); } 
}
@keyframes starScale {
	0% { transform:scale(1.2) ; }
	50% { transform:scale(1) ; } 
	100% { transform:scale(1.2) ; } 
}

@keyframes fillBars
{
	from {
		width:0px;
	}
	to { 
		width:calc(1% * var(--value));
	}
}
@keyframes fillDifficultyColor{
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}
.levelDifficultyBar .fill
{
	
  animation: fillDifficultyColor 1s;
	
}
.fillLike, .fillDislike
{ 
  animation: fillBars 1s;
}

@keyframes scaleBoss{
	from {
		transform:scale(0) rotate(-180deg);
	}
	to {
		transform:scale(1) rotate(0deg);
	}
}
table tr td .bossIcon,
table tr td .levelIcon
{
	--eq:1;
	min-width:32px;
	min-height:32px;
	border:1px solid #072467;
	margin:2px;
	border-radius:3px; 
	animation: scaleBoss 0.2s;
	transform:scale(0);
    animation-fill-mode: forwards;
	animation-delay:calc(var(--eq) * 0.03s);
	
}
table tr td .levelIcon
{
	background:url(https://megamanmaker.com/bot/bosses/33.png) center center no-repeat;
	background-size:100% 100%;
	image-rendering:pixelated;
}

table tr td .levelIcon.levelLoading
{
	animation:shine 1s infinite;
	animation-fill-mode: forwards;  
}
#staffMainPage .card
{
	width:calc(25% - 33px);
	margin:20px 15px;
	box-sizing:border-box;
	height:200px;
	border:1px solid white;
	border-radius:4px;
	background:rgba(0,0,0,0.5);
	display:inline-block;
}
 
#staffMainPage .card .subtitle
{
	background:#072467;
	color:white;
	font-weight:bold;
	border-radius:4px;
	text-align:center;
	margin-bottom:-4px;
}
#staffMainPage .card .list
{
	overflow-y:scroll;
	margin:5px;
	width:calc(100% - 10px);
	height:calc(100% - 20px);
}
#staffMainPage .asset
{
	display:inline-block;
	cursor:pointer;
}

#staffMainPage  .asset.hidden
{
	display:none;
}

#staffMainPage  .asset:hover img
{ 
	filter:sepia(0.7); 
}
#staffMainPage .asset img
{
	image-rendering:pixelated;
	width:32px;
	height:32px;
	padding:1px;
	background:linear-gradient(180deg, #3cbeffb5, transparent);
	border:1px solid #003b65;
	border-radius:3px;
	margin:2.5px;
	display:inline-block;
	transition:filter 0.2s, background 0.2s;
}

.mainSearch
{ 
	background:rgba(255,255,255,0.05);
	border:1px solid #161616;
	border-radius: 4px;
	margin:2px auto;
	width:calc(80% - 20px);
	font-size:17px;
	color:white;
	text-align:center;
	margin-top:4px;
	letter-spacing:1px;
	padding:6px 12px;
}

.makerName 
{
	width:100%;
	height:100%;
}
.makerName a
{  
	padding-left:16px;
	box-sizing:border-box; 
	text-decoration:none;
	color:white;
	background:rgba(0,0,0,0) url(/templates/images/minArrow.png) 1px center no-repeat;
	height:100%;
	display:block;
	width:100%;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	word-break: break-all;
	transition:background-position 0.3s;
}
.makerName a:hover{
	background-position:4px;
}

#staffMainPage .asset.highlight img { 
  animation: shine 1s infinite;
  animation-fill-mode: forwards;  
  border-color:#ff4e00;
}

table tr td .setFavorite
{
	margin-bottom:-6px;
	padding:4px;
	cursor:pointer;
	transition:transform 0.5s, filter 0.5s, opacity 0.3s;
	filter:hue-rotate(0deg); 
	transform:rotate(0deg);
	cursor:pointer;
	opacity:0.5;
}
table tr td .setFavorite.active
{
	filter:hue-rotate(150deg);  
	opacity:1;
}
table tr td .setFavorite:hover
{
	filter:hue-rotate(150deg); 
	transform:rotate(360deg);
	opacity:0.8;
}
  

@keyframes shine{
  0% {
    opacity: 0.7;
	transform:scale(1);
	
  } 
  50% {
	  opacity:1;
	transform:scale(1);
  }
  100% {
    opacity: 0.7;
	transform:scale(1);
	
  }
}

img.bossIcon
{
	image-rendering: pixelated;	
}

.separator
{
	width:90%;
	height:6px;
	margin:2px auto;
	background:url(../images/magnetBeam.png) left center repeat-x;
}


.switch {
  position: relative;
  display: inline-block;
  vertical-align:middle;
  
  --w:40;
  --h:20;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  --pad:2px;
  --halfPad:calc(var(--pad) / 2);
  
  height: calc(calc(1px * var(--h)) - var(--pad));
  width: calc(calc(1px * var(--h)) - var(--pad));
  left: var(--halfPad);
  bottom: var(--halfPad);
  background-color: white;
  background:url(../images/life.png) center center no-repeat;
  image-rendering: pixelated; 
  filter:grayscale(1);
  background-size:16px auto; 
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {  
  filter:grayscale(0); 
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(calc(calc(1px * var(--w)) - calc(1px * var(--h))));
  -ms-transform: translateX(calc(calc(1px * var(--w)) - calc(1px * var(--h))));
  transform: translateX(calc(calc(1px * var(--w)) - calc(1px * var(--h))));
}

/* Rounded sliders */
.slider.round {
  border-radius:  calc(1px * var(--h));
}

.slider.round:before {
  border-radius: 50%;
}

.lineOption
{
	margin:4px;
}

body.noSpoiler .spoiler
{
	display:none;
	pointer-events:none;
}
body.noSpoiler table tr .levelName {  
	max-width:50vw;
	max-width:calc(var(--mw));
}

.overOpacity
{
	opacity:0.5;
	transition:.4s;
}
.overOpacity:hover{
	opacity:1;
}

table tr.level.click td{ 
    background: #00ffff2e;
}