/* Google Font Link */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); /* * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } */ .sidebar { color: #000000; margin: 0; padding: 0; box-sizing: border-box; position: fixed; right: 0; top: 30%; width: 78px; background: #C4151C; padding: 6px 14px; z-index: 99; transition: all 0.5s ease; border-radius: 10px; /* Initial transform: off-screen to the right by its own width */ transform: translateX(0); /* Starts visible on the right */ transition: transform 0.3s ease-in-out; /* Smooth transition */ } /* --- State when sidebar is translated to the left --- */ /* This class will be added to the or a parent container */ .sidebar.translate-right { transform: translateX(100%); /* Moves it entirely off-screen to the left */ } .sidebar.open { width: 250px; } .sidebar .logo-details { height: 60px; display: flex; align-items: center; position: relative; } .sidebar .logo-details .icon { opacity: 0; transition: all 0.5s ease; } .sidebar .logo-details .logo_name { color: #fff; font-size: 20px; font-weight: 600; opacity: 0; transition: all 0.5s ease; } .sidebar.open .logo-details .icon, .sidebar.open .logo-details .logo_name { opacity: 1; } .sidebar .logo-details #btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 22px; transition: all 0.4s ease; font-size: 23px; text-align: center; cursor: pointer; transition: all 0.5s ease; } .sidebar.open .logo-details #btn { text-align: right; } .sidebar i { color: #fff; height: 60px; min-width: 50px; font-size: 28px; text-align: center; line-height: 60px; } .sidebar .nav-list { margin-top: 20px; height: 100%; } .sidebar li { position: relative; margin: 8px 0; list-style: none; } .sidebar li .tooltip { position: absolute; top: -20px; right: calc(100% + 15px); z-index: 3; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); padding: 6px 12px; border-radius: 4px; font-size: 15px; font-weight: 400; opacity: 0; white-space: nowrap; pointer-events: none; transition: 0s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } .sidebar li:hover .tooltip { opacity: 1; pointer-events: auto; transition: all 0.4s ease; top: 50%; transform: translateY(-50%); } .sidebar.open li .tooltip { display: none; } .sidebar input { font-size: 15px; color: #FFF; font-weight: 400; outline: none; height: 50px; width: 100%; width: 50px; border: none; border-radius: 12px; transition: all 0.5s ease; background: #C4151C; } .sidebar.open input { padding: 0 20px 0 50px; width: 100%; } .sidebar li a { display: flex; height: 100%; width: 100%; border-radius: 12px; align-items: center; text-decoration: none; transition: all 0.4s ease; background: #C4151C; } .sidebar li a:hover { background: #FFF; } .sidebar li a .links_name { /* background-color: #c74037; */ color: #ffffff; font-size: 15px; font-weight: 400; white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.4s; } .sidebar.open li a .links_name { opacity: 1; pointer-events: auto; } .sidebar li a:hover .links_name, .sidebar li a:hover i { transition: all 0.5s ease; color: #C4151C; } .sidebar li i { height: 50px; /*gap between icons*/ line-height: 50px; font-size: 18px; border-radius: 12px; } .sidebar li.profile { position: fixed; height: 60px; width: 78px; left: 0; bottom: -8px; padding: 10px 14px; background: #C4151C; transition: all 0.5s ease; overflow: hidden; } .sidebar.open li.profile { width: 250px; } .sidebar li .profile-details { display: flex; align-items: center; flex-wrap: nowrap; } /*icons size*/ .sidebar li img { height: 45px; width: 45px; object-fit: cover; border-radius: 6px; margin-right: 10px; } .sidebar li.profile .name, .sidebar li.profile .job { font-size: 15px; font-weight: 400; color: #fff; white-space: nowrap; } .sidebar li.profile .job { font-size: 12px; } .home-section { position: relative; background: #E4E9F7; min-height: 100vh; top: 0; left: 78px; width: calc(100% - 78px); transition: all 0.5s ease; z-index: 2; } .sidebar.open~.home-section { left: 250px; width: calc(100% - 250px); } .home-section .text { display: inline-block; color: #C4151C; font-size: 25px; font-weight: 500; margin: 18px } @media (max-width: 420px) { .sidebar li .tooltip { display: none; } } @media screen and (orientation: portrait) { .sidebar { width: 60px; padding: 3px 7px; } /* .sidebar li img{ height: 35px; width: 35px; } */ } #button_wrapper { text-align:center; font-family: "Montserrat", sans-serif; text-transform:uppercase; } #button_toolbar { position: absolute; width:100%; max-width:670px; min-width:550px; margin: 70px auto; } .slider_button { width:70px; height:70px; border-radius:50%; background-color:#3AB09E; color:#ffffff; text-align:center; font-size:3.5em; position:relative; left:50%; margin-left:-35px; z-index:1; } .slider_icons{ transition: all 1.5s linear; /* -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44); transition: 1s cubic-bezier(.87,-.41,.19,1.44); */ } .slider_button:after { content:"+"; } .slider_icons { width:0%; overflow:hidden; height:36px; list-style:none; padding:16px 10px 10px 50px; background-color:#ffffff; box-shadow: 1px 1px 1px 1px #DCDCDC; /* margin:-68px 0 0 45%; */ border-radius: 2em; } .slider_icons.open { transform: translateX(200px); width:80%; /* margin:-68px 0 0 5%; */ overflow:hidden; } .slider_icons li { display: none; width:10%; color:#3AB09E; } .slider_icons.open li { width:16%; display: inline-block; }