.devices {
  display: flex;
  width: 100%;
}

.DeviceList {
  padding: 10px;
  flex-direction: column;
  display: flex;
  /* text-align: center; */
  font-size: 17px;
  margin-top: 0px;
  min-height: 10vh;
  /* background-color: var(--light-blue); */
  /* position: relative; */
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid black;
  /* box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 8px 8px rgb(0 0 0 / 11%), 0 16px 16px rgb(0 0 0 / 11%), 0 32px 32px rgb(0 0 0 / 11%);
 */
}

.full-width {
  width: 100%;
}

.partial-width {
  width: 60%;
}
.measurement-card {
  box-shadow: none !important;
}
.device-main-content {
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  padding: 5px;
  background-color: 'black';
  width: 35%;
}

.device-data-content {
  display: flex;
  flex-direction: row;
  padding: 5px;
  background-color: 'black';
  justify-content: space-between;
}

.total-measurement {
  padding-left: 5px;
  color: black;
  font-size: 0.8rem;
}

.deviceName {
  color: var(--dark-blue);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.recorded-content {
  display: flex;
  font-size: 0.8rem;
  align-items: center;
}
.recorded-content-value {
  display: flex;
  flex-direction: row;
  padding-bottom: 8px 0px 8px 0px;
  font-size: 0.9rem;
  align-items: center;
  color: var(--dark-blue);
}
.image-box {
  width: 20%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.deviceimage {
  height: 80%;
  width: 80%;
  object-fit: contain;
}
.recorded {
  color: var(--dark-blue);
  font-weight: bold;
  padding-top: 2.5px;
  padding-left: 5px;
  font-size: 0.9rem;
}
.notrecorded {
  color: grey;
  font-weight: bold;
}

.not-configured {
  color: red;
}

.shipping-status {
  color: green;
  font-weight: normal;
}

.circleicon-recorded {
  background-color: green;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
  width: 20px;
  height: 20px;
}
.circleicon-not-recorded {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
  width: 20px;
  height: 20px;
}

.circleicon-not-configured {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: green;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
  width: 20px;
  height: 20px;
}

.configured {
  color: red;
  font-weight: bold;
  text-align: center;
  padding-bottom: 5px;
  font-size: 0.8rem;
}

.refresh-btn {
  background-color: transparent;
  border: none;
  color: blue;
  text-decoration: underline;
  font-size: 0.9rem !important;
}

.reload-icon {
  color: aqua;
  font-size: 1.2rem !important;
  margin-left: 2px !important;
  margin-top: 0px !important;
}
.refresh-div {
  margin-right: 30px;
  display: flex;
  align-items: flex-start;
}
.measurement-refresh-div {
  margin-right: 10px !important;
}
.measurement-refresh-div svg {
  font-size: 1.7rem !important;
}

.grid line {
  stroke: lightgray;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid .tick line {
  stroke-dasharray: 3;
}
.graph-devicename {
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  height: 5%;
}

.graph-date {
  text-align: center;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.chartToolTip {
  /* Block, not flex: the contents are <br/>-separated lines, and a flex row laid
     them out side by side — making the tip wide enough to be clipped at the
     chart edge. */
  display: block;
  align-self: flex-end;
  background-color: white;
  border-radius: 4px;
  /* margin-bottom: 1rem; */
  width: fit-content;
  max-width: 190px;
  white-space: nowrap;
  line-height: 1.35;
  pointer-events: none;
  padding: 6px 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.07),
    0 32px 64px rgba(0, 0, 0, 0.07);
}

.measurementLabel {
  margin: 0px 30px 0px 30px !important;
}
.measurementLabel > p {
  font-size: 1.6rem;
  margin-top: 12px;
  height: 42px;
  color: #012248;
}

:root {
  --dynamic-width: 0px;
  --dynamic-height: 0px;
}

.linegraphdata {
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;

  /* background-color: blue; */
}

.main-div {
  height: 100vw;
  /* background-color: blue; */
}
.main-div > div:first-child {
  height: 10%;
}
.graph-container {
  display: flex;
  justify-content: center;
  height: 94%;

  /* background-color:blue; */
}
.identifier {
  /* background-color: rgb(252, 244, 233); */
  margin-bottom: 5%;
  /* border: 1px solid black; */
}
.next-button,
.previous-button {
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  width: 50px;
  position: absolute;
}
.not-available {
  display: flex;
  justify-content: center;
  align-items: center;
}
.previous-button {
  left: 5%;
  bottom: 5%;
}

.next-button {
  right: 5%;
  bottom: 5%;
}
.scroll-text {
  display: flex;
  position: fixed;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
}
.scroll-text div {
  font-size: small;
  color: black;
  letter-spacing: 1px;
  padding-bottom: 20px;
  padding-right: 10px;
}

.measurement-container {
  height: 75vh !important;
}

:root {
  --orange-color: #f5881f;
  --light-blue: #ffffff;
  --list-orange: #012448;
  --list-blue: #ffffff;
  --dark-blue: #012448;
  /* --night-color: #321f61; */
  /* --night-color: #138dff; */
  --night-color: #68b6ff;
  /* --evening-color: #5a326e; */
  --evening-color: #68b6ff;
  /* --noon-color: #8d5173; */
  /* --noon-color: #f78f1e; */
  /* --noon-color: #f39a35ed; */
  --noon-color: #ffec9c;
  /* --morning-color: #e98180; */
  --morning-color: rgb(255, 248, 192);
  /* --morning-color: rgb(255 245 162); */
  --complete-color: green;
  --sky-blue: #1576f9;
  --text-field-background: #e5e5e5;
  --red-color: #ff0800;
}

.driver-popover.driver-reduce-padding-bottom {
  padding-bottom: 5px;
}

/* ── driver.js tutorial popover — modern redesign ── */
.driver-popover.driverjs-theme {
  background-color: #fff;
  color: #0F2A4C;
  padding: 0;
  border-radius: 18px;
  min-width: 300px;
  max-width: 360px;
  box-shadow: 0 24px 60px rgba(10,22,45,0.28), 0 6px 16px rgba(10,22,45,0.12);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  overflow: hidden;
}

/* Close button — circular, top-right */
.driver-popover.driverjs-theme .driver-popover-close-btn {
  display: none !important;
}

/* Block tap-through on the dark overlay — only Next/Done/Back buttons can advance */
.driver-overlay path {
  pointer-events: none !important;
}
.driver-popover.driverjs-theme .driver-popover-close-btn:hover,
.driver-popover.driverjs-theme .driver-popover-close-btn:focus {
  background: #E3E7EE;
  color: #0F2A4C;
}

/* Custom X close button injected by helpOverlay.js — circular, top-right of
   the popover. Clicking it destroys the tutorial cleanly. */
.driver-popover.driverjs-theme .tp-tutorial-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #7b8699;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  transition: background-color 120ms ease, color 120ms ease;
}
.driver-popover.driverjs-theme .tp-tutorial-close:hover,
.driver-popover.driverjs-theme .tp-tutorial-close:focus {
  background: #E3E7EE;
  color: #0F2A4C;
  outline: none;
}

/* Eyebrow (injected above title) */
.tp-tutorial-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #7b8699;
  padding: 16px 20px 3px;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, system-ui, sans-serif;
}

/* Title */
.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 19px;
  font-weight: 800;
  color: #0F2A4C;
  padding: 0 48px 12px 20px; /* right pad leaves room for close btn */
  border-bottom: 1px solid #EEF1F6;
  display: block;
  line-height: 1.2;
}

/* Description */
.driver-popover.driverjs-theme .driver-popover-description {
  font-size: 14px;
  color: #3c4b63;
  line-height: 1.55;
  padding: 12px 20px 0;
  margin: 0;
}
.driver-popover.driverjs-theme .driver-popover-description ul {
  margin-top: 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.driver-popover.driverjs-theme .driver-popover-description b {
  color: #0F2A4C;
}

/* Support block on the tutorial's final step (injected by helpOverlay.js).
   Deliberately the same treatment as the Support > MoveAI App Support block
   in components/DigitalHC/hcmessage.js — #eef4fb ground, 8px radius, centred
   — so the patient meets the same card twice and recognises it. */
.driver-popover.driverjs-theme .tp-tutorial-support {
  margin-top: 14px;
  padding: 10px 12px;
  background: #eef4fb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #3c4b63;
}
.driver-popover.driverjs-theme .tp-tutorial-support-tel {
  font-weight: 600;
  white-space: nowrap;
  color: #0a58ca;
  text-decoration: none;
}
.driver-popover.driverjs-theme .tp-tutorial-support-mail {
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  color: #0F2A4C;
}
.driver-popover.driverjs-theme .tp-tutorial-support-copied {
  color: #2e7d32;
  margin-left: 6px;
  font-weight: 600;
}

/* Progress dots (injected before footer) */
.tp-tutorial-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px 0;
}
.tp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D7DCE5;
  flex-shrink: 0;
  transition: all 220ms ease;
}
.tp-dot.tp-dot-active {
  width: 20px;
  border-radius: 4px;
  background: #0F2A4C;
}
.tp-dot.tp-dot-done {
  background: #0F2A4C;
  opacity: 0.32;
}

/* Footer */
.driver-popover.driverjs-theme .driver-popover-footer {
  padding: 12px 20px 8px;
  display: flex;
  align-items: center;
  margin-top: 0;
}
.driver-popover.driverjs-theme .driver-popover-progress-text {
  display: none !important;
}
.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  display: flex;
  gap: 8px;
  flex-grow: 1;
  justify-content: stretch;
}

/* Prev button — light secondary */
.driver-popover.driverjs-theme button.driver-popover-prev-btn {
  flex: 1;
  background: #F4F6FA;
  color: #0F2A4C;
  border: none;
  border-radius: 10px;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-shadow: none;
  text-align: center;
}
.driver-popover.driverjs-theme button.driver-popover-prev-btn:hover,
.driver-popover.driverjs-theme button.driver-popover-prev-btn:focus {
  background: #E3E7EE;
  color: #0F2A4C;
}

/* Next/Done button — navy primary; last step overridden to orange via JS class */
.driver-popover.driverjs-theme button.driver-popover-next-btn {
  flex: 2;
  background: #0F2A4C;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(15,42,76,0.22);
  text-shadow: none;
  text-align: center;
}
.driver-popover.driverjs-theme button.driver-popover-next-btn:hover,
.driver-popover.driverjs-theme button.driver-popover-next-btn:focus {
  background: #0a1e38;
  color: #fff;
}
.driver-popover.driverjs-theme button.driver-popover-next-btn.tp-done-btn {
  background: var(--orange-color);
  box-shadow: 0 4px 12px rgba(245,136,31,0.30);
}
.driver-popover.driverjs-theme button.driver-popover-next-btn.tp-done-btn:hover,
.driver-popover.driverjs-theme button.driver-popover-next-btn.tp-done-btn:focus {
  background: #e07510;
}
.driver-popover.driverjs-theme button.driver-popover-btn-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Language toggle (injected after footer) */
.tp-tutorial-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 20px 14px;
  cursor: pointer;
}
.tp-tutorial-lang-link {
  font-size: 12px;
  font-weight: 700;
  color: #7b8699;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, system-ui, sans-serif;
}
.tp-tutorial-lang:hover .tp-tutorial-lang-link {
  color: #3c4b63;
}

/* Arrow colours */
.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow  { border-left-color: white; }
.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: white; }
.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow   { border-top-color: white; border-width: 10px; }
.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow{ border-bottom-color: white; border-width: 10px; }

textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder {
  color: lightgrey;
}

pre {
  white-space: pre-wrap; /* legacy-WebKit equivalent of text-wrap: wrap (pre-iOS 17.4) */
  overflow-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--dark-blue);
}

.headerFirst {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
  padding-top: 0;
}
.headerSecond {
  flex: 1 0 100%;
  color: var(--dark-blue);
  text-align: left;
  padding-left: 10px;
  font-size: 17px;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-customer-name {
  color: var(--dark-blue);
  font-size: 17px;
  font-weight: bold;
  align-self: center;
  padding-left: 10px;
  max-width: 80%;
}

/* EXERCISE PAGE CSS */
.exercise {
  background-color: white;
  text-align: center;
  position: absolute;
  height: 81%;
  width: 100%;
  overflow-x: auto;
  top: 9%;
}

.PC,
.sc {
  /* border: 1px solid #1576f9; */
  /* border-radius: 50%; */
  height: 35px;
  width: 35px;
  font-size: 14px;
  /* background-color: #1576f9; */
  text-align: right;
  float: right;
  color: white;
}

.sc {
  /* border: 1px solid #012248; */
  border: 1px solid white;

  border-radius: 50%;

  /* background-color: #012248; */
  background-color: white;
}

.sc .navBtn {
  position: relative;
  top: -2px;
  left: -4px;

  /* fill:white */
  fill: #012248;

  height: 36px;
  width: 36px;
}

.PC1 {
  margin: 10px;
  position: relative;
  font-size: 13px;
  left: -2px;
}

/* EXERCISE DRAWER CSS */
.exerView {
  text-align: center;
  /* margin-top: 0px; */
  font-weight: bold;
  margin: 30px;
  margin-top: 3px;
  margin-bottom: 40px;
}

.instruction,
.doneDesc,
.Congratulations {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
}

.instruction {
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 10px;
}

.notification-lable {
  text-align: start;
  width: 60%;
  color: #012488;
}

.drawerIcon {
  color: #212121;
  opacity: 0.6;
  float: right;
  cursor: pointer;
  font-size: 34px !important;
  position: absolute;
  right: 4%;
  top: 12px;
  z-index: 2;
}

.MuiDrawer-paperAnchorBottom {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.bar {
  margin: auto;
  height: 4px;
  width: 100px;
  background-color: silver;
  border-radius: 25px;
  margin-top: 5px;
  opacity: 0.6;
  margin-bottom: 1px;
}
.repsDiv {
  border: 1px solid grey;
  border-color: rgba(192, 192, 192, 0.5);
  width: auto;
  border-radius: 5px;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  margin: 15px;
  margin-bottom: 35px;
}

.MuiDrawer-paperAnchorBottom {
  height: 98% !important;
  overflow-y: hidden !important;
}

.exercombtn,
.formbtn,
.formbtn1 {
  background-color: #012448 !important;
  color: white !important;
  width: 100%;
  height: 50px;
  font-size: 15px !important;
}

.formbtn1 {
  background-color: rgb(245, 146, 31) !important;
  text-shadow: grey 3px 3px 4px;
  font-weight: bold !important;
  font-size: 15px !important;
}

.formbtn1:disabled {
  background-color: grey !important;
}

.formbtn,
.formbtn1 {
  position: sticky !important;
  bottom: 0 !important;
  /* width: 98% ; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  margin: auto !important;
}

.formbtn:disabled {
  background-color: grey !important;
}

.formbtn {
  margin-right: 4px !important;
}

.exercomctn {
  width: auto;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  margin: 30px;
  margin-bottom: 35px;
}

.exercomctn .Mui-disabled {
  color: rgba(0, 0, 0, 0.26);
  /* opacity: 0.8; */
  background-color: grey !important;
}

/* NAVIGATION BAR CSS */
.navBar,
.submitnavbtn {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 10vh !important;
  background-color: var(--dark-blue) !important;
  color: white !important   ;
  z-index: 100;
}

.submitnavbtn {
  position: fixed !important;
  font-size: 165%;
  text-align: center;
  background-color: white !important;
}

.submitnavbtn p {
  position: relative;
  /* left: 50%; */
  top: 50%;
  transform: translateY(-50%);
  /* margin: 0px; */
  margin: auto;
}

.navBtn {
  width: 25px !important;
  height: 25px !important;
  /* border-radius: 50%; */
  /* border: 2px solid #012448; */
  /* color: #f89125; */
}
/* .navBtn svg g path {
        fill: white 
    } */

/* .st0{
        fill: thistle;
    } */

.MuiBottomNavigationAction-label {
  color: white !important;
  font-size: 0.74rem !important;
  padding: 2px;
}

.MuiBottomNavigationAction-label.Mui-selected {
  font-size: 0.74rem !important ;
  padding: 5px;
  color: #f79022 !important;
  padding: 2px;
}

.MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected {
  opacity: 1 !important;
  padding-top: 4px !important;
  fill: #f79022;
}

.MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected img {
  background-color: #f79022;
}

.MuiButtonBase-root.MuiBottomNavigationAction-root {
  /* opacity: 1 !important; */
  padding-top: 4px !important;
  fill: white;
  /* No bottom margin — it used to push the icon+label up inside .navBar and
     left a band of empty navy below the labels. */
}

/* EXERCISE LIST CSS */
/* .progressLabel, .listHeader {
        font-size: 2.1rem;
        font-weight: bold;
        border-bottom: 1px solid black;
        border-color: rgba(192,192,192,1);
        height: 50px;
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
    } */

.progressLabel,
.listHeader,
.listHeader_title {
  font-size: 2.1rem;
  font-weight: bold;
  border-bottom: 1px solid black;
  border-color: rgba(192, 192, 192, 1);
  height: 50px;
  text-align: left;
  margin-left: 15px;
  margin-right: 20px;
}

.listHeader {
  height: 42px;
}

.listHeader_title {
  height: 42px;
}
.header-row {
  display: flex;
  justify-content: center;
  position: relative;
  height: 50px;
  align-items: center;
}

/* Back arrow is overlaid on the left so the title stays centered in the
   full width of the bar instead of being pushed to the right. */
.header-row .device-icon {
  position: absolute;
  left: 0;
}

.listHeader_title > p {
  /* margin-top: 15px; */
  color: #012248;
  font-size: 1.6rem;
}

.progressLabel {
  margin-top: 8px;
  margin-bottom: 0px;
}

.listHeader > p {
  color: #012248;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listheader-contactus {
  font-size: 21px !important;
}

.icon {
  cursor: pointer;
  font-size: 36px !important;
  height: 16px;
  margin-right: 15px;
  margin-top: 8px;
  margin-left: 15px;
  /* // background-color: white;  */
}

/* .icon{
        cursor: pointer;
        font-size: 35px  !important;
        height: 28px;
        margin-right: 15px;
        margin-top: 11px;
    }  */

.List {
  display: flex;
  text-align: center;
  font-size: 17px;
  min-height: 192px;
  /* height: 165px; */
  /* border-bottom: 4px solid grey ; */
  /* border-color: rgba(255,255,255,1); */
  /* // margin: 30px;   */
  /* margin-bottom: 0px; */
  margin-top: 0px;
  background-color: var(--light-blue);
  position: relative;
  margin-bottom: 8px;
  border-radius: 4px;
  /* border: 2px solid white; */
  /*  box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 
            0 2px 2px rgb(0 0 0 / 11%),
            0 4px 4px rgb(0 0 0 / 11%), 
            0 8px 8px rgb(0 0 0 / 11%), 
            0 16px 16px rgb(0 0 0 / 11%),
            0 32px 32px rgb(0 0 0 / 11%) */
}

.collapse-cont {
  margin-bottom: 70px;
}

/* .List {
        display: flex;
        text-align: center;
        font-size: 16px;
        height: 165px;
        border-bottom: 1px solid grey ;
        border-color: rgba(192,192,192,0.25);
        margin: 30px;
        margin-bottom: 0px;
        margin-top: 0px;

    } */

.dateHeader {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  border-color: rgba(192, 192, 192, 0.25);
  margin: 30px;
  margin-top: 10px;
  margin-bottom: 5px;
  color: var(--dark-blue);
}

/* HOMEPAGE DATE CSS */
.date {
  /* font-size: 18px;
        font-weight: bold;
        text-align: left;
        border-bottom: 1px solid black;
        border-color: rgba(192,192,192,0.25);
        margin: 15px;
        margin-top: 5px;
        margin-bottom: 0px;
        padding-bottom: 20px; */
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid black;
  border-color: rgba(192, 192, 192, 0.25);
  margin: 30px;
  margin-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 10px;
  color: var(--dark-blue);
  display: flex;
  justify-content: space-evenly;
}

.datescroll {
  position: fixed;
  top: 11.5%;
  margin: auto;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 5px;
  color: white;
  background-color: grey;
  border-bottom: 0px;
  font-size: 12px;
  text-align: center;
  z-index: 100;
  /* width: 180px;    */
}

.hide {
  display: none;
}

/* COMPLETED ALL EXERCISES DRAWER CSS */
.doneView {
  height: 100%;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.Congratulations {
  margin-bottom: 30px;
  margin-top: 18px;
}

.checkBtn {
  background-color: #2e7d32;
  color: white;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
  height: 50px;
  width: 300px;
  border-radius: 8px;
  margin: auto;
  margin-top: 110px;
  margin-bottom: 80px;
  cursor: pointer;
}

.checkBtn > p {
  padding: 16px;
  font-size: 16px;
}

.doneDiv {
  margin: 30px;
  margin-top: 30px;
}

.doneDesc {
  text-align: left !important;
  font-size: 1.2rem;
}

/* PROGRESS CALENDER CSS */
/* .clndr {
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 45px;
    } */

.react-calendar__month-view__weekdays__weekday {
  padding: 0px !important;
  font-size: 10.5px;
  padding-bottom: 4px !important ;
}
.react-calendar {
  border: 0px !important;
  font-weight: bold !important;
  width: 99vw !important;
  margin: 0px 3px 0px 2px !important;
  /* margin-top: 14px !important ; */
}

.react-calendar__month-view__weekdays__weekday {
  border-bottom: 1px solid grey;
  border-color: rgba(192, 192, 192, 1) !important;
}

.react-calendar__tile {
  font-weight: 400 !important;
  font-size: 18px;
  /* height: 58px; */
}

.react-calendar__tile > svg {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(294deg)
    brightness(103%) contrast(102%);
}

.react-calendar__month-view__days__day--weekend {
  color: black !important;
}

.react-calendar__month-view__days__day--neighboringMonth {
  color: black !important;
}

.react-calendar button {
  /* padding-top: 5px;
        padding-bottom: 5px; */
}
.react-calendar__tile {
  height: 60px !important;
  padding: 5px !important;
}
.react-calendar__tile {
  /* border-bottom: 1px solid rgba(192,192,192,0.8) !important; */
}

.sdate {
  /* border-bottom: 2px solid #F79022 !important; */
  /* border: 1px solid #F79022 !important; */
}

.react-calendar__navigation__label {
  font-weight: bold;
  font-size: 15px;
  pointer-events: none;
  border: 0px !important;
}

.react-calendar__navigation__arrow {
  font-weight: bold;
  font-size: 28px;
  border: 0px !important;
  margin-top: -10px !important;
}

.react-calendar__navigation__next-button {
  padding-right: 0px !important;
}

.react-calendar__navigation__prev-button {
  padding-left: 0px !important;
}

.react-calendar__navigation Button {
  border: 0px !important;
  padding-top: 0px;
}

.react-calendar__navigation {
  margin-bottom: 0px !important ;
  height: 30px !important;
  /* background-color: #1576f9; */
  color: white !important;
}

.react-calendar__tile:disabled {
  background-color: white !important;
  color: silver !important;
}
.react-calendar__tile:disabled {
  background-color: white !important;
  color: silver !important;
  /* border: 1px solid red !important; */
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: white !important;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: white !important;
}

.container {
  position: absolute;
  height: 90% !important;
}

body {
  margin: 0px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--dark-blue);
  background-color: white;
}

.tilesurgeryday,
.tilecircletoday,
.tilecirclegreen,
.tilecircleamber,
.tilecircleblue,
.tilecircleblack,
.tilecirclered,
.react-calendar__tile div {
  width: 43px !important;
  /* height: 52px !important; */
  /* margin: 3px 0px !important; */
  display: flex;
  justify-content: center;
  align-items: center !important;
  border-radius: 50%;
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
}

.react-calendar__tile--now div {
  color: white !important;
  background-color: var(--sky-blue);
  border-radius: 50%;
  padding: 4px;
  width: 40px !important;
  height: 40px !important;
}
/* My class */
.tilecircleamber div {
  /* filter: invert(85%) sepia(48%) saturate(2845%) hue-rotate(347deg) brightness(91%) contrast(86%); */
  /* background-color:#FFECA1; */
}
.tilesurgeryday div {
  height: 42px !important;
  color: white;
  background-color: var(--orange-color);
  padding: inherit;
}
.tilecirclegreen div:first-child {
  /* filter: invert(37%) sepia(75%) saturate(1923%) hue-rotate(94deg) brightness(102%) contrast(106%) !important; */
  /* background-color:#abe5d0; */
  /* border: 1px solid green; */
  /* padding: 4px; */
  /* filter: invert(37%) sepia(75%) saturate(1923%) hue-rotate(94deg) brightness(102%) contrast(106%) !important; */
  /* background-color:#abe5d0; */
  border: 3px solid var(--complete-color);
  height: 42px !important;
  align-items: center;
  width: 42px !important;
}

.tilecircleblue div {
  /* filter: invert(54%) sepia(0%) saturate(0%) hue-rotate(287deg) brightness(93%) contrast(88%)  !important; */
  /* background-color:lightgrey; */
}

.tilecircleblack div {
  /* filter: invert(54%) sepia(0%) saturate(0%) hue-rotate(287deg) brightness(93%) contrast(88%) !important; */
  /* background-color:lightgrey; */
}

.tilecirclered div {
  /* filter: invert(10%) sepia(85%) saturate(7061%) hue-rotate(358deg) brightness(136%) contrast(115%); */
  /* background-color:#F8B7B8; */
}
.previous-week-complete {
  background: #e5ffed !important;
  border-radius: 0 !important;
  margin: 0px !important;
  height: 58px !important;
}
.current-week {
  border-top: 1.5px solid var(--sky-blue) !important;
  border-bottom: 1.5px solid var(--sky-blue) !important;
  border-radius: 0px !important;
}

.current-week-border-day-last {
  border-right: 1.5px solid var(--sky-blue) !important;
}

.current-week-border-day-first {
  border-left: 1.5px solid var(--sky-blue) !important;
}

.bubble-left {
  transform: translateY(38px) translateX(40px) !important;
}

.bubble-right {
  transform: translateY(38px) translateX(-40px) !important;
}

.today-text {
  position: absolute;
  color: white;
  transform: translateY(38px);
  padding: 6px;
  border-radius: 50px;
  font-size: 1rem;
  z-index: 1;
  height: 30px;
  letter-spacing: 2px;
  text-align: center;
  width: 130px;
  text-transform: uppercase;
  background-color: var(--sky-blue);
}

.calender-icon {
  width: 14px;
  height: 14px;
}
.calender-tile-content {
  display: 'flex';
  flex-direction: 'column';
  justify-content: 'space-around';
  height: '100%';
}
.calender-image-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 2px;
}

/* .tilecircleamber .dot  circle{
        fill:#FFCE70 !important;
    }

    .tilecirclegreen svg circle {
        fill:#57b894 !important
    } */

/* .tilecircleblue .dot circle { */
/* background:#64a4f8 !important; */
/* background: white !important;
        border: 1px solid grey !important; */
/* fill: lightgrey !important ; */
/* text-decoration: underline !important;
        text-decoration-color: black !important ;
        text-decoration-thickness: 2px ; */
/* 
        color: #006edc;
        font-weight: bolder; */
/* } */

.textcolor {
  color: #1576f9 !important;
  /* font-weight: bold !important; */
}

.react-calendar__tile--active {
  /* color: white !important; */
  background: none !important;
}

.react-calendar__month-view__days .previous-week-complete {
  background: #e5ffed !important;
}

.marktoday span::after {
  content: ' ';
  display: block;
  border-bottom: 2px solid #006edc !important;
  padding-top: 7.5px;
  width: 18px;
  /* align-items: center;// */
  /* text-align: center;// */
  margin-left: 6px;
}
/* {
        border-bottom: 2px solid black !important;
    }*/

/* .tilecircleblack div{
        background: white !important;
        border: 1px solid grey !important
    } */

/* .tilecircleblack .dot circle {
        fill: lightgrey;
    }

    .tilecirclered  .dot circle{
        fill:  #F86D70 !important;
    } */
.tilecircletoday abbr,
.tilecirclegreen abbr,
.tilecircleamber abbr,
.tilecircleblue abbr,
.tilecircleblack abbr,
.tilecirclered abbr,
.tile abbr {
  display: none !important;
}
.no-icon img {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(294deg)
    brightness(103%) contrast(102%);
}

.tile-date-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  padding-bottom: 2px;
}
.priority-event {
  max-width: 18px !important;
  max-height: 18px !important;
}

.tilecirclegreen abbr {
  display: none !important;
}
/* .marktoday span::after {
        content:" ";
        display:block;
        border-bottom: 1px solid black !important;
        padding-top: 7.5px;
        width: 18px;
        align-items: center;//
        text-align: center;//
        margin-left: 6px;
    } */

.faded > * {
  opacity: 0.5;
}

.faded > .completed {
  opacity: 1;
}

/* THUMBNAIL CSS */

/*.thumbnail , .thumbnailfaded{
        //height: 100px;
        //width: 80px;
        //position: relative;
        //top: 55px;
        height: 100px;
        width: 80px;
        position: absolute;
        right: 30px;
        margin-top: 55px;
    } */

.thumbnailfaded {
  opacity: 0.5;
}

.thumbnail,
.thumbnailfaded {
  height: 100px;
  width: 120px;
  position: absolute;
  right: 9px;
  margin-top: 50px;
  border-radius: 18px;
  border: 1px solid #012448;
  /*border-bottom-right-radius: 0px;*/
  padding: 2px;
}

/* .thumbnailfaded {
        opacity: 0.5;
    } */

.faded p,
.listContainer p {
  text-align: left;
  margin-top: 21px;
  color: var(--dark-blue);
  font-size: 17px;
  /* color: rgb(0, 110, 220); */
}

/* .faded  p, .listContainer p {
        text-align: left;
        margin-top: 22px;
    } */

.listContainer,
.faded {
  position: absolute;
  left: 75px;
}

.shortdesc {
  text-align: left;
  font-size: 15px;
  color: var(--dark-blue);
  /* font-weight: bold; */
}

.viewimage,
.videoview {
  max-height: 307px;
  max-width: 315px; /*230*/
  margin-bottom: 10px;
}

/* Tutorial illustration fills its column (.exerView, 30px side margins) so the
   tinted card lines up edge-to-edge with the bullet text and the START /
   CONTINUE button below it (.exercomctn, same 30px margins). Scoped to `img`:
   the tutorial <video> sits in an inline-block wrapper, where a percentage
   width collapses back to the intrinsic size, so it keeps the fixed cap above. */
img.viewimage {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
}

.image-sequence-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.image-sequence-item {
  position: relative;
  flex: 1;
  min-width: 0;
}

.image-sequence-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: rgba(1, 36, 72, 0.85);
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.image-sequence-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #012448;
}

.videoview {
  max-width: 315px;
}

.viewgif {
  max-height: 300px;
  max-width: 288px;
}

/* settings container css */
.settingscontainer {
  position: absolute;
  width: 100%;
  overflow-x: auto;
  height: 75vh;
  top: 64px;
}

/* PROGRESS CONTAINER CSS */
.progressContainer {
  position: absolute;
  height: 80vh;
  overflow-y: auto;
  top: 64px;
}

.progressDesc p {
  font-weight: bold;
  margin-left: 30px;
  font-size: 15px;
}

.progressDesc1 {
  font-size: 40px !important;
  margin-top: 0px;
  margin-bottom: 50px;
}

.progressLabel {
  /* font-weight: bold;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 17px; */
  margin-left: 0px;
  margin-right: 0px;
  height: 38px;
}
.readmore-button{
  margin-left: 7px;
  color: blue;
  text-decoration: underline;
  font-size: 14px;
}
.completed {
  color: #0b6904;
  opacity: 1;
  margin-top: -16px !important;
  margin-bottom: -18px !important;
  font-weight: bold;
}

.MuiSnackbar-anchorOriginBottomCenter {
  position: relative !important;
}
.MuiSnackbarContent-root {
  background-color: #012248 !important ;
  /* background-color: #f09026 !important ; */
  /* color: #012248 !important */
  color: white !important;
}

/* badge css */

.MuiBadge-anchorOriginTopRightRectangle {
  top: 14px !important;
  right: 16px !important;
}

.MuiBadge-badge {
  background-color: #f7472e;
}

/* notification css */

.notification {
  /* margin-bottom: 10px; */
  border-bottom: 1px solid silver;
  width: 100%;
}

.notifications-delete-icon {
  /* border-bottom: 1px solid silver; */
  margin-left: auto;
  margin-right: 20px;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 28px !important;
  color: #505050;
}

.notifications-delete-icon:hover {
  color: red;
}

.notcon {
  height: 36px;
}

.notify {
  user-select: none;
  -webkit-user-select: none; /* Safari fallback only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 315px;
  font-size: 12px;
  margin-bottom: 3px;
  margin-top: 6px;
  text-align: justify;
  text-align-last: left;
}

.dot,
.dot3,
.dot-a {
  /* height: 10px !important; */
  /* width: 10px !important; */
  /* margin-left: 10px; */
  /* margin-right: 10px; */
  /* margin-top: 18px; */
}

.dot,
.dot-a {
  /* height: 13px !important; */
  /* margin-top: 0; */
}

.selected-check {
  margin: 5px;
  color: #006edc;
}

.dot3 {
  /* height: 16px !important; */
  /* width: 16px !important; */
  color: var(--red-color) !important ;
  position: absolute;
  transform: translateX(-9px);
  /* position: relative !important; */
}
.doubledigit {
  transform: translateX(-13px) !important;
}
.dot1 {
  height: 16px !important;
  width: 16px !important;
  /* margin-left: -4px; */
  /* margin-right: -1px;*/
  margin-top: 15px;
  color: #f86d70;
}

.aptBtn {
  background-color: #012448 !important;
  color: white !important;
  /* left: 23%; */
  left: 50%;
  transform: translate(-50%);
  transform-style: preserve-3d;
  margin-bottom: 2% !important;
}

.notifheader {
  border-bottom: 1px solid silver;
  font-size: 18px;
  width: 94%;
  /* margin-bottom: 10%; */
  margin-left: 6%;
  margin-top: 40px;
}

.nonty {
  position: absolute;
  /* position: relative; */
  margin: auto;
  /* right: -10px; */
  left: 30%;
}

/* pie chart css */

.svgcont {
  margin-left: 10px;
  /* margin-top: 25px; */
  margin-bottom: 0px;
  display: flex;
}

.piedotscont {
  margin-top: 8px;
  /* margin-top: 46px; */
}

.piedots {
  margin-bottom: 5px;
  display: flex;
}
.progressicon {
  font-size: 18px !important;
  height: 20px;
  margin-right: 4px;
  margin-top: -5px;
  padding: 4px;
}
.dots {
  cursor: pointer;
  font-size: 26px !important;
  height: 28px;
  margin-right: 4px;
  margin-top: -5px;
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
  padding-bottom: 19px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
  position: relative !important;
  top: 25px;
  left: 6px;
  background-color: white;
  width: 23px;
}

.react-calendar__month-view__weekNumbers {
  flex-basis: auto !important;
}

.trial,
.trial3 {
  background-color: silver;
  height: 1px;
  position: relative;
  top: 23px;
  width: 23px;
}

.trial2 {
  background-color: white;
  height: 21px;
  position: relative;
  top: -14px;
  width: 30px;
}

.trial3 {
  width: 8%;
  background-color: rgba(192, 192, 192, 0.8);
  top: -22px;
}

.headerlogo {
  /* Logo auto-fits the AppBar height — if we change .mainheader height, the
     logo follows. The 8px clearance keeps the image off the 2px navy
     border-bottom (with a 6px visual buffer). No top padding so the image
     starts flush with the top of the AppBar and gets all available height. */
  max-height: calc(100% - 8px) !important;
  max-width: 92%;
  padding: 0 6px;
  object-fit: contain;
}

.mainheader {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center !important;
  color: white;
  background-color: white !important ;
  height: 64px !important;
  /* border-box so the 2px navy line lives INSIDE the 64px height — otherwise
     the line lives at y=64..66 and gets covered by content positioned at
     top: 64px (formContainer, etc.). */
  box-sizing: border-box !important;
  box-shadow: none !important ;
  border-bottom: 2px solid #012448;
}

.header-icons-box {
  /* Floats over the upper-right corner of the banner so the logo can extend
     freely beneath it. */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 2;
}
.bellBtn {
  width: 24px !important ;
  height: 24px !important;
  max-width: 40%;
  padding: 6px;
  font-size: 1.8rem !important;
}
.helpicon {
  max-width: 50%;
  font-size: 2rem !important;
  padding: 10px;
  color: #012448;
}
.bellbtn {
  /* White circular badge so the bell stays visible against any clinic banner.
     Sized for the 64px AppBar — leaves visual breathing room on the logo. */
  background-color: #ffffff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.bellbtn path {
  fill: #012448 !important;
}

.feedbackicon {
  max-width: 36px;
  position: relative;
  top: -2px;
}

.upperconnect,
.lowerconnect {
  background-color: transparent;
  width: 5px;
  height: 13px;
  border: 0px;
  /* border-style: dashed; */
  border-right: 3px dashed black;
  /* margin-left: 9px; */
  position: absolute;
  left: 28px;
  /* border-style: dashed;*/
  z-index: 1;
}

.lowerconnect {
  /* height: 115px; */
  height: 200px;
  margin-top: 24px;
}

.formradiobtn {
  /* position: absolute; */
  /* right: 22px; */
  margin-top: 10px;
  margin-left: auto;
  margin-right: 22px;
}

.formradiobtn1 {
  margin-top: 10px;
  margin-left: auto;
  margin-right: 8px;
}

.quesColumn {
  display: flex;
  flex-wrap: wrap;
}

.noexercise {
  margin: 20px 30px;
  font-size: larger;
  height: 54vh;
  color: var(--dark-blue);
}
.nomeasurements {
  margin: 20px 30px;
  font-size: large;
  height: 54vh;
}

.noexercise p,
.nomeasurements p {
  text-align: justify;
  text-align-last: left;
  margin-bottom: 0px !important;
}

.OfflineOverlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  /* top: 0;  */
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color:  yellow; */
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.offlinediv {
  background-color: rgb(245, 146, 31);
  padding: 8px;
  border-radius: 5px;
  font-size: 18px;
}

.offlineBtn {
  background-color: #012248 !important;
  padding: 3px;
  border-radius: 4px;
  color: white !important;
  margin-top: 2px !important;
}

.MuiSnackbarContent-message {
  font-size: 17px !important;
}

.MuiSnackbar-root {
  left: auto !important;
}

.MuiDrawer-paperAnchorBottom {
  max-height: 95% !important;
}

.notification-message {
  width: 68vw;
  font-size: 16px;
  height: 50px;
}

.notification-date {
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  /* margin-top: 8px; */
}
.deviceName {
  font-size: 19px;
  text-align: center;
}
.notification-msg-date {
  font-size: 12px;
  padding-left: 10px;
  align-self: center;
}
.notification-msg-header {
  display: flex;
  margin-bottom: 10px;
}

@media (max-width: 321px) {
  /* .tilecirclegreen div, .tilecirclegrey div, .tilecircleblue div {
            width: 26px !important;
            height: 26px !important;
            padding-top: 62% !important;
        } */

  /* .clndr {
            margin-left: 15px !important;
            margin-right: 15px !important;
            margin-bottom: 45px;
        } */

  /* .List {
            margin: 15px;
        } */

  .date {
    margin: 15px;
  }

  .listHeader {
    margin-left: 15px;
    margin-right: 15px;
  }

  .progressDesc p {
    font-weight: bold;
    margin-left: 15px;
    font-size: 10px;
  }

  .doneDiv {
    margin: 5px;
    margin-top: 5px;
  }

  .listContainer,
  .faded {
    position: absolute;
    left: 60px;
  }

  .videoview {
    max-width: 260px;
  }

  .notify {
    max-width: 279px;
  }

  .svgsubcont {
    width: 185px !important;
  }

  .datescroll {
    top: 8%;
    width: 180px;
  }

  .checkBtn {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .thumbnail,
  .thumbnailfaded {
    height: 75px;
    width: 120px;
    position: absolute;
    right: 9px;
    margin-top: 70px;
    border-radius: 18px;
    border: 3px solid #d69747;
    border-bottom-right-radius: 0px;
    padding: 2px;
  }

  .icon {
    cursor: pointer;
    font-size: 52px !important;
    height: 28px;
    margin-right: 5px;
    margin-top: 2px;
    margin-left: 5px;
  }

  .MuiBottomNavigationAction-wrapper {
    position: relative !important;
    top: 0 !important;
  }

  /* .tilecirclegreen svg , 
        .tilecircleamber svg , 
        .tilecircleblue svg ,
        .tilecircleblack svg ,
        .tilecirclered svg  {
            margin-left: -3px !important;
        } */

  .upperconnect,
  .lowerconnect {
    position: absolute;
    left: 24px;
    /* border-style: dashed; */
  }

  .upperconnect {
    height: 8px;
  }

  .lowerconnect {
    margin-top: 50px;
    height: 157px;
  }
}

@media (max-width: 375px) {
  .dot,
  .dot-a {
    margin-left: -1.8% !important;
  }
}

@media (max-width: 360px) {
  .dot,
  .dot-a {
    margin-left: -1.3% !important;
  }
}

@media (max-height: 667px) {
  .infopage {
    width: 290px;
    position: absolute;
    top: 28%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 47%;
    overflow-x: auto;
  }

  .mainarrow {
    top: 48% !important;
  }

  .checkBtn {
    /* margin-top: 75px; */
    margin-top: 35px;
    margin-bottom: 6px;
  }

  .MuiBottomNavigationAction-wrapper {
    position: absolute;
    top: 8px;
  }
}

@media (min-height: 812px) {
  /* body{
            margin: 25px 0px 5px 0px !important;
        } */

  .mainheader {
    height: 64px !important;
  }

  .headerlogo {
    /* align-self: center; */
    margin-left: 10px !important;
    /* max-height: 50%; */
    /* padding: 5px; */
  }

  .exercise {
    top: 12%;
    height: 78%;
  }

  .progressContainer {
    top: 64px !important;
    height: 80vh;
  }

  .MuiBottomNavigationAction-wrapper {
    top: 18% !important;
    /* position: absolute; */
  }

  .datescroll {
    top: 13.4%;
  }

  .bellbtn {
    top: 50%;
  }
}

@media (max-width: 362px) {
  .thumbnail,
  .thumbnailfaded {
    width: 110px !important;
  }
  .list-image {
    max-width: 110px !important ;
  }
}

/* } */

/* Profile / account container: clears the fixed AppBar (.mainheader is 64px
   tall) on all screen sizes. The min-height: 812px override below is kept
   so existing layout for taller phones is untouched. */
.profilecontainer {
  position: absolute;
  top: 64px;
  width: 100%;
}

.setdiv {
  width: 100%;
  background-color: #e5e5e5;
  border-radius: 10px;
  padding: 1px;
  /* max-height: 300px; */
  overflow-y: auto;
}
.caregiver-setdiv {
  border: 1px solid #cbc7c7 !important;
  min-height: 35px;
}

.device-setup {
  width: 100%;
  display: flex;
}
.modal-btn-color {
  color: white !important;
  background-color: var(--dark-blue) !important;
}

.devices-label {
  justify-content: space-between;
  font-weight: bold;
  font-size: larger;
}
.reply-icon {
  font-size: 15px !important;
}
.reply-div {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: end;
  gap: 5px;
}
.dialog-div {
  display: flex;
  justify-content: center;
}

.dialog-box {
  width: 100vw;
}

.player-wrapper {
  position: relative;
}

.react-player {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}

.spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.legend-circle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.legend-section > div:first-of-type {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 35px;
}
.legend-section p {
  color: var(--dark-blue);
}
.activity-circle {
  border: 4px solid var(--complete-color);
  width: 24px !important;
  height: 24px !important;
}
.surgery-circle {
  background-color: var(--orange-color);
}
.todays-circle {
  background-color: var(--sky-blue);
}
.legendModal-title {
  font-size: 16px !important;
  text-align: left !important;
  font-weight: 700 !important;
}
.custom-dialog-paper {
  min-width: 250px;
  /* position: fixed !important;    
  bottom: 10%;    */
}
.reminder-icon {
  color: var(--red-color);
}
.calender-legend {
  text-decoration: underline;
  color: var(--dark-blue);
  text-align: end;
  margin-right: 20px;
  font-weight: bold;
  margin-top: 24px;
  font-size: 14px;
}
.legend-close {
  font-size: 20px !important;
  color: var(--dark-blue);
  margin-right: 10px;
  position: absolute;
  right: 0;
}
.image-cancel{
  font-size: 30px !important;
  color: var(--dark-blue);
  margin-right: 10px;
  position: absolute;
  right: 0;
}
.legend-title {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid var(--dark-blue);
}
.legend-title h2 {
  font-weight: 600 !important;
  color: var(--dark-blue) !important;
  font-size: 18px !important;
}
.legend-section {
  display: flex;
  gap: 4px;
  height: 50px;
  align-items: center;
}

.dialog-close {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px #999;
}

.btn1 {
  border-bottom: 1px solid silver;
  margin-left: 15px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}

.status-container {
  min-width: 170px;
  max-width: 300px;
  display: flex;
  justify-content: space-around;
  margin: 0px 10px 0px 0px;
  align-items: center;
}
.external-icon {
  height: 20px;
  width: 20px;
  margin-left: 5px;
}
.status {
  font-size: 14px;
  font-weight: normal;
  color: green;
  align-self: center;
  text-decoration: none;
}

.refresh-button {
  background-color: transparent;
  border: none;
  color: blue;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0 2px 0px 0px;
}

.refresh-info {
  font-size: 17px;
  font-weight: 500;
  padding: 10px;
  color: #012248;
}

.reload-icon {
  color: white !important;
  background-color: #012448;
  font-size: 1.4rem !important;
  border-radius: 50%;
  margin-top: 5px !important;
  padding: 1px;
}

.btn1 p {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #012248;
}

.btn2 p {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #012248;
}
.myprofile p {
  min-height: 16px;
}

.btn2 {
  margin-left: 15px;
  font-size: 18px;
  display: flex;
}

.none {
  padding-right: 15px;
}

.setdiv-heading {
  /* color:#012488 ; */
  color: var(--dark-blue);
}

.sub-heading {
  font-size: 12px;
}

.labelRow {
  display: flex;
  justify-content: space-between;
}

.btnlabel,
.btnlabel1 {
  font-size: 22px;
  margin-bottom: 5px;
  text-indent: -24px;
  position: relative;
  left: 24px;
  /* width: 347px; */
  margin-right: 24px;
  white-space: pre-line;
}

.btnlabel1 {
  text-indent: -36px;
  left: 36px;
  /* width: 347px; */
  margin-right: 36px;
}

.settdiv {
  margin-bottom: 25px;
}

.surgery {
  color: #012448;
  font-size: 42px;
  margin-bottom: 15px;
  margin-top: 20px;
}

.surgeryimg {
  max-width: 100%;
}

.dialog .MuiButton-root {
  min-width: 48% !important;
  border-radius: 0;
  border-right: 1px solid silver;
  height: 45px;
}

.dialog .MuiButton-textPrimary {
  color: #1576f9 !important;
}

.dialog .MuiDialogActions-root {
  border-top: 1px solid silver;
  padding: 0;
}

.dialog .MuiDialog-paperWidthSm {
  border-radius: 20px;
}

.MuiDialogTitle-root {
  padding: 6px 24px !important;
  text-align: center;
}

.setBackbtn,
.backeditbtn {
  background-color: #012448 !important;
  color: white !important;
  width: 80%;
  position: absolute !important;
  left: 0;
  right: 0;
  margin: auto !important;
  margin-bottom: 8% !important;
  margin-top: 5px !important;
}

.setBackbtn {
  margin-bottom: 10px !important;
}

.floatBtn {
  background-color: #012448 !important;
  color: white !important;
  position: absolute !important;
  border-radius: 50% !important;
  height: 65px;
  width: 65px;
  bottom: 20px;
  right: 20px;
}

.backeditbtn {
  /* padding: 6px 8px; */
  border: radius;
  border-radius: 5px;
  color: white;
}

.addeditbtn {
  width: 50%;
  color: white !important;
}
.caregiverLink {
  /* height: 32px !important;
  margin-top: 5px !important; */
  width: 35vw;
  text-align: right;
  padding-right: 20px;
  text-decoration: underline;
}
.caregiver-btn {
  font-size: 14px !important;
  align-items: center !important;
  display: block;
  width: 100%;
  margin-bottom: 10px !important;
}
.hc-btn {
  font-size: 14px !important;
  align-items: center !important;
  width: 90% !important;
  margin-top: 10px !important;
}
.caregiver-cancel {
  background-color: red !important;
  border: 0 !important;
  color: white !important;
}
.surgedit {
  position: absolute;
  right: 6%;
  margin-top: 9px;
}

.profiletoast {
  position: sticky !important;
  /* left: 8px !important; */
  /* right: 8px !important; */
  margin-left: 8px;
  margin-right: 8px;
  bottom: 45% !important;
  top: 0 !important;
}

.MuiFormLabel-root.Mui-focused {
  color: #012448 !important;
}

.phoneinput {
  font-size: 18px;
  width: 100%;
  padding: 2px;
}

.notifyphone input {
  font-size: 18px;
}

.notifyphone input:focus {
  outline: none;
}

.settoast {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 0px !important;
  top: 0px !important;
}

.settoast .MuiSnackbarContent-root {
  flex-grow: unset !important;
}

.flexbtn {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.flexbtn p {
  margin-right: auto !important;
}

/* .MuiSwitch-colorSecondary.Mui-checked {
    color: #F79022 !important;
}

.switchBase {
    color: red
} */

@media (min-height: 812px) {
  /* .settingscontainer {
    top: 90px;
    height: 74vh;
    position: fixed;
    width: 100%;
  } */

  .profilecontainer {
    top: 64px;
    height: 74vh;
    position: fixed;
    width: 100%;
  }
}
.msg-surgeon-btn {
  color: white !important;
  width: 90%;
  margin: auto !important;
  margin-bottom: 20px !important;
  margin-top: 5px !important;
  background-color: var(--orange-color) !important;
}
/* Message shown under CONTACT SURGERY TEAM when in-app clinic messaging is off.
   The <p> otherwise adds its ~16px default top margin on top of the button's
   20px margin-bottom (~36px gap); a negative top margin pulls it back to ~half. */
.clinic-contact-message {
  margin-top: -2px;
  margin-bottom: 10px;
}
.health-coach-buttons {
  margin-left: 10%;
}
.healtch-coach-btn {
  background-color: #012448 !important;
  color: white !important;
  width: 90%;
  margin: auto !important;
  margin-bottom: 20px !important;
  margin-top: 5px !important;
}
.renderCase {
  height: 84%;
  overflow-y: auto;
  border-top: 1px solid #012488;
  padding: 26px 22px 22px 24px;
  background-color: rgb(242, 243, 244);
}
.notification-msg {
  margin-top: 10px;
  border-radius: 11px;
  padding: 10px;
  color: #012248;
  width: 85vw;
}
.notification-container {
  display: flex;
  justify-content: center;
}
.case-textarea {
  height: 40px !important;
  font-size: 0.8rem;
}
.case-form-container {
  margin: 15px;
  /* padding-bottom: 15vh; */
}
.new-case-span {
  align-self: center;
  color: blue;
  text-decoration: underline;
}

.etc-card-request {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.etc-card-body-request {
  padding: 0px 16px 0px 16px !important;
}
.service-request-container {
  display: flex;
  width: 100%;
  height: 42px;
  font-size: 1.4rem;
  /* height: 8% ; */
}

.case-back-btn {
  align-self: center;
  justify-content: flex-start;
  max-width: 10%;
  font-size: 27px !important;
  margin-right: 15px;
}

.back-btn {
  align-self: center;
  justify-content: flex-start;
  height: auto;
  max-width: 50px;
  font-size: 27px !important;
}

.text-area-container {
  padding: 0px 10px 0px 10px;
  border-top: 1px solid black;
  border-color: rgba(192, 192, 192, 1);
  background-color: white;
  /* z-index: 100;
  position: fixed;
  bottom: 12vh;
  right: 0vw;
  left: 0vw; */
}
.text-area-container textarea {
  width: 95%;
  padding: 10px;
  margin-top: 5%;
  height: 60px !important;
  color: var(--dark-blue);
  opacity: 1;
}

.textarea,
.selectarea {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.nocases {
  margin: 20px 30px;
  font-size: large;
  height: 54vh;
  text-align: center;
}
.service-request {
  font-weight: bold;
  align-self: center;
  width: 60%;
  justify-content: center;
  text-align: center;
  /* padding-right: 8px; */
  color: #012248;
  font-size: 1.2rem;
  transform: translate(15%);
}
.caregiver-edit {
  background-color: var(--red-color) !important;
  color: white !important;
}
.caregiver-edit-error {
  font-size: 12px;
  height: 2px;
  color: var(--red-color);
}

.health-coach-message {
  font-weight: bold;
  align-self: center;
  width: 70%;
  justify-content: center;
  color: #012248;
  font-size: 1.2rem;
}
.health-coach-title p {
  font-size: 1.4rem !important;
  text-align: center;
}
.health-coach-subtitle p {
  text-align: left;
  font-size: 1.2rem !important;
}
.health-coach-subtitle {
  display: flex;
  height: 58px !important;
  border-bottom: rgba(192, 192, 192, 1) solid 1px;
}
.service-request-select {
  width: 30%;
  text-align: center;
}
.addCircle {
  position: absolute;
  right: 6%;
  top: 85%;
  color: #012448;
  font-size: 3rem !important;
}
.hcaddCircle {
  /* position: fixed;
  right: 10px;
  bottom: 15vh; */
  color: #012448;
  font-size: 2.5rem !important;
  z-index: 1;
  align-self: center;
}
.comments-typography {
  width: 100% !important;
  display: block;
}
.service-typography-b {
  margin-left: 10px !important;
}
.service-typography-a {
  width: 25% !important;
}
.comments-container {
  height: 200px;
  width: 90% !important;
  overflow-y: auto;
  margin-right: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px !important;
}
/* .comment-grid{
  margin-bottom: 30px !important;
  padding: 2px;
} */
.casedescription {
  font-size: 1rem;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  padding: 0.2rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  min-height: 20px;
  max-height: 100px;
  overflow-y: auto;
}
.comment-card {
  margin: 0px 10px 10px 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.comment-data {
  font-family: emoji !important;
  font-size: 0.8rem !important;
}
.comment-date {
  text-align: right;
  color: #012488;
}
.comment-userid {
  padding-left: 10px;
  color: #012488;
}
.view-card {
  /* border-top: 1px solid #012488; */
}

.healtch-coach-card {
  width: 100%;
  padding-top: 3%;
  padding-bottom: 3%;
  border-top: 1px solid #012488;
}
.card-content {
  padding: 5px !important;
}
.comment-create-btn {
  height: 30px !important;
}
/* .refresh-div-container{
  border-radius: 50%;
} */
.notification-icon {
  height: 35px !important;
}
.badge-icon {
  margin-right: 1rem;
  margin-bottom: 10px;
}
.comment-grid {
  width: 100% !important ;
  margin: 10px 10px 30px 10px !important;
}
.error-message-container {
  margin-top: 5px;
}
.caregiverModal {
  width: 100%;
}
.caregiverModal-title {
  color: var(--dark-blue);
  margin: 10px 0px 10px 0px !important;
}
.caregiver-content .MuiTypography-root {
  text-align: justify;
  text-align-last: left;
  max-width: 95% !important;
}
.caregiver-content,
.MuiDialogContent-root {
  padding: 10px 10px 10px 10px !important;
}
.caregiver-phoneinput,
.caregiver-input {
  margin-top: 5px 0px 5px 0px !important;
}
.caregiver-phone-input input,
.caregiver-input,
.profilephone1 input {
  color: var(--dark-blue) !important ;
  font-size: 18px !important;
}
.caregiver-phone-input .PhoneInputCountry {
  margin-left: 15px;
}

.btn-row {
  align-items: flex-start !important;
  min-height: 45px !important;
  padding: 10px !important;
}
.caregiver-input .MuiInput-underline:before {
  /* border-bottom: 0px !important; */
}
.caregiver-phone {
  /* background-color: #E5E5E5; */
  background-color: var(--text-field-background);
  /* border: 1px solid rgb(237, 235, 233); */
  padding-left: 8px;
  height: 38px;
  border-radius: 5px;
  font-size: 16px !important;
  /* max-width: 240px !important; */
}
.caregiverInput input {
  border-radius: 5px;
  border: 0px;
  height: 26px !important;
  padding: 5px 5px 5px 8px !important;
  font-size: 14px !important;
  max-width: 240px;
  color: var(--dark-blue);
  display: flex;
  flex-direction: column;
  background-color: var(--text-field-background);
}
.caregiverInput > p {
  color: var(--dark-blue);
  margin-bottom: 8px;
}
.caregiverInput {
  margin-bottom: 5%;
}

.new-event {
  color: green;
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
  width: 40%;
}
.document {
  color: black;
  font-size: 30px !important;
}
.exittoapp {
  align-self: center;
  padding-right: 5px;
}
.signout-container {
  margin-left: 5px;
  position: absolute;
  /*bottom: 5%;*/
  width: 92%;
  right: 4%;
}
.signout-container div {
  justify-content: start;
}

.messages {
  color: #012248;
  text-align: left;
  margin: 0;
}
.setting-section {
  height: 85%;
}

.message-container {
  padding: 2px;
  text-align: left;
  font-size: 1rem !important;
  margin-bottom: 10vh;
  margin-left: 18px;
  margin-right: 18px;
}
.summary-container {
  margin: 0px !important;
  /* padding: 2px !important; */
  box-shadow: none !important;
  /* background-color: #E5E5E5; */
  width: 100% !important;
  /* height: 50px !important; */
  /* border-radius: 10px; */
  /* color: var(--dark-blue); */
  /* overflow-y: auto; */
  font-size: 1.25em;
  border-bottom: lightgrey solid 2px;
}
.question-answer {
  align-self: center;
  padding-right: 10px;
  height: 34px !important;
  width: 34px !important;
}
.message-label-container {
  display: flex;
  align-items: center;
}
.outermessage {
  width: 95% !important;
}
.message-div {
  width: 85%;
  border-radius: 11px;
  height: auto;
  padding: 10px;
  color: #012248;
  margin: 10px 0px 15px 0px;
  /* box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1); */
}

.rightdiv {
  float: inline-start;
  background-color: lightgrey;
  border: black solid 1px;
}

.leftdiv {
  float: inline-end;
  background-color: #add8e655;
  border: black solid 1px;
}
.imageUrl-div{
  width: 50% !important;
  /* border: none !important;
  background-color: white !important; */
}
.modal-image-preview {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-top: 25px;
}
.messages-div {
  padding-bottom: 7px;
  font-size: 0.8rem;
  opacity: 0.7;
  display: flex;
  .left {
    flex-basis: 55%;
    text-align: left;
    color: gray;
  }
  .right {
    flex-basis: 80%;
    text-align: right;
  }
}

.message-div-date {
  text-align: end;
  width: 100%;
  padding-bottom: 7px;
  font-size: 0.8rem;
  opacity: 0.7;
}
.message-body {
  padding-left: 10px;
}
.remaining-text{
  color: silver;
  font-size: 12px;
}
.messages-body-pre {
  margin-top: 0px;
  margin-bottom: 0px;
  height: 2.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: grey;
}
.messages-body-pre-summary{
  height: 1.5em !important;
  color: var(--dark-blue);
  white-space: nowrap;     
  overflow: hidden;          
  text-overflow: ellipsis; 
  margin-top: 0px;
  margin-bottom: 0px;
}

.message-container-div {
  /* height: 52vh;
  overflow-y: auto; */
}
.digitalhc-container {
  padding-left: 10px;
}
.message-content {
  display: flex;
  flex-direction: column;
  /* max-height: 80%; */
  justify-content: space-between;
  margin-top: 4%;
  height: 58vh;
  overflow-y: auto;
}

.message-details-div {
  /* height: 90vh !important;
  overflow-y: auto;
  border-width: 2;
  border-color: red; */
}
.contactus-help {
  /*text-align: center;*/
  width: 100%;
}
.priority-msg{
  margin-top:0px !important ;
  border: 1px solid red;
}
.priority-container{
       display: flex;
      align-items: center;
      transform: translateY(45%);
      z-index: 1;
      position: relative;
      background-color: white;
      padding-right: 3px;
      border: 1px dotted red;  
      border-radius: 5px;
}
.priority-outlined-container{
  width: 89%;
  display: flex;
  justify-content: end;
  align-items: center;

}
.urgent{
  font-size: 11px;
}
.priority-outlined{
  color: red;
  height: 15px !important;

}
.message-div-username {
  text-align: start;
  width: 55%;
  padding-bottom: 7px;
  padding-left: 10px;
  font-weight: bold;
  font-size: 0.8rem;
  opacity: 0.7;
  /* text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.message-main-container {
  height: 32vh;
  width: 100%;
  position: sticky;
  /*padding: 10px;*/
}

.password-field {
  background-color: white;
  border-radius: 5px;
  position: sticky;
  width: 100%;
  height: 1%;
}
.badge-number {
  width: 100%;
}

.subject-textarea{
  height: 40px;
}
.subject-title {
  font-weight: 600;
  font-size: 1rem;
  color: #333;
}

.subject-content {
  background-color: #add8e655;
  padding: 10px;
  border-radius: 5px;
  font-size: 0.95rem;
  color: var(--dark-blue);
  margin-top: 5px;
  text-align: start;
}
.full-textfield{
  margin-top: 0px !important;
}
 .comment-main{
  /* width: 100% !important; */
 }
 .upload-icon-btn{
    position: absolute !important;
    top: 1%;
 }

.bottom-centered > button {
  position: absolute !important;
  background-color: var(--dark-blue);
  color: white !important;
  margin: 0px !important;
  bottom: 1% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}

.message-btn-div {
  display: flex;
  justify-content: center;
}

.notification-btn {
  width: 150px;
  margin: 0 0 0 0 !important;
  height: 45px;
  text-transform: none !important;
}

.message-div-summary {
  text-align: start;
  width: 100%;
  padding-left: 7px;
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 1rem;
  opacity: 0.7;
  padding-top: 13px;
}
.message-header {
  /* width: 100%; */
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  margin: 12px;
}
.centered-label {
  width: 100%;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-wrap: nowrap;
}
.notification-header {
  display: flex;
  margin: 45px 8px 0px 8px;
}

.textfield .MuiInput-underline:before {
  border-bottom: 0px !important;
}

.textfield .MuiInput-underline:after {
  border-bottom: 0px !important;
}

/* .textfield .MuiInputBase-input, .phonefield input {
  overflow-y: hidden !important;
  background-color: #e5e5e5 !important;
} */

.phonefield input {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 0px;
  height: 10px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.phonefield input:focus {
  outline: none !important;
}

.phonefield {
  border-radius: 5px;
  background-color: white;
  /* width: 100% !important; */
  /* width: 167px !important; */
  padding-left: 13px;
  padding-right: 13px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.security-setup-section {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  align-items: center;
}

.back-icon {
  align-content: flex-end;
  font-size: 1.4rem !important;
  margin-top: 3px;
}
.security-icon {
  color: var(--dark-blue);
}

.centered-btn > button {
  display: flex;
  justify-content: center;
  background-color: #012448 !important;
  color: white !important;
  margin: auto !important;
  margin-top: 5px !important;
}

.security-btn {
  width: 90%;
}

.security-label {
  font-size: 18px !important;
}
.security-txt-field {
  background-color: white !important;
  overflow-y: hidden !important;
}
.contactus-reclogo-img {
  width: 90%;
  padding-bottom: 20px;
}
.review-header{
  border-bottom: none !important;
}
.review-title{
  font-size: 1.2rem !important;
}
.star-rating{
  text-align: center;
}
.star-rating-container{
  width: 100%;
  display: flex;
  justify-content: center;
}
.rating-container{
  height: 120px;
}
.feedback-description{
  margin: 15px;
  text-align: start;
}
.feedback-section{
  min-height: 25vh;
}
.review-description{
  font-weight: bold;
  margin-bottom: 5px;
}
.review-remaining-text{
  margin-bottom: 20px;
}
.review-footer{
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}
.review-footer-btn {
  width: 40%;
  color: white !important;
  background-color: var(--dark-blue) !important;
  border-radius: 5px;
}
.review-txtarea {
 height: 100px !important;
 border: 1px solid var(--orange-color) !important;
}

/* .render-img{
  display: flex;
  gap: 5px;
  width: 100%;
  position: absolute;

} */
.comment-img{
  position: absolute;
  right: 11%;
  bottom: -26%;
}
.comment-type-message{
  margin-bottom: 0px !important;
}
.comment-type-message > div:first-of-type {
padding: 27px 11px 10px 10px !important;
}
/* When a photo is attached, reserve a strip at the bottom of the input so the
   typed text never runs under the in-box thumbnail preview. */
.comment-type-message.has-attachment > div:first-of-type {
  padding-bottom: 62px !important;
}
/* Attachment preview lives INSIDE the message box (bottom-left), so it reads as
   part of the message being composed rather than a separate element. */
.render-img {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 8px 3px 3px;
  background: #ffffff;
  border: 1px solid rgba(1, 34, 72, 0.15);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.render-img1{
bottom: 28px !important;
}
.render-img img {
  height: 44px;
  width: 44px;
  border: 1px solid var(--dark-blue);
  border-radius: 6px;
  object-fit: cover;
}
.render-img svg {
  font-size: 18px;
  cursor: pointer;
  color: rgba(1, 34, 72, 0.7);
}

.camera-btn {
  position: absolute;
  top: 8px;      
  right: -15px;   
  min-width: auto; 
  padding: 4px;  
}

/* .render-img img{
  height: 20px;
  width: 25px;
  border: 1px solid var(--dark-blue);
  border-radius: 4px;
  position: absolute;
  bottom: 0%;
  left: 1%;
} */
.coversation-img{
  display: block;
  margin-top: 8px;
  line-height: 0; /* drop the inline-image baseline gap */
}
.coversation-img img{
  height: 96px;
  width: 96px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  display: block;
  border: 1px solid rgba(1, 34, 72, 0.12);
}
@media only screen and (max-height: 750px) {
  .sendmessage-container {
    height: 70vh !important;
  }
}

.exercise-timesheet-container {
  background-color: white;
  text-align: center;
  position: absolute;
  height: 80vh;
  width: 100%;
  overflow-x: auto;
  top: 64px !important;
}

.exercise-timesheet-container .etc-list {
  text-align: left;
}

.etc-list .etc-list-item {
  margin-bottom: 5px;
}

.etc-progress {
  position: absolute;
}

.etc-progress .MuiCircularProgress-colorPrimary {
  /* position: absolute; */
  color: white !important;
}

/* .etc-progress circle {
    stroke-width: 3;
} */

.etc-list .etc-card {
  /* border-radius: 0px; */
}

.etc-card-body {
  padding: 8px 8px 8px 8px !important;
}
.totalactivity-text {
  margin-top: 10px;
}

.etc-list-item p {
  margin-top: 2px;
  margin-bottom: 2px;
}

.etc-list .time {
  /* color: white; */
  color: var(--dark-blue);
  font-size: 1.5rem;
  text-align: left;
  margin: 8px;
}
.total-activity {
  /* color: white; */
  padding-left: 9px;
  color: var(--dark-blue);
  /* font-size: 0.8rem; */
  font-size: 15px;
}

.etc-list-item .etc-icon {
  color: white;
  font-size: 2.1rem;
}

.etc-list {
  padding: 5px;
}

.etc-card-body .exercise-list {
  /* border-radius: 5px; */
  margin-top: 8px;
}

.exercise-timesheet-container .greyed {
  background-color: grey !important;
}

.exercise-timesheet-container .checkall-feed-icon {
  cursor: pointer;
  font-size: 43px !important;
  /* margin-right: 10px; */
  margin-top: -2px;
  color: var(--complete-color);
}

.summaryHeader {
  text-align: left;
  font-size: 20px;
  color: var(--dark-blue);
  padding-left: 15px;
  padding-right: 15px;
}

.summaryHeader > p {
  font-weight: 700;
  margin-bottom: 10px;
}

.summaryCardInner {
  border-width: 2px !important;
  border-color: var(--orange-color) !important;
  border-radius: 10px !important;
}
.summaryCard {
  border-width: 2px !important;
  border-color: var(--dark-blue) !important;
  border-radius: 10px !important;
}

.summaryCardContent {
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.activityGreeting {
  text-align: center;
  font-weight: 700;
}

.activityHeaderItem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.activity-title {
  padding: 0px 10px 0px 10px;
}
.activity-today {
  color: var(--dark-blue);
  font-size: 1.5rem;
}
.calender-btn svg {
  /* background-color: white; */
  filter: invert(100%) brightness(200%) !important;
  height: 25px !important;
  width: 25px !important;
}

.weekly-progress-container {
  flex-direction: column;
  margin: 1px !important;
  width: 98vw !important;
}
.event-summary {
  padding: 10px !important;
}
.activityText {
  font-size: 14px;
}
.event-summary-content {
  margin-left: 10px !important;
}
.activityInfo {
  font-size: 12px;
}

.iconActivity {
  cursor: pointer;
  font-size: 36px !important;
  margin-top: -4px;
  margin-left: 10px;
}

.fab {
  position: fixed !important;
  bottom: 15vh !important;
  right: 10px !important;
  z-index: 100;
  background-color: var(--orange-color) !important ;
}
.renderDoneButtonExercise {
  margin-bottom: 20px;
}
@media (min-height: 812px) {
  .exercise-timesheet-container {
    top: 64px;
    height: 80vh;
  }
}

/* Reminders section rows (business/reminders.js) — v2 palette.
   Round button on the left: live (ink) for patient-tracked reminders,
   disabled (light grey) for app-tracked ones, green check when done.
   Done text stays readable — no strikethrough. */
.reminder-row {
  cursor: pointer;
}
.reminder-row-inner {
  display: flex;
  align-items: flex-start;
}
.reminder-row-text {
  flex: 1;
  min-width: 0;
}
.reminder-mark {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 10px 0 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reminder-mark:disabled {
  cursor: default;
}
.reminder-mark .reminder-check {
  font-size: 24px !important;
}
.reminder-mark-open .reminder-check-open {
  color: #0f2a4c;
}
.reminder-mark-tracked .reminder-check-tracked {
  color: #c5d4e5;
}
.reminder-mark-done .reminder-check-done {
  color: #198a42;
}
.reminder-mark-undo {
  cursor: pointer;
}

@charset "UTF-8";
.video-react .video-react-control:before, .video-react .video-react-big-play-button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-react .video-react-control:before, .video-react .video-react-big-play-button:before {
  text-align: center;
}

@font-face {
  font-family: "video-react";
  src: url(data:application/vnd.ms-fontobject;base64,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?#iefix) format("eot");
}
@font-face {
  font-family: "video-react";
  src: url(data:application/font-woff;base64,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) format("woff"), url(data:application/x-font-ttf;base64,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) format("truetype");
  font-weight: normal;
  font-style: normal;
}
.video-react-icon, .video-react .video-react-closed-caption, .video-react .video-react-bezel .video-react-bezel-icon, .video-react .video-react-volume-level, .video-react .video-react-mute-control,
.video-react .video-react-volume-menu-button, .video-react .video-react-play-control, .video-react .video-react-play-progress, .video-react .video-react-big-play-button {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "video-react" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.video-react-icon-play-arrow:before, .video-react .video-react-bezel .video-react-bezel-icon-play:before, .video-react .video-react-play-control:before, .video-react .video-react-big-play-button:before {
  content: "\F200";
}

.video-react-icon-play-circle-filled:before {
  content: "\F201";
}

.video-react-icon-play-circle-outline:before {
  content: "\F202";
}

.video-react-icon-pause:before, .video-react .video-react-bezel .video-react-bezel-icon-pause:before, .video-react .video-react-play-control.video-react-playing:before {
  content: "\F203";
}

.video-react-icon-pause-circle-filled:before {
  content: "\F204";
}

.video-react-icon-pause-circle-outline:before {
  content: "\F205";
}

.video-react-icon-stop:before {
  content: "\F206";
}

.video-react-icon-fast-rewind:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-rewind:before {
  content: "\F207";
}

.video-react-icon-fast-forward:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-forward:before {
  content: "\F208";
}

.video-react-icon-skip-previous:before {
  content: "\F209";
}

.video-react-icon-skip-next:before {
  content: "\F20A";
}

.video-react-icon-replay-5:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-5:before {
  content: "\F20B";
}

.video-react-icon-replay-10:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-10:before {
  content: "\F20C";
}

.video-react-icon-replay-30:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-30:before {
  content: "\F20D";
}

.video-react-icon-forward-5:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-5:before {
  content: "\F20E";
}

.video-react-icon-forward-10:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-10:before {
  content: "\F20F";
}

.video-react-icon-forward-30:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-30:before {
  content: "\F210";
}

.video-react-icon-volume-off:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-off:before, .video-react .video-react-mute-control.video-react-vol-muted:before,
.video-react .video-react-volume-menu-button.video-react-vol-muted:before {
  content: "\F211";
}

.video-react-icon-volume-mute:before, .video-react .video-react-mute-control.video-react-vol-0:before,
.video-react .video-react-volume-menu-button.video-react-vol-0:before {
  content: "\F212";
}

.video-react-icon-volume-down:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-down:before, .video-react .video-react-mute-control.video-react-vol-2:before,
.video-react .video-react-volume-menu-button.video-react-vol-2:before, .video-react .video-react-mute-control.video-react-vol-1:before,
.video-react .video-react-volume-menu-button.video-react-vol-1:before {
  content: "\F213";
}

.video-react-icon-volume-up:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-up:before, .video-react .video-react-mute-control:before,
.video-react .video-react-volume-menu-button:before {
  content: "\F214";
}

.video-react-icon-fullscreen:before {
  content: "\F215";
}

.video-react-icon-fullscreen-exit:before {
  content: "\F216";
}

.video-react-icon-closed-caption:before, .video-react .video-react-closed-caption:before {
  content: "\F217";
}

.video-react-icon-hd:before {
  content: "\F218";
}

.video-react-icon-settings:before {
  content: "\F219";
}

.video-react-icon-share:before {
  content: "\F21A";
}

.video-react-icon-info:before {
  content: "\F21B";
}

.video-react-icon-info-outline:before {
  content: "\F21C";
}

.video-react-icon-close:before {
  content: "\F21D";
}

.video-react-icon-circle:before, .video-react .video-react-volume-level:before, .video-react .video-react-play-progress:before {
  content: "\F21E";
}

.video-react-icon-circle-outline:before {
  content: "\F21F";
}

.video-react-icon-circle-inner-circle:before {
  content: "\F220";
}

.video-react {
  display: block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  font-size: 10px;
  line-height: 1;
  font-family: serif, Times, "Times New Roman";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.video-react:-moz-full-screen {
  position: absolute;
}
.video-react:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-react *,
.video-react *:before,
.video-react *:after {
  box-sizing: inherit;
}
.video-react ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.video-react.video-react-fluid, .video-react.video-react-16-9, .video-react.video-react-4-3 {
  width: 100%;
  max-width: 100%;
  height: 0;
}
.video-react.video-react-16-9 {
  padding-top: 56.25%;
}
.video-react.video-react-4-3 {
  padding-top: 75%;
}
.video-react.video-react-fill {
  width: 100%;
  height: 100%;
}
.video-react .video-react-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-react.video-react-fullscreen {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}
.video-react.video-react-fullscreen.video-react-user-inactive {
  cursor: none;
}

body.video-react-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto;
}
body.video-react-full-window .video-react-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-react button {
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.video-react .video-react-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: 0.85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.video-react .video-react-loading-spinner:before, .video-react .video-react-loading-spinner:after {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
  -webkit-animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite;
  animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite;
}

.video-react-seeking .video-react-loading-spinner,
.video-react-waiting .video-react-loading-spinner {
  display: block;
}

.video-react-seeking .video-react-loading-spinner:before,
.video-react-waiting .video-react-loading-spinner:before {
  border-top-color: white;
}

.video-react-seeking .video-react-loading-spinner:after,
.video-react-waiting .video-react-loading-spinner:after {
  border-top-color: white;
  -webkit-animation-delay: 0.44s;
  animation-delay: 0.44s;
}

@keyframes video-react-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes video-react-spinner-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes video-react-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
@-webkit-keyframes video-react-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
.video-react .video-react-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  border-radius: 0.3em;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.video-react .video-react-big-play-button.video-react-big-play-button-center {
  top: 50%;
  left: 50%;
  margin-top: -0.75em;
  margin-left: -1.5em;
}
.video-react .video-react-big-play-button.big-play-button-hide {
  display: none;
}
.video-react:hover .video-react-big-play-button,
.video-react .video-react-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}

.video-react-menu-button {
  cursor: pointer;
}
.video-react-menu-button.video-react-disabled {
  cursor: default;
}

.video-react-menu .video-react-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: serif, Times, "Times New Roman";
}
.video-react-menu li {
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
}
.video-react-menu li:focus, .video-react-menu li:hover {
  outline: 0;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}
.video-react-menu li.video-react-selected, .video-react-menu li.video-react-selected:focus, .video-react-menu li.video-react-selected:hover {
  background-color: #fff;
  color: #2B333F;
}
.video-react-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

.video-react-scrubbing .vjs-menu-button:hover .video-react-menu {
  display: none;
}

.video-react .video-react-menu-button-popup .video-react-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}
.video-react .video-react-menu-button-popup .video-react-menu .video-react-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.video-react-menu-button-popup .video-react-menu.video-react-lock-showing {
  display: block;
}

.video-react .video-react-menu-button-inline {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  overflow: hidden;
}
.video-react .video-react-menu-button-inline:before {
  width: 2.222222222em;
}
.video-react .video-react-menu-button-inline:hover, .video-react .video-react-menu-button-inline:focus, .video-react .video-react-menu-button-inline.video-react-slider-active {
  width: 12em;
}
.video-react .video-react-menu-button-inline:hover .video-react-menu, .video-react .video-react-menu-button-inline:focus .video-react-menu, .video-react .video-react-menu-button-inline.video-react-slider-active .video-react-menu {
  display: block;
  opacity: 1;
}
.video-react .video-react-menu-button-inline.video-react-slider-active {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.video-react .video-react-menu-button-inline .video-react-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.video-react .video-react-menu-button-inline .video-react-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-react-no-flex .video-react-menu-button-inline .video-react-menu {
  display: block;
  opacity: 1;
  position: relative;
  width: auto;
}
.video-react-no-flex .video-react-menu-button-inline:hover, .video-react-no-flex .video-react-menu-button-inline:focus, .video-react-no-flex .video-react-menu-button-inline.video-react-slider-active {
  width: auto;
}

.video-react .video-react-poster {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: #000000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
.video-react .video-react-poster img {
  display: block;
  vertical-align: middle;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

.video-react .video-react-slider {
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}
.video-react .video-react-slider:focus {
  -webkit-box-shadow: 0 0 1em #fff;
  -moz-box-shadow: 0 0 1em #fff;
  box-shadow: 0 0 1em #fff;
}

.video-react .video-react-control {
  outline: none;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
.video-react .video-react-control:before {
  font-size: 1.8em;
  line-height: 1.67;
}
.video-react .video-react-control:focus:before, .video-react .video-react-control:hover:before, .video-react .video-react-control:focus {
  text-shadow: 0em 0em 1em #fff, 0em 0em 0.5em #fff;
}

.video-react .video-react-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.video-react-no-flex .video-react-control {
  display: table-cell;
  vertical-align: middle;
}

.video-react .video-react-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-react-has-started .video-react-control-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}

.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar.video-react-control-bar-auto-hide {
  visibility: visible;
  opacity: 0;
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}

.video-react-controls-disabled .video-react-control-bar,
.video-react-using-native-controls .video-react-control-bar,
.video-react-error .video-react-control-bar {
  display: none !important;
}

.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar {
  opacity: 1;
  visibility: visible;
}

.video-react-has-started.video-react-no-flex .video-react-control-bar {
  display: table;
}

.video-react .video-react-progress-control {
  -webkit-box-flex: auto;
  -moz-box-flex: auto;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 4em;
}

.video-react-live .video-react-progress-control {
  display: none;
}

.video-react .video-react-progress-holder {
  -webkit-box-flex: auto;
  -moz-box-flex: auto;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  height: 0.3em;
}

.video-react .video-react-progress-control:hover .video-react-progress-holder {
  font-size: 1.6666666667em;
}

/* If we let the font size grow as much as everything else, the current time tooltip ends up
 ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
 to avoid a weird hitch when you roll off the hover. */
.video-react .video-react-progress-control:hover .video-react-time-tooltip,
.video-react .video-react-progress-control:hover .video-react-mouse-display:after,
.video-react .video-react-progress-control:hover .video-react-play-progress:after {
  visibility: visible;
  font-size: 0.6em;
}

.video-react .video-react-progress-holder .video-react-play-progress,
.video-react .video-react-progress-holder .video-react-load-progress,
.video-react .video-react-progress-holder .video-react-tooltip-progress-bar,
.video-react .video-react-progress-holder .video-react-load-progress div {
  position: absolute;
  display: block;
  height: 0.3em;
  margin: 0;
  padding: 0;
  width: 0;
  left: 0;
  top: 0;
}

.video-react .video-react-play-progress {
  background-color: #fff;
}
.video-react .video-react-play-progress:before {
  position: absolute;
  top: -0.3333333333em;
  right: -0.5em;
  font-size: 0.9em;
}

.video-react .video-react-time-tooltip,
.video-react .video-react-mouse-display:after,
.video-react .video-react-play-progress:after {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  right: -1.9em;
  font-size: 0.9em;
  color: #000;
  content: attr(data-current-time);
  padding: 6px 8px 8px 8px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  border-radius: 0.3em;
}

.video-react .video-react-time-tooltip,
.video-react .video-react-play-progress:before,
.video-react .video-react-play-progress:after {
  z-index: 1;
}

.video-react .video-react-progress-control .video-react-keep-tooltips-inside:after {
  display: none;
}

.video-react .video-react-load-progress {
  background: #bfc7d3;
  background: rgba(115, 133, 159, 0.5);
}

.video-react .video-react-load-progress div {
  background: white;
  background: rgba(115, 133, 159, 0.75);
}

.video-react.video-react-no-flex .video-react-progress-control {
  width: auto;
}

.video-react .video-react-time-tooltip {
  display: inline-block;
  height: 2.4em;
  position: relative;
  float: right;
  right: -1.9em;
}

.video-react .video-react-tooltip-progress-bar {
  visibility: hidden;
}

.video-react .video-react-progress-control .video-react-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.video-react-no-flex .video-react-progress-control .video-react-mouse-display {
  z-index: 0;
}

.video-react .video-react-progress-control:hover .video-react-mouse-display {
  display: block;
}

.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display,
.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display:after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}

.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display,
.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display:after {
  display: none;
}

.video-react .video-react-mouse-display .video-react-time-tooltip,
.video-react .video-react-progress-control .video-react-mouse-display:after {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-react .video-react-play-control {
  cursor: pointer;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
.video-react .video-react-fullscreen-control {
  cursor: pointer;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.video-react.video-react-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.video-react .video-react-time-control {
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.video-react .video-react-time-divider {
  line-height: 3em;
  min-width: initial;
  padding: 0;
}

.video-react .video-react-mute-control,
.video-react .video-react-volume-menu-button {
  cursor: pointer;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
.video-react .video-react-volume-control {
  width: 5em;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.video-react .video-react-volume-bar {
  margin: 1.35em 0.45em;
}
.video-react .video-react-volume-bar.video-react-slider-horizontal {
  width: 5em;
  height: 0.3em;
}
.video-react .video-react-volume-bar.video-react-slider-horizontal .video-react-volume-level {
  width: 100%;
}
.video-react .video-react-volume-bar.video-react-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}
.video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level {
  height: 100%;
}
.video-react .video-react-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.video-react .video-react-volume-level:before {
  position: absolute;
  font-size: 0.9em;
}
.video-react .video-react-slider-vertical .video-react-volume-level {
  width: 0.3em;
}
.video-react .video-react-slider-vertical .video-react-volume-level:before {
  top: -0.5em;
  left: -0.3em;
}
.video-react .video-react-slider-horizontal .video-react-volume-level {
  height: 0.3em;
}
.video-react .video-react-slider-horizontal .video-react-volume-level:before {
  top: -0.3em;
  right: -0.5em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu {
  display: block;
  width: 0;
  height: 0;
  border-top-color: transparent;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu {
  left: 0.5em;
  height: 8em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu {
  left: -2em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content {
  height: 0;
  width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical:focus .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content {
  height: 8em;
  width: 2.9em;
}
.video-react .video-react-volume-menu-button-horizontal:hover .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal:focus .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content {
  height: 2.9em;
  width: 8em;
}
.video-react .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content {
  background-color: transparent !important;
}

.video-react .video-react-playback-rate .video-react-playback-rate-value {
  line-height: 3em;
  text-align: center;
}
.video-react .video-react-playback-rate .video-react-menu {
  width: 4em;
  left: 0em;
}

.video-react .video-react-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  z-index: 17;
  margin-left: -26px;
  margin-top: -26px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 26px;
}
.video-react .video-react-bezel.video-react-bezel-animation {
  -moz-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
  -webkit-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
  animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
  pointer-events: none;
}
.video-react .video-react-bezel.video-react-bezel-animation-alt {
  -moz-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
  -webkit-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
  animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
  pointer-events: none;
}
.video-react .video-react-bezel .video-react-bezel-icon {
  width: 36px;
  height: 36px;
  margin: 8px;
  font-size: 26px;
  line-height: 36px;
  text-align: center;
}
@keyframes video-react-bezel-fadeout {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes video-react-bezel-fadeout-alt {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}
.video-react .video-react-closed-caption {
  cursor: pointer;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
.video-react video::-webkit-media-text-track-container {
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}
.info-list {
  text-align: left;
  font-size: 16px;
  padding-inline-start: 15px;
  line-height: 1.3;
  word-spacing: 1.2px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.modal-cancel-btn {
  color: var(--dark-blue) !important;
  background-color: #bcb9b9 !important;
}

.cancel-btn {
  margin-right: 15px;
}

.modal-success-btn {
  color: var(--dark-blue) !important;
  background-color: var(--list-orange) !important;
}

.info-list li {
  margin-bottom: 5px;
}
.list-image {
  max-height: 100px;
  max-width: 120px;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

.video-react .video-react-control-bar {
  bottom: -30px;
}

.item-orange {
  background-color: var(--list-orange);
}

.item-blue {
  background-color: var(--list-blue);
}

.status-box {
  /*border-top-right-radius: 8px;*/
  padding: 12px;
  /*background-color: var(--dark-blue);*/
  position: absolute;
  bottom: 5px;
  color: white;
  z-index: 2;
}

.art-container {
  padding: 8px;
}

.art-div {
  height: 100%;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art-image {
  max-width: 150px;
  margin-bottom: 20px;
}

.art-text {
  color: var(--list-orange);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 40px;
}

.art-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 15px !important;
  text-align: center;
  font-weight: bold;
  text-shadow: grey 3px 3px 4px;
  height: 50px;
  width: 300px;
  border-radius: 4px;
  margin: auto;
  cursor: pointer;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
}

.feedback-container {
  border: 1px solid var(--dark-blue) !important;
  border-radius: 4px !important;
  margin-bottom: 10px;
  color: var(--dark-blue) !important;
}

.feedback-img-box {
  height: 85px;
  display: flex;
  justify-content: space-around;
  border-radius: 18px;
  border: 1px solid var(--dark-blue);
  opacity: 0.5;
  align-items: center;
}

.feedback-subtext {
  font-size: 17px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  white-space: pre-line;
}
.feedback-copyright {
  font-size: 11px;
  color: #666;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: normal;
}
.feedback-title {
  font-size: 20px !important;
  font-weight: bold !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.react-calendar {
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}
.react-calendar button:enabled:hover {
  cursor: pointer;
}
.react-calendar__navigation {
  height: 44px;
  margin-bottom: 1em;
}
.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__navigation button[disabled] {
  background-color: #f0f0f0;
}
.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}
.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}
.react-calendar__month-view__weekNumbers {
  font-weight: bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}
.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}
.react-calendar__month-view__days__day--neighboringMonth {
  color: #757575;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}
.react-calendar__tile {
  max-width: 100%;
  text-align: center;
  padding: 0.75em 0.5em;
  background: none;
}
.react-calendar__tile:disabled {
  background-color: #f0f0f0;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__tile--hasActive {
  background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}
.react-calendar__tile--active {
  background: #006edc;
  color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}

.week-container {
  margin: 10px;
}

.next-week-btn {
  width: 5%;
  align-self: center;
  text-align: end;
}

.previous-week-btn {
  width: 5%;
  align-self: center;
}
.week-icon {
  height: 20px !important;
  width: 20px !important;
}
.week-container-first {
  margin-bottom: 10px !important;
  font-size: 16px;
  text-align: left;
  font-weight: 700;
  color: var(--dark-blue);
}
.progress-week-container-title {
  margin-bottom: 10px;
}
.weekely-circle,.weekely-circle1 {
  color: green;
  font-size: 12px !important;
  align-self: center;
  margin-left: 5px;
}
.weekely-circle1,.event-icon1{
  margin-left: 0px !important;
  font-size: 10px !important;
}
.week-text{
  padding-left: 0px !important
}
.event-icon,.event-icon1 {
  font-size: 10px !important;
  align-self: center;
  margin-left: 5px;
}

.calender-weekly-progress {
  margin-top: 10px;
  /* box-shadow: 0px 0px 3px 0px var(--dark-blue); */
  border-width: 1px !important;
}
.renderEvent-container {
  /* margin-bottom: 15%; */
}

.renderEvent {
  border: 2px solid var(--orange-color);
  border-radius: 10px;
  padding: 6px;
}
.circle-event-icon {
  width: 10px !important;
  height: 10px !important;
  padding: 1px;
}

.event-message {
  margin: 0px 0px 0px 16px;
  font-size: 12px;
  overflow: visible !important;
  white-space: normal !important;
}
.event-title {
  font-size: 14px;
  margin-top: 9px !important;
  margin-bottom: 7px !important;
}
.week-date-text {
  font-size: 14px !important;
  font-weight: normal !important;
}
.detail-week-container {
  font-size: 12px ;
  color: var(--dark-blue) !important;
  font-weight: normal !important;
}
.noactivity-text {
  text-align: center;
}
.summary-border {
  margin-top: 10px;
  border: 1px solid var(--dark-blue);
}
.events-toggle-link {
  display: inline-block;
  color: var(--dark-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 2px 16px;
  text-decoration: underline;
}

@media (max-width: 385px) {

  .detail-week-container{
    font-size: 10.5px !important ;
  }
}
/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.eyelogo {
  max-width: 60%;
  /* max-height: 5.5%; */
  position: absolute;
  top: 14%;
}

.info-text-sc1 {
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 230%;
  text-align: center;
  line-height: 134%;
  letter-spacing: 1px;
  top: 45%;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-bck {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}

.info-text-sc2 {
  color: white;
  font-size: 1rem !important;
  line-height: 19px;
  margin: 0px 0px 5px 0px;
}

.screen13-info-text-sc2 {
  line-height: 23px !important;
}
.register-account {
  font-weight: 600;
  font-size: 1.1rem !important;
  margin-bottom: 20px !important;
}

.date-picker div {
  background-color: white;
  border-radius: 5px;
  border: white;
  padding: 10px;
}
.date-picker-container .MuiFormControl-marginNormal {
  margin-top: 0px !important;
  margin-bottom: 8px;
}
.help-text {
  font-size: large !important;
  margin-bottom: 10px;
}
.item-right {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.access-code-div {
  padding: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90%;
}
.button-right {
  display: flex;
  justify-content: right;
}
.login-btn {
  background-color: var(--orange-color) !important;
  color: white !important;
  width: 100%;
  margin-top: 15px !important;
}
.logo-text {
  font-size: 0.9rem !important;
  font-weight: 600;
  text-align: end;
  margin: 0px 7px 0px 0px !important;
}

.continue-btn {
  background-color: var(--dark-blue) !important;
  border-radius: 5px !important;
  color: white !important;
  width: 88px;
}
.clinic-container {
  position: absolute;
  bottom: 5%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.continue-btn-submit {
  background-color: var(--orange-color) !important;
}
.register-button {
  align-self: flex-end !important;
  background-color: var(--orange-color) !important;
}

.autocomplete .MuiInput-underline:before {
  border-bottom: 0px !important;
}
.signin-label {
  display: block;
  font-size: 1rem;
  color: white;
  margin-right: 5px;
  margin-top: 18px !important;
}
.already-registered {
  margin-top: 90px !important;
}
.resend-otp {
  margin-top: 70px !important;
}
.footer-divider {
  width: 90%;
  background-color: white !important;
  align-self: center;
}

.row {
  display: flex;
  flex-flow: wrap;
}

.member-div {
  margin-top: 5px;
}

.credentials {
  margin-top: 22px;
  position: relative;
  top: 42%;
  transform: translateY(-35%);
  padding: 10px 20px 10px 20px;
  background-color: #324f7b !important;
}
.contact-form {
  top: 42% !important;
  /* height: 65vh ; */
  overflow-y: auto;
}
.contact-form::-webkit-scrollbar {
  width: 8px;
}

.contact-form::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.contact-form::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.screen1 {
  /* width: 100%; */
  height: 100%;
  margin-left: 24px;
  margin-right: 24px;
}

.screen1 p {
  font-weight: bold;
  font-size: 195%;
  /* line-height: 121px; */
  letter-spacing: -0.01em;
  position: absolute;
  top: 20%;
}

.sc1desc,
.sc1desc1,
.sc1desc2,
.label,
.sc1descx,
.sc1desc5,
.label5 {
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 55% !important;
  /* line-height: 123.2%; */
  /* position: absolute; */
  top: 105% !important;
  width: 176%;
  margin-bottom: 10px;
}

.sc1desc1 {
  top: 350% !important;
}

.sc1desc2 {
  top: 230% !important;
  width: 117% !important;
}

.sc1desc5 {
  top: 225% !important;
  width: 117%;
}

.sc1next,
.sc1next1,
.sc1next2,
.sc1next4 {
  width: 86% !important;
  background-color: #1576f9 !important;
  position: absolute !important;
  bottom: 11% !important;
  height: 50px !important;
  left: 0;
  right: 0;
  margin: auto !important;
  border-radius: 15px !important;
  color: white !important;
}

.sc1next1 {
  bottom: 22% !important;
}

.signin {
  top: 90% !important;
  font-size: 85% !important;
  text-align: center;
  right: 0;
  left: 0;
}

.sc1back,
.progmonth,
.today,
.prognext,
.progback {
  color: #1576f9 !important;
  position: absolute !important;
  font-size: 18px !important;
  text-transform: none !important;
  left: 1px;
  top: 8px;
}
.notifyback {
  color: #1576f9 !important;
  font-size: 18px !important;
  text-transform: none !important;
}
.notifyback:hover {
  background-color: white !important;
}

.progmonth {
  top: 3px !important;
  /* left: 38px !important; */
  left: 0 !important;
  right: 0;
  margin: auto !important;
  /* color: black !important; */
  font-weight: bold !important;
}

.today {
  top: 12px;
  /* left: auto !important; */
  /* right: 1px;  */
}

.prognext {
  position: absolute !important;
  right: 10px !important;
  left: auto;
  font-size: 32px !important;
  top: 7px;
  /* left: 80% !important; */
  color: black !important;
  max-width: 28px;
  max-height: 28px;
}

.progback {
  position: relative !important;
  top: -5px;
  left: 10px;
  font-size: 32px !important;
  color: black !important;
  max-width: 28px;
  max-height: 28px;
}

.sc1back:hover,
.today:hover {
  background-color: white !important;
}

/* .sc1text, .sc1text4, .sc1text5 {
    position: static !important;
    top: 51.5%;
    margin: auto !important;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #f2f2f6;
    height: 60px;
    border-radius: 20px;
    margin-bottom: 7% !important;
} */

/* .sc1text .MuiInputBase-input {
    font-size: 15.5px !important;
} */
/* 
.sc1text4 , .sc1text5 {
    height: 55px !important;
} */

.textfield .MuiInput-underline:before {
  border-bottom: 0px !important;
}

.textfield .MuiInput-underline:after {
  border-bottom: 0px !important;
}

.textfield .MuiInputBase-input,
.phonefield input {
  padding: 13px !important  ;
  height: 10px !important;
  font-size: 17px !important;
}

.phonefield input {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 0px;
  height: 10px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.phonefield input[type='tel'] {
  width: 100px;
}

.phonefield input:focus {
  outline: none !important;
}

.phonefield {
  border-radius: 5px;
  background-color: white;
  /* width: 100% !important; */
  /* width: 167px !important; */
  padding-left: 13px;
  padding-right: 13px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.logintoast .MuiSnackbarContent-root {
  flex-grow: unset !important;
}

.logintoast {
  position: fixed !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  top: -35% !important;
}

/* .sc1text4 .MuiInputBase-input {
    padding: 10px !important  ;
    height: 35px !important;
    font-size: 17px !important;
    color:#1576f9 !important
} */

.sc1desc5 .MuiInputBase-input {
  padding: 3% !important  ;
  height: 35px !important;
  font-size: 17px !important;
  color: #1576f9 !important;
}

.label,
.label5 {
  position: static !important;
  font-size: 89% !important;
  width: 10%;
  margin-top: 14% !important;
  margin-left: 13px !important;
}

.sc1container {
  position: absolute;
  margin: auto;
  height: 75%;
  left: 0;
  right: 0;
  /* background-color: aqua; */
  top: 25%;
  overflow-x: auto;
  overflow-y: auto;
  /* opacity: 0.5; */
  margin-left: 24px;
  margin-right: 24px;
}

.screen1 .sc1container p {
  font-weight: bold;
  font-size: 195%;
  /* line-height: 121px; */
  letter-spacing: -0.01em;
  position: relative;
  top: 0;
  /* margin-top: 0px !important ; */
}

.sc1descx {
  position: relative !important;
  width: 90% !important;
  margin-top: 20px !important ;
}

.sc1next2,
.sc1next4 {
  position: relative !important;
  margin-bottom: 20% !important;
  width: 100% !important;
  /* margin-top: 47% !important; */
  bottom: auto !important;
  margin-top: 52% !important;
}

.sc1next4 {
  margin-top: 28% !important;
}

.conftext1 {
  font-size: 10% !important;
  font-weight: 400 !important;
}

.conftext {
  display: flex;
}

.label4 {
  position: static !important;
  font-size: 89% !important;
  width: 10%;
  margin-top: 27% !important;
  margin-left: 8px !important;
}
/* 
.sc1text5 {
    position: absolute !important;
    width: 88% !important ;
} */

.label5 {
  width: 50% !important;
  position: absolute !important;
  top: 42% !important;
  left: 5%;
}

.skew {
  transform: skew(1turn, -25deg);
  position: relative;
  top: 15%;
  /* left: -100px; */
  /* background-color: #5ebcf0; */
  background-color: #d1d3d4;
  height: 70%;
  width: 56%;
}

.reclogo,
.reclogo1,
.reclogo2 {
  position: absolute;
  max-width: 70%;
  max-height: 22vh;
  right: 0;
  left: 0;
  margin: auto;
  top: 8%;
}
.reclogo {
  top: 10% !important;
}

.reclogo1 {
  top: 14%;
}

.reclogo2 {
  top: 12%;
}

.eoalogo {
  position: absolute;
  max-width: 42%;
  max-height: 8.5%;
  right: 0;
  left: 0;
  margin: auto;
  top: 18px;
}

.maxxlogo {
  position: absolute;
  max-width: 35%;
  right: 0;
  left: 0;
  margin: auto;
  top: auto;
  bottom: 5%;
}

.mainarrow {
  position: fixed;
  height: 20%;
  width: 70%;
  background-color: #012448;
  top: 45%;
}

.loginarrow {
  position: fixed;
  height: 13%;
  width: 80%;
  background-color: rgb(245, 146, 31);
  top: 40%;
}

.loginarrow3 {
  position: fixed;
  height: 13%;
  width: 80%;
  background-color: rgb(0, 185, 166);
  top: 57%;
}

.sc1text {
  display: flex;
}

.sc1text p {
  /* float: left; 
     position: absolute;
    color: white;
    font-weight: bold;
    font-size: 33px;
    text-align: center;
    margin: 8% !important;
    margin-right: 0px !important;
    right: 0px;
    line-height: 44px;
    padding: 1px;     

   /* // float: left;  */
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 205%;
  text-align: center;
  margin: 8% !important;
  margin-right: 0px !important;
  right: 0px;
  line-height: 134%;
  letter-spacing: 1px;
  padding: 1px;
}

/* .sc2text {
    display: flex;
} */

.ctnBtn {
  position: absolute !important;
  right: -6%;
  top: 34%;
  background-color: #012448 !important;
  border-radius: 10px !important;
  color: white !important;
  width: 88px;
}

.sc2text p {
  /* display: flex !important; */
  /* float: left; */
  /* position: absolute; */
  color: white;
  font-weight: bold;
  font-size: 15px;
  /* text-align: center; */
  margin: 4%;
  /* margin-top: 5px; */
  margin-right: 3px !important;
  /* right: 0px; */
  line-height: 19px;
}

.sc2text2 {
  position: absolute;
  text-align: center !important;
  /* position: relative; */
  top: 28%;
  left: 2%;
  width: 200px;
}

.MuiOutlinedInput-root {
  /* border: 0px solid white !important; */
  border-radius: 5px !important;
  /* margin-left: 10px !important;  */
}

.MuiFormControl-root {
  width: 100% !important;
}

.MuiOutlinedInput-input {
  height: 10px !important;
  padding: 11px !important;
  /* width: 167px !important; */
  border-radius: 5px !important;
  background-color: white !important;
  /* margin-left: 10px !important; */
}

.form {
  width: 224px;
  margin-left: 7px;
}

.mainarrow1,
.loginarrow1,
.loginarrow4 {
  position: absolute;
  content: '';
  height: 0%;
  width: 0%;
  border-bottom: 6.5vh solid transparent;
  border-top: 6.5vh solid transparent;
  border-left: 6.5vh solid rgb(0, 185, 166);
  border-right: 6.5vh solid transparent;
  left: 99.7%;
}

.mainarrow1 {
  border-bottom: 10vh solid transparent;
  border-top: 10vh solid transparent;
  border-left: 10vh solid #012448;
  border-right: 10vh solid transparent;
}

.loginarrow4 {
  border-left: 6.5vh solid rgb(245, 146, 31);
}

.infopage {
  width: 310px;
  position: absolute;
  top: 17%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 55%;
  overflow-x: hidden;
  overflow-y: auto;
}

.infopage p {
  line-height: 26px;
  text-align: justify;
  text-align-last: left;
}

.MuiTypography-root {
  max-width: 230px !important;
}

.asitshah {
  max-width: 40%;
  float: right;
  /* margin: 10px; */
  margin-right: -8px;
  margin-top: 8px;
  margin-left: 8px;
  /* margin-bottom: 0px;*/
}

/* select::-ms-expand {
    display: none;
} */

.dob {
  max-width: 100%;
  height: auto;
}
.dob div {
  width: 100% !important;
}

input::-webkit-date-and-time-value {
  padding-top: '5px';
  text-align: left;
}

.dob input {
  width: 100vh;
  height: 5vh;
  border-radius: 5px;
  font-size: 19px !important;
  background-color: white;
  border: white;
  padding: 10px;
  color: #324f7b;
  line-height: 5vh;
}
.gender,
.unstyled,
.profilephone input {
  width: 100%;
  /* width: 310px; */
  height: 41px;
  /* text-align: center; */
  /* justify-content: center; */
  /* align-items: center; */
  border-radius: 10px;
  font-size: 16px;
  /* margin-top: 10px; */
  background-color: #e5e5e5;
  border-radius: 10px;
  border: white;
}

.iosUnstyled {
  width: 97%;
  height: 32px;
}

.andUnstyled {
  width: 99%;
  height: 38px;
}

.profilephone {
  border-radius: 10px;
  background-color: #e5e5e5;
  padding-left: 4px;
}

.profilephone input {
  padding-left: 4px;
}

.headerPassword {
  font-size: 18px;
  color: white;
  line-height: 2;
  margin-bottom: 10px;
}

.unstyled {
  -webkit-appearance: none;
  /* width: 288px; */
  /* width: 96%; */
  padding-left: 4px;
  height: 32px;
  /* heightpx !important; */
}

.unstyled::placeholder,
.profilephone input::placeholder {
  color: black !important;
}

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
  /* display: none;   \ */
  -webkit-appearance: none;
}

.unstyled:focus,
.profilephone input:focus {
  outline: none;
}

select:focus {
  outline: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  padding-left: 4px;
}

.submitBtn {
  background-color: #012448 !important;
  color: white !important;
  /* left: 10%; */
  width: 80%;
  position: relative !important;
  top: 5%;
  /* left: 0; */
  /* margin-bottom: 1% !important; */
  /* right: 0; */
  margin: auto !important;
  margin-bottom: 8% !important;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5% !important;
}
.done-btn {
  background-color: var(--orange-color) !important;
}
.createprofile {
  margin: 0px;
  font-size: 28px;
  text-align: center;
  font-weight: 800;
}

.logLink {
  top: 20px;
  font-size: 1rem;
  color: white;
  text-decoration: underline;
}
.rememberme-checkbox {
  height: 20px;
  width: 20px;
}

.member-link {
  /* style={{position: 'absolute', top:'68%', left: '50%', transform: 'translateX(-50%)'}} */
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
}
.need-help {
  text-align: end;
  width: 100%;
  color: white;
  margin-right: 10px;
}

.first-time-user {
  /* style={{position: 'absolute', top:'68%', left: '50%', transform: 'translateX(-50%)'}} */
  position: absolute;
  top: 74%;
  left: 48.5%;
  transform: translateX(-50%);
}

.tnc-container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tnc-container .tnc-header {
  text-align: center;
}

.tnc-container .iframe-row {
  height: calc(100% - 80px - 70px);
  padding-left: 10px;
  padding-right: 10px;
}

.tnc-container .button-row {
  height: 80px;
}

.button-row .tnc-btn-first,
.tnc-btn-second {
  background-color: #012448 !important;
  color: white !important;
  width: 100%;
}

.tnc-btn-first {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  margin-right: 2px !important;
}

.tnc-btn-second {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  margin-left: 2px !important;
}

.tnc-container iframe {
  width: 100%;
  height: 100%;
  border: 0px;
}

.contact-form-textfield {
  margin: 2px 0px 10px 0px !important;
}
.contactus-header {
  /*text-align: center;*/
  width: 100%;
  font-size: 19px;
  color: white !important;
}
.footer-button {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px 0px 10px 0px;
}

.vertical-button {
  margin-top: 20px;
  flex-direction: column !important;
}

.cellphone-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.biometric-message {
  color: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.biometric-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.biometric-label {
  font-size: 1.15rem;
  font-weight: 500;
  white-space: nowrap;
}

.fingerprint {
  width: 70px !important;
  height: 70px !important;
  /* color: white; */
  /* font-size: 66px !important; */
  border-radius: 15px;
  background-color: #012448;
}
.phoneinput {
  width: 65% !important;
  margin-left: 15px;
  padding-left: 5px;
  height: 25px !important;
}

.screen11-required,
.register-required {
  color: red;
}

/* Support contact card on the pre-login "help me set up my account" form.
   Shown after a submit -- on success it is reassurance, on failure it is the
   fallback route for someone who is already locked out. */
.screen11-support {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fafafa;
  text-align: center;
}

.screen11-support-title {
  margin: 0 0 6px 0;
  font-weight: 600;
  font-size: 14px;
}

.screen11-support-line {
  margin: 2px 0;
  font-size: 15px;
}

.screen11-support-line a {
  text-decoration: none;
}

.screen11-support-hours {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #666;
}

.faceIcon {
}
.register-container {
  /* App-shell layout: a flex column sized to the visible viewport (--reg-vh is
     updated from window.visualViewport so it shrinks when the keyboard opens).
     The header sits at the top and never scrolls — only .register-scroll does —
     so the header stays pinned at the top even with the keyboard open. Scoped to
     registration only. (Autofill is gated by the http origin, not this layout.) */
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--reg-vh, 100vh);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* The only scrollable region — the form. The header stays pinned above it. */
.register-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 96px 12px;
  box-sizing: border-box;
}
.register-text-sc1 {
  font-size: 1rem !important;
  line-height: 19px;
  margin: 0px 0px 5px 0px;
  text-transform: uppercase;
}
.registration-form-textfield {
  /* margin: 2px 0px 20px 0px !important;
    border: 1px solid silver !important;
    border-radius: 5px !important;  
    padding-left: 10px;
    height: 40px !important; */
  margin: 2px 0px 20px 0px !important;
}
.registration-form-textfield .MuiOutlinedInput-input {
  /* height: 45px !important;     */
  height: 40px !important;
  padding: 8px 8px 8px 14px !important;
  border-radius: 0px !important;
  background-color: white !important;
}
/* .registration-datepicker
.MuiInputLabel-outlined{
    transform: translate(14px, 20px) scale(1);
}
.registration-datepicker
.MuiFormLabel-shrink {
    margin-top: 0px;
    transform: translate(14px,-6px) scale(0.75) !important;
    z-index: 999;
} */
.registration-datepicker.date-picker div {
  height: 55px;
}

.registration-datepicker .MuiInputAdornment-root {
  /* display: none; */
}
.registration-datepicker .MuiInputAdornment-root {
  border: none !important;
}
.registration-phone {
  border: 2px solid lightgray;
  height: 40px;
  padding: 8px 8px 8px 14px !important;
}
.register-footer,
.consent-footer {
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  margin-bottom: 10px;
}
.register-btn {
  width: 100px;
}
.register-header-container {
  /* Top of the app-shell flex column — outside .register-scroll, so it never
     scrolls and stays pinned at the top at all times, including keyboard-on.
     flex-shrink: 0 keeps it at full height; in-flow so it never clips a field. */
  border-bottom: var(--dark-blue) 1px solid;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 65px;
  background-color: white;
}
.register-headerText {
  margin: 5px;
  text-align: center;
}
.register-logo {
  display: flex;
  justify-content: center;
}
.register-logo img {
  max-width: 200px;
  max-height: 55px;
}
.register-required {
  margin-bottom: 10px;
}
.registration-select {
  margin: 5px 0px 20px 0px;
}
.registration-select .MuiAutocomplete-inputRoot {
  height: 55px !important;
}

.registration-select .MuiFormControl-fullWidth .MuiInputLabel-outlined {
  transform: translate(14px, 20px) scale(1);
}

.registration-select .MuiFormControl-fullWidth .MuiInputLabel-shrink {
  transform: translate(14px, -6px) scale(0.75);
}

.fieldsetHeader {
  width: auto;
  margin: 0px;
  color: inherit !important;
  font-weight: 500;
  /* margin-left: 20px; */
  font-size: 14px;
  border: 0px;
  border-radius: 5px;
  padding: 5px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.03);
}

.fieldsetContainer {
  /* // border: 1px dashed; */
  padding: 17px 15px;
  max-width: 430px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.07),
    0 32px 64px rgba(0, 0, 0, 0.07);
}

/* Consent */
.consent-title {
  font-weight: 600;
}
/* Page heading sits flush against the top of the scroll area; give it breathing
   room + a roomy line-height so tall uppercase glyphs (e.g. "CONSENTIMIENTO DE
   PARTICIPACIÓN") aren't clipped at the top edge, and let it wrap to 2 lines. */
.consent-page-title {
  padding-top: 8px;
  line-height: 1.5 !important;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}
.consent-page-title.MuiTypography-h6 {
  margin-top: 50px;
}
.view-details {
  color: var(--sky-blue);
  padding-left: 5px;
}
.signatureCanvas {
  min-height: 100px !important;
  border: 1px solid black;
  width: 90%;
}
.consent-dialog .MuiTypography-h6 {
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.consent-description {
  font-size: 16px;
  padding: 5px;
  box-sizing: border-box;
}
/* Override the global `.MuiTypography-root { max-width: 230px !important }` cap
   (line ~696) for full-width consent notices, so their text fills the card and
   stays left aligned instead of wrapping at 230px. Double-class specificity +
   !important is required to beat the global !important rule. */
.consent-fulltext.MuiTypography-root {
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
}
.signature-text {
  margin: 5px 0px 5px 0px;
  font-weight: bold;
}
.consent-section-description {
  width: 95%;
}

@media (max-height: 736px) {
  .sc1next2 {
    margin-top: 15% !important;
  }

  .sc1next4 {
    margin-top: 10% !important;
  }

  .label4 {
    margin-top: 10% !important;
  }

  .label5 {
    margin-top: 15% !important;
  }

  .sc1text5 {
    top: 54.5%;
  }

  .sc2text p {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    margin-top: 4px !important;
  }

  .sc1text p {
    font-size: 172% !important;
    margin: 6% !important;
  }

  .ctnBtn {
    font-size: 13px !important;
    top: 31%;
  }

  .infopage {
    top: 15%;
  }

  .reclogo2 {
    top: 8%;
  }

  .eoalogo {
    top: 10px;
  }

  .sc2text2 {
    text-align: left !important;
  }
}

@media (max-width: 321px) {
  .sc1desc {
    width: 280px !important;
  }

  .sc1next2 {
    margin-top: 4% !important;
  }

  .label {
    margin-top: 12px !important;
  }

  .sc1text p {
    margin: 2% !important;
  }

  .sc2text p {
    font-size: 12px !important;
    margin-bottom: 1px !important;
    margin-top: 0px !important;
  }

  .form {
    width: 224px;
    margin-left: 3px;
  }

  .ctnBtn {
    font-size: 11px !important;
    top: 30%;
    width: 72px;
  }

  .sc2text2 {
    width: 190px;
  }

  .infopage {
    width: 264px;
  }

  .MuiOutlinedInput-input {
    /* width: 160px !important; */
  }

  .sc2text2 {
    text-align: left !important;
  }
}

@media (min-width: 768px) {
  .screen1 p {
    top: 23%;
    width: 95% !important;
  }

  .sc1desc {
    width: 390% !important;
  }

  .sc1desc1 {
    top: 280% !important;
  }

  .sc1next2 {
    margin-top: 30% !important;
  }

  .sc1next4 {
    margin-top: 15% !important;
  }

  .label5 {
    top: 38% !important;
  }

  .notify {
    max-width: 700px;
  }

  .aptBtn {
    left: 40%;
  }
}

@media (min-height: 812px) {
  .skew {
    top: 17%;
  }

  .eoalogo {
    top: 42px;
  }

  .loginarrow {
    height: 14%;
  }

  .loginarrow3 {
    height: 14%;
  }

  .loginarrow4 {
    border-bottom: 7vh solid transparent;
    border-top: 7vh solid transparent;
    border-left: 7vh solid rgb(245, 146, 31);
    border-right: 7vh solid transparent;
  }

  .loginarrow1 {
    border-bottom: 7vh solid transparent;
    border-top: 7vh solid transparent;
    border-left: 7vh solid rgb(0, 185, 166);
    border-right: 7vh solid transparent;
  }
}
.reclogo-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 22vh;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-height: 750px) {
  .contactus-header {
    font-size: 18px !important;
    line-height: 10px !important;
  }
  .contact-form {
    top: 48% !important;
    /* padding-top:  0px !important; */
    /* height: 76vh; */
  }
  .logo-text {
    top: 14%;
    right: 22%;
    font-size: 0.8rem !important;
    font-weight: 600;
  }
  .reclogo {
    max-width: 60%;
  }
}

.header {
  text-align: center;
  font-weight: bold;
  /* background-color: aqua; */
  font-size: x-large;
  width: 100%;
  align-self: center;
}
.settdiv span {
  display: inline-block;
  margin: 0 auto;
}
.name {
  text-transform: uppercase;
}
.main {
  padding: 1.2rem;
}

.description {
  letter-spacing: 0.2px;
  font-size: 21px;
  text-align: justify;
}
.btn-div,
.device {
  display: flex;
  justify-content: center;
  margin: 2rem;
}
.btn-start {
  width: 60vw;
  color: white;
  background-color: rgba(255, 68, 0, 0.856);
  height: 40px;
  border-radius: 10px;
  font-size: large;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid white;
}
.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.container img {
  object-fit: contain;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  padding: 0% 10% 0% 10%;
}

.welcome-container {
  position: absolute;
  top: 15%;
  margin-right: 10px;
}

.welcome-video-container {
  margin: 1rem;
  padding: 0.5rem;
}

.welcome-video-container .video-label {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.welcome-video-container .video-player-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.welcome-video-container .video-player-wrapper > div {
  position: absolute;
  top: 0;
  left: 0;
}

.yt-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}

.yt-video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/*
 * Sits above the iframe and swallows every pointer event, so a tap can never
 * reach YouTube's own chrome (video title, channel link, share, "Watch on
 * YouTube"). All playback control goes through this layer.
 */
.yt-video-shield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.yt-video-shield:focus-visible {
  box-shadow: inset 0 0 0 3px #1e88e5;
}

.yt-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-video-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

/*
 * Only the box is styled here - the circle and triangle are drawn inside the
 * SVG, so no ambient rule can distort them.
 */
.yt-video-play {
  display: block;
  width: 68px;
  height: 68px;
  flex: none;
}

.yt-video-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
}


/* AddressAutocomplete Component Styles */

.address-autocomplete-container {
  position: relative;
  width: 100%;
}

.address-suggestions-paper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
  margin-top: 2px;
  border-radius: 4px;
}

.address-suggestions-list {
  padding: 0;
}

.address-suggestion-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.address-suggestion-item:hover,
.address-suggestion-item.Mui-selected {
  background-color: #f5f5f5;
}

.address-suggestion-primary {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.address-suggestion-secondary {
  font-size: 12px;
  color: #666;
}

.address-loading-spinner {
  color: #1976d2;
}

.address-error-message {
  color: #f44336;
  font-size: 12px;
  margin-top: 4px;
}

/* Ensure suggestions appear above other content */
.address-autocomplete-container .MuiPaper-root {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .address-suggestions-paper {
    max-height: 200px;
  }

  .address-suggestion-item {
    padding: 12px 14px;
  }

  .address-suggestion-primary {
    font-size: 13px;
  }

  .address-suggestion-secondary {
    font-size: 11px;
  }
}

.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}

.formContainer {
  position: absolute;
  /* clear the fixed AppBar above (.mainheader is 64px tall) and the
     fixed bottom NavBar (.navBar is 10vh tall) */
  top: 64px;
  bottom: 10vh;
  width: 100%;
  /* Page scroll re-enabled so the form-list view (multiple questionnaires)
     remains scrollable. Inside an active questionnaire, the option list
     itself is the part that scrolls (capped at ~6 rows via .scrollbar-container). */
  overflow-y: auto;
  overflow-x: hidden;
  /* page bg from the design's --bg variable, applied to all questionnaires */
  background-color: #F4F6FA;
}

/* The feedback form's outer div carries both .formContainer and .quescontainer
   classes. .quescontainer is defined in devicesetup.css with `height: 75%
   !important` (originally for a different page), which caps the form at 75%
   of the viewport and leaves a 30+ px gap between the option card / sticky
   CANCEL/DONE row and the bottom NavBar. Neutralize that override here so
   `bottom: 10vh` controls the form's height as intended — the buttons sit
   directly above the NavBar and the option list gets the full available
   space. Scoped to .formContainer.quescontainer so the rule only affects
   feedback-form pages even if .quescontainer is reused elsewhere later. */
.formContainer.quescontainer {
  height: auto !important;
}

.carousel .slide {
  background-color: transparent !important;
}

.carousel .control-dots {
  margin-left: -35px !important;
  width: 100vw;
}

.carousel .carousel-status {
  color: black !important;
  font-size: 22px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
  position: relative;
  text-align: center;
  top: 30px;
  display: none;
}
.feedlist {
  /* align-items: center; */
  box-shadow: 0 4px 5px 2px #d6d6d6;
  border: 1px solid var(--dark-blue);
}

.feeddesc {
  width: 146px !important;
  overflow: hidden !important;
  height: 80px !important;
  /* font-size: 11pt !important; */
  /* text-align: justify; */
  /* text-align-last: left; */
}

#quescont .settdiv {
  border: 5px solid transparent;
  text-align: left !important;
}

.carousel .control-dots .dot {
  background-color: black;
}

#quescont {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#quescont {
  overflow-y: visible;
  /* height: 120%; */
}

.btnarrow {
  content: '';
  height: 0%;
  width: 0%;
  border-bottom: 25px solid transparent !important;
  border-top: 25px solid transparent;
  border-left: 25px solid transparent !important;
  border-right: 25px solid rgb(0, 185, 166) !important;
  left: -32.1%;
  position: absolute !important;
}

.colorstyle {
  background-color: rgb(0, 185, 166) !important ;
}

.btnarrow1 {
  content: '';
  height: 0%;
  width: 0%;
  border-bottom: 25px solid transparent !important;
  border-top: 25px solid transparent;
  border-left: 25px solid rgb(245, 146, 31) !important;
  border-right: 25px solid transparent !important;
  right: -33%;
  position: absolute !important;
}

.colorstyle1 {
  background-color: rgb(245, 146, 31) !important ;
}

.dot:focus {
  outline: unset;
}

/* Pin the action row (PREVIOUS/NEXT + DONE/FINISH LATER) to the bottom of
   the scrolling questions region so it's always visible — even when the
   question text or option list pushes the page taller than the viewport. */
.bottomcont {
  display: block;
  position: sticky;
  bottom: 0;
  background-color: #F4F6FA;
  padding-top: 4px;
  padding-bottom: 4px;
  z-index: 5;
}

.feedback {
  margin-top: 0 !important;
}

.toolbar {
  height: 50px;
  background: rgb(192, 192, 192, 0.5);
  display: flex;
  border-top: 1px solid #006edc;
}

.navarrow,
.navarrow1 {
  height: 32px !important;
  width: 32px !important;
  position: absolute;
  /* top: 0;
    bottom: 0;
    margin: auto !important; */
  margin-top: 8px;
}

.navarrow path,
.navarrow1 path {
  fill: #006edc;
  stroke: #006edc;
}

.navarrow {
  /* transform: rotate(180deg); */
  left: 10px;
  z-index: 111111;
}

.navarrow1 {
  right: 5px;
}

.bottombtn {
  /* display: flex; */
  color: #006edc !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 5px !important;
  /* top: 0 !important; */
  margin: auto !important;
  font-size: 18px !important;
}

.statusdots {
  height: 40px;
  /* border-top: 1px solid #006edc; */
  /* background-color: rgb(192,192,192,0.5); */
}

/* .pagestatus {
    position: fixed;
    bottom: 12vh;
} */

/* #statusbar element no longer rendered — page count moved inline above the
   navy question box. Style kept here as a no-op for any cached CSS. */
#statusbar {
  display: none;
}

.wrapper {
  /* display:-webkit-flex; */
  /* -webkit-justify-content:center; */

  /* display:flex; */
  /* justify-content:center; */
  /* position: fixed;
    bottom: 6.2%;
    width: 100%; */
  background-color: #012448 !important;
  color: white !important;
  /* width: 85%; */
  position: relative;
  left: 0;
  right: 0;
  /* bottom: 6.2%; */
  margin: auto !important;
  margin-bottom: 5px !important;
  margin-top: 5px !important;
  border-radius: 5px;
}

.formbtns {
  -webkit-flex: 1;
  flex: 1;
  /* border-right:thin solid #006edc !important; */
  width: 100%;
  border-top: thin solid #006edc;
  border-radius: 0px !important;
}

.hybridinput {
  position: absolute;
  right: 8px;
  width: 60%;
  height: 36px;
  border-radius: 5px;
  border: 1px solid grey;
  margin-top: 2px;
  font-size: 18px;
  padding-left: 5px;
}

#previous:disabled {
  background-color: grey !important;
}

#next:disabled {
  background-color: grey !important;
}

.headerText {
  margin-bottom: 10px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

.feedList {
  height: 160px;
}

.feed-emoji {
  height: 32px;
  width: 32px;
  margin-bottom: 3px;
}

.emoji-box {
  padding: 5px;
  flex: 0 1 20%;
  cursor: pointer;
  border-radius: 5px;
}

.emoji-selected {
  background-color: #5a7eff;
}

@media (max-height: 667px) {
  .pagestatus {
    bottom: 14vh;
  }

  /* #quescont {
        top: 10vh !important;
    } */

  .wrapper {
    bottom: 7.5%;
  }
}

@media (max-width: 321px) {
  #quescont .btnlabel {
    font-size: 19px;
  }

  #quescont .btnlabel1 {
    font-size: 19px;
  }

  #quescont .btn1 {
    font-size: 16px;
  }

  #quescont .btn2 {
    font-size: 16px;
  }

  .toolbar {
    height: 45px;
  }

  .carousel .carousel-status {
    top: 56vh;
    left: 104.5px;
  }

  /* #quescont {
        transform: translateY(-234px) !important; 
    } */
}

.ps__rail-y {
  opacity: 0.6 !important;
}

.carousel-root {
  min-height: auto !important;
}
.scroll-fade-wrapper {
  position: relative;
}

.scroll-fade-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.scroll-fade-wrapper.at-bottom::after {
  opacity: 0;
}

.scrollbar-container {
  /* Fits ~6 option rows: each row is ~56px (12+12 padding + 32 circle) plus
     1px divider, so 6 rows ≈ 343px; +12px buffer for scrollbar overhead. */
  max-height: 355px !important;
  width: 100% !important;
}

/* Tighten the option list on shorter phones (iPhone 8 / SE class, 667px tall)
   so the navy question box, options, and pinned PREVIOUS/NEXT/DONE row all
   fit inside the formContainer without page-level scroll. */
@media (max-height: 740px) {
  .scrollbar-container {
    max-height: 240px !important;
  }
}

/* Numeric-scale single-question forms (Pain Score) use compact rows (~36 px)
   and want all 11 options visible at once. Lift the scroll cap so the option
   card grows naturally to fit the available space between the navy question
   box and the sticky CANCEL/DONE row. The form-container's overflow-y still
   provides a safety scroll on very short screens. Scoped to .numeric-scale,
   so KOOS/HOOS and other multi-question forms keep the 355/240 px caps. */
.scroll-fade-wrapper.numeric-scale .scrollbar-container {
  max-height: none !important;
}

@media (min-height: 812px) {
  .formContainer {
    top: 12%;
    height: 88%;
  }
}

.feedback-copyright {
  font-size: 12px;
  color: #666;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 18px;
  padding-right: 18px;
  font-weight: normal;
  width: 100%;
}

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.scrollbar-container {
  position: relative;
  height: 100%; }
.rc-swipeout {
  overflow: hidden;
  position: relative;
}
.rc-swipeout-content {
  position: relative;
  background-color: #fff;
}
.rc-swipeout-cover {
  position: absolute;
  z-index: 2;
  background: transparent;
  height: 100%;
  width: 100%;
  top: 0;
  display: none;
}
.rc-swipeout .rc-swipeout-content,
.rc-swipeout .rc-swipeout-actions {
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
.rc-swipeout-swiping .rc-swipeout-content {
  -webkit-transition: none;
  transition: none;
}
.rc-swipeout-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.rc-swipeout-actions-left {
  left: 0;
}
.rc-swipeout-actions-right {
  right: 0;
}
.rc-swipeout-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  overflow: hidden;
}
.rc-swipeout-btn-text {
  padding: 0 12px;
}

.myteam-container {
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: auto;
  padding-top: 8px;
}

/* Video section */
.myteam-video-section {
  padding: 0 16px 16px;
}

.myteam-video-label {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin: 8px 0;
}

.myteam-video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.myteam-video-wrapper > div {
  position: absolute;
  top: 0;
  left: 0;
}

/* Image section */
.myteam-image-section {
  width: 100%;
}

.myteam-surgeon-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Info section */
.myteam-info-section {
  padding: 16px 20px;
}

.myteam-surgeon-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px;
}

.myteam-surgeon-url {
  display: block;
  color: #1a73e8;
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 16px;
  word-break: break-all;
}

.myteam-surgeon-url:hover {
  text-decoration: underline;
}

/* Contact rows */
.myteam-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid #e0e0e0;
  text-decoration: none;
  color: inherit;
}

.myteam-contact-row:last-child {
  border-bottom: 1px solid #e0e0e0;
}

.myteam-contact-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.myteam-contact-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}

.myteam-contact-value {
  font-size: 0.85rem;
  color: #666;
  margin-top: 2px;
  word-break: break-word;
}

.myteam-contact-icon {
  color: #888;
  margin-left: 12px;
  flex-shrink: 0;
}

/* Loading state */
.myteam-loading {
  text-align: center;
  padding: 24px;
  color: #999;
  font-size: 0.9rem;
}

/* Close control for the My Team drawer.

   Deliberately NOT `.drawerIcon`. That class is shared by nine components and
   is a dark glyph at 60% opacity, which vanishes against the dark and grey
   surgeon photos this drawer renders full-bleed. Position and size match
   `.drawerIcon` exactly so the button does not move between drawers.

   The drop shadow matters as much as the ring: on a white or very light photo
   the white disc would otherwise have no edge at all. */
.myteam-close {
  position: absolute;
  right: 4%;
  top: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  -webkit-tap-highlight-color: transparent;
}

.drawer-body {
  padding-left: 12px;
}
.drawer-header {
  margin-top: 16px;
  margin-bottom: 8px;
  display: flex;
}
.render-info-drawer {
  min-height: 290px;
}

.drawer-preview-img {
  padding-right: 16px;
  min-width: 108px;
}
.img1 {
  height: 80px;
  width: 80px;
  border-radius: 80px;
  object-fit: fill;
  background: #e2e2e2;
}
.drawer-name {
  font-weight: bold;
  line-height: 1.2;
  font-size: 22px;
  align-content: center;
}
.email-container,
.phone-container {
  margin-left: auto;
  color: black;
}
.drawer-sub {
  padding: 11px 0px 10px;
}

.drawer-sub-header {
  margin-left: 0;
  margin-right: 0;
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.2;
  font-weight: bold !important;
}

.drawer-sub-descp {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 20px;
  text-overflow: inherit;
  overflow: inherit;
  color: #666666;
  font-weight: 500;
}
.sp-icon {
  margin-right: 12px;
  cursor: pointer;
}

.healthcoach-page-container {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
  z-index: 0;
}
.healthcoach-page {
  width: 100%;
  height: 100%;
  max-width: 530px;
  box-shadow: 0 4px 5px 2px #d6d6d6;
  margin: auto;
  overflow: auto;
}

.cover-box {
  padding-top: 10px;
  width: 100%;
}
.img {
  border-radius: 2px 2px 0 0;
  width: 90%;
  height: 350px;
}
.sp-body {
  padding: 16px;
  font-kerning: auto;
  font-variant-ligatures: normal !important;
}

.react-swipeable-view-container,
.ReactSwipeableBottomSheet--open {
  border-radius: 20px 20px 0 0;
}

.react-swipeable-view-container {
  max-width: 530px;
  margin: auto;
}
.sp-name {
  font-size: 25px;
  font-family: Verdana, sans-serif;
  letter-spacing: 0;
  font-weight: 500;
  margin: 5px 0px 7px 5px;
}

.sp-native-btn {
  background-color: #fafafa;
  border-radius: 4px;
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 30px;
}

.btn-2 {
  width: 100%;
  color: white;
  font-weight: bold;
  background-color: #1890ff;
  height: 30px;
}
.contactme-container {
  margin-bottom: 32px;
  display: flex;
  gap: 3px;
  width: 100%;
}
.contactme {
  width: 85%;
}
.download {
  width: 10%;
}
.sp-footer {
  padding: 0px 10px 0px 10px;
}
.drawer-container {
  display: flex;
}
.btn-2 {
  background-color: #1890ff;
}

.app-log-container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.app-log-header {
  text-align: center;
}

.app-log-items {
  height: calc(100% - 80px);
  overflow-y: scroll;
  padding: 10px 20px 0px 20px;
}

.app-log-items,
h2 {
  color: var(--dark-blue);
}

.medical-iframe {
  width: 100%;
  height: 100%;
  border: 0px;
  outline: 0px;
}

@media only screen and (max-width: 767px) {
  .activity-iframe {
    width: 95% !important;
  }
  .surgeon-page-container div {
    position: relative !important;
  }
}
.fullscreen-iframe {
  /* overflow-y: hidden ; */
  top: 5% !important;
  height: 100vh !important;
}
.device-graph-container {
  height: 100vh !important;
}

.Overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  /* top: 0;  */
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color:  yellow; */
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  /* justify-content : center; */
  /* align-items: center; */
}

.MuiLinearProgress-barColorPrimary {
  background-color: rgba(245, 146, 31) !important;
}

.faqpg-container {
  /* Normal document flow (like the app's other full-screen pages). Using
     position:fixed here broke because a transformed ancestor (the swipe/anim
     wrapper) becomes the containing block for fixed descendants, so top/bottom
     no longer mapped to the viewport — content ran under the nav and the FAB
     disappeared. Instead flow normally and pad the bottom to clear the fixed
     .navBar (10vh) so nothing hides behind it. */
  min-height: 100%;
  padding-bottom: calc(10vh + 80px);
  box-sizing: border-box;
  background-color: #ffffff;
}

/* Header */
.faqpg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #eef1f5;
}

.faqpg-back {
  color: #012448;
  cursor: pointer;
  font-size: 22px !important;
}

.faqpg-title {
  font-size: 18px;
  font-weight: 700;
  color: #012448;
}

.faqpg-header-spacer {
  width: 18px;
}

/* Search */
.faqpg-search {
  display: flex;
  align-items: center;
  margin: 14px 16px 8px 16px;
  padding: 11px 14px;
  background-color: #ffffff;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
}

.faqpg-search-icon {
  color: #8a99b0;
  font-size: 20px !important;
  margin-right: 8px;
}

.faqpg-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  color: #012448;
}

.faqpg-search-clear {
  color: #8a99b0;
  font-size: 18px !important;
  cursor: pointer;
}

/* Topic tabs (underline style) */
.faqpg-tabs {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 4px 16px 0 16px;
  border-bottom: 1px solid #eef1f5;
  -webkit-overflow-scrolling: touch;
}

.faqpg-tabs::-webkit-scrollbar {
  display: none;
}

.faqpg-tab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #6a7d99;
  font-size: 14px;
  padding: 8px 0 12px 0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  border-bottom: 2px solid transparent;
}

.faqpg-tab-active {
  color: #012448;
  font-weight: 600;
  border-bottom-color: #012448;
}

/* Body */
.faqpg-body {
  padding: 14px 16px 8px 16px;
}

.faqpg-list-heading {
  font-size: 15px;
  font-weight: 700;
  color: #012448;
  margin: 2px 2px 8px 2px;
}

.faqpg-empty {
  text-align: center;
  color: #6a7d99;
  font-size: 14px;
  margin-top: 30px;
  padding: 0 12px;
}

/* Question rows (inline expand) */
.faqpg-rows {
  display: flex;
  flex-direction: column;
}

.faqpg-item {
  border-bottom: 1px solid #eef1f5;
}

.faqpg-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  cursor: pointer;
}

.faqpg-row-q {
  font-size: 15px;
  font-weight: 500;
  color: #012448;
  text-align: left;
  line-height: 1.35;
  padding-right: 12px;
}

.faqpg-item-open .faqpg-row-q {
  font-weight: 700;
}

.faqpg-chevron {
  color: #012448;
  font-size: 22px !important;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.faqpg-chevron-open {
  transform: rotate(90deg);
}

/* Inline answer */
.faqpg-a {
  padding: 0 2px 16px 2px;
}

.faqpg-a-text {
  font-size: 14px;
  line-height: 1.6;
  color: #3a4a63;
  text-align: left;
  margin: 0 0 12px 0;
  white-space: pre-wrap;
}

.faqpg-inline-link {
  color: #1576f9;
  text-decoration: underline;
}

/* Was this helpful */
.faqpg-helpful {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px dashed #e6ebf2;
}

.faqpg-helpful-label {
  font-size: 13px;
  color: #6a7d99;
}

.faqpg-helpful-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.faqpg-thumb {
  color: #8a99b0;
  font-size: 20px !important;
  cursor: pointer;
}

.faqpg-thumb:hover {
  color: #012448;
}

.faqpg-helpful-done {
  font-size: 13px;
  color: #2e7d32;
}

/* "Contact us" button — navy pill that floats just above the fixed bottom nav.
   Uses position:sticky (NOT fixed): sticky is relative to the scroll container
   and works inside the transformed ancestor that broke position:fixed here.
   It pins ~just above the 10vh nav while the content scrolls behind it. */
.faqpg-fab {
  position: sticky;
  bottom: calc(10vh + 16px);
  z-index: 20;
  display: block;
  width: fit-content;
  margin: 12px 16px 0 auto;
  padding: 14px 30px;
  border-radius: 26px;
  border: none;
  background-color: #012448;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(1, 36, 72, 0.35);
  cursor: pointer;
  outline: none;
}

.faqpg-fab-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.wound-container {
  padding: 0 5%;
}

.wound-instructions {
  font-size: 0.95rem;
  color: var(--dark-blue);
  margin: 12px auto 8px;
  text-align: center;
}

.wound-preview {
  margin-top: 16px;
  text-align: center;
}

.wound-preview-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--dark-blue);
}

.wound-preview-img {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.wound-preview-img img {
  height: 160px;
  width: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(1, 34, 72, 0.2);
}

.wound-preview-img svg {
  position: absolute;
  top: -10px;
  right: -10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dark-blue);
}

.wound-loading {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.wound-empty {
  text-align: center;
  color: #6b7280;
  margin-top: 24px;
  font-size: 0.9rem;
}

.wound-history {
  margin-top: 24px;
}

.wound-history-title {
  font-weight: 600;
  color: var(--dark-blue);
  margin-bottom: 12px;
}

.wound-thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

/* Three thumbnails per row. Width is derived from the container so the layout
   never depends on the image's intrinsic size (which can be large). */
.wound-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 20px) / 3);
}

.wound-thumb-imgwrap {
  position: relative;
  width: 100%;
}

.wound-thumb-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 18px !important;
  height: 18px;
  width: 18px;
  padding: 3px;
  box-sizing: content-box;
  background: white;
  border-radius: 50%;
  color: #c0392b;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(1, 34, 72, 0.3);
}

.wound-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(1, 34, 72, 0.12);
  cursor: pointer;
}

.wound-thumb-date {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
}

.wound-confirm-text {
  font-size: 1rem;
  color: var(--dark-blue);
  margin: 8px 4px;
}

.wound-confirm-delete {
  color: #c0392b !important;
}

.PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}
.devicesetup-container {
  margin-top: 30%;
}
.device-icon {
  color: #012248;
  align-content: flex-end;
  font-size: 1.4rem !important;
  margin-top: 3px;
}
.device-btn1 {
  margin-left: 10px;
  font-size: 16px;
  display: flex;
  margin-right: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  /* box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1); */
  justify-content: space-between;
  margin-top: 5px;
  border: var(--dark-blue) solid 1px;
}
.setdiv1 {
  /* height: 57vh;
    overflow-y: auto; */
  margin-bottom: 10vh;
}
.device-setup-section {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  align-items: center;
}
.feedbackform-btn-continer {
  display: flex;
}
.feedback-back-btn {
  width: 80px !important;
}
.quescontainer {
  top: 64px !important;
  height: 75% !important;
}
.vedio-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid var(--dark-blue);
  align-items: center;
  color: var(--dark-blue);
}
.video-icon {
  font-size: 34px !important;
}

/* Full-screen Getting Started guide overlay (renders GettingStartedGuide inline). */
.getting-started-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.getting-started-close {
  position: absolute;
  right: 12px;
  top: 12px;
  margin-top: 20px;
  color: #212121;
  opacity: 0.6;
  cursor: pointer;
  font-size: 34px !important;
  z-index: 2;
}
.getting-started-close:hover {
  opacity: 0.85;
}
.getting-started-frame {
  flex: 1;
  width: 100%;
  border: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.device-setup-refresh {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.device-setup-icon {
  height: 32px !important;
  width: 32px !important;
  align-self: center;
}
.device-info-container {
  border-radius: 10px;
}
.summaryCardContent {
  padding: 10px 10px 10px 10px !important;
  color: var(--dark-blue);
  border-radius: 4px;
}
.device-summary-card {
  margin: 15px 10px 15px 10px;
  border-radius: 10px !important;
  border: 1px solid var(--dark-blue) !important;
  color: var(--dark-blue) !important;
}
.status {
  text-align: start !important;
  color: green !important;
}
.device-label {
  font-size: 16px;
  text-align: start;
  font-weight: 500;
  color: var(--dark-blue);
}

.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}

.render-task-div {
  display: flex;
  font-size: 0.8rem !important;
  height: 54px !important;
}

.down-button-container {
  width: 10%;
}

.task-down-icon {
  height: 34px !important;
  width: 34px !important;
  color: var(--dark-blue);
}
.task-container {
  width: 90%;
  margin-top: 3%;
}
.task-container .task-title {
  padding-bottom: 10px;
}
.notask {
  display: flex;
  margin: 20px 30px;
  height: 20% !important;
  align-items: center;
  justify-content: center !important;
}

/* Native Progress dashboard styles — ported from
   physio_admin/src/css/activity.scss so the native ActivityView matches the
   admin Progress view exactly.
   Colors: $main_color #012448 (navy), $secondary_color #f5881f (orange).
   Scoped under .activity-page-container so the generic class names
   (vital-value, row-header, button, …) don't leak into the rest of the app. */

/* Own scroll region between the fixed 64px app header (.mainheader) and the
   fixed 10vh bottom nav (.navBar) — same approach the native .progressContainer
   uses. Without this the content overflows *under* both fixed bars, hiding the
   Progress title at the top and the last card behind the nav. */
.activity-page-container {
  position: fixed;
  top: 64px;
  bottom: 10vh;
  left: 0;
  right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.activity-page-container .activity-page {
  padding-bottom: 24px;
}

.activity-page-container .activity-max-container {
  margin: 0 10px;
}

.activity-page-container .activityHeader {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(192, 192, 192, 1);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 12px 15px 12px 10px;
  color: #012448;
}

.activity-page-container .row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.activity-page-container .activityLabel {
  height: 40px;
}

.activity-page-container .activityLabel > p {
  font-size: 20px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #012448;
  margin: 0;
}

.activity-page-container .row-last-col {
  text-align: right;
}

/* Orange vital / compliance card */
.activity-page-container .vital-value {
  background-color: #f5881f;
  border-radius: 5px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 0;
}

.activity-page-container .vital-value .vital-left {
  flex: 1 1 auto;
}

.activity-page-container .vital-value p {
  line-height: 1em;
  margin: 10px;
}

.activity-page-container .vital-value .heading {
  font-size: 17px;
  color: #ffffff;
}

.activity-page-container .vital-value .footer {
  font-size: 14px;
  color: #012448;
  margin-bottom: 10px;
}

/* VIEW button (was antd primary) */
.activity-page-container .button {
  background-color: #012448;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 20px;
  margin-right: 5px;
  cursor: pointer;
}

.activity-page-container .buttonDisabled {
  background-color: #ccd4de;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 20px;
  margin-right: 5px;
  cursor: default;
}

/* SHARE pill in the header */
.activity-page-container .share-button {
  background-color: #012448;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Chart-modal content renders in a MUI Dialog portal (outside the container),
   so these are intentionally global — mirrors admin .chartDiv. */
.chartDiv {
  padding-top: 10px;
}
.chartDiv h4 {
  font-size: 20px;
}
.chartDiv h3 {
  color: #012448;
}

/* ── pgv2: card-based compliance section ────────────────────────────────────
   Token values from docs/STYLE_GUIDE_PATIENT_V2.md. patientUI.css is not on
   this branch, so the values are inlined — keep them in sync with the guide:
   ink #0f2a4c · muted #596b82 · border #d5dfeb · canvas #f4f7fb ·
   accent #f5881f · success #198a42/#17823f · danger #d92d20 ·
   surfaces: internal #f4f6fa, action #fdf5ea, success #eff8ef, info #f2f6fb
   (border #c5d4e5) · card radius 16 / compact 10 ·
   shadow 0 4px 12px rgba(15,42,76,0.06). */

.activity-page-container .pgv2-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica,
    system-ui, sans-serif;
}
.activity-page-container .pgv2-section p {
  margin: 0;
}

.activity-page-container .pgv2-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #0f2a4c;
}
.activity-page-container .pgv2-sub {
  font-size: 15px;
  line-height: 21px;
  color: #596b82;
  margin-top: 2px;
}

.activity-page-container .pgv2-card {
  background: #ffffff;
  border: 1px solid #d5dfeb;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 42, 76, 0.06);
}

/* Metric card: icon tile | label + description | ring + fraction | chevron */
.activity-page-container .pgv2-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  outline: none;
}
.activity-page-container .pgv2-metric--disabled {
  cursor: default;
  opacity: 0.65;
}
.activity-page-container .pgv2-metric:focus-visible {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #0f2a4c;
}

.activity-page-container .pgv2-icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-page-container .pgv2-icon-tile--success {
  background: #eff8ef;
  color: #17823f;
}
.activity-page-container .pgv2-icon-tile--action {
  background: #fdf5ea;
  color: #f5881f;
}
.activity-page-container .pgv2-icon-tile--info {
  background: #f2f6fb;
  color: #0f2a4c;
}
.activity-page-container .pgv2-icon-tile--navy {
  background: #f4f6fa;
  color: #0f2a4c;
}

.activity-page-container .pgv2-metric-main {
  flex: 1;
  min-width: 0;
}
.activity-page-container .pgv2-metric-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f2a4c;
}
.activity-page-container .pgv2-metric-desc {
  font-size: 13px;
  line-height: 18px;
  color: #596b82;
  margin-top: 2px;
}

.activity-page-container .pgv2-metric-value {
  text-align: center;
  flex-shrink: 0;
  max-width: 96px;
}
.activity-page-container .pgv2-ring {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.activity-page-container .pgv2-ring-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.activity-page-container .pgv2-metric-bigvalue {
  font-size: 17px;
  font-weight: 700;
  color: #0f2a4c;
  overflow-wrap: anywhere;
}
.activity-page-container .pgv2-metric-frac {
  font-size: 12px;
  line-height: 15px;
  color: #596b82;
  margin-top: 4px;
}

.activity-page-container .pgv2-chevron {
  font-size: 26px;
  line-height: 1;
  color: #596b82;
  flex-shrink: 0;
}

/* Compliance-window card: range + day count */
.activity-page-container .pgv2-window {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.activity-page-container .pgv2-window-main {
  display: flex;
  gap: 12px;
  flex: 1 1 240px;
}
.activity-page-container .pgv2-window-range {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: #0f2a4c;
  margin-top: 2px;
}
.activity-page-container .pgv2-window-days {
  font-size: 15px;
  font-weight: 700;
  color: #17823f;
}

/* Progress-window scope toggle: POST-OP (default) vs ALL DAYS. Sits inside the
   window card; wraps under the date range on narrow phones. */
.activity-page-container .pgv2-seg {
  display: inline-flex;
  align-self: center;
  background: #f2f6fb;
  border: 1px solid #d5dfeb;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.activity-page-container .pgv2-seg-btn {
  border: none;
  background: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  color: #596b82;
  cursor: pointer;
  white-space: nowrap;
}
.activity-page-container .pgv2-seg-btn.is-on {
  background: #ffffff;
  color: #0f2a4c;
  box-shadow: 0 1px 3px rgba(15, 42, 76, 0.16);
}
.activity-page-container .pgv2-seg-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #0f2a4c;
}

/* Native-feel image swap: every frame is its own GPU layer, opacity flip
   is a single compositor command, no layout, no paint, no transitions. */
/* Shift the whole figure (PNG body + band dial) up so the angle label
   at 90° (straight down from the knee anchor) doesn't get clipped at
   the bottom of the figure container. */
/* pointer-events: none — the translateY creates a stacking context that
   paints above later siblings (e.g. ActionButtons). Without this, the
   figure container eats clicks meant for START / STOP. */
/* No transform on .isf-root. Earlier iterations used translateY(-70px)
   to pull the figure up over the action buttons, but that also pulled
   the absolutely-positioned live-angle label up into the .tpx-top-msg
   row above the figure, colliding with the celebrate / set-done /
   doing-great messages. Action button spacing is now handled by the
   marginTop wrapper in TracPatchSessionTemplate. */
.isf-root {
   position: relative;
}

/* Zoom the PNG body inside its container without resizing the bands /
   dial. Scale > 1 makes the body silhouette appear larger (crops empty
   margins on the PNG); transform-origin centers the zoom. */
.isf-stack {
   position: absolute;
   inset: 0;
   transform: scale(1.0);
   transform-origin: center center;
}

/* NO layer-promotion hints here — deliberately.
   This rule used to carry `will-change: opacity` + `transform: translateZ(0)`
   + `backface-visibility: hidden` to make each frame its own GPU layer. That
   is the documented `will-change` anti-pattern: the whole PNG set (23-32
   frames) is mounted at once, so those three properties promoted 23-32
   container-sized layers PER FIGURE. Mobile compositor memory can't hold them,
   so the browser evicts the tiles of whichever layers are currently invisible.
   Flipping opacity 0->1 on an evicted layer then draws NOTHING until a
   re-raster lands — a blank figure with the dial still visible, and the faster
   the angle changes the more often it hits.
   Note the layer size is the CONTAINER, not the source PNG, which is why this
   affected every exercise equally and why downscaling the PNGs didn't help.
   Without the hints these are plain painted elements: the browser skips
   opacity:0 entirely and repaints one small region per swap, off the already
   decoded bitmap held by imageDecodeCache.js. */
.isf-frame {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   opacity: 0;
   transition: none;
   pointer-events: none;
   user-select: none;
}

.isf-frame--active {
   opacity: 1;
}

.isf-dial {
   position: absolute;
   inset: 0;
   pointer-events: none;
   /* Match .isf-stack exactly — different scale factors compound any
     pivot offset because they share the same transform-origin, which
     causes the red arrow to rotate around a point that doesn't sit on
     the PNG's anatomical knee. BAND_R in RomBandDial is bumped to
     compensate for the reduced scale so the bands still cover the
     same visual area. */
   transform: scale(1.0);
   transform-origin: center center;
}

.isf-angle-label {
   position: absolute;
   top: 12px;
   left: 16px;
   font-weight: 700;
   font-size: 36px;
   color: #4a6280;
   pointer-events: none;
   z-index: 10;
   transition: color 200ms ease, transform 200ms ease;
   /* Subtle pulse when the value changes — `tabular-nums` keeps digit
     width stable so the label doesn't reflow as the number ticks. */
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum';
}

.isf-loading {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #94a3b8;
   font-size: 28px;
   letter-spacing: 4px;
}

@media (prefers-reduced-motion: reduce) {
   .isf-frame {
      transition: none;
   }
}

/* Styles for /pages/tracpatch-exercise.js — the unified TracPatch
   session page. Class names are prefixed `tp-` to keep them scoped.
   The page sets a dynamic background-color inline via React state
   (band tracking); everything else lives here.

   Naming map (skim):
     .tpx-root            outer page wrapper
     .tpx-fullscreen-msg  loading / error placeholder
     .tpx-header          white top bar (exercise name + week + ×)
     .tpx-warn-bar        yellow "incorrect reading" strip
     .tpx-error-card      red "exercise stopped" panel (sits above STOP button)
     .tpx-counter-row     reps/sets/peaks metrics strip
     .tpx-metric          one cell within counter row
     .tpx-percent-bar     persistent "M/N reps · X% completed" strip
     .tpx-top-msg         reserved-height message area (celebrate / set-done / DoingGreat)
     .tpx-figure-wrap     positioned wrapper (figure + top overlay)
     .tpx-figure-overlay  top overlay: TUTORIAL button + error/warning box
     .tpx-btn-tutorial-top  compact TUTORIAL pill (top-right, over figure)
     .tpx-figure          knee figure container
     .tpx-slider-*        live-angle slider + labels (ForceConnect only)
     .tpx-actions         padded wrapper for the bottom buttons
     .tpx-btn-start/stop  green / red START | STOP button
     .tpx-btn-sim         sim-only auto-complete button
     .tpx-btn-reset       reset-all-sets confirmation button
     .tpx-overlay         full-screen modal backdrop (hold)
     .tpx-overlay--hold   red-tinted variant
     .tpx-modal-card      centered popup card (used by hold overlay)
     .tpx-doing-great     animated green-zone encouragement text
*/

/* ── Tunable palette ───────────────────────────────────────────────────
   Single source of truth for the session-page colors. Mirrors the
   EXERCISE_SESSION_COLOR_TUNER replica: the rules below read these via
   var(), so retuning the page means editing only this block. SVG figure
   zones (--tp-zone-*, --tp-angle-indicator) are also defaulted here and in
   components/exercise/tracpatchColors.js (SVG attrs can't resolve var()). */
:root {
  --bg-idle: #bdb6b6;
  --bg-recording: #fee4a8;
  --bg-green: #d7f5dc;
  --tp-zone-green: #669d34;
  --tp-zone-yellow: #fefb41;
  --tp-zone-blue: #bdb6b6;
  --tp-angle-indicator: #e53935;
  --header-bg: #ffffff;
  --header-text: #012448;
  --counter-bg: #ffffff;
  --metric-label: #888888;
  --metric-ext: #f5881f;
  --metric-flex: #f5881f;
  --angle-label: #000000;
  --encourage-1: #1b5e20;
  --encourage-2: #2e7d32;
  --celebrate: #2e7d32;
  --btn-start: #669d34;
  --btn-stop: #c62828;
  --btn-text: #ffffff;
  --btn-sim: #8a6d3b;
  --btn-reset: #c62828;
  --warn-bg: #fff3cd;
  --warn-border: #ffeeba;
  --warn-text: #856404;
  --error-bg: #ffebee;
  --error-border: #ef9a9a;
  --error-title: #c62828;
  --error-body: #b71c1c;
}

/* ── Root + chrome ─────────────────────────────────────────────────── */
.tpx-root {
  min-height: 100vh;
  transition: background-color 400ms ease;
  font-family: Roboto, sans-serif;
  padding-bottom: 24px;
}

.tpx-fullscreen-msg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: Roboto, sans-serif;
  background: #f5f5f5;
}
.tpx-fullscreen-msg__title {
  font-size: 18px;
  font-weight: 700;
  color: #012448;
  margin-bottom: 8px;
}
.tpx-fullscreen-msg__body {
  font-size: 14px;
  color: #555;
  text-align: center;
  max-width: 480px;
}
.tpx-fullscreen-msg--spinner {
  background: transparent;
}

@keyframes tpx-spin {
  to {
    transform: rotate(360deg);
  }
}
.tpx-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(1, 36, 72, 0.15);
  border-top-color: #012448;
  border-radius: 50%;
  animation: tpx-spin 0.7s linear infinite;
}

.tpx-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 56px 12px;
  background-color: var(--header-bg, #fff);
  color: var(--header-text, #012448);
}
.tpx-header__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.tpx-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--header-text, #012448);
  line-height: 1.2;
}
.tpx-header__week {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--header-text, #012448);
  opacity: 0.7;
  letter-spacing: 0.4px;
}
.tpx-header__week-corner {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--header-text, #012448);
  letter-spacing: 0.4px;
  z-index: 2;
}
.tpx-header__close {
  position: absolute;
  right: 12px;
  top: 12px;
  color: #212121;
  opacity: 0.6;
  cursor: pointer;
  font-size: 34px !important;
  z-index: 2;
}
.tpx-header__close:hover {
  opacity: 0.85;
}

/* Header WITH a week badge (the Progress Test).
   The badge is absolutely positioned above, i.e. it floats OVER the centred
   title. That only works while both are short: "Pre-op" and "Progress Test"
   clear each other, "Preoperatorio" and "Prueba de progreso" print on top of
   one another. Here the three parts are real columns instead, so the title
   gets whatever the badge and the close button leave, and wraps onto a second
   line when that is not enough.
   The two side columns are equal (1fr each), so the title stays centred
   whenever the badge fits in its half — which keeps the English layout where
   it was. Offsets reproduce the absolute positions: badge 16/16, close 12/12. */
.tpx-header--corner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 10px;
  padding: 16px 12px 12px 16px;
}
.tpx-header--corner .tpx-header__week-corner {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  white-space: nowrap;
  /* 20px text on the title's 26.4px line, so the two share a first line */
  line-height: 1.32;
}
.tpx-header--corner .tpx-header__titles {
  grid-column: 2;
  grid-row: 1;
}
.tpx-header--corner .tpx-header__close {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  /* 34px icon on a 26px line: pull it in top and bottom so it sits where the
     absolute version did and does not make the header taller. */
  margin-top: -4px;
  margin-bottom: -4px;
}

/* ── Banners / error cards ────────────────────────────────────────── */
.tpx-warn-bar {
  background: var(--warn-bg, #fff3cd);
  color: var(--warn-text, #856404);
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--warn-border, #ffeeba);
}
.tpx-error-card {
  margin: 0 24px 12px;
  padding: 12px 16px;
  background-color: var(--error-bg, #ffebee);
  border-radius: 8px;
  border: 1px solid var(--error-border, #ef9a9a);
}
.tpx-error-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--error-title, #c62828);
  margin-bottom: 4px;
}
.tpx-error-card__body {
  font-size: 13px;
  color: var(--error-body, #b71c1c);
}

/* ── Counter row ──────────────────────────────────────────────────── */
.tpx-counter-row {
  display: flex;
  justify-content: space-around;
  background-color: var(--counter-bg, #fff);
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}
.tpx-metric {
  text-align: center;
}
.tpx-metric__label {
  font-size: 10px;
  color: var(--metric-label, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.tpx-metric__value {
  font-size: 20px;
  font-weight: 700;
}

/* ── Percent-complete strip ───────────────────────────────────────── */
/* Persistent "M/N reps · X% completed" line under the counter row.
   Always visible; values update as the patient completes sets. */
.tpx-percent-bar {
  background-color: #fff;
  padding: 8px 16px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #012448;
  border-bottom: 1px solid #eee;
}
.tpx-percent-bar__count {
  color: #555;
  font-weight: 500;
}
.tpx-percent-bar__sep {
  color: #bbb;
  margin: 0 4px;
}
.tpx-percent-bar__pct {
  color: #012448;
  font-weight: 700;
}

/* ── Top message area ─────────────────────────────────────────────── */
/* Reserved-height slot under the counter row that hosts:
     - daily-target celebration (replaces full-screen overlay)
     - per-set "Great set!" message
     - in-green-zone DoingGreatText
   Keeps a fixed min-height so the figure never shifts down. */
.tpx-top-msg {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
}

/* Live-angle degrees pinned to the top-right of the START/STOP button
   block. Patient reads the angle from a stable corner above the action
   button instead of from a row above the figure (which crowded the
   encouragement messages). */
.tpx-btn-angle-label {
  position: absolute;
  top: -50px;
  right: 2px;
  font-size: 42px;
  font-weight: 800;
  color: var(--angle-label, #000000);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  pointer-events: none;
  z-index: 5;
}
.tpx-top-msg__celebrate {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  color: var(--celebrate, #2e7d32);
  text-align: center;
}
.tpx-top-msg__set-done {
  font-size: 17px;
  font-weight: 600;
  color: var(--celebrate, #2e7d32);
  text-align: center;
}
/* "Nth Set Started" toast shown as the cycle auto-advances between sets. */
.tpx-top-msg__set-start {
  font-size: 18px;
  font-weight: 700;
  color: var(--btn-start, #669d34);
  text-align: center;
}

/* ── Confetti burst ────────────────────────────────────────────────────
   Canvas overlay driven by ConfettiBurst.js. Fixed to the viewport so
   the particle field spans the whole screen for the ~2s celebration. */
.tpx-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ── Figure ───────────────────────────────────────────────────────── */
/* Positioned wrapper so the top overlay (TUTORIAL button + error/warning
   box) can float over the empty space above the figure. */
.tpx-figure-wrap {
  position: relative;
}
.tpx-figure {
  padding: 4px 20px 8px;
  margin-top: -8px;
}

/* Top overlay layer: pinned to the top of the figure area. The layer
   itself ignores pointer events so taps fall through to the figure; its
   interactive children re-enable them. */
.tpx-figure-overlay {
  position: absolute;
  /* Negative top lifts just the error box + TUTORIAL button up into the
     empty space above the figure. The overlay is absolutely positioned, so
     this moves only these two elements — the figure stays put. */
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 10px 14px 0;
  pointer-events: none;
}
.tpx-figure-overlay > * {
  pointer-events: auto;
}

/* Right-align the compact TUTORIAL pill within the overlay. */
.tpx-tutorial-top-row {
  display: flex;
  justify-content: flex-end;
}
.tpx-btn-tutorial-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #c1c1c1;
  color: #16314f;
  border: 2px solid #16314f;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.tpx-btn-tutorial-top__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #16314f;
}

/* In the overlay the error/warning boxes span the padded width (their
   default full-page insets don't apply here). Rounded + shadowed so they
   read as floating panels over the figure rather than page-edge strips. */
.tpx-figure-overlay .tpx-error-card {
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tpx-figure-overlay .tpx-warn-bar {
  border-radius: 8px;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ── Slider ───────────────────────────────────────────────────────── */
.tpx-slider {
  padding: 8px 24px;
}
.tpx-slider__labels {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.tpx-slider__input {
  width: 100%;
  transform: scaleX(-1);
  opacity: 1;
  cursor: default;
}
.tpx-slider__input.is-interactive {
  cursor: pointer;
}
.tpx-slider__hint {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-top: 2px;
}

/* ── Buttons block ────────────────────────────────────────────────── */
.tpx-actions {
  padding: 12px 24px;
}
.tpx-actions--tight {
  padding: 0 24px 8px;
}
.tpx-actions--bottom {
  padding: 0 24px 12px;
}

.tpx-btn-primary {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
  color: var(--btn-text, #fff);
  border: none;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.tpx-btn-start {
  background-color: var(--btn-start, #669d34);
}
/* START while the device can't serve a test yet — an upload is still in
   flight, or the Blue sensor is not linked to White. Paired with
   .tpx-start-wait below, which says which. See hooks/useRomReady.js. */
.tpx-btn-primary:disabled {
  background-color: #9e9e9e;
  opacity: 0.6;
  cursor: not-allowed;
}
.tpx-start-wait {
  max-width: 400px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 13px;
  color: #666;
}
/* A START that was issued and did not take — an error to act on, not a wait. */
.tpx-start-error {
  color: #c62828;
  font-weight: 600;
}
.tpx-btn-stop {
  background-color: var(--btn-stop, #c62828);
}
/* End-of-cycle completion buttons. NEXT EXERCISE is orange; CLOSE is navy. */
.tpx-btn-next {
  background-color: #f5881f;
}
.tpx-btn-close {
  background-color: #012448;
}

/* View Tutorial link — matches the START button's height (same vertical
   padding + font-size) so the two stack as equal-height blocks. */
.tpx-btn-tutorial {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #e3f2fd;
  color: #16314f;
  border: 1px solid #c5dcf2;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.tpx-btn-tutorial__icon {
  position: absolute;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #16314f;
}

.tpx-btn-sim {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
  background-color: var(--btn-sim, #8a6d3b);
  color: var(--btn-text, #fff);
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.tpx-btn-reset {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
  background-color: transparent;
  color: var(--btn-reset, #c62828);
  border: 1px solid var(--btn-reset, #c62828);
  border-radius: 8px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
}

/* ── Modal overlay (HOLD prompt) ──────────────────────────────────── */
@keyframes tp-celebrate-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.tpx-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9999;
  padding: 24px;
  animation: tp-celebrate-fade 400ms ease;
}
.tpx-overlay--hold {
  background: rgba(198, 40, 40, 0.35);
}

.tpx-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}
.tpx-modal-card--hold {
  border: 2px solid #c62828;
}

.tpx-modal-card__emoji {
  font-size: 48px;
  margin-bottom: 8px;
}
.tpx-modal-card__emoji--lg {
  font-size: 56px;
}
.tpx-modal-card__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}
.tpx-modal-card__title--red {
  color: #c62828;
}
.tpx-modal-card__body {
  font-size: 14px;
  color: #333;
  line-height: 1.45;
}
.tpx-modal-card__body--small {
  font-size: 13px;
  color: #555;
}
.tpx-modal-card__countdown {
  font-size: 44px;
  font-weight: 900;
  color: #b71c1c;
  line-height: 1;
  margin-bottom: 8px;
}

/* ── Green-zone encouragement text ─────────────────────────────────── */
@keyframes tp-doing-great-in {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tp-doing-great-pulse {
  0%,
  100% {
    transform: scale(1);
    color: var(--encourage-1, #1b5e20);
  }
  50% {
    transform: scale(1.04);
    color: var(--encourage-2, #2e7d32);
  }
}

.tp-doing-great {
  text-align: center;
  font-size: clamp(13px, 4.6vw, 20px);
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 14px 8px 4px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  animation:
    tp-doing-great-in 380ms cubic-bezier(0.22, 1.4, 0.44, 1) both,
    tp-doing-great-pulse 1.8s ease-in-out 380ms infinite;
}