.gi-3x {
					font-size: 1.8em;
				}
				.zid_header_inner {
					margin: 0 auto;
				
					padding-left: 10px;
					padding-right: 10px;
				
				}
				.zid_mainlogo  {
					background-image: url(assets/images/logo.png);
					background-repeat: no-repeat;
					height: 50px;
					width: 100px;
					background-size: 100px 80px;
					display: block;
					margin: 0 auto;
					text-indent: -999999em;
				}
				.zid_mainlogo {
					padding: 0;
					margin: -10px 0 0;
					float: left;
				}
				.zid_pagetitle {
					font-size: 21px;
					line-height: normal;
					color: #fff;
					white-space: nowrap;
					font-weight: normal;
					text-align: center;
					margin: 0 0 0 0;
					padding: 13px 0 0 0;
				}
				.zid_mainexit {
					height: 30px;
					width: 100px;
					color: #fff;
					background-color: #6282bf;
					background-size: 100px 30px;
					display: block;
					margin: 0 auto;
					/* padding: 0; */
					margin: -27px 0px 0 0;
					float: right;
				}
				.zid_mainback {
					height: 30px;
					width: 100px;
					color: #fff;
					background-color: #6282bf;
					background-size: 100px 30px;
					display: block;
					padding: 1px 0 0 0;
					margin: 12px 0px 0 0;
					float: left;
				}

.api-home-shortcut .navbar-brand {
	display: flex;
	align-items: center;
	justify-content: center;
}

.exchange-panel {
	max-width: 1120px;
	margin: 0 auto;
}

.api-package-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
}

.api-package-grid .api-package-btn {
	width: auto !important;
	min-height: 72px;
	white-space: normal;
	line-height: 1.2;
	padding: 8px 5px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.api-package-grid .api-package-btn small {
	display: block;
	max-width: 100%;
	overflow-wrap: anywhere;
	line-height: 1.2;
}

#roles .am-u-sm-8 {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

#roles [data-toggle="buttons"] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#roles .btn {
	width: auto !important;
	min-width: 116px;
	margin: 0 !important;
	white-space: normal;
	line-height: 1.25;
}

.exchange-panel .input-group {
	width: 100%;
	display: flex;
	justify-content: center;
}

.exchange-panel .input-group-btn {
	display: block;
	width: auto;
}

@media (max-width: 767px) {
	body {
		padding-top: 62px;
	}

	.zid_header_inner {
		min-height: 48px;
	}

	.zid_pagetitle {
		font-size: 19px;
		padding-top: 12px;
	}

	.container {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	.api-home-shortcut {
		width: 54px;
		margin: 0;
	}

	.api-home-shortcut .navbar-brand {
		width: 54px;
		height: 56px;
		padding: 0 !important;
	}

	.alert.alert-success {
		margin: 0 0 18px 0;
		min-height: 56px;
		padding: 9px 8px 9px 58px;
		font-size: 12px;
		line-height: 1.35;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 8px;
	}

	.alert.alert-success span {
		display: inline;
	}

	.alert.alert-success span[style*="float"] {
		float: none !important;
		margin-left: 0;
	}

	.panel-body {
		padding: 14px 10px;
	}

	form label {
		margin-top: 12px;
	}

	form .form-group {
		margin-top: 15px;
	}

	.api-package-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.api-package-grid .api-package-btn {
		min-height: 86px;
		padding: 9px 4px;
	}

	.api-package-grid .api-package-btn small:first-of-type {
		font-size: 14px !important;
	}

	.api-package-grid .api-package-btn small:last-of-type {
		font-size: 12px !important;
	}

	#roles .btn {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
		padding: 10px 6px;
	}
}

@media (max-width: 340px) {
	.api-package-grid {
		grid-template-columns: 1fr;
	}

	#roles .btn {
		flex-basis: 100%;
	}
}