body.dg_screen {overflow: hidden;}
.dg_screen .row-designer {position: fixed;width: 100%;height: 100%;top: 0;z-index: 10000000;overflow: auto;left: 0;}

.codesla-designer-page {
	background: #f4f7fb;
	color: #1f2937;
	min-height: 0;
	padding: 0 20px 24px;
}

.codesla-designer-topbar {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dce5ee;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	display: flex;
	justify-content: space-between;
	margin: 18px auto 14px;
	max-width: 1480px;
	padding: 12px 16px;
}

.codesla-designer-breadcrumbs {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.codesla-designer-breadcrumbs a,
.codesla-designer-back {
	color: #1565a8;
	font-weight: 600;
	text-decoration: none;
}

.codesla-designer-breadcrumbs span {
	color: #9aa6b2;
}

.codesla-designer-back {
	background: #eef6ff;
	border: 1px solid #c8def4;
	border-radius: 4px;
	color: #164b7c;
	flex: 0 0 auto;
	padding: 8px 12px;
}

.codesla-designer-stage {
	background: #ffffff;
	border: 1px solid #dce5ee;
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
	margin: 0 auto;
	max-width: 1480px;
	height: calc(100vh - 162px);
	min-height: 360px;
	overflow: hidden;
}

.codesla-designer-stage .row-designer {
	height: 100%;
	min-height: 360px;
	max-height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.codesla-designer-stage #codesla_product_designer-designer {
	background: #ffffff;
	display: block;
	height: 100% !important;
	min-height: 360px;
	max-height: 100%;
	width: 100% !important;
}

.codesla-designer-stage .mask-loading {
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
}

.codesla-designer-stage .mask-main-loading {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.codesla-designer-stage .mask-icon-loading {
	max-height: 44px;
}

.codesla-designer-stage .mask-logo-loading {
	max-height: 42px;
	max-width: 220px;
}

@media (max-width: 767px) {
	.codesla-designer-page {
		padding: 0 10px 14px;
	}

	.codesla-designer-topbar {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
		margin-top: 10px;
	}

	.codesla-designer-back {
		text-align: center;
	}

	.codesla-designer-stage,
	.codesla-designer-stage .row-designer,
	.codesla-designer-stage #codesla_product_designer-designer {
		min-height: calc(100vh - 138px);
	}
}