:root{--primary-bg: #ffffff;--second-bg: #f6f8fa;--highlight-color: #ffa217;--text-color: #1f2328;--border-color: #dfe4e9}@media(prefers-color-scheme: dark){:root{--primary-bg: #151b23;--second-bg: #212830;--highlight-color: #ffa217;--text-color: #d1d7e0;--border-color: #353c44}}section h1{font-size:40px;font-weight:bold;margin-bottom:10px;padding:20px}section hr{color:#353c44;background-color:#353c44;height:1px;width:calc(100% + 40px);border:none;margin:20px -20px;padding:0}*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none}body{font-family:Arial,sans-serif;background-color:var(--primary-bg);color:var(--text-color)}.container{display:flex;height:100vh}.content-container{flex:1;position:relative;overflow:auto;transition:margin-left .8s;margin-left:90px}.sidebar{position:fixed;width:90px;height:100%;background-color:var(--second-bg);z-index:200;transition:width .8s;padding-left:10px;overflow:hidden}.sidebar:hover{width:300px}.sidebar:hover~.content-container{margin-left:300px}.sidebar .nav{position:relative;height:100vh}.sidebar .nav li{position:relative;padding:5px}.sidebar .nav li#user{margin:40px 0 100px 0}.sidebar .nav li a{position:relative;display:flex;white-space:nowrap}.sidebar .nav li a .icon{position:relative;min-width:60px;padding-left:10px;height:70px;transition:color .5s;color:#fff;display:flex;justify-content:center;align-items:center}.sidebar .nav li a .icon .imageBox{position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden}.sidebar .nav li a .icon .imageBox img{width:100%;height:100%;object-fit:cover}.sidebar .nav li a .icon i{position:relative;text-align:center;font-size:30px;z-index:201}.sidebar .nav li a .text{position:relative;height:70px;font-size:20px;color:color-mix(in srgb, var(--highlight-color) 76%, transparent);padding-left:15px;text-transform:uppercase;letter-spacing:2px;transition:color .5s;display:flex;justify-content:center;align-items:center}.sidebar .nav li:hover a .icon,.sidebar .nav li:hover a .text{color:var(--highlight-color)}.sidebar .nav .highlight{position:absolute;padding:5px;top:0;left:0;width:100%;height:80px;background-color:var(--primary-bg);border-top-left-radius:50px;border-bottom-left-radius:50px;transition:top .3s ease;z-index:-2}.sidebar .nav .highlight::before,.sidebar .nav .highlight::after{content:"";position:absolute;right:0px;width:30px;height:30px;background:rgba(0,0,0,0)}.sidebar .nav .highlight::before{top:-30px;border-bottom-right-radius:25px;box-shadow:5px 5px 0 5px var(--primary-bg)}.sidebar .nav .highlight::after{bottom:-30px;border-top-right-radius:25px;box-shadow:5px -5px 0 5px var(--primary-bg)}.sidebar .nav .icon-frame{position:absolute;display:flex;justify-content:center;align-items:center;left:5px;width:60px;height:70px;transition:all .3s;z-index:-1}.sidebar .nav .icon-frame::before{content:"";position:absolute;inset:5px;width:60px;background-color:var(--second-bg);border-radius:50%;border:7px solid var(--highlight-color);box-sizing:border-box}.page{position:relative;width:100%;display:none;padding:20px;background-color:var(--primary-bg)}.page.page-active{display:block}.page section{background-color:var(--second-bg);border-radius:8px;padding:20px;width:100%;margin-top:20px}