body.cp { color: #1e375a; height: 100%; overflow: hidden; position: relative; width: 100%; } body.cp header { background-color: #205081; 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 0px; } } body.cp header:before { background-image: linear-gradient(45deg, #28598a 25%, transparent 0, transparent 50%, #28598a 0, #28598a 75%, transparent 0, transparent); background-size: 50px 50px; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } body.cp.loading header:before { animation: loading-movement 2s linear infinite; } body.cp header .wrap { align-items: stretch; display: block; height: 100%; position: relative; width: 100%; z-index: 2; } body.cp header .wrap .sidebar, body.cp header .wrap .content { height: 100%; position: relative; vertical-align: top; z-index: 2; } body.cp header .wrap .content { z-index: 1; } body.cp header .wrap .sidebar { float: left; width: 250px; } body.cp header .wrap .sidebar.right { float: right; } body.cp .body, body.cp .body .wrap { align-items: stretch; display: block; height: 100%; width: 100%; } body.cp .body .wrap .sidebar, body.cp .body .wrap .content { height: 100%; padding-top: 56px; position: relative; vertical-align: top; z-index: 2; } body.cp .body .wrap .content { z-index: 1; } body.cp .body .wrap .sidebar { background: #eee; float: left; width: 250px; } body.cp .body .wrap .sidebar.right { float: right; } body.cp .body .wrap .sidebar .scroll, body.cp .body .wrap .content .scroll { height: 100%; overflow: hidden; overflow-y: auto; } body.cp .body .wrap .sidebar .scroll .padding, body.cp .body .wrap .content .scroll .padding { padding: 16px; } .divider { border-top: 1px solid #d6d6d6; height: 0; overflow: hidden; }