.sidebar {
	/* background-color: white; 
	color: black; */
	border-right: 1px solid lightgray;
	grid-column: 1/2;
	grid-row: 1/2;
	margin: 5px;
	margin-top: 20px;
	padding: 10px;
	padding-top: 30px;
}

.menu-item {
	margin-bottom: 10px;
	margin-left: 20px;
	font-size: 16px;
}

/* .menu-item:hover {
	background-color: #f0f0f0;
	border-radius: 3px;
	padding: 2px;
	margin: 2px;
}

.menu-item.clicked {
	font-size: 14px;
	transition: font-size 0.3s ease, transform 0.3s ease;
	background-color: #F5E552;
	color: #F2911B;
} */

.menu-container {
	margin-bottom: 15px;
	font-size: 16px;
}

.content {
	grid-column: 2/3; grid-row : 1/ 2;
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 90vh;
	margin: 20px;
	padding: 10px;
	grid-row: 1/2;
}

.output-container {
	display: grid;
	gap: 10px;
	width: 35vw;
	height: 75vh;
	
}

.ui-output-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	height: 70vh;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
	width: 640px
}

.output-container-Child {
	/* margin-bottom: 20px; */
	
}

.output {
	flex: 1;
	padding: 10px;
	border-radius: 10px;
	background-color: #f0f0f0;
}

.buttons {
	gap: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button {
	padding: 10px 20px;
	background-color: #F2911B;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 200px;
}

.alert {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F5E552;
	color: #333;
	padding: 2px;
	/* border-radius: 5px;
	padding: 10px 20px; */
}

.alert::before {
	content: "⚠️";
	font-size: 20px;
	margin-right: 10px;
}

.pay-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background-color: #F2911B;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 30px;
}

.grid-container {
	display: grid;
	grid-template-columns: 11% 89%;
	grid-template-rows: auto;
	gap: 10px;
}

.rowBorder1 {
	grid-row: 1/2;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
	background-color: #1B2B40;
	color: white;
}

.rowBorder2 {
	grid-row: 2/3;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
	overflow: auto;
}

.img {
	width: 25px;
	height: 25px;
}

.messagebox-container {
	gap: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
}

.messagebox-header {
	display: flex;
	justify-content: space-between;
}

.hr {
	background-color: gray;
}

.key {
	background-color:#1B2B40;
	color: #44A1F2;
	border-width:0;
	width:90px;
	margin-right: 15px;
}

.value {
	color: #F2A74B;
	background-color:#1B2B40;
	border-width:0;
	width:320px;
	margin-left: 10px;
}
.valueReadonly {
	color: #F2A74B;
	background-color:#1B2B40;
	border-width:0;
	width:320px;
	margin-left: 10px;
	border-color: red;
	border-style: dashed;
	border-width: 1px;
}
value::after {
	content: ",";
}

valueReadonly::after {
	content: ",";
}

.messagebox-body {
	background-color: #1B2B40;
}
.item1{
	grid-column: span 1;
}
.item2-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 2;
	padding: 10px 20px;
	color: black;
	border: none;
	border-radius: 5px;
	border: 1px solid #ccc;
	cursor: pointer;
}
.item2-non-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 2;
	padding: 10px 20px;
	color: black;
	border: none;
	border-radius: 5px;
	border: 1px solid #ccc;
	cursor: pointer;
}

.item.large {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 6;
	background-color: #F2911B;
	
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;	
}
.item.extra {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 8;
}
.item.extra.alert {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 8;
	margin: auto;
}
.clicked {
	border: 3px solid #ccc;
}
.resultContent {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
	background-color: #1B2B40;
	color: white;
	overflow: auto;
}
.resultParams {
	width: max-content;
}

.menu-item-service {
	margin-left: 20px;
	display: 'none';
}
.menu-item-service::before {
	content: var(--after-content, '☑︎');
}
.non-ui {
	display: none;
	text-align: center;
}
.ui {
	display: block;
	text-align: center;
}

.vaKey {
	background-color:#1B2B40;
	color: #44A1F2;
	border-width:0;
	width:100%;
	margin-right: 15px;
}
/* .menu-item:hover {
	background-color: #f0f0f0;
	border-radius: 3px;
	padding: 2px;
	margin: 2px;
}

.menu-item.clicked {
	font-size: 14px;
	transition: font-size 0.3s ease, transform 0.3s ease;
	background-color: #F5E552;
	color: #F2911B;
} */