.title {
	display:inline;
  font-size: clamp(25px, 3vw, 32px);
}

.welcomeTitle {
  text-align: center;
  font-size: 2rem;
  text-align: center;
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
  border-radius: 8px;
}

.nav-notification {
  width: 8px;
  height: 8px;
  margin-right:-8px;
  margin-top:-8px;
  display: inline-block;
  background: #fb7179;
  border-radius: 50%;
  vertical-align: top;
}

.overlayMessage {
	padding-bottom:8px;
}

.menu-notification {
  width: 16px;
  height: 16px;
  margin-right:-18px;
  margin-left:2px;
  margin-top:-12px;
  display: inline-block;
  background: #fb7179;
  border-radius: 50%;
  vertical-align: top;
}

.page-notification {
  width: 12px;
  height: 12px;
  margin-right:-12px;
  margin-top:-12px;
  display: inline-block;
  background: #fb7179;
  border-radius: 50%;
  vertical-align: top;
}

.verticalDropdownContainer {
  position: relative;
  display: inline-block;
}

.verticalDropdownMenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 8px 0;
  z-index: 1000;
  
  display: none;
}

.verticalDropdownMenu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}

.verticalDropdownMenu a:hover {
  background-color: #f4f2ff;
  color: #5a4fcf;
}

.verticalDropdownMenu.small {
	height:240px;overflow-y:scroll;
}


.welcomeTitle2 {
  text-align: center;
  font-size: 5rem;
  text-align: left;
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.25;
  color:#2e2e2e;
}

.appNavVerticalPad {
  height:42px
}

.welcomeTitle3 {
  font-size: 1.5rem;
    line-height: 2.5rem;
    margin: 1rem 0 2rem;
    display: inline-block;
}

.checkboxContainer {
  white-space: nowrap;
}

.smallScrollingContainer {

}

.featureThreeBlock {
  display:inline-block;width:30%;vertical-align:top;
  background:white;
  padding:8px;
  height:100%;
  text-align:left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}
.featureThreeBlock.middle {
  margin-left: 16px;
  margin-right: 16px;
}

.drag-area {
      width: 100%;
      max-width: 400px;
      height: 200px;
      border: 2px dashed #007BFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #007BFF;
      cursor: pointer;
      margin: 50px auto;
    }
    .drag-area.hover {
      background-color: #f0f0f0;
    }
    .hidden-input {
      display: none;
    }
    .upload-status {
      text-align: center;
      margin-top: 20px;
    }

.carousel-container {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.carousel {
  display: block;
  white-space: nowrap; /* Ensures horizontal scrolling */
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar on Firefox */
  -ms-overflow-style: none; /* Hide scrollbar on IE and Edge */
}

.carousel::-webkit-scrollbar {
  display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
}

.carousel-card {
  display: inline-block; /* Ensures horizontal arrangement without Flex */
  scroll-snap-align: center;
  vertical-align: top;
  width: 100%;
  padding: 20px;
  padding-left: 40px;
  padding-right: 40px;
  height:180px;
  margin-right: 32px;
  background-color:white;
  border-radius: 8px;
  text-align: center;
  white-space: normal; /* Allows text wrapping inside the card */
}

.carousel-dots {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

.simpleExpand {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.simpleExpand.open {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.square-loading {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: #9187d3;
}

.square-loading {
  animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}


@keyframes loadingG {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(120px, 0) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  cursor: pointer;
  background-color: #a7a7a7;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #3a3a3a;
}

carouselButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
}

carouselButton:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

carouselButton.prev {
  left: -40px;
}

carouselButton.next {
  right: -40px;
}

.cookieBanner {

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  background-color: #f9f9f9;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 9999;
}

table.cookieTable {
  border: 3px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.cookieTable td, table.cookieTable th {
  border: 1px solid #000000;
  padding: 5px 4px;
}
table.cookieTable td {
  font-size: 13px;
}
table.cookieTable th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
}

.cookieOption {
  border: 2px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
  width:45%;
  min-height:100px;
  max-width: 400px;
  cursor: pointer;
  vertical-align: top;
  display: inline-block;
}
.cookieOption.left {
  margin-right: 8px;
}

.cookieOption.selected {
  border-color: #007BFF;
  background: #e3e7fb;
}

.cookieOption p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.cookieBanner button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #007BFF;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cookieBanner button:hover {
  background-color: #0056b3;
}

.navTitle {
  display: inline-block;
}

.timestampToLocal {
  display:none;
}

.statDone {
    font-weight: 600;
    font-size: 40px;
    line-height: 125%;
}
.statTotal {
    font-weight: 600;
    font-size: 40px;
    line-height: 125%;
    color:#C4C0BE;
}

.betaTag {
  padding:8px;
  margin:8px;
  font-weight: 600;
  background: #776ac8;
  color:white;
  border-radius: 8px;
  font-size: 1.3rem;
}

.goalsContainer {
  text-align: center;
  width:100%;
}

.goalContainer {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  width:100%;
  max-width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin-bottom: 16px;
}

.goalTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.goalActivity {
  display:inline-block;
}

.goalTitle {
  font-weight: 600;
  font-size: 18px;
  color: #3A3A3A;
}

.goalImg img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.goalProgessRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 8px;
}

.goalRowTitle {
  font-weight: 600;
  font-size: 14px;
  max-width:80%;
  text-align: left;
  color: #3A3A3A;
}

.goalRowValue {
    white-space: nowrap;
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #3A3A3A;
  margin-left: 6px;
}

.goalValue {
  font-weight: 600;
  display: flex;
  align-items: center;
}

.statusNumber.complete {
    color:#55ccaa;
    background: none;
}
.statusNumber.improve {
    color:#fb7179;
}
.statusNumber.progress {
    color:#ffd393;
}

.greyText {
  font-weight: 500;
  color: #848280;
}

.scrollDot {
  height: 10px;
  width: 10px;
  margin-bottom: 2.5px;
  background:#a6a6a6;
  border-radius: 50%;
  margin-right: 3px;
  margin-left: 3px;
  display: inline-block;
}

.scrollDot.complete {
    background: #55ccaa;
}

.scrollDot.improve {
    background: #fb7179;
}

.scrollDot.progress {
    background: #ffd393;
}

.scrollDot.skipped {
    background: #55ccaa;
}

.scrollDot.locked {
    background: #9187d3;
}

.scrollDot.active {

}

.navBannerX {
  float:right;padding:8px;margin-top:-8px;border-radius:16px;
  cursor: pointer;
}

.floatingCard {
  position: relative;
  width:220px;
  margin-top: -100px;
  height:100px;
  background: white;
  border-radius: 16px;
  box-shadow: 8px 8px 2px rgba(0,0,0, 0.3);
}


.quoteNavContainer {
  z-index: 1000;
  position: relative;
  top:70px;
}
.quoteContainerLeft {
  margin-left: 8px;
  float:left;
  text-align: left;
  cursor: pointer;
  margin: 8px;
  border-radius: 8px;
}
.quoteContainerRight {
  text-align: right;
  float:right;
  margin-right: 8px;
  cursor: pointer;
  margin: 8px;
}

.userQuote {
  font-size: 1.3rem;
}
.statQuote {
  font-size: 1.8rem;
  background-image: linear-gradient(to right bottom, #ffe3e4, #ffe1e7, #fddfec, #f8ddf2, #f1ddf8, #e7e1fd, #dde5ff, #d5e8ff, #d2eefd, #d4f2fa, #daf6f6, #e3f9f3);
}

.bioContainer {
  margin-bottom: 8px;
}

.bioPortrait {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}
.directoryGrid {
	display: flex;
  flex-wrap: wrap;
  gap: 0px;
  justify-content:center;
}
.directoryProfileContainer {
  border:1px solid #776ac8;
  border-radius: 16px;
  background: white;
  margin:8px;
  padding:12px;
  padding-top:16px;
  display: inline-block;
  max-width:330px;
  flex: 1 1 330px;
}
.directoryProfileName {
  text-align: center;
  font-size: 24px;
  display: block;
  font-weight: 600;
}
.directoryProfileTitle {
  display: block;
  text-align: center;
  font-weight: 600;
}
.directoryVerifiedBadge {
  float:right;
  margin-left:-16.7px;
  margin-top:-12px;
  margin-bottom: 2px;
}
.directoryProfileContact {
  text-align: center;
}
.directoryProfileTag {
    padding: 8px;
    margin-top:3.75px;

    background-color: #e3f9f3;
    border-radius: 25px;
    display: inline-block;
}
.directoryProfileTag.purple {
  background-color: #e3deff;
}
.directoryProfileTag.grey {
  background-color: #e0e0e0;
}
.directoryProfileTag.darkPurple {
  background-color: #776ac8;
  color:white;
}
.directoryProfileTag.darkGreen {
  background-color: #26ab5c;
  color:white;
}
.directoryProfileTag.darkYellow {
    background-color: #ffbb7e;
    color:white;
}


.bioText {
  display: inline-block;
  width:80%;
  vertical-align: middle;
}

.passwordRequirementsContainer {
  margin-bottom:8px;
}

.providerWhatIfContainer {
  background:white;
  border-radius: 16px;
  margin:8px;
  padding: 8px;
}
.providerWhatIf {
  font-weight: 600;
}

.simpleCard {
  background: #ffffff;
  border-radius: 16px;
  width:211px;
  text-align: center;
  height:112px;
  margin:8px;
  padding: 16px;
  font-size: 1.2rem;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  vertical-align: top;
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.simpleCard.wide {
  height:211px;
  font-size: 1.2rem;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}
.simpleCardImg {
  height:80px;
  margin-bottom:16px;
}

.simpleCardText {
  display: inline-block;
  white-space: wrap;
}
.simpleCard:hover {
  background: #e5dffb;
}

.progressButtonInner {
  height: 100%;
  background-color: #9187d3;
  width: 0;
  position: absolute;
  padding: 0;
  border: none;
  top: 0%;
  left: 0%;
  border-radius: 10px;
}

.passwordRequirement {

}

.passwordRequirement.pass {
  color:#55ccaa;
}
.passwordRequirement.fail {
  color:#fb7179;
}

.progressButtonText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar {
  width:100%;
  background:;
  padding-top:8px;
  padding-bottom: 8px;
}

.smallNavList {
  width: 85%;
  padding:0px;
  border-radius: 16px;
  margin-bottom: 0px;
}

.smallNavWrapper {
  background:none;
  text-align: center;
  padding-bottom: 8px;
  border-radius: 16px;
  width: 100%;
  overflow:hidden;
  max-height:0px;
  transition: none;
}

.smallNavWrapper.open {
  max-height: 600px;
  background: white;
  transition: max-height 0.5s ease-in;
}

.imgVertCenter {
position: relative;
top: 50%;
transform: translateY(-50%); 
}

.floatingLoadingContainer {
    position:absolute;
    bottom:50%;
    left:50%;
    margin-top:-24px;
    transform:translate(-50%, -50%);
    color: white;
    z-index: 1000;
    width: 120px;
}

.loadingContainer {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white;
    z-index: 1000;
    width: 120px;
}

.navRightWrapper {
  float: right;
  background: none;
  margin-left: auto !important;
  display: inline-block;
  padding:10px 0px 0px 0px;
  text-align: center;
  border-radius: 16px;
}

.smallNavExpander {
  float: right;
  border:2px solid #3A3A3A;
  padding:4px;
  margin-top: 8px;
  width:50px;
  height:40px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

.navRightList {
  vertical-align: middle;
  margin-top:8px;
  margin-bottom:8px;
  margin-left: 0px;
  margin-right: 0px;
  padding:0px;
}

table.researchTable {
  border-radius: 4px;
}

table.researchTable th {
  background: #e3deff;
  padding:4px;
}

table.researchTable td {
  padding:4px;
  border-right:1px solid white;
}

table.researchTable tr:nth-child(even) {
  background: #e3deff;
}

table.researchTable tr:nth-child(odd) {
  background: white;
}

.tableTag {
  background:#776ac8;
  border-radius: 8px;
  padding:2px;
  margin:2px;
  white-space: nowrap;
  color:white;
  display: inline-block;

}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
.container.wide {
  padding-right: 0px;
  padding-left: 0px;
}

.exerciseNavContainer {
  width:100%;
  margin-bottom:8px;
  min-height: 64px;
}
.exerciseNavContainer.wide {
  padding-left: 15px;
  padding-right: 15px;
}

.breathingContainer {
  margin-top: 16px;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 200px;
  height: 200px; 
}

.breathingCircle {  
  width: 50px;
  height: 50px;
  background-color:#9187d3;
  border-radius: 50%;
  animation: breathingCircleAnimation 9s infinite;
  transition: background-color 5s linear;
}

.breathingPhrase1 {
  color:#9187d3;
  animation: breathingPhrase1Animation 9s infinite;
  margin-right: 16px;
}

.breathingPhrase2 {
  color:#9187d3;
  animation: breathingPhrase2Animation 9s infinite;
}

@keyframes breathingPhrase2Animation {
  0% {
    font-size:32px;
  }
  28% {
    font-size:16px;
  }
  47% {
    font-size:16px;
  }
  53% {
    font-size:16px;
  }
  80% {
    font-size:32px;
  }
  100% {
    font-size:32px;
  }
}

@keyframes breathingPhrase1Animation {
  0% {
    font-size:16px;
  }
  28% {
    font-size:32px;
  }
  47% {
    font-size:32px;
  }
  53% {
    font-size:32px;
  }
  80% {
    font-size:16px;
  }
  100% {
    font-size:16px;
  }
}

@keyframes breathingCircleAnimation {
  0% {
    width: 50px;
    height: 50px;
    background-color:#9187d3;
  }
  28% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  47% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  53% {
    width: 200px;
    height: 200px;
    background-color:#b3a6e2;
  }
  80% {
    width: 50px;
    height: 50px;
    background-color:#9187d3;
  }
  100% {
    width: 50px;
    height: 50px;
    background-color:#9187d3;
  }
}

.footer_logo {
  display:inline;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.toggleContainer {
  padding:8px;
  border-radius: 16px;
  display: inline-block;
}
.toggleOption {
  padding:8px;
  margin-right: 4px;
  padding-left:16px;
  padding-right:16px;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  background: white;
}


.toggleOption:hover {
  background: #9187d3;
  color:white;
}
.toggleOption.selected {
  background: #9187d3;
  color:white;
}

.navBanner {
  width:100%;
  text-align: center;
  margin-top:16px;
  margin-bottom:16px;
  padding: 16px;
  background:#fff4e3;
  border-radius: 16px;
  font-weight: 600;
}
.navBanner.green {
    background:#e3f9f3;
}
.navBanner.red {
    background:#ffe3e4;
}
.navBanner.purple {
  background:#e3deff;
}

.therapy-blue {
  color:#9187D3;
}

.therapy-black {
  color:#211A1E;
}

.calm_background {
  background-color: #F8F8F8;
}

.vertical-pad-small {
	height:50px;
}

.vertical-pad-large {
	height:200px;
}

div.mantraContainer {
  width:100%;
  background:white;
  border-radius: 16px;
  font-size: 2rem;
  padding:16px;
  color:black;
  margin-bottom: 16px;
}

div.blogPostDescription {
  width:100%;
  background:white;
  border-radius: 16px;
  padding:16px;
  color:black;
  margin-bottom: 16px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

div.blogPostDescription:hover {
  background: #e3deff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

 .pin-container {
            
            padding-top: 16px;
        }

        .pin-input {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 24px;
            border: 2px solid #ccc;
            border-radius: 5px;
            outline: none;
            transition: border-color 0.3s;
        }

        .pin-input:focus {
            border-color: #007BFF;
        }

textarea.inputTextArea {
  width:95%;
  max-width:600px;
  height:100px;
  margin-top:5px;
  border-radius: 8px;
  border: none;
  padding: 10px;
  margin-right:8px;
  resize:both;
  outline: none;
  border: 1px solid #9187d3;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

}

textarea.inputTextArea.small {
  width:300px;
  height:80px;
}

textarea.inputTextArea:focus {
  border:1px solid #776ac8;
  outline-color: #776ac8;
}

textarea.inputTextArea:disabled {
  background: #C4C0BE;
}

a.blank {
  color:inherit;
  text-decoration: none;
}

.nav-link {
  color: blue;
  padding-bottom:0px;
  text-align: right;
}

input.limited-width {
    max-width: 555px;
}

textarea.limited-width {
    max-width: 555px;
}

button.limited-width {
    max-width: 200px;
}

p.limited-width {
    max-width: 555px;
}

p.notes {
    padding:5px;
    background-color: #f7f7f9;
}

div.inline-profile {
    padding:10px;
    background-color: #f7f7f9;
}

div.inline-resource {
    padding:10px;
    background-color: #f7f7f9;
}
div.inline-treatment {
    padding:10px;
    background-color: #f7f7f9;
}
div.inline-exercise {
    padding:10px;
    background-color: #f7f7f9;
}

h1.inline {
    display: inline-block;
}
button.inline {
    display: inline-block;
}

h1.editable {

}
p.editable {

}
div.editable {

}
input.editable {

}
div.notes {
    padding:5px;
    background-color: #f7f7f9;
}
div.limited-width {
    max-width: 555px;
}
div.tag {
    padding: 5px;
    margin: 5px;
    background-color: #e3deff;
    border-radius: 25px;
    display: inline-block;
}

.tagFilter {
    padding: 5px;
    margin: 1px;
    border: 1px solid #9187d3;
    color:#3A3A3A;
    background:white;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
}
.tagFilter:hover {
	color:white;
  background: #776ac8;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.greenText {
    color:#55ccaa;
    font-weight: 600px;
}

div.activity {
  border: 1px solid black;
  border-radius: 5px;
  padding:5px;
  margin:5px;
  display: inline-block;
  min-width: 200px;
  min-height: 200px;
}

div.exerciseContainer {
  width:100%;
  height:80%;
}

div.exerciseComponent {
  overflow: auto; /* Required to expand around the floating internal divs - https://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside */
  width:98%;
  padding:5px;
  margin: 5px;
}
div.exerciseComponent:hover {

}

div.exerciseComponentEdit {
  float:right;
}

div.exerciseComponentContent {
  float:left;
  width:100%;
}

a.delete-link {
  color:red;
}

a.noStyle {
  text-decoration: none; /* no underline */
  color:inherit;
}

a.black {
  color:#3A3A3A;
}


/* TABLE */
.simpleTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.simpleTable td, .simpleTable th {
  border: 1px solid #ddd;
  padding: 8px;
}

.simpleTable tr:nth-child(even){background-color: #e3deff;}
.simpleTable tr:nth-child(odd){background-color: white;}

.simpleTable tr:hover {background-color: #d4ccff;}

.simpleTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #9187d3;
  color: white;
}

/* END TABLE */

body {
  width: 100%; height: 100%;
  background: #f7f6fe;
  color: #3A3A3A;
  font-family: 'Inter Tight';
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
}

p.rotatingGoal {
  display:inline-block;
  font-weight: bold;
}

.footer-row {
  padding-top: 4px;
  padding-bottom:4px;
  margin-bottom: 2px;
}

.footer-content {
  color:white;
  opacity: 0.85;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.footer-content.dark {
  color:#3A3A3A;
}

.footer-content:hover {
  color:white;
  opacity: 1;
}

.footer-content.dark:hover {
  color:black;
  opacity: 1;
}

.navWrapper {
  padding: 8px 8px 8px 40px;
  background: #FFFFFF;
  border-radius: 16px;
  align-items: center;
}

.navSeperator {
  color: #4e4e4e;
}

.navLink {
  padding:10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #4e4e4e;
}

.smallNavLink {
  padding:10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #4e4e4e;
  display: block;
}

.smallNavLink:hover {
  color:#9187D3;
}

.navActive {
  color: #3A3A3A;
}

.navLink:hover {
  color:#9187D3;
}

.navLogin {
  background: none;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#776ac8;
  border: 1px solid #776ac8;
  margin-right: 8px;
}

.navGetStarted {
  background: #9187D3;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#FFFFFF;
}

.navGetStarted:hover {
  color:#FFFFFF;
  background-color: #776ac8;
}

.navLogout {
  background: #4E4E4E;
  border-radius: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right:20px;
  padding-left:20px;
  color:#FFFFFF;
}

.navLogout:hover {
  color:#FFFFFF;
  background:#9187D3;
}

.animatedCheckOuter {
  text-align: left;
  display: inline-block;
}

.animatedCheckContainer {
  vertical-align: middle;
}

.animatedCheckCaption {
  padding-left: 16px;
  padding-right: 8px;
  vertical-align: middle;
  height: 56px;
  line-height: 1.2;
  font-weight: 400;
  font-size: 1.3rem;
}

.checkWrapper {
  width:100%;
  display: inline-block;
  margin-bottom: 8px;
}


.a_checkmark_circle {
  stroke-dasharray: 166; 
  stroke-dashoffset: 166; 
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #e3deff;
  fill: none;
}
.a_checkmark_circle.one.animated {
  animation-delay:2s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 0.0s forwards;
}
.a_checkmark_circle.two.animated {
  animation-delay:3s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 1.0s forwards;
}
.a_checkmark_circle.three.animated {
  animation-delay:4s;
  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) 2.0s forwards;
}

.a_checkmark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #9187d3;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #e3deff;
}
.a_checkmark.one.animated {
  animation-delay:2s;
  animation: fill .4s ease-in-out 1.5s forwards, scale .3s ease-in-out 1.5s both
}
.a_checkmark.two.animated {
  animation-delay:3s;
  animation: fill .4s ease-in-out 2.5s forwards, scale .3s ease-in-out 2.5s both
}
.a_checkmark.three.animated {
  animation-delay:4s;
  animation: fill .4s ease-in-out 3.5s forwards, scale .3s ease-in-out 3.5s both
}

.a_checkmark_check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.a_checkmark_check.one.animated {
  animation-delay:2s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 1.5s forwards;
}
.a_checkmark_check.two.animated {
  animation-delay:3s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 2.5s forwards;
}
.a_checkmark_check.three.animated {
  animation-delay:4s;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 3.5s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #e3deff;
  }
}

.smallTitle {
    font-weight: 400;
    font-size: 18px;
}

.pillText {
    border-radius: 8px;
    padding:2px;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 600;
}

.currencySelect span {
  font-size: 18px;
  color:#3A3A3A;
  font-weight: 500;
  line-height: 36px;
}
.currencySelect.selected span {
  
}

.currencySelect {
    border:1px solid #e3deff;
    width: 56px;
    height: 36px;
    border-radius: 10px;
    color:#3A3A3A;
    background: none;
    font-weight: 500;
    font-size: 0;
    font-style:normal;
    
    cursor: pointer;
    margin:4px;
    display: inline-block;
}

.currencySelect.selected {
  border:1px solid #9187d3;
  background: #e3deff;
  color:white;
}

.currencySelect.disabled {
    background-color: #4e4e4e;
}

.currencySelect.disabled:hover {
    background-color: #4e4e4e;
}

.currencySelect:disabled {
    background-color: #4e4e4e;
}

.currencySelect:disabled:hover {
    background-color: #4e4e4e;
}

.currencySelect:hover {
    background-color: #e3deff;
    color:white;
}

.currencySelect:focus {
    background-color: #e3deff;
}

.sessionProgressBarWrapper {
    text-align: center;
    margin-bottom: 16px;
}
.sessionProgressBarContainer {
    display: inline-block;
    width:80%;
    height:30px;
    background:white;
    border-radius: 8px;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.25), 2px 2px rgba(255, 255, 255, 0.08);
}
.sessionProgressBar {
    background: linear-gradient(239.92deg, #55ccaa -0.64%, #9187d3 98.73%);
    border-radius: 8px;
    height:100%;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #3A3A3A;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.mediumSocial {
    width:20px;
    margin-right:20px;
}

.smallSocial {
    margin:10px;
}
.smallSocial.first {
  margin-left:0px;
}
.smallSocial.last {
  margin-right:0px;
}


.navLanguageOption {
    color:#9187d3;
    cursor: pointer;
    border:1px solid #9187d3;
    border-radius: 4px;
    padding: 2px;
    height:26px;
}
.navLanguageOption:hover {
    color:#776ac8;
    background:#e3deff;
}

.pillText.red {
    background-color: #ffe3e4;
}
.pillText.darkRed {
    background-color: #d16163;
}
.pillText.brightRed {
    background-color: #f15d53;
}
.pillText.green {
    background-color: #e3f9f3;
}
.pillText.darkGreen {
    background-color: #26ab5c;
}
.pillText.yellow {
    background-color: #fff4e3;
}
.pillText.darkYellow {
    background-color: #ffbb7e;
}
.pillText.brightYellow {
    background-color: #fed100;
}
.pillText.blue {
    background-color: #33b0f6;
}
.pillText.purple {
    background-color: #e3deff;
}
.pillText.darkPurple {
    background-color: #8a78b6;
}
.pillText.white {
    background-color: white;
}

.completeIntro {
    padding:32px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 16px;
    background: linear-gradient(239.92deg, #E3DEFF -0.64%, #e3f9f3 98.73%);
    width:70%;
}

.examplePillContainer {
    width:100%;
    display:inline-block;
    margin-bottom: 16px;
}

.exampleExercisePill {
    background:white;
    border-radius:16px;
    height:100px;
    width:222px;
    display:inline-block;
    margin:4px;
    white-space: normal;
    vertical-align:top;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.exampleExercisePill.noHover:hover {
    background: white;
}

.exampleExercisePill:hover {
    background: #e3f9f3;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.exampleExercisePillTitle {
    display:inline-block;
    font-weight: 600;
    font-size: 22px;
    margin:4px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.continueWithFacebook {
    width: 300px;
    height:40px;
    background:#3f65b3;
    border-radius: 40px;
    text-align: center;
    color:white;
    line-height: 38px;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
}
.continueWithGoogle {
    width: 300px;
    height:40px;
    background:white;
    border-radius: 40px;
    text-align: center;
    color:#3A3A3A;
    line-height: 38px;
    cursor: pointer;
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.1);
}
.continueWithGoogle:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.8);
}
.continueWithFacebook:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.8);
}

.blogHighlight {
    border-radius: 16px;
    background: #e3deff;
    padding:16px;
    text-align: center;
}

.blogTags {
    margin-bottom: 8px;
}

.blogTag {
    display: inline-block;
    background: #e3deff;
    margin-right: 4px;
    padding:4px 8px 4px 8px;
    border-radius: 8px;
}

.blogTag.green {
    background: #e3f9f3;
}
.blogTag.red {
    background: #ffe3e4;
}
.blogTag.orange {
    background:#ffd393;
}

.boldPurple {
    font-weight: 600;
    color:#9187d3;
}
.boldGreen {
font-weight: 600;
    color:#55ccaa;
}
.boldRed {
font-weight: 600;
    color:#fb7179;
}

.todayHeaderContainer {
    font-weight: 600;
    font-size: 20px;
    border-radius: 16px 16px 0px 0px;
    width:100%;
    text-align: center;
    display: inline-block;
}


.emphasizedText {
    border-radius: 16px;
    background:white;
    display: inline-block;
    padding: 16px;
    margin-bottom: 8px;
    width:100%;
}

.emphasizedText.purple {
    background: #d4ccff;
}
.emphasizedText.darkPurple {
    background: #776ac8;
    color:white;
}

.emphasizedText.yellow {
    background: #fff4e3;
}

.emphasizedText.green {
    background: #e3f9f3;
}

.emphasizedText.red {
    background: #ffe3e4;
}

.largeNumber {
    font-size:1.5rem;
    margin: 8px;
    font-weight: 600;
}

.largeNumber.red {
    color:#fb7179;
}
.largeNumber.green {
    color:#55ccaa;
}

.feedbackLabel {
    margin-top: 8px;
    font-weight: 600;
    margin-bottom: 0px;
}

.blockNavTitleSeperator {
    display: inline-block;
}

.selectOneOptionContainer {
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  margin-right: 1px;
  margin-bottom:1px;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.selectOneOptionContainer.dark {
  background: #f1ebe5;
}

.selectOneOptionContainer:hover {
  background:#e5dffb;
}

.selectOneOptionContainer.selected {
  border:3px solid #9187d3;
}

.selectOneOption {
  background: white;
  border-radius: 10px;
  padding: 15px 16px;
  margin-top: 16px;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.selectOneOption:hover {
  background:#e5dffb;
}
.selectOneOptionText {
  margin: 0px;
  margin-left: 10px;
  font-weight:500;
  font-size: 18px;
  max-width:800px;
  cursor: pointer;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.blockNavOption {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 8px;
    margin: 4px;
    padding:8px;
    font-size: 1.25rem;
    cursor: pointer;
}
.blockNavOption:hover {
    background: #e3deff;
 }

.glossaryTitle {
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 110%;

/* or 15px */
letter-spacing: 0.04em;
text-transform: capitalize;
}

.welcomeLarge {
    font-weight: bold;
    margin-top: 16px;
    line-height: 1.2;
    margin-left:32px;margin-right:32px;font-size:32px;
}

.welcomeDescription {
    width:70%;
    margin: 0 auto;

    display: block;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 30px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

.glossaryEntryTitle {
    margin-bottom:8px;
    padding: 16px;
    border-radius: 16px;
}

.glossaryTermContainer {
    display:inline-block;
    width:316px;
    vertical-align: top;
    text-align: left;
}

.glossaryEntry {
    background: #C4C0BE;
    border: 2px solid #C4C0BE;
    margin-bottom:8px;
    padding: 16px;
    border-radius: 16px;
    width: 300px;
    display: inline-block;
    margin-right: 8px;
}

.glossaryEntry.unlocked {
    background: white;
}

.glossaryEntry.unlocked:hover {
    border: 2px solid #9187D3;
    background: white;
}

.glossaryTerm {
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    cursor: help;
}

.bounce {
    animation: BounceAnimation 5s linear infinite;
}

@keyframes BounceAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.listCheck {
    margin:8px;
}

.accountSection {
    width:100%;
    background: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}

.welcomeImg.bigOnly {
    display: inline-block;
}

.bigTitle {
    font-weight: 500;
    font-size: 5rem;
    margin-bottom: 16px;

    background: #FFC876;
    background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mediumTitle {
    font-weight: 500;
    font-size: 4rem;
    margin-bottom: 16px;
    margin-left:32px;margin-right:32px;

    background: #FFC876;
    background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradientText {
    background: #FFC876;
    background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.biaTitle {
background: #FFC876;
background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
.biaTitle.dark {
background: #3a3a3a;
background: linear-gradient(to top left, #3a3a3a 18%, #3a3a3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}

.treatMyPhobiaTitle {
background: #FFC876;
background: linear-gradient(to top left, #9187D3 18%, #55ccaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
.treatMyPhobiaTitle.dark {
background: #3a3a3a;
background: linear-gradient(to top left, #3a3a3a 18%, #3a3a3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}

.gradientCircle {
    display:block;
    background: linear-gradient(239.92deg, rgba(227, 222, 255, 0.8) -0.64%, rgba(227, 249, 243, 0.8) 98.73%);
    filter: blur(35px);
    width: 529px;
    margin-left: -529px;
    margin-bottom: -531px;
    height: 531px;
    border-radius: 50%;
}

.gradientCircle.right {
    display:block;
}

.gradientBackground {
    background: linear-gradient(108.07deg, #fff4e3 -5.2%, #e3f9f3 103.39%);
}

.chartSelectorWrapper {
    background: white;
    display: inline-block;
    border-radius: 16px;
    margin-bottom: 16px;
}

.chartSelector {
    margin: 4px;
    border-radius: 12px;
    display: inline-block;
    padding: 16px;
    cursor: pointer;
}
.chartSelector:hover {
    background: #9187d3;
    color:white;
}

.chartSelector.active {
    background:#9187d3;
    color: white;
}

.errorMessage {
    color:#FB7179;
}

.discomfortStart {
    font-weight: 700;
    color:#FB7179;
}

.discomfortGoal {
    font-weight: 700;
    color:#55CCAA;
}
.discomfortTarget {
    font-weight: 700;
    color:#776ac8;
}

.summaryListItem {
}

.summarySection {
    background: white;
    border-radius: 16px;
    padding:8px;
    margin-bottom: 8px;
}

.minorText {
    opacity: 0.7;
}

.loginStatusMessage {
    display: block;
    color:#FB7179;
}

.passwordEye {
    display: block;
    position: relative;
    top:-28px;
    right:-300px;
    margin-top:-16px;
    margin-bottom:-16px;
    margin-right:-22px;
    margin-left:-22px;
    cursor: pointer;
    width:22px;
    height:16px;


    background-repeat: no-repeat;
}

.loginSubmitButton {
    border:none;
    width: 100%;
    height: 64px;
    background: #776ac8;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 64px;
    margin-top: 8px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.loginSubmitButton:focus {
    background-color: #776ac8;
    border:2px solid blue;
}

.loginSubmitButton:hover {
    background-color: #776ac8;
}

.aboutScreenshot {
    max-width: 320px;
    margin:10px;
    border-radius: 16px;
}

.negativeMarginWhenSmall {
    margin-left:0px;
}

.screenshotContainer {
    padding-top: 16px;
    display: inline-block;
    vertical-align: top;
    border-radius: 16px;
    background: #E3DEFF;
    margin-bottom: 16px;
    font-weight: 600;
    margin-left: 2px;
    margin-right: 2px;
}

.redButton {
    border:none;
    background-color:#FB7179;
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    text-align: center;
}

.redButton:focus {
    background-color: #ff4550;
}
.redButton:hover {
    background-color: #ff4550;
}
.greenButton {
    border:none;
    background-color:#76d6ba;
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    text-align: center;
}

.greenButton:focus {
    background-color: #55ccaa;
}
.greenButton:hover {
    background-color: #55ccaa;
}

.seeMore {
  line-height: 120%;
  font-weight: 600;
  font-size: 16px;
  padding-top:8px;
  padding-bottom: 8px;
  color:#3A3A3A;
  cursor: pointer;
}
.seeMore:hover {
   color:#776ac8;
}

.exitButtonX {
    padding-top: 22px;
}

.exitButton {
    width: 64px;
    height: 64px;
    background: #3A3A3A;
    border-radius: 16px;
    align-items: center;
    padding: 0px;
    text-align:center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.exerciseToolbox {
    width: 64px;
    height: 64px;
    background: #3A3A3A;
    border-radius: 16px;
    align-items: center;
    padding: 0px;
    text-align:center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.exitButton:hover {
    background: #9187D3;
}

.cancelButton {
    background:none;
    color:#3A3A3A;
    border:none;
    min-width: 200px;
    height: 48px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
}

.cancelButton:hover {
    background: #4e4e4e;
    color:white;
}

.cancelButton:disabled {
    background:#4e4e4e;
    color:#FFFFFF;
}

.cancelButton:disabled:hover {
    background-color: #4e4e4e;
}

.outlineButton {
  background:white;
    border:none;
    min-width: 200px;
    height: 48px;
    border: 1px solid #9187D3;
    color:#3A3A3A;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
}
.outlineButton.small {
  width:150px;
  min-width: 150px;
  margin:4px;
}
.outlineButton.wide {
  max-width:350px;
  width:100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:4px;
  margin-bottom:4px;
  height:56px;
  border-radius: 16px;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(10deg); }
   75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  animation: wiggle 2.5s infinite;
}

.purpleGlow {
  box-shadow: rgba(227, 222, 255, 0.8) 0 0 90px 33px;
}

.outlineButton:hover {
    background: #9187D3;
    color:#FFFFFF;
}

.footerButton {
    border:none;
    padding:8px;
    height: 48px;
    background: #776ac8;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 32px;
    cursor: pointer;
    display: inline-block;
}
.footerButton:hover {
    background-color: #776ac8;
}

.footerButton:focus {
    background-color: #776ac8;
}

.confettiCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

.standardButton {
    border:none;
    min-width: 200px;
    height: 48px;
    background: #9187D3;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    position: relative;
    z-index: 100;
}

.standardButton.small {
  width:150px;
  min-width: 150px;
  margin:4px;
}
.standardButton.wide {
  max-width:350px;
  height:56px;
  width:100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:4px;
  margin-bottom:4px;
  border-radius: 16px;
}
.standardButton.long {
    border:none;
    min-width: 200px;
    height: 48px;
    background: #9187D3;
    border-radius: 10px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: normal;
    cursor: pointer;
    margin:8px;
    display: inline-block;
    position: relative;
    z-index: 100;
    white-space: normal;
    word-wrap: break-word; 
}

.standardButton.progress {
    position: relative;
}

.standardButton.inline {
    display: inline-block;
    width: 100px
}

.standardButton.disabled {
    background-color: #4e4e4e;
}

.standardButton.disabled:hover {
    background-color: #4e4e4e;
}

.standardButton:disabled {
    background-color: #4e4e4e;
}

.standardButton:disabled:hover {
    background-color: #4e4e4e;
}

.standardButton:hover {
    background-color: #776ac8;
}

.standardButton:focus {
    background-color: #776ac8;
}

.journeyWelcome {
    text-align: center;
    padding-top:50px;
    padding-bottom: 0px;
}

.phaseTitle {
    line-height: 1.1;
    padding-top: 50px;
    margin-bottom: 8px;
    display: block;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}

.complete {
    background:#e3f9f3;
}

.overlayTitle {
    text-align: center;
    font-size: 25px;
    margin-bottom: 16px;
    font-weight: bold;
}

.severityLabel {
  font-weight: 600;
  padding:5px;
  border-radius: 5px;
}
.severityLabel.little {
  background:#e5f8f1;
}
.severityLabel.mild {
  background:#f4f5e9;
}
.severityLabel.moderate {
  background:#fff3e3;
}
.severityLabel.severe {
  background:#ffede3;
}
.severityLabel.extreme {
  background:#ffe6e3;
}

.phaseDescription {
    width:70%;
    margin: 0 auto;

    display: block;
    text-align: center;
    padding-bottom: 30px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}
.phaseDescription.short {
    padding-bottom: 10px;
}

.exerciseHistory {
    padding-top:4px;
}

.exerciseHistoryLink {
    color: #9187D3;
    padding-top: 6px;
}

.exerciseHistoryLink:hover {
    color: #776ac8;
}

.exerciseImgContainer {
    width:217px;
    height:123px;
    margin-bottom: 2px;
    margin-top:12px;
}

.activityImgContainer {
    width:123px;
    height:123px;
    margin-bottom: 2px;
    margin-top:12px;
}
.exerciseStatusWrapper {
    border-radius: 10px;
    position: relative;
    width: 52px;
    height: 52px;
    left: 110px;
    bottom:10px;
    margin-left:-52px;
    margin-bottom:-52px;
    margin-top:-8px;
}

.startJourneyPrompt {
    font-weight: 400;
    font-size: 14px;
    color: #3A3A3A;
}

.statusPopup {
  box-shadow: 0px 4px 15px rgba(0,0,0, 0.3);
}

.statusPopup:after {
  content:"";
  position:absolute;
  bottom:-12px; /* value = - border-top-width - border-bottom-width */
  left:187px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#FFF transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.statusPopup.exerciseStatus-complete:after {
  border-color:#E3F9F3 transparent;
}
.statusPopup.exerciseStatus-progress:after {
  border-color:#FFF4E3 transparent;
}
.statusPopup.exerciseStatus-locked:after {
  border-color:#E5DFFB transparent;
}
.statusPopup.exerciseStatus-skipped:after {
  border-color:#E3F9F3 transparent;
}
.statusPopup.exerciseStatus-improve:after {
  border-color:#FFE3E4 transparent;
}
.statusPopup.exerciseStatus-scheduled:after {
  border-color:#E5DFFB transparent;
}

.exerciseStatus {
    background: #FFFFFF;
    margin-top:8px;
    margin-right:8px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 10px;
    position: relative;
    margin-left:-44px;
    margin-bottom:-44px;
    left:22px;
    top:8px;
}
.exerciseStatus.complete {
    background: #E3F9F3;
    background-repeat:no-repeat;
    background-position: center center;
}
.exerciseStatus.scheduled {
    background: #E5DFFB;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.skipped {
    background: #E3F9F3;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.locked {
    background: #E5DFFB;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.progress {
    background: #FFF4E3;
    background-repeat:no-repeat;
    background-position: center center;
}

.exerciseStatus.improve {
    background: #FFE3E4;
    background-repeat:no-repeat;
    background-position: center center;
}

.activityImg {
    width:116px;
    height:116px;
}
.exerciseImg {
    width:125px;
    height:116px;
}
.exerciseImg.complete {
  background: none;
}
.exerciseImg.locked {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.exerciseTitle {
    font-weight: 700;
    font-size: 24px;
    padding: 2px;
    padding-bottom: 0px;
}

.exerciseTitle.long {
    font-size: 18px;
    line-height: 23px;
    font-weight: 700;
}

.exerciseTitle.flipped {
    font-size:18px;
    line-height: 23px;
    padding-top:2px;
}

.accountSettingTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
}

.horizontalFieldContainer {
    display: inline-block;
    margin-top: 15px;
}

.exerciseDescription {
    font-weight: 400;
    font-size: 14px;
    padding: 1px;
    padding-top: 0px;
    margin-left:3px;
    margin-right:3px;
    line-height: 1.3;
}

.exerciseDescription.overflow {
    overflow-y:scroll;
    overflow-x:hidden;
    scrollbar-width:none;
    text-overflow:ellipsis;
}

.exerciseDescription.short {
    padding-top: 8px;
    font-size: 18px;
}

.wrapper {
    width:100%;
    background: white;
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}
.beigeWrapper {
    width:100%;
    background: white;
    border-radius: 16px;
    padding:30px;
    margin-bottom:20px;
}
.resourceContainer {
    width:100%;
    border-radius: 16px;
    background:#ebe8ff;
    padding:0px;
    margin-bottom:20px;
}

.exerciseLockMessage {
    font-weight: 400;
    font-size: 14px;
    padding: 2px;
    margin-left:3px;
    margin-right:3px;
    background: #E5DFFB;
    border-radius: 10px;
    min-height: 48px;
}

.exercisesContainer2 {
    width:90%;
    margin-left: auto;
    margin-right: auto;
}

.welcomeImg.smallOnly {
    display: none;
}
.smallOnly {
  display: none;
}
.smallOnlyInline {
  display: none;
}


.wideOnly {
  display: block;
}
.wideOnlyInline {
  display: inline-block;
}

.contentPreview {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
    margin:2px;
    padding:4px;
    background:white;
    border-radius: 8px;
}

.wideVideoContainer {
    display:block;
}
.narrowVideoContainer {
    display:none;
}
.smallScrollingNav {
    display: none;
}

.exerciseSquare {
    vertical-align: top;
    white-space: normal;
    display: inline-block;
    margin:5px;
    width:221px;
    height:221px;
    background: #FFFFFF;
    border-radius: 10.8235px;
    padding: 8px 2px 8px 2px;
}

.exerciseSquare:hover {
  background: #FFFFFF;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.resourceCard {
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 04px8pxrgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 8px;
  max-width: 300px;
  min-width: 300px;
  min-height: 350px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: normal;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resourceCard.locked {
  background:#a7a7a7;
}

.resourceCard:hover {
  transform: translateY(-5px);
  box-shadow: 08px 8px rgba(145, 135, 211, 0.8);
}

.glossaryCard {
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 04px8pxrgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 8px;
  max-width: 300px;
  min-width: 300px;
  min-height: 200px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: normal;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glossaryCard.locked {
  background:#a7a7a7;
}

.glossaryCard:hover {
  transform: translateY(-5px);
  box-shadow: 08px 8px rgba(145, 135, 211, 0.8);
}

.resourceTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

.resourceType {
  font-size: 14px;
  color: #777;
  margin-bottom: 4px;
}
.resourceImage {
  text-align: center;
}
.resourceImage img {
  border-radius: 4px;
  max-height: 100px;
  width:50%;
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

.welcomeBody {
  
}

.resourceDescription {
  font-size: 16px;
  color: #3d3d3d;
  margin-bottom: 20px;
}


.clickableSpan {
    cursor: pointer;
}

.phaseEnd {
    padding-top:80px;
}
.phaseEnd.small {
    padding-top:10px;
}
.phaseEnd.medium {
    padding-top:30px;
}


.journeyContainer {
    background: linear-gradient(160deg, #d4ccff, #d5f6ed);
    border-radius: 26px;
}

.horizontalScrollIndicatorContainer {
    text-align: center;
    height: 15px;
    margin-top: 20px;
}
.horizontalScrollIndicatorContainer.smallOnly {
    display:none;
}


.floatingFooterContainer {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0px;
    line-height: 30px;
    z-index:10;
}

.floatingFooterContainerSmall {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 8px;
    line-height: 30px;
    z-index:10;
}

.floatingFooterWide {
    width:100%;
    margin: auto;
    min-height: 64px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.floatingFooterSmall {
    margin-bottom: 30px;
    width:100%;
}

.smallFloatingFooterContent {
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    padding-top:10px;
    padding-bottom:10px;
    overflow:hidden;
    max-height:0px;
    transition: none;
}

.smallFloatingFooterContent.open {
    background: rgba(255, 255, 255, 1);
    max-height:600px;
    transition: max-height 0.25s ease-in;
}

.smallFloatingFooterClose {
    background: #9187D3;
    border-radius: 16px;
    text-align: center;
    color:#FFFFFF;
    padding:10px;
    margin-top:8px;
    height: 56px;
    cursor: pointer;
}

.smallFloatingFooterClose:hover {
    background-color: #776ac8;
}

.floatingFooterSmallIcon {
    display:inline-block;
    margin-right: 10%;
}

.floatingFooterSmallExpandIcon {
    display:inline-block;
    position: absolute;
    top: 40px;
    right: 15px;
}

.floatingFooterSmallLabel {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    display:inline-block;
    width:100%;
    font-weight: 600;
    font-size: 16px;
    padding-top:15px;
    padding-bottom:10px;
    padding-left:20px;
    line-height: 120%;
    height: 56px;
}

.carouselQuote {
  padding-top: 8px;
  height:80%;
}
.carouselQuoteInner {
display: flex;
align-items: center;
justify-content: center;
height:100%;
}

.smallFooterPhaseTitle {
    color: #3A3A3A;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    padding:8px;
    margin-bottom:-1px;
    margin-top:-1px;
    cursor: pointer;
}

.smallFooterPhaseTitle:hover {
    color: #9187D3;
}

.smallFooterPhaseTitle.active {
    background-color: #E5DFFB;
    color: #9187D3;
}

.smallFooterPhaseTitle.last {
    margin-bottom:-10px;
    border-radius: 0px 0px 16px 16px;
}

.smallFooterPhaseTitle.firstShowing {
    margin-top:-10px;
    border-radius: 16px 16px 0px 0px;
}

.footerPhaseTitle {
    vertical-align: middle;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    padding:5px;
    margin-top: 13px;
    color:#3A3A3A;
    /*transition: background-color 1s, color 1s;*/
    border-radius: 10px;
}

.footerPhaseTitle:hover {
    color: #9187D3;
    transition: none;
}

.footerPhaseTitle.active {
    background-color: #9187D3;
    border-radius: 10px;
    color:#FFFFFF;
} 

.footerPhaseTitleSeperator {
    vertical-align: middle;
    font-size: 16px;
    display: inline-block;
    margin-top: 13px;
    color: #4e4e4e;
}

.footerTitle {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 500;
}

.footerTitle.dark {
  color: #3A3A3A;
}

.footerLink {
    color: #FFFFFF;
    opacity: 0.7;
}

.footerLink.dark {
  color: #3A3A3A;
}

.exerciseStartButton {
    width:88%;
    margin-top:auto;
    background: #9187D3;
    border-radius: 10px;
    height: 48px;
    color:#FFFFFF;
    font-weight: 600;
    font-size: 18px;
    line-height: 48px;
    cursor: pointer;
}

.exerciseStartButton:hover {
    background-color: #776ac8;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    cursor: pointer;
}
.overlay.show {
	display:block;
}

.overlay.fill {
  background-color: #e3deff;
}

.journeyOverlayContent {
    margin-left:16px;
    margin-right:16px;
}

.loginOverlay {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 415px;
    background-color:#e3deff;
    padding: 30px 40px 30px 40px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
.journeyOverlay {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 415px;
    background-color:#e3deff;
    padding: 16px 16px 10px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
.alertOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);
}

.alertOverlayContent {
  background-color: #e3deff;
  border-radius: 26px;
  width: 100%;
  max-width: 415px;
  max-height: 100%;
  overflow: auto;
  padding: 30px 40px;
  box-sizing: border-box;
}

.exitWithoutSavingOverlay {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 415px;
    background-color:white;
    padding: 0px 40px 40px;
    border-radius: 26px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 200;
}
 
.loginTitle {
    font-weight: 600;
    font-size: 32px;
    text-align: center;
}

.loginSwitch {
    text-align: center;
    color: #4e4e4e;
    font-weight: 400;
    font-size: 17px;
}

.purpleLink {
    color:#7061C7;
    font-weight: 600;
    cursor: pointer;
}

.purpleLink:hover {
    color:#776ac8;
    text-decoration: underline;
}

.redLink {
    color:#FB7179;
    cursor: pointer;
}

.redLink:hover {
    color:#f0434c;
}

.emailInput {
    width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    margin-top:16px;
    padding:16px;
    border:0;
    outline:0;
}

.textInput.short {
    width:250px;
}

.textInput {
    width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    padding:16px;
    border:0;
    outline:0;
    border: 1px solid #9187d3;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.textInput.wide {
  margin-left: 0px;
  margin-right: 0px;
  max-width:350px;
  width:100%;
}

.textInput.disabled {
    background: #C4C0BE;
}

.textInput:focus {
    border:1px solid #776ac8;
}

.textInput:read-only {
    background-color: #C4C0BE;
}

.emailInput:read-only {
    background-color: #C4C0BE;
}

.emailInput:focus {
    border:1px solid #776ac8;
}

.passwordInput {
    width: 335px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    margin:5px;
    padding:16px;
    border:0;
    outline:0;
}

.passwordInput:focus {
    border:1px solid #776ac8;
}


.rememberMeCheckbox {
    margin:5px;
}

.purpleCheckbox:checked {
    accent-color: #776ac8;
}

.rememberMeCheckbox:checked {
    accent-color: #776ac8;
}

.rememberMeLabel {
    color: #4e4e4e;
    font-weight: 500;
    font-size: 14px;

}

.forgotPasswordLink {
    float:right;
    color: #7061C7;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.forgotPasswordLinkCenter {
  color: #7061C7;
  margin:8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.forgotPasswordLinkCenter:hover {
    color: #776ac8;
}

.forgotPasswordLink:hover {
    color: #776ac8;
}

.pageTitle {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 110%;
    color: #4e4e4e;
    letter-spacing: 0.04em;
}

input.bigCheckbox {
  margin:10px;
  margin-left: 5px;
  transform: scale(1.5);
  accent-color: #55CCAA;
}

.howItWorksList {
    padding-top: 20px;
    padding-left: 0px;
}
.howItWorksList li {
    text-align: left;
    min-width: 302px;
    max-width: 650px;
    background: white;
    list-style-position: inside;
    list-style-type: none;
    font-weight: 500;
    border-radius: 8px;
    padding:8px;
    margin-bottom:8px;
    font-size: 1.25rem;
}

.languageOption {
    border:1px solid #9187D3;
    height: 36px;
    padding: 4px;
    border-radius: 10px;
    color:#3A3A3A;
    background: none;
    font-weight: 500;
    font-size: 18px;
    font-style:normal;
    line-height: 28px;
    cursor: pointer;
    margin:4px;
    display: inline-block;
}

.languageOption.selected {
  background: #9187D3;
  color:white;
}

.languageOption.disabled {
    background-color: #4e4e4e;
}

.languageOption.disabled:hover {
    background-color: #4e4e4e;
}

.languageOption:disabled {
    background-color: #4e4e4e;
}

.languageOption:disabled:hover {
    background-color: #4e4e4e;
}

.languageOption:hover {
    background-color: #776ac8;
    color:white;
}

.languageOption:focus {
    background-color: #776ac8;
}

.resourceFilter {
  color:#6c63ff;
  display: inline-block;
  border: 1px solid #6c63ff;
  border-radius: 8px;
  padding:4px;
  margin: 4px;
  cursor: pointer;
}
.resourceFilter.purple {
  color:#ad63ff;
  border: 1px solid #ad63ff;
}
.resourceFilter.black {
  color:#3A3A3A;
  border: 1px solid #3A3A3A;
}
.resourceFilter.black.show {
  background: #3A3A3A;
  color:white;
}
.resourceFilter.purple.show {
  background: #ad63ff;
  color:white;
}
.resourceFilter.show {
  background: #6c63ff;
  color:white;
}
.resourceFilter.show:hover {
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
  color:white;
}

.resourceFilter:hover {
  background: #6c63ff;
  color:white;
}
.resourceFilter.black:hover {
  background: #3A3A3A;
  color:white;
}
.resourceFilter.purple:hover {
  background: #ad63ff;
  color:white;
}
.resourceFilter.purple.show:hover {
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
  color:white;
}

.waveBackgroundLayered2 {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/waves3.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/waves3.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.waveBackgroundLayered {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/wave_background_layered_2.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/wave_background_layered_2.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.greenWaveBackground {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background1.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background1.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.greenWaveBackground2 {
  background: white;
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background.png");
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/green_wave_background.png"), linear-gradient(160deg, #fcfbff, #faf9ff);
}
.background4 {
  background-image: url("https://cdn.biajourney.com/commonAssets/image/background/4.png");
}

@media (min-width: 1920px) {
.waveBackgroundLayered {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}
.waveBackgroundLayered2 {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}
.greenWaveBackground {
  background-repeat: repeat-y;
  width:100%;
  background-size:     cover;  
}

}

.navIcon {
  height:60px;
}
.navIconContainer {
text-align: center; 
padding-right: 8px;
}

@media only screen and (max-width: 998px) {
  .navLink {
   padding-left: 13px;
   padding-right: 13px; 
  }

}

@media only screen and (max-width: 768px) {
  .welcomeTitle2 {
  font-size: 2.25rem;
  text-align: center;
}
.smallScrollingContainer {
	max-height:500px;
	overflow-y:auto;
}
.welcomeTitle3 {
  text-align: center;
}
  .navLink {
   padding-left: 10px;
   padding-right: 10px; 
  }
    .wideBreak {
        display: none;
    }
    .journeyWelcome {
        padding-top: 25px;
        padding-bottom: 0px;
    }

    .wideVideoContainer {
        display: none;
    }
    .narrowVideoContainer {
        display:block;
    }
    .smallScrollingNav {
        display: block;
    }

    .examplePillContainer {
        white-space: nowrap;
        overflow-x:auto;
        margin-bottom: 0px;
    }

    .beigeWrapper.narrowSmall {
        padding:15px;
    }

    .welcomeImg.bigOnly {
        display: none;
    }
    .welcomeImg.smallOnly {
        display: block;
    }

    .exercisesContainer2 {
        width:100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 20px;
    }

    .accountSection {
        padding-left: 8px;
    filter: none;
    border-radius: 0px;

    }

    .phaseDescription {
        width:90%;
    }

    .completeIntro {
        width:90%;
    }

    .phaseTitle {
        font-size: 45px;
    }

    .journeyOverlay {
        padding: 32px 32px 10px;
    }

    .gradientCircle.right {
        display: none;
    }

    .negativeMarginWhenSmall {
        margin-left: -28px;
    }

    .emailInput {
    width: 310px;
    margin-right: 0px;
  }
  .passwordInput {
    width: 310px;
    margin-right: 0px;
  }
  .textInput.shortIfNeeded {
    width:250px;
  }
  .wideOnly {
    display: none;
  }
  .wideOnlyInline {
    display: none;
  }
  .bioText {
    width:100%;
  }
  .loginOverlay {
    padding: 10px 40px 10px 40px;
}
.simpleCard.wide {
    width:280px;
    height: 180px;
  }
  .simpleCard {
    width:140px;
    height: 140px;
  }
  .simpleCardImg {
    display: inline-block;
    height:80px;
  }
  .quoteContainer {
  overflow-x:scroll;
  }
  .horizontalScrollIndicatorContainer {
    margin-top: 0px;
}
.horizontalScrollIndicatorContainer.smallOnly {
    display: block;
}
.smallOnly {
  display: block;
}
.smallOnlyInline {
  display: inline-block;
}

.scrollDot.active {
    height: 15px;
    margin-bottom: 0px;
    width: 15px;
}
.homeQuoteInner {
  height: 160px;
}
.mediumTitle {
font-size:3rem;
margin-left:16px;margin-right:16px;
  }
  .bioAbout {
}
  .resourceCard {
    max-width: 100%;
    margin: 10px;
    min-width: 250px;
  }
  .welcomeLarge {
    font-weight: bold;
    margin-top: 16px;
    line-height: 1.2;
    margin-left:16px;margin-right:16px;font-size:32px;
}
.homeQuoteContainer {
  height:225px;
  }
.homeStatContainer {
  height:225px;
  }
  .cookieOption {
      width:85%;
      font-size: 1.2rem;
  }
  .carousel-container {
    width:300px;
  }
  .carouselButton {
    display: none;
  }
  .carousel-card {
    height:200px;
    padding:20px;
  }
  .userQuote {
  font-size: 1rem;
}
.carouselQuote {
  padding-top: 8px;
  height:90%;
}
.navPadding {
  padding-left:15px;
  padding-right:15px;
}
.featureThreeBlock {
  width:100%;
}
.featureThreeBlock.middle {
  margin-left: 0px;
  margin-right: 0px;
  margin-top:16px;
  margin-bottom: 16px;
}
}