/* Rom Patcher JS CSS template by Marc Robledo v20220323 */
/* minify at https://cssminifier.com/ */

/* @FONT-FACES */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300');

body{
	margin:0;
	font:15px 'Open Sans',sans-serif;
	cursor:default;
	line-height:1.8;
	background-color:#31343a;
	color:#3c3c3c;
	-moz-user-select:none;
	-webkit-user-select: none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

/* flex main column */
html, body{height:100%}
#column{
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	flex-direction: column;
}
header{margin: 1% 0 4%}
header h1{display:none}
footer{padding: 50px 0 20px}
#wrapper{flex-basis:100%}


.clickable{cursor:pointer}
.hide{display:none !important}
.text-center{text-align:center}
.text-right{text-align:right}
.m-b{margin-bottom:8px}
/* flex box */
.row{
	display:flex;
	flex-flow:row wrap; /* this is the same as flex-direction:row;flex-wrap:wrap; */
	align-items:center; /* vertical align */
	justify-content:space-between
}
.leftcol{width:28%}
.rightcol{width:70%}
.leftcol-md{width:60%}
.rightcol-md{width:40%}
.leftcol-lg{width:70%}
.rightcol-lg{width:30%}





/* icons */
.icon{
	display:inline-block;
	vertical-align:middle;
	width:16px;height:16px
}








/* header+footer */
header{text-align:center}
header h1{margin:0}
header img{max-width:90%; height:192px;}

footer{
	text-align:center;
	color:#767b86;
	font-size:85%;
}
footer a{
	color:#969ba6;
	text-decoration:none;
	border-bottom:1px solid #464b56;
}
footer a:hover{
	color:white;
	border-color:#41d5ff;
}



hr{border:none;border-top:1px dotted #bbb;margin:15px 0}


/* outer buttons */
.button-outer{
	background-color:transparent;
	color:white;
	cursor:pointer;
	text-align:center;
}
.button-outer:hover,.button-outer:focus{
	background-color:#2b2e33;
	cursor:pointer;
}
.button-outer img{
	height:16px;
	display:inline-block;
	vertical-align:middle;
}

/* Switch mode */
#switch-container{
	visibility:hidden;
	text-align:right;	
	margin-bottom:10px;
	font-size:88%;
}
#switch-create-button{
	border-radius:2px;
	padding: 6px 8px;
	transition:background-color .1s;
}
.switch{
	display:inline-block;
	vertical-align:middle;
	width:30px;height:16px;
	border-radius:8px;
	position:relative;
	transition:background-color .2s;
	background-color:#babfbf;
}
#switch-create-button .switch.disabled{background-color:#474c56;}
#settings-dialog .switch{transition:opacity .1s;}
#settings-dialog .switch:hover{cursor:pointer;opacity:.7}
.switch:before{
	position:absolute;
	background-color:white;
	height:12px;width:12px;
	content:" ";
	border-radius:6px;
	top:2px;
	left:2px;
	transition:left .2s;
}
.switch.enabled:before{
	left:16px;
}
.switch.enabled{background-color:#41bdc7;}




.tab{background-color:#f9fafa;padding:30px 15px;border-radius: 3px}
#tab1{display:none}

.buttons{
	margin-top:20px;
	text-align:right
}



/* forms */
input[type=file],select{
	box-sizing:border-box;
	max-width:100%;
	font-family:inherit;
	font-size:100%;
	outline:0;
	border:none;
	border-radius:3px;
	background-color:#edefef;
}
input[type=file].w100, select.w100{width:100%}
input[type=file]{padding:6px 10px}
select{
	padding:6px 18px 6px 10px;
	-webkit-appearance:none;
	-moz-appearance:none;
	text-overflow:'';

	background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
	background-position:100% center;
	background-repeat:no-repeat;
}
select::-ms-expand{display:none}
input[type=file].enabled:hover,select.enabled:hover{background-color:#dee1e1}
input[type=file].disabled,select.disabled{background-color:transparent}





/* buttons */
button{
	font-family:inherit;
	font-size:100%;
	min-width:120px;
	border-radius:3px;border:0;

	padding:10px 20px;
	margin:0 5px;

	background-color:#2a9ca5;
	color:white;

	transition:background-color .15s;

	box-sizing:border-box
}
button.enabled:hover{
	cursor:pointer;
	background-color:#3aacb5;
}
button.enabled:active{
	background-color:#297b81;
	transform:translateY(1px)
}
button:disabled{opacity:.35 !important;cursor:not-allowed}

button.no-text.with-icon:before{margin-right:0px}







#rom-info, #row-expected-source-info{font-family:'Roboto Mono',monospace;color:#888;font-size:12px;
	-moz-user-select:text;
	-webkit-user-select: text;
	-ms-user-select:text;
	-o-user-select:text;
	user-select:text;
	cursor:text;
}
#rom-info .rightcol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crc32.valid{color:green}
#crc32.invalid{color: red}
#crc32 span{text-decoration:underline}
#crc32 span:hover{cursor:pointer;color:black}


#crc32.valid:after{
	display:inline-block;
	vertical-align:middle;
	content:"";

	width:16px;height:16px;
	margin-left:4px;
	
	
	background-size:100% 100%;
	background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjMDgwIiBzdHJva2Utd2lkdGg9IjIuNzMiIGZpbGw9Im5vbmUiIGQ9Ik0gMS40Myw2LjU5IEMgNi4yNiwxMS40MiA2LjI2LDExLjQyIDYuMjYsMTEuNDIgTCAxNC42OCwzIi8+PC9zdmc+");
}





.message{padding: 5px 10px; border-radius:3px;display:inline-block;vertical-align:middle}
.message.error{background-color:#de4205; color:white}
.message.warning{background-color:#ffec68; color:black}

/* loading circle */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loading{
	width:20px;
	height:20px;
	display:inline-block;
	position:relative;
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s ease-in-out infinite;
	vertical-align:middle;
}
.loading:before{
	width:6px;
	height:6px;
	background-color:#41bdc7;
	border-radius:3px;
	display:inline-block;
	content:"";
	position:absolute;
	top:0;
	left:50%;
	margin-left:-3px;
}





#wrapper{
	box-sizing:border-box;
	max-width:95%;
	width:600px;
	margin:0 auto
}






/* dialogs */
#dialog-backdrop{
	position:fixed;
	display:flex;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.75);

	margin:0;
	padding:0;
	display:none;
}
#dialog-backdrop.show{display:flex}


.dialog{
	vertical-align:middle;
	margin:auto;
	background-color:white;
	color:#999;
	box-sizing:border-box;
	box-shadow:rgba(0,0,0,.7) 0 0 24px;
	padding:20px;
	border-radius:3px;
	display:none;
}
.dialog.show{display:block}

/* settings dialog */
#settings-dialog{
	min-width:400px;
	max-width:90%;
}
#settings-close-dialog{
	padding:8px;
	border-radius:30px;
	margin-right:-8px;
	margin-top:-8px;
	transition:background-color .2s;
	height:24px;
}
#settings-close-dialog:hover{
	cursor:pointer;
	background-color:#f4f4f4;
}




/* ZIP dialog */
#zip-dialog{
	min-width:360px;
}
#zip-dialog-file-list{
	list-style:none;
	padding:0;
	margin: 0;
	max-height:300px;
	overflow-y:auto;
}
#zip-dialog-file-list li{
	color:#3c3c3c;
	padding: 2px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#zip-dialog-file-list li:hover{
	background-color:#eee;
	cursor:pointer;
	color: black;
	border-radius: 3px;
}




/* light theme */
body.light{background-color:#eeeceb;}
body.light .button-outer{color:#575b66;}
body.light footer img.icon.settings, body.light footer img.icon.github{filter: invert(0%) brightness(30%);}
body.light .button-outer:hover, body.light .button-outer:focus{background-color: #e6e3e1}
body.light .switch.enabled{background-color:#ff941e;}
body.light #switch-create.disabled{background-color:#cec5bd;}
body.light button:not(.button-outer){background-color:#f9a345;}
body.light button:not(.button-outer):not(:disabled):hover{background-color:#ffbe78;}
body.light header img{filter: hue-rotate(98rad) brightness(97.9%) saturate(160%)}
body.light footer{color:#a89d97}
body.light footer a{color:#8c817c; border-color:#e3d4cc}
body.light footer a:hover{color:#484543; border-color:#ffac41}



/* responsive */
@media only screen and (max-width:641px){
	#wrapper{font-size:14px}
	#rom-info{font-size:11px}
	header img{max-height:96px}
	#settings-dialog, #zip-dialog{min-width: auto;}
}