:root{
	--color-bg: #39383f;
	--color-fg-aside: #f3f3f7;
	--color-fg: #ffffff;
	--color-primary: #7351ea;
	--color-primary-hover: #8361fa;
	--color-muted: #aaa;
	--color-danger: #fc1239;
	--color-aside-separator: #9892ba;
	--color-main-separator: #e8e8e8;
	--color-main-separator-highlight: #e8dda3;
	--color-row-hover: #f8f8f8;
	--color-row-highlight: #fffad4;
	--color-row-highlight-fade: #fff010;
	--color-footer: #6e6d79;
	--color-footer-link: #909785;
	--color-footer-hover: #fffedd;
	--main-padding: 24px;
	--main-border-radius: 4px;

	--font: 15px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--font-monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace;
}


html{
	width:100%;
	height:100%;
	scrollbar-color: #9997bb transparent;
}

body{
	font: var(--font);
	background-color: var(--color-bg);
	user-select:none;

	width:100%;
	min-height:100%;
	margin:0;
	
	display:flex;
	flex-direction: column;
}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-strong{font-weight:bold}
.text-small{font-size: 90%;}
.text-italic{font-style: italic;}
.text-muted{color:var(--color-muted);}
.text-danger{color:var(--color-danger) !important}
.clickable:hover{cursor:pointer}
.help:hover{cursor:help}
span.clickable:hover{text-decoration:underline}
.hide{display:none !important}
.mono{font-family:var(--font-monospace); user-select:text;}
.mt-0{margin-top: 0 !important;}
.p{padding:var(--main-padding)}


#wrapper{
	flex-grow:1;
	display:flex;
	justify-content:center;
	align-items:center;
}
main{
	box-shadow: #1a1a1c 0 0 80px;
	background-color: var(--color-fg);
	border-radius: var(--main-border-radius);
	box-sizing:border-box;
	width:960px;
}
header{
	margin: var(--main-padding-negative) var(--main-padding-negative) 24px var(--main-padding-negative);
	border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
	text-align:center;
	height:104px;
	background-color:#0a0b13;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:24px;
	padding:24px;
	box-sizing:border-box;
}
#app-icon{
	width:72px;
}


footer{
	font-size:90%;
	color:var(--color-footer);
	padding: 16px;
	text-align:center;
	flex-shrink:1;
}
footer a{
	color:var(--color-footer-link);
}
footer a:hover{
	color:var(--color-footer-hover);
}


main{
	width:960px;
	max-width:calc(100% - 16px);
	box-sizing:border-box;
}


button>span, button>svg, button>img{
	vertical-align:middle;
}
svg{
	height:16px;
	display:inline-block;
	vertical-align: middle;
}



#btn-import-start{
	border: dashed 6px #adb7c7;
	border-radius:16px;
	background-color:#f8f8f8;
	width:80%;
	margin:40px auto 0;
	display:block;
	padding:40px;
}
#btn-import-start:hover{
	border-color:#586f93;
	background-color:#f0f0f0;
	cursor:pointer;
}

#btn-import-start svg{
	height:80px;
	transition: transform .2s;
}
#btn-import-start:hover svg{
	transform:translateY(-4px);
}


#start{
	text-align:center
}
#start-title{
	font-size:200%;
	font-weight:bold;
}

#start-legend{
	margin-top:24px;
	font-size:100%;
	display:flex;
	gap:8px;
}
#start-legend>div{
	width:50%;
	text-align:center;
}



.flash-message{
	padding: 8px 12px;
	border-radius: 3px;
	margin-bottom: 16px;
}
.flash-message.danger{
	background-color: #fdcbcb;
	color: #3d2424;
}
.flash-message.warning{
	background-color: #fdfdcb;
	color: #503627;
}
.flash-message.info{
	background-color: #e3eeff;
	color: #242e3d;
}
#app .flash-message button{
	border:none;
	border-radius:0;
	background-color:transparent;
	padding:0;
	display:inline;
	color:#1955c4;
	border-bottom: 1px solid #1955c4;
}
#app .flash-message button:hover{
	color:#1955c4;
	border-bottom-color:#1955c4;
}
#flash-message-unknown-games{
	display:none;
}










#toolbar{
	margin-bottom:24px;
	text-align:center;
}

#app {
	display: none;
}
#app button, dialog button{
	background-color: #eee;
	border:none;
	padding: 6px 12px;
	border-bottom: 3px solid #ccc
}
#app button:hover, dialog button:hover{
	background-color: #dae8f4;
	cursor:pointer;
	border-bottom-color: #b8cada
}
#app button:active, dialog button:active{
	transform:translateY(2px);
}





#current-files{
	display:flex;
	flex-direction:column;
	gap: 4px;
}
#current-files>div{
	display:flex;
	justify-content:space-around;
	align-items:center;
	height:64px;
	gap: 8px;
}
#current-files>div>div.item-image{
	width:80px;
	line-height:1;
	text-align:center;
	position:relative;
}
#current-files>div>div.item-description{
	flex-grow:1;
}
#current-files>div>div.item-buttons{
	display:flex;
	gap:4px;
}
#current-files>div>div.item-buttons button{
	text-align:right;
}
#current-files>div canvas{
	max-width:64px;
	max-height:64px;
}
#current-files>div canvas:hover{
	cursor:zoom-in;
}

#current-files .item-title{
	font-weight:bold;
}
#current-files .item-info{
	color:var(--color-muted);
	font-family:var(--font-monospace);
}

.item.item-library-thumbnails .item-image{display:none}
#current-library-thumbnails{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:16px;
}
#current-library-thumbnails>div{
	text-align:center;
	display:flex;
	flex-direction: column;
	gap:4px;
}
/* #current-library-thumbnails>div>div.item-image{
	height:109px;
} */
#current-library-thumbnails>div>div.item-buttons{
	display:flex;
	gap:4px;
	justify-content:center;
}

#preview{
	position:fixed;
	bottom: 4px;
	right: 4px;
	background-color:white;
	padding:8px;
	border-radius:4px;
	display:none;
	line-height:1;
	box-shadow:rgba(0,0,0,.5) 0 0 8px;
}


#canvas-thumbnail-preview{
	margin: 0 auto;
	background-color:black;
	padding: 9px 12px 10px 11px;
}



#warnings, #errors{
	margin-bottom:24px;
	padding: 20px;
	border-radius:4px;
	display:none;
}
#warnings{
	background-color:#ffcb00;
}
#errors{
	background-color:#ff3c00;
	color:white;
}


dialog{
	border:none;
	padding: 24px;
	border-radius:3px;
	box-shadow:rgba(0,0,0,.7) 0 0 16px;
}
dialog::backdrop{
	background-color:rgba(0,0,0,.5);
	backdrop-filter:blur(2px);
}

dialog .row-form{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:8px;
	gap:8px;
}






p{padding:0;margin:0}






/* form elements */
input, button, select, textarea{
	font-size:inherit;
	box-sizing:border-box;
	border-radius:3px;
	outline:none;
}
input, button, select{
	font-family:inherit;
}
textarea{
	font-family:var(--font-monospace);
}

button.btn{
	background-color:transparent;
	border:1px solid #bbb;
	padding: 6px 10px;
	transition: all .2s;
}


button.btn:not([disabled]):hover, select:not([disabled]):hover{
	cursor:pointer;
	border-color:#666;
	background-color:#eeeeee;
}

button.btn.btn-primary{
	border-color:#3e3e8c;
	background-color:#3e3e8c;
	color:white;
}
button.btn.btn-primary:hover:not([disabled]):hover{
	border-color:#6565bd;
	background-color:#6565bd;
}
button.btn:disabled{
	opacity:.5;
}

aside button.btn.btn-primary{
	background-color:var(--color-primary);
	color:white;
	border-color:var(--color-primary);
}
aside button.btn.btn-primary:hover{
	background-color:var(--color-primary-hover);
	border-color:var(--color-primary-hover);
}

button.btn.btn-transparent{
	border-color:transparent;
}
button.btn.btn-transparent:hover{
	border-color:transparent;
	background-color:rgba(0,0,0,.15);
}















select{
	background-color:transparent;
	border:1px solid #888;
	padding: 6px 22px 6px 8px;

	-webkit-appearance:none;
	-moz-appearance:none;
	text-overflow:'';
	background-position:100% center;
	background-repeat:no-repeat;
	background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
}
select[disabled]{
	color:#888;
	border-color:#bbb;

	background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIiBmaWxsPSIjODg4Ii8+PC9zdmc+");
}
select::-ms-expand{display:none}









/* responsive */
@media only screen and (max-width:1440px){
	body{font-size:13px}
}

@media only screen and (max-width:480px){
	#current-files>div>div.item-buttons{
		flex-direction:column;
	}
}