@font-face {
	font-family: "Open Sans";
	src: url("assets/OpenSans-Regular.ttf");
}

body {
	margin: 0;
	padding: 0;
	font-family: "Open Sans";
	color: white;
	background-color: #212121;
}

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

.JSON {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 85%;
	padding:10px;
	background-color:#282828;
}

.item {
	display: flex;
    width: 98%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.itemc {
	display: flex;
    width: 98%;
    flex-direction: column;
    align-items: flex-end;
}

.file {
	display: flex;
    width: 30%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

tools {
	display: flex;
    width: 50%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

button, ::file-selector-button {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #3D3D3D;
	color: white;
	border: none;
	font-family: "Open Sans";
}

.item-input select {
	width:100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

input[type="text"], input[type="number"], textarea {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #3D3D3D;
	color: white;
	border: none;
	font-family: "Open Sans";
}

textarea {
	width:90%;
	height:60vh;
	font-family: monospace;
	
}

input[type="file"] {
	font-family: "Open Sans";
}

::file-selector-button {
	margin-right: 20px;
}

.end {
	display:flex;
	width:100%;
	justify-content: flex-end;
}

input[type="checkbox"] {
	display: flex;
}

button:hover, ::file-selector-button:hover {
	background-color: #4C4C4C;
}

button:disabled {
	color: gray;
	background-color: #3D3D3D !important;
}

.item-input {
	font-family: "Open Sans";
	width: 60%;
}

.item-input input[type="text"], input[type="number"] {
	width:100%;
}

.item * {
	display: inline-flex;
}

#savetype,#mode {
	display: flex;
    width: 30%;
	padding: 5px;
}

select {
	background-color: #3D3D3D;
	color: white;
	border: none;
}

select,option {
	font-family: "Open Sans";
}