@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: 'Noto Sans', sans-serif !important;
}
.login-box {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d4e5e3;
}
.solh-btn {
}
.login-box-form {
  max-width: 380px;
  background-color: #fff;
  padding: 25px;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
}
.login-ttile {
  text-align: center;
}
.login-ttile img {
}
.login-ttile p {
  padding: 10px;
  font-size: 16px;
  color: #222;
}
.solh-form {
}
.solh-form label {
  font-size: 15px;
  color: #222;
  margin-bottom: 5px;
}
.solh-form input {
  border: 1px solid #ddd;
  height: 45px;
}

.solh-btn {
  background: #5f9b8c;
  width: 100%;
  display: block;
  padding: 0;
  color: #fff;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 5px;
}
.solh-btn:hover {
  background-color: #e1555a;
}
.labelrow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.labelrow a {
  color: #e1555a;
}
.login-submit {
  padding-top: 10px;
}
/* sidebar start */
.sidebar-box {
  background-color: #d3f1e9;
  background-image: linear-gradient(0deg, #f6d8d8, #d3f1e9);
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 103;
  transition: all 0.05s ease;
  width: 250px;
  height: 100%;
}
.sidebar_logo {
  padding: 7px 10px;
  text-align: center;
  position: fixed;
  width: 250px;
  height: 60px;
  background: transparent;
  z-index: 99;
  border-bottom: 0px solid #e9edf4;
  border-right: 0px solid #e9edf4;
}
.sidebar_logo img {
  width: 100px;
  height: 60px;
  object-fit: contain;
}
.sidebar-middle {
  margin-block-start: 70px;
  padding-block-start: 0;
  padding-block-end: 10px;
  height: 100vh;
  position: relative;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(168, 180, 208, 0.1);
}
.sidebar-middle ul {
}
.sidebar-middle ul li {
  position: relative;
}
.sidebar-middle ul li a {
  width: 100%;
  display: flex;
  padding: 14px 20px;
  color: #000;
  font-size: 14px;
  border-bottom: 1px solid #ababab; 
  gap: 5px;
}
.nav-text{
  gap: 5px;
  display: flex;
}
.sidebar-middle ul li a img {
  width: 18px;
  margin-right: 5px;
}
.sidebar-middle ul li a:hover {
  background-color: var(--primary);
  color: #fff;
}
/* .sidebar-middle ul li a:hover img, .sidebar-middle ul li a[aria-expanded="true"] img{
  filter: brightness(0) invert(1);
} */
.nuxt-link-exact-active img {
  filter: brightness(0) invert(1);
}

.nuxt-link-exact-active {
  background-color: #5f9b8c;
  color: white !important;
}

.sidebar-middle ul li a i {
}
.content_body {
  margin-block-end: 0;
  margin-block-start: 80px;
  margin-inline-start: 250px;
}
.content_body .container-fluid {
  padding-right: 24px;
  padding-left: 24px;
}
.main_header {
  background-color: #eff7f5;
  padding: 10px 30px;
  position: fixed;
  width: calc(100% - 250px);
  z-index: 99;
  inset-block-start: 0;
  margin-left: 250px;
  padding-inline-start: 10px !important;
  border-bottom: 1px solid #dadcdb;
  height: 60px;
}
.nav-profile {
  align-items: center;
}
.nav-profile li {
  margin-right: 15px;
}

.nav-profile li i {
  margin-right: 22px;
  color: rgb(126, 123, 121);
  font-size: 20px;
}

.nav-profile li i:hover {
  cursor: pointer;
}
.d-heading span{
  color: #000;
  font-weight: 800;
}
.countcart {
  background: #e1555a;
  border-radius: 100%;
  color: #fff;
  font-size: 9px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 20px;
  position: absolute;
  right: 198px;
  top: 7px;
}
.nav-profile a {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #222 !important;
  font-weight: 500;
  background-color: transparent !important;
}
.nav-profile img {
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  border-radius: 100%;
}
.main-header-row {
  display: flex;
  justify-content: space-between;
}
.search-box {
  position: relative;
}
.search-box input {
  width: 350px;
  height: 40px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.search-box i {
  position: absolute;
  top: 13px;
  right: 10px;
  z-index: 99;
  cursor: pointer;
}
.notification-icon {
  position: relative;
}
.notification-icon i {
  font-size: 18px;
}
.notification-icon span {
  width: 10px;
  height: 10px;
  position: absolute;
  background: #c22119;
  border-radius: 100%;
  top: -3px;
  right: 0px;
}
.header-col-right {
  display: flex;
  gap: 20px;
  align-items: center;
}
.metismenu .has-arrow[aria-expanded='true']:after,
.metismenu .mm-active > .has-arrow:after {
  -webkit-transform: rotate(45deg) translateY(-50%) !important;
  transform: rotate(45deg) translateY(-50%) !important;
}
.metismenu .has-arrow:after {
  -webkit-transform: rotate(135deg) translateY(-50%) !important;
  transform: rotate(-135deg) translateY(-50%) !important;
}
.dropdown-menu.solhdropdown-menu {
  padding: 0px;
  top: 50px !important;
  width: 220px;
  border-radius: 5px;
  left: inherit !important;
}
.dropdown-menu.solhdropdown-menu .dropdown-item {
  padding: 10px;
  color: #333;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
}
.dropdown-menu.solhdropdown-menu .dropdown-item:hover {
  background-color: var(--primary);
  color: #fff;
}
.dropdown-menu.solhdropdown-menu .dropdown-item:last-child {
  border-bottom: 0px solid #ddd;
}
.dropdown-menu.solhdropdown-menu .dropdown-item i {
}
.dropdown-menu.solhdropdown-menu .dropdown-item span {
}
.nav-profile .dropdown-menu img {
  width: 18px !important;
  height: inherit;
  border: none;
  border-radius: 0px;
}
.dropdown-menu.solhdropdown-menu .dropdown-item:hover img {
  filter: brightness(0) invert(1);
}
/* wellness psycap earnings css */
.psycap-section .row {
  margin: 0;
}
.psycap-section h3 {
  font-size: 20px;
  color: #000;
  margin: 0px;
  padding-bottom: 5px;
}
.psycap-section span.total-count {
  background: #f46b68;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 0px 8px;
  border-radius: 5px;
}
.psycap-section .left-side {
  width: 60%;
  display: flex;
  justify-content: center;
}
.psycap-section .chart-div {
  width: 60%;
}
.psycap-section .description {
  width: 40%;
  position: relative;
}
.psycap-section .view-btn {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  text-align: end;
  cursor: pointer;
}
.psycap-section .right-side {
  width: 40%;
}
.psycap-section .box {
  display: flex  ;
      justify-content: space-between;
      border-bottom: 1px solid #f46b68;
      padding: 15px 9px;
      background: #ffe8e7;
      margin-bottom: 9px;
      border-radius: 10px;
}
.psycap-section .box-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.psycap-section .color-box {
  background: orange; /* Default color */
  padding: 20px;
  width: 20px;
  border-radius: 6px;
  box-shadow: 6px 6px 10px -6px;
}

.psycap-section .box:nth-child(1) .color-box {
  background-color: #4c9e3a;
}

.psycap-section .box:nth-child(2) .color-box {
  background-color: #fe9d25;
}

.psycap-section .box:nth-child(3) .color-box {
  background-color: #e12b44;
}

.psycap-section .box:nth-child(4) .color-box {
  background-color: #ff3a21;
}

.psycap-section .sales {
  padding-left: 10px;
  color: #000;
  font-weight: 600;
}
.psycap-section .count {
  color: #f46b68;
  font-size: 16px;
  font-weight: 600;
}

/* wellness posting css */
.posting-section .men-but {
  background: #7fd856;
  color: #000;
  padding: 6px 20px;
  border-radius: 50px;
  text-align: center;
  margin: 10px auto;
  width: fit-content;
}
.men-but1 {
  background: #fa6b41 !important;
}
.posting-section .box {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #d9d9d9;
  padding: 8px 20px;
  border-radius: 10px;
  border: 1px solid #5f9b8c;
}
.posting-section .box-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.posting-section span.space-colon {
  padding-right: 10px;
}
.posting-section h3 {
  font-size: 20px;
  color: #000;
  margin: 0px;
  padding-bottom: 5px;
}
.posting-section .sales {
  color: #057458;
  font-weight: 600;
  font-size: 12px;
}
.posting-section .color{
  width: 70%;
}
.posting-section .color .sales{
  display: flex;
  justify-content: space-between;
}
.posting-section .count {
  color: #057458;
  font-size: 12px;
  font-weight: 600;
  width: 30%;
  text-align: end;
}
.swap-icon {
  background: #6db73d;
  padding: 2px 8px 4px 8px;
  border-radius: 47px;
  border: 1px solid grey;
}
.swap-icon:hover {
  cursor: pointer;
  background-color: #357e05;
  color: #000000;
}
.swap-icon i {
  font-size: 10px;
  color: white;
  text-align: center;
}
.graph-text {
  /* margin-top: 10px; */
  font-size: 10px;
}
.graph-text h5 {
  font-size: 14px;
  line-height: 1.9;
  color: grey;
  font-weight: 500;
  padding: 20px 26px;
}
.age-wise {
  background: #e0f3ef;
  padding: 12px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.posting-section .progress-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.posting-section .progress-container .progress {
  position: relative;
  width: 120px;
  height: 70px;
  background-color: #fff;
}

.posting-section .progress svg {
  transform: rotate(360deg);
}

.posting-section .progress .number {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
}
.posting-section .group-wrapper {
  display: flex  ;
      justify-content: space-between;
      align-items: center;
      color: #000;
      margin-bottom: 6px;
      background: #e0f3ef;
      border-radius: 6px;
      padding: 7px 24px;
      position: relative;
}
.posting-section .group-wrapper:hover {
  cursor: pointer;
  background: #fde6e3;
}
.posting-section .group-wrapper p {
  margin: 0;
  font-size: 13px;
}
.posting-section .group-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.posting-section .active-group,
h5 {
  font-weight: 800;
  color: #000;
  font-size: 14px;
}
.posting-section #chartdivss {
  width: 100%;
  height: 167px;
}
.posting-section .like-btn {
  background: #fb7524;
  color: #000;
  /* font-weight: bold; */
}
.posting-section .post-btn {
  background: #4da3cd;
  color: #fff;
  /* font-weight: bold; */
}
.posting-section .comment-btn {
  background: #e2f395;
  color: #000;
  /* font-weight: bold; */
}

.posting-section .btn.selected-btn {
  box-shadow: 0px 6px 10px -7px;
  color: #000;
  font-weight: bold;
}

.posting-section .btn {
  width: 100%;
  padding: 6px;
  font-size: 13px;
  border-radius: 5px;
}
.posting-section .view-btn {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
}

/* wellness screening assessment css */
.screen-assessment .owc-row {
  width: 100%;
}
.screen-assessment .detail-row {
  max-width: 25%;
  flex: 0 0 25%;
  padding-left: 0px;
}
.screen-assessment .assesment {
  background: transparent;
  margin-top: 0px;
  height: 500px;
}
.screen-assessment .view-btn {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.screen-assessment h3 {
  font-size: 20px;
  color: #000;
  margin: 0px;
  /* padding-bottom: 20px; */
}
.nodata-text h5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #000000;
  margin-top: 6px;
}
.nodata-text {
  background: #e0f3ef;
  padding: 6px 8px;
  border-radius: 6px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.nodata-text ul li {
  list-style: disc;
  margin-bottom: 20px;
}

.nodata-text ul {
  padding: 8px 18px;
  font-size: 13px;
  line-height: 1.5;
}

.screen-assessment .flex-container {
  background: #fff;
}

/* wellness active user css */
.active-user .total-count {
  background: #f46b68;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 0px 8px;
  border-radius: 5px;
}
.active-user .group-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  margin-bottom: 6px;
  background: #e0f3ef;
  border-radius: 6px;
  padding: 6px 8px;
}
.active-user .group-wrapper p {
  margin: 0;
}

.active-user .group-wrapper:hover {
  background: #fde6e3;
  cursor: pointer;
}
.active-user .group-heading {
  display: flex;
  justify-content: space-between;
}
.active-user .active-group,
h5 {
  font-weight: 800;
  color: #000;
}
.active-user .view-btn {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  cursor: pointer;
}
.active-user #response-container {
  margin-top: 15px;
}

/* wellness glace css */
.glace-section .boxes {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50% 50%;
  gap: 0;
  margin: 15px -15px;
}
.glace-section .box {
  border-radius: 5px;
  margin: 0px 15px 15px;
  text-align: start;
  color: #222 !important;
  position: relative;
  padding: 15px 15px;
  display: flex;
  gap: 8px;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #d1d5db80 !important;
  justify-content: space-between;
}
.glace-section .box:nth-child(odd) {     background: linear-gradient(to right, #E8FFF5, #fff1f1); }
.glace-section .box:nth-child(even) {    background: linear-gradient(to right, #E8FFF5, #fff1f1); }
.glace-section .box:nth-child(odd) .or-box-icon i{
  background-color: #5f9b8c;
  color: #fff;
}
.glace-section .box .or-box-icon i{
  background-color: #f46b68;
  color: #fff;
}
.glace-section .box .or-box-icon img{
  width: 40px;
}
.glace-section .box h4 {
  color: #000;
  font-weight: bold;
  margin-bottom: 0px;
  font-size: 20px;
}

.glace-section .box p {
  margin-bottom: 0;
  font-size: 12px;
  padding-top: 0px;
  font-weight: 600;
}
.glace-section .view-btn {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: #f46b68 !important;
  text-decoration: underline;
  text-align: end;
  display: block;
}
.glace-section.count {
  color: #000;
  font-size: 16px;
  font-weight: 600;
}
.glace-section.progress-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.glace-section .progress-container .progress {
  position: relative;
  width: 120px;
  height: 70px;
  background-color: #fff;
}

.glace-section .progress svg {
  transform: rotate(360deg);
}

.glace-section .progress .number {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.glace-section .boxdiv {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px;
}
.glace-section .boxdiv p {
  margin-bottom: 0;
  color: #000;
  font-weight: 600;
  font-size: 12px;
}
.glace-section .tit-text {
  font-size: 14px;
  text-align: center;
  color: #000;
  margin: 0px;
  padding-bottom: 20px;
  width: 130px;
}
.d-heading {
  font-size: 26px;
  color: #000;
  text-transform: uppercase;
}
.d-selectdate .mx-input {
  height: 45px !important;
}
.d-title {
  position: relative;
  width: 100%;
}
.d-title h3 {
  font-size: 18px;
  color: #000;
  margin: 0px;
  font-weight: 600;
}

.time-dash h5 {
  color: #5f9b8c;
  font-size: 12px;
  font-weight: 600;
}

.d-title h5 {
  font-size: 16px;
  color: #000;
  margin: 0px;
  font-weight: 600;
}
.d-title p,
.right-text p {
  font-size: 16px;
  color: #000;
  margin-bottom: 50px;
}
.viewdetailbtn {
  position: relative;
  text-align: end;
}
.viewdetailbtn a {
  color: #fff;
  font-weight: 600;
  background: #f46b68;
  padding: 10px 20px;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 5px;
}
.viewdetailbtn a:hover {
  background: #5f9b8c;
}
.viewdetailbtn a img {
  width: 25px;
  vertical-align: middle;
}
.viewdetailbtn-space {
}
.circular-image {
  border-radius: 50%; /* Makes the image circular */
  clip-path: circle(50%); /* Clipping path for better support */
}
.viewdetailbtn1 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.moodshares-section #chartdiv {
  width: 100%;
  height: 300px;
}
.moodshares-section h3 {
  font-size: 18px;
  color: #000;
  margin: 0px;
  text-transform: capitalize;
}
.moodshares-section .total-count {
  background: rgb(241, 241, 9);
  color: #000;
  font-size: 20px;
  font-weight: 600;
  padding: 0px 8px;
  border-radius: 5px;
}

.moodshares-section .wrap {
  display: flex;
}
.moodshares-section .left-text {
  width: 30%;
}
.moodshares-section .right-text {
  width: 70%;
}
.wp-space {
  align-items: center;
}
.wp-img {
  text-align: center;
}
.wp-img img {
  width: 100%;
}
.btns {
  display: grid;
  grid-template-columns: 31% 31% 31%;
  justify-content: space-between;
  margin-bottom: 19px;
  margin-top: -10px;
}
.main-space {
  padding-bottom: 40px;
}
.d-title-space {
  padding-bottom: 5px;
}
body {
  background: #eff7f5 !important;
}
.glacespace {
  align-items: center;
}
.sidebar-middle ul li ul li a i {
  transform: rotate(270deg);
  margin-right: 5px;
}
.info1 {
  background-color: #5f9b8c;
  color: white;
  border-radius: 5000%;
  width: 20px;
  height: 20px;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
}
.chartright {
  padding-top: 20px;
}
.d-titlespace{
  padding-bottom: 15px;
}
.stress-level {
  padding: 15px 0px;
}
.stress-level-ul {
  display: flex;
  gap: 20px;
}
.stress-level-ul li {
  font-size: 12px;
  color: #222;
  font-weight: 700;
}
.stress-level-ul li span {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 100%;
}
.stresscolor1 {
  background: #32cd32;
}
.stresscolor2 {
  background: #ff6347;
}
.stresscolor3 {
  background: #4682b4;
}
.stress-r {
  padding: 20px 0px 0px;
}
.stress-r-col {
  border: 1px dashed #ddd;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: none;
}
.stress-top {
  display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}

.stress-img {
  width: 100%;
}
.stress-img img {
  width: 45px;
}
.stress-r-content {
  width: 100%;
  padding-left: 0;
  text-align: center;
}
.stress-r-content span {
  font-size: 12px;
  color: #000;
}
.stress-r-content h4 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: sub;
}
.stress-bottom {
  padding-top: 3px;
  color: #222;
  text-align: center;
  font-size: 12px;
}
.stress-r-col h2 {
  font-size: 13px;
  color: #000;
}
.psycap-text {
  font-size: 16px;
  color: #000;
}
.user-graph {
  padding-top: 15px;
}
.graph {
  padding-top: 20px;
}
.stres-plus {
  font-size: 14px;
  color: #5f9b8c !important;
  font-weight: 900;
}
.stres-minus {
  font-size: 14px;
  color: #e1555a !important;
  font-weight: 900;
}
.textcircle {
  max-width: 75%;
  flex: 0 0 75%;
}
.nodata-text-space{}
/* .tooltip-inner {
  background-color: #007bff;  
  width: 200px;  
  text-align: center;  
  padding: 10px;  
} */

.viewallbtn {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: #f46b68 !important;
  text-decoration: underline;
  text-align: start;
  display: block;
}
.cms-title {
}
.cms-title h2 {
  font-size: 26px;
  color: #000;
}
.cms-avtar {
}
.cms-avtar-main {
}
.cms-avtar-row {
}
.cms-avtar-main label {
  background: #f46b68;
  padding: 8px 20px;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  margin: 0px auto;
  display: block;
  width: fit-content;
  cursor: pointer;
}
.cms-avtar-main input {
  display: none;
}
.cms-avtar-preview {
  margin-bottom: 8px;
  height: 220px;
}
.cms-avtar-preview img {
  width: 100%;
  height: 100%;
}
.cm-avtar-image {
  background: #edf7f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  border: dashed #5f9b8c 2px;
  border-radius: 5px;
}
.cm-avtar-image-row {
  text-align: center;
}
.cm-avtar-image-row i {
  color: #5f9b8c;
  font-size: 35px;
}
.cm-avtar-image-row h3 {
  color: #000;
  font-size: 20px;
  margin: 15px 0px 5px;
}
.cm-avtar-image-row span {
  font-size: 14px;
}
.bi-title {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.bi-title h3 {
  font-size: 20px;
  color: #000;
  margin: 0px;
  font-weight: 600;
}
.form-select {
  padding: 10px !important;
  height: 45px;
  font-size: 14px;
  color: #222 !important;
  border: 1px solid #ddd !important;
}
.org-label {
  font-size: 14px;
  color: #000;
}
.desc-input {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
}
.output-box-row {
  position: relative;
}
.output-box {
  background: #eef9fa;
  border: 1px solid #5f9b8c;
}
.removebtn {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 45px;
  width: 45px;
  border: none;
  background: #f46b68;
  color: #fff;
}
.addbutton {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 45px;
  width: 45px;
  border: none;
  background: #5f9b8c;
  color: #fff;
}
.color-row {
  display: flex;
  gap: 15px;
}
.color-row span {
  border: 1px solid #ddd;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 100%;
}
.org-dropdown {
  position: relative;
}
.org-dropdown .dropdown-togglexx {
  cursor: pointer;
}
.org-dropdown .dropdown-menu {
  left: inherit !important;
  transform: none !important;
  right: 26px;
  top: 21px !important;
  background: #ebe0de;
  padding: 0px;
  border-radius: 5px;
}
.org-dropdown .dropdown-menu .dropdown-item {
  color: #222;
  padding: 10px 10px;
}
.org-dropdown .dropdown-menu .dropdown-item:last-child {
  border-bottom: 0px solid white;
  box-shadow: 0 10px 40px 0 rgba(32, 28, 69, 0.1);
}
.organization-btn1 {
  background-color: #f46b68;
}
.genderbox {
}
.genderboxrow {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #7b7b7b;
  padding: 10px 0px;
  align-items: center;
}
.genderboximage {
  font-size: 15px;
  color: #000;
}
.genderboximage img {
  width: 25px;
}
.genderboxicontent {
  font-size: 15px;
  font-weight: 600;
}
.genderboxrow:last-child {
  border-bottom: 0px solid #7b7b7b;
}
.dash-visi-tooltip {
  position: relative;
  display: inline-block;
}

.dash-visi-tooltip .dash-tooltip-text {
  visibility: hidden;
  width: 380px;
  background-color: #d3d0d0;
  color: black;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.dash-visi-tooltip .dash-tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f1eeee transparent transparent transparent;
}
.dash-visi-tooltip:hover .dash-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.user-box {
  padding: 20px 12px;
  box-shadow: 0px 6px 10px 0px rgba(62, 73, 84, 0.05);
  display: flex;
  gap: 0px 8px;
  background: #fff;
  border-radius: 7px;
}
.user-box-left p {
  font-size: 13px;
  margin: 0px;
  font-weight: 500;
  color: #222;
}
.user-box-left h5 {
  font-size: 25px;
  color: #000;
  margin-bottom: 0px;
}
.user-box-right i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  font-size: 18px;
  margin-right: auto;
  color: #fff;
}

.post-bg1 {
  background: #d9f7d3;
  border: 1px solid #83c475;
}
.post-bg1 .user-box-right i {
  background: #4c9e3a;
}
.post-bg2 {
  background: #fcead4;
  border: 1px solid #e69737;
}
.post-bg2 .user-box-right i {
  background: #fe9d25;
}
.post-bg3 {
  background: #ffdde1;
  border: 1px solid #f14059;
}
.post-bg3 .user-box-right i {
  background: #e12b44;
}
.post-bg4 {
  background: #ffd8d3;
  border: 1px solid #ff3a21;
}
.post-bg4 .user-box-right i {
  background: #ff3a21;
}
.post-bg5 {
  background: #c1d9ff;
  border: 1px solid #3b88ff;
}
.post-bg5 .user-box-right i {
  background: #3b88ff;
}
.organization-btn2 {
  padding: 10px 20px !important;
}
.organization-btn2:hover {
  background-color: #f46b68;
}
.postpopup {
}
.postpopup {
}
.cms-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cms-titlecol .form-control {
  padding: 0px;
  height: auto;
  width: 300px !important;
}
.pp-team-content {
  padding: 15px 12px;
  margin-bottom: 15px;
  border-radius: 10px;
  position: relative;
}
.pp-team-content:hover {
  background: #e1f9f3;
  cursor: pointer;
}
.pp-team-content h3 {
  color: #222;
    font-weight: 600;
}
.pp-team-content p {
  margin: 0px;
  font-size: 13px;
  color: #333;
}
.pp-team-row {
}
.inner-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.datetime {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teamwsie-filter {
}
.teamwsie-filter ul {
  display: flex;
  gap: 10px;
}
.teamwsie-filter ul li {
}
.teamwsie-filter ul span {
  background: #c7eae1;
  padding: 10px 23px;
  color: #000;
  font-size: 14px;
  border-radius: 6px;
  margin: 8px 0px;
  cursor: pointer;
}
.selected span {
  background-color: #5f9b8c !important;
  color: #fff !important;
}
.ModerateAverage,
.ModerateActual,
.ModeratePercieved,
.ModerateMeasured {
  background: #ffefd7;
  border-color: #F7B912;
}
.HighAverage,
.HighPercieved,
.HighActual,
.HighMeasured {
  background: #fbe8e5;
  border-color: #FE5E41;
}
.LowAverage,
.LowMeasured,
.LowActual,
.LowPercieved {
  background: #e6ffd6;
  border-color: #71B644;
}
.foundAverage,
.foundMeasured,
.foundPercieved,
.foundActual {
  background: #e9e9e9;
}
.cloudtext {
}
.cloudtext p {
  font-size: 16px;
  color: #000;
}
.og-group .user-box {
  padding: 20px 25px;
}
.stress-box {
  background-color: #fff;
  padding: 20px 15px;
  border-radius: 10px;
  height: 100%;
  border: 0px solid #ddd;
  position: relative;
  box-shadow: rgb(0 0 0 / 4%) 0px 4px 12px;
}
.stress-box-space {
  margin-bottom: 70px;
}
.stress-bx-top {
  display: flex;
  gap: 10px;
  align-items: center;
}
.stress-bx-col {
}
.stress-bx-col img {
  width: 30px;
}
.stress-content {
}
.stress-content p {
  margin: 0px;
}
.stress-content span {
}
.stress-bx-col i {
  width: 30px;
  height: 30px;
}
.strss-bxt-title {
}
.strss-bxt-title h3 {
}
.strss-bxt-title h4 {
}
.strss-bxt-title h4 span {
}

.d-stress {
  justify-content: space-between;
}
.stress-llcol {
  display: flex;
  gap: 10px;
}
.stress-llcol .mx-input {
  height: 45px !important;
}
.sb-col {
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 10px 0px 0px 10px;
}
.sb-top-title {
  background: #71B644;
  padding: 10px 12px;
  border-radius: 10px 10px 0px 0px;
  display: grid;
  grid-template-columns: 70% 30%;
  text-align: start;
}
.sb-top-title1 {
  background: #71B644;
  padding: 10px 12px;
  border-radius: 10px 10px 0px 0px;
  display: grid;
  text-align: center;
}
.sb-top-title1 h3{
  color: #fff;
}
.sb-top-title-col{}
.sb-top-title h3 {
  font-size: 13px;
  color: #fff;
  margin-bottom: 0;
}
.sb-top-title h4 {
  margin: 0px;
  color: #fff;
  font-size: 18px;
}
.sb-top-title span {
  margin: 0px;
    color: #fff;
    font-size: 13px;
}
.sb-col2 {
  padding: 30px 10px;
    border-radius: 0px 0px 10px 10px;
}
.sbtitle {
  padding-bottom: 10px;
  text-align: center;
}
.sbtitle h5 {
  font-weight: normal;
}
.sbtitle h5 span {
  font-weight: 600;
  color: #000000;
}
.bottom-ul {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  text-align: center;
}
.bottom-ul li {
}
.sb-bottom-cont {
  margin-right: 5px;
  padding: 10px 5px;
  border-radius: 5px;
}
.sb-bottom-cont-bg1 {
  background: #ecfee0;
  border: 1px dashed #71b644;
}
.sb-bottom-cont-bg2 {
  background: #fdf2d7;
  border: 1px dashed #f7b912;
}
.sb-bottom-cont-bg3 {
  background: #f8dcd7;
  border: 1px dashed #fe5e41;
}
.sb-bottom-cont img {
  width: 25px;
  margin-bottom: 5px;
}
.sb-bottom-cont p {
  margin-bottom: 0px;
  font-size: 12px;
  color: #000;
  line-height: 1.5;
}
.sb-bottom-cont span {
  font-size: 12px;
  color: #000;
}

.sb-row {
  background: #fff;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 33% 67%;
}
.sb-row.ModerateResult .sb-col {
  background: #f7b912;
}
.sb-row.ModerateResult .sbtitle h5 span {
  color: #f7b912;
}
.sb-row.LowResult .sb-col {
  background: #71b644;
}
.sb-row.LowResult .sbtitle h5 span {
  color: #71b644;
}
.sb-row.HighResult .sb-col {
  background: #fe5e41;
}
.sb-row.HighResult .sbtitle h5 span {
  color: #fe5e41;
}
.sb-row.DataResult .sb-col {
  background: #ddd;
}
.sb-row.DataResult .sb-col h4,
.sb-row.DataResult .sb-col h3,
.sb-row.DataResult .sb-col span {
  color: #222;
}
.or-box-icon {
}
.or-box-icon i {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 5px;
  font-size: 20px;
}
/* 
.glace-section .box:nth-child(1) .or-box-icon i {
  color: #e22a44;
  background: #ffe5e8;
}
.glace-section .box:nth-child(2) .or-box-icon i {
  color: #4a9f3a;
  background: #dfffd9;
}
.glace-section .box:nth-child(3) .or-box-icon i {
  color: #fc9f21;
  background: #f7ead8;
}
.glace-section .box:nth-child(4) .or-box-icon i {
  color: #c5192f;
  background: #f5d3d7;
}
.glace-section .box:nth-child(5) .or-box-icon i {
  color: #ff3a21;
  background: #fde6e3;
}
.glace-section .box:nth-child(6) .or-box-icon i {
  color: #a41943;
  background: #fed5e2;
}
.glace-section .box:nth-child(7) .or-box-icon i {
  color: #dd1267;
  background: #fee4ef;
}
.glace-section .box:nth-child(8) .or-box-icon i {
  color: #48763b;
  background: #d4f8ca;
} */

.or-box-1 {
  position: absolute;
  bottom: -12px;
  right: -14px;
  font-size: 67px;
  opacity: 0.1;
  z-index: -1;
  transform: rotate(-44deg);
}

.glace-section .box:nth-child(1) .or-box-1 {
  color: #e22a44;
}
.glace-section .box:nth-child(2) .or-box-1 {
  color: #4a9f3a;
}
.glace-section .box:nth-child(3) .or-box-1 {
  color: #fc9f21;
}
.glace-section .box:nth-child(4) .or-box-1 {
  color: #c5192f;
}
.glace-section .box:nth-child(5) .or-box-1 {
  color: #ff3a21;
}
.glace-section .box:nth-child(6) .or-box-1 {
  color: #a41943;
}
.glace-section .box:nth-child(7) .or-box-1 {
  color: #dd1267;
}
.glace-section .box:nth-child(8) .or-box-1 {
  color: #48763b;
}
.org-group .user-box {
  padding: 20px 35px;
}
.sync {
  border-radius: 100%;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #29a183;
  border: none;
  width: 35px;
  height: 36px;
  color: #fff;
}
.officialgroup {
  width: 25px !important;
  height: 25px !important;
  position: absolute;
  bottom: -8px;
  right: 10px;
}
.journal-Active {
  background: #e1fff7;
  color: #5f9b8c;
  font-weight: 600;
  font-size: 13px;
}
.journal-Delete {
  background: #ffd4d3;
  color: #f46b68;
  font-weight: 600;
  font-size: 13px;
}
.journal-Inactive {
  background: #f4e9cd;
  color: #f7b912;
  font-weight: 600;
  font-size: 13px;
}
.data-notfound-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}
.data-notfound {
}
.data-notfound img {
  width: 60px;
  margin-bottom: 5px;
}
.data-notfound h5 {
}
.mood-btns{
  display: grid;
    grid-template-columns: 32% 32% 32%;
    width: 100%;
    gap: 10px;
    justify-content: center;
}
.mood-btns .btn{
  background: #d8d8d8;
    color: #000;
    padding: 10px;
    border: none;
    box-shadow: none;
}
.mood-btns .btn.selected-btn, .mood-btns .btn:hover{
  box-shadow: none;
    background: #f46b68;
    color: #fff;
}
.time-dash{
  padding-bottom: 10px;
}
.streffie-logo{
  position: absolute;
  right: 10px;
  top: 0;
}
.streffie-logo img{
  width: 125px;
}
.pinicon{
  position: absolute;
  left: 8px;
  font-size: 12px;
  color: #5f9b8c;
}
.d-pragraph{
  padding-bottom: 0px;
}
span.highlight{
  color: #000;
}
/* new css start */
.text-success {
  color: #5f9b8c !important;
}

.spinner-grow {
  width: 1rem;
  height: 1rem;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 330px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  cursor: pointer;
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  /* color: black; */
  border: 0px solid #dfdfdf;
  padding: 0;
  height: auto;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px;
}
.Moderatetop{
  background-color: #f7b912;
}
.ModerateResult {
  background-color: #fffaed;
}
.LowResult { 
  background-color: #c5ddb5;
}
.Lowtop{
  background-color: #71b644;
}
.HighResult { 
  background-color: #f3bfb5;
}
.Hightop{
  background-color: #fe5e41;
}
.Datatop{
  background-color: #ddd;
}
.Datatop h3, .Datatop h4, .Datatop span{
  color: #000;
}
.DataResult { 
  background-color: #f7f7f7;
}
.no-data .nodata-box{
  filter: blur(5px); 
  opacity: 0.7; 
  pointer-events: none; 
}
.nodata-box1{
  position: relative;
}
.nodata-box2{
  width: 100%;
    position: absolute;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: anchor-center;
    z-index: 3;
    font-size: 20px;
    color: #222;
}
.sb-bottom-2{
  padding: 10px 10px;
  border-radius: 0px 0px 10px 10px;
}
/* Style the back side */
.flip-card-back {
  /* background-color: #d7eee7; */
  color: #000000;
  padding: 0;
  height: auto;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px;
  border: 0px solid #dfdfdf;
  transform: rotateY(180deg);
}

.flip-card-back h3 {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  padding: 17px;
  margin-top: -20px;
  width: 105%;
  margin-left: -6px;
  border-radius: 5px;
}

.flip-card-back ul {
  margin-top: 0px;
  padding: 0px;
}

.flip-card-back ul li {
  margin: 10px;
  background: white;
  border-radius: 4px;
  padding: 12px 12px;
  display: flex;
  justify-content: space-between;
}
.Moderateul{
  border: 1px solid #FFEDBB;
}
.Lowul{
  border: 1px solid #DEFBCB;
}
.Highul{
  border: 1px solid #FFCEC5;
}
.Dataul{
  border: 1px solid #ddd;
}
.sb-top-title1 h4{
  color: #fff
}
.sb-top-title1.Datatop h4{
  color: #000 !important;
}  

/*  */
.spancol{}
.spancol1{}
.Moderateul .spancol1{
  color: #f7b912;
}
.Lowul .spancol1{
  color: #71B644;
}
.Highul .spancol1{
  color: #FE5E41;
}
.Dataul .spancol1{
  color: #ddd;
}

/* Active user */
.ag-courses_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 25px 0 0px;
}

.ag-courses_item {
  -ms-flex-preferred-size: calc(33.33333% - 30px);
  flex-basis: calc(33.33333% - 30px);
  margin: 0 15px 30px;
  overflow: hidden;
  border-radius: 15px;
}

.ag-courses-item_link {
  display: block;
  padding: 20px 20px;
  background-color: #d4e9e3;

  overflow: hidden;

  position: relative;
}

.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #FFF;
}

.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}

.ag-courses-item_title {
  margin: 0 0 25px;

  overflow: hidden;
  font-size: 18px;
  color: #000;

  z-index: 2;
  position: relative;
}

.ag-courses-item_date-box {
  font-size: 14px;
  color: #FFF;

  z-index: 2;
  position: relative;
}

.ag-courses-item_date {
  font-weight: bold;
  color: #5f9b8c;

  -webkit-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease
}

.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #f9b234;

  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;

  border-radius: 50%;

  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
  background-color: #c1b4cf;
}

.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
  background-color: #a7d3a6;
}

.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
  background-color: #7ba4db;
}

.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
  background-color: #d0ae7e;
}

.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
  background-color: #ffb0a7;
}

.ag-courses_item:nth-child(7n) .ag-courses-item_bg {
  background-color: #ea9ab2;
}

.ag-courses_item:nth-child(8n) .ag-courses-item_bg {
  background-color: #7bcdd9;
}

.menuright-toggle{
  font-size: 24px;
  cursor: pointer;
}
.menuright-toggle i{}
.sidebar-box.sidebar-open, .sidebar-box.sidebar-open .sidebar_logo{
  width: 60px;
  transition: 0.5s;
}
.sidebar-box.sidebar-open .navtext, .sidebar-box.sidebar-open .has-arrow:after{
  transition: 0.5s;
  display: none;
}
.sidebar-box.sidebar-open .sidebar-middle .dropdowm_menu{
  position: absolute;
  width: 200px;
  z-index: 99999;
  left: 60px;
  top: 0px;
}
.sidebar-box.sidebar-open .sidebar-middle {
  overflow: inherit;
}
.sidebar-box.sidebar-open .logo-abbr{
  width: 45px;
  height: 45px;
  border-radius: 100%;
  object-fit: cover;
  /* transition: 0.3s; */
}
.logo-abbr, .content_body, .content_body, .sidebar-box{
  /* transition:  0.3s; */
}
.mainopencontent{margin-inline-start: 55px;}
.mainopenmenu{
   position: fixed;
  width: calc(100% - 50px);  
  margin-left: 50px;
  padding-inline-start: 30px !important; 
  /* transition:  0.3s; */
}
@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% - 30px);
    flex-basis: calc(50% - 30px);
  }

  .ag-courses-item_title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }

}

@media only screen and (max-width: 639px) {
  .ag-courses_item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }

  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;

    font-size: 24px;
  }

  .ag-courses-item_link {
    padding: 22px 40px;
  }

  .ag-courses-item_date-box {
    font-size: 16px;
  }
}
@media (max-width: 1400px) {
  .pp-team-content {
    padding: 10px 9px;
    margin-bottom: 20px;
  }
  .pp-team-content p {
    font-size: 11px;
  }
  .user-box-left p {
    font-size: 11px !important;
  }
}
.blurnodata{
  background: transparent !important;
  border: none !important;
  max-width: 80% !important;
  margin: auto !important; }

.graph-blur{
opacity: 1 !important;
  filter: blur(3x) !important;
  -webkit-filter: blur(3px) !important;
}
.stress-r1{
position: absolute !important;
  z-index: 2 !important;
  top: 45% !important;
  transform: translate(0, -45%) !important;}