*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;overflow:hidden;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:#eee}.header{display:flex;height:100vh;position:relative;overflow:hidden}header{width:250px;min-width:220px;background-color:#f0f0f0;padding:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:20;transition:transform .3s ease;overflow-y:auto}header h2,header p{margin:0 0 10px}header p{font-size:14px}header ul{list-style:none;padding:0;margin:0}header li{margin-bottom:10px}header a{text-decoration:none;color:#333}header a:hover{color:#007bff}li.nested{margin-top:10px;margin-left:20px}li.nested.active a{color:#007bff}li.active a{color:#007bff;font-weight:700;border-bottom:2px solid #007bff}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;padding-bottom:60px;position:relative;transition:all .3s ease;width:calc(100% - 220px);overflow-y:auto}footer{position:absolute;bottom:10px;left:0;width:100%;height:50px;color:#000;text-align:center;line-height:50px;font-size:14px;z-index:5}.media-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f0f0}.loading-spinner{padding:20px;color:#666;width:fit-content;height:fit-content}