@intellias/menu 2.1.5 → 2.1.7

package/dist/css/main.css

@@ -1,50 +1,6 @@
 @import url(https://fonts.googleapis.com/css?family=Play:400,700&display=swap);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap);
-.modal-wrapper[data-v-47941d80] {
-  padding-bottom: 1rem;
-  border-radius: 6px !important;
-  background-color: #ffffff;
-  box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
-}
-.modal-header[data-v-47941d80] {
-  display: flex;
-  justify-content: space-between;
-  padding: 2rem 2rem 1rem 2rem;
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #1a2732 !important;
-}
-.modal-header.dark[data-v-47941d80] {
-  color: #ffffff !important;
-}
-.modal-header.dark i.icon[data-v-47941d80]:before {
-  background-color: #ffffff !important;
-}
-.modal-header i.icon[data-v-47941d80]:before {
-  background-color: #1a2732 !important;
-}
-.modal-content[data-v-47941d80] {
-  padding: 1rem 2rem;
-}
-.modal-close[data-v-47941d80] {
-  width: 15px !important;
-  min-width: 15px;
-  height: 15px !important;
-  cursor: pointer;
-}
-.modal-footer[data-v-47941d80] {
-  display: flex;
-  justify-content: flex-end;
-  padding: 1rem 2rem;
-}
-.modal-footer .btn[data-v-47941d80]:not(:first-child) {
-  margin-left: 1rem;
-}
-.vm--overlay[data-v-47941d80] {
-  background-color: rgba(37, 55, 70, 0.55) !important;
-  transition: 0.3s !important;
-}
 .action-button.is-btn-link[data-v-4bad7ad2] {
   padding: 0;
   border: 0;
@@ -158,211 +114,208 @@
     transform: rotate(360deg);
 }
 }
-.secondary-button[data-v-ab516b6a] {
-  position: relative;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  color: #1a2732;
-  text-transform: initial;
-  border-radius: 4px;
-  font-weight: 600;
-  line-height: 38px;
-  display: flex;
-  align-items: center;
+.progress[data-v-92cd54c2] {
+  margin: 0;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 1.5s, visibility 1.5s;
 }
-.secondary-button.dark[data-v-ab516b6a] {
-  height: 40px;
-  padding: 0 var(--spacing-16);
-  background: var(--surface-primary);
-  color: var(--text-primary);
-  text-decoration: none;
-  border-radius: var(--border-radius-6);
-  border: solid var(--border) 1px;
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-24);
-  transition: 0.3s;
+.progress .determinate[data-v-92cd54c2] {
+  background-color: #00a58e;
 }
-.secondary-button.dark[data-v-ab516b6a]:hover {
-  background: var(--surface-tertiary);
-  border-color: var(--border);
+.progress.show[data-v-92cd54c2] {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s;
 }
-.secondary-button i.icon[data-v-ab516b6a] {
-  vertical-align: middle;
+.preloader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.secondary-button .spinner-solid[data-v-ab516b6a] {
+.notifications-sidebar {
+  position: relative;
   color: #1a2732;
-  animation: spin-ab516b6a 2s linear infinite;
-  vertical-align: middle;
-  transition: width 300ms, height 300ms;
-  margin-left: 8px;
-}
-.secondary-button .left-icon[data-v-ab516b6a] {
-  margin-right: 4px;
 }
-.secondary-button.disabled[data-v-ab516b6a], .secondary-button.btn-secondary[data-v-ab516b6a]:disabled, .secondary-button.btn[disabled][data-v-ab516b6a] {
-  background-color: #f1f5f9 !important;
+.notifications-sidebar.dark .v-dropdown-menu__container {
+  background-color: #253746;
   color: #94a3b8;
+  border: 1px #475569 solid;
+  box-shadow: 0 2px 2px 0 rgba(15, 19, 23, 0.55), 0 3px 1px -2px rgba(15, 19, 23, 0.55), 0 1px 5px 0 rgba(15, 19, 23, 0.55);
 }
-.secondary-button.disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn-secondary:disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn[disabled] .spinner-solid[data-v-ab516b6a] {
-  color: #94a3b8 !important;
-}
-@keyframes spin-ab516b6a {
-100% {
-    transform: rotate(360deg);
-}
+.notifications-sidebar.dark .v-dropdown-menu__container .primary-text {
+  color: #f8fafc;
 }
-.play-pause {
-  margin-left: 20px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header {
+  position: relative;
+  z-index: 1001;
+  background-color: #253746;
 }
-@media only screen and (max-width : 600px) {
-.play-pause {
-    margin-left: 8px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
+  border-bottom: 1px #475569 solid;
 }
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
+  background-color: #253746;
+  border: 1px #475569 solid;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
 }
-.play-pause-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 100%;
-  cursor: pointer;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled) {
+  background-color: #275b57;
 }
-.play-pause-btn .icon {
-  width: 40px;
-  height: 40px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
+  color: #f8fafc;
 }
-.play-pause-btn .icon.spinner-solid {
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a:hover:not(.is-disabled) {
+  background-color: #275b57;
 }
-#modalTracked {
-  color: #253746;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body {
+  background-color: #253746;
 }
-#modalTracked.dark {
-  color: #ffffff !important;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs {
+  background-color: #253746;
+  border-bottom: 1px #475569 solid;
+  box-shadow: 0 12px 8px -8px rgba(15, 19, 23, 0.55) !important;
+  z-index: 1000;
 }
-#modalTracked.dark i.icon:before {
-  background-color: #ffffff !important;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs .indicator {
+  background-color: #45d6ad;
 }
-#modalTracked .modal-content #tracked-content {
-  display: flex;
-  align-items: center;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab {
+  color: #94a3b8;
 }
-#modalTracked .modal-content #tracked-content p {
-  margin: 0;
-  line-height: initial;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab .counter {
+  color: #253746;
 }
-#modalTracked .modal-content #span-clock {
-  margin-right: 10px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab.active, .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab:hover {
+  color: #f8fafc;
 }
-#modalTracked .modal-content #span-clock i {
-  font-size: 54px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list {
+  border-top: 1px #475569 solid;
 }
-#modalTracked .modal-footer .action-button {
-  margin-left: 15px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
+  background-color: #253746;
+  border-bottom: 1px #475569 solid;
 }
-@keyframes spin {
-100% {
-    transform: rotate(360deg);
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.icon:not(.original):before {
+  background-image: none;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  background-color: #94a3b8;
 }
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note a {
+  color: #45d6ad;
 }
-.progress[data-v-92cd54c2] {
-  margin: 0;
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 1.5s, visibility 1.5s;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .time-ago {
+  color: #94a3b8;
 }
-.progress .determinate[data-v-92cd54c2] {
-  background-color: #00a58e;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .row {
+  background-color: #253746;
 }
-.progress.show[data-v-92cd54c2] {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0s;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read {
+  background-color: #1a2732;
 }
-.preloader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read .row {
+  background-color: #1a2732;
 }
-.notifications-sidebar {
-  position: relative;
-  display: flex;
-  align-items: center;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .span-text {
+  color: #45d6ad;
 }
-.notifications-sidebar .notifications-trigger {
-  display: flex;
-  transition: 0.3s;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown > row {
+  background-color: #253746;
 }
-.notifications-sidebar .notifications-trigger .icon.bell {
-  width: 18px;
-  height: 20px;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row {
+  border-top: 1px #475569 solid;
 }
-.notifications-sidebar .notifications-trigger:hover {
-  color: #00a58e;
+.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row .action-button.is-link {
+  color: #45d6ad;
 }
-.notifications-sidebar .notifications-trigger:hover .icon {
-  color: #00a58e;
+.notifications-sidebar .row {
+  margin-bottom: 0;
+  box-sizing: inherit;
 }
 .notifications-sidebar .row .col {
   padding: 0 0.75rem;
 }
-.notifications-sidebar .row .col > .icon:before {
-  background-color: #45d6ad;
-}
 .notifications-sidebar .col .row {
   margin-left: -0.75rem;
   margin-right: -0.75rem;
 }
 .notifications-sidebar .v-dropdown-menu__container {
-  top: calc(100% + 23px);
-  left: -12px;
+  width: -moz-fit-content;
+  width: fit-content;
   max-width: none;
+  min-width: none;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
-@media only screen and (max-width : 600px) {
-.notifications-sidebar .v-dropdown-menu__container {
-    left: -24px;
-}
-}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
+  border-bottom: 1px #cbd5e1 solid;
+  padding: 0 3px 0 13px;
+  margin-bottom: 10px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 0 3px 0 13px;
-  margin-bottom: 0;
-  border-bottom: 1px #cbd5e1 solid;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s10 {
+  height: 50px;
+  line-height: 50px;
+  font-weight: bold;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s8 {
+  height: 50px;
+  line-height: 50px;
+  margin-left: 0;
+  font-weight: bold;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 {
+  height: 50px;
+  line-height: 50px;
+  margin-left: 5px;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 0;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .v-dropdown-menu__container {
-  top: 45px;
+  top: 43px;
+  height: 75px;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .notification-manage-toggler {
+  position: relative;
   display: flex;
+  flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
   width: 20px;
   height: 64px;
+  line-height: 64px;
+  cursor: pointer;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .notification-manage-toggler span {
-  display: inline-block;
+  background-color: #94a3b8;
   width: 4px;
   height: 4px;
+  display: inline-block;
   border-radius: 50%;
   margin: 1px auto;
-  background-color: #94a3b8;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
-  margin: 0;
+  border: 1px #cbd5e1 solid;
+  border-radius: 2px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  padding-left: 0px;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li {
+  min-height: 30px;
+  line-height: 30px;
+  width: 100%;
+  display: block;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled), .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:active:not(.is-disabled) {
   background-color: #c2e9e4;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
-  display: inline-block;
-  width: 100%;
   color: #1a2732;
   font-size: 14px;
   font-weight: 400;
@@ -382,35 +335,52 @@
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown {
   width: 370px;
+  height: auto !important;
+  transform: none !important;
+}
+@media only screen and (max-width : 600px) {
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown {
+    position: fixed;
+    width: 100% !important;
 }
-.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .row {
-  margin-bottom: 0;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs {
+  height: 38px;
+  line-height: 24px;
+  padding-left: 0;
+  list-style-type: none;
   position: relative;
-  height: 48px;
-  border-bottom: 1px #cbd5e1 solid;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  width: 100%;
   background-color: #ffffff;
-  box-shadow: none;
-  line-height: normal;
+  margin: 0 auto;
+  white-space: nowrap;
+  border-bottom: 1px #cbd5e1 solid;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button {
+  clear: inherit;
+  min-height: auto;
   width: 50%;
+  line-height: 28px;
+  background-color: #ffffff;
   border: none;
-  background: none;
   cursor: pointer;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab {
-  height: auto;
-  padding: 0 10px;
-  margin-top: 18px;
+  height: 100%;
+  display: inline-block;
+  text-align: center;
+  padding: 0;
+  margin: 0;
   font-size: 0.8rem;
   text-transform: initial;
+  padding: 0px 10px;
   color: #64748b;
-  line-height: normal;
   background-color: inherit;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab.active, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:hover, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus.active {
+  background-color: inherit;
   color: #1a2732;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab.active {
@@ -418,6 +388,7 @@
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab .counter {
   font-weight: bold;
+  text-align: center;
   font-size: 0.67rem;
   border-radius: 10px;
   padding: 2px 6px;
@@ -425,23 +396,39 @@
   background-color: #ff8041;
   margin-left: 4px;
 }
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:hover {
+  background-color: inherit;
+}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs .indicator {
   background-color: #00a58e;
   margin: 0 25px;
+  width: initial;
+  height: 3px;
   width: 140px !important;
   position: absolute;
   bottom: 0;
   height: 2px;
+  will-change: left, right;
+  transition: background-color 0.3s;
   transition: transform 0.4s ease, width 0.4s ease;
 }
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content {
+  padding: 0;
+  margin-left: 0;
+  width: 100%;
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list {
-  margin-bottom: 0;
+  overflow-y: hidden;
+  box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 0.12);
+  border-top: 1px #cbd5e1 solid;
   line-height: 18px;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content {
-  width: 100%;
   min-height: 120px;
-  max-height: calc(100vh - 275px);
+  max-height: 70vh;
+  width: 100%;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .preloader {
   display: flex;
@@ -452,11 +439,25 @@
   height: 80px;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
+  border-bottom: 1px #cbd5e1 solid;
   padding: 20px 25px;
   margin: 0 -0.75rem;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:hover .manage-notification {
-  opacity: 1;
+  display: inline-block;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.icon:not(.original):before {
+  background-image: none;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  background-color: #94a3b8;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .semi-primary-text {
+  font-size: 14px;
+  line-height: 1.25;
+  font-weight: normal;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .semi-primary-text b a {
   font-weight: 700;
@@ -470,13 +471,30 @@
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:not(.read) {
   border-left: 3px solid #ff8041;
 }
-.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:not(:first-child) {
-  border-top: 1px #cbd5e1 solid;
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .row {
+  position: relative;
+  display: flex;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:last-child {
+  border-bottom: none;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note i.category-icon {
+  width: 28px;
+  height: 28px !important;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .new-notification {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-radius: 5px;
+  background-color: #ff8041;
+  top: 0;
+  right: 10px;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification {
   position: absolute;
-  right: 16px;
-  opacity: 0;
+  right: 0px;
+  display: none;
 }
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i {
   height: 16px;
@@ -494,16 +512,27 @@
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.delete:hover:before {
   background-color: #da1e28 !important;
 }
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .reject-color {
+  color: #da1e28;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .reject-color .span-text {
+  color: #da1e28;
+}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .note-title-col {
   max-width: 70%;
   padding-left: 4px;
 }
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .note-title-col .text-muted {
+  font-size: 12px;
+  color: #64748b;
+}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .action-buttons {
-  width: 100%;
+  height: 21px;
 }
-.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .action-buttons button {
-  height: auto;
-  line-height: initial;
+.notifications-sidebar .notifications-trigger {
+  display: inline-block;
+  height: 58px;
+  font-size: 1.2rem;
 }
 .notifications-sidebar a {
   color: #00a58e;
@@ -511,22 +540,35 @@
   padding: 0;
   font-size: inherit;
 }
+.notifications-sidebar a:hover {
+  background-color: initial;
+}
+.notifications-sidebar .primary-text {
+  font-size: 14px !important;
+  line-height: 1.29;
+  font-weight: bold;
+}
 .notifications-sidebar .view-all-row {
   border-top: 1px #cbd5e1 solid;
-  line-height: 50px;
+  line-height: 49px;
 }
 .notifications-sidebar .ps__rail-x {
   display: none !important;
 }
 .notifications-sidebar .has-unread {
+  display: inline-block;
   position: absolute;
-  top: -6px;
-  right: -8px;
+  top: 12px;
   height: 9px;
   width: 9px;
   border-radius: 50%;
   background-color: #ff8041;
 }
+@media only screen and (max-width : 430px) {
+.notifications-sidebar .has-unread {
+    right: -10px;
+}
+}
 .notifications-sidebar .fade-enter-active,
 .notifications-sidebar .fade-leave-active {
   transition: opacity 0.5s;
@@ -535,142 +577,344 @@
 .notifications-sidebar .fade-leave-to {
   opacity: 0;
 }
-.notifications-sidebar.dark .v-dropdown-menu__container {
-  background-color: #253746;
-  color: #94a3b8;
-  border: 1px #475569 solid;
+.bell-animation {
+  -webkit-animation: ring 5.6s 0.5s ease-in-out infinite;
+  -webkit-transform-origin: 50% 4px;
+  -moz-animation: ring 5.6s 0.5s ease-in-out infinite;
+  -moz-transform-origin: 50% 4px;
+  animation: ring 5.6s 0.5s ease-in-out infinite;
+  transform-origin: 50% 4px;
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .primary-text {
-  color: #f8fafc;
+@keyframes ring {
+0% {
+    transform: rotate(0);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header {
-  position: relative;
-  z-index: 1001;
+1% {
+    transform: rotate(32deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
-  border-bottom: 1px #475569 solid;
+3% {
+    transform: rotate(-30deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
-  background-color: #253746;
-  border: 1px #475569 solid;
+5% {
+    transform: rotate(42deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled) {
-  background-color: #275b57;
+7% {
+    transform: rotate(-40deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
-  color: #f8fafc;
+9% {
+    transform: rotate(36deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a:hover:not(.is-disabled) {
-  background-color: #275b57;
+11% {
+    transform: rotate(-34deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs {
-  background-color: #253746;
-  border-bottom: 1px #475569 solid;
-  z-index: 1000;
+13% {
+    transform: rotate(32deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs .indicator {
-  background-color: #45d6ad;
+15% {
+    transform: rotate(-30deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab {
-  color: #94a3b8;
+17% {
+    transform: rotate(30deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab .counter {
-  color: #253746;
+19% {
+    transform: rotate(-28deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab.active, .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab:hover {
-  color: #f8fafc;
+21% {
+    transform: rotate(28deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
-  background-color: #253746;
-  border-bottom: 1px #475569 solid;
+23% {
+    transform: rotate(-26deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note a {
-  color: #45d6ad;
+25% {
+    transform: rotate(26deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .time-ago {
-  color: #94a3b8;
+27% {
+    transform: rotate(-24deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read {
-  background-color: #1a2732;
+29% {
+    transform: rotate(24deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read .row {
-  background-color: #1a2732;
+31% {
+    transform: rotate(-22deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .span-text {
-  color: #45d6ad;
+33% {
+    transform: rotate(23deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row {
-  border-top: 1px #475569 solid;
+35% {
+    transform: rotate(-21deg);
 }
-.notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row .action-button.is-link {
-  color: #45d6ad;
+37% {
+    transform: rotate(22deg);
 }
-.bell-animation {
-  -webkit-animation: ring 5.6s 0.5s ease-in-out infinite;
-  -webkit-transform-origin: 50% 4px;
-  -moz-animation: ring 5.6s 0.5s ease-in-out infinite;
-  -moz-transform-origin: 50% 4px;
-  animation: ring 5.6s 0.5s ease-in-out infinite;
-  transform-origin: 50% 4px;
+39% {
+    transform: rotate(-20deg);
 }
-.image-wrapper.sm[data-v-7393283b] {
-  width: 35px;
-  height: 35px;
+41% {
+    transform: rotate(21deg);
 }
-.image-wrapper.sm .user-image[data-v-7393283b] {
-  border: 1px solid #cbd5e1;
+43% {
+    transform: rotate(-19deg);
 }
-.image-wrapper.sm .user-image.anonymous[data-v-7393283b] {
-  font-size: 12px;
+45% {
+    transform: rotate(18deg);
 }
-.image-wrapper.sm .user-image.anonymous.dark[data-v-7393283b] {
-  background-color: var(--bg-primary);
-  color: var(--text-disable);
-  border: 1px solid var(--border);
+47% {
+    transform: rotate(-16deg);
 }
-.image-wrapper.md[data-v-7393283b] {
-  height: 44px;
-  width: 44px;
+50% {
+    transform: rotate(14deg);
 }
-.image-wrapper.md .user-image[data-v-7393283b] {
-  border: 1px solid #cbd5e1;
+52% {
+    transform: rotate(-12deg);
 }
-.image-wrapper.md .user-image.anonymous[data-v-7393283b] {
-  font-size: 16px;
-  color: #94a3b8;
+54% {
+    transform: rotate(10deg);
 }
-.image-wrapper.md .user-image.anonymous.dark[data-v-7393283b] {
-  background-color: var(--bg-primary);
-  color: var(--text-disable);
-  border: 1px solid var(--border);
+56% {
+    transform: rotate(-8deg);
 }
-.image-wrapper.lg[data-v-7393283b] {
-  height: 96px;
-  width: 96px;
+58% {
+    transform: rotate(6deg);
 }
-.image-wrapper.xl[data-v-7393283b] {
-  height: 128px;
-  width: 128px;
+60% {
+    transform: rotate(-4deg);
 }
-.image-wrapper.xl .user-image.anonymous[data-v-7393283b] {
-  font-size: 50px;
-  color: #94a3b8;
+62% {
+    transform: rotate(2deg);
 }
-.image-wrapper.xl .user-image.anonymous.dark[data-v-7393283b] {
-  background-color: var(--bg-primary);
-  color: var(--text-disable);
-  border: 1px solid var(--border);
+64% {
+    transform: rotate(-1deg);
 }
-.image-wrapper .user-image[data-v-7393283b] {
-  border: 2px solid #cbd5e1;
-  border-radius: 50%;
-  overflow: hidden;
-  width: inherit;
-  height: inherit;
+66% {
+    transform: rotate(1deg);
 }
-.image-wrapper .user-imageimg[data-v-7393283b] {
-  -o-object-fit: cover;
-     object-fit: cover;
+70% {
+    transform: rotate(0);
+}
+100% {
+    transform: rotate(0);
+}
+}
+.modal-wrapper[data-v-47941d80] {
+  padding-bottom: 1rem;
+  border-radius: 6px !important;
+  background-color: #ffffff;
+  box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
+}
+.modal-header[data-v-47941d80] {
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem 2rem 1rem 2rem;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #1a2732 !important;
+}
+.modal-header.dark[data-v-47941d80] {
+  color: #ffffff !important;
+}
+.modal-header.dark i.icon[data-v-47941d80]:before {
+  background-color: #ffffff !important;
+}
+.modal-header i.icon[data-v-47941d80]:before {
+  background-color: #1a2732 !important;
+}
+.modal-content[data-v-47941d80] {
+  padding: 1rem 2rem;
+}
+.modal-close[data-v-47941d80] {
+  width: 15px !important;
+  min-width: 15px;
+  height: 15px !important;
+  cursor: pointer;
+}
+.modal-footer[data-v-47941d80] {
+  display: flex;
+  justify-content: flex-end;
+  padding: 1rem 2rem;
+}
+.modal-footer .btn[data-v-47941d80]:not(:first-child) {
+  margin-left: 1rem;
+}
+.vm--overlay[data-v-47941d80] {
+  background-color: rgba(37, 55, 70, 0.55) !important;
+  transition: 0.3s !important;
+}
+.secondary-button[data-v-ab516b6a] {
+  position: relative;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #1a2732;
+  text-transform: initial;
+  border-radius: 4px;
+  font-weight: 600;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+}
+.secondary-button.dark[data-v-ab516b6a] {
+  height: 40px;
+  padding: 0 var(--spacing-16);
+  background: var(--surface-primary);
+  color: var(--text-primary);
+  text-decoration: none;
+  border-radius: var(--border-radius-6);
+  border: solid var(--border) 1px;
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-24);
+  transition: 0.3s;
+}
+.secondary-button.dark[data-v-ab516b6a]:hover {
+  background: var(--surface-tertiary);
+  border-color: var(--border);
+}
+.secondary-button i.icon[data-v-ab516b6a] {
+  vertical-align: middle;
+}
+.secondary-button .spinner-solid[data-v-ab516b6a] {
+  color: #1a2732;
+  animation: spin-ab516b6a 2s linear infinite;
+  vertical-align: middle;
+  transition: width 300ms, height 300ms;
+  margin-left: 8px;
+}
+.secondary-button .left-icon[data-v-ab516b6a] {
+  margin-right: 4px;
+}
+.secondary-button.disabled[data-v-ab516b6a], .secondary-button.btn-secondary[data-v-ab516b6a]:disabled, .secondary-button.btn[disabled][data-v-ab516b6a] {
+  background-color: #f1f5f9 !important;
+  color: #94a3b8;
+}
+.secondary-button.disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn-secondary:disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn[disabled] .spinner-solid[data-v-ab516b6a] {
+  color: #94a3b8 !important;
+}
+@keyframes spin-ab516b6a {
+100% {
+    transform: rotate(360deg);
+}
+}
+#modalTracked {
+  color: #253746;
+}
+#modalTracked.dark {
+  color: #ffffff !important;
+}
+#modalTracked.dark i.icon:before {
+  background-color: #ffffff !important;
+}
+#modalTracked .modal-content #tracked-content {
+  display: flex;
+  align-items: center;
+}
+#modalTracked .modal-content #tracked-content p {
+  margin: 0;
+  line-height: initial;
+}
+#modalTracked .modal-content #span-clock {
+  margin-right: 10px;
+}
+#modalTracked .modal-content #span-clock i {
+  font-size: 54px;
+}
+#modalTracked .modal-footer .action-button {
+  margin-left: 15px;
+}
+.play-pause {
+  display: flex;
+}
+.play-pause i.spinner-solid {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+100% {
+    transform: rotate(360deg);
+}
+}
+.sub-menu[data-v-25586497] {
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: 0 2px 6px 0 rgba(37, 55, 70, 0.1);
+  padding-left: 32px;
+}
+.sub-menu .items[data-v-25586497] {
+  width: 100%;
+  font-size: 0.94rem;
+  font-family: "open sans", sans-serif;
+  white-space: nowrap;
+}
+.sub-menu .items a[data-v-25586497] {
+  color: #253746;
+  padding: 0 5px 5px;
+  margin-right: 15px;
+  float: left;
+  line-height: 29px;
+  height: 29px;
+  border-bottom: 3px solid white;
+  text-decoration: none;
+  box-sizing: content-box;
+}
+.sub-menu .items a[data-v-25586497]:hover, .sub-menu .items a.router-link-exact-active[data-v-25586497] {
+  -webkit-text-stroke: 0.7px #253746;
+  border-bottom: 3px solid #00a58e;
+}
+.image-wrapper.sm[data-v-7393283b] {
+  width: 35px;
+  height: 35px;
+}
+.image-wrapper.sm .user-image[data-v-7393283b] {
+  border: 1px solid #cbd5e1;
+}
+.image-wrapper.sm .user-image.anonymous[data-v-7393283b] {
+  font-size: 12px;
+}
+.image-wrapper.sm .user-image.anonymous.dark[data-v-7393283b] {
+  background-color: var(--bg-primary);
+  color: var(--text-disable);
+  border: 1px solid var(--border);
+}
+.image-wrapper.md[data-v-7393283b] {
+  height: 44px;
+  width: 44px;
+}
+.image-wrapper.md .user-image[data-v-7393283b] {
+  border: 1px solid #cbd5e1;
+}
+.image-wrapper.md .user-image.anonymous[data-v-7393283b] {
+  font-size: 16px;
+  color: #94a3b8;
+}
+.image-wrapper.md .user-image.anonymous.dark[data-v-7393283b] {
+  background-color: var(--bg-primary);
+  color: var(--text-disable);
+  border: 1px solid var(--border);
+}
+.image-wrapper.lg[data-v-7393283b] {
+  height: 96px;
+  width: 96px;
+}
+.image-wrapper.xl[data-v-7393283b] {
+  height: 128px;
+  width: 128px;
+}
+.image-wrapper.xl .user-image.anonymous[data-v-7393283b] {
+  font-size: 50px;
+  color: #94a3b8;
+}
+.image-wrapper.xl .user-image.anonymous.dark[data-v-7393283b] {
+  background-color: var(--bg-primary);
+  color: var(--text-disable);
+  border: 1px solid var(--border);
+}
+.image-wrapper .user-image[data-v-7393283b] {
+  border: 2px solid #cbd5e1;
+  border-radius: 50%;
+  overflow: hidden;
+  width: inherit;
+  height: inherit;
+}
+.image-wrapper .user-imageimg[data-v-7393283b] {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .image-wrapper .user-image.anonymous[data-v-7393283b] {
   background-color: #f8fafc;
@@ -693,7 +937,7 @@
 .on-boarding-sign[data-v-0d7f0ada] {
   position: absolute;
   top: 97px;
-  right: 30px;
+  right: 60px;
   width: 485px;
   padding: 1.5rem;
   border-radius: 16px;
@@ -746,221 +990,913 @@
   margin-left: 2rem;
   color: #f8fafc;
 }
-.intems-menu {
-  border-bottom: solid #e2e8f0 1px;
-}
-.intems-menu-container {
+.welcome-program-counter {
+  margin-left: 6px;
   position: relative;
-  display: grid;
-  grid-template-columns: 250px auto;
-  gap: 16px;
-  justify-content: space-between;
+  border-radius: 2px;
+  background-color: #ff8036;
+  font-family: play, sans-serif;
+  font-size: 0.67rem;
+  font-weight: bold;
+  color: #ffffff;
+  padding: 2px;
+  bottom: 1px;
+}
+.menu-new {
+  display: flex;
+  position: absolute;
+  justify-content: center;
   align-items: center;
-  height: 64px;
-  padding: 0 20px;
-  background-color: #ffffff;
-  z-index: 997;
+  width: 31px;
+  height: 16px;
+  background: #ff8041;
+  line-height: 12px;
+  font-size: 10px;
+  border-radius: 2px;
 }
-@media only screen and (max-width : 600px) {
-.intems-menu-container {
-    display: flex;
-    gap: 0;
-    padding: 0 16px;
+.menu-new.horizontal, .menu-new.overflowed {
+  right: 0;
+  top: -16px;
+  color: #ffffff;
 }
+.vm--container {
+  cursor: auto;
 }
-.intems-menu-container a, .intems-menu-container a:hover {
-  text-decoration: none;
+.vm--container i.icon.huge {
+  width: 64px;
+  height: 64px !important;
 }
-.intems-menu-left {
+.vm--container i.icon.huge.dark:before {
+  background-color: currentcolor !important;
+}
+.managers-portal-item {
   display: flex;
   align-items: center;
+  gap: 10px;
+}
+.managers-portal-item span:nth-child(2) {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  background-color: #186ade;
+  border-radius: 100%;
+  font-size: 0.67rem;
+  font-weight: 700;
+  color: #ffffff;
 }
-.intems-menu-toggler {
+.overflowed-menu-toggler {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  justify-content: space-between;
-  width: 15px;
-  height: 10px;
-  margin-right: 20px;
+  justify-content: center;
+  width: 20px;
+  height: 64px;
+  line-height: 64px;
   cursor: pointer;
 }
-@media only screen and (max-width : 600px) {
-.intems-menu-toggler {
-    margin-right: 0;
+.overflowed-menu-toggler.notification-manage-toggler span {
+  background-color: #94a3b8;
+  width: 4px;
+  height: 4px;
 }
+.overflowed-menu-toggler + ul .managers-portal-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.intems-menu-toggler span {
+.overflowed-menu-toggler span {
   display: inline-block;
-  width: 100%;
-  height: 2px;
-  border-radius: 2px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  margin: 1px auto;
+  background-color: #ffffff;
+}
+@media only screen and (max-width: 992px) {
+.hide-on-med-and-down {
+    display: none !important;
+}
+}
+.navbar-fixed {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 64px;
+  max-height: 64px;
+  z-index: 997;
+}
+.navbar-fixed a,
+.navbar-fixed a:hover {
+  text-decoration: none;
+}
+.navbar-fixed nav {
+  position: fixed;
+  box-shadow: none !important;
+  min-width: 250px;
+  width: 100vw;
   background-color: #253746;
+}
+.navbar-fixed nav ul .href-wrap {
+  position: relative;
+}
+.navbar-fixed nav ul a {
+  position: relative;
+  white-space: nowrap;
+  color: #f8fafc;
+  transition: background-color 0.3s;
+  font-size: 18px;
+  display: block;
+  padding: 0 15px;
+  cursor: pointer;
+}
+.navbar-fixed nav ul a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.navbar-fixed nav ul a.notifications-trigger {
+  display: inline;
+}
+.navbar-fixed nav .brand-logo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-weight: bold;
+  text-transform: uppercase;
+  vertical-align: middle;
+  font-family: play, sans-serif;
+  height: inherit;
+}
+.navbar-fixed nav .brand-logo img {
+  width: 150px;
+  height: 54px;
+  margin-left: 15px;
+}
+@media only screen and (max-width : 600px) {
+.navbar-fixed nav .brand-logo img {
+    height: 56px;
+    width: 100px;
+}
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .brand-logo {
+    order: 1;
+    left: 0;
+    transform: translateX(0);
+    margin: 0 auto;
+}
+}
+.navbar-fixed nav .btn.play-pause {
+  line-height: 42px;
+  padding: 8px;
+  margin-left: 20px;
+  margin-right: 10px;
+  border-radius: 5px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .btn.play-pause {
+    order: 0;
+    margin-left: 12px;
+}
+}
+@media only screen and (max-width : 600px) {
+.navbar-fixed nav .btn.play-pause {
+    height: 36px;
+    line-height: 36px;
+    padding: 6px 6px;
+}
+}
+.navbar-fixed nav .btn.play-pause > i.icon {
+  vertical-align: baseline;
+}
+.navbar-fixed nav .btn.play-pause > i.icon:before {
+  transition: background-color 0.2s ease-out;
+}
+.navbar-fixed nav .btn.play-pause > i.icon.pause:before {
+  background-color: #00a58e;
+}
+.navbar-fixed nav .btn.play-pause > i.icon.play {
+  color: #ffffff;
+}
+.navbar-fixed nav .btn.play-pause:hover > i.icon.play:before {
+  background-color: #00a58e;
+}
+.navbar-fixed nav .btn.play-pause:hover > i.icon.pause:before {
+  background-color: #ffffff;
+}
+.navbar-fixed nav .menu-items {
+  flex: 1;
+  white-space: nowrap;
+  overflow: initial;
+  font-weight: bold;
+  height: 64px;
+  font-family: play, sans-serif;
+}
+.navbar-fixed nav .menu-items.hasOverflow {
+  overflow: hidden;
+}
+.navbar-fixed nav .menu-items li {
+  height: 64px;
+  list-style-type: none;
+  float: left;
+}
+.navbar-fixed nav .menu-items li a.router-link-active,
+.navbar-fixed nav .menu-items li a.router-link-exact-active {
+  color: #45d6ad;
+  box-shadow: inset 0px -3px 0px 0 #45d6ad;
+}
+.navbar-fixed nav .menu-items li a {
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s;
+  font-size: 18px;
+  padding: 0 15px;
+  height: 64px;
+  cursor: pointer;
+}
+.navbar-fixed nav .menu-items li a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.navbar-fixed nav .menu-items li ul {
+  background-color: #253746;
+  position: absolute;
+  display: none;
+  margin: 0;
+  padding: 0;
+}
+.navbar-fixed nav .menu-items li ul.admin li {
+  width: 100%;
+}
+.navbar-fixed nav .menu-items li ul.admin li.subItems i.icon:before {
+  background-color: #1a2732 !important;
+}
+.navbar-fixed nav .menu-items li ul.admin li.subItems ul {
+  right: 100%;
+  top: 0;
+}
+.navbar-fixed nav .menu-items li ul.admin li:hover > a {
+  background-color: rgba(65, 84, 100, 0.35);
+}
+.navbar-fixed nav .menu-items li.subItems {
+  position: relative;
+}
+.navbar-fixed nav .menu-items li.subItems i.icon:before {
+  background-color: #1a2732 !important;
+}
+.navbar-fixed nav .menu-items li:hover > ul {
+  display: block;
+}
+.navbar-fixed nav .notifications-bell {
+  max-height: 58px;
+  margin: 0 15px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .notifications-bell {
+    order: 0;
+}
+.navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
+    transform: translateX(-75%) translateY(0) !important;
+}
+}
+@media only screen and (min-width : 601px) {
+.navbar-fixed nav .notifications-bell {
+    line-height: 58px;
+}
+.navbar-fixed nav .notifications-bell + a {
+    margin-left: 15px;
+}
+}
+@media only screen and (max-width : 600px) {
+.navbar-fixed nav .notifications-bell {
+    line-height: 58px;
+}
+.navbar-fixed nav .notifications-bell .notifications-trigger {
+    padding-bottom: 17px;
+}
+.navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
+    left: 0;
+    transform: translateX(0) !important;
+    top: 85px;
+    height: 95%;
+    position: fixed;
+    width: 100vw;
+}
+}
+@media only screen and (max-width : 600px) and (-webkit-min-device-pixel-ratio: 0) {
+.navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
+    height: 95svh;
+}
+}
+.navbar-fixed nav .menu-items-overflowed {
+  font-weight: bold;
+  font-family: play, sans-serif;
+  position: relative;
+  cursor: pointer;
+  margin-right: 30px;
+  padding: 0 5px;
+}
+.navbar-fixed nav .menu-items-overflowed:hover > ul {
+  display: flex;
+  visibility: visible;
+}
+.navbar-fixed nav .menu-items-overflowed ul {
+  position: absolute;
+  min-width: 230px;
+  flex-direction: column;
+  background: #253746;
+  visibility: hidden;
+  transition: transform 0.3s, visibility 0.3s;
+  right: 0;
+  bottom: 0;
+  transform: translateY(100%) translateX(0);
+}
+.navbar-fixed nav .menu-items-overflowed ul.moved {
+  transform: translateY(100%) translateX(-10%);
+}
+.navbar-fixed nav .menu-items-overflowed ul a.router-link-exact-active {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.navbar-fixed nav .menu-items-overflowed ul > li {
+  width: 100%;
+  background-color: #253746;
+}
+.navbar-fixed nav .menu-items-overflowed ul > li.subItems i.icon:before {
+  background-color: #ffffff !important;
+}
+.navbar-fixed nav .menu-items-overflowed ul > li.subItems ul {
+  top: 0;
+  right: initial;
+  left: 100%;
+  transform: none;
+}
+.navbar-fixed nav .menu-items-overflowed ul li a {
+  line-height: 56px;
+}
+.navbar-fixed nav .menu-items-overflowed ul li.subItems i.icon:before {
+  background-color: #ffffff !important;
+}
+.navbar-fixed nav .menu-items-overflowed ul li.subItems:hover > ul {
+  display: flex;
+  visibility: visible;
+}
+.navbar-fixed nav .menu-items-overflowed ul li.subItems a {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navbar-fixed nav .menu-items-overflowed ul > li:hover > a {
+  background-color: rgba(65, 84, 100, 0.35);
+}
+.navbar-fixed nav .menu-items-overflowed ul > li:hover > ul > li {
+  background-color: #253746;
+}
+.navbar-fixed nav .nav-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 0 20px;
+  position: relative;
+  height: 100%;
+}
+@media only screen and (max-width : 430px) {
+.navbar-fixed nav .nav-wrapper {
+    margin: 0 5px 0 5px;
+}
+}
+.navbar-fixed nav .nav-wrapper .sidebar-toggler {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 20px;
+  height: 14px;
+  cursor: pointer;
+}
+.navbar-fixed nav .nav-wrapper .sidebar-toggler span {
+  display: inline-block;
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background-color: #ffffff;
   transition: width 0.3s 0.2s;
 }
-.intems-menu-toggler .icon {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler .icon {
   position: absolute;
   top: 50%;
-  right: -9px;
+  right: -7px;
   transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
+  color: #ffffff;
   opacity: 0;
   transition: 0.3s;
 }
-@media only screen and (min-width : 993px) {
-.intems-menu-toggler.lite {
-    display: none;
-}
-}
-.intems-menu-toggler.collapsed span:nth-child(2) {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.collapsed span:nth-child(2) {
   width: 75%;
   transition: width 0.3s;
 }
-.intems-menu-toggler.collapsed .icon {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.collapsed .icon {
   opacity: 1;
   transition: 0.2s 0.3s;
 }
-.intems-menu-toggler.open span {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.open span {
   position: absolute;
   transition: 0.5s;
 }
-.intems-menu-toggler.open span:first-child, .intems-menu-toggler.open span:nth-child(3) {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:first-child, .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(3) {
   top: 6px;
   left: -1px;
 }
-.intems-menu-toggler.open span:first-child {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:first-child {
   transform: rotate(45deg);
 }
-.intems-menu-toggler.open span:nth-child(2) {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(2) {
   width: 0;
   opacity: 0;
 }
-.intems-menu-toggler.open span:nth-child(3) {
+.navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(3) {
   transform: rotate(-45deg);
 }
-.intems-menu-logo {
-  display: inline-flex;
-  width: 90px;
-  height: 30px;
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .mobile-menu-toggler {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 20px;
+    height: 14px;
+    order: 0;
+    margin: 0 5px;
+}
+.navbar-fixed nav .nav-wrapper .mobile-menu-toggler span {
+    display: inline-block;
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background-color: #ffffff;
+}
+}
+.navbar-fixed nav .nav-wrapper i.icon {
+  height: 24px;
+  vertical-align: middle;
+}
+.navbar-fixed nav .nav-wrapper i.icon.icon-medium {
+  height: 16px !important;
+  width: 16px !important;
+}
+.navbar-fixed nav .nav-wrapper i.icon:before {
+  background-color: #45d6ad;
+}
+.navbar-fixed nav .nav-wrapper i.icon.notification {
+  float: none;
+  margin: 0;
+}
+.navbar-fixed nav .nav-wrapper i.icon.notification:before {
+  background-color: #45d6ad;
+}
+.navbar-fixed nav .nav-wrapper i.icon.notification.has-unread {
+  position: relative;
+}
+.navbar-fixed nav .nav-wrapper i.icon.notification.has-unread:after {
+  content: "";
+  height: 9px;
+  width: 9px;
+  border-radius: 50%;
+  background-color: #ff8041;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+}
+.navbar-fixed nav .nav-wrapper .right-side {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  position: relative;
+  max-height: 64px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side {
+    order: 3;
+    margin-right: 2px;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .icons {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1.07rem;
+  line-height: 64px;
+}
+.navbar-fixed nav .nav-wrapper .right-side .icons li {
+  transition: background-color 0.3s;
+  float: left;
+  padding: 0;
+}
+.navbar-fixed nav .nav-wrapper .right-side .icons .icon + span {
+  vertical-align: middle;
+  margin-left: 8px;
+  font-weight: 500;
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
+  padding: 0 15px;
+  display: inline-block;
+  vertical-align: middle;
+  width: -moz-fit-content;
+  width: fit-content;
+  line-height: 64px;
 }
 @media only screen and (max-width : 600px) {
-.intems-menu-logo {
-    order: 1;
-    margin-left: 16px;
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
+    margin-left: 0;
+    padding: 0;
 }
 }
-.intems-menu-logo img {
-  width: 100%;
-  height: 100%;
+@media only screen and (max-width : 430px) {
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
+    margin-left: 5px;
+    padding: 0 5px;
 }
-.intems-menu-links {
-  margin-left: 12px;
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user {
+  display: flex;
+  align-items: center;
+  float: left;
+  vertical-align: middle;
+  height: inherit;
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper {
+  vertical-align: middle;
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper {
+    height: 32px;
+    width: 32px;
+    min-width: 32px;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper .user-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout {
+  display: flex;
+  align-items: center;
+  color: #f8fafc;
+  margin-left: 16px;
+  font-size: 0.875rem;
+  cursor: pointer;
 }
 @media only screen and (max-width : 600px) {
-.intems-menu-links {
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout {
+    margin-left: 5px;
+}
+}
+@media only screen and (max-width : 430px) {
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout span {
     display: none;
 }
 }
-.intems-menu-links a {
-  color: #253746;
-  font-weight: 600;
-  transition: 0.3s;
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout .icon {
+  margin-left: 0.75rem;
+  color: #f8fafc;
+}
+.navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout .icon:before {
+  background-color: #f8fafc;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
+  height: 63px;
+  margin-bottom: 1px;
+  padding: 0 15px;
+  display: inline-block;
+  vertical-align: middle;
+  width: -moz-fit-content;
+  width: fit-content;
+  line-height: 64px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
+    height: auto;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:hover {
+  background-color: #3b4d5d;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:before {
+  content: "";
+  position: absolute;
+  right: 158px;
+  bottom: 15px;
+  height: 50%;
+  width: 5px;
+  border-right: 1px solid #3b4d5d;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 5px;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:hover {
+    background: none;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:before {
+    content: "";
+    position: absolute;
+    right: 90px;
+    bottom: 5%;
+    height: 90%;
+    width: 5px;
+    border-right: 1px solid #3b4d5d;
+}
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper a {
+    float: none;
+    line-height: initial;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user {
+  display: flex;
+  align-items: center;
+  float: left;
+  vertical-align: middle;
+  height: inherit;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user {
+    margin-left: 15px;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper {
+  vertical-align: middle;
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+}
+@media only screen and (max-width : 992px) {
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper {
+    height: 32px;
+    width: 32px;
+    min-width: 32px;
+}
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper .user-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-logo {
+  vertical-align: middle;
+  margin-left: 15px;
+  text-decoration: none;
+  color: #45d6ad;
+  font-family: play, sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+}
+.navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-logo.white-font {
+  color: #ffffff;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px 0 rgba(37, 55, 70, 0.1);
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown #avatar_dropdown_li {
+  display: flex;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown .avatar {
+  width: 44px;
+  height: 44px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  vertical-align: middle;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div {
+  display: inline-block;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div p {
+  margin: 0;
+  white-space: nowrap;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div p#empl_name {
+  font-weight: bold;
+  color: #1a2732;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div .employee-position {
+  color: #64748b;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div#avatar_div {
+  float: right;
+  margin-left: 26px;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li {
+  min-height: 2em;
+  background-color: #ffffff;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li.divider {
+  background-color: #cbd5e1;
+  margin: 10px 0;
+  min-height: 1px;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li > a {
+  background-color: #ffffff;
+  padding: 0 0 0 0;
+  color: #1a2732;
+  border-bottom: none;
+}
+.navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li > a:hover {
+  color: #008c79;
+}
+#mobile-menu {
+  font-family: play, sans-serif;
+  font-weight: bold;
+  width: 100%;
+  height: 100%;
+  background-color: #253746;
+}
+#mobile-menu.sidenav-mobile {
+  position: fixed;
+  left: 0;
+  top: 0;
+  margin: 0;
+  padding-bottom: 60px;
+  z-index: 999;
+  overflow-y: auto;
+  will-change: transform;
+  backface-visibility: hidden;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #253746;
+  transform: translateX(-105%);
+  transition: transform 0.6s ease;
+  /* Add this line for the transition effect */
+}
+#mobile-menu.sidenav-mobile li > a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+  font-weight: 500;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 32px;
+}
+#mobile-menu.sidenav-mobile li > a:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+#mobile-menu.sidenav-mobile.opened {
+  transform: translateX(0%);
+}
+#mobile-menu a {
+  position: relative;
+  font-size: 18px;
+  color: #ffffff;
+}
+#mobile-menu a.router-link-exact-active {
+  color: #00a58e;
+}
+#mobile-menu a:hover {
+  color: #00a58e;
+}
+#mobile-menu a .href-wrap {
+  position: relative;
+}
+#mobile-menu .divider {
+  margin: 8px 0;
+  background-color: #64748b;
+}
+#mobile-menu li a.router-link-exact-active {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+#mobile-menu .admin {
+  background-color: #253746;
+}
+#mobile-menu .admin i {
+  color: #ffffff;
+}
+#mobile-menu .admin > li > ul {
+  transition: max-height 2s;
+  background: #e5feff;
+  overflow: hidden;
+  max-height: 0;
+}
+#mobile-menu .admin > li > ul.opened {
+  max-height: 100vh;
+}
+#mobile-menu .admin > li > a {
+  padding-left: 48px;
 }
-.intems-menu-links a:hover {
-  color: #00a58e;
+#mobile-menu .admin > li > ul > li > a {
+  padding-left: 64px;
+  background-color: #253746;
 }
-.intems-menu-right {
-  position: relative;
-  display: flex;
-  align-items: center;
+#mobile-menu #mobile-menu-head {
+  line-height: 64px;
 }
-.intems-menu-right .icon {
-  color: #253746;
+#mobile-menu #mobile-menu-head > div {
+  text-align: center;
+  width: 100%;
 }
-.intems-menu-additional, .intems-menu-notifications-bell {
-  display: flex;
-  height: 44px;
-  padding: 6px 22px !important;
-  border-right: solid #cbd5e1 1px;
+#mobile-menu #mobile-menu-head > div > a {
+  font-size: 24px;
+  color: #ffffff;
 }
-@media only screen and (max-width : 600px) {
-.intems-menu-additional, .intems-menu-notifications-bell {
-    padding: 6px 16px !important;
+#mobile-menu #mobile-menu-head > div > a:hover {
+  cursor: pointer;
 }
+#mobile-menu #mobile-menu-head > div > a.brand-logo {
+  font-family: play, sans-serif;
+  font-weight: bold;
 }
-.intems-menu-additional {
-  align-items: center;
-  gap: 24px;
-  margin: 0;
-  border-left: solid #cbd5e1 1px;
+#mobile-menu #mobile-menu-head > div > a#menu_close_mark {
+  float: right;
+  margin: 0 18px;
 }
-@media only screen and (max-width : 992px) {
-.intems-menu-additional {
-    display: none;
+#mobile-menu .collapsible-mobile {
+  border-color: #64748b;
+  border-width: 1px;
+  border-style: solid;
+  border-bottom: none;
+  margin: 0.5rem 0 1rem 0;
 }
+#mobile-menu .collapsible-mobile li i {
+  float: right;
 }
-.intems-menu-additional li a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #253746;
-  font-weight: 600;
-  cursor: pointer;
-  transition: 0.3s;
+#mobile-menu .collapsible-mobile li.active i {
+  /* IE 9 */
+  /* Chrome, Safari, Opera */
+  transform: rotate(180deg);
 }
-.intems-menu-additional li a:hover {
-  color: #00a58e;
+#mobile-menu #mobile-menu-head_avatar {
+  color: #ffffff;
+  padding: 5px 32px;
 }
-.intems-menu-additional li a:hover .icon {
-  color: #00a58e;
+#mobile-menu #mobile-menu-head_avatar:hover {
+  cursor: pointer;
 }
-.intems-menu-additional li a.no-kudos {
-  cursor: default;
+#mobile-menu #mobile-menu-head_avatar > ul {
+  margin: 15px 0;
 }
-.intems-menu-additional li a.no-kudos:hover {
-  color: #253746;
+#mobile-menu #mobile-menu-head_avatar .fade-enter-active,
+#mobile-menu #mobile-menu-head_avatar .fade-leave-active {
+  transition: opacity 0.5s;
 }
-.intems-menu-additional li a.no-kudos:hover .icon {
-  color: #253746;
+#mobile-menu #mobile-menu-head_avatar .fade-enter, #mobile-menu #mobile-menu-head_avatar .fade-leave-to {
+  opacity: 0;
 }
-.intems-menu-additional li a .icon {
-  transition: 0.3s;
+#mobile-menu #mobile-menu-head_avatar > div {
+  display: table;
+  padding: 0;
 }
-.intems-menu-user {
-  display: flex;
-  align-items: center;
-  padding: 6px 0 6px 16px;
+#mobile-menu #mobile-menu-head_avatar > div > div {
+  display: table-cell;
+  vertical-align: middle;
 }
-@media only screen and (max-width : 600px) {
-.intems-menu-user {
-    padding: 6px 0 6px 8px;
+#mobile-menu #mobile-menu-head_avatar p {
+  margin: 0;
+  line-height: normal;
 }
+#mobile-menu #mobile-menu-head_avatar p#mobile-menu-empl_name {
+  font-weight: bold;
 }
-.intems-menu-user .intellihub-logo {
-  margin-left: 20px;
-  color: #45d6ad;
-  font-size: 0.94rem;
-  font-weight: 700;
+#mobile-menu #mobile-menu-head_avatar p#mobile-menu-empl_position {
+  font-size: 12px;
+  font-weight: normal;
 }
-@media only screen and (max-width : 600px) {
-.intems-menu-user .intellihub-logo {
-    margin-left: 4px;
+#mobile-menu #mobile-menu-head_avatar #mobile-menu-avatar_div {
+  padding-right: 20px;
 }
+#mobile-menu #mobile-menu-head_avatar #mobile-menu-avatar_div .avatar {
+  width: 44px;
+  height: 44px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  vertical-align: middle;
 }
-.intems-menu-logout {
-  display: flex;
-  align-items: center;
-  color: #253746;
-  margin-left: 16px;
-  cursor: pointer;
-  font-size: 0.94rem;
-  font-weight: 600;
+#mobile-menu #mobile-menu-head_avatar a {
+  padding: 0;
+  line-height: 2;
+  font-size: 14px;
+  height: unset;
+  color: #008c79;
 }
-.intems-menu-logout .icon {
-  margin-left: 8px;
-  color: #253746;
+.cursor-default {
+  cursor: default;
 }
 .tooltip {
   display: block !important;
@@ -997,116 +1933,6 @@
   opacity: 1;
   transition: opacity 0.15s;
 }
-@keyframes ring {
-0% {
-    transform: rotate(0);
-}
-1% {
-    transform: rotate(32deg);
-}
-3% {
-    transform: rotate(-30deg);
-}
-5% {
-    transform: rotate(42deg);
-}
-7% {
-    transform: rotate(-40deg);
-}
-9% {
-    transform: rotate(36deg);
-}
-11% {
-    transform: rotate(-34deg);
-}
-13% {
-    transform: rotate(32deg);
-}
-15% {
-    transform: rotate(-30deg);
-}
-17% {
-    transform: rotate(30deg);
-}
-19% {
-    transform: rotate(-28deg);
-}
-21% {
-    transform: rotate(28deg);
-}
-23% {
-    transform: rotate(-26deg);
-}
-25% {
-    transform: rotate(26deg);
-}
-27% {
-    transform: rotate(-24deg);
-}
-29% {
-    transform: rotate(24deg);
-}
-31% {
-    transform: rotate(-22deg);
-}
-33% {
-    transform: rotate(23deg);
-}
-35% {
-    transform: rotate(-21deg);
-}
-37% {
-    transform: rotate(22deg);
-}
-39% {
-    transform: rotate(-20deg);
-}
-41% {
-    transform: rotate(21deg);
-}
-43% {
-    transform: rotate(-19deg);
-}
-45% {
-    transform: rotate(18deg);
-}
-47% {
-    transform: rotate(-16deg);
-}
-50% {
-    transform: rotate(14deg);
-}
-52% {
-    transform: rotate(-12deg);
-}
-54% {
-    transform: rotate(10deg);
-}
-56% {
-    transform: rotate(-8deg);
-}
-58% {
-    transform: rotate(6deg);
-}
-60% {
-    transform: rotate(-4deg);
-}
-62% {
-    transform: rotate(2deg);
-}
-64% {
-    transform: rotate(-1deg);
-}
-66% {
-    transform: rotate(1deg);
-}
-70% {
-    transform: rotate(0);
-}
-100% {
-    transform: rotate(0);
-}
-}
 main {
   overflow: auto;
   position: relative;
@@ -1133,15 +1959,6 @@ main {
 .margin-top-50 {
   margin-top: 50px;
 }
-.margin-left-15 {
-  margin-left: 15px;
-}
-.margin-bottom-5 {
-  margin-bottom: 5px;
-}
-.margin-bottom-15 {
-  margin-bottom: 15px;
-}
 .title-row {
   margin: 30px 0 40px;
 }
@@ -1153,12 +1970,6 @@ main {
 .title-row button {
   order: 2;
 }
-.flex {
-  display: flex;
-}
-.flex.vertical-center {
-  align-items: center;
-}
 .center {
   text-align: center;
   justify-content: center;
@@ -1169,26 +1980,6 @@ main {
 .pointer {
   cursor: pointer;
 }
-.primary-text {
-  font-size: 14px !important;
-  line-height: 1.29;
-  font-weight: bold;
-}
-.semi-primary-text {
-  font-size: 14px;
-  line-height: 1.25;
-  font-weight: normal;
-}
-.error-text {
-  color: #da1e28;
-}
-.error-text span {
-  color: #da1e28 !important;
-}
-.text-muted {
-  font-size: 12px;
-  color: #64748b;
-}
 .modal.confirm {
   box-sizing: border-box;
   min-width: 280px;
@@ -1223,59 +2014,92 @@ main {
   margin-right: 0;
   padding-right: 0;
 }
-.give-kudos a,
-.give-kudos a:hover {
+.give-kudos .user ul {
+  max-height: 200px;
+}
+.give-kudos a {
+  font-weight: bold;
+}
+.give-kudos .subtitle {
+  padding: 0px 0 30px 0;
+}
+.give-kudos .subtitle a,
+.give-kudos .subtitle a:hover {
   text-decoration: none;
   color: #008c79;
 }
-.give-kudos a.portals-link {
+.give-kudos .subtitle a.portals-link {
   color: var(--text-link);
   font-size: var(--font-size-14);
   font-weight: 600;
   text-decoration: underline;
 }
-.give-kudos a.portals-link:hover {
+.give-kudos .subtitle a.portals-link:hover {
   color: var(--text-link-hover);
 }
-.give-kudos .kudos-form {
+.give-kudos .form {
+  display: grid;
+  grid-template-columns: auto 207px;
+  grid-gap: 15px;
+  /* Chrome, Safari, Edge, Opera */
   /* Firefox */
 }
-.give-kudos .kudos-form .rows-group {
-  display: grid;
-  grid-template-columns: 1fr 200px;
-  grid-column-gap: 32px;
+.give-kudos .form .vs__selected-options {
+  flex-wrap: nowrap;
 }
-.give-kudos .kudos-form .kudos-quantity {
-  width: 100%;
-  height: 40px;
-  padding: 0 15px;
+.give-kudos .form .vs__selected-options span.vs__selected {
+  white-space: nowrap;
+}
+.give-kudos .form .v-select .vs__dropdown-toggle {
+  border-radius: 6px;
+}
+.give-kudos .form .kudos-quantity {
+  height: 38px;
   margin: 0;
   border: solid 1px #cbd5e1;
+  background-color: #ffffff;
   border-radius: 6px;
   box-sizing: inherit;
-  font-size: 14px;
-  font-weight: 600;
+  padding: 0 15px;
 }
-.give-kudos .kudos-form .kudos-quantity:focus, .give-kudos .kudos-form .kudos-quantity:active, .give-kudos .kudos-form .kudos-quantity:focus-visible {
-  border: solid 1px #00a58e;
-  box-shadow: none !important;
+.give-kudos .form .kudos-quantity.theme-reactive {
+  border: solid 1px var(--border);
+  background-color: var(--surface-primary);
+  color: var(--text-primary);
+}
+.give-kudos .form .kudos-quantity.wide {
+  width: 207px;
+}
+.give-kudos .form .kudos-quantity:focus,
+.give-kudos .form .kudos-quantity:active,
+.give-kudos .form .kudos-quantity:focus-visible {
+  border: solid 1px #00a58e !important;
+  box-shadow: none;
   outline: none !important;
 }
-.give-kudos .kudos-form .kudos-quantity:disabled {
-  color: #94a3b8;
-  font-weight: 400;
-  background-color: #f1f5f9;
+.give-kudos .form input::-webkit-outer-spin-button,
+.give-kudos .form input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
-.give-kudos .kudos-form input[type=number] {
+.give-kudos .form input[type=number] {
   -moz-appearance: textfield;
 }
-.give-kudos .kudos-form .v-select .vs__dropdown-toggle {
-  border-radius: 6px;
+.give-kudos .form .user {
+  grid-column: span 2;
+  margin-right: 1px;
 }
-.give-kudos .kudos-form .v-select .vs__deselect {
-  margin-left: 15px;
+.give-kudos .form .block-kudos-quantity {
+  width: 207px;
+}
+.give-kudos .form .block-kudos-category {
+  margin-right: 5px;
+}
+.give-kudos .form .description {
+  grid-column: span 2;
+  margin-right: 1px;
 }
-.give-kudos .kudos-form textarea {
+.give-kudos .form .description textarea {
   resize: none;
   min-height: 100px;
   max-height: 300px;
@@ -1286,41 +2110,47 @@ main {
   padding: 10px;
   font-size: 14px;
 }
-.give-kudos .kudos-form textarea::-moz-placeholder {
-  color: #5a6c7c;
-  font-size: 14px;
-}
-.give-kudos .kudos-form textarea::placeholder {
-  color: #5a6c7c;
-  font-size: 14px;
-}
-.give-kudos .kudos-form .portals-input {
+.give-kudos .form .description textarea.theme-reactive {
   border: solid 1px var(--border);
   background-color: var(--surface-primary);
   color: var(--text-primary);
 }
-.give-kudos .kudos-form .portals-input:focus {
+.give-kudos .form .description textarea.theme-reactive:focus {
   border: solid 1px var(--accent-primary);
 }
-.give-kudos .kudos-form .textarea-info {
+.give-kudos .form .description textarea::-moz-placeholder {
+  color: #5a6c7c;
+  font-size: 14px;
+}
+.give-kudos .form .description textarea::placeholder {
+  color: #5a6c7c;
+  font-size: 14px;
+}
+.give-kudos .form .description .textarea-info {
   display: flex;
   flex-direction: column;
   align-items: end;
   font-size: var(--font-size-10);
 }
-.give-kudos .kudos-form .textarea-info.lite-info {
-  font-size: 0.67rem;
-}
-.give-kudos .kudos-form label {
+.give-kudos .form label {
   display: flex;
   font-size: 0.94rem;
   margin-bottom: 10px;
   color: var(--text-primary);
 }
-.give-kudos .kudos-form .error {
+.give-kudos .form .error {
   font-size: 0.8rem;
   color: #da1e28;
 }
-.give-kudos .kudos-form .error-field {
+.give-kudos .form .error-field {
   border: solid 1px #da1e28 !important;
 }
+.give-kudos .modal-footer .submit {
+  margin-left: 15px;
+}
+.give-kudos button.btn-large[disabled] {
+  background-color: #c2e9e4 !important;
+}
+.give-kudos .vs__clear svg {
+  display: none;
+}