/* colors */
:root {
  --color-primary-quick: #888cf7;
  --color-primary-quick-50: #888cf780;
  --color-primary-quick-25: #888cf740;
  --color-primary-crisp: #c2e812;
  --color-primary-bold: #323333;
  --color-primary-clean: #ffffff;
  --color-dark-grey: #6c7081;
  --color-dark-grey-50: #6c708180;
  --color-dark-grey-25: #6c708140;
  --color-medium-grey: #edeff3;
  --color-light-grey: #f6f8fa;
  --color-orange: #ffb251;
  --color-medium-orange: #ff9f25;
  --color-dark-orange: #e47f00;
  --color-orange-75: #ffb251bf;
  --color-red: #ff7272;
  --color-medium-red: #ed6a5e;
  --color-dark-red: #d5594e;
  --color-red-25: #ff727240;
  --color-medium-quick: #6d73ff;
  --color-dark-quick: #5b61f4;
  --color-dark-crisp: #94c607;
  --color-dark-crisp-25: #b2d43040;
  --color-green: #5dce5a;
  --color-green-80: #5dce5acc;
  --currentColor: currentColor;
  --filter-primary-quick: invert(51%) sepia(70%) saturate(1017%)
    hue-rotate(208deg) brightness(100%) contrast(94%);
  --filter-medium-quick: invert(48%) sepia(82%) saturate(3438%)
    hue-rotate(219deg) brightness(101%) contrast(100%);
  --filter-dark-quick: invert(56%) sepia(76%) saturate(6930%) hue-rotate(228deg)
    brightness(101%) contrast(91%);
  --filter-primary-bold: invert(17%) sepia(9%) saturate(85%) hue-rotate(131deg)
    brightness(92%) contrast(89%);
  --filter-primary-clean: invert(100%) sepia(57%) saturate(114%)
    hue-rotate(310deg) brightness(118%) contrast(101%);
  --filter-dark-grey: invert(44%) sepia(11%) saturate(516%) hue-rotate(191deg)
    brightness(96%) contrast(89%);
  --navbar-height: 80px;
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  min-width: 24px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

html {
  font-family: Poppins, sans-serif;
  background-color: #ffffff;
}

/* typography */
.heading-1 {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 140%;
}

.heading-2 {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 140%;
}

.heading-3 {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
}

.heading-4 {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
}

.captions {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
  text-transform: uppercase;
}

.body-1-semibold {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 140%;
}

.body-2-regular {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
}

.body-2-medium {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
}

.body-2-semibold {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
}

.body-3-regular {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
}

.body-3-medium {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
}

.body-3-semibold {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
}

.body-4-regular {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
}

.body-4-medium {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
}

.body-4-bold {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 140%;
}

/* elevations */
.elevation-01 {
  box-shadow: 0px 0.5px 2px rgba(50, 51, 51, 0.16);
}

.elevation-02 {
  box-shadow: 0px 2px 4px rgba(50, 51, 51, 0.16);
}

.elevation-025 {
  box-shadow: 0px 2px 4px #6c708129;
}

.elevation-03 {
  box-shadow: 0px 4px 8px rgba(50, 51, 51, 0.16);
}

.elevation-04 {
  box-shadow: 0px 8px 16px rgba(50, 51, 51, 0.16);
}

.elevation-05 {
  box-shadow: 0px 16px 24px rgba(50, 51, 51, 0.16);
}

.elevation-06 {
  box-shadow: 0px 20px 32px rgba(50, 51, 51, 0.16);
}

.-elevation-05 {
  box-shadow: 0px -16px 24px 0px #32333329;
}

.focus-within-elevation-05 {
  transition: box-shadow 150ms ease-out;
}

.focus-within-elevation-05:focus-within {
  box-shadow: 0px 16px 24px rgba(50, 51, 51, 0.16);
}

/* modals */
.delete-modal .mnonedc-dialog__content {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary-bold);
  line-height: 140%;
  text-align: left;
}

/* buttons */
.primary-button {
  border: none;
  border-radius: 0.5rem;
  background-color: var(--color-primary-quick);
  color: var(--color-primary-clean);
}

.primary-button:hover {
  background-color: var(--color-medium-quick);
  cursor: pointer;
}

.primary-button:active {
  background-color: var(--color-dark-quick);
}

.primary-button:disabled {
  border: none;
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
}

.secondary-button {
  border: 1px solid;
  border-radius: 0.5rem;
  background-color: transparent;
  border-color: var(--color-primary-quick);
  color: var(--color-primary-quick);
  filter: var(--filter-primary-quick);
}

.secondary-button:hover {
  border-color: var(--color-medium-quick);
  background-color: var(--color-primary-quick-25);
  color: var(--color-medium-quick);
  filter: var(--filter-medium-quick);
  cursor: pointer;
}

.secondary-button:active {
  border-color: var(--color-dark-quick);
  background-color: var(--color-primary-quick-50);
  color: var(--color-dark-quick);
  filter: var(--filter-dark-quick);
}

.secondary-button:disabled {
  border-color: var(--color-medium-grey);
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
  filter: none;
}

.secondary-button .material-icons {
  color: var(--color-primary-quick);
}

.secondary-button:hover .material-icons {
  color: var(--color-medium-quick);
}

.secondary-button:active .material-icons {
  color: var(--color-dark-quick);
}

.secondary-button:disabled .material-icons {
  color: var(--color-dark-grey);
}

.tertiary-button {
  border: 1px solid;
  border-radius: 0.5rem;
  background-color: transparent;
  border-color: var(--color-medium-grey);
  color: var(--color-primary-bold);
}

.tertiary-button:hover {
  border-color: var(--color-medium-quick);
  color: var(--color-medium-quick);
  cursor: pointer;
}

.tertiary-button:active {
  border-color: var(--color-dark-quick);
  background-color: var(--color-primary-quick-25);
  color: var(--color-dark-quick);
}

.tertiary-button:disabled {
  border-color: var(--color-medium-grey);
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
}

.transparent-button-bold {
  border: none;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color-primary-bold);
}

.transparent-button-bold:hover {
  color: var(--color-medium-quick);
  cursor: pointer;
}

.transparent-button-bold:active {
  color: var(--color-dark-quick);
}

.transparent-button-bold:disabled {
  color: var(--color-dark-grey);
}

.transparent-button-primary {
  border: none;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color-primary-quick);
}

.transparent-button-primary:hover {
  color: var(--color-medium-quick);
  cursor: pointer;
}

.transparent-button-primary:active {
  color: var(--color-dark-quick);
}

.transparent-button-primary:disabled {
  color: var(--color-dark-grey);
}

.dropdown-button-bold {
  border: none;
  background-color: transparent;
  color: var(--color-primary-bold);
}

.dropdown-button-bold:hover {
  font-weight: 500;
  background-color: var(--color-light-grey);
  cursor: pointer;
}

.dropdown-button-bold:active {
  background-color: var(--color-medium-grey);
}

.message-button-direct {
  border: none;
  border-radius: 0.5rem;
  background-color: var(--color-primary-quick);
  color: var(--color-primary-clean);
}

.message-button-direct:hover:not(:disabled) {
  background-color: var(--color-medium-quick);
  cursor: pointer;
}

.message-button-direct:active {
  background-color: var(--color-dark-quick);
}

.message-button-direct:disabled {
  border: none;
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
}

.message-button-internal {
  border: none;
  border-radius: 0.5rem;
  background-color: var(--color-orange);
  color: var(--color-primary-clean);
}

.message-button-internal:hover:not(:disabled) {
  background-color: var(--color-medium-orange);
  cursor: pointer;
}

.message-button-internal:active {
  background-color: var(--color-dark-orange);
}

.message-button-internal:disabled {
  border: none;
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
}

.message-button-sms:hover:not(:disabled) {
  background-color: var(--color-green);
  cursor: pointer;
}

.message-button-sms:disabled {
  border: none;
  background: var(--color-medium-grey);
  color: var(--color-dark-grey);
}

.icon-transparent-button-bold {
  display: flex;
  align-items: center;
}

.icon-transparent-button-bold:hover {
  filter: var(--filter-primary-quick);
}

.icon-transparent-button-bold:active {
  filter: var(--filter-medium-quick);
}

.icon-transparent-button-primary {
  display: flex;
  align-items: center;
  filter: var(--filter-primary-quick);
}

.icon-transparent-button-primary:hover {
  filter: var(--filter-medium-quick);
}

.icon-transparent-button-primary:active {
  filter: var(--filter-dark-quick);
}

.icon-transparent-button-dark-grey {
  display: flex;
  background: none;
  border: none;
  align-items: center;
  filter: var(--filter-dark-grey);
}

.icon-transparent-button-dark-grey:hover {
  cursor: pointer;
  filter: var(--filter-primary-quick);
}

.icon-transparent-button-dark-grey:active {
  filter: var(--filter-medium-quick);
}

/* inputs */
.default-input {
  padding: 0.5rem;
  background-color: var(--color-light-grey);
  color: var(--color-dark-grey);
  border-radius: 0.5rem;
  border: 1px solid transparent;
}

.default-input:focus {
  border: solid 1px var(--color-primary-quick);
  caret-color: var(--color-primary-quick);
  background-color: var(--color-primary-clean);
}

.default-input:disabled {
  border: none;
  color: var(--color-dark-grey);
  background-color: var(--color-medium-grey);
  border: 1px solid transparent;
}

.form-field-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-field-item {
  margin: 2vh;
}

.invisible {
  visibility: hidden;
}

.none {
  display: none !important;
}

.center {
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}

.navbar {
  width: 100%;
  font-size: 1.2rem;
  height: var(--navbar-height);
  background-color: var(--color-primary-clean);
  display: flex;
  align-items: center;
  position: relative;
}

.navbar-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-button-icon {
  display: flex;
}

.navbar-notification-icon {
  display: flex;
  margin-right: 2rem;
}

.navbar .mdc-button:not(:disabled) {
  color: #323333;
}

.navbar-search-bar-placeholder {
  display: flex;
  align-items: center;
  flex-grow: 1;
  position: relative;
  margin: 0rem 8rem;
}

.navbar .mdc-line-ripple {
  display: none;
}

.navbar-icon-button {
  margin-right: 1rem;
}

.navbar-practice-profile-button {
  display: flex;
  align-items: center;
}

.navbar-practice-profile-name-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-right: 40px;
  margin-left: 10px;
}

.navbar-practice-profile-name-first {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-primary-bold);
  margin-bottom: -5px;
}

.navbar-practice-profile-name-last {
  color: var(--color-dark-grey);
}

.navbar-practice-stats-container {
  display: flex;
  justify-content: space-between;
  margin-left: 40px;
  gap: 1.5rem;
}

.navbar-practice-stats-inner {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.navbar-practice-stats-icon {
  display: flex;
  align-items: center;
}

.navbar-practice-stats-text {
  color: var(--color-dark-grey);
}

a {
  all: unset;
  cursor: pointer;
  /* TODO decide on link styling */
}

.fade-in {
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-in-fast {
  animation: fadeInAnimation ease 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-out-fast {
  animation: fadeOutAnimation ease 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.unauthorized {
  border-radius: 2px;
  background-color: #e57373;
}

.hidden {
  display: none;
}

.diminished-button {
  font-size: 0.8rem;
  color: grey !important;
}

.pane-resize-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pane-resize-button-vertical {
  background: #323333;
  height: 30%;
  border: none;
  opacity: 0.15;
  border-radius: 3px;
  padding: 0px;
  width: 3px;
}

.pane-resize-button-vertical:hover {
  background: #888cf7;
  opacity: 1;
  cursor: col-resize;
}

.pane-resize-button-vertical::after {
  content: "";
  display: block;
  position: relative;
  left: 50%;
  margin-left: -150%;
  width: 300%;
  height: 100%;
}

.pane-resize-button-horizontal {
  background: #323333;
  height: 3px;
  border: none;
  opacity: 0.15;
  border-radius: 3px;
  padding: 0px;
  align-self: center;
  width: 30%;
}

.pane-resize-button-horizontal::after {
  content: "";
  display: block;
  position: relative;
  top: 50%;
  margin-top: -3%;
  width: 100%;
  height: 300%;
}

.pane-resize-button-horizontal:hover {
  background: #888cf7;
  opacity: 1;
  cursor: row-resize;
}

.main-dashboard-container {
  display: flex;
  height: calc(100% - var(--navbar-height));
  width: 100%;
  background-color: #f6f6f9;
}

.navigation-side-bar {
  padding: 2rem 0.5rem;
  background-color: var(--color-primary-clean);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.navigation-side-bar-button-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
}

.mt-auto {
  margin-top: auto;
}

.navigation-side-bar-tab-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.navigation-side-bar-tab-icon {
  font-size: 24px;
}

.navigation-side-bar-tab-icon-selected {
  filter: var(--filter-primary-quick);
}

.navigation-side-bar-tab-icon-unselected {
  filter: var(--filter-primary-bold);
}

.navigation-side-bar-tab {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  background-color: transparent;
  border: none;
  width: 100%;
}

.navigation-side-bar-tab:hover {
  cursor: pointer;
  color: var(--color-medium-quick);
}

.navigation-side-bar-tab:active {
  color: var(--color-dark-quick);
}

.navigation-side-bar-tab-selected {
  color: var(--color-primary-quick);
}

.navigation-side-bar-tab-unselected {
  color: var(--color-dark-grey);
}

.navigation-side-bar-tab:hover .material-icons {
  cursor: pointer;
  color: var(--color-medium-quick);
}

.navigation-side-bar-tab:active .material-icons {
  color: var(--color-dark-quick);
}

.navigation-side-bar-tab-selected .material-icons {
  color: var(--color-primary-quick);
}

.navigation-side-bar-tab-unselected .material-icons {
  color: var(--color-dark-grey);
}

.navigation-side-bar-close-button {
  color: var(--color-dark-grey);
  background-color: transparent;
  border: none;
}

.navigation-side-bar-close-button .material-icons {
  color: var(--color-dark-grey);
  background-color: transparent;
  border: none;
}

.navigation-side-bar-close-button:hover .material-icons {
  cursor: pointer;
}

.collapsed-pane {
  margin: 0.25rem 0.25rem;
}

.left-dashboard-pane {
  /* border: 3px solid rgb(0, 247, 255); */
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  margin: 1rem 0.5rem 1rem 1rem;
  width: 25%;
  position: relative;
  flex-shrink: 0;
}

.left-calendar-dashboard-pane:before {
  content: "";
  position: absolute;
  top: 20px;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-patients-dashboard-pane:before {
  content: "";
  position: absolute;
  top: 106px;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-inbox-dashboard-pane:before {
  content: "";
  position: absolute;
  top: 196px;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-drafts-dashboard-pane:before {
  content: "";
  position: absolute;
  top: 286px;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-todos-dashboard-pane:before {
  content: "";
  position: absolute;
  top: 376px;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-settings-dashboard-pane:before {
  content: "";
  position: absolute;
  bottom: 46px;
  left: -24px;
  /* z-index: 1; */
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.left-settings-dashboard-pane {
  padding: 1rem;
}

.settings-left-pane-section-heading-container {
  display: flex;
  justify-content: space-between;
  padding: 0rem 0.5rem;
  border-bottom: 2px solid var(--color-medium-grey);
  color: var(--color-primary-bold);
}

.settings-left-pane-section-content-list {
  margin: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.settings-right-dashboard-pane-container {
  min-width: 0;
  /* border: 3px solid blue; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 65%;
}

.settings-right-dashboard-pane {
  /* border: 3px solid orange; */
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  margin: 1rem 0.5rem 1rem 0.5rem;
  padding: 0.5rem;
  height: 5%;
  flex-grow: 1;
}

.settings-right-dashboard-pane-coming-soon-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-right-dashboard-pane-coming-soon-inner {
  width: 50%;
}

.account-details-container {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.account-details-page-title {
  margin: 2rem 2rem 0rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary-bold);
}

.account-details-edit-button {
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.account-details-edit-button-icon {
  width: 1.25rem;
  display: flex;
  align-items: center;
}

.account-details-page-content {
  margin-top: 2.25rem;
  margin-left: 2rem;
  display: flex;
}

.account-details-profile-picture-editor-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.account-details-update-profile-picture-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}

.account-details-update-profile-picture-button-icon {
  display: flex;
  align-items: center;
}

.account-details-remove-profile-picture-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
}

.account-details-remove-profile-picture-button-icon {
  display: flex;
  align-items: center;
}

.account-details-settings-container {
  margin-left: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 15.5rem;
  gap: 1rem;
  margin-top: 0.25rem;
}

.account-details-setting-section-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.account-details-setting-title {
  color: var(--color-dark-grey);
}

.account-details-setting-content {
  color: var(--color-primary-bold);
}

.account-details-setting-confirmation-container {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.account-details-confirmation-button {
  padding: 0.375rem 1rem;
}

.calendar-and-bookings-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.calendar-and-bookings-page-title {
  margin: 2rem 2rem 0rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary-bold);
}

.calendar-and-bookings-page-content {
  margin-top: 2.25rem;
  margin-left: 2rem;
  margin-right: 2rem;
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}

.calendar-and-bookings-tab-selector {
  display: flex;
  gap: 0.5rem;
}

.calendar-and-bookings-single-tab {
  padding: 0px;
  border-radius: 4px 4px 0px 0px;
  background-color: var(--color-medium-grey);
  border: 1px solid var(--color-medium-grey);
  border-bottom: none;
}

.calendar-and-bookings-single-tab-selected {
  background-color: var(--color-primary-clean);
}

.calendar-and-bookings-single-tab-text {
  margin: 5px 16px;
}

.calendar-and-bookings-single-tab-selected::after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 30%;
  top: -19%;
  background-color: var(--color-primary-clean);
}

.calendar-and-bookings-tab-content-container {
  background-color: var(--color-primary-clean);
  border: 1px solid var(--color-medium-grey);
  flex: 1;
  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.calendar-and-bookings-add-appointment-button-container {
  display: flex;
  justify-content: flex-end;
}

.calendar-and-bookings-add-appointment-button {
  padding: 0.375rem 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  margin-right: 1rem;
  color: var(--color-primary-bold);
}

.calendar-and-bookings-add-appointment-icon {
  display: flex;
  align-items: center;
  width: 1.3rem;
}

.calendar-and-bookings-empty-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.calendar-and-bookings-empty-inner {
  color: var(--color-primary-bold);
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-and-bookings-add-appointment-image {
  width: 60%;
}

.calendar-and-bookings-empty-add-appointment-button {
  margin-top: 0.5rem;
}

.calendar-and-bookings-availability-provider-section {
  border: 1px solid var(--color-medium-grey);
  border-radius: 0.5rem;
}

.calendar-and-bookings-availability-day-title {
  color: var(--color-dark-grey);
}

.calendar-and-bookings-availability-time-frame {
  color: var(--color-primary-bold);
}

.calendar-and-bookings-availability-dropdown-icon {
}

.calendar-and-bookings-availability-delete-button {
}

.calendar-and-bookings-availability-add-button {
}

.calendar-and-bookings-availability-add-icon {
}

.calendar-and-bookings-reminders-callout {
  color: var(--color-primary-bold);
  padding: 1rem 1.2rem;
  background-color: var(--color-light-grey);
  border-radius: 1rem;
  margin: 5% 10%;
}

.calendar-and-bookings-reminders-callout-button {
  text-decoration: underline;
  padding-left: 0.2rem;
  padding-top: 0;
}

.calendar-and-bookings-reminder-section {
  color: var(--color-primary-bold);
  display: flex;
  margin: 0% 10%;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-medium-grey);
  align-items: center;
  position: relative;
}

.calendar-and-bookings-reminder-section-title {
  margin: 0.75rem 1.0625rem;
}

.calendar-and-bookings-reminder-dropdown {
  display: flex;
  align-items: center;
  margin: 0.5rem 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--color-medium-grey);
  width: 14.5rem;
  justify-content: space-between;
}

.calendar-and-bookings-reminder-dropdown-highlighted {
  border: 2px solid var(--color-primary-quick);
}

.calendar-and-bookings-reminder-dropdown-icon {
  display: flex;
  align-items: center;
  width: 1.3rem;
  filter: var(--filter-dark-grey);
}

.calendar-and-bookings-reminder-dropdown-list {
  position: relative;
  background: var(--color-primary-clean);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  width: 14.5rem;
  z-index: 1;
  position: absolute;
  top: 50px;
  right: 13px;
}

.calendar-and-bookings-reminder-activity-dropdown-button {
  padding: 9.5px 1rem;
  width: 100%;
  text-align: left;
}

.right-dashboard-pane {
  min-width: 0;
  /* border: 3px solid blue; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 65%;
}

.right-top-dashboard-pane {
  /* border: 3px solid orange; */
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  margin: 1rem 0.5rem 0.5rem 0.5rem;
  padding: 0.5rem;
  height: 5%;
  flex-grow: 1;
}

.right-bottom-dashboard-pane {
  height: 30%;
  flex-grow: 1;
  /* border: 3px solid purple; */
  background-color: white;
  border-radius: 0.5rem;
  margin: 0.5rem 0.5rem 1rem 0.5rem;
}

.three-pane-layout {
  display: flex;
  width: 100%;
  position: relative;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px !important;
}

iframe {
  border: none;
}

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

  100% {
    opacity: 1;
  }
}

.avatar {
  border-radius: 50%;
  object-fit: cover;
  /* margin: 0.4rem 0.2rem; */
}

.avatar-extra-small {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-small {
  width: 2rem;
  height: 2rem;
}

.avatar-medium {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar-large {
  width: 5rem;
  height: 5rem;
}

.empty-chat-container {
  color: rgba(76, 77, 77, 0.7);
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  margin-left: 0.5rem;
  text-transform: uppercase;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.chat-right-stack {
  right: 0.5rem;
  display: flex;
  margin: 0.5rem;
  margin-left: auto;
}

.chat-icon-button {
  color: #7074f5;
  background-color: rgba(130, 134, 241, 0.1);
  border-radius: 0.75rem;
  margin: 0.4rem 0.2rem;
}

.chat-messages-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  overflow-y: auto;
  flex-grow: 1;
}

.chat-messages-inner-container {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
}

.incoming-chat-message-container {
  align-self: flex-start;
  font-family: "Poppins";
  font-style: normal;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.outgoing-chat-message-container {
  align-self: flex-end;
  font-family: "Poppins";
  font-style: normal;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.incoming-chat-bubble-avatar-container {
  display: flex;
  align-items: center;
}

.outgoing-chat-bubble-avatar-container {
  display: flex;
  align-items: center;
  justify-content: right;
}

.incoming-chat-message-bubble {
  align-self: flex-start;
  background-color: var(--color-light-grey);
  border-radius: 1rem 1rem 1rem 0rem;
  margin: 0.5rem;
  color: rgba(76, 77, 77, 0.7);
  font-weight: 500;
  line-height: 160%;
  max-width: 75%;
  position: relative;
}

.outgoing-chat-message-bubble {
  align-self: flex-end;
  background-color: var(--color-primary-quick);
  border-radius: 1rem 0rem 1rem 1rem;
  margin: 0.5rem;
  color: white;
  font-weight: 500;
  line-height: 160%;
  max-width: 75%;
  position: relative;
}

.internal-chat-message-bubble {
  align-self: flex-end;
  background-color: var(--color-orange-75);
  border-radius: 1rem 0rem 1rem 1rem;
  margin: 0.5rem 0.25rem 0.5rem 0.5rem;
  color: #424242;
  font-weight: 500;
  line-height: 160%;
  position: relative;
}

.sms-chat-message-bubble {
  align-self: flex-end;
  background-color: var(--color-green);
  color: var(--color-primary-clean);
  border-radius: 1rem 0rem 1rem 1rem;
  margin: 0.5rem 0.25rem 0.5rem 0.5rem;
  font-weight: 500;
  line-height: 160%;
  position: relative;
}

.incoming-chat-avatar-container {
  margin-left: 0.5rem;
}

.outgoing-chat-avatar-container {
  margin-right: 0.5rem;
}

.day-break-timestamp {
  font-weight: 400;
  color: #a3a3c1;
  letter-spacing: 0.1rem;
  font-family: "Poppins";
  font-style: normal;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.incoming-chat-message-timestamp {
  font-weight: 400;
  align-self: flex-start;
  margin: 0rem 0rem 0rem 1rem;
  color: #6c7081;
  font-size: 12px;
  line-height: 1rem;
}

.outgoing-chat-message-timestamp {
  font-weight: 400;
  align-self: flex-end;
  margin: 0rem 1rem 0rem 0rem;
  color: #6c7081;
  font-size: 12px;
  line-height: 1rem;
}

.chat-message-content {
  align-self: flex-start;
  margin: 0.5rem;
  white-space: pre-line;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1rem;
}

.message-type-selector-tabs {
  align-self: flex-start;
  gap: 0.3rem;
  display: flex;
  width: 100%;
  position: relative;
  bottom: -2px;
}

.direct-message-tab-selected {
  background: var(--color-primary-clean);
  color: var(--color-primary-bold);
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 0.5rem 1rem;
  border-top: 2px solid var(--color-primary-quick);
  border-right: 2px solid var(--color-primary-quick);
  border-left: 2px solid var(--color-primary-quick);
  border-bottom: 2px solid var(--color-primary-clean);
  border-bottom: none;
  z-index: 2;
}

.direct-message-tab-unselected {
  background: var(--color-primary-quick);
  color: var(--color-primary-clean);
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  border: 2px solid transparent;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  border: none;
}

.sms-message-tab-selected {
  background: var(--color-primary-clean);
  color: var(--color-primary-bold);
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 0.5rem 1rem;
  border-top: 2px solid var(--color-green-80);
  border-right: 2px solid var(--color-green-80);
  border-left: 2px solid var(--color-green-80);
  border-bottom: 2px solid var(--color-green-80);
  border-bottom: none;
  z-index: 2;
}

.sms-message-tab-unselected {
  background: var(--color-green-80);
  color: var(--color-primary-bold);
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  border: 2px solid transparent;
  padding: 0.5rem 1rem;
  border: none;
}

.direct-message-tab-unselected:hover {
  background: var(--color-medium-quick);
  cursor: pointer;
}

.internal-message-tab-selected {
  background: var(--color-primary-clean);
  color: var(--color-primary-bold);
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 0.5rem 1rem;
  border-top: 2px solid var(--color-orange);
  border-right: 2px solid var(--color-orange);
  border-left: 2px solid var(--color-orange);
  border-bottom: none;
  z-index: 2;
}

.internal-message-tab-unselected {
  background: var(--color-orange-75);
  color: var(--color-primary-bold);
  border: 2px solid transparent;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 0.5rem 1rem;
  border: none;
}

.internal-message-tab-unselected:hover {
  background: var(--color-medium-orange);
  cursor: pointer;
}

.chat-input-container {
  display: flex;
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.chat-input-growing-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.chat-input {
  margin: 1.25rem 1.25rem 1.25rem 0;
  border: none;
  flex-grow: 1;
  align-items: center;
  resize: none;
  color: var(--color-dark-grey);
}

.chat-input-box {
  align-items: flex-end;
  display: flex;
  width: 100%;
  padding: 0rem 0.5rem;
  z-index: 1;
}

.chat-input-box-direct {
  border: 2px solid var(--color-primary-quick);
  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
}

.chat-input-box-internal {
  border: 2px solid var(--color-orange);
  border-radius: 0.5rem;
}

.chat-input-box-sms {
  border: 2px solid var(--color-green-80);
  border-radius: 0.5rem;
}

.chat-input-message-scheduler {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  background: white;
  z-index: 1;
  position: absolute;
  right: 0%;
  bottom: 50%;
  border-radius: 8px;
  padding: 1rem;
}

.chat-input-message-scheduler:before {
  content: "";
  position: absolute;
  top: 100%;
  right: 5%;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: white;
}

.chat-input-message-scheduler .mdc-deprecated-list {
  padding: 0rem;
  max-height: 100px;
}

.chat-input-message-scheduler .mdc-deprecated-list-item {
  font-family: "Poppins";
  font-size: 12px;
  color: #888cf7;
  text-transform: lowercase;
  height: 2.25rem;
}

.chat-input-message-scheduler-title {
  color: var(--color-primary-bold);
  margin-bottom: 0.1rem;
  align-self: start;
}

.chat-input-message-scheduler-body {
  color: var(--color-dark-grey);
  margin-bottom: 0.9rem;
  align-self: start;
}

.chat-input-message-scheduler-time-select-line {
  display: flex;
  height: 2rem;
}

.chat-input-message-scheduler-time-button-line {
  align-self: end;
  display: flex;
  gap: 1rem;
}

.chat-input-scheduler-date {
  height: 2rem;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  text-align: center;
  font-size: 12px;
  color: #888cf7;
  text-transform: capitalize;
  border: none;
  border-bottom: solid 1px rgba(112, 116, 245, 0.5);
}

.chat-input-scheduler-hour {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-bottom: solid 1px rgba(112, 116, 245, 0.5);
  height: 100%;
  align-items: center;
  display: flex;
}

.chat-input-scheduler-min {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-bottom: solid 1px rgba(112, 116, 245, 0.5);
  height: 100%;
  align-items: center;
  display: flex;
}

.chat-input-scheduler-am-pm {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-bottom: solid 1px rgba(112, 116, 245, 0.5);
  height: 100%;
  align-items: center;
  display: flex;
}

.chat-scheduling-button .mdc-button__label {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-size: 12px;
  color: #888cf7;
  text-transform: lowercase;
}

.elm-datepicker--picker {
  position: relative;
  bottom: 20rem;
  background: white;
}

.chat-message-type-button .material-icons {
  color: #888cf7;
  order: 1;
  margin-right: 0;
}

.chat-message-type-button .mdc-button__label {
  margin-right: 0.5rem;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-size: 12px;
  color: #888cf7;
  text-transform: capitalize;
}

.chat-send-button-icon {
  display: flex;
  width: 1.25rem;
}

.chat-send-button-icon-disabled {
  display: flex;
  width: 1.25rem;
}

.chat-send-button-icon img {
  filter: var(--filter-primary-clean);
}

.chat-send-button-icon-disabled img {
  filter: var(--filter-dark-grey);
}

.chat-schedule-message-button {
  padding: 0px;
}

.chat-send-button {
  color: white;
  border-radius: 0.5rem 0rem 0rem 0.5rem;
  height: 2rem;
  width: 2.5rem;
  margin-bottom: 1rem;
  align-items: center;
  display: flex;
  border: none;
  justify-content: center;
}

.chat-send-button-direct {
  background-color: var(--color-primary-quick);
}

.chat-send-button-internal {
  background-color: var(--color-orange);
}

.chat-send-button-sms {
  background-color: var(--color-green-80);
}

.chat-send-button .mdc-icon-button__icon {
  font-size: 1rem;
}

.chat-schedule-message-button {
  color: white;
  border-radius: 0rem 0.5rem 0.5rem 0rem;
  border-left: 1px solid white;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.chat-schedule-message-button:disabled {
  border-left: 1px solid white;
}

.chat-schedule-message-button-direct {
  background-color: var(--color-primary-quick);
}

.chat-schedule-message-button-internal {
  background-color: var(--color-orange);
}

.message-button-sms {
  background-color: var(--color-green-80);
}

.chat-schedule-message-button .mdc-icon-button__icon {
  font-size: 1.2rem;
}

input:focus,
textarea {
  outline: none !important;
}

.chat-input-message-scheduler-confirm-button.mdc-button:not(:disabled) {
  font-family: "Poppins";
  background-color: #888cf7;
}

.chat-input-message-scheduler-confirm-button {
  font-family: Poppins, sans-serif;
}

.chat-input-message-scheduler-cancel-button {
  font-family: Poppins, sans-serif;
}

.chat-input-message-scheduler-confirm-button .mdc-button__label {
  color: white;
  text-transform: capitalize;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 115%;
  display: flex;
  align-items: center;
  font-feature-settings: "liga" off, "calt" off;
}

.chat-input-message-scheduler-cancel-button.mdc-button:not(:disabled) {
  font-family: Poppins, sans-serif;
  border: 1px solid #888cf7;
  background-color: white;
}

.chat-input-message-scheduler-cancel-button .mdc-button__label {
  font-family: Poppins, sans-serif;
  color: #888cf7;
  text-transform: capitalize;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 115%;
  display: flex;
  align-items: center;
  font-feature-settings: "liga" off, "calt" off;
}

.right-pane-tab .mdc-tab__text-label {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

.right-pane-tab {
  margin: 0.5rem;
  border-radius: 1rem;
}

.right-pane-tab span {
  text-transform: lowercase;
  text-transform: capitalize;
}

.right-pane-tab .mdc-tab__icon {
  height: 20px;
  font-size: 20px;
}

.right-pane-tab .mdc-tab__content {
  margin: 0rem -0.3rem 0rem -0.3rem;
}

.right-pane-tab .mdc-tab-indicator {
  display: none;
}

.right-pane-tab-highlighted {
  background-color: #888cf7;
}

.right-pane-tab-highlighted .mdc-tab__text-label {
  color: white;
}

.right-pane-tab-highlighted .material-icons {
  color: white;
  order: 1;
}

.right-pane-tab-unhighlighted {
  background-color: transparent;
}

.right-pane-tab-unhighlighted .mdc-tab__text-label {
  color: #323333b3;
}

.right-pane-tab-unhighlighted .material-icons {
  color: #323333b3;
  height: 20px;
  font-size: 20px;
  order: 1;
}

.pane-shadow {
  box-shadow: 0rem 0.3rem 3rem -1rem rgb(0 0 0 / 25%);
}

.patient-selection-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.patient-selection-tab-container {
  flex-grow: 1;
  overflow-y: auto;
}

.patient-selection-tab-list-container {
  margin: 0rem 0.5rem;
}

.patient-selection-tab {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  overflow: hidden;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
}

.patient-selection-tab-unselected {
  background: transparent;
}

.patient-selection-tab-unselected:hover {
  cursor: pointer;
  background: var(--color-light-grey);
}

.patient-selection-tab-selected {
  background: var(--color-primary-quick);
}

.patient-selection-tab-selected {
  cursor: pointer;
}

.patient-selection-tab-info-container {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-right: 1rem;
}

.patient-selection-tab-name {
  text-transform: capitalize;
  text-align: left;
}

.patient-selection-tab-name-selected {
  color: var(--color-primary-clean);
}

.patient-selection-tab-name-unselected {
  color: var(--color-primary-bold);
}

.patient-selection-tab-email {
  text-transform: lowercase;
}

.patient-selection-tab-email-selected {
  color: var(--color-primary-clean);
}

.patient-selection-tab-email-unselected {
  color: var(--color-dark-grey);
}

.patient-selection-add-patient-button-container {
  position: relative;
  bottom: 0%;
  padding: 1rem;
}

.patient-selection-add-patient-button {
  width: 100%;
  padding: 0.5rem 0rem;
  align-items: center;
  gap: 0.25rem;
  display: flex;
  justify-content: center;
}

.patient-info-tab {
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  margin: 1rem 0.5rem 1rem 0.5rem;
  min-width: 0;
  overflow-y: auto;
  width: 20%;
  padding: 1rem 0rem;
  flex-shrink: 0;
}

.patient-info-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0rem 1rem;
}

.patient-info-tab-patient-name-avatar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.patient-info-tab-patient-name-text {
  color: var(--color-primary-bold);
}

.patient-info-tab-birthday-gender {
  margin: 0.5rem 1rem;
  text-align: left;
}

.patient-info-tab-contact-info-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 1rem 0rem 1rem;
}

.patient-info-tab-contact-info {
  text-align: left;
  color: var(--color-dark-grey);
}

.patient-info-tab-contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.patient-info-tab-contact-info-text {
  color: var(--color-primary-bold);
}

.patient-info-contact-info-icon {
  display: flex;
  height: 100%;
  align-self: center;
  filter: var(--filter-dark-grey);
}

.patient-info-tab-appointment-section {
  padding: 0.75rem 0rem;
  background: var(--color-medium-grey);
  margin: 0.5rem 0rem;
  text-align: center;
}

.patient-info-tab-upcoming-appointment {
  margin-bottom: 0.5rem;
  color: var(--color-dark-grey);
}

.patient-info-tab-last-visit {
  color: var(--color-dark-grey);
}

.patient-info-tab-profile-expand-all-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0rem 1rem;
}

.patient-info-tab-profile {
  color: var(--color-dark-grey);
}

.patient-info-tab-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0rem;
  margin: 0rem 1rem;
}

.patient-info-tab-expand-more-icon {
  display: flex;
  align-items: center;
  height: 1.2rem;
}

.patient-info-tab-section-title-button {
  display: flex;
  gap: 0.5rem;
  padding: 0rem;
}

.patient-info-tab-section-header-title {
  color: var(--color-primary-bold);
}

.patient-info-tab-edit-buttons-container {
  display: flex;
  justify-content: flex-end;
}

.patient-info-tab-button-start {
  border-right: #888cf7 solid 1px;
}

.patient-info-tab-button-end {
  border-radius: 0rem 0.5rem 0.5rem 0rem;
}

.patient-info-tab-button {
  color: #888cf7;
  height: 1rem;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  display: flex;
}

.patient-info-tab-button .mdc-icon-button__icon {
  font-size: 1rem;
}

.patient-info-tab-text-field {
  height: 1.5rem;
  margin: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0.3rem;
}

.patient-info-tab-text-field .mdc-text-field__input {
  font-size: 12px;
}

.patient-info-tab-name-section {
  display: flex;
  text-align: left;
}

.patient-info-section-border {
  border-bottom: 1px solid rgb(211, 211, 211);
  margin: 0.25rem 0rem;
}

.patient-info-section-header {
  display: flex;
  align-items: center;
}

.patient-info-section-header-title {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
}

.patient-info-section-header-dropdown {
  margin-left: auto;
}

.patient-info-dropdown .mdc-button__label {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 8px;
  text-transform: capitalize;
}

.patient-info-dropdown.mdc-menu-surface--anchor {
  background-color: rgba(112, 116, 245, 0.1);
  border-radius: 0.5rem;
  height: 1rem;
  align-items: center;
  display: flex;
}

.patient-info-dropdown .mdc-button {
  height: 1rem;
}

.patient-info-dropdown .material-icons {
  color: #888cf7;
  align-self: center;
  order: 1;
  font-size: 0.75rem;
  margin-right: 0rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}

.patient-info-tab-name {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  text-transform: capitalize;
}

.patient-info-plain-text {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  text-align: left;
}

.patient-info-tab-allergy-risk {
  display: flex;
}

.patient-info-tab-large-bubble {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
}

.patient-info-tab-small-bubble {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 8px;
}

.patient-info-tab-contact-section {
  display: flex;
  flex-direction: column;
}

.patient-info-tab-contact-content {
  flex: 1;
  text-align: left;
}

.patient-info-tab-med {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 0.25rem;
  font-size: 8px;
}

.patient-info-tab-2-column-layout {
  display: flex;
}

.patient-info-tab-2-column-layout-right-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.patient-info-tab-2-column-layout .mdc-deprecated-list {
  padding: 0rem;
}

.patient-info-tab-listitem {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-size: 8px;
  line-height: 12px;
  padding: 0rem;
}

.patient-info-tab-listitem.mdc-deprecated-list-item {
  height: 1rem;
  padding: 0;
  margin-left: 0.5rem;
}

.patient-info-tab-listitem .material-icons {
  font-size: 1rem;
}

.patient-info-tab-listitem .mdc-deprecated-list-item__graphic {
  width: 1rem;
  height: 1rem;
  margin-right: 0;
}

.patient-info-tab-list-text-field {
  height: 1.5rem;
  margin: 0.25rem 0.5rem;
  flex-grow: 1;
  background-color: #f6f6f9;
  border-radius: 0.25rem;
}

.patient-info-tab-list-text-field .mdc-text-field__input {
  font-size: 8px;
}

.patient-info-tab-list-text-field .mdc-line-ripple {
  display: none;
}

.patient-info-tab-add-patient-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.patient-info-tab-add-patient-form-field-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.patient-info-tab-add-patient-form-field-icon {
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translateY(-45%);
  color: var(--color-dark-grey);
  font-size: 12px;
}

.patient-info-tab-add-patient-form-field-icon-container {
  display: flex;
  position: relative;
}

.patient-info-tab-add-patient-form-field-with-icon {
  flex-grow: 1;
  padding-left: 1.4rem;
}

.patient-info-tab-add-patient-button-container {
  display: flex;
  padding: 0rem 2.5rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.patient-info-tab-delete-button {
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.patient-info-tab-delete-button-icon {
  width: 0.75rem;
  display: flex;
  align-items: center;
}

.patient-info-tab-add-patient-invite-button {
  padding: 6px 15.5px;
}

.patient-info-tab-add-patient-discard-button {
  padding: 6px 16px;
}

.far-right-pane-container {
  background-color: transparent;
  border-radius: 0.5rem;
  margin: 1rem 0.5rem 1rem 0.5rem;
  min-width: 0;
  overflow-y: auto;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.far-right-pane-tabs-container {
  display: flex;
  gap: 2px;
}

.far-right-pane-tab-button {
  border: none;
  flex-grow: 1;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}

.far-right-pane-tab-button:hover {
  cursor: pointer;
  color: var(--color-medium-quick);
}

.far-right-pane-tab-button:active {
  color: var(--color-dark-quick);
}

.far-right-pane-tab-button-selected {
  background: var(--color-primary-clean);
}

.far-right-pane-tab-button-unselected {
  background: var(--color-medium-grey);
}

.far-right-pane-tab-close-button {
  width: 1.2rem;
  display: flex;
  filter: var(--filter-dark-grey);
  position: absolute;
  right: 0.5rem;
}

.far-right-pane-tab-close-button:hover {
  cursor: pointer;
  filter: var(--filter-medium-quick);
}

.hint-editor {
  background-color: white;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  overflow: auto;
  height: 100%;
  position: relative;
  padding: 0.25rem;
}

.prescription-editor {
  background-color: white;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  overflow: auto;
  height: 100%;
  position: relative;
  padding: 0.25rem;
}

.add-address-editor {
  background-color: white;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.add-address-text {
  text-align: center;
  margin: 1rem 1rem;
}

.lab-editor {
  background-color: white;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  overflow: auto;
  height: 100%;
  position: relative;
  padding: 0.25rem;
}

.visit-notes-editor {
  background-color: white;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  padding: 1rem 0;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.visit-notes-editor-simple-soap {
  padding: 1rem 0rem 1rem 0rem;
}

.visit-notes-editor-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1rem;
}

.visit-notes-editor-header-container .body-1-semibold,
.visit-notes-editor-header-container-simple-soap .body-1-semibold {
  line-height: 1.75rem;
}

.visit-notes-editor-header-container-simple-soap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem 0rem 1rem;
}

.visit-notes-editor-header-text {
  color: var(--color-dark-grey);
  text-align: left;
  margin: 1rem 1rem 0 1rem;
}

.visit-notes-editor-header-text-note {
  margin-top: 1.375rem;
}

.visit-note-input-container {
  display: flex;
  border-radius: 0.5rem;
  border: 1px solid rgba(194, 194, 214, 0.5);
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  align-items: center;
  padding: 0rem 0.5rem;
}

.visit-note-input {
  margin: 0.5rem 1rem 0 1rem;
  resize: none;
  line-height: 20px;
  display: flex;
  flex: 1;
}

.visit-note-input-container-disabled {
  display: flex;
  align-items: center;
  padding: 0rem 0.5rem;
}

.visit-note-input-container-disabled
  .mdc-text-field--disabled
  .mdc-text-field__input {
  color: var(--color-primary-bold);
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  height: 1rem;
}

.visit-note-input-disabled {
  margin: 0rem;
  padding: 0rem;
  flex-grow: 1;
  height: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}

.visit-note-title-input {
  margin: 0.5rem 1rem 0rem 1rem;
}

.visit-note-input-disabled .mdc-notched-outline {
  display: none;
}

.visit-note-editor-container {
  display: flex;
}

.visit-note-button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.visit-note-save-button {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}

.visit-note-edit-button {
  height: 32px;
  padding: 0 16px;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}

.visit-note-discard-button {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}

.visit-note-close-button {
  height: 32px;
  padding: 0 16px;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}

.visit-note-editor-type-container .mdc-menu-surface--anchor {
  background-color: rgba(112, 116, 245, 0.1);
  border-radius: 0.5rem;
  height: 2rem;
  align-items: center;
  display: flex;
}

.visit-note-editor-type-button .material-icons {
  color: #888cf7;
  order: 1;
  margin-right: 0;
}

.visit-note-editor-type-button .mdc-button__label {
  margin-right: 0.5rem;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-size: 12px;
  color: #888cf7;
  text-transform: capitalize;
}

.visit-notes-editor-simple-soap-content-container {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}

.visit-notes-editor-simple-soap-input-label {
  margin: 1rem 1rem 0rem 1rem;
  color: var(--color-dark-grey);
}

.visit-notes-editor-simple-soap-input {
  margin: 0.5rem 1.5rem 0rem 1rem;
  resize: none;
  height: auto;
  overflow-y: hidden;
  width: calc(100% - 1.5rem);
}

.visit-notes-editor-simple-soap-section-label {
  color: var(--color-primary-bold);
  text-align: left;
  margin: 1rem 1rem 0rem 1rem;
  overflow-wrap: break-word;
}

.visit-notes-editor-simple-soap-section-content {
  color: var(--color-primary-bold);
  text-align: left;
  margin: 0.25rem 1rem 0rem 1rem;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.visit-note-edit-button-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.visit-note-button-divider {
  width: 1px;
  height: 1rem;
  background-color: var(--color-medium-grey);
}

.visit-note-button {
  width: 1rem;
  height: 1rem;
  color: var(--color-dark-grey);
}

.visit-note-button:hover {
  cursor: pointer;
  color: var(--color-medium-quick);
}

.visit-note-button:active {
  color: var(--color-dark-quick);
}

.visit-note-delete-button {
  width: 1rem;
  height: 1rem;
  color: var(--color-dark-grey);
}

.visit-note-delete-button:hover {
  cursor: pointer;
  color: var(--color-medium-red);
}

.visit-note-delete-button:active {
  color: var(--color-dark-red);
}

.visit-note-viewer-container {
  flex-grow: 1;
  margin: 0.5rem 0rem 1rem 0rem;
}

.visit-note-viewer {
  height: 100%;
  padding: 0rem 0.5rem;
  flex-grow: 1;
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  color: var(--color-primary-bold);
}

.visit-note-title-container {
  display: flex;
  align-items: center;
}

.visit-note-draft-status {
  margin-left: 0.5rem;
  align-items: center;
  display: flex;
  padding: 0px 0.5rem;
  border-radius: 1rem;
}

.visit-note-draft-status-selected {
  border: 1px solid var(--color-primary-clean);
  color: var(--color-primary-clean);
}

.visit-note-draft-status-unselected {
  border: 1px solid var(--color-dark-grey);
  color: var(--color-dark-grey);
}

.rich-text-editor-container {
  margin-top: -0.5rem;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
}

.markdown-text-editor-container {
  height: 100%;
}

.markdown-textarea {
  width: 100%;
  margin: 0.5rem;
  flex-grow: 1;
  overflow-y: auto;
  resize: none;
  margin-bottom: 1rem;
}

.markdown-text-editor-container .markdown-textarea {
  height: 100%;
  border: 0px;
  resize: none;
}

.visit-notes-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.visit-note-list-header {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem;
  align-items: center;
}

.add-new-activity-container {
  position: relative;
}

.add-new-activity-button {
  padding: 4px 8px;
  display: flex;
  gap: 46px;
  align-items: center;
}

.add-new-activity-icon {
  display: flex;
  align-items: center;
  width: 1.3rem;
}

.add-new-activity-dropdown {
  position: absolute;
  background: var(--color-primary-clean);
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  z-index: 1;
}

.add-new-activity-dropdown-button {
  padding: 9.5px 1rem;
  width: 100%;
  text-align: left;
}

.visit-note-list-header-title {
  color: var(--color-primary-bold);
}

.visit-note-list {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.visit-note-list-item {
  width: 100%;
  justify-content: space-between;
  display: flex;
  border-bottom: solid 1px var(--color-medium-grey);
}

.visit-note-select-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: left;
  border-radius: 0.5rem;
  overflow: auto;
  border: none;
  flex-direction: column;
  padding: 0px 6px;
}

.visit-note-select-button-unselected {
  background-color: transparent;
}

.visit-note-select-button-unselected:hover {
  cursor: pointer;
  background: var(--color-light-grey);
}

.visit-note-select-button-selected {
  background: var(--color-primary-quick);
}

.visit-note-select-button-selected:hover {
  cursor: pointer;
  background: var(--color-primary-quick);
}

.visit-note-text-selected {
  color: var(--color-primary-clean);
}

.visit-note-text-unselected {
  color: var(--color-primary-bold);
}

.visit-note-date-unselected {
  color: var(--color-dark-grey);
}

.visit-note-icon-unselected .material-icons {
  color: var(--color-dark-grey);
}

.visit-note-icon-selected .material-icons {
  color: var(--color-primary-clean);
}

.visit-note-top-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.visit-note-title {
  margin-left: 0.5rem;
}

#unread-notifs:before {
  margin-top: 8px;
  margin-left: 6px;
  position: absolute;
  content: "";
  background-color: #ff0000;
  border-radius: 50%;
  opacity: 1;
  width: 5px;
  height: 5px;
  pointer-events: none;
}

.inbox-selection-tab-container {
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0rem 0rem 0.5rem 0rem;
  height: 100%;
}

.inbox-selection-tab-message-container-header {
  border-bottom: 1px solid var(--color-medium-grey);
  padding: 0.25rem 0rem;
}

.inbox-selection-tab-message-section {
}

.inbox-selection-tab-message-container-control-button {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  margin: 0rem 0.5rem;
  gap: 0.5rem;
  align-items: center;
}

.inbox-selection-tab-message-container-control-button:hover {
  cursor: pointer;
}

.inbox-selection-tab-message-container-header-icon {
  color: var(--color-dark-grey);
  height: 1.2rem;
  width: 1.2rem;
}

.inbox-selection-tab-message-container-header-title {
  color: var(--color-primary-bold);
}

.inbox-selection-tab-message-container {
  margin: 0rem 0.5rem;
}

.inbox-selection-tab {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  overflow: hidden;
  margin: 0.5rem 0rem;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
}

.inbox-selection-tab-unselected {
  background: transparent;
}

.inbox-selection-tab-unselected:hover {
  cursor: pointer;
  background: var(--color-light-grey);
}

.inbox-selection-tab-selected {
  background: var(--color-primary-quick);
}

.inbox-selection-tab-selected {
  cursor: pointer;
}

.inbox-selection-tab-info-container {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-right: 1rem;
  width: 100%;
}

.inbox-selection-top-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.inbox-selection-bottom-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.inbox-selection-tab-name {
  text-transform: capitalize;
  text-align: left;
  overflow-x: hidden;
}

.inbox-selection-tab-name-selected {
  color: var(--color-primary-clean);
}

.inbox-selection-tab-name-unselected {
  color: var(--color-primary-bold);
}

.inbox-selection-tab-preview-selected {
  color: var(--color-primary-clean);
}

.inbox-selection-tab-preview-unselected {
  color: var(--color-dark-grey);
}

.inbox-selection-tab-count {
  align-items: center;
  display: flex;
  background: var(--color-dark-quick);
  color: var(--color-primary-clean);
  padding: 0rem 0.5rem;
  border-radius: 1rem;
}

.inbox-selection-tab-timestamp-selected {
  color: var(--color-primary-clean);
  min-width: fit-content;
}

.inbox-selection-tab-timestamp-unselected {
  color: var(--color-dark-grey);
  min-width: fit-content;
}

.drafts-selection-tab-container {
  overflow-y: auto;
  height: 100%;
}

.drafts-selection-tab-list-container {
  margin: 0rem 0.5rem;
}

.drafts-selection-tab {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  overflow: hidden;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
}

.drafts-selection-tab-unselected {
  background: transparent;
}

.drafts-selection-tab-unselected:hover {
  cursor: pointer;
  background: var(--color-light-grey);
}

.drafts-selection-tab-selected {
  background: var(--color-primary-quick);
}

.drafts-selection-tab-selected {
  cursor: pointer;
}

.drafts-selection-tab-info-container {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-right: 1rem;
  width: 100%;
}

.drafts-selection-top-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.drafts-selection-bottom-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.drafts-selection-tab-name {
  text-transform: capitalize;
  text-align: left;
}

.drafts-selection-tab-name-selected {
  color: var(--color-primary-clean);
}

.drafts-selection-tab-name-unselected {
  color: var(--color-primary-bold);
}

.drafts-selection-tab-draft-status {
  align-items: center;
  display: flex;
  padding: 0px 0.5rem;
  border-radius: 1rem;
}

.drafts-selection-tab-draft-status-selected {
  border: 1px solid var(--color-primary-clean);
  color: var(--color-primary-clean);
}

.drafts-selection-tab-draft-status-unselected {
  border: 1px solid var(--color-dark-grey);
  color: var(--color-dark-grey);
}

.drafts-selection-tab-timestamp-selected {
  color: var(--color-primary-clean);
  min-width: fit-content;
}

.drafts-selection-tab-timestamp-unselected {
  color: var(--color-dark-grey);
  min-width: fit-content;
}

.drafts-selection-tab-type {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.drafts-selection-tab-type-selected {
  color: var(--color-primary-clean);
}

.drafts-selection-tab-type-unselected {
  color: var(--color-primary-bold);
}

.drafts-selection-tab-type-icon-container {
  display: flex;
}

.drafts-selection-tab-type-icon {
  width: 10px;
}

.chart-note {
  background-color: lightyellow;
  border-radius: 0.5rem;
  margin: 5px;
  padding: 5px;
}

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
  /* background: #ddd; */
}

.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(108, 112, 129, 0.5);
  border-radius: 1000px;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.search-bar-icon {
  display: flex;
  position: absolute;
  left: 1rem;
  align-items: center;
}

.search-bar-input {
  flex-grow: 1;
  padding-right: 1rem;
  padding-left: 3rem;
  height: 40px;
}

.sort-by-selector-container {
  display: flex;
  align-items: center;
  margin: 0rem 1rem;
  margin-bottom: 0.5rem;
  gap: 0.25rem;
  position: relative;
}

.sort-by-selector-dropdown-button {
  display: flex;
  align-items: center;
}

.sort-by-popup {
  position: absolute;
  border: none;
  left: 12%;
  top: 120%;
}

.sort-by-popup:before {
  content: "";
  position: absolute;
  top: -35%;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: white;
  display: inline-block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: drop-shadow(0px 8px 16px rgb(50 51 51 / 16%));
}

.sort-by-popup-inner-container {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  background: var(--color-primary-clean);
  border: none;
  overflow: hidden;
}

.sort-by-button {
  border: none;
  padding: 0.6rem 1rem;
  text-align: left;
}

.sort-by-button:hover {
  background-color: var(--color-light-grey);
  color: var(--color-primary-quick);
  cursor: pointer;
}

.sort-by-button:active {
  background-color: var(--color-light-grey);
  color: var(--color-medium-quick);
}

.sort-by-button-selected {
  background-color: var(--color-light-grey);
  color: var(--color-primary-quick);
}

.sort-by-button-unselected {
  background-color: var(--color-primary-clean);
  color: var(--color-primary-bold);
}

.sort-by-selector-dropdown-icon {
  display: flex;
  align-items: center;
  width: 1rem;
}

/* Monica Pages */

.monica-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.monica-inner-container {
  width: 22.5rem;
}

.monica-logo-container {
  display: block;
  margin: auto;
  flex-direction: column;
  width: 16.5rem;
}

.monica-header-text {
  margin-top: 24px;
  color: var(--color-primary-bold);
}

.monica-instruction-text {
  margin-top: 16px;
  color: var(--color-primary-bold);
}

.monica-email-section-container {
  margin-top: 16px;
  margin-top: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.monica-email-title {
  color: var(--color-primary-bold);
  text-align: left;
}

.monica-terms-container {
  color: var(--color-primary-bold);
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.monica-terms-container {
  margin-top: 16px;
}

.monica-terms-checkbox {
  height: 24px;
  width: 24px;
  margin: 0px 8px 0px 0px;
  border-color: var(--color-medium-grey);
  accent-color: var(--color-primary-quick);
}

.monica-button {
  margin-top: 16px;
  width: 100%;
  padding: 6px;
}

.monica-router-button {
  margin-top: 16px;
  color: var(--color-primary-bold);
}

.full-page-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  grid-column: span 9;
}

.full-page {
  width: 100%;
  height: 100%;
  display: flex;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.right-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.left-pane {
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  position: relative;
  width: 29%;
  flex-shrink: 0;
  max-width: 326px;
  min-width: 300px;
}

.dashboard-inner {
  width: 100%;
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.dashboard-patient-info-tab {
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  min-width: 0;
  overflow-y: auto;
  padding: 1rem 0rem;
  flex-shrink: 0;
  position: relative;
  width: 24.5%;
}

.patient-dropdown-items {
  position: absolute;
  min-height: 95%;
}

.patients-right-dashboard-pane {
  position: relative;
  min-width: 0;
  width: 100%;
  /* border: 3px solid blue; */
  display: grid;
  grid-template-rows: 35% 1fr;
  gap: 1rem;
}

.patients-right-dashboard-pane.one-row {
  grid-template-rows: 1fr;
}

.patients-right-top-dashboard-pane {
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  padding: 0.5rem;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.patinents-right-bottom-dashboard-pane {
  flex-shrink: 0;
  /* border: 3px solid purple; */
  background-color: white;
  border-radius: 0.5rem;
  overflow: auto;
  position: relative;
}

.patients-far-right-pane-container {
  background-color: transparent;
  border-radius: 0.5rem;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 27%;
  flex-shrink: 0;
  position: relative;
}

.span-13 {
  grid-column: span 13;
}

.settings-dashboard-pane-container {
  min-width: 0;
  /* border: 3px solid blue; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  grid-column: span 9;
}

.settings-dashboard-pane {
  /* border: 3px solid orange; */
  background-color: var(--color-primary-clean);
  border-radius: 0.5rem;
  padding: 0.5rem;
  height: 5%;
  flex-grow: 1;
}

.details-icon {
  height: 20px;
  width: 20px;
  margin-left: 4px;
  margin-right: 12px;
}

.expand-bar-vertical {
  background: var(--color-primary-bold);
  height: 30%;
  border: none;
  opacity: 0.15;
  border-radius: 3px;
  padding: 0px;
  width: 3px;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.expand-bar-vertical.expand-bar-vertical-left {
  right: initial;
  left: -0.5rem;
}

.expand-bar-vertical:hover {
  background: var(--color-primary-quick);
  opacity: 1;
  cursor: col-resize;
}

.relative {
  position: relative;
}

.col-span-2 {
  grid-column: span 2;
}

.expand-bar-vertical-horizontal {
  background: var(--color-primary-bold);
  height: 3px;
  border: none;
  opacity: 0.15;
  border-radius: 3px;
  padding: 0px;
  align-self: center;
  width: 30%;
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
}

.expand-bar-vertical-horizontal:hover {
  background: var(--color-primary-quick);
  opacity: 1;
  cursor: row-resize;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-7 {
  grid-column: span 7;
}

.col-span-9 {
  grid-column: span 9;
}

.col-span-5 {
  grid-column: span 5;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-12 {
  grid-column: span 12;
}

.col-span-6 {
  grid-column: span 6;
}

.patient-container {
  display: flex;
  width: 100%;
  gap: 1rem;
  position: relative;
}

.patient-container.info-pane-collapsed {
  padding-left: 0.75rem;
}

.notes-container {
  width: 27%;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  position: absolute;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
  position: absolute;
}

*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(50, 51, 51, 0.5);
}

*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 100px;
}

.scrollbar-always-visible::-webkit-scrollbar-thumb {
  background-color: rgba(50, 51, 51, 0.5) !important;
}

.event-gradient {
  background: linear-gradient(
      0deg,
      rgba(136, 140, 247, 0.1),
      rgba(136, 140, 247, 0.1)
    ),
    #f6f8fa;
}

.arrow-left:before {
  content: "";
  position: absolute;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow-bottom:before {
  content: "";
  position: absolute;
  bottom: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
}

.arrow-top:before {
  content: "";
  position: absolute;
  top: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.arrow-right:before {
  content: "";
  position: absolute;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.arrow-stick-left:before {
  content: "";
  position: absolute;
  left: -24px;
  z-index: 1;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow-stick-right:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -24px;
  border: solid 0.75rem transparent;
  border-top-color: var(--color-primary-clean);
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-bottom: 0.75rem solid var(--color-primary-clean);
}

.slide-up {
  animation: slide-up 0.15s forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

.slide-down {
  animation: slide-down 0.15s forwards;
}

@keyframes slide-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.radio-item {
  --mdc-theme-secondary: var(--color-primary-quick);
  font-family: Poppins, sans-serif;
  font-size: 12px;
}

.radio-item label {
  margin-left: -8px;
}

.radio-item
  .mdc-radio
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  .mdc-radio__outer-circle {
  border-color: #edeff3;
}

.group:hover .group-hover-bg-primary {
  background: var(--color-primary-quick);
}

.group:hover .group-hover-text-white {
  color: var(--color-primary-clean);
}

button[disabled] {
  cursor: default;
}

#calendar-container {
  display: grid;
  grid-template-columns: 80px 1fr;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-4 {
  padding: 1rem;
}