body {
  background-color: #e9eaec;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

html,
body {
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 0.5rem 0 1.6rem;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #666;
}

hr {
  border-top: 1px solid #aaa;
}




/* Start of Component Styles */
.title-badge {
  font-size: 0.8rem;
  padding: 4px 8px;
  color: #666;
  text-align: center;
  width: auto;
  display: inline;
  margin-right: 24px;
  border-radius: 8px;
}

.blog-article-badge {
  font-size: 0.8rem;
  padding: 4px 8px;
  color: #666;
  text-align: center;
  width: auto;
  display: inline-block;
  margin-right: 24px;
  border-radius: 50px;
}

.outline-button,
.outline-button-lg,
.outline-button-sm {
  border: 2px solid #333;
  border-radius: 50px;
  padding: 8px 16px;
  width: fit-content;
  margin: 24px auto 0;
  display: block;
}

.outline-button-lg {
  padding: 16px 48px;
}

.outline-button-sm {
  padding: 4px 16px;
  display: inline-block;
  margin: 0 0 0 6px;
}

.outline-button:hover,
.outline-button-lg:hover {
  border-color: #999;
}

.outline-button-edu {
  display: inline-block;
  margin-bottom: 16px;
}

.outline-button i {
  margin-left: 8px;
}

.button-container {
  display: flex;
}

.button-container-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.quick-link {
  border: 2px solid #18b588;
  border-radius: 8px;
  padding: 8px 16px;
  margin: 0 0 24px;
  text-align: center;
  transition: transform 334ms linear 79ms;
  display: flex;
  justify-content: space-between;
}

.quick-link:hover {
  color: #fff;
  background-color: #18b588;
  transform: translate(0px, 0px) scale(0.9, 1);
}

.quick-link-admin {
  border: 2px solid #f58f45;
  border-radius: 8px;
  padding: 8px 16px;
  margin: 0 0 24px;
  text-align: center;
  transition: transform 334ms linear 79ms;
  display: flex;
  justify-content: space-between;
}

.quick-link-admin:hover {
  color: #fff;
  background-color: #f58f45;
  transform: translate(0px, 0px) scale(0.9, 1);
}

.alert {
  margin-bottom: 32px;
}

.alert p {
  font-size: 1rem;
}

/* Start of main wrap styles */
.all-bg,
.footer-bg,
.all-bg-nm,
.answer-section {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  border: 1px solid #f4f4f4;
}

.all-bg-nm {
  height: auto;
}

.dash-heading {
  text-align: center;
}

.admin-score-container {
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.admin-score-container p {
  color: #666;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.recommendation-list ul {
  margin: auto;
}

.recommendation-list li {
  margin-bottom: 16px;
}

/* Start of main admin dashboard styles */
.score-circle,
.score-circle-results {
  background-color: #fbf1e2;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin: 0 0 24px;
  font-size: 3.4rem;
  min-height: 220px;

}

.score-circle-results {
  margin: 0 auto 24px;
  max-width: 450px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* background: none; */
  min-height: 220px;
}

.score-circle strong {
  font-weight: normal;
  margin-top: -150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.score-circle-outer {
  border-radius: 50%;
  border: 6px solid #ddd;
  height: 200px;
  width: 200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.well-hub-bg,
.sus-hub-bg,
.edi-hub-bg,
.comm-hub-bg,
.score-hub-bg {
  padding: 32px;
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.1) 0%,
      rgba(64, 22, 80, 0.1) 100%),
    url("../img/wellnesshub.jpg");
  background-size: cover;
  border-radius: 12px;
  margin-bottom: 32px;
  background-position: right;
  height: 220px;
}

.sus-hub-bg {
  background: rgb(7, 226, 212);
  background: linear-gradient(355deg,
      rgba(32, 181, 212172, 0.1) 0%,
      rgba(18, 54, 51, 0.1) 100%),
    url("../img/community_hub.png");
  background-size: cover;
  background-position: center;
}

.edi-hub-bg {
  background: rgb(40, 158, 195);
  background: linear-gradient(185deg,
      rgba(40, 158, 195, 0.1) 0%,
      rgba(14, 50, 61, 0.1) 100%),
    url("../img/equility_hub.png");
  background-size: cover;
}

.comm-hub-bg {
  background: rgb(40, 158, 195);
  background: linear-gradient(185deg,
      rgba(40, 158, 195, 0.1) 0%,
      rgba(14, 50, 61, 0.1) 100%),
    url("../img/comm-hub.png");
  background-size: cover;
  background-position: center;
}

.score-hub-bg {
  background: rgb(40, 158, 195);
  background: linear-gradient(185deg,
      rgba(40, 158, 195, 0.1) 0%,
      rgba(14, 50, 61, 0) 100%),
    url("../img/score-bg.jpg");
  background-size: cover;
  background-position: center;
}

.vol-img {
  border-radius: 12px;
  background: url("../img/volunteer.png");
  background-size: contain;
  background-position: bottom right;
  min-height: 300px;
  background-repeat: no-repeat;
}

.hub-text p {
  text-align: center;
  margin-top: 8px;

}


.score-text {
  text-align: center;
}

.score-text-user {
  text-align: center;
  font-weight: 600;
}

.video-thumb p {
  margin-top: 19px;
  font-size: 0.95rem;
  text-align: center;
}

.well-score-bg,
.sus-score-bg,
.edi-score-bg {
  padding: 32px;
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.7) 0%,
      rgba(64, 22, 80, 0.4) 100%),
    url("../img/employee.jpg");
  background-size: cover;
  border-radius: 8px;
  margin-bottom: 32px;
}

.sus-score-bg {
  background: rgb(7, 226, 212);
  background: linear-gradient(355deg,
      rgba(32, 181, 212172, 0.8) 0%,
      rgba(18, 54, 51, 0.6) 100%),
    url("../img/sustainability.jpg");
  background-size: cover;
}

.edi-score-bg {
  background: rgb(40, 158, 195);
  background: linear-gradient(185deg,
      rgba(40, 158, 195, 0.3) 0%,
      rgba(14, 50, 61, 0.9) 100%),
    url("../img/diversitya.jpg");
  background-size: cover;
}

.pre-score img {
  max-height: 300px;
}

.pre-score ul {
  color: #fff;
  --icon-space: 1.3em;
  list-style: none;
  padding: 0;
}

.pre-score li {
  margin-bottom: 24px;
  padding-left: var(--icon-space);
}

.pre-score li:before {
  content: "\f00c";
  /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc(var(--icon-space) * -1);
  width: var(--icon-space);
}

.refer {
  width: 100%;
  background-color: #fff;
  height: 60px;
  box-shadow: 2px 2px 4px #e4e4e4;
  border-radius: 8px;
  margin-bottom: 32px;
}

.refer-icon {
  width: 60px;
  display: block;
  float: left;
  color: #fff;
  height: 60px;
  text-align: center;
  border-radius: 5px 0 0 5px;
}

.refer-text {
  line-height: 20px;
  padding-left: 10px;
  font-size: 0.9rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.confirmation-icon {
  font-size: 5rem;
  color: #18b588;
}

/* Resources Styles */
.resource-item {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.resource-item:hover {
  background-color: #f4f4f4;
}

.resource-item-btn {
  display: inline-block;
  margin-right: auto;
  margin: 8px 0 8px 32px;
  padding: 2px 16px;
}

/* Community / Fundraise / Volunteering / awareness day styles */

.volunteer-bg,
.fund-bg,
.join-comm-bg {
  padding: 32px;
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.6) 0%,
      rgba(64, 22, 80, 0.2) 100%),
    url("../img/vol-bg.jpg");
  background-size: cover;
  border-radius: 8px;
  margin-bottom: 32px;
  min-height: 500px;
}

.fund-bg {
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.2) 0%,
      rgba(64, 22, 80, 0.2) 100%),
    url("../img/fundraise.png");
  background-size: cover;
}

.calendar-days-bg {
  background: rgb(230, 100, 217);
  background: linear-gradient(185deg,
      rgba(230, 100, 217, 1) 0%,
      rgba(176, 54, 165, 1) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.money-bg {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 0.3) 0%,
      rgba(84, 57, 119, 0.8) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.volunteer-bg {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 2px 2px #555;
  align-items: center;
}

.volunteering-top,
.fundraising-top {
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.2) 0%,
      rgba(64, 22, 80, 0.2) 100%),
    url("../img/top.jpg");
  background-size: cover;
  background-position: center center;
  padding: 80px 48px;
  border-radius: 8px 8px 0 0;
}

.fundraising-top {
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.2) 0%,
      rgba(64, 22, 80, 0.2) 100%),
    url("../img/fundraising.jpg");
  background-size: cover;
}

.fund-num {
  background: #C25396;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 8px 24px;
  font-size: 3rem;
  text-transform: uppercase;
  transform: rotate(-6deg);
  margin: 32px 0 24px;
}

.volunteering-top h2.first,
.fundraising-top h2.first {
  transform: rotate(356deg);
  margin-left: 21px;
  margin-bottom: 6px;
}

.volunteering-top h2,
.fundraising-top h2 {
  background: #CA55A6;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 8px 24px;
  font-size: 2.4rem;
  margin-bottom: 16px;
  box-shadow: 3px 3px #3a3a3a;
}

.volunteering-top .contents,
.fundraising-top .contents {
  background: #ca55a6cf;
  color: #fff;
  padding: 16px;
}

a.website-link {
  color: #C25396;
  margin-top: 32px;
  display: block;
}

.dotted-border .num {
  background: #CA55A6;
  color: #fff;
  padding: 10px;
  transform: rotate(356deg);
  width: 80px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.reasons {
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.2) 0%,
      rgba(64, 22, 80, 0.2) 100%),
    url("../img/reasons.png");
  background-size: cover;
  background-position: center center;
  padding: 24px;
  margin-bottom: 32px;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #fff;
  text-shadow: 2px 2px black;
  border-radius: 8px;
}

.dotted-border .text {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 100px);
  padding-left: 30px;
}

.calendar-days-bg i {
  font-size: 6vw;
  color: #fff;
  text-align: center;
}

.calendar-days-bg h4 {
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  font-weight: 400;
}

.community-post-item {
  border: 1px solid #f4f4f4;
  width: 100%;
  margin: 0 0 32px;
  box-shadow: 2px 2px 4px #e4e4e4;
  border-radius: 8px;
  padding: 0 16px;
}

img.rounded-circle.feed-avatar {
  max-width: 60px;
  margin: 16px 16px 16px 0;
}

/* Tree Section Styles */
.tree-bg {
  padding: 32px;
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.7) 0%,
      rgba(64, 22, 80, 0.4) 100%),
    url("../img/tree-section-bg.jpg");
  background-size: cover;
  border-radius: 8px;
  margin-bottom: 32px;
}

.tree-icon {
  font-size: 3rem;
  text-align: center;
}

.tree-number {
  font-size: 3.4vw;
  text-align: center;
}

.tree-text {
  font-size: 1rem;
  text-align: center;
}

/* Carbon & HR Section Styles & A-Z Support & XO */
.carbon-background {
  background: rgb(25, 151, 143);
  background: linear-gradient(185deg,
      rgba(25, 151, 143, 0.6) 0%,
      rgba(8, 50, 47, 0.7) 100%),
    url("../img/co2-bg.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.carbon-background h4,
.carbon-background p {
  text-shadow: 2px 2px #000;
  margin: 24px auto;
}

.carbon-background button {
  margin: 0 auto;
  display: block;
}

.hr-list p {
  background-color: #f5eeff;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  width: fit-content;
  transition: transform 662ms ease-in 88ms;
  cursor: default;
}

.hr-list p:hover {
  transform: translate(16px, 0px);
}

.hr-img {
  padding: 16px 32px;
  max-height: 200px;
  margin-bottom: 32px;
}

.arrow-button,
.arrow-button-white {
  display: flex;
  color: #333;
  background-color: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  border-color: #926cc2;
  transition: all 0.3s ease;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  font-size: 1.2rem;
  border: 2px solid #926cc2;
}

.arrow-button-white {
  background-color: transparent;
}

.arrow-button>.arrow,
.arrow-button-white>.arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid #926cc2;
  border-bottom: 2px solid #926cc2;
  position: relative;
  transform: rotate(-45deg);
  margin: 0 6px;
  transition: all 0.3s ease;
}

.arrow-button-white>.arrow {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.arrow-button>.arrow::before,
.arrow-button-white>.arrow::before {
  display: block;
  background-color: currentColor;
  width: 3px;
  transform-origin: bottom right;
  height: 2px;
  position: absolute;
  opacity: 0;
  bottom: calc(-2px / 2);
  transform: rotate(45deg);
  transition: all 0.3s ease;
  content: "";
  right: 0;
}

.arrow-button:hover>.arrow,
.arrow-button-white:hover>.arrow {
  transform: rotate(-45deg) translate(4px, 4px);
  border-color: #926cc2;
}

.arrow-button-white:hover>.arrow {
  border-color: #fff;
}

.arrow-button:hover>.arrow::before,
.arrow-button-white:hover>.arrow::before {
  opacity: 1;
  width: 8px;
}

.arrow-button:hover,
.arrow-button-white:hover {
  background-color: #fff;
  color: #926cc2;
}

.arrow-button-white:hover {
  background-color: transparent;
  color: #ffffff;
}

.az-bg {
  background: url("../img/a-z.jpg");
  background-size: cover;
  min-height: 400px;
}

.support-box {
  border: 2px dashed #e4e4e4;
  padding: 32px;
  box-shadow: 2px 2px #f4f4f4;
}

.support-box h5 {
  text-decoration: underline;
}

.support-box-single {
  margin-bottom: 16px;
}

.support-box i {
  color: #18b588;
}

a.support-single-link {
  color: #926cc2;
}

.insurance-container {
  height: 250px;
  background-color: #926cc2;
  position: relative;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 32px;
}

.insurance-container h4 {
  color: #fff;
  font-size: 1.8rem;
  margin: 0;
}

.insurance-container p {
  color: #fff;
}

.insurance-icon {
  color: #926cc2;
  font-size: 3rem;
}


.insuranceIcon i {
  font-size: 3.6rem;
  color: #fff;
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.aff-bg {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 0.2) 0%,
      rgba(84, 57, 119, 0.2) 100%),
    url("../img/aff-bg.jpg");
  background-size: cover;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.yoga-bg {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 0.2) 0%,
      rgba(84, 57, 119, 0.2) 100%),
    url("../img/yoga-bg.jpg");
  background-size: cover;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

p.aff-text {
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

.game-text {
  background-color: #fff;
  padding: 8px 32px;
  border-radius: 8px;
  color: #333;
  font-size: 2rem;
  text-align: center;
  opacity: 0.85;
  transition: transform 500ms ease-out;

}

.game-text:hover {
  transform: translate(0px, 0px) scale(1.1, 1.1);
}

p.affirmation-header {
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  opacity: 0.9;
}

.game-bg {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg, rgba(137, 100, 182, 0.2) 0%, rgba(84, 57, 119, 0.2) 100%), url(../img/games.jpg);
  background-size: cover;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-position: top center;
}

.planner-bg {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg, rgba(137, 100, 182, 0.2) 0%, rgba(84, 57, 119, 0.2) 100%), url(../img/planner.jpeg);
  background-size: cover;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-position: top center;
  color: #fff;
}

.planner-bg p {
  color: #fff;
}

.planner-bg h4 {
  color: #fff;
}

.pinkcontent {
  height: 400px;
  padding: 70px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: transform 500ms ease-out;
}

.pinkcontent:hover {
  transform: translate(0px, 0px) scale(1.3, 1.3);
}

marker.azmark,
marker.azmarkf {
  display: block;
  width: fit-content;
  padding: 5px 40px;
  background-color: #926cc2;
  margin: 2px auto;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  box-shadow: 2px 2px 0px 0px rgb(0 0 0 / 28%);
  transform: rotate(4deg);
}

marker.azmarkf {
  background-color: #bd4db2;
}

marker.azmark.mm2,
marker.azmarkf.mm2 {
  transform: rotate(-5deg);
}

.grad-bg {
  background: rgb(29, 180, 170);
  background: linear-gradient(117deg,
      rgba(29, 180, 170, 1) 0%,
      rgba(25, 103, 98, 1) 100%);
}

.guide {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.guide p {
  font-size: 1.6rem;
}

.guide-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

p.xo-text {
  background-color: #f3ddf1;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  box-shadow: 2px 2px 4px #e4e4e4;
  text-align: center;
  margin-top: 16px;
}

.xo-img {
  width: 100%;
}

.student-card-black {
  background: url('../img/student-card-bg.jpg') no-repeat;
  background-size: cover;
  border-radius: 16px;
  padding: 32px;
}

.st-card-logo {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.st-card-logo img {
  max-width: 40%;
  margin-bottom: 48px;
}

.st-card-logo img.st-profile {
  border-radius: 90px;
  display: block;
  margin-left: 50px;
}

.st-card-number {
  color: #ffffff;
  font-size: 35px;
  letter-spacing: 2px;
}

.st-card-footer {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 1, 2rem;
  letter-spacing: 2px;
  font-weight: 400;
}

.st-card-footer h4 {
  margin-bottom: 0;
  line-height: 1;
  font-size: 0.9rem;
  margin-top: 32px;
}

ul.xo-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xo-list li {
  margin-bottom: 16px;
}

.xo-list li i {
  margin-right: 8px;
  color: #C25396;
  font-size: 1.4rem;
}

/* Start of Les Mills Styles & BMI Styles */
.les-background {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 0.3) 0%,
      rgba(84, 57, 119, 0.3) 100%),
    url("../img/lesm.jpg");
  background-size: cover;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}


.les-background p {
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 24px;
  text-shadow: 2px 2px #333;
  letter-spacing: 2px;
}

.bmi-background {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 0.5) 0%,
      rgba(84, 57, 119, 0.5) 100%),
    url("../img/bmi-bg.jpg");
  background-size: cover;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}

.bmi-background h4 {
  font-size: 2rem;
  text-shadow: -3px -3px 0 #926cc2, 3px -3px 0 #926cc2, -3px 3px 0 #926cc2,
    3px 4px 0 #926cc2;
}

.bmi-background p {
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 24px;
  text-shadow: 2px 2px #333;
  letter-spacing: 2px;
}

.app-background {
  background: rgb(137, 100, 182);
  background: linear-gradient(167deg,
      rgba(137, 100, 182, 1) 0%,
      rgba(84, 57, 119, 1) 100%);
  background-size: cover;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

.app-background p {
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 24px;
  text-shadow: 2px 2px #333;
  letter-spacing: 2px;
}

/* Blog card styles */
.blog-card {
  padding: 24px;
  margin-bottom: 32px;
  border-radius: 8px;
  border: none;
  transition: transform 300ms ease-out 152ms;
}

.blog-card:hover {
  transform: translate(0px, 0px) scale(1.1, 1.1);
}

.blog-card-image {
  border-radius: 8px;
  margin-bottom: 24px;
  position: relative;
}

.blog-card-text {
  font-size: 0.8rem;
  color: #666;
  margin: 0 0 8px;
}

/* Education Section Styles */
.edu-bg {
  border: 2px dashed #e4e4e4;
  box-shadow: 2px 2px 4px #e4e4e4;
  padding: 32px;
  height: 100%;
}

.edu-stats p {
  font-weight: 600;
}

.edu-stats {
  border-radius: 50%;
  border: 4px solid #f58f45;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 32px;
}

.edu-card {
  text-align: center;
  padding: 24px;
  border: 1px solid #f4f4f4;
  box-shadow: 2px 2px 4px #e4e4e4;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.edu-card img {
  border-radius: 8px;
  max-width: 100%;
  margin-bottom: 24px;
}

.edu-card p {
  font-size: 1.2rem;
}

.edu-categories {
  margin-top: 32px;
}

.edu-stats-wrap {
  display: flex;
}

/* Community & News Posts section */
.comm-flex-container {
  margin: auto;
}

.community-promo-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.community-promo-text {
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.community-post-image img {
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
}

.community-post-info,
.news-post-info {
  color: #666;
  font-size: 0.8rem;
}

.community-post-bg {
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 2px 2px 4px #e4e4e4;
}

/* Start of Footer Styles */
.footer-icons {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin-right: 24px;
}

.footer-logo {
  max-height: 40px;
}

.footer-icon-bg {
  border-radius: 50%;
  background-color: #19978f;
  padding: 12px 8px 8px;
  height: 45px;
  width: 45px;
  margin-left: 16px;
  display: flex;
  justify-content: center;
}

.footer-icon-bg i {
  font-size: 1.4rem;
  color: #fff;
}

.footer-links {
  font-size: 0.9rem;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-sub {
  text-align: right;
  font-size: 0.8rem;
  color: #666;
}

/* Start of Admin USer Styles */
.total-users {
  border: 3px solid #18b588;
  margin: 16px auto;
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 8px;
  padding: 16px;
}

.home-users {
  height: calc(100% - 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  margin: 8px;
}

.thankyou {
  font-family: "Handlee", cursive;
  color: #fff;
  text-align: center;
  font-size: 3rem;
}

.users-gradient {
  background: rgb(24, 181, 136);
  background: linear-gradient(176deg, rgba(24, 181, 136, 1) 0%, rgba(5, 66, 62, 1) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin: 0 0 30px;
  padding: 16px;
  border-radius: 8px;
  font-size: 1.2rem;
}

.accordion-button:not(.collapsed) {
  color: #333;
  background-color: #f9d3b1;
  border-color: #f58f45;
}

/* Questionnaire Styles */
.q-form .form-group input {
  height: 48px;
  max-width: 560px;
  margin-bottom: 32px;
  padding: 8px;
}

.q-form .form-group label {
  color: #333;
  margin: 0 0 8px;
  padding: 0;
  font-size: 1rem;
}

.q-dash thead tr {
  border-bottom: 3px solid #ccc;
}

/* Colour styles for pillar sections */

.wellbeing {
  border-bottom: 3px solid #926cc2;
}

.sus-bg {
  background-color: #def4ea;
}

.sus-bg-dk {
  background-color: #18b588;
}

.edi-bg {
  background-color: #d4f1fa;
}

.edi-bg-dk {
  background-color: #37b6de;
}

.well-bg {
  background-color: #f5eeff;
}

.well-bg-dk {
  background-color: #926cc2;
}

.admin-bg {
  background-color: #fbf1e2;
}

.admin-bg-dk {
  background-color: #f58f45;
}

.grey-bg {
  background-color: #f9f9f9;
  border: 1px solid #f9f9f9;
}

.grey-bg:hover {
  background-color: #fff;
  border: 1px solid #e4e4e4;
}

.comm-bg {
  background-color: #f3ddf1;
}

.comm-bg-dk {
  background-color: #cb7cc3;
}

.sus-border {
  border-color: #19978f;
}

.sus-border:hover {
  border-color: #adddd3;
}

.edi-border {
  border-color: #37b6de;
}

.edi-border:hover {
  border-color: #a3dff1;
}

.well-border {
  border-color: #926cc2;
}

.well-border:hover {
  border-color: #d4c3eb;
}

.comm-border {
  border-color: #bd4db2;
}

.comm-border:hover {
  border-color: #cb7cc3;
}

.admin-border {
  border-color: #f58f45;
}

.admin-border:hover {
  border-color: #f9d3b1;
}

.dotted-border {
  border: 2px dashed #e4e4e4;
}

.white-border {
  border-color: #ffffff;
}

.white-border:hover {
  border-color: #f4f4f4;
}

.sus-text {
  color: #19978f;
}

.edi-text {
  color: #37b6de;
}

.comm-text {
  color: #cb7cc3;
}

.well-text {
  color: #926cc2;
}

.admin-text {
  color: #f58f45;
}

.white {
  color: #ffffff;
}

.white:hover {
  color: #e4e4e4;
}

.opacity8 {
  opacity: 0.8;
}

.opacity8:hover {
  opacity: 0.9;
}

.red {
  color: red;
}

/* Badge code */
.badge-margin {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

p.badge-heading {
  font-size: 0.96rem;
}

code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 2em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #272822;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.badgeSVC {
  background-color: #18b588;
  font-family: "Source Sans Pro", sans-serif;
  color: #fff;
  padding: 15px 18px;
  min-width: 240px;
  background-repeat: no-repeat;
  background-position: -570px -570px, 0 0;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top left,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 37%,
      rgba(255, 255, 255, 0.8) 45%,
      rgba(255, 255, 255, 0) 50%);
  background-image: -moz-linear-gradient(0 0,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 37%,
      rgba(255, 255, 255, 0.8) 45%,
      rgba(255, 255, 255, 0) 50%);
  background-image: -o-linear-gradient(0 0,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 37%,
      rgba(255, 255, 255, 0.8) 45%,
      rgba(255, 255, 255, 0) 50%);
  background-image: linear-gradient(0 0,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 37%,
      rgba(255, 255, 255, 0.8) 45%,
      rgba(255, 255, 255, 0) 50%);
  -moz-background-size: 250% 250%, 100% 100%;
  background-size: 250% 250%, 100% 100%;
  -webkit-transition: background-position 0s ease;
  -moz-transition: background-position 0s ease;
  -o-transition: background-position 0s ease;
  transition: background-position 0s ease;
  border-radius: 8px;
}

.badgeSVC .logo {
  display: inline-block;
  width: 60px;
  vertical-align: middle;
}

.badgeSVC .content {
  display: inline-block !important;
  width: calc(100% - 78px) !important;
  padding-left: 14px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 300;
  vertical-align: middle;
}

.badgeSVC .content span {
  font-weight: bold;
  display: block;
  font-size: 17px;
  text-transform: none;
  font-family: "Poppins", sans-serif;
  margin-bottom: 5px;
  margin-top: 3px;
  line-height: 21px;
}

.badgeSVC .content p {
  text-transform: none;
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 0;
}

/* Side Bar Styles */
.sidebar {
  position: fixed;
  top: 30px;
  left: 30px;
  width: 280px;
  background: #fff;
  z-index: 100;
  transition: all 0.5s ease;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #e4e4e4;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar.close {
  width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-start;
  height: 100%;
}

.sidebar .nav-links {
  padding: 0;
  overflow: auto;
}

.sidebar.close .nav-links {
  overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
  margin-bottom: 8px;
}

.sidebar .nav-links li:hover {
  background: #f4f4f4;
  border-radius: 8px;
}

.sidebar .nav-links li .icon-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar.close .nav-links li .icon-link {
  display: block;
}

.sidebar .nav-links li i {
  height: 50px;
  min-width: 32px;
  text-align: center;
  line-height: 50px;
  color: #333;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}

.sidebar.close .nav-links i.arrow {
  display: none;
}

.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-links li a .link_name {
  color: #333;
  transition: all 0.4s ease;
}

.sidebar.close .nav-links li a .link_name {
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
  padding: 8px 8px 16px 56px;
  margin-top: -10px;
  background: #ffffff;
  display: none;
}

.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}

.sidebar .nav-links li .sub-menu a {
  color: #333;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.sidebar.close .nav-links li .sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity: 1;
  display: block;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.close~.main-wrap {
  margin-left: 150px;
}

@media (max-width: 420px) {
  .sidebar.close .nav-links li .sub-menu {
    display: none;
  }
}

.side-divider {
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 16px;
}

.sidebar.close .side-divider {
  display: none;
}

.side-hr {
  background-color: #19978f;
  color: #fff;
  height: 45px;
  padding: 0 20px;
  text-align: center;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 32px;
}

.sidebar.close .side-hr-collapsed {
  background-color: #19978f;
  color: #fff;
  height: 45px;
  padding: 0 20px;
  text-align: center;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 32px;
  font-size: 1.2rem;
}

.sidebar.close .side-hr {
  display: none;
}

.side-hr-collapsed {
  display: none;
}

.side-user-card {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin: 16px 0 32px;
  border: 3px solid #f4f4f4;
}

.sidebar.close .side-user-card {
  display: none;
}

.side-user-card-collapsed {
  display: none;
}

.sidebar.close .side-user-card-collapsed {
  display: block;
  margin: 0 auto;
}

.side-card-lower {
  background-color: #f4f4f4;
  border-radius: 0 0 6px 6px;
  padding: 15px;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  font-weight: 600;
}

.side-card-lower img {
  margin-top: 16px;
}

.side-card-img {
  padding: 16px;
}

.sidebar.close .side-card-img {
  padding: 0 0 32px;
}

.side-card-name {
  padding: 16px 16px 0 16px;
}

.side-card-edit {
  font-size: 0.8rem;
  padding: 0 15px;
  text-decoration: underline;
  color: #999;
}

.side-sign-out {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

.sidebar.close .side-sign-out i {
  font-size: 1.3rem;
}

.sidebar.close .side-sign-out span {
  display: none;
}

.sidebar.close .side-logo-collapse {
  display: block;
}

.sidebar.close .side-logo-collapse img {
  max-height: 40px;
  width: 40px;
  margin: 0 auto 32px;
}

.side-logo-collapse {
  display: none;
}

.side-logo {
  max-width: 160px;
  margin-bottom: 48px;
}

.sidebar.close .side-logo {
  display: none;
}

.side-sub-heading {
  font-weight: 500;
  margin-top: 32px;
}

.sidebar.close .side-sub-heading {
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
}

.bx:before {
  background-color: #e4e4e4;
  padding: 8px;
  border-radius: 8px;
  color: #18b588;
  margin-right: 4px;
}

icon-lin a i {
  color: #18b588;
}

i.fa-solid.fa-bars.bx-menu {
  margin: 0 32px 0 16px;
}

.scrollbox {
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.scrollbox-inner {
  overflow: scroll;
}

/* Tab Styles */

main {
  padding: 50px;
  margin: 0 auto 32px;
  /* background: #fff; */
}

main a.btn.outline-button-lg {
  margin: 16px 0;
}

section {
  display: none;
  padding: 48px 0 32px;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 0px 3px 0;
  font-weight: 600;
  text-align: center;
  color: #333;
  border: 1px solid transparent;
}

/* label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*="1"]:before {
  content: "\f07b";
}

label[for*="2"]:before {
  content: "\2b";
}

label[for*="3"]:before {
  content: "\f013";
}

label[for*="4"]:before {
  content: "\f044";
}

label[for*="5"]:before {
  content: "\f15b";
}

label[for*="6"]:before {
  content: "\f0f3";
} */

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked+label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid #18b588;
  border-bottom: 1px solid #fff;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7,
#tab8:checked~#content8,
#tab9:checked~#content9,
#tab10:checked~#content10,
#tab11:checked~#content11 {
  display: block;
}

@media screen and (max-width: 1300px) {
  .sq label {
    font-size: 0;
  }

  .sq label i {
    font-size: 16px;
  }

  .sq label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 1300px) {
  .sq label {
    padding: 15px;
  }
}

/*channel log page styles */

.bg-one,
.bg-one~.content span {
  background-color: #18b588;

}

.bg-two,
.bg-two~.content span {
  background-color: #FE6860;

}

.bg-three,
.bg-three~.content span {
  background-color: #23B684;

}

.bg-four,
.bg-four~.content span {
  background-color: #18b588;

}

.bg-five,
.bg-five~.content span {
  background-color: 18b588;

}

.bg-six,
.bg-six~.content span {
  background-color: #C25396;

}

.tabs-box {
  background-color: #fff;
  color: #fff;
  width: 100%x;
  margin: 40px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

.tabs-box .acord {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;


}

.tabs-box .acord label {
  position: relative;
  z-index: 1000;
  display: block;
  padding: 0 0 0 40px;
}

.tabs-box .acord label i {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
}

label.tab-label {
  padding: 16px;
}

.tabs-box .acord label,
.tabs-box .acord label i,
.tabs-box .acord i.fa-chevron-circle-down {
  height: 60px;
  line-height: 60px;
  color: #fff;
}

.tabs-box .acord i.fa-chevron-circle-down {
  position: absolute;
  z-index: 1111;
  top: 0;
  left: 0;
  width: 40px;
  text-align: center;
  -moz-transition: all .2s linear 0s;
  -webkit-transition: all .2s linear 0s;
  transition: all .2s linear 0s;
}

.tabs-box .acord input {
  display: none;
}

.tabs-box .content {
  position: relative;
  overflow: hidden;
  -moz-transition: height 1s linear 0s;
  -webkit-transition: height 1s linear 0s;
  transition: height 1s linear 0s;
  height: 0;
  line-height: 26px;
  color: #333;
  text-align: left;
  direction: ltr
}

.tabs-box .content span.square {
  display: block;
  position: absolute;
  left: 10px;
  top: -17px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}

.tabs-box input[type="checkbox"]:checked~div.content {
  height: auto;
  padding: 40px;
}

.tabs-box input[type="checkbox"]:checked~i.fa-chevron-circle-down {
  transform: rotate(180deg);
}

.acord ul li {
  margin-bottom: 20px;
}

/* Article styles */

.all-bg-article {
  background-color: #fff;
  box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
  border-radius: 6px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  transition: transform 300ms ease-out 152ms;
  border: 1px solid #e4e4e4;
  padding: 24px;
}

.all-bg-article:hover {
  transform: translate(0px, 0px) scale(1.1, 1.1);
}

.all-bg-article img {
  border-radius: 12px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.all-bg-article .article-body {
  padding: 32px 16px;
  text-align: center;
}

.article-body-sm {
  padding: 16px 8px;
  text-align: center;
}

.filter-select {
  width: 300px;
  height: 60px;
  margin-bottom: 32px
}


.article-wrap img {
  width: 100%;
  border-radius: 8px;
  margin: 48px 0;
  max-height: 600px;
  object-fit: cover;
}

.article-wrap h1 {
  font-size: 3rem;
  font-weight: bold;
}

.article-content {
  margin: 0 64px;
}

.article-wrap .date {
  border-bottom: 1px solid #e4e4e4;
  padding: 8px 0;
}

.article-wrap .category {
  background-color: #18b588;
  color: #fff;
  padding: 8px;
  margin: 16px 0;
  border-radius: 8px;
  width: fit-content;

}

.disclaimer-text {
  font-size: 0.9rem;
}


/* Les mills flips */

.flip-card {
  background-color: transparent;
  height: 300px;
  perspective: 1000px;
  margin: 30px 0;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #7f359c;
  color: white;
  transform: rotateY(180deg);
  padding: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.content-height p {
  line-height: 20px;
}

.flip-card-front p {
  color: white;
  font-size: 36px;
}

.flip-card h3 {
  font-size: 1.8vh;
}

.bodypump,
.balance,
.grit,
.combat,
.cxw,
.attack,
.cycling,
.stretch,
.conditioning,
.yoga,
.meditation {
  padding: 53px 30px;
  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/body-pump.jpg');
  background-size: cover;
  background-position: center center;
  margin-left: 0;
  margin-right: 0;
  border-radius: 12px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 30px;
}

.balance {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/balance.jpg');
  background-size: cover;

}

.grit {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/grit.jpg');
  background-size: cover;

}

.combat {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/combat.jpg');
  background-size: cover;

}

.cxw {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/cxw.jpg');
  background-size: cover;

}

.attack {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/attack.jpg');
  background-size: cover;

}

.cycling {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/cycling.jpg');
  background-size: cover;

}

.conditioning {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/kids.jpg');
  background-size: cover;

}

.stretch {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/stretch.jpg');
  background-size: cover;

}

.yoga {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/yoga.jpg');
  background-size: cover;

}

.meditation {

  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/meditation.jpg');
  background-size: cover;

}


.lesm {
  padding: 0;
  background: linear-gradient(0deg, rgba(127, 53, 156, 0.4) 0%, rgba(64, 22, 80, 0.4) 100%), url('https://www.app.socialvaluecompany.com/assets/img/lesm.jpg');
  background-size: cover;
  background-position: center center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-weight: 600;
  margin: 0 0 30px 0;
  flex-direction: column;
}

.les-text {
  background-color: #333;
  width: 100%;
  text-align: center;
  padding: 10px 30px 0;
  opacity: 0.6;
  margin-top: 50px;
}

.les-text p {
  color: #fff;
  opacity: unset;
  font-size: 24px;
  font-weight: 600;
}

.les-link {
  background-color: #111111;
  width: 100%;
  height: 80px;
  text-align: center;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 0 0 6px 6px;
}

.les-link a {

  font-size: 18px;
  font-weight: bold;
  padding: 15px 80px;
  background-color: #7f359c;
  color: #fff;
  border-radius: 50px;
}

/* Log in styles */
.login-wrap {
  background: rgb(35, 124, 118);
  background: linear-gradient(176deg, rgb(41 167 159) 0%, rgb(9 38 34) 100%);
  margin: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-row {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  padding: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  opacity: 0.8;
}

.sign-logo {
  background-color: #e5e8ed;
  border-radius: 100%;
  height: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-shadow: 2px 2px 4px #e4e4e4;
}

.sign-in input {
  height: 60px;
  padding: 8px 16px;
  background-color: #e5e8ed;
  border: 1px solid #f1f1f1;
  color: #555;
  margin: 0;
}

.input-wrapper {
  position: relative;
}

.text-input input {
  border: 1px solid gray;
  border-radius: 6px;
  position: relative;
  margin: 10px;
  line-height: 6ex;
}

.text-input label {
  position: absolute;
  top: -1.2ex;
  z-index: 1;
  left: 2em;
  background-color: white;
  padding: 0 5px;
}


.login-card .form-control {
  border: 1px solid #d5dae2;
  padding: 15px 25px;
  margin-bottom: 20px;
  min-height: 45px;
  font-size: 13px;
  font-weight: normal;
  max-width: 500px;
}

.login-card-img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  /* -o-object-fit: cover;
  object-fit: cover; */

}

.login-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 5px 10px 0 rgba(172, 168, 168, 0.43);
  overflow: hidden;
}

.logo-log {
  max-width: 250px;
  margin: 48px 0;
}

.login-card-description {
  font-size: 1.3rem;
  margin-bottom: 32px;
}

.login-btn {
  background-color: #18b588;
  border-radius: 8px;
  color: #fff;
  width: 50%;
  padding: 24px 0;
  margin: 0 0 16px
}

.login-btn:hover {
  background-color: #333;
  color: #fff;
}

.forgot-password-link {
  font-size: 0.9rem;
  color: #666;
}

.login-card-footer-nav {
  font-size: 0.8rem;
  color: #666;
  margin: 64px 0;
}


/* Education Styles  */

.course_text1 p {
  min-height: 64px;
}

.tab_content {
  margin-bottom: 50px;
}

.filter_btn {
  cursor: pointer;
}

.filter_btn:hover {
  opacity: 0.7;
}

.module {
  border: 3px solid #18b588;
  border-radius: 20px;
  margin-top: 30px;
  padding: 10px 15px;
}

.module h4 {
  font-weight: 700;
  font-size: 20px;
  text-decoration: underline;
}

.module h5 {
  font-weight: 400;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.module p {
  font-weight: 400;
  font-size: 16px;
  min-height: 80px;
}

.module a.visit {
  font-weight: 700;
  float: left;
}

.module a {
  float: right;
  margin-right: 10px;
}

.module-links {
  display: inline-block;
  width: 100%;
}

.splitbox {
  border: 2px dashed #e4e4e4;
  box-shadow: 2px 2px 5px #ccc;
  padding: 10px;
  border-radius: 8px;
  margin: 20px;
  height: 100%;
}

.pcounter2 {
  border: 6px solid #f58f45;
  border-radius: 50%;
  padding: 26px 40px;
}

.counts .count .counter {
  font-weight: 700;
  font-size: 3rem;
  background: -webkit-linear-gradient(#212423, #060606);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 140px;
  min-height: 140px;
}

.counts {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  align-content: center;
}

.tab_content {
  background-image: url('/assets/img/volunteering/s-img2.png');
  padding: unset !important;
  background-size: cover;
  border-radius: 10px;
  width: 29%;
  margin: 20px 13px 13px 20px;
  box-shadow: 2px 2px 10px #e4e4e4;
}

.main-zero {
  padding: 0;
  margin: 0;
  border-radius: 8px;
}

.nav-bg-top {
  background-color: #fff;
  box-shadow: 2px 2px 4px #e4e4e4;
  border-radius: 12px;

}

.side-list i {
  margin-right: 8px;
}

.side-list {
  font-weight: normal;
}

.expanded-menu .accordion-flush [class*="collapsed"] {
  display: block !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #18b588;
}

input:focus+.slider {
  box-shadow: 0 0 1px #18b588;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.subMenu {
  display: none;
}

.company-logo {
  border-radius: 50%;
  border: 1px solid #f4f4f4;
  width: 60px;
  height: 60px;
  background-size: cover;
}

.co-name {
  /* font-weight: 400; */
  font-size: 0.9rem;
  background-color: #f4f4f4;
  border: 1px solid #e4e4e4;
  padding: 8px;
  border-radius: 8px;

}

/* Start course styling */

.course_text1.text-center.course_text_box1 {
  border-radius: 8px;
}

.ed-flex-wrap {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.ed-badge {
  margin: 8px auto;
  width: fit-content;
}

/* Start of Survey styles */

label.container-surv {
  width: 100%;
  border: 2px solid #e4e4e4;
  padding: 15px 25px;
  margin: 0 0 20px;
}


.table-borderless>tbody>tr>td {
  border: none;
}

.greenline {
  height: 20px;
  margin-top: 553px;
}

#customRange1 {
  width: 90%;
}

.wellnes_title {
  font-weight: bold;
  font-size: 20px;
}



.staff_wellness .form-check-input {
  position: unset;
  float: right;
}

.staff_wellness .form-check {
  box-shadow: 0px 5px 32px 0px rgb(0 0 0 / 11%);
  background: #fff;
}

.p-btn_last {

  border: 2px solid #926cc2;
  padding: 15px 69px;
  font-size: 20px;
}


@media only screen and (min-width: 600px) {
  .greenline {
    margin-top: 905px;
  }
}

.progress-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px;
}

.progress {
  height: 9px;
  background: #eeeeee;
  border-radius: 30px;
  box-shadow: none;
  margin-bottom: 30px;
  overflow: visible;
}

.progress .progress-bar {
  border-radius: 30px;
  box-shadow: none;
  position: relative;
}

.progress .progress-bar:after {
  content: "";
  width: 22px;
  height: 23px;
  border-radius: 50%;
  background: #eeee;
  border: 6px solid #926cc2;
  position: absolute;
  bottom: -5px;
  right: 0;
  z-index: 1;
}

.progress-course {
  background: #eeeeee;
  border-radius: 8px;
  box-shadow: none;
  margin-bottom: 30px;
  overflow: visible;
  position: relative;
}

.progress-bar-course {
  border-radius: 30px;
  box-shadow: none;
  position: relative;
  padding-left: 8px;
}

.progress-bar-course {
  overflow: unset !important;
}

.progress-bar {
  overflow: unset !important;
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

.container-surv .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.container-surv {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-surv input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 13px;
  right: 13px;
  height: 24px;
  width: 24px;
  background-color: #926cc2;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */


/* When the radio button is checked, add a blue background */
.container-surv input:checked~.checkmark {
  background-color: #926cc2;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */


/* Style the indicator (dot/circle) */
.container-surv .checkmark:after {
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.container-surv .checkmark:after {
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

label.container {
  box-shadow: 0px 0px 2px 0px;
  padding: 10px;
}

.container-surv input:checked~.checkmark:after {
  display: none;
}

.checkmark:after {
  display: block;
}

button.btn.btn_last2 {
  border: 2px solid #926cc2;
  padding: 15px 69px;
  font-size: 20px;
}

.organisition2 {
  padding: 23px;
  border-radius: unset !important;
}

span.blog-article-badge.well-bg,
span.blog-article-badge.sus-bg,
span.blog-article-badge.edi-bg {
  display: flex;
  width: fit-content;
}

.catfilter_div {
  display: flex;
  margin: 0 0 20px;
}

p.filter_btn {
  margin: 3px 18px;
  padding: 5px 40px;
  border-radius: 16px;
  color: #fff;
}

.progress {
  height: 2.5rem;
  background-color: #f4f4f4;
}

.progress-bar {
  background-color: #18b588;
}

#openNotes {
  color: #fff;
  background-color: #18b588;
  border-color: #18b588;
  border-radius: 0;
  text-transform: uppercase;
  padding: 13px 23px;
  position: fixed;
  bottom: 0;
  right: 20px;
  cursor: pointer;
  z-index: 999999;
}

span.feed-date {
  display: inline-block;
  margin-top: 16px;

}

span.feed-image {
  display: inline-block;

}

.fdate {
  font-size: 0.85rem;
  color: #333;
}

/* 404 page styles */

.img-error {
  max-width: 600px;
  margin: auto;
}

.error-bg {
  display: flex;
  align-content: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  background-color: #fee6d7;
  background: rgb(7, 226, 212);
  background: linear-gradient(355deg,
      rgba(32, 181, 212172, 0.1) 0%,
      rgba(18, 54, 51, 0.1) 100%),
    url("../img/404.jpg");
  background-size: cover;
  background-position: center;
}

.error-button {
  margin-top: 48px;
  color: #fff;
}

.error-bg h1 {
  font-size: 8rem;
  color: #18b588;
  margin: 3rem auto 0;
  text-shadow: 2px 2px #e4e4e4;
}

.error-bg p {
  text-align: center;
  font-size: 2rem;

}

/* Questionnaire styles */

button.btn.previ_btn-btn_last {
  border: 1px solid #52505069;
  padding: 15px 69px;
  font-size: 20px;
}

.q-response {
  font-size: 6rem;
  margin-bottom: 16px;
  color: #18b588;
}

.q-answer {
  margin-bottom: 16px;
  border: 1px solid #e4e4e4;
  padding: 16px;
  border-radius: 8px;
  background-color: #f4f4f4;
}

.q-question {
  background: #fafafa;
  padding: 48px 32px;
  border-radius: 15px;
  margin-bottom: 32px;
  border: 1px solid #e4e4e4;
  height: fit-content;
}

.scores-bg-hub {
  padding: 32px;
  background: linear-gradient(0deg,
      rgba(127, 53, 156, 0.1) 0%,
      rgba(64, 22, 80, 0.1) 100%),
    url("../img/scores-bg.jpg");
  background-size: cover;
  border-radius: 8px;
}

.pre-results {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.locked {
  padding: 8px;
  border-radius: 8px;
  margin-left: 16px;
  display: inline-block;
}

table.table.q-table td {
  padding: 1rem;
}

.formFooter.f6.branding21 {
  display: none !important;
}

.img-rounded {
  border-radius: 8px;
}

.divider {
  border-bottom: 2px dashed #e4e4e4;
  margin-bottom: 16px;
}

/*.whitelist input[type="checkbox"] {
  display: none;
}

.whitelist label {
  display: flex;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  font-weight: 400;
}

.whitelist label::before {
  content: "";
  display: inline-block;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #3cb371;
  background-color: #fff;
}

.whitelist input[type="checkbox"]:checked+label::before {
  background-color: #3cb371;
}*/

.whitelist label::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  visibility: hidden;
}

.whitelist input[type="checkbox"]:checked+label::after {
  visibility: visible;
}

.input-container.subd {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
}

.input-container.subd input {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: 100%;
  border: none;
  background-color: transparent;
  padding-left: 10px;
  font-size: 16px;
  color: #888;
  display: block;
}

.input-container.subd .input-addon {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(2 * 100% / 3);
  height: 100%;
  padding-left: 10px;
  font-size: 16px;
  background-color: #f4f4f4;
  line-height: 40px;
}

.logo-before {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background-size: cover;
  width: fit-content;
  height: fit-content;
  min-width: 225px;
  min-height: 125px;
  margin: 16px 0;
}

.setting-form input {
  display: block;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 16px 8px;
  min-width: 100%;
}

.setting-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.setting-form textarea {
  padding: 16px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  width: 100%;
}

.sm-text {
  font-size: 0.85rem;
}

/* Supply Chain Styles */

.score-circle-supply {
  background-color: #fbf1e2;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin: 0 0 24px;
  font-size: 3.4rem;
  min-height: 120px;
}

.sup-table {
  width: 100%;
  border-collapse: collapse;
}

.sup-table th,
.sup-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.lesm-back {
  text-decoration: underline;
  display: block;
  padding-bottom: 16px;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bio-content img {
  position: relative;
  padding: 20px 30px 50px 30px;
  background-image: url('../img/welcome-blob.svg');
  background-repeat: no-repeat;
  background-size: contain;
}


/* Weight tracker page CSS Styles */
.goal-weight {
  font-size: 2.2rem;
  background-color: #f4f4f4;
  border-radius: 12px;
  padding: 16px 48px;
  color: #18B588;
}

.goal-weight i {
  font-size: 1rem;
  font-style: normal;
}

.weight-settings {
  font-size: 0.6rem;
  color: #555;
  text-align: right;
  display: flex;
  justify-content: space-between;
  margin-bottom: 36px;

}

.weight-settings-popup {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.weight-settings-popup label {
  font-weight: 600;
  display: flex;
  font-size: 1rem;
}

.weight-input {
  display: flex;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  height: 50px;
  min-width: 400px;
  padding: 12px;
}

.weight-settings-popup input {
  padding: 12px;
}

.graph-container {
  padding: 10px;
  width: 100%;
  margin: 48px auto 32px;
  height: 325px;
}

canvas#lineChart {
  height: 100% !important;
  width: 100% !important;
}

.circular-chart {
  display: block;
  max-width: 80%;
  max-height: 250px;
  margin: 50px auto;
}

.circle {
  fill: none;
  stroke: #18B588;
  /* Progress color */
  stroke-width: 2;
  stroke-dasharray: 0, 100;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  /* Background color */
  stroke-width: 2;
}

.chart-container {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  margin-top: -32px;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circle-text {
  fill: #18b588;
  font-size: 0.5em;
  text-anchor: middle;
  margin-top: 20px;
}

.start-circle,
.end-circle {
  fill: #18B588;
  /* Circle color */
  stroke: #18B588;
  stroke-width: 2;

}

.weight-history-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
}

.history-date {
  background-color: #18B588;
  border-radius: 12px;
  min-height: 70px;
  min-width: 70px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span.history-weight-no img {
  background-color: #18b588;
  border-radius: 100px;
  padding: 10px;
  max-height: 50px;
  max-width: 50px;
  text-align: center;
  margin: 0 auto;
}

.emoji-no {
  background-color: #18b588;
  border-radius: 100%;
  max-height: 50px;
  max-height: 50px;
  font-size: 3rem !important;
  display: inline-flex;
  min-width: 50px;
  text-align: center;
  margin-left: 12px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}

.history-date-no {
  margin: 0 0 -10px 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.history-date-month {
  margin: 0;
  padding: 0;
}

.history-weight-desc,
.history-loss-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #666;
}

span.history-weight-no {
  font-size: 1.6rem;
}

.history-weight {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.history-edit i {
  padding: 16px;
}

.weight-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.weight-display h5 {
  display: block !important;
  font-size: unset !important;
}

.weight-acheivements img {
  max-height: 150px;
  margin-right: 32px;
  margin-bottom: 32px;
}

.weight-waiting {
  max-height: 120px !important;
  margin-right: 32px;
  filter: blur(1px) grayscale(100%);
}

/* End of weight tracker styles */

/* Meditation Styles */

.fav-image img {
  border: 5px solid #18b588;
  border-radius: 50%;
  width: 20vw;
  height: 20vw;
  object-fit: cover;
  max-width: 200px;
  max-height: 200px;
  box-shadow: 2px 2px 4px #e4e4e4;
  padding: 2px;
}

.meditation-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}



/* End of Meditation Styles */

.article-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 24px;
}

/* Budget Planner Styles */

.nav-tabs .nav-link.active {
  border: 1px solid #ced4da;
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  padding: 12px 64px;
}

ul#myTab {
  border: none;
}

div#myTabContent {
  border-radius: 0 12px 12px 12px;
  border: 1px solid #e4e4e4;
  padding: 32px;
}

/* li.nav-item {
  min-width: 200px;
} */

.budget-display {
  border-radius: 24px;
  min-height: 80px;
  padding: 24px;
  text-align: center;
  margin-bottom: 32px;
}


div#balanceYearly,
div#balanceMonthly,
div#balanceWeekly,
div#totalYearlyIncome,
div#totalYearlyOutgoings,
div#weeklySavings,
div#goalAmount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

span.value-budg {
  font-size: 2rem;
}

.settings-option-budget {
  display: block;
  min-width: 100%;
  justify-content: flex-end;
  text-align: right;
  margin-bottom: 32px;
}

.budget-collapse {
  margin-top: 16px;
  text-align: left;
  border: 2px dashed #e4e4e4;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  min-height: 80px;
  padding: 32px;
}

span.budget-form-text {
  font-size: 1rem;
  color: #666;
  margin: 24px 0 8px;
  display: block;
}

.table-income tbody tr:nth-child(even) {
  background-color: #f2f2f2;
  /* light grey */
}

.table-income tbody tr:nth-child(odd) {
  background-color: #ffffff;
  /* white */
}

.table-income tbody tr {
  border: none;
}

.table-income tbody td {
  border: none;
  padding: 24px;
}


.table-income thead th {
  border-bottom: none;
}

.table-income thead {
  border: none;
  line-height: 50px;
}

table.table.table-income {
  border: 1px solid #e4e4e4;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.total-annual-amount-text {

  font-weight: 600;
}

.total-annual-amount-value {
  font-weight: 600;
  font-size: 2rem;
}

div#totalIncomeAnnualAmount,
div#totalOutgoingsAnnualAmount {
  background-color: #f4f4f4;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid #e4e4e4;
}

.outgoing-bg {
  background-color: #ffdfba;
}

.balance-bg {
  background-color: #d3f5ff;
}

.goal-amount-bg {
  background-color: #f3e7ff;
}

.income-bg {
  background-color: #cdffe1;
}

/* Challenges Styles */

.single-challenge-text {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.single-challenge-front {
  display: flex;
}

.single-challenge-front {
  display: flex;
  border: 1px solid #e4e4e4;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 32px;
}

button.challenge-button {
  background-color: #fff;
  color: #333;
  padding: 4px 24px;
  border-radius: 50px;
  border: 2px solid #18b588;
}

.challenge-button-outer {
  display: flex;
}

.completed-challenge {
  background-color: #18b588;
  color: #fff;
}

.completed-challenge img {
  box-shadow: none;
  border-color: white;
  padding: 0;
}

/* Favourites Styles */

.fav-flex {
  display: flex;
  align-items: flex-start;
}


.volunteer-save {
  color: rgb(223 63 63);
  font-size: 1.6rem;
}

.fav-section {
  color: #666;
  font-size: 0.85rem;
}

.fav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.fav-section p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 24px;
}

button.btn.fav-button,
a.btn.fav-button {
  border-radius: 12px;
  background-color: #15b588;
  padding: 2px 16px;
  color: #fff;
}

/* Volunteering Styles */
.form-check {
  display: flex;
  align-items: center;
}


.volunteer-card {
  background-color: rgb(236 244 240);
  padding: 32px;
  margin-bottom: 32px;
  border-radius: 12px;
}

.volunteer-card-logo img {
  width: 220px;
  height: 120px;
  background-color: #fff;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  object-fit: contain;
}

.volunteer-card-logo {
  margin-right: 24px;
}

.volunteer-card-head {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.volunteer-card-title {
  font-size: 1.3rem;
}

span.job-postcode {
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
}

span.job-sub-name {
  display: block;
  font-weight: bold;
}

.volunteer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.volunteer-button {
  background-color: #18b588;
  color: #fff;
  padding: 12px 24px;
  border-radius: 150px;
  border: none;
}

.volunteer-card-body {
  margin-bottom: 24px;
}

.volunteer-save {
  color: rgb(223 63 63);
}

.accordion-toggle-icon {
  transition: transform 0.2s linear;
  transform: rotate(180deg);
}

.collapsed .accordion-toggle-icon {
  transform: rotate(0deg);
}

.opp-filt {
  text-decoration: none;
  color: #333;
}

.opp-filter-card {
  border: none;
  border-top: 2px solid #e4e4e4;
  border-radius: 0;
  margin-bottom: 24px;
}

.filters-card-header {
  padding: 0;
  background-color: unset;
}

.filters-card-header {
  border: none;
}

.form-opp label {
  font-weight: normal;
  font-size: 0.9rem;
}

.volunteer-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opportunity-banner-nm {
  background-color: #18b588;
  margin: 0 0 32px;
  border-radius: 12px;
  color: #fff;
}

.opp-banner-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 32px;
}

.opp-banner-inner h3 {

  font-size: 1.2rem;
}

.opportunity-banner {
  background-color: #18b588;
  padding: 32px;
  margin: 0 0 32px;
  border-radius: 12px;
  color: #fff;
}

.opportunity-banner-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.opportunity-banner-logo img {
  border-radius: 100%;
  min-width: 250px;
  min-height: 250px;
  background-color: #fff;
  object-fit: scale-down;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  width: 25px;
  height: 250px;
}

.opportunity-banner-text h3 {
  font-size: 2rem;
  margin-bottom: 48px;
}

.opportunity-banner-text h4 {
  font-size: 1.8rem;
  font-weight: normal;
  margin-top: 24px;
}

.opportunity-banner-text h4 span {
  display: block;
  font-size: 1.4rem;
}

.opportunity-banner-text span .opp-no {
  font-size: 1rem;
  display: block;
}

.glance-outer {
  margin-bottom: 32px;
  padding-bottom: 32px;
}

.opportunity-glance h6 {
  font-size: 1.5rem;
  font-weight: 500;
}

.opportunity-glance h6 i {
  color: #18b588
}

.opportunity-glance {
  margin-bottom: 32px;
  border-bottom: 2px solid #18b588;
  padding-bottom: 16px;
}

.opportunity-glance ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.opportunity-glance ul li {
  border: 1px solid #18b588;
  width: fit-content;
  border-radius: 50px;
  padding: 4px 12px;
  margin: 0 8px 12px 0;
  font-size: 0.8rem;
}

button.volunteer-button {
  background-color: #18b588;
  color: #fff;
  padding: 12px 24px;
  border-radius: 150px;
  border: none;
}

button.volunteer-button:hover {
  background-color: #18b58880;
  color: #fff;
}

.opportunity-apply-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
}

.opportunity-description-sub {
  border-top: 2px solid #18b588;
  margin-top: 16px;
  padding-top: 32px;
  padding-bottom: 12px;
}

.opportunity-description {
  font-size: 1.6rem;
  padding: 24px 0 12px;
  line-height: 2rem;
}




/* Back button Area */

.back-button {
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

.back-button-ch {
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 8px 12px;
  width: fit-content;
  margin: 48px auto 16px;
}

.art-header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-button {
  border: 2px solid #e4e4e4;
  border-radius: 12px;
  padding: 6px 12px;
  margin-bottom: 16px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button a {
  color: #333;
  text-decoration: none;
}

/* Guides Styles */

.guide-container {
  max-width: 800px;
}

.guide-image img {
  border-radius: 8px;
  margin-bottom: 32px;

  border-radius: 8px;
  margin-bottom: 32px;
  max-height: 400px;
  width: 100%;
  object-fit: cover;

}

.guide-tag-container {
  margin: 48px 0 0;
}

.guide-tag-container a {
  border: 1px solid #e4e4e4;
  border-radius: 50px;
  padding: 12px 24px;
  margin: 16px 12px 0 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;

}

.guide-description,
.guide-chapters,
.guide-related {
  /* border-bottom: 1px solid #e4e4e4; */
  padding-bottom: 24px;
}

.chapter-title,
.chapter-title-guide-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  background-color: #e4e4e4;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  min-height: 62px;
}

.chapter-title-guide-home {
  padding: 0;
  background-color: #fff;
  box-shadow: none;
  border-bottom: 1px solid #f4f4f4;
  border-radius: 0;
}

.chapter-title h4,
.chapter-title-guide-home h4 {
  margin: 0;
}

.guide-next,
.guide-prev {
  background-color: #f4f4f4;
  padding: 2px 16px;
  border-radius: 8px;
  font-size: 1.6rem;
  box-shadow: none;
  border: none;
  margin-left: 8px;
}


.all-bg-guide {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 32px;
  margin-bottom: 32px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  border: 1px solid #f4f4f4;
  width: calc(100% - 16px);
  margin: 8px;

}

.guide-info-item {
  margin-bottom: 16px;
}

.review-top-container {
  display: flex;
  align-items: center;
}

.reviewer-image {
  max-height: 60px;
  min-height: 60px;
  border-radius: 50px;
  border: 1px solid #f4f4f4;
  max-width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32px;
}

.reviewer-info {
  font-size: 0.9rem;
}

.reviewer-info i {
  color: #d3a527;
  font-size: 1.2rem;
  padding-top: 4px;
}

.review-container {
  margin-top: 24px;
}

.guide-related img {
  border-radius: 8px;
  margin-bottom: 16px;
}

.guide-related {
  text-align: center;
  font-size: 0.9rem;
}

/* Nutrition Home Page  */

.meal-plan-outer,
.meal-plan-outer-n {
  background: url(../img/meal-plans.png);
  min-height: 300px;
  background-repeat: no-repeat;
  background-position: left top;
  border-radius: 12px;
  background-color: #18b588;
  background-size: auto 350px;
  margin: 0 0 32px;
  padding: 24px;
  color: #fff;
  height: calc(100% - 32px);
}

.meal-plan-outer-n {
  background: unset;
  background-color: #18b588;
}

.banner-nutrition {
  background: #fff;
  margin: 0;
  padding: 94px 0 24px;
  color: #333;
  display: flex;
  justify-content: flex-end;
  box-shadow: 2px 2px 4px #e4e4e4;
  margin-bottom: -60px;
}

.wellb-bg {
  background: url(../img/wellbeing-bg.jpeg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.phys-bg {
  background: url(../assets/img/phys-bg.jpeg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.fin-bg {
  background: url(../img/fin-bg.jpeg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}



.meal-plan-heading {
  font-size: 1.6rem;
  font-weight: bold;
}


.banner-content-pages {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.banner-content-pages h3 {
  padding: 0;
  margin: 0;
}

.all-bg.learn-cook {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.learn-cook img {
  max-height: 200px;
  margin: 24px 0;
}

.bot-outer {
  display: flex;
  height: (100% - 32px);
  background-color: #18b588;
  border-radius: 12px;
  padding: 24px 36px;
  color: #fff;
  font-size: 1.2rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.bot-outer i {
  padding-right: 24px;
  font-size: 1.5rem;

}

.bot-outer a {
  color: #fff;
  border-color: #fff;
}

/* Physical Health Home  */

.smles {
  max-height: 150px;
  min-height: unset;
  font-size: 1.8rem;
}

.les-m {
  background-color: #f4f4f4;
  padding: 32px 2px;
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  height: calc(100% - 24px);


}

.block-p-img {
  max-height: 200px;
  margin: 0 auto 24px;
  display: flex;
}

/* Profile welcome styles  */

.profile-header .container h4 {
  background-color: #18b588;
  color: #fff;
  border-radius: 50px;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 8px 32px;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

.profile-header {
  padding: 64px;
  min-height: 350px;
  margin-bottom: 32px;
  background-size: cover;
  margin-top: 70px;
  margin: auto;
  border-radius: 24px;
  max-width: 1400px;
}

.profile-header .container h2 {
  color: #fff;
  font-size: 3.4rem;
  text-align: center;
  font-weight: 500;
  text-shadow: 2px 2px 3px #333;
}

.float-right {
  float: right;
  margin: 0 0 10px 10px;
}

.welcome-quote {
  display: flex;
  justify-content: space-around;
}

.quote {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #fff;
  font-size: 2rem;
  align-content: flex-end;
  justify-content: flex-start;
  font-family: 'Loved by the King', cursive;
  margin-top: 1rem;
}

.quote span {
  text-align: right;
  display: flex;
  justify-content: space-evenly;
  text-shadow: 2px 2px 4px #333;
}

.author {
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
}

.tracker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tracker-title span {
  height: 100%;
  margin-top: -16px;
}

.tracker-title span i {
  font-size: 2rem;
  color: #666;
}

.emoji-no i {
  color: #fff;
  font-size: 1.6rem;
}

.rounded-video {
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
  position: relative;
}

/* Favourites / Bookmarks section  */

.video-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.video-heart,
.video-heart-selected {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 24px;
  color: #fff;
  opacity: 0.7;
  z-index: 1;
}



.video-heart-selected {
  color: red;
}

.heart-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.heart-container i {
  font-size: 24px;
  color: #ccc;
}

.heart-container-selected i {
  color: red;
}

h4.home-des-head {
  color: #888;
}

/* Mood Tracker Styles  */
.form-range {
  display: block;
}

span.mood-no-j {
  font-size: 1.8rem;
}

.feeling-outer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feeling-outer h4 {
  margin: 0;
}

.feeling-outer i {
  font-size: 4rem;
  color: #18b588;
  margin-right: 16px;
}

.feeling-outer p {
  margin: 0;
}

form.happy-form {
  width: 100%;
}

.custom-range {
  width: 100%;
  margin-bottom: 16px;

}

#slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #18b588 0% 50%, #ddd 50% 100%);
  height: 20px;
  border-radius: 50px;
}



.score-box {
  border: none;
  background: transparent;
  width: 44px;
  display: inline-block;
  font-size: 2rem;
  color: #18b588;
  font-weight: bold;
}

.mood-date-chooser {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  padding-bottom: 24px;
}


ul.mood-list {
  padding: 0;
  border-bottom: 1px dashed #e4e4e4;
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.mood-list li {
  list-style-type: none;
  display: inline-block;
  margin: 0 16px 16px 0;

}

.mood-observations {
  border: 2px dashed #e4e4e4;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
}

.mood-observations i {
  font-size: 3rem;
  color: #ccc;
  margin-right: 16px;
}

.mood-journal-subheader {
  background-color: #18b588;
  border-radius: 50px;
  padding: 12px 24px;
  color: #fff;
}

.btn-mood {

  border-radius: 50px;
  border: 1px solid #e4e4e4;
  display: inline-block;
  padding: 8px 24px;
  margin: 0 16px 0 0;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  background-color: #fff;
}

.btn-mood-selected {
  border-radius: 50px;
  border: 1px solid #e4e4e4;
  display: inline-block;
  padding: 8px 24px;
  margin: 0 16px 0 0;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  background-color: #18b588;
}

.mood-history-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  border: 2px dashed #e4e4e4;
}

.mood-history-container-nf {

  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  margin-top: 16px;
  border: 2px dashed #e4e4e4;
}

.mood-history-container-nf ul {
  border: none;
  margin-top: 24px;
}

.mood-journal-subheader i {
  margin-left: 30px;
  font-size: 1.8rem;
  color: #fff;
}

.mood-date-chooser i {
  margin-left: 12px;
  font-size: 1.4rem;

}

label.mood-btn {
  font-size: unset;
}

.mood-history-container input#date {
  max-width: 400px;
}

.hidden-checkbox {
  display: none;
}

.mood-btn {
  transition: background-color 0.3s ease;
  border: 1px solid #e4e4e4;
  border-radius: 50px;
  padding: 12px 32px;
  cursor: pointer;
  font-weight: normal;
}

/* Styles when the label/button is active */
.hidden-checkbox:checked+.mood-btn {
  background-color: #18B588;
  color: white;
}

.font-small {
  font-size: 0.85rem;
}

/* Finances and calculators  */

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calc-input {
  display: inline-block;
  border: none;
  border-bottom: 3px solid #333;
  font-size: 24px;
  margin-bottom: 32px;

}

.calc-butt {
  margin: 24px 0;
  padding: 24px 72px;
}

#comparison-table,
#interest-rate-change-table {
  width: 100%;
}

#comparison-table thead,
#interest-rate-change-table thead {
  background-color: lightgray;
  padding: 10px;
  height: 60px;
}

#comparison-table tbody tr,
#interest-rate-change-table tbody tr {
  padding: 24px;
}

#comparison-table th,
#interest-rate-change-table th,
#comparison-table td,
#interest-rate-change-table td {
  width: 25%;
  padding: 16px;
  border-bottom: 1px solid #f4f4f4;
}

#comparison-table thead th,
#interest-rate-change-table thead th {
  padding: 16px;
}

.monthly-payment-output span {
  color: #333;
  font-size: 2.8rem;
  display: block;
}

.monthly-payment-output {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 15px;
}

label.calc-label {
  color: #666;
  font-weight: normal;
}

#mortgage-chart {
  width: 100% !important;
  height: auto !important;
}

.table-container {
  overflow-x: auto;
  /* This will allow horizontal scrolling */
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll on iOS */
  width: 100%;
  /* Take the full width */
}

/* Optional: You can also set a max-width for better control on larger screens */
@media (max-width: 768px) {

  /* Adjust the breakpoint as needed */
  .table-container {
    max-width: 100%;
  }
}

#amortization-table,
#rate-change-table {
  width: 100%;
}

#amortization-table thead,
#rate-change-table thead {
  background-color: lightgray;
  padding: 10px;
  height: 60px;
}

#amortization-table tbody tr,
#rate-change-table tbody tr {
  padding: 24px;
}

#amortization-table th,
#rate-change-table th,
#amortization-table td,
#rate-change-table td {
  width: 25%;
  padding: 16px;
  border-bottom: 1px solid #f4f4f4;
}

#amortization-table thead th,
#rate-change-table thead th {
  padding: 16px;
}

.monthly-payment-output span {
  color: #333;
  font-size: 2.8rem;
  display: block;
}

.monthly-payment-output {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 15px;
}

label.calc-label {
  color: #666;
  font-weight: normal;
}

#mortgage-table {
  width: 100%;
}

#mortgage-table thead {
  background-color: lightgray;
  padding: 10px;
  height: 60px;
}

#mortgage-table tbody tr {
  padding: 24px;
}

#mortgage-table th,
#mortgage-table td {
  width: 25%;
  padding: 16px;
  border-bottom: 1px solid #f4f4f4;
}

#mortgage-table thead th {
  padding: 16px;
}

/* New support section */


.all-bg-support {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 32px 0 0;
  margin-bottom: 32px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  border: 1px solid #f4f4f4;
}

.support-link-section {
  background-color: #18b588;
  border-radius: 0 0 24px 24px;
  padding: 32px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.support-link-section div {
  background-color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #18b588;
}

.support-link-section div {
  background-color: #fff;
  font-size: 1.6rem;
}

.all-bg-support-container {
  padding: 0 32px 32px;
}

.support-header,
.support-body {
  border-bottom: 2px dotted #e4e4e4;
  padding: 16px 0;
  margin-bottom: 32px;
}

.support-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.support-co-name {
  font-size: 1.6rem;
}

.support-opening-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.support-open,
.support-closed {
  background-color: #18b588;
  padding: 4px 32px;
  color: #fff;
  border-radius: 24px;
  margin-right: 24px;
}

.support-closed {
  background-color: #999;
}

.support-verified-badge {
  font-size: 1.4rem;
}

ul.support-categories li {
  border: 1px solid #e4e4e4;
  list-style-type: none;
  width: fit-content;
  padding: 6px 16px;
  border-radius: 24px;
  margin: 0 16px 24px 0;
  display: inline-block;
}

ul.support-categories {
  padding: 0;
  text-transform: capitalize;
}

.support-search {
  margin-bottom: 16px;
  height: 60px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border: 3px solid #18b588;
  border-radius: 12px 0 0 12px;
}

.support-search-icon {
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #18b588;
  border-radius: 0px 12px 12px 0;
  color: #fff;
}

ul.support-quick-links {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

ul.support-quick-links li {
  display: flex;
  margin-right: 16px;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

ul.support-quick-links li a {
  text-decoration: underline;
  text-transform: capitalize;
  color: #666;

}

ul.support-quick-links li a:hover {
  color: #18b588;
}

.support-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.support-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.support-buttons .btn {

  margin: 0 12px 12px;
}

.rotate-icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

span.see-all {
  font-size: 0.85rem;
  border: 1px solid #e4e4e4;
  padding: 8px 16px;
  border-radius: 24px;
  margin-left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

span.see-all i {
  margin-left: 12px;
}

/* Inspiration / Affirmation Page  */



.inspiration {
  margin-bottom: 32px;
}

.inspiration img {
  transition: all 0.5s ease;
  max-width: 100%;
  border-radius: 6px;
}

.inspiration:hover img {
  transform: scale(1.5);
  /* You can adjust the scale value as needed */
  z-index: 100;
}

span#score-display {
  border: 3px solid #e4e4e4;
  padding: 10px;
  border-radius: 6px;
  font-size: 2rem;
  margin-top: 24px;
  box-shadow: 2px 2px 4px #f4f4f4;
}

.mw-blog {
  max-width: 800px;
  margin: 0 auto;
}


/* Guides section   */

.challenge-single-side h5 {
  margin-top: 32px;
  text-align: center;
}

.challenge-single-side p {
  font-size: 0.9rem;
  text-align: center;
}

.challenge-single-side h6 {
  text-align: center;
  margin-top: 48px;
  font-weight: normal;
  border-top: 1px solid #e4e4e4;
  padding-top: 36px;
}

.progress-bar:after {
  display: none;
}

.rating-guide {
  direction: rtl;
  width: 100%;
  display: flex;
  justify-content: center;
}

.rating-guide a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.4s;
  font-size: 1.6rem;
  margin-right: 6px;
  margin-bottom: 16px;
}

.rating-guide a:hover,
.rating-guide a:focus,
.rating-guide a:hover~a,
.rating-guide a:focus~a {
  color: orange;
  cursor: pointer;
}

#reviewForm {
  display: none;
}

.guide-day-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
  flex-direction: row;
}

.guide-date-container {
  display: flex;
  align-items: center;
}

.guide-date {
  background-color: #ccc;
  border-radius: 50px;
  min-height: 70px;
  min-width: 70px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: inline-flex;
  font-size: 1.6rem;
  font-weight: bold;
}

.guide-complete-status {
  font-size: 2rem;
  color: #999;
}

.guide-complete {
  background-color: #18b588;
  color: #fff;
}

.guide-complete i {
  font-size: 2rem;
  color: #fff;
}

.guide-complete .guide-date {
  background-color: unset;
}

span.guide-day-title {
  margin-left: 24px;
  display: flex;
  flex-wrap: wrap;
}

/* Volunteer Opportunities */

.item p {
  font-weight: 600;
  font-size: 1rem;
  padding: 0 6px;
}

.page-link {
  color: #212529;
}

.active>.page-link,
.page-link.active {
  background-color: #f08209;
  border-color: #f08209
}

.page-link:focus {
  box-shadow: none;
}

#c_filter {
  cursor: pointer;
}

.volunteer-button a {
  color: #fff;
}

/* Goals Page  */


.goal-icons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 12px;
  height: 100%;
}

.goal-icons i:nth-child(1) {
  padding-bottom: 4px;
}

.goal-icons i:nth-child(2) {
  padding-top: 4px;
}

p.goal-time-headers {
  font-size: 1.2rem;
  margin-top: 64px;
  font-weight: 600;
}

.goal-edit:not(:first-child) {
  border-top: 1px solid #ccc;

}

/* Support services  */

.support-description a {
  font-weight: bold;
  text-decoration: underline;
}

ul.support-categories li {
  border: 1px solid #e4e4e4;
  list-style-type: none;
  width: fit-content;
  padding: 6px 16px;
  border-radius: 24px;
  margin: 0 5px 6px 0;
  display: inline-block;
  font-size: 13px;
}

.all-bg-support {
  padding-bottom: 100px;
  position: Relative;
}

.support-link-section {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mh-250 {
  min-height: 275px;
}

.video-heart.red {
  color: red;
}

ul.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 32px;
}


/* Free trail login page */

.bg-wl-trial {
  background-color: #fff;
  padding: 32px;
}

.wl-trial-info {
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 32px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* .container-trial {
  min-width: 1200px;
} */

.trial-input {
  margin-bottom: 16px;
  height: 48px;
  width: 90%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e4e4;
}

ul.trial-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.trial-list li {
  margin-bottom: 24px;
}

img.logo-logo.img-fluid {
  max-height: 60px;
  margin-bottom: 32px;
}

ul.trial-list i {
  color: #18B588;
  font-size: 1.4rem;
}

.trial-list li {
  display: flex;
  align-items: center;
}

.trial-list .fa-solid {
  margin-right: 10px;
  /* Adjust spacing between the icon and the text */
}

/* This will prevent the text from wrapping under the icon */
ul.trial-list li span {
  display: inline-block;
}

.login-wrapt {
  background: rgb(35, 124, 118);
  background: linear-gradient(176deg, rgb(41 167 159) 0%, rgb(9 38 34) 100%);
  margin: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Default styling for large desktop screens */
.container-trial {
  margin: 0 auto;
  width: 1200px;
  box-sizing: border-box;
}

/* Large Screens (from 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container-trial {
    width: 1000px;
  }

  .log-size {
    max-width: 90%;
  }
}

/* Medium Screens (from 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .container-trial {
    width: 750px;
    margin: 32px 0;
  }

  .login-wrapt {
    height: unset;
  }

  .trial-input {
    width: 100%;
  }



  img.logo-logo.img-fluid {
    max-height: 60px;
    margin-bottom: 32px;
    text-align: center;
    width: 100%;
  }

  .trial-input {
    width: 100%;
  }

  .trial-sub,
  .login-card-description {
    text-align: center;
  }
}

/* Tablets (from 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .container-trial {
    max-width: 576px;
    padding: 20px;
    margin: 32px;

  }

  img.logo-logo.img-fluid {
    max-height: 60px;
    margin-bottom: 32px;
    text-align: center;
    width: 100%;
  }

  .trial-input {
    width: 100%;
  }

  .trial-sub {
    text-align: center;
  }
}

/* Small Mobile Devices (max-width 575px) */
@media (max-width: 575px) {
  .container-trial {
    width: 100%;
    padding: 15px;
  }
}

.trial-sub {
  color: #666;
  font-size: 0.85rem;
}

.all-bg-badge {
  border: 1px solid #f4f4f4;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.report-info-box {
  display: flex;
  border: 1px solid #f4f4f4;
  margin: 0 24px 12px 0;
  padding: 8px 24px;
  border-radius: 8px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  align-items: center;
  background-color: #fff;
}

.report-score-box {
  border: 1px solid #f4f4f4;
  margin: 0 0 24px 0;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.report-score-box .progress-bar {
  height: 10px;
}

.report-score-box .progress .progress-bar {
  border-radius: 30px;
  box-shadow: none;
  position: relative;
}

.report-score-box .progress {
  height: 10px;
  background-color: #f4f4f4;
}

.report-score-box i {
  border-radius: 50%;
  padding: 4px;
  min-height: 30px;
  min-width: 30px;
  max-width: 30px;
  max-height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #18b588;
  color: #fff;
  font-size: 1rem;
  margin: 0 6px 0 0;
}

.report-score-box h5 {
  font-size: 1.2rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 48px;
}

.report-score-box h5 span {
  font-weight: normal;
  font-size: 1.6rem;
  color: #e2e24e;
  display: block;
  text-align: center;
}

.score-title-area {
  display: flex;
  justify-content: center;
  width: 100%;
}

.report-score-box p,
.all-bg.meditation-outer.sus-bg-dk-dk p {
  font-size: 1.7rem;
  font-weight: 600;

}

.prog-butt {
  border-radius: 50px;
  padding: 0 12px;
  font-size: 0.85rem;
  color: #fff;
  display: flex;
  align-content: center;
  align-items: center;
  margin-bottom: 8px;
  width: fit-content;
}

.prog-butt i {
  border-radius: unset;
  padding: 4px;
  min-height: unset;
  min-width: unset;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: unset;
  color: #fff;
  font-size: 1rem;
  margin: 0;
}

.divider-row {
  border-top: 1px solid #f4f4f4;
  padding: 24px 0;
  margin-top: 24px;
}

.report-values {
  display: inline-flex;
  text-align: center;
  flex-direction: column;
}

.report-values p {
  margin: 0;
  padding: 0 0 12px 0;
  width: fit-content;
  font-size: 0.9rem;
  color: #444;
}

.report-info-box i {
  padding-right: 8px;
}

button.export-report {
  border-radius: 6px;
  border: 1px solid #e4e4e4;
  background-color: #f4f4f4;
  font-size: 0.9rem;
  color: #333;
  padding: 6px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 12px;
}

.progress {
  width: 100%;
}

.sus-bg-dk-dk {
  background-color: #00674C;
  color: #fff;
}

.stars i {
  color: #e2e24e;
  background: none;
  min-width: unset;
  height: unset;
  margin: 0;
  max-width: unset;
  font-size: 2.2rem;
}

.sub-score-box {
  border: 1px solid #f4f4f4;
  padding: 24px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 0 32px;
  text-align: center;
  border-radius: 8px;
  min-height: 165px;
}

.sub-score-box h5 {
  font-size: 1.7rem;
}

.sub-score-box h4 {
  font-size: 1.3rem;
}

.filter-bgs {
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
  background-color: #f4f4f4;
  border: 1px solid #e4e4e4;
}


/* added from inline */
.score-square {
  border-radius: 8px;
  padding: 16px;
  font-size: 1.5rem;
  text-align: center;
  color: #333;
  width: 100%;
}

.star {
  color: #ffd275;
  padding-right: 10px;
}

.stars {
  display: flex;
  justify-content: center;

}

.outer-score {
  display: flex;
  align-items: center;
  margin: 24px 32px;

}

.score-icon img {
  max-height: 100px;

}

p.score-head {
  font-size: 1.1rem;
}

.badge-bg {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-bottom: 32px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  border: 1px solid #d4d4d4;
}

.score-desc {
  margin-left: 32px;
}

span.score-date {
  font-weight: bold;
  font-size: 1.2rem;
}

p.ratio-score {
  font-size: 4rem;
}

.report-download {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.report-download i {
  font-size: 4rem;
  font-weight: 300;
  color: red;
}

all-bg-badge {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 32px;
  box-sizing: border-box;
  height: calc(100% - 32px);
  border: 1px solid #f4f4f4;
}

.circle-new-score {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8vw;
  height: 8vw;
  border-width: 10px;
  border-radius: 50%;
  text-align: center;
  /* for good measure */
  font-size: 3vw;
  margin-bottom: 24px;
  border-style: solid;
}

/* Minimum size */
@media (max-width: 600px) {
  .circle-new-score {
    width: 50px;
    height: 50px;
  }
}

/* Maximum size */
@media (min-width: 1200px) {
  .circle-new-score {
    width: 200px;
    height: 200px;
  }
}

/* .answer-section {
  max-width: 600px;
  margin: 0 auto;
} */

ul.answers li {
  list-style-type: none;
  border: 1px solid #e4e4e4;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

ul.answers {
  margin-top: 48px;
  padding: 0;
}

p.question-number {
  color: #555;
  font-size: 1rem;
  background-color: #f2f2f2;
  width: fit-content;
  padding: 6px 24px;
  border-radius: 50px;
  margin-bottom: 24px;
}

li.answer-selected {
  background: #18b588;
  color: #fff;
}

ul.answers-progress {
  padding: 0;
  list-style-type: none;
}

ul.answers-progress li {
  margin-bottom: 24px;
  padding: 8px;
}

li.progress-active {
  border-radius: 4px;
  border: 1px solid #18b588;
}

.progress.progress-qs {
  height: 1rem;
}

.progress.progress-qs .progress-bar:after {
  content: "";
  width: 22px;
  height: 23px;
  border-radius: 50%;
  background: #eeee;
  border: 6px solid #18b588;
  position: absolute;
  bottom: -3px;
  right: 0;
  z-index: 1;
}

.legend {
  display: flex;
  justify-content: center;
  /* margin-top: 20px; */
  max-width: 100%;
  flex-wrap: wrap;
  margin-top: -120px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

/* finish added from inline */

.score-title-area h5 {
  display: inline-flex;
}

span.info-icon i {
  color: #666;
  display: flex;
  background-color: unset;
  padding: 0;
  margin: 2px 0 0 4px;
  align-items: flex-start;
  font-size: 1.2rem;
}

.sub-score-box p {
  display: flex;
  justify-content: center;
}

.survey-input-type {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
  font-size: 24px;
}

.sv-toggle {
  display: inline-flex;
  border: 2px solid #18b588;
  border-radius: 50px;
  overflow: hidden;
}

.sv-toggle input {
  display: none;
}

.sv-toggle label {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  background-color: #f4f4f4;
  transition: background-color 0.3s;
  padding: 16px 32px;
}

.sv-toggle input:checked+label {
  background-color: #18b588;
  color: white;
}

.new-report {
  background-color: #18B588 !important;
  color: #fff !important;
}

.report-icons i {
  color: #333;
  font-size: 1.4rem;
  background-color: #ffc107;
  padding: 8px;
  border-radius: 8px;
  margin-right: 8px;
}

.megawidth_1 {
  width: 650px;
}

#snav {
  position: fixed;
  top: 60%;
  z-index: 9999;
  font-family: 'Open Sans', sans-serif;
  background: #00674C;
  right: -75px;
  border: none;
  border-radius: 0px 0px 10px 10px;
  transform: rotate(90deg);
}

#snav ul {
  list-style: none;
}

#snav * {
  margin: 0;
  padding: 0;
  outline: 0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#snav li a {
  width: 190px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;


}

#snav .fa {
  vertical-align: middle;
  font-size: 0.8rem;
  height: 35px;
  line-height: 35px;
  text-align: center;
  position: relative;
  z-index: 4;
  padding-left: 7px;
}

#snav li span {
  font-size: 0.7rem;
  height: 35px;
  line-height: 35px;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding: 0px 14px 0px 30px;
  position: absolute;
  top: 0;
  z-index: 3;
  letter-spacing: 1.5px;
  font-weight: 400;
}

.n_data {
  width: fit-content !important;
  text-align: center;
  background-color: #18b588;
  margin: 60px auto;
  padding: 12px;
  border-radius: 6px;
  color: #fff;
}

.amcharts-export-menu .export-main>a,
.amcharts-export-menu .export-drawing>a,
.amcharts-export-menu .export-delayed-capturing>a {

  margin: -48px 8px 0 10px !important;
}

.fit-content {
  height: auto;
  position: sticky;
  z-index: 100;
  top: 0;
}

.report-info-box-new {
  display: flex;
  align-items: center;
}

.report-info-box-new .form-control,
.survey-input-type-new {
  min-height: 50px;
  margin: 0 24px 12px 0;
  padding: 8px 24px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 1rem;
}

input#report_date {
  background-color: #fff;
  border: none;
}

.gj-datepicker {
  position: relative;
}

/* Style for the icon */
.gj-datepicker .gj-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  /* Adjust as needed for horizontal positioning */
  transform: translateY(-50%);
  /* Add any additional styling as needed */
}

.gj-datepicker-md [role=right-icon] {
  position: absolute;
  right: 20px !important;
  top: 25px !important;
  font-size: 24px;
}

a.nav-link.dropdown-toggle img {
  min-height: 60px;
  min-width: 60px;
}

.login_banner {
  float: left;
  width: 40%
}

.login_right {
  float: right;
  width: 60%;
  padding-left: 50px;
  padding-right: 20px;
}

.login_container {
  width: 1300px;
}

.modal-sm {
  width: 40%
}