.mycontainer{flex-direction:column;height:100vh;display:flex}.nav-bar{justify-content:space-between;align-items:center;padding:10px;display:flex}.show-btn{color:#fff;cursor:pointer;background-color:#28a745;border:none;padding:5px 10px;display:none}.content-wrapper{flex:1;display:flex}.side-bar{background-color:#f4f7fb;border-right:1px solid #6f6f6f;width:20vw;padding:20px;transition:transform .3s ease-in-out;overflow-y:auto}.close-btn{color:#fff;cursor:pointer;background-color:red;border:none;padding:5px;display:none;position:absolute;top:10px;right:10px}.main-content{background-color:#f4f7fb;flex:1;width:80vw;padding:10px}.footer{text-align:center;padding:10px}@media (max-width:768px){.show-btn{display:inline-block}.content-wrapper{flex-direction:column}.side-bar{z-index:80;border-right:none;width:100%;height:50%;transition:transform .3s ease-in-out;position:fixed;bottom:0;left:0;transform:translateY(100%)}.close-btn{display:inline-block}.main-content{flex:1;width:100vw}}.mobile-footer{z-index:50;background-color:#fff;width:100%;display:none;position:fixed;bottom:0;left:0;box-shadow:0 -2px 5px #00000080}.footer-nav{justify-content:space-around;align-items:center;padding:10px 0;display:flex}.nav-item{text-align:center;color:#7a7d7e;flex:1;font-size:14px;text-decoration:none}.nav-item i{margin-bottom:5px;font-size:20px}.nav-item span{font-size:12px;display:block}.nav-item:hover{color:#1389f0}@media (max-width:768px){.mobile-footer{display:block}}