New UI layout
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
  2. :root {
  3. --topNavHeight: 75px;
  4. --rtrWidth: 50px;
  5. --lftWidth: 275px;
  6. --tpMenuPad: 30px;
  7. --icnPadng: 10px 0px;
  8. --prmBgColor: rgb(244, 244, 221);
  9. --secdBgColor: #fafaf3;
  10. --secdSubColor: #f4f4f3;
  11. --lstPgArc: 15px;
  12. }
  13. body {
  14. margin: 0px;
  15. padding: 0px;
  16. font-family: 'Poppins', sans-serif;
  17. }
  18. ul,
  19. li {
  20. margin: 0px;
  21. padding: 0px;
  22. margin-left: 0px;
  23. margin-right: 0px;
  24. padding-left: 0px;
  25. padding-right: 0px;
  26. list-style: none;
  27. }
  28. .list-page {
  29. display: flex;
  30. flex-direction: column;
  31. }
  32. .tp-bar {
  33. width: 100%;
  34. position: fixed;
  35. top: 0px;
  36. left: 0px;
  37. height: var(--topNavHeight);
  38. display: flex;
  39. flex-direction: row;
  40. list-style: none;
  41. align-items: center;
  42. padding-left: 0px !important;
  43. padding-right: 0px !important;
  44. z-index: 1000;
  45. }
  46. ul.tp-bar li {
  47. margin: 0px 16px;
  48. }
  49. li.logo-li {
  50. display: flex;
  51. flex-direction: row;
  52. align-items: center;
  53. width: calc(var(--lftWidth) - var(--tpMenuPad));
  54. }
  55. .logo {
  56. font-size: 25px;
  57. margin-left: 25px;
  58. }
  59. .btm-bar {
  60. position: fixed;
  61. top: var(--topNavHeight);
  62. left: 0;
  63. height: calc(100vh -var(--topNavHeight));
  64. width: 100%;
  65. height: 100%;
  66. display: flex;
  67. flex-direction: row;
  68. }
  69. .lft-nav-bar {
  70. position: fixed;
  71. left: 0;
  72. width: var(--lftWidth);
  73. height: inherit;
  74. display: flex;
  75. flex-direction: row;
  76. }
  77. .lft-nav-bar .lft-nav-bar-1,
  78. .lft-nav-bar .lft-nav-bar-2 {
  79. list-style: none;
  80. margin-bottom: 0px !important;
  81. padding-left: 0px !important;
  82. }
  83. .lft-nav-bar-1 {
  84. width: var(--rtrWidth);
  85. display: flex;
  86. flex-direction: column;
  87. align-items: center;
  88. background-color: var(--prmBgColor);
  89. }
  90. .lft-nav-bar-1 li,
  91. .lft-nav-bar-2 li {
  92. margin: var(--icnPadng);
  93. }
  94. .lft-nav-bar-2 li {
  95. font-size: 16px;
  96. padding: 0px 15px;
  97. }
  98. .lft-nav-bar-2 {
  99. width: calc(var(--lftWidth) - var(--rtrWidth));
  100. display: flex;
  101. flex-direction: column;
  102. background-color: var(--secdBgColor);
  103. transition: width 0.3s;
  104. }
  105. .rtr-nav-bar {
  106. position: fixed;
  107. right: 0;
  108. width: var(--rtrWidth);
  109. height: inherit;
  110. background-color: var(--prmBgColor);
  111. list-style: none;
  112. display: flex;
  113. flex-direction: column;
  114. align-items: center;
  115. }
  116. .rtr-nav-bar span {
  117. margin: var(--icnPadng);
  118. }
  119. .ctr-lst-pge {
  120. position: fixed;
  121. z-index: 2;
  122. left: var(--lftWidth);
  123. right: var(--rtrWidth);
  124. height: inherit;
  125. margin: 0px 20px;
  126. background-color: var(--secdSubColor);
  127. border-top-left-radius: var(--lstPgArc);
  128. border-top-right-radius: var(--lstPgArc);
  129. }
  130. .srch-bar {
  131. width: 35%;
  132. }
  133. .form-control#searchBar {
  134. padding: 10px;
  135. box-shadow: none;
  136. width: 100%;
  137. }
  138. .ml-auto {
  139. margin-left: auto !important;
  140. }
  141. .mr-auto {
  142. margin-right: auto !important;
  143. }
  144. .mt-auto {
  145. margin-top: auto !important;
  146. }
  147. .mb-auto {
  148. margin-bottom: auto !important;
  149. }
  150. .la {
  151. font-size: 20px;
  152. color: black;
  153. }
  154. .icn-circle:hover {
  155. color: white;
  156. }
  157. .icn-circle {
  158. background-color: firebrick;
  159. color: white;
  160. padding: 10px;
  161. text-decoration: none;
  162. }
  163. .hdr {
  164. font-size: 16px;
  165. padding: 10px 5px;
  166. font-weight: 600;
  167. text-transform: capitalize;
  168. background-color: #e3e3e3;
  169. }
  170. .mnNvIcn,
  171. .mnNvIcn:focus {
  172. box-shadow: none !important;
  173. }
  174. .lft-nav-bar.lft-nav-bar-Wrap {
  175. width: var(--rtrWidth);
  176. transition: width 0.3s;
  177. }
  178. .lft-nav-bar.lft-nav-bar-Wrap .lft-nav-bar-2 {
  179. display: none;
  180. transition: display 0.3s;
  181. }
  182. .bdy-ul {
  183. height: 100%;
  184. overflow-y: scroll;
  185. }
  186. .ctr-lst-pge.lft-nav-bar-Wrap {
  187. left: var(--rtrWidth);
  188. transition: left 0.3s;
  189. }
  190. a.badge {
  191. font-size: 14px;
  192. font-weight: 500;
  193. color: inherit;
  194. text-decoration: none;
  195. }
  196. .badge.badge-soft-green,
  197. .badge.badge-soft-success {
  198. background: #E6FBF2;
  199. color: #00D67F;
  200. }
  201. /* scroll bar start here*/
  202. ::-webkit-scrollbar {
  203. width: 6px;
  204. }
  205. /* Track */
  206. ::-webkit-scrollbar-track {
  207. background: #f1f1f1;
  208. }
  209. /* Handle */
  210. ::-webkit-scrollbar-thumb {
  211. background: #888;
  212. }
  213. /* Handle on hover */
  214. ::-webkit-scrollbar-thumb:hover {
  215. background: #555;
  216. }
  217. /* Scroll bar End Here */
  218. .accordion-button::after {
  219. background-size: 0.9rem !important;
  220. ;
  221. }
  222. a[role="button"]:focus {
  223. box-shadow: none !important;
  224. }
  225. #notifi-list .item-li:first .accordion-button:not(.collapsed) {
  226. border-top-left-radius: var(--lstPgArc);
  227. border-top-right-radius: var(--lstPgArc);
  228. }
  229. input[type="checkbox"] {
  230. box-shadow: none !important;
  231. border-radius: 2px;
  232. }