/* ==========================================
   ARTIGEM DESIGNER LAYOUT
========================================== */


.designer-app {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}




/* ================= HEADER ================= */


.designer-header {
	height: 60px;
	flex-shrink: 0;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	background: #fff;
}





/* ================= MAIN ================= */


.designer-main {
	flex: 1;
	display: flex;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}




/* ================= LEFT PANEL ================= */


.designer-left {
	width: 220px;
	flex-shrink: 0;
	border-right: 1px solid #ddd;
	padding: 20px;
	background: #fff;
	overflow-y: auto;
}




/* ================= RIGHT PANEL ================= */


.designer-right {
	width: 280px;
	flex-shrink: 0;
	border-left: 1px solid #ddd;
	padding: 20px;
	background: #fff;
	overflow-y: auto;
}





/* ================= CANVAS ================= */


.designer-canvas {
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}





#designer-stage {
	width: 100%;
	height: 100%;
	background: #fff;
}





/* ================= FOOTER ================= */


.designer-footer {
	height: 45px;
	flex-shrink: 0;
	border-top: 1px solid #ddd;
	padding: 10px 20px;
	background: #fff;
}





/* ================= BUTTONS ================= */


.component-button {
	width: 100%;
	margin-bottom: 10px;
}





/* ==========================================
   TABLET
========================================== */


@media(max-width:1100px) {


	.designer-left {
		width: 170px;
		padding: 15px;
	}


	.designer-right {
		width: 230px;
		padding: 15px;
	}
}

.property-card .card-body {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}

.designer-app {
	height: 100vh;
	overflow: hidden;
}


.designer-body {
	height: calc(100vh - 55px);
}


/* ==========================================
   MOBILE
========================================== */


@media(max-width:768px) {


	.designer-app {
		height: auto;
		min-height: 100vh;
		overflow: auto;
	}



	.designer-header {
		height: auto;
		min-height: 60px;
		padding: 10px;
	}



	.designer-main {
		flex-direction: column;
		overflow: visible;
	}



	/* Canvas first */

	.designer-canvas {
		order: 1;
		width: 100%;
		height: 450px;
		min-height: 450px;
	}



	/* Components */

	.designer-left {
		order: 2;
		width: 100%;
		border-right: none;
		border-top: 1px solid #ddd;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px;
	}



		.designer-left h5 {
			width: 100%;
		}



	.component-button {
		width: auto;
		flex: 1;
		min-width: 120px;
	}



	/* Properties */

	.designer-right {
		order: 3;
		width: 100%;
		border-left: none;
		border-top: 1px solid #ddd;
		padding: 15px;
	}



	.designer-footer {
		height: auto;
		font-size: 14px;
	}
}




/* ==========================================
   SMALL PHONE
========================================== */


@media(max-width:480px) {


	.designer-canvas {
		height: 350px;
		min-height: 350px;
	}



	.designer-header .designer-actions button {
		padding: 4px 8px;
		font-size: 12px;
	}
}