assets/css/layouts/cp/base.css

body.cp {
	color: #1e375a;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

body.cp header {
	background-color: #1e375a;
	box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
	color: #fff;
	height: 56px;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 3;
}

@keyframes loading-movement{
	0% {
		background-position: 0 0;
	}
	to {
		background-position: 50px 50px;
	}
}

body.cp.loading header:before {
	animation: loading-movement 2s linear infinite;
	background-image: linear-gradient(-45deg, hsla(0, 0%, 100%, .05) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .05) 0, hsla(0, 0%, 100%, .05) 75%, transparent 0, transparent);
	background-size: 50px 50px;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

body.cp header .sidebar,
body.cp header .content {
	height: 100%;
	position: relative;
	vertical-align: top;
}

body.cp header .sidebar {
	float: left;
	width: 250px;
}

body.cp header .sidebar.right {
	float: right;
}

body.cp .wrap {
	align-items: stretch;
	display: block;
	height: 100%;
	width: 100%;
}

body.cp .wrap .sidebar,
body.cp .wrap .content {
	box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
	height: 100%;
	padding-top: 56px;
	position: relative;
	vertical-align: top;
	z-index: 2;
}

body.cp .wrap .content {
	z-index: 1;
}

body.cp .wrap .sidebar {
	background: #eee;
	float: left;
	width: 250px;
}

body.cp .wrap .sidebar.right {
	float: right;
}

body.cp .wrap .sidebar .scroll,
body.cp .wrap .content .scroll {
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}

body.cp .wrap .sidebar .scroll .padding,
body.cp .wrap .content .scroll .padding {
	padding: 16px;
}