.sidebar{position:fixed;width:300px;height:100%;background:#2E2E48;transition:.5s;overflow:hidden auto;color:#fff}.sidebar::-webkit-scrollbar{display:none}.sidebar ul{position:absolute;top:0;left:0;width:100%;padding-left:10px;height:100%}.sidebar ul div>button{position:relative;width:100%;padding:25px;margin-left:5px;display:flex;align-items:center}.sidebar ul li{position:relative;width:100%;padding:25px;margin-left:10px;display:flex;align-items:center}.sidebar ul li .sidebar-title{transition:.5s}.sidebar ul li:hover{background:#e5e5e5;color:#fa5600}.sidebar ul li:hover:before{content:"";position:absolute;right:10px;top:-90%;width:60px;height:60px;border-radius:50%;box-shadow:35px 35px 0 10px #e5e5e5;pointer-events:none}.sidebar ul li:hover:after{content:"";position:absolute;right:10px;bottom:-90%;width:60px;height:60px;border-radius:50%;box-shadow:35px -35px 0 10px #e5e5e5;pointer-events:none}.sidebar ul a.active li{background:#e5e5e5;color:#fa5600}.sidebar ul a.active li:before{content:"";position:absolute;right:10px;top:-90%;width:60px;height:60px;border-radius:50%;box-shadow:35px 35px 0 10px #e5e5e5;pointer-events:none;transition:.5s}.sidebar ul a.active li:after{content:"";position:absolute;right:10px;bottom:-90%;width:60px;height:60px;border-radius:50%;box-shadow:35px -35px 0 10px #e5e5e5;pointer-events:none;transition:.5s}.sidebar ul #filerModule,.sidebar ul #approverModule,.sidebar ul #attendanceMonitoring,.sidebar ul #time-inOut-Module,.sidebar ul #assetManagement{margin-left:40px}@media (max-height: 500px){.sidebar ul{max-height:500px}.sidebar ul a:last-child li{position:relative!important}}.sidebar .filer-collapse .icon,.sidebar .approver-collapse .icon,.sidebar .attendance-collapse .icon,.sidebar .filer-collapse[aria-expanded=true] div,.sidebar .approver-collapse[aria-expanded=true] div,.sidebar .attendance-collapse[aria-expanded=true] div{transition:.5s}.sidebar .filer-collapse[aria-expanded=true] .icon,.sidebar .approver-collapse[aria-expanded=true] .icon,.sidebar .attendance-collapse[aria-expanded=true] .icon{rotate:90deg;transition:.5s}.sidebar .filer-collapse:focus,.sidebar .approver-collapse:focus,.sidebar .attendance-collapse:focus{border:none}.sidebar.active{width:120px}.sidebar.active ul li .sidebar-title,.sidebar.active ul button .sidebar-title{display:none;transition:.5s}.sidebar.active .filer-collapse .icon,.sidebar.active .approver-collapse .icon{display:none}.sidebar.active ul #filerModule,.sidebar.active ul #approverModule,.sidebar.active ul #time-inOut-Module,.sidebar.active ul #assetManagement{margin-left:0}@media (max-width: 991px){.sidebar{left:-300px}.sidebar.active{width:300px;left:0}.sidebar.active ul li .sidebar-title,.sidebar.active ul button .sidebar-title{display:block;transition:.5s}.sidebar.active .filer-collapse .icon,.sidebar.active .approver-collapse .icon{display:block}.sidebar #filerModule,.sidebar #approverModule,.sidebar #time-inOut-Module,.sidebar #assetManagement{margin-left:40px!important}}@media (max-width: 480px){.sidebar{width:100%;left:-100%;z-index:5}.sidebar.active{width:100%;left:0}}.main_section{min-height:100vh;overflow-x:hidden}.main_section main{width:calc(100% - 300px);left:300px;min-height:100vh;background:#e5e5e5;color:#2e2e48;transition:.5s}.main_section main .top-bar{position:fixed;z-index:15;transition:.5s;width:calc(100% - 300px)}.main_section main.active{width:calc(100% - 120px);left:120px}.main_section main.active .top-bar{width:calc(100% - 120px)}@media (max-width: 991px){.main_section main{width:100%;left:0}.main_section main.active{left:300px}.main_section main .top-bar{width:100%}.main_section main .top-bar.active{width:calc(100% - 300px)}}@media (max-width: 480px){.main_section main.active .btn-toggle{z-index:1000;color:#fff;position:fixed;right:30px;left:initial}.main_section main.active .top-bar{position:static;z-index:5;transition:.5s;width:100%}}