@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --topNavHeight: 75px; --rtrWidth: 50px; --lftWidth: 275px; --tpMenuPad: 30px; --icnPadng: 10px 0px; --prmBgColor: rgb(244, 244, 221); --secdBgColor: #fafaf3; --secdSubColor: #f4f4f3; --lstPgArc: 15px; } body { margin: 0px; padding: 0px; font-family: 'Poppins', sans-serif; } ul, li { margin: 0px; padding: 0px; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none; } .list-page { display: flex; flex-direction: column; } .tp-bar { width: 100%; position: fixed; top: 0px; left: 0px; height: var(--topNavHeight); display: flex; flex-direction: row; list-style: none; align-items: center; padding-left: 0px !important; padding-right: 0px !important; z-index: 1000; } ul.tp-bar li { margin: 0px 16px; } li.logo-li { display: flex; flex-direction: row; align-items: center; width: calc(var(--lftWidth) - var(--tpMenuPad)); } .logo { font-size: 25px; margin-left: 25px; } .btm-bar { position: fixed; top: var(--topNavHeight); left: 0; height: calc(100vh -var(--topNavHeight)); width: 100%; height: 100%; display: flex; flex-direction: row; } .lft-nav-bar { position: fixed; left: 0; width: var(--lftWidth); height: inherit; display: flex; flex-direction: row; } .lft-nav-bar .lft-nav-bar-1, .lft-nav-bar .lft-nav-bar-2 { list-style: none; margin-bottom: 0px !important; padding-left: 0px !important; } .lft-nav-bar-1 { width: var(--rtrWidth); display: flex; flex-direction: column; align-items: center; background-color: var(--prmBgColor); } .lft-nav-bar-1 li, .lft-nav-bar-2 li { margin: var(--icnPadng); } .lft-nav-bar-2 li { font-size: 16px; padding: 0px 15px; } .lft-nav-bar-2 { width: calc(var(--lftWidth) - var(--rtrWidth)); display: flex; flex-direction: column; background-color: var(--secdBgColor); transition: width 0.3s; } .rtr-nav-bar { position: fixed; right: 0; width: var(--rtrWidth); height: inherit; background-color: var(--prmBgColor); list-style: none; display: flex; flex-direction: column; align-items: center; } .rtr-nav-bar span { margin: var(--icnPadng); } .ctr-lst-pge { position: fixed; z-index: 2; left: var(--lftWidth); right: var(--rtrWidth); height: inherit; margin: 0px 20px; background-color: var(--secdSubColor); border-top-left-radius: var(--lstPgArc); border-top-right-radius: var(--lstPgArc); } .srch-bar { width: 35%; } .form-control#searchBar { padding: 10px; box-shadow: none; width: 100%; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } .mt-auto { margin-top: auto !important; } .mb-auto { margin-bottom: auto !important; } .la { font-size: 20px; color: black; } .icn-circle:hover { color: white; } .icn-circle { background-color: firebrick; color: white; padding: 10px; text-decoration: none; } .hdr { font-size: 16px; padding: 10px 5px; font-weight: 600; text-transform: capitalize; background-color: #e3e3e3; } .mnNvIcn, .mnNvIcn:focus { box-shadow: none !important; } .lft-nav-bar.lft-nav-bar-Wrap { width: var(--rtrWidth); transition: width 0.3s; } .lft-nav-bar.lft-nav-bar-Wrap .lft-nav-bar-2 { display: none; transition: display 0.3s; } .bdy-ul { height: 100%; overflow-y: scroll; } .ctr-lst-pge.lft-nav-bar-Wrap { left: var(--rtrWidth); transition: left 0.3s; } a.badge { font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; } .badge.badge-soft-green, .badge.badge-soft-success { background: #E6FBF2; color: #00D67F; } /* scroll bar start here*/ ::-webkit-scrollbar { width: 6px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } /* Scroll bar End Here */ .accordion-button::after { background-size: 0.9rem !important; ; } a[role="button"]:focus { box-shadow: none !important; } #notifi-list .item-li:first .accordion-button:not(.collapsed) { border-top-left-radius: var(--lstPgArc); border-top-right-radius: var(--lstPgArc); } input[type="checkbox"] { box-shadow: none !important; border-radius: 2px; }