@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
	text-shadow: 0 0 6px black;
	letter-spacing: 0.5px;
	line-height: 1.5;
}

*::-webkit-scrollbar {
	width: 5px;
}

*::-webkit-scrollbar-thumb {

	background-color: #d6dee1;
	border-radius: 10px;
	border-radius: 20px;
	border: 4px solid transparent;
	background-clip: content-box;
}

*::-webkit-scrollbar-track {
	background-color: transparent;
	-webkit-box-shadow: inset 0 0 6px rgba(199,215,217,0.1);
	background: linear-gradient(165deg, #2e4c93, #30769b);
}
		
html, body {
	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}
body {
    background: #8E2DE2;
    background: linear-gradient(to right, #391e6f, #2a1141);
    /*display: flex;
    justify-content: center;
    align-items: flex-start;
	padding-bottom: 20px;*/
}


h1, h2{
    color: #fff;
    font-size: 20px;
    margin-left: 10px;
	cursor: pointer;
}
u{
    text-decoration: none;
    /* text-decoration-style: dashed; */
    border-bottom: dashed 2px #cb2626;
}
.wrapper{
	padding: 0 10px;
	display: flex;
    flex-direction: column;
    gap: 15px 0px;
}
.wrapper > div {
    /* Your styles here */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.menu{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: -webkit-fill-available;
    color: #efefef;
    line-height: 24px;
    padding: 10px;
    background-color: #025163;
    background: linear-gradient(to right, #391e6f, #2a1141);
    /*box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;*/
    border-radius: 5px;
    border: solid 0px #306e9a;
    margin: 0;
    margin-bottom: 20px;
    position: relative;
    min-height: 30px;
    align-items: center;
	user-select: none;
}
.menu span{
	flex: 1 0 200px;
	display: block;
	width: -webkit-fill-available;
	text-align: center;
	cursor: pointer;
	line-height: 35px;
}
@media only screen and (max-width: 855px) {
	.menu span{
		flex: 1 0 300px;
	}
}
@media only screen and (max-width: 633px) {
	.menu span{
		flex: 1 0 200px;
	}
}
.menu span.selected {
    background: linear-gradient(165deg, #2b4a89, #2e5895);
    box-shadow: 0 0 8px 0 #000000, inset 0 0 4px 0 #00000061;
}
.intro-text{
	margin-top: 20px;
}
paragraph-title{
    font-weight: 800;
    font-size: 17px;
}
.intro-text p{
    color: #efefef;
    margin: 0;
    line-height: 24px;
    padding: 15px;
    background-color: #025163;
    background: linear-gradient(165deg, #2e4c93, #30769b);
    box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
    border-radius: 5px;
    border: solid 2px #3498db;
}
.error{
    padding: 7px;
    margin: 0 0 10px 0;
    color: white;
    background-color: firebrick;
    text-wrap: balance;
	text-align: center;
    line-height: 24px;	
}
.error-happy{
    padding: 7px;
    margin: 0 0 10px 0;
    color: white;
    background-color: #13b30299;
    text-wrap: balance;
	text-align: center;
    line-height: 24px;
}
.container {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 60px -20px #21386b, 0 0 15px #000000;
	background: #2e4c93;
	background: -webkit-linear-gradient(165deg, #2e4c93, #30769b);  
	background: linear-gradient(165deg, #2e4c93, #30769b);
	max-width: 900px;
	margin: 0 10px;
	overflow: hidden;
	width: 100%;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
	color: #fff;
	margin-bottom: 15px;
}
.file-attached{
	border: 2px dashed #63fb8b !important;
}


.favicon-file-label p, #dropAreaManifest p, #dropAreaManifestXML p, .concatenate-file-label p{
	margin: 0;
	padding: 0;
}
.drag{
	border: 2px dashed orange !important;	
}
.drop{
	
}
.dragDropFileText{
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
.chooseFileText{
    font-weight: 100;
	font-size: small;
    letter-spacing: 1px;
	overflow-wrap: anywhere;
}
.favicon-file-label span {
    font-size: 18px;
    color: #fff;
}

input[type=file] {
    display: none;
}

input[type=submit] {
    margin-top: 15px;
    cursor: pointer;
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
}

input.qrcode-download-button {
    margin-top: 15px;
    cursor: pointer;
    background-color: #db3434;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
}

input[type=submit]:hover {
    background-color: #2ecc71;
}

#image-preview{
    margin-top: 10px;
    box-shadow: -1px 1px 0 0px #ffffff69, 1px -1px 0 0px #ffffff69;
	background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
	position: relative;
	overflow: hidden;
	container-type: inline-size;
}

#image-preview:hover::before {
    content: "Safe space";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 15%);
    height: calc(100% - 15%);
    transform: translate(-50%, -50%);
    border: 2px dashed #ff0000;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 200px #00000085;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0 9px black;
	font-size: 10cqw;
}

label[for=icoDimensions]{
	margin-bottom: 5px;
	font-size: 18px;
}

select#icoDimensions {
    border: 2px solid #3498db;
    border-radius: 5px;
    padding: 8px; /* Adjust padding as needed */
	
	appearance: none;
	
	background-color: #2f6698;
	background: linear-gradient(165deg, #2e4c93, #30769b);
	color: #fff;
	outline: 0;
	font-size: 18px;
	width: auto;
	min-width: -moz-available;
	min-width: -webkit-fill-available;
	max-width: -webkit-fill-available;
	max-width: -moz-available;
	box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PgogICAgICAgIDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgCiAgICAgICAgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgc3R5bGU9ImNvbG9yOiB3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29uLXRhYmxlci1zZWxlY3QiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPiA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+IDxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiPjwvcmVjdD4gPHBhdGggZD0iTTkgMTFsMyAzbDMgLTMiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+IDwvc3ZnPiAg'); /* Replace with your arrow image */
    background-repeat: no-repeat;
    background-position: 99% center;
    background-origin: border-box;
}
select#icoDimensions:focus{
	background-blend-mode: overlay;
}
#icoDimensions option{
	background-color: #2f6698;
    border: 2px solid #3498db;
    border-radius: 5px;
    padding: 8px; /* Adjust padding as needed */
    margin-top: 10px;
}
.permalink{
    margin-top: 15px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50%;
    gap: 15px;
}
.permalink a{
	color: #fff;
	text-decoration: none;
}
.permalink a:hover{
	color: firebrick;
}
#Favicon .permalink a:first-child{
    background-image: url('/ext/zip.png');
    background-size: contain;
    display: inline-block;
    width: 50px;
    height: 50px;
}
#Favicon .permalink a:last-child{
    background-image: url('/ext/ico.png');
    background-size: contain;
    display: inline-block;
    width: 50px;
    height: 50px;
}

.pointerEvents {
    pointer-events: none;
}


@media (max-width: 600px), (max-height: 720px) {
    body {
        display: block; /* or any other display value you want for smaller screens */
		position: relative;
		margin: 0 auto;
    }
	.wrapper{
		max-width: 700px;
		margin: auto;
		padding: 0;
	}
	.container{
		margin: 0 5px;
	}
	.intro-text{
		font-size: 14px;
	}
}




/* validate manifest.json */
	#fileInput{
		display: none;
		border: solid 1px #fff;
		/* display: block; */
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
	}
	#dropAreaManifest{
		border: 2px dashed #3498db;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		color: #fff;
		padding: 20px;
		position: relative;
		user-select: none;
		display: block;
	}
	#jsonTree {
		padding: 10px;
		overflow: hidden;
		padding: 10px;
		color: #fff;
		background: linear-gradient(165deg, #2e4c93, #30769b);
		box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
		border-radius: 5px;
		border: solid 2px #3498db;
	}
	#jsonTree:empty{
		display: none;
	}
	#jsonTree strong.error{
		display: inline-block;
		margin-bottom: 5px;
	}
	#jsonTreeOutput{
		/*padding-left: 20px;*/
		width: calc(100% - 30px);
		overflow: auto;
		white-space: pre;
		padding-right: 10px;
	}


/* validate XML */
	#fileInputXML{
		display: none;
		border: solid 1px #fff;
		/* display: block; */
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
	}
	#dropAreaManifestXML {
		border: 2px dashed #3498db;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		color: #fff;
		padding: 20px;
		position: relative;
		user-select: none;
		display: block;
	}
	#XMLTree {
		padding: 10px;
		overflow: hidden;
		padding: 10px;
		color: #fff;
		background: linear-gradient(165deg, #2e4c93, #30769b);
		box-shadow: inset 0 0 60px -20px #21386b, 0 0 10px 0px #21386b;
		border-radius: 5px;
		border: solid 2px #3498db;
	}
	#XMLTree:empty{
		display: none;
	}
	#XMLTree strong.error{
		display: inline-block;
		margin-bottom: 5px;
	}
	#XMLTreeOutput{
		/*padding-left: 20px;*/
		width: calc(100% - 30px);
		overflow: auto;
		white-space: pre;
		padding-right: 10px;
	}