@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html, body {
    padding: 0;
    margin: 0;
    background-color: rgb(36,31,26);
    color: white;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    overflow: hidden;
}

.debug :is(a, button, input, #notesContainer) {
        border: 1px solid red !important;
}

a, button {
    color: white;
    background: transparent;
    cursor: pointer;
    border: none;
}

#app {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1512px;
    transition: transform 1s ease-out;
    align-items: center;
    justify-content: center;
}

.container img {
    display: block;
    max-width: 100%;
}

#interactions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#app.show-gameplan .container {
    transform: translateX(-55%);
}

#app.show-gameplan.gameplanStep1 #gameplan1 {
    transform: translateX(50%);
}

#app.show-gameplan.gameplanStep2 #gameplan1 {
    transform: translateX(50%);
}

#app.show-gameplan.gameplanStep2 #gameplan2 {
    transform: translateX(130%);
}

.mobile-gameplan {
    position: absolute;
    height: 95vh;
    transform: translateX(400%);
    transition: transform 1s ease-out;
}

.mobile-gameplan img{
    height: 100%;
}

#notesContainer {
    display: none;
    position: absolute;
    top: 13.2%;
    left: 79.4%;
    width: 19.6%;
    height: 84.5%;
    border-radius: 0 0 32px 0;
}

#notesContainer .ql-editor.ql-blank::before {
    color: white;
}

#notesContainer.ql-container {
    font-size: 1rem;
}

/** SCREEN: PRACTICE HOME **/
#practiceHome a#clientSummary {
    position: absolute;
    top: 26.8%;
    left: 33%;
    width: 33.9%;
    height: 9.5%;
}

/** SCREEN: CLIENT SUMMARY **/
#clientSummary a#systems {
    position: absolute;
    top: 23.5%;
    left: 2.4%;
    width: 7.2%;
    height: 5.5%;
}

/** SCREEN: LEFT NAV CLIENT SYSTEMS -- SHARED **/
#system-sleep {
    position: absolute;
    top: 12.4%;
    left: 0%;
    width: 6%;
    height: 8.7%;
}

#system-metabolic {
    position: absolute;
    top: 22%;
    left: 0%;
    width: 6%;
    height: 8.7%;
}

#system-cardio {
    position: absolute;
    top: 31.7%;
    left: 0%;
    width: 6%;
    height: 8.7%;
}

/** SCREEN: TOP NAV -- SHARED **/
#navigateToSummary {
    position: absolute;
    top: 2.9%;
    left: 31.2%;
    width: 5%;
    height: 5%;
}

#navigateToScore {
    display: none;
    position: absolute;
    top: 2.9%;
    left: 60.2%;
    width: 7%;
    height: 5%;
}

#navigateToRisks {
    position: absolute;
    top: 2.9%;
    left: 37.2%;
    width: 4%;
    height: 5%;
}

#navigateToSystems {
    position: absolute;
    top: 2.9%;
    left: 45.9%;
    width: 5.3%;
    height: 5%;
}

#navigateToTimeline {
    position: absolute;
    top: 2.9%;
    left: 58.9%;
    width: 4.2%;
    height: 5%;
}

/** SCREEN: CLIENT SYSTEMS -- SLEEP **/
#clientSystemsSleep #toggleNotes {
    position: absolute;
    top: 1.5%;
    left: 83.5%;
    width: 4.3%;
    height: 7.5%;
}

#clientSystemsSleep #toggleProfile {
    position: absolute;
    top: 1%;
    left: 5.8%;
    width: 13%;
    height: 8%;
}

/** SCREEN: CLIENT SYSTEMS -- METABOLIC **/
#clientSystemsMetabolic #editScore {
    position: absolute;
    top: 14.4%;
    left: 14.4%;
    width: 3.2%;
    height: 7%;
}

#clientSystemsMetabolic #setScore {
    position: absolute;
    top: 27.4%;
    left: 46.9%;
    width: 6.1%;
    height: 18.8%;
}

#clientSystemsMetabolic #editRanges {
    position: absolute;
    top: 17.7%;
    left: 58.5%;
    width: 4%;
    height: 6.6%;
}

#clientSystemsMetabolic .input-row {
    position: absolute;
    left: 49.4%;
}

#clientSystemsMetabolic .input-row:nth-of-type(1) {
    top: 37.3%;
}

#clientSystemsMetabolic .input-row:nth-of-type(2) {
    top: 43.4%;
}

#clientSystemsMetabolic .input-row:nth-of-type(3) {
    top: 49.4%;
}

#clientSystemsMetabolic .input-row:nth-of-type(4) {
    top: 55.5%;
}

#clientSystemsMetabolic .input-row:nth-of-type(5) {
    top: 61.5%;
}

#clientSystemsMetabolic .input-row input {
    width: 11.5%;
    padding: 0.5rem 0.2rem;
    border: none;
    margin-right: 7.3%;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
}

#clientSystemsMetabolic .input-row input:focus {
    outline: none;
}

#clientSystemsMetabolic #saveRanges {
    position: absolute;
    top: 74.4%;
    left: 54.3%;
    width: 7.2%;
    height: 6%;
}

/** SCREEN: CLIENT SYSTEMS -- SCORE **/
#clientScore #scoreStep1 {
    position: absolute;
    top: 64.5%;
    left: 7.5%;
    width: 4.6%;
    height: 6.2%;
}

#clientScore #scoreStep2 {
    position: absolute;
    top: 29.5%;
    left: 19.9%;
    width: 2.2%;
    height: 4.2%;
}

#clientScore #scoreStep3 {
    position: absolute;
    top: 78.1%;
    left: 20.9%;
    width: 3%;
    height: 5.3%;
}

#clientScore #scoreStep4 {
    position: absolute;
    top: 54.8%;
    left: 15.6%;
    width: 2.4%;
    height: 3.5%;
}

#clientScore #scoreStep5 {
    position: absolute;
    top: 58.4%;
    left: 15.6%;
    width: 2.4%;
    height: 8.3%;
}

#clientScore #scoreStep6 {
    position: absolute;
    top: 41.9%;
    left: 27%;
    width: 2.5%;
    height: 4.6%;
}

#clientScore #scoreStep7 {
    position: absolute;
    top: 63.2%;
    left: 32.8%;
    width: 4.5%;
    height: 6.6%;
}

#clientScore #scoreStep8 {
    position: absolute;
    top: 43.8%;
    left: 37.5%;
    width: 3.3%;
    height: 4.1%;
}

#clientScore #scoreStep9 {
    position: absolute;
    top: 27%;
    left: 39.6%;
    width: 2.6%;
    height: 4.7%;
}

#clientScore #scoreStep10 {
    position: absolute;
    top: 21.3%;
    left: 71.1%;
    width: 3.7%;
    height: 5.6%;
}

#clientScore #scoreStep11 {
    position: absolute;
    top: 53.3%;
    left: 66.1%;
    width: 2.5%;
    height: 8.1%;
}

#clientScore #scoreStep12 {
    position: absolute;
    top: 28.3%;
    left: 77.3%;
    width: 2.5%;
    height: 4.5%;
}

#clientScore #scoreStep13 {
    position: absolute;
    top: 2.2%;
    left: 87.6%;
    width: 3.6%;
    height: 6.5%;
}

#clientScore #scoreStep14 {
    position: absolute;
    top: 19.5%;
    left: 81.8%;
    width: 16.9%;
    height: 4.9%;
    cursor: text;
}

#clientScore #scoreStep15 {
    position: absolute;
    top: 28.4%;
    left: 79.4%;
    width: 17%;
    height: 4.8%;
}

#clientScore #scoreStep16 {
    position: absolute;
    top: 19.5%;
    left: 81.8%;
    width: 16.9%;
    height: 4.9%;
    cursor: text;
}

#clientScore #scoreStep17 {
    position: absolute;
    top: 93.1%;
    left: 79.5%;
    width: 19.3%;
    height: 5.6%;
}

/** SCREEN: CLIENT TIMELINE **/
#clientTimeline .timelineStep1 {
    position: absolute;
    top: 12%;
    left: 90%;
    width: 2.5%;
    height: 5%;
}

#clientTimeline .timelineStep2 {
    position: absolute;
    top: 26%;
    left: 83%;
    width: 11.6%;
    height: 4%;
    cursor: text;
}

#clientTimeline .timelineStep3 {
    position: absolute;
    top: 29.5%;
    left: 81%;
    width: 12.9%;
    height: 5%;
}

#clientTimeline .timelineStep4 {
    position: absolute;
    top: 12%;
    left: 90%;
    width: 2.5%;
    height: 5%;
}

#clientTimeline .timelineStep5 {
    position: absolute;
    top: 26%;
    left: 83%;
    width: 11.6%;
    height: 4%;
    cursor: text;
}

#clientTimeline .timelineStep6 {
    position: absolute;
    top: 21.4%;
    left: 94.7%;
    width: 3.3%;
    height: 5%;
}

#clientTimeline .timelineStep7 {
    position: absolute;
    top: 12%;
    left: 4.7%;
    width: 8.2%;
    height: 5%;
}

#clientTimeline .timelineStep8 {
    position: absolute;
    top: 65%;
    left: 47.8%;
    width: 4.6%;
    height: 6.2%;
}

#clientTimeline .timelineStep9 {
    position: absolute;
    top: 29.9%;
    left: 60.1%;
    width: 2.5%;
    height: 4.6%;
}

#clientTimeline .timelineStep10 {
    position: absolute;
    top: 76.2%;
    left: 57.2%;
    width: 3.4%;
    height: 5.6%;
}

#clientTimeline .timelineStep11 {
    position: absolute;
    top: 53.5%;
    left: 52.2%;
    width: 2.4%;
    height: 3.5%;
}

#clientTimeline .timelineStep12 {
    position: absolute;
    top: 57.2%;
    left: 52.2%;
    width: 2.4%;
    height: 8.3%;
}

#clientTimeline .timelineStep13 {
    position: absolute;
    top: 40.6%;
    left: 63.6%;
    width: 2.5%;
    height: 4.6%;
}

#clientTimeline .timelineStep14 {
    position: absolute;
    top: 63.2%;
    left: 32.8%;
    width: 4.5%;
    height: 6.6%;
}

#clientTimeline .timelineStep15 {
    position: absolute;
    top: 62.4%;
    left: 66%;
    width: 3.3%;
    height: 5.4%;
}

#clientTimeline .timelineStep16 {
    position: absolute;
    top: 43.4%;
    left: 69.9%;
    width: 3.9%;
    height: 4.1%;
}

#clientTimeline .timelineStep17 {
    position: absolute;
    top: 47.3%;
    left: 73.1%;
    width: 4.1%;
    height: 4.1%;
}

#clientTimeline .timelineStep18 {
    position: absolute;
    top: 21.6%;
    left: 91.8%;
    width: 4.1%;
    height: 5.7%;
}

#clientTimeline .timelineStep19 {
    position: absolute;
    top: 52%;
    left: 84.5%;
    width: 2.6%;
    height: 8.7%;
}

#clientTimeline .timelineStep20 {
    position: absolute;
    top: 27.2%;
    left: 96.1%;
    width: 2.6%;
    height: 5%;
}

#clientTimeline .timelineStep21 {
    position: absolute;
    top: 2%;
    left: 88%;
    width: 3%;
    height: 7.3%;
}

#clientTimeline .timelineStep22 {
    position: absolute;
    top: 19.5%;
    left: 81.8%;
    width: 16.9%;
    height: 4.9%;
    cursor: text;
}

#clientTimeline .timelineStep23 {
    position: absolute;
    top: 28.4%;
    left: 79.4%;
    width: 17%;
    height: 4.8%;
}

#clientTimeline .timelineStep24 {
    position: absolute;
    top: 19.5%;
    left: 81.8%;
    width: 16.9%;
    height: 4.9%;
    cursor: text;
}

#clientTimeline .timelineStep25 {
    position: absolute;
    top: 93.1%;
    left: 79.5%;
    width: 19.3%;
    height: 5.6%;
}

#clientTimeline #navigateToPlan {
    position: absolute;
    top: 2%;
    left: 88%;
    height: 7%;
    width: 3%;
}

#newSummaryNav {
    position: absolute;
    top: 2.9%;
    left: 31.2%;
    width: 5%;
    height: 5%;
    z-index: 100;
}

#newSummaryContent {
    display: none;
    position: absolute;
    top: 11%;
}

#newSummaryProfile {
    display: none;
    position: absolute;
    top: 9%;
    left: 1.8%;
}

/* loader styles https://cssloaders.github.io/ */
#loader {
    position: absolute;
    top: 50%;
    left: 50%;
}

#loader p {
    position: relative;
    left: -50%;
}

.loader {
    font-size:48px;
    color: #FFF;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-color: currentcolor;
    position: relative;
    border-radius: 50%;
    transform: rotateX(-60deg) perspective(1000px) translate(-50%, -50%);
  }
  .loader:before,
  .loader:after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    animation: flowerFlow 1s ease-out infinite;
  }
  .loader:after {
    animation-delay: .4s;
  }

  @keyframes flowerFlow {
    0% {
      opacity: 1;
      transform: rotate(0deg);
      box-shadow: 0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor,
      0 0 0 -.5em currentcolor;
    }
    100% {
      opacity: 0;
      transform: rotate(180deg);
      box-shadow: -1em -1em 0 -.35em currentcolor,
      0 -1.5em 0 -.35em currentcolor,
      1em -1em 0 -.35em currentcolor,
      -1.5em 0 0 -.35em currentcolor,
      1.5em -0 0 -.35em currentcolor,
      -1em 1em 0 -.35em currentcolor,
      0 1.5em 0 -.35em currentcolor,
      1em 1em 0 -.35em currentcolor;
    }
  }