@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{font-family:Poppins,sans-serif;margin:0;padding:0;box-sizing:border-box}:root{--body-color: #e4e9f7;--sidebar-color: #fff;--primary-color: #695cfe;--primary-color-light: #f6f5ff;--toggle-color: #ddd;--text-color: #707070;--trans-02: all .2s ease;--trans-03: all .3s ease;--trans-04: all .4s ease;--trans-05: all .5s ease}.body{height:100vh;background:var(--body-color);transition:var(--trans-05)}.body.dark{--body-color: #18191a;--sidebar-color: #242526;--primary-color: #3a3b3c;--primary-color-light: #3a3b3c;--toggle-color: #fff;--text-color: #ccc}.sidebar{position:fixed;top:0;left:0;height:100%;width:250px;padding:10px 14px;background:var(--sidebar-color);transition:var(--trans-05);z-index:100}.sidebar.close{width:88px}.sidebar .text{font-size:16px;font-weight:500;color:var(--text-color);transition:var(--trans-03);white-space:nowrap;opacity:1}.sidebar.close .text{opacity:0}.sidebar .image{min-width:60px;display:flex;align-items:center;justify-content:center}.sidebar .menu{margin-top:35px}.sidebar li{height:50px;margin-top:10px;list-style:none;display:flex;align-items:center}.sidebar li .icon{display:flex;align-items:center;justify-content:center;min-width:60px;font-size:20px}.sidebar li .icon,.sidebar li .text{color:var(--text-color);transition:var(--trans-02)}.sidebar header{position:relative}.sidebar .image-text img{width:40px;border-radius:6px}.sidebar header .image-text{display:flex;align-items:center}header .image-text .header-text{display:flex;flex-direction:column}.header-text .name{font-weight:600}.header-text .profession{margin-top:-2px}.sidebar header .toggle{position:absolute;top:50%;right:-25px;transform:translateY(-50%) rotate(180deg);width:25px;height:25px;background:var(--primary-color);display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--sidebar-color);font-size:25px;transition:var(--trans-03)}.sidebar.close header .toggle{transform:translateY(-50%)}.body.dark .sidebar header .toggle{color:var(--text-color)}.sidebar li a{text-decoration:none;display:flex;height:100%;width:100%;align-items:center;border-radius:6px;transition:var(--trans-04)}.sidebar li a:hover{background:var(--primary-color)}.sidebar li a:hover .icon,.sidebar li a:hover .text{color:var(--sidebar-color)}.body.dark .sidebar li a:hover .icon,.body.dark .sidebar li a:hover .text{color:var(--text-color)}.sidebar .search-box{background:var(--primary-color-light);border-radius:6px;transition:var(--trans-04);cursor:pointer}.search-box input{width:100%;height:100%;background:var(--primary-color-light);outline:none;border:none;border-radius:6px;font-size:16px;font-weight:500;transition:var(--trans-04)}.body.dark .search-box input{color:var(--text-color)}.sidebar .menu-bar{display:flex;flex-direction:column;justify-content:space-between;height:calc(100% - 50px)}.menu-bar .mode{position:relative;border-radius:6px;background:var(--primary-color-light);transition:var(--trans-04)}.menu-bar .mode i{position:absolute}.menu-bar .mode i.sun{opacity:0}.body.dark .menu-bar .mode i.sun{opacity:1}.body.dark .menu-bar .mode i.moon{opacity:0}.menu-bar .mode .moon-sun{height:50px;width:60px;display:flex;align-items:center}.menu-bar .mode .toggle-switch{position:absolute;display:flex;align-items:center;justify-content:center;height:100%;min-width:60px;cursor:pointer;right:0;background:var(--primary-color-light);border-radius:6px;transition:var(--trans-04)}.toggle-switch .switch{position:relative;height:22px;width:44px;border-radius:25px;background:var(--toggle-color)}.switch:before{content:"";height:15px;width:15px;background:var(--sidebar-color);border-radius:50%;position:absolute;top:50%;left:5px;transform:translateY(-50%);transition:var(--trans-04)}.body.dark .switch:before{left:24px}.home{position:relative;height:100vh;left:250px;width:calc(100% - 250px);background:var(--body-color);transition:var(--trans-05)}.sidebar.close~.home{left:88px;width:calc(100% - 88px)}.home .text{font-size:30px;font-weight:500;color:var(--text-color);padding:8px 40px}