:root {
  --primary-color: #3054a6;
  --primary-accent: #569cd5;
  --primary-text-color: #1a2633;
  --secondary-accent: #eeeeee;
  --dangel-color: #f14b4b;
  --success-color: #1eab1a;
  --primary-bg-clear-color: #f2f5fc;
  /**********************/
  --system-primary-color: #51a9b8;
  --system-primary-border-color: #afbed3;
  --system-primary-text-color: #6d7b89;
  --system-primary-accent-color: #775ca0;
  --system-primary-bg-clear-color: #d8e2ea;
  --system-primary-acc-bg-clear-color: #f0f3fb;
  --system-secondary-color: #27b2bd;
}

/************global-classes*/
.viewscene {
  max-width: 84rem;
}

.viewdocument {
  max-width: 68rem;
}

.f-space {
  width: 100%;
  height: 100%;
}
.f-space body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.custom-shadow-1 {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 0 4rem 0.8rem rgba(0, 0, 0, 0.15);
}

.nopr > * {
  padding-right: 0 !important;
}

.times-new-roman * {
  font-family: "Times New Roman", Times, serif !important;
}

.black-form * {
  color: #000 !important;
}

/************global-classes*/
/************clasess-generator*/
.ovs-primary-cl {
  color: var(--primary-color);
}
.ovs-primary-bg {
  background-color: var(--primary-color);
}
.ovs-primary-br {
  background-color: var(--system-primary-border-color);
}
.ovs-primary-tx {
  color: #000;
}
.ovs-primary-clear-bg {
  background-color: var(--primary-bg-clear-color);
}

.ovs-primary-acc-cl {
  color: var(--primary-accent);
}
.ovs-primary-acc-bg {
  background-color: var(--primary-accent);
}
.ovs-primary-acc-tx {
  color: #484848;
}
.ovs-primary-acc-clear-bg {
  background-color: var(--system-primary-acc-bg-clear-color);
}

.ovs-secondary-acc-cl {
  color: var(--secondary-accent);
}
.ovs-secondary-acc-bg {
  background-color: var(--secondary-accent);
}
.ovs-secondary-acc-tx {
  color: #585858;
}

.ovs-success-color-cl {
  color: var(--success-color);
}
.ovs-success-color-bg {
  background-color: var(--success-color);
}
.ovs-success-color-tx {
  color: var(--success-color);
}

.ovs-danger-color-cl {
  color: var(--danger-color);
}
.ovs-danger-color-bg {
  background-color: var(--danger-color);
}
.ovs-danger-color-tx {
  color: var(--danger-color);
}

.system-secondary-cl {
  color: var(--system-secondary-color);
}
.system-secondary-bg {
  background-color: var(--system-secondary-color);
}

.system-primary-cl {
  color: var(--system-primary-color);
}
.system-primary-bg {
  background-color: var(--system-primary-color);
}
.system-primary-br {
  border-color: var(--system-primary-color) !important;
}
.system-primary-tx {
  color: var(--primary-text-color);
}
.system-primary-clear-bg {
  background-color: var(--system-primary-bg-clear-color);
}
.system-primary-acc-cl {
  color: var(--system-primary-accent-color);
}
.system-primary-acc-bg {
  background-color: var(--system-primary-accent-color);
}
.system-primary-acc-tx {
  color: var(--system-primary-text-color);
}
.system-primary-acc-clear-bg {
  background-color: var(--system-primary-acc-bg-clear-color);
}

/************clasess-generator*/
.s-border {
  border: 1px solid;
}

.dotted-b {
  border-style: dotted;
}

.rem-last-b:last-child {
  border: 0;
}

.custom-table-component {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.custom-table-component .table-wrapper {
  display: flex;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  flex-grow: 1;
}

.index-100 {
  z-index: 100;
}
.index-500 {
  z-index: 500;
}
.index-1000 {
  z-index: 1000;
}
.index-1500 {
  z-index: 1500;
}

.closer-modal-form {
  --Size: 2.5rem;
  --Color: #e3e3e3;
  position: relative;
  width: var(--Size);
  height: var(--Size);
  border: 1px solid var(--Color);
  cursor: pointer;
}
.closer-modal-form::before, .closer-modal-form::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  height: 2px;
  background-color: var(--Color);
  translate: -50% -50%;
}
.closer-modal-form::before {
  rotate: -45deg;
}
.closer-modal-form::after {
  rotate: 45deg;
}
.closer-modal-form:hover {
  opacity: 0.7;
}
.closer-modal-form:active {
  opacity: 0.4;
}

.link-action {
  text-decoration: none;
}
.link-action:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.link-action:active {
  opacity: 0.5;
}
.link-action:disabled {
  background-color: #e3e3e3 !important;
  color: #c3c3c3 !important;
}

.signature-canvas {
  width: 100%;
  max-width: 30rem;
  height: 15rem;
}

.button-submit-one:disabled {
  opacity: 0.5;
  color: #c3c3c3 !important;
  background-color: #e3e3e3 !important;
}
.button-submit-one:focus {
  outline: 4px solid var(--primary-accent);
}

.contacts-section > div {
  border-bottom: 1px dotted #e3e3e3;
}
.contacts-section .remove-button-section {
  position: relative;
  overflow: hidden;
}
.contacts-section .remove-button-section button {
  position: relative;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 0.3rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.contacts-section .contact-item:hover .remove-button-section button {
  transform: translate(-50%, 0%);
}

/************customs-style***************/
.custom-divider {
  display: flex;
  align-items: center;
}
.custom-divider::before, .custom-divider::after {
  content: "";
  display: inline-flex;
  flex-grow: 1;
  height: 2px;
  background-color: #e3e3e3;
}
.custom-divider::before {
  max-width: 2rem;
}

.big-case {
  text-transform: uppercase;
}

.helvetica {
  font-family: "Helvetica", "Poppins";
}
.helvetica.light {
  font-weight: 100;
}

.text-custom-1 {
  color: #747B81;
}

.bg-custom-1 {
  background-color: #747B81;
}

.text-custom-2 {
  color: #35abd3;
}

.bg-custom-2 {
  background-color: #35abd3;
}

.disabled-button:disabled {
  background-color: #e3e3e3;
  color: #747B81;
}

.complete-admin-canvas {
  max-width: 1280px;
}

/*********************/
.ovs-floating-elemnt {
  --LeftPad: 1rem;
  --FontColor: #484848;
  --BorderColor: #e3e3e3;
  position: relative;
  /* .ovs-fl-input:focus + label, .ovs-fl-input.valued + label
  {
      top: 32%;
      display: block;
      font-size: .67rem;
      opacity: .7;
  } */
}
.ovs-floating-elemnt * {
  transition: all 0.25s;
}
.ovs-floating-elemnt label {
  position: absolute;
  top: 50%;
  left: var(--LeftPad);
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 500;
  color: #585858;
}
.ovs-floating-elemnt .ovs-fl-input {
  padding: 1.5rem var(--LeftPad) 0.5rem;
  height: auto;
  border: 1px solid var(--BorderColor);
  border-radius: 0.2rem;
  font-size: 0.85rem;
  color: var(--FontColor);
  width: 100%;
}
.ovs-floating-elemnt .ovs-fl-input:disabled {
  background-color: #f0f0f0;
  color: #717171;
  opacity: 0.8;
}
.ovs-floating-elemnt label {
  top: 32%;
  display: block;
  font-size: 0.67rem;
  opacity: 0.7;
}

.ovs-border-black {
  border: 1px solid black;
}

.black-form .ovs-floating-elemnt label {
  top: 27%;
  left: 0.7rem;
  opacity: 1;
  font-size: 1rem;
}
.black-form .ovs-floating-elemnt input {
  font-size: 1rem;
}

.star-required {
  position: absolute;
  color: red;
  display: none;
  font-size: 0.7rem;
}
.star-required.active {
  display: inline-block;
}

.question-block {
  background-color: #fff;
}
.question-block * {
  transition: all 0.4s;
}
.question-block .question-header {
  cursor: pointer;
  border-bottom: 1px solid #e3e3e3;
}
.question-block .question-header .qh-icon-wrapper .icon {
  left: 50%;
  translate: -50% -62.5%;
  rotate: -45deg;
  border: 1px solid #c3c3c3;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.question-block .question-header:hover {
  background: #fafafa;
}
.question-block .question-body {
  padding: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.question-block.expanded .question-header .qh-icon-wrapper .icon {
  translate: -50% -25%;
  rotate: -225deg;
}
.question-block.expanded .question-body {
  padding: 1rem;
  height: auto;
  opacity: 1;
}

button.add_button {
  --IconSize: 3rem;
  --BorderColor: transparent;
  position: relative;
  display: flex;
  border: 1px solid var(--BorderColor);
  cursor: pointer;
  height: var(--IconSize);
  align-items: stretch;
  overflow: hidden;
}
button.add_button .add_icon {
  position: relative;
  display: flex;
  width: var(--IconSize);
  background-color: rgba(0, 0, 0, 0.15);
}
button.add_button .add_icon::before, button.add_button .add_icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  content: "";
  width: 40%;
  height: 3px;
  display: flex;
  background-color: #fff;
  border-radius: 0.3rem;
}
button.add_button .add_icon::after {
  rotate: -90deg;
}
button.add_button label {
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}
button.add_button:hover {
  opacity: 0.7;
}
button.add_button:active {
  opacity: 0.4;
}

/*****************/
.FadeUp {
  animation: FadeUpAnim 0.5s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

@keyframes FadeUpAnim {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translate(0);
    opacity: 1;
  }
}
/******************/
.FadeOut {
  animation: FadeOutAnim 0.5s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

@keyframes FadeOutAnim {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(50%);
    opacity: 0;
    display: none;
  }
}
/******************/
.loading-bar-component {
  translate: 0% -100%;
  opacity: 0;
  transition: all 0.25s;
}
.loading-bar-component.actived {
  translate: 0% 0%;
  opacity: 1;
}

.LoadingBar {
  animation: LoadingBar 2s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes LoadingBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
/**rate-component**************************/
.ovs-rate-component {
  --ButtonsSize: 2.5rem;
  --BorderColor: #e3e3e3;
  --SelectedColor: var(--bs-cyan);
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}
.ovs-rate-component .rate-xtreme-labels {
  display: flex;
  justify-content: space-between;
}
.ovs-rate-component .rate-xtreme-labels label {
  font-size: 0.9rem;
  padding: 0.1rem 0;
}
.ovs-rate-component .rate-triggers-wrapper {
  display: flex;
  border: 1px solid var(--BorderColor);
  justify-content: center;
  overflow-x: auto;
  max-width: 100%;
}
.ovs-rate-component .rate-triggers-wrapper .rate-trigger-item {
  position: relative;
  width: var(--ButtonsSize);
  height: var(--ButtonsSize);
  border-right: 1px solid var(--BorderColor);
  cursor: pointer;
}
.ovs-rate-component .rate-triggers-wrapper .rate-trigger-item input {
  position: absolute;
  opacity: 0;
}
.ovs-rate-component .rate-triggers-wrapper .rate-trigger-item .rate-trigger-visual {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ovs-rate-component .rate-triggers-wrapper .rate-trigger-item input:checked + .rate-trigger-visual {
  background-color: var(--SelectedColor);
  color: #fff;
}
.ovs-rate-component .rate-triggers-wrapper .rate-trigger-item:last-child {
  border-right: 0;
}
.ovs-rate-component.big {
  --ButtonsSize: 3.5rem;
}

/****************************/
.check-symbol {
  display: flex;
  width: 55px;
  height: 55px;
  border: 2px solid;
  border-radius: 50%;
  position: relative;
}
.check-symbol::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62.5%) rotate(45deg);
  border: 2px solid;
  width: 30%;
  height: 58%;
  border-top-color: transparent;
  border-left-color: transparent;
}

/**selection-component**************************/
.ovs-selection-component {
  --InputSize: 2rem;
}
.ovs-selection-component .selection-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ovs-selection-component .selection-wrapper .selection-item {
  position: relative;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  max-width: 100%;
  min-width: 45%;
}
.ovs-selection-component .selection-wrapper .selection-item input {
  position: absolute;
  opacity: 0;
}
.ovs-selection-component .selection-wrapper .selection-item .item-visual {
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.ovs-selection-component .selection-wrapper .selection-item .item-visual .item-input {
  position: relative;
  border: 1px solid;
  width: var(--InputSize);
  height: var(--InputSize);
  flex-shrink: 0;
}
.ovs-selection-component .selection-wrapper .selection-item .item-visual .item-label {
  white-space: normal;
  padding: 0.2rem 0.4rem;
}
.ovs-selection-component .selection-wrapper .selection-item .item-visual:hover {
  border: 1px dotted;
}
.ovs-selection-component .selection-wrapper .selection-item input[type=radio] + .item-visual .item-input {
  border-radius: 50%;
}
.ovs-selection-component .selection-wrapper .selection-item input:checked + .item-visual {
  border: 1px solid;
}
.ovs-selection-component .selection-wrapper .selection-item input:checked + .item-visual .item-input {
  background-color: #000;
}
.ovs-selection-component .selection-wrapper .selection-item input:checked + .item-visual .item-input::before {
  content: "";
  position: absolute;
  border: 2px solid;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 30%;
  transform: translate(-50%, -75%) rotate(-45deg);
  border-color: transparent transparent #fff #fff;
}

/****************************/
/**survey-page**************************/
.survey-canvas {
  display: flex;
  justify-content: center;
}
.survey-canvas .survey-panel {
  display: flex;
  width: 100%;
  max-width: 800px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
}
.survey-canvas .survey-panel .survey-header {
  display: flex;
  flex-direction: column;
  padding: 7rem 0rem 2rem;
  width: 100%;
}
.survey-canvas .survey-panel .survey-body {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
}
.survey-canvas .survey-panel .survey-body .survey-item {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 4rem;
  opacity: 0.5;
  max-width: 100%;
}
.survey-canvas .survey-panel .survey-body .survey-item.actived {
  opacity: 1;
}

/****************************/
.forms-header .logo-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}
.forms-header .logo-wrapper .clinic-logo {
  --AspectRatio: 1;
  display: inline-block;
  width: 14em;
  aspect-ratio: var(--AspectRatio);
  margin-bottom: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.forms-header .logo-wrapper .clinic-logo.square {
  --AspectRatio: 1;
}
.forms-header .logo-wrapper .clinic-logo.screen {
  --AspectRatio: 16 / 9;
}

.form-documents {
  --Padding: 2rem 4rem;
  display: flex;
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  flex-direction: column;
  align-items: center;
}
.form-documents.letter {
  max-width: 864px;
}
.form-documents .letter-root {
  display: flex;
  min-height: 100%;
}
.form-documents .letter-root .letter-canvas {
  padding: var(--Padding);
  max-width: 800px;
  min-height: 100%;
}
.form-documents .footer {
  margin-top: auto;
}
.form-documents.center {
  align-items: center;
}
.form-documents .form-canvas {
  display: flex;
  justify-content: center;
  max-width: 1180px;
  width: 100%;
  flex-direction: column;
  padding: 2em 0;
}

.sidebar-scrolling .nav-item.actived {
  background-color: var(--primary-color);
}
.sidebar-scrolling .nav-item.actived span {
  color: #fff;
}
.sidebar-scrolling .nav-item .nav-link:hover {
  background-color: var(--primary-accent) !important;
  border-left-color: var(--primary-accent) !important;
  color: #fff !important;
}

[type=checkbox]:checked, [type=radio]:checked {
  background-size: auto;
}

.testing {
  border: 1px solid;
  transform: translateX(-1%);
}

.donut-chart-panel {
  max-width: 300px;
}
.donut-chart-panel .chart-canvas {
  width: 100%;
}
.donut-chart-panel .chart-canvas .circle {
  fill: none;
  stroke-linecap: butt;
  animation: progress 1s ease-out forwards;
}
.donut-chart-panel .chart-canvas .circle:hover {
  cursor: pointer;
  stroke-width: 6;
}
.donut-chart-panel .stats-description {
  padding: 1rem;
  border: 1px solid #e3e3e3;
  margin: 0.3rem;
  background-color: #f0f0f0;
  border-radius: 0.2rem;
}
.donut-chart-panel .stats-description .stat-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0;
  font-size: 0.8rem;
  color: #585858;
}
.donut-chart-panel .stats-description .stat-item .color-box {
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
}

.line-chart-panel {
  padding: 1rem;
}
.line-chart-panel .horizontal-group {
  border: 1px solid;
}
.line-chart-panel .horizontal-group .horizontal-cat-name {
  font-weight: 500;
  transform: translateX(-1%);
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.survey_stats_dashboard {
  display: grid;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 3rem;
  grid-template-areas: "surveyTotal          surveySent         surveyPending                 surveyCompleted" "ratesPerMonth        ratesPerMonth      surveysPassedRelation         surveysPassedRelation" "lastSurveysTable     lastSurveysTable   completedSurveysTable         completedSurveysTable";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr auto auto;
}
.survey_stats_dashboard #surveys-total {
  grid-area: surveyTotal;
}
.survey_stats_dashboard #surveys-sent {
  grid-area: surveySent;
}
.survey_stats_dashboard #surveys-pending {
  grid-area: surveyPending;
}
.survey_stats_dashboard #surveys-completed {
  grid-area: surveyCompleted;
}
.survey_stats_dashboard #rates-per-month {
  grid-area: ratesPerMonth;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
}
.survey_stats_dashboard #rates-per-month .canvas-wrapper {
  width: 100%;
}
.survey_stats_dashboard #surveys-passed-relation {
  grid-area: surveysPassedRelation;
  display: flex;
  justify-content: center;
  align-items: center;
}
.survey_stats_dashboard #surveys-passed-relation .canvas-wrapper {
  width: 60%;
}
.survey_stats_dashboard #surveys-passed-relation #myChart2 {
  height: 100%;
  width: auto;
}
.survey_stats_dashboard #last-surveys-table {
  grid-area: lastSurveysTable;
}
.survey_stats_dashboard #completed-surveys-table {
  grid-area: completedSurveysTable;
}
@media screen and (max-width: 500px) {
  .survey_stats_dashboard {
    grid-template-areas: "surveyTotal          surveySent" "surveyPending        surveyCompleted" "ratesPerMonth        ratesPerMonth" "surveysPassedRelation         surveysPassedRelation" "lastSurveysTable     lastSurveysTable" "completedSurveysTable         completedSurveysTable";
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 350px) {
  .survey_stats_dashboard {
    grid-template-areas: "surveyTotal" "surveySent" "surveyPending" "surveyCompleted" "ratesPerMonth" "surveysPassedRelation" "lastSurveysTable" "completedSurveysTable";
    grid-template-columns: 1fr;
  }
}

.steps-progress-bar {
  --SpotSize: 1.5rem;
  --LineHeight: .4rem;
  --InlinePadding: .3rem;
  margin-inline: 10ch;
  border-radius: 50rem;
  padding: var(--InlinePadding);
  background-color: var(--system-primary-acc-bg-clear-color);
}
.steps-progress-bar .component-canvas {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.steps-progress-bar .component-canvas::before, .steps-progress-bar .component-canvas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--LineHeight);
  translate: -50% -50%;
}
.steps-progress-bar .component-canvas::before {
  width: 98%;
  background-color: var(--system-primary-bg-clear-color);
  z-index: 1;
}
.steps-progress-bar .component-canvas::after {
  left: 0;
  translate: 0 -50%;
  justify-self: flex-start;
  width: 0%;
  background-color: var(--system-secondary-color);
  z-index: 2;
}
.steps-progress-bar .component-canvas .step-point {
  position: relative;
  width: var(--SpotSize);
  height: var(--SpotSize);
  border: 1px solid var(--system-primary-border-color);
  border-radius: 50%;
  z-index: 5;
  background-color: #fff;
}
.steps-progress-bar .component-canvas .step-point label {
  position: absolute;
  top: -1.7rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.85rem;
  text-align: center;
  min-width: 22ch;
}
.steps-progress-bar .component-canvas .step-point.actived {
  border-color: var(--system-secondary-color);
  background-color: var(--system-secondary-color);
}
.steps-progress-bar .component-canvas .step-point.actived::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -62.5%) rotate(45deg);
  border-color: transparent #fff #fff transparent;
}
.steps-progress-bar.step1 .component-canvas::after {
  width: 0%;
}
.steps-progress-bar.step2 .component-canvas::after {
  width: 33%;
}
.steps-progress-bar.step3 .component-canvas::after {
  width: 66%;
}
.steps-progress-bar.step4 .component-canvas::after, .steps-progress-bar.step5 .component-canvas::after {
  width: 99%;
}
@media screen and (max-width: 700px) {
  .steps-progress-bar {
    margin-inline: 1ch;
  }
  .steps-progress-bar .component-canvas .step-point label {
    display: none;
  }
  .steps-progress-bar .component-canvas .step-point.current label.show {
    display: block;
  }
  .steps-progress-bar .component-canvas .step-point label.left {
    left: 0;
    translate: 0% 0%;
    text-align: left;
  }
  .steps-progress-bar .component-canvas .step-point label.right {
    left: auto;
    right: 0;
    translate: 0% 0%;
    text-align: right;
  }
}

.selector-input {
  --InputIconSize: 2rem;
  --BorderRadius: 1rem;
  position: relative;
  background-color: var(system-primary-acc-clear-bg);
  border-radius: var(--BorderRadius);
  overflow: hidden;
}
.selector-input input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.selector-input label {
  cursor: pointer;
  background-color: var(--system-primary-acc-bg-clear-color);
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  border: 2px solid transparent;
}
.selector-input label .selector-content {
  display: flex;
  align-items: center;
}
.selector-input label .input-icon {
  position: relative;
  width: var(--InputIconSize);
  height: var(--InputIconSize);
  border: 1px solid var(--system-primary-border-color);
  background-color: #fff;
}
.selector-input label .input-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  background-color: var(--system-primary-acc-bg-clear-color);
}
.selector-input label .icon {
  width: 3.5rem;
  height: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-inline: 0.8rem;
}
.selector-input label .label-component {
  font-size: 0.9rem;
  color: var(--system-primary-text-color);
}
.selector-input.radio label .input-icon {
  border-radius: 50%;
}
.selector-input.radio label .input-icon::before {
  border-radius: 50%;
}
.selector-input input[type=radio]:checked + label {
  --LocalColor: var(--system-primary-accent-color);
  background-color: var(--LocalColor);
}
.selector-input input[type=radio]:checked + label .label-component {
  color: #fff;
}
.selector-input input[type=radio]:checked + label .input-icon {
  border: 1px solid var(--LocalColor);
}
.selector-input input[type=radio]:checked + label .input-icon::before {
  background-color: var(--LocalColor);
}
.selector-input input[type=radio]:checked + label .icon {
  filter: brightness(10);
}
.selector-input input:focus + label {
  border: 2px solid var(--primary-accent);
  border-radius: var(--BorderRadius);
}

.success-icon {
  --Size: 4rem;
  --BorderColor: #fff;
  --BgColor: var(--system-secondary-color);
  display: flex;
  position: relative;
  border-radius: 50%;
  width: var(--Size);
  height: var(--Size);
  background-color: var(--BgColor);
}
.success-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 50%;
  height: 28%;
  border: 5px solid var(--BorderColor);
  transform: translate(-50%, -65%) rotate(-45deg);
  border-color: transparent transparent var(--BorderColor) var(--BorderColor);
}

.link-button-one {
  --Color: var(--system-secondary-color);
  display: inline-flex;
  padding: 0.7rem 1.7rem;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1rem;
  background-color: var();
  border: 1px solid var(--Color);
  color: var(--Color);
}
.link-button-one:hover {
  background-color: var(--Color);
  color: #fff;
}
.link-button-one:active {
  opacity: 0.85;
}

.back-button-one {
  --backButtonSize: .7rem;
  --arrowColor: var(--system-primary-accent-color);
  --bgColor: #fff;
  position: relative;
  border: 1px solid;
  border-radius: 0.3rem;
  display: inline-flex;
  padding: 0.7rem 1.5rem;
  align-items: center;
  text-decoration: none;
  background-color: var(--bgColor);
  color: var(--arrowColor) !important;
}
.back-button-one::before {
  content: "";
  width: var(--backButtonSize);
  height: var(--backButtonSize);
  border: 2px solid;
  transform: rotate(-45deg);
  border-color: var(--arrowColor) transparent transparent var(--arrowColor);
  margin-right: 0.1rem;
}
.back-button-one:hover {
  --bgColor: var(--system-primary-accent-color);
  --arrowColor: #fff;
  text-decoration: underline;
  opacity: 0.8;
}
.back-button-one:active {
  opacity: 0.4;
}

.new-button-one {
  --iconSize: 1.4rem;
  --color: var(--system-secondary-color);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 0.5rem;
}
.new-button-one .icon {
  position: relative;
  width: var(--iconSize);
  height: var(--iconSize);
  border: 1px solid var(--color);
  margin-right: 0.5rem;
  border-radius: 50%;
}
.new-button-one .icon::before, .new-button-one .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 62%;
  height: 2px;
  background-color: var(--color);
}
.new-button-one .icon::after {
  rotate: 90deg;
}
.new-button-one label {
  color: var(--color);
  cursor: pointer;
}
.new-button-one:hover {
  opacity: 0.8;
}
.new-button-one:active {
  opacity: 0.4;
}
.new-button-one:focus {
  box-shadow: 0px 0px 0px 2px var(--system-secondary-color);
  border-radius: 2rem;
}

.hpa-patient-block .top-panel, .hpa-patient-block .bottom-panel {
  height: 3.5rem;
}
.hpa-patient-block .top-panel {
  display: flex;
  flex-direction: column;
  height: auto;
}
.hpa-patient-block .top-panel > div {
  width: 100%;
}
.hpa-patient-block .top-panel .patient_name, .hpa-patient-block .top-panel .patient_dob {
  border-bottom: 1px solid black;
}
@media screen and (min-width: 900px) {
  .hpa-patient-block .top-panel {
    flex-direction: row;
  }
  .hpa-patient-block .top-panel .patient_dob, .hpa-patient-block .top-panel .patient_ssn, .hpa-patient-block .top-panel .patient_name {
    border: 0;
  }
  .hpa-patient-block .top-panel .patient_dob {
    max-width: 20rem;
    border-left: 1px solid black;
  }
  .hpa-patient-block .top-panel .patient_ssn {
    max-width: 15rem;
    border-left: 1px solid black;
  }
}
.hpa-questions-block .full-question {
  height: 3.5rem;
}
.hpa-questions-block .full-question.auto-height {
  height: auto;
}
.hpa-questions-block .full-question.complete-height {
  height: auto !important;
}
@media screen and (max-width: 800px) {
  .hpa-questions-block .full-question {
    width: 100% !important;
    height: 5.5rem;
  }
  .hpa-questions-block .full-question.complete-height {
    height: 5.5rem !important;
  }
  .hpa-questions-block .full-question .ovs-floating-elemnt label {
    right: 0.7rem;
  }
  .hpa-questions-block .full-question .ovs-floating-elemnt input {
    padding-top: 2rem;
    vertical-align: bottom;
  }
}
.hpa-questions-block .nine_a_list {
  padding-inline: 3rem;
}
@media screen and (max-width: 800px) {
  .hpa-questions-block .nine_a_list {
    padding-inline: 0.5rem;
  }
  .hpa-questions-block .nine_a_list li {
    margin-bottom: 0.8rem;
  }
}
@media screen and (max-width: 800px) {
  .hpa-questions-block .initial-issues-list {
    margin-top: 0.7rem;
    margin-bottom: 1.4rem;
    justify-content: stretch;
  }
  .hpa-questions-block .initial-issues-list > div {
    padding: 0 !important;
  }
}
@media screen and (max-width: 800px) {
  .hpa-questions-block .binary-question {
    flex-wrap: wrap;
  }
  .hpa-questions-block .binary-question .auto-height {
    height: auto !important;
  }
  .hpa-questions-block .binary-question .full-question:first-child {
    border-right: 0;
    border-bottom: 1px solid black;
  }
}

.patient-appointment-form .total-amount-section {
  display: none;
}
.patient-appointment-form .total-amount-section.actived {
  display: block;
}