halleyx-ui-framework 11.7.43 → 11.7.44

package/dist/src/assets/styles/dashboard.css

@@ -0,0 +1,1817 @@
+.dashboard-right-container {
+  font-family: var(--hlx-font-type-content);
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
+.dashboard-right-container .link {
+  color: var(--hlx-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.dashboard-right-container .profile-options {
+  background: #fff;
+  border: 1px solid var(--hlx-border-color);
+  border-radius: 10px;
+  box-shadow: 0px 0px 20px var(--hlx-border-color);
+  width: 200px;
+  max-height: 300px;
+  overflow: auto;
+  display: flex;
+  position: absolute;
+  top: 55px;
+  right: 20px;
+  z-index: 13;
+  display: flex;
+  flex-direction: column;
+}
+.dashboard-right-container .profile-options .top {
+  width: 100%;
+  height: 25%;
+  border-bottom: 1px solid var(--hlx-border-color);
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.dashboard-right-container .profile-options .top div img {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  margin-right: 20px;
+  margin-top: 7px;
+}
+.dashboard-right-container .profile-options .top .content {
+  display: flex;
+  flex-direction: column;
+}
+.dashboard-right-container .profile-options .top .content .headerr {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.dashboard-right-container .profile-options .top .content .sub-header {
+  font-size: var(--hlx-font-content-size-xs);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .profile-options .middle {
+  width: 100%;
+  height: 60%;
+  border-bottom: 1px solid var(--hlx-border-color);
+  padding: 20px 20px 10px 20px;
+}
+.dashboard-right-container .profile-options .middle .content {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.dashboard-right-container .profile-options .middle .content .icon {
+  width: 10%;
+  margin-right: 10px;
+}
+.dashboard-right-container .profile-options .middle .content .icon i {
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-icon-size-md);
+}
+.dashboard-right-container .profile-options .middle .content .item {
+  width: 90%;
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .profile-options .bottom {
+  width: 100%;
+  height: 10%;
+  padding: 10px 20px 10px 20px;
+}
+.dashboard-right-container .profile-options .bottom .content {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.dashboard-right-container .profile-options .bottom .content .icon {
+  width: 10%;
+  margin-right: 10px;
+}
+.dashboard-right-container .profile-options .bottom .content .icon i {
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-icon-size-md);
+}
+.dashboard-right-container .profile-options .bottom .content .item {
+  width: 90%;
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .notifications {
+  background: #fff;
+  border: 1px solid var(--hlx-border-color);
+  border-radius: 10px;
+  box-shadow: 0px 0px 20px var(--hlx-border-color);
+  width: 300px;
+  display: flex;
+  position: absolute;
+  top: 55px;
+  right: 20px;
+  z-index: 13;
+  display: flex;
+  flex-direction: column;
+}
+.dashboard-right-container .notifications .top {
+  width: 100%;
+  height: 12%;
+  border-bottom: 1px solid var(--hlx-border-color);
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: sticky;
+  font-weight: bold;
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .notifications .middle {
+  width: 100%;
+  max-height: 300px;
+  overflow: auto;
+  border-bottom: 1px solid var(--hlx-border-color);
+}
+.dashboard-right-container .notifications .middle .contain {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--hlx-border-color);
+}
+.dashboard-right-container .notifications .middle .contain .icon {
+  margin: 10px 10px 10px 20px;
+}
+.dashboard-right-container .notifications .middle .contain .icon i {
+  font-size: var(--hlx-icon-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .notifications .middle .contain .content {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-right: 20px;
+}
+.dashboard-right-container .notifications .middle .contain .content .headerr {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+.dashboard-right-container .notifications .middle .contain .content .headerr .main {
+  font-size: var(--hlx-font-content-size-xs);
+  color: var(--hlx-text-color-primary);
+  font-weight: bold;
+}
+.dashboard-right-container .notifications .middle .contain .content .headerr .sub {
+  font-size: 10px;
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .notifications .middle .contain .content .sub-header {
+  font-size: var(--hlx-font-content-size-xs);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .notifications .bottom {
+  width: 100%;
+  height: 12%;
+  padding: 10px 20px 15px 20px;
+  position: sticky;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-header {
+  width: 100%;
+  height: 60px;
+  background: #fff;
+  z-index: 10;
+  box-shadow: 0px 0px 20px var(--hlx-border-color);
+  position: absolute;
+  display: flex;
+  padding: 20px 20px;
+  align-items: center;
+  justify-content: space-between;
+}
+.dashboard-right-container .dashboard-header .searchh {
+  width: 25%;
+}
+.dashboard-right-container .dashboard-header .actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: 28%;
+}
+.dashboard-right-container .dashboard-header .actions div {
+  margin-right: 20px;
+}
+.dashboard-right-container .dashboard-header .actions div i {
+  font-size: var(--hlx-icon-size-sm);
+  color: var(--hlx-text-color-primary);
+  cursor: pointer;
+}
+.dashboard-right-container .dashboard-header .actions div img {
+  height: 30px;
+  width: 30px;
+  border-radius: 100%;
+  cursor: pointer;
+}
+.dashboard-right-container .card-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size);
+  font-weight: bold;
+  margin: 20px;
+}
+.dashboard-right-container .card-title1 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size);
+  font-weight: bold;
+  margin: 0 20px 20px 0;
+}
+.dashboard-right-container .dashboard-body {
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  background: var(--hlx-border-color-light);
+  padding: 20px;
+}
+.dashboard-right-container .dashboard-body-header-panel {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 120px;
+}
+.dashboard-right-container .dashboard-body-header-panel .dashboard-body-header {
+  display: flex;
+  align-items: center;
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size-lg);
+  font-weight: bold;
+  margin-top: 40px;
+  margin-right: 20px;
+}
+.dashboard-right-container .dashboard-body-header-panel .dashboard-body-breadcrumb {
+  height: 30px;
+  border-left: 1px solid var(--hlx-border-color);
+  margin-top: 66px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px !important;
+}
+.dashboard-right-container .dashboard-body .small-cards-container {
+  height: 200px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards {
+  width: 24%;
+  height: 100%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .icon-bg {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hlx-border-color-dark);
+  border-radius: 100%;
+  margin-bottom: 10px;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .icon-bg i {
+  font-size: var(--hlx-icon-size-sm);
+  color: #fff;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-header {
+  font-size: 25px;
+  font-weight: 600;
+  color: var(--hlx-text-color-primary);
+  margin-bottom: 5px;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-sub-header {
+  font-size: var(--hlx-font-content-size);
+  color: var(--hlx-color-primary-dark);
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-percentage {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-color-primary-dark);
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+.dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-percentage i {
+  color: var(--hlx-color-primary-dark);
+  font-size: var(--hlx-icon-size-xs);
+}
+.dashboard-right-container .dashboard-body .container-1 {
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.dashboard-right-container .dashboard-body .container-1 .left-container-1 {
+  width: 52%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 {
+  width: 48%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+  bottom: 0;
+  margin-bottom: 10px;
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content-metric {
+  margin-left: 20px;
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content-count {
+  margin-right: 20px;
+  color: #fff;
+  font-weight: bold;
+  font-size: var(--hlx-font-content-size-xs);
+  width: 30px;
+  border-radius: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content {
+  position: relative;
+  top: -65%;
+  width: 50%;
+  margin: 0 auto;
+  width: 30%;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content-total {
+  font-weight: bold;
+  font-size: var(--hlx-font-content-size-lg);
+}
+.dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content-title {
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-2 {
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 2%;
+}
+.dashboard-right-container .dashboard-body .container-2 .left-container-2 {
+  width: 43%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+}
+.dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content {
+  position: relative;
+  top: -53%;
+  right: 17%;
+  width: 50%;
+  margin: 0 auto;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content-total {
+  font-weight: bold;
+  font-size: var(--hlx-font-content-size-lg);
+}
+.dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content-title {
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 {
+  width: 55%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  padding: 20px;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container {
+  width: 100%;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr {
+  height: 35px;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .flag {
+  width: 10%;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .label {
+  width: 20%;
+  text-overflow: ellipsis;
+  font-size: var(--hlx-font-content-size);
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percent-num {
+  width: 10%;
+  font-size: var(--hlx-font-content-size-sm);
+  padding: 0 10px 0 10px;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage {
+  margin-right: 10px;
+  width: 60%;
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage .grey-container {
+  border-radius: 5px;
+  width: 100%;
+  height: 5px;
+  display: flex;
+  align-items: flex-start;
+  background: var(--hlx-border-color-dark);
+}
+.dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage .grey-container .inner-container {
+  border-radius: 6px;
+  width: 30%;
+  background: var(--hlx-color-primary);
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-3 {
+  gap: 2%;
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 {
+  width: 32%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  padding: 20px;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container {
+  width: 100%;
+  height: 20%;
+  border: 1px solid var(--hlx-border-color);
+  border-radius: 10px;
+  margin-top: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 15px;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container .title {
+  font-size: var(--hlx-font-content-size-lg);
+  color: var(--hlx-color-primary);
+  margin-bottom: 15px;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container .sub-title {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container .title {
+  font-size: var(--hlx-font-content-size-lg);
+  color: var(--hlx-color-primary) -light;
+  margin-bottom: 15px;
+}
+.dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container .sub-title {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 {
+  padding: 20px;
+  width: 32%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .percent {
+  position: relative;
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg {
+  position: relative;
+  width: 210px;
+  height: 210px;
+  max-width: 210px;
+  transform: rotate(-90deg);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg circle {
+  fill: none;
+  stroke: #f0f0f0;
+  stroke-width: 5%;
+  stroke-linecap: round;
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg circle:last-of-type {
+  stroke-dasharray: 625px;
+  stroke-dashoffset: calc(625px - 625px * var(--percent) / 100);
+  stroke: var(--hlx-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number {
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h3 {
+  font-weight: 600;
+  font-size: var(--hlx-font-content-size-lg);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h4 {
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h3 span {
+  font-size: var(--hlx-font-content-size-lg);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .title h2 {
+  margin: 25px 0 0;
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd:nth-child(1) svg circle:last-of-type {
+  stroke: var(--hlx-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 20px;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .bottom .grey-container {
+  border-radius: 5px;
+  width: 100%;
+  height: 5px;
+  display: flex;
+  align-items: flex-start;
+  background: var(--hlx-border-color-dark);
+}
+.dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .bottom .grey-container .inner-container {
+  border-radius: 6px;
+  width: 30%;
+  background: var(--hlx-color-primary);
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 {
+  width: 32%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  padding: 20px;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 39%;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool {
+  width: 10%;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool div {
+  background: var(--hlx-text-color-primary);
+  height: 50%;
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool div i {
+  font-size: var(--hlx-icon-size-xs);
+  color: #fff;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .mapp {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  width: 100%;
+  height: 70%;
+  overflow: scroll;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .mapp #canvas {
+  width: 100%;
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 20px;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .bottom .grey-container {
+  border-radius: 5px;
+  width: 100%;
+  height: 5px;
+  display: flex;
+  align-items: flex-start;
+  background: var(--hlx-border-color-dark);
+}
+.dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .bottom .grey-container .inner-container {
+  border-radius: 6px;
+  width: 30%;
+  background: var(--hlx-color-primary);
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-4 {
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 {
+  display: flex;
+  flex-direction: column;
+  width: 33%;
+  margin-right: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 {
+  width: 100%;
+  height: 50%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .icon {
+  background: var(--hlx-color-primary);
+  width: 40px;
+  height: 40px;
+  border-radius: 7px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .icon i {
+  color: #fff;
+  font-size: var(--hlx-icon-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .count {
+  font-size: var(--hlx-font-content-size-lg);
+  color: var(--hlx-text-color-primary);
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 10px;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom {
+  margin-bottom: 10px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom .grey-container {
+  border-radius: 5px;
+  width: 100%;
+  height: 5px;
+  display: flex;
+  align-items: flex-start;
+  background: var(--hlx-border-color-dark);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom .grey-container .inner-container {
+  border-radius: 6px;
+  width: 30%;
+  background: var(--hlx-color-primary);
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 {
+  padding: 20px;
+  width: 100%;
+  height: 50%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  margin-top: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .icon {
+  background: var(--hlx-color-primary);
+  width: 40px;
+  height: 40px;
+  border-radius: 7px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .icon i {
+  color: #fff;
+  font-size: var(--hlx-icon-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .count {
+  font-size: var(--hlx-font-content-size-lg);
+  color: var(--hlx-text-color-primary);
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 10px;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom {
+  margin-bottom: 10px;
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom .grey-container {
+  border-radius: 5px;
+  width: 100%;
+  height: 5px;
+  display: flex;
+  align-items: flex-start;
+  background: var(--hlx-border-color-dark);
+}
+.dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom .grey-container .inner-container {
+  border-radius: 6px;
+  width: 30%;
+  background: var(--hlx-color-primary);
+  height: 100%;
+}
+.dashboard-right-container .dashboard-body .container-4 .middle-container-4 {
+  width: 33%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  margin-right: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 {
+  display: flex;
+  flex-direction: column;
+  width: 33%;
+  margin-bottom: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 {
+  width: 100%;
+  height: 50%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .title {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .count {
+  color: var(--hlx-text-color-primary);
+  font-weight: 600;
+  font-size: var(--hlx-font-content-size-lg);
+  margin: 10px 20px 0 0;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .count .sub-count {
+  font-size: var(--hlx-font-content-size-xs);
+  color: var(--hlx-color-success);
+  margin-left: 10px;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 {
+  width: 100%;
+  height: 50%;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .title {
+  font-size: var(--hlx-font-content-size-sm);
+  color: var(--hlx-text-color-primary);
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .count {
+  color: var(--hlx-text-color-primary);
+  font-weight: 600;
+  font-size: var(--hlx-font-content-size-lg);
+  margin: 10px 20px 0 0;
+}
+.dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .count .sub-count {
+  font-size: var(--hlx-font-content-size-xs);
+  color: #ff3642;
+  margin-left: 10px;
+}
+.dashboard-right-container .dashboard-body .container-5 {
+  flex-wrap: wrap;
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  box-shadow: 0px 0px 5px var(--hlx-border-color);
+  border-radius: 10px;
+  padding: 20px;
+}
+.dashboard-right-container footer {
+  height: 60px;
+  width: 100%;
+  font-size: var(--hlx-font-content-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.component-description-link {
+  color: var(--hlx-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+@media only screen and (max-width: 1390px) {
+  .dashboard-right-container {
+    font-family: var(--hlx-font-type-content);
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+  }
+  .dashboard-right-container .link {
+    color: var(--hlx-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .dashboard-right-container .profile-options {
+    background: #fff;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    width: 200px;
+    max-height: 300px;
+    overflow: auto;
+    display: flex;
+    position: absolute;
+    top: 55px;
+    right: 20px;
+    z-index: 13;
+    display: flex;
+    flex-direction: column;
+  }
+  .dashboard-right-container .profile-options .top {
+    width: 100%;
+    height: 25%;
+    border-bottom: 1px solid var(--hlx-border-color);
+    padding: 10px 20px 10px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .dashboard-right-container .profile-options .top div img {
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    margin-right: 20px;
+    margin-top: 7px;
+  }
+  .dashboard-right-container .profile-options .top .content {
+    display: flex;
+    flex-direction: column;
+  }
+  .dashboard-right-container .profile-options .top .content .headerr {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  .dashboard-right-container .profile-options .top .content .sub-header {
+    font-size: var(--hlx-font-content-size-xs);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .profile-options .middle {
+    width: 100%;
+    height: 60%;
+    border-bottom: 1px solid var(--hlx-border-color);
+    padding: 20px 20px 10px 20px;
+  }
+  .dashboard-right-container .profile-options .middle .content {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .dashboard-right-container .profile-options .middle .content .icon {
+    width: 10%;
+    margin-right: 10px;
+  }
+  .dashboard-right-container .profile-options .middle .content .icon i {
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-icon-size-md);
+  }
+  .dashboard-right-container .profile-options .middle .content .item {
+    width: 90%;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .profile-options .bottom {
+    width: 100%;
+    height: 10%;
+    padding: 10px 20px 10px 20px;
+  }
+  .dashboard-right-container .profile-options .bottom .content {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+  .dashboard-right-container .profile-options .bottom .content .icon {
+    width: 10%;
+    margin-right: 10px;
+  }
+  .dashboard-right-container .profile-options .bottom .content .icon i {
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-icon-size-md);
+  }
+  .dashboard-right-container .profile-options .bottom .content .item {
+    width: 90%;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .notifications {
+    background: #fff;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    width: 300px;
+    display: flex;
+    position: absolute;
+    top: 55px;
+    right: 20px;
+    z-index: 13;
+    display: flex;
+    flex-direction: column;
+  }
+  .dashboard-right-container .notifications .top {
+    width: 100%;
+    height: 12%;
+    border-bottom: 1px solid var(--hlx-border-color);
+    padding: 10px 20px 10px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: sticky;
+    font-weight: bold;
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .notifications .middle {
+    width: 100%;
+    max-height: 300px;
+    overflow: auto;
+    border-bottom: 1px solid var(--hlx-border-color);
+  }
+  .dashboard-right-container .notifications .middle .contain {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--hlx-border-color);
+  }
+  .dashboard-right-container .notifications .middle .contain .icon {
+    margin: 10px 10px 10px 20px;
+  }
+  .dashboard-right-container .notifications .middle .contain .icon i {
+    font-size: var(--hlx-icon-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .notifications .middle .contain .content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    margin-right: 20px;
+  }
+  .dashboard-right-container .notifications .middle .contain .content .headerr {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .dashboard-right-container .notifications .middle .contain .content .headerr .main {
+    font-size: var(--hlx-font-content-size-xs);
+    color: var(--hlx-text-color-primary);
+    font-weight: bold;
+  }
+  .dashboard-right-container .notifications .middle .contain .content .headerr .sub {
+    font-size: 10px;
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .notifications .middle .contain .content .sub-header {
+    font-size: var(--hlx-font-content-size-xs);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .notifications .bottom {
+    width: 100%;
+    height: 12%;
+    padding: 10px 20px 15px 20px;
+    position: sticky;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: sticky;
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-header {
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    z-index: 10;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    position: absolute;
+    display: flex;
+    padding: 20px 20px;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .dashboard-right-container .dashboard-header .searchh {
+    width: 25%;
+  }
+  .dashboard-right-container .dashboard-header .actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    width: 28%;
+  }
+  .dashboard-right-container .dashboard-header .actions div {
+    margin-right: 20px;
+  }
+  .dashboard-right-container .dashboard-header .actions div i {
+    font-size: var(--hlx-icon-size-sm);
+    color: var(--hlx-text-color-primary);
+    cursor: pointer;
+  }
+  .dashboard-right-container .dashboard-header .actions div img {
+    height: 30px;
+    width: 30px;
+    border-radius: 100%;
+    cursor: pointer;
+  }
+  .dashboard-right-container .card-title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size);
+    font-weight: bold;
+    margin: 20px;
+  }
+  .dashboard-right-container .card-title1 {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size);
+    font-weight: bold;
+    margin: 0 20px 20px 0;
+  }
+  .dashboard-right-container .dashboard-body {
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    background: var(--hlx-border-color-light);
+    padding: 20px;
+  }
+  .dashboard-right-container .dashboard-body-header-panel {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 120px;
+  }
+  .dashboard-right-container .dashboard-body-header-panel .dashboard-body-header {
+    display: flex;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size-lg);
+    font-weight: bold;
+    margin-top: 40px;
+    margin-right: 20px;
+  }
+  .dashboard-right-container .dashboard-body-header-panel .dashboard-body-breadcrumb {
+    height: 30px;
+    border-left: 1px solid var(--hlx-border-color);
+    margin-top: 66px;
+    display: flex;
+    align-items: center;
+    padding-left: 20px !important;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container {
+    height: auto;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards {
+    width: 45%;
+    height: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .icon-bg {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--hlx-border-color-dark);
+    border-radius: 100%;
+    margin-bottom: 10px;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .icon-bg i {
+    font-size: var(--hlx-icon-size-sm);
+    color: #fff;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-header {
+    font-size: 25px;
+    font-weight: 600;
+    color: var(--hlx-text-color-primary);
+    margin-bottom: 5px;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-sub-header {
+    font-size: var(--hlx-font-content-size);
+    color: var(--hlx-color-primary-dark);
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-percentage {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-color-primary-dark);
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+  }
+  .dashboard-right-container .dashboard-body .small-cards-container .small-cards .card-percentage i {
+    color: var(--hlx-color-primary-dark);
+    font-size: var(--hlx-icon-size-xs);
+  }
+  .dashboard-right-container .dashboard-body .container-1 {
+    width: 100%;
+    height: auto;
+    gap: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .dashboard-right-container .dashboard-body .container-1 .left-container-1 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    bottom: 0;
+    margin-bottom: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content-metric {
+    margin-left: 20px;
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .right-container-1-content-count {
+    margin-right: 20px;
+    color: #fff;
+    font-weight: bold;
+    font-size: var(--hlx-font-content-size-xs);
+    width: 30px;
+    border-radius: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content {
+    position: relative;
+    top: -65%;
+    width: 50%;
+    margin: 0 auto;
+    width: 30%;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content-total {
+    font-weight: bold;
+    font-size: var(--hlx-font-content-size-lg);
+  }
+  .dashboard-right-container .dashboard-body .container-1 .right-container-1 .chartoptions2-content-title {
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-2 {
+    width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .left-container-2 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content {
+    position: relative;
+    top: -53%;
+    right: 17%;
+    width: 50%;
+    margin: 0 auto;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content-total {
+    font-weight: bold;
+    font-size: var(--hlx-font-content-size-lg);
+  }
+  .dashboard-right-container .dashboard-body .container-2 .left-container-2 .chartoptions2-content-title {
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    padding: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container {
+    width: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr {
+    height: 35px;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .flag {
+    width: 10%;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .label {
+    width: 20%;
+    text-overflow: ellipsis;
+    font-size: var(--hlx-font-content-size);
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percent-num {
+    width: 10%;
+    font-size: var(--hlx-font-content-size-sm);
+    padding: 0 10px 0 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage {
+    margin-right: 10px;
+    width: 60%;
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage .grey-container {
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    display: flex;
+    align-items: flex-start;
+    background: var(--hlx-border-color-dark);
+  }
+  .dashboard-right-container .dashboard-body .container-2 .right-container-2 .row-container tr .percentage .grey-container .inner-container {
+    border-radius: 6px;
+    width: 30%;
+    background: var(--hlx-color-primary);
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 {
+    gap: 20px;
+    width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    padding: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container {
+    width: 100%;
+    height: 20%;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 10px;
+    margin-top: 45px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 15px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container .title {
+    font-size: var(--hlx-font-content-size-lg);
+    color: var(--hlx-color-primary);
+    margin-bottom: 15px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .left-bottom-container .sub-title {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container .title {
+    font-size: var(--hlx-font-content-size-lg);
+    color: var(--hlx-color-primary) -light;
+    margin-bottom: 15px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .left-container-3 .bottom-container .right-bottom-container .sub-title {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 {
+    padding: 20px;
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .percent {
+    position: relative;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg {
+    position: relative;
+    width: 210px;
+    height: 210px;
+    max-width: 210px;
+    transform: rotate(-90deg);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg circle {
+    fill: none;
+    stroke: #f0f0f0;
+    stroke-width: 5%;
+    stroke-linecap: round;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd svg circle:last-of-type {
+    stroke-dasharray: 625px;
+    stroke-dashoffset: calc(625px - 625px * var(--percent) / 100);
+    stroke: var(--hlx-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number {
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h3 {
+    font-weight: 600;
+    font-size: var(--hlx-font-content-size-lg);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h4 {
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .number h3 span {
+    font-size: var(--hlx-font-content-size-lg);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd .title h2 {
+    margin: 25px 0 0;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .cardd:nth-child(1) svg circle:last-of-type {
+    stroke: var(--hlx-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 20px;
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .bottom .grey-container {
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    display: flex;
+    align-items: flex-start;
+    background: var(--hlx-border-color-dark);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .middle-container-3 .bottom-container .bottom .grey-container .inner-container {
+    border-radius: 6px;
+    width: 30%;
+    background: var(--hlx-color-primary);
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    padding: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 39%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool {
+    width: 10%;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool div {
+    background: var(--hlx-text-color-primary);
+    height: 50%;
+    width: 100%;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .tool div i {
+    font-size: var(--hlx-icon-size-xs);
+    color: #fff;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .mapp {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    width: 100%;
+    height: 70%;
+    overflow: scroll;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .map .mapp #canvas {
+    width: 100%;
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 20px;
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .bottom .grey-container {
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    display: flex;
+    align-items: flex-start;
+    background: var(--hlx-border-color-dark);
+  }
+  .dashboard-right-container .dashboard-body .container-3 .right-container-3 .bottom-container .bottom .grey-container .inner-container {
+    border-radius: 6px;
+    width: 30%;
+    background: var(--hlx-color-primary);
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-4 {
+    width: 100%;
+    gap: 20px;
+    height: auto;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: 0px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 {
+    width: 100%;
+    height: 50%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .icon {
+    background: var(--hlx-color-primary);
+    width: 40px;
+    height: 40px;
+    border-radius: 7px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .icon i {
+    color: #fff;
+    font-size: var(--hlx-icon-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .count {
+    font-size: var(--hlx-font-content-size-lg);
+    color: var(--hlx-text-color-primary);
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 10px;
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom {
+    margin-bottom: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom .grey-container {
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    display: flex;
+    align-items: flex-start;
+    background: var(--hlx-border-color-dark);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-1 .bottom-container .bottom .grey-container .inner-container {
+    border-radius: 6px;
+    width: 30%;
+    background: var(--hlx-color-primary);
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 {
+    padding: 20px;
+    width: 100%;
+    height: 50%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    margin-top: 20px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .icon {
+    background: var(--hlx-color-primary);
+    width: 40px;
+    height: 40px;
+    border-radius: 7px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .icon i {
+    color: #fff;
+    font-size: var(--hlx-icon-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .count {
+    font-size: var(--hlx-font-content-size-lg);
+    color: var(--hlx-text-color-primary);
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 10px;
+    font-size: var(--hlx-font-content-size-sm);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom {
+    margin-bottom: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom .grey-container {
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    display: flex;
+    align-items: flex-start;
+    background: var(--hlx-border-color-dark);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .left-container-4 .left-container-4-2 .bottom-container .bottom .grey-container .inner-container {
+    border-radius: 6px;
+    width: 30%;
+    background: var(--hlx-color-primary);
+    height: 100%;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .middle-container-4 {
+    width: 100%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    margin-right: 0px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: 0px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 {
+    width: 100%;
+    height: 50%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .title {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .count {
+    color: var(--hlx-text-color-primary);
+    font-weight: 600;
+    font-size: var(--hlx-font-content-size-lg);
+    margin: 10px 20px 0 0;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-1 .count .sub-count {
+    font-size: var(--hlx-font-content-size-xs);
+    color: var(--hlx-color-success);
+    margin-left: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 {
+    width: 100%;
+    height: 50%;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .title {
+    font-size: var(--hlx-font-content-size-sm);
+    color: var(--hlx-text-color-primary);
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .count {
+    color: var(--hlx-text-color-primary);
+    font-weight: 600;
+    font-size: var(--hlx-font-content-size-lg);
+    margin: 10px 20px 0 0;
+  }
+  .dashboard-right-container .dashboard-body .container-4 .right-container-4 .right-container-4-2 .count .sub-count {
+    font-size: var(--hlx-font-content-size-xs);
+    color: #ff3642;
+    margin-left: 10px;
+  }
+  .dashboard-right-container .dashboard-body .container-5 {
+    flex-wrap: wrap;
+    width: 100%;
+    overflow: auto;
+    height: auto;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    box-shadow: 0px 0px 5px var(--hlx-border-color);
+    border-radius: 10px;
+    padding: 20px;
+  }
+  .dashboard-right-container footer {
+    height: 60px;
+    width: 100%;
+    font-size: var(--hlx-font-content-size-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}/*# sourceMappingURL=dashboard.css.map */