div.journey {
    margin:0 auto;
    margin-top: 10px;
    width:100%;
}

.journeyEditContainer {
    padding-bottom:16px;
    padding-right:16px;
    text-align: right;
}
.journeyEditOption {
    background:white;
    display: inline-block;
    margin:8px;
    border-radius: 8px;
    padding:8px;
}
.journeyPathContainer {
    width:60%;display:inline-block;
}
.journeyPath {
    width: 100%; height: auto;overflow: visible;
    stroke-width:0.2;
    stroke:#d4ccff;
    stroke-dasharray:1,0.2;
}
.exerciseCircle {
    background: white;
    aspect-ratio: 1 / 1;
    height: 100%;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    transform:translate(-50%);
    cursor: pointer;
    padding:4px;
    border:6px solid white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.exerciseActivityImg {
  height: 48px;
  width: 48px;
  object-fit: contain;
  float: left;
  margin: -48px;
  left: 42px;
  position: relative;
  top: 55px;
}
.journeyPath.lockedPath {
    stroke:#776ac8;
}
.journeyPath.skippedPath {
    stroke:#9de2ce;
    stroke-dasharray:none;
}
.journeyPath.shadow-skippedPath {
    
}
.journeyPath.completePath {
    stroke:#55ccaa;
    stroke-dasharray:none;
}
.journeyPath.progressPath {
    stroke:#ffd393;
    stroke-dasharray:none;
}
.journeyPath.improvePath {
    stroke:#fb7179;
    stroke-dasharray:none;
}
.exerciseCircleStatus {
    border-radius: 16px;
    background: white;
}
.exerciseCircleStatus.complete {
    background: #e3f9f3;
}
.exerciseCircleStatus.scheduled {
    background: #d4ccff;
}
.exerciseCircleStatus.improve {
    background: #FFE3E4;
}
.exerciseCircleStatus.progress {
    background: #FFF4E3;
}
.exerciseCircleStatus.locked {
    background: #d4ccff;
}
.exerciseCircleStatus.skipped {
    background: #9de2ce;
}
.exerciseCircleStatus.shadow-skipped {
    
}

.exerciseCircle.lockedCircle {
    background: #d4ccff;
    border-color:#d4ccff;
    box-shadow: none;
}
.exerciseCircle.completeCircle {
    border-color:#55ccaa;
}
.exerciseCircle.scheduledCircle {
    border-color:#d4ccff;
}
.exerciseCircle.progressCircle {
    border-color:#ffd393;
}
.exerciseCircle.improveCircle {
    border-color:#fb7179;
}
.exerciseCircle.skippedCircle {
    border-color:#9de2ce;
}
.exerciseCircle.shadow-skippedCircle {
    
}
.exerciseCircleText {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.exerciseCircleImg {
    height:100%;
    width:100%;

}
.exerciseCircle:hover {
    
}
.exerciseCircle.left {
    transform:translate(-50%);
}
.exerciseCircle.right {
    transform:translate(50%);
}
.exerciseCircleContainer {
    height:8rem;
}
.exerciseCircleContainer.left {
    text-align: left;
    margin-left:20%;
}
.exerciseCircleContainer.right {
    text-align: right;
    margin-right:20%;
}
.pinnedDiv {
    background-color:rgba(255, 255, 255, 0.9);
    padding: 20px;
    width: 100%;
    position: sticky;
    top: 8px; /* 8px gap between the div and the top of the viewport */
    z-index: 10; /* Optional, ensures the div stays above other elements */
    border-radius: 16px;
}
.journeyChapterTitle {
    color: #776ac8;
    font-size: 2rem;
    width: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
    padding-top:32px;
    padding-bottom: 32px;
}

.todayEnd {
    color: #776ac8;
    font-size: 2rem;
    width: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
    padding-top:32px;
    padding-bottom: 32px;
}

.journeyChapterTitle::before, 
.journeyChapterTitle::after {
    content: '';
    position: absolute;
    top: 50%; /* Align the lines vertically in the middle */
    width: 30%; /* Width of the lines */
    height: 4px; /* Thickness of the lines */
    background-color: #776ac8;
    transform: translateY(-50%); /* Center the lines vertically */
}

.journeyChapterTitle::before {
    left: -60px; /* Distance from the left edge */
}

.journeyChapterTitle::after {
    right: -60px; /* Distance from the right edge */
}

div.phaseDiv {
    margin-left: 5%;
    margin-right: 5%;
}

.todaySection {
    margin-top: 32px;
    width:100%; 
    display: inline-block;
}

div.next {
    border:1px solid black;
    width:80%;
    padding:10px;
    margin:0 auto;
    margin-top:5px;
}

div.phaseHeaderDiv {
    border-top:1px solid black;
    border-bottom:1px solid black;
    margin-top:0px;
    margin-bottom:5px;
    padding:5px;
    text-align:center;
}

div.endDiv {
    border-bottom:1px solid black;
    margin-top:0px;
    margin-bottom:5px;
    padding:5px;
    text-align:center;
}

span.phaseHeaderMore {
    float:right;
}

h3.phaseHeader {
    display:inline-block;
}

div.exerciseThumbnailContainer {
    display:inline-block;
    max-width:200px;
    vertical-align:top;
}

div.exerciseThumbnail {
    display: inline-block;
    border:1px solid black;
    margin:15px 35px 0px 35px;
    height:100px;
    width:100px;
    padding:10px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

div.exerciseThumbnailText {
    display: grid;
    height:100%;
    place-items: center;
}

div.exerciseThumbnail:hover {
    background-color:#DBEAFA;
}


div.levelDiv {
    text-align: center;
}

span.phaseHeaderMore {
    cursor: pointer;
}

span.phaseHeaderMore:hover {
    font-weight:bold;
}

@media only screen and (max-width: 768px) {
.todaySection {
    width:100%;
}
.journeyPath {
    stroke-width:0.4;
    stroke-dasharray:1.2,0.5;
}
.container.smallFullWidth {
     margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100% !important;
  }
  .exerciseCircleContainer {
    height:5rem;
}
}